phongdt:add id component

This commit is contained in:
Duong Truong Phong
2024-07-16 11:19:46 +07:00
parent 5a041acd54
commit 5f72a107ce
9 changed files with 18 additions and 7 deletions
@@ -9,6 +9,7 @@ const props = defineProps<{
dataQuery?: any; dataQuery?: any;
layout?: string; layout?: string;
label?: any; label?: any;
component?: any;
}>(); }>();
const LAYOUT_PARSE = computed(() => { const LAYOUT_PARSE = computed(() => {
@@ -51,7 +52,7 @@ const parseData = computed(() => {
</script> </script>
<template> <template>
<article class="card-audio" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']"> <article :id="`cpn_${props.component.id}`" class="card-audio" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']">
<img :src="parseData?.thumbnail ? parseData?.thumbnail : 'https://indiaeducationdiary.in/wp-content/uploads/2021/02/SD-default-image.png'" :alt="parseData?.title?.replace(/<[^>]+>/g, '')" /> <img :src="parseData?.thumbnail ? parseData?.thumbnail : 'https://indiaeducationdiary.in/wp-content/uploads/2021/02/SD-default-image.png'" :alt="parseData?.title?.replace(/<[^>]+>/g, '')" />
<div class="card-audio__content"> <div class="card-audio__content">
<span class="flex justify-center"> <span class="flex justify-center">
@@ -10,6 +10,7 @@ const props = defineProps<{
dataQuery?: any; dataQuery?: any;
layout?: string; layout?: string;
label?: any; label?: any;
component?: any;
}>(); }>();
const LAYOUT_PARSE = computed(() => { const LAYOUT_PARSE = computed(() => {
@@ -27,6 +28,7 @@ const parseData = computed(() => {
<template> <template>
<article <article
v-if="parseData" v-if="parseData"
:id="`cpn_${props.component.id}`"
class="basic-article border-custom" class="basic-article border-custom"
:class="LAYOUT_PARSE['article_Class']" :class="LAYOUT_PARSE['article_Class']"
:style="LAYOUT_PARSE['article']" :style="LAYOUT_PARSE['article']"
@@ -10,6 +10,7 @@ const props = defineProps<{
dataQuery?: any; dataQuery?: any;
layout?: string; layout?: string;
label?: string; label?: string;
component?: any;
}>(); }>();
const LAYOUT_PARSE = computed(() => { const LAYOUT_PARSE = computed(() => {
@@ -44,7 +45,7 @@ const drop = (e: any) => {
</script> </script>
<template> <template>
<article class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']"> <article :id="`cpn_${props.component.id}`" class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']">
<div class="article_miss"> <div class="article_miss">
<template v-if="parseData"> <template v-if="parseData">
<div class="article_miss_thumb custom-thumb" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"></div> <div class="article_miss_thumb custom-thumb" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"></div>
@@ -8,6 +8,7 @@ const props = defineProps<{
dataQuery?: any; dataQuery?: any;
layout?: string; layout?: string;
label?: any; label?: any;
component?: any;
}>(); }>();
const LAYOUT_PARSE = computed(() => { const LAYOUT_PARSE = computed(() => {
@@ -24,6 +25,7 @@ const parseData = computed(() => {
<template> <template>
<article <article
:id="`cpn_${props.component.id}`"
class="basic-article border-custom" class="basic-article border-custom"
:class="LAYOUT_PARSE['article_Class']" :class="LAYOUT_PARSE['article_Class']"
:style="LAYOUT_PARSE['article']" :style="LAYOUT_PARSE['article']"
@@ -6,6 +6,7 @@ const _props = defineProps<{
dataResult?: any; dataResult?: any;
dataQuery?: string; dataQuery?: string;
label?: any; label?: any;
component?: any;
}>(); }>();
const SETTING_OPTIONS = { const SETTING_OPTIONS = {
@@ -37,7 +38,7 @@ const mapActivesToItems = (index: number) => {
</script> </script>
<template> <template>
<div class="categories-container border-custom" :class="designObject['categories_Class']" :style="designObject['div.categories-container']"> <div :id="`cpn_${_props.component.id}`" class="categories-container border-custom" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
<div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']"> <div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']">
<template v-if="!isEmpty(component)"> <template v-if="!isEmpty(component)">
<div> <div>
@@ -6,6 +6,7 @@ const _props = defineProps<{
dataResult?: any; dataResult?: any;
dataQuery?: string; dataQuery?: string;
label?: any; label?: any;
component?: any;
}>(); }>();
const SETTING_OPTIONS = { const SETTING_OPTIONS = {
@@ -37,7 +38,7 @@ const mapActivesToItems = (index: number) => {
</script> </script>
<template> <template>
<div class="categories-container border-custom flex-wrap" :class="designObject['categories_Class']" :style="designObject['div.categories-container']"> <div :id="`cpn_${_props.component.id}`" class="categories-container border-custom flex-wrap" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
<div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']"> <div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']">
<template v-if="!isEmpty(component)"> <template v-if="!isEmpty(component)">
<div class="category-content"> <div class="category-content">
@@ -10,6 +10,7 @@ const _props = defineProps<{
layout?: string; layout?: string;
label?: any; label?: any;
content?: any; content?: any;
component?: any;
}>(); }>();
const SETTING_OPTIONS = { const SETTING_OPTIONS = {
@@ -46,7 +47,7 @@ const mapActivesToItems = (index: number) => {
</script> </script>
<template> <template>
<div class="collection-container border-custom" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']"> <div :id="`cpn_${_props.component.id}`" class="collection-container border-custom" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
<DynamicComponent <DynamicComponent
v-for="(component, index) in _dataResult" v-for="(component, index) in _dataResult"
:key="index" :key="index"
@@ -10,6 +10,7 @@ const _props = defineProps<{
layout?: string; layout?: string;
label?: any; label?: any;
content?: any; content?: any;
component?: any;
}>(); }>();
const SETTING_OPTIONS = { const SETTING_OPTIONS = {
@@ -46,7 +47,7 @@ const mapActivesToItems = (index: number) => {
</script> </script>
<template> <template>
<div class="collection-container border-custom overflow-hidden" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']"> <div :id="`cpn_${_props.component.id}`" class="collection-container border-custom overflow-hidden" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
<DynamicComponent <DynamicComponent
v-for="(component, index) in _dataResult" v-for="(component, index) in _dataResult"
:key="index" :key="index"
@@ -10,6 +10,7 @@ const _props = defineProps<{
layout?: string; layout?: string;
label?: string; label?: string;
content?: any; content?: any;
component?: any;
}>(); }>();
const SETTING_OPTIONS = { const SETTING_OPTIONS = {
@@ -66,7 +67,7 @@ const mapActivesToItems = (index: number) => {
</script> </script>
<template> <template>
<section class="gallery" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" @click="selectComponent" :style="LAYOUT_PARSE['div.collection-container']"> <section :id="`cpn_${_props.component.id}`" class="gallery" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" @click="selectComponent" :style="LAYOUT_PARSE['div.collection-container']">
<div class="wrap" v-for="(component, index) in _dataResult" :key="index"> <div class="wrap" v-for="(component, index) in _dataResult" :key="index">
<DynamicComponent <DynamicComponent
class="abc" class="abc"