phongdt:podcast details

components/dynamic-page/page-component/templates/articles/collections/BasicCollection.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
-import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from '@/utils/parseSQL';
+import { getInputValue } from '@/utils/parseSQL';
 import { isEmpty } from "lodash";
 
 const _props = defineProps<{
@@ -37,7 +37,8 @@ const _dataResult = computed(() => {
 
 <template>
   <div>
-    <div class="collection-container grid gap-5" :class="LAYOUT_PARSE['LAYOUT'] || 'horizontal'">
+    <div class="collection-container grid gap-5" :class="LAYOUT_PARSE['LAYOUT'] || 'horizontal'"
+    :style="`grid-template-columns: repeat(${Number(LAYOUT_PARSE['COLUMN'])}}, minmax(0, 1fr))`">
       <div v-for="(component, index) in _dataResult" :key="index">
         <template v-if="!isEmpty(component)">
           <DynamicComponent
@@ -46,16 +47,6 @@ const _dataResult = computed(() => {
               layout: `LAYOUT:${LAYOUT_PARSE.DATA.toLowerCase()}` || SETTING_OPTIONS.LAYOUT,
               dataResult: { ...component },
             }"
-            @drop-data="dropData"
-          />
-        </template>
-        <template v-else>
-          <DynamicComponent
-            :settings="{
-              template: LAYOUT_PARSE.TYPE || SETTING_OPTIONS.TEMPLATE,
-              layout: `LAYOUT:${LAYOUT_PARSE.DATA.toLowerCase()}` || SETTING_OPTIONS.LAYOUT,
-            }"
-            @drop-data="dropData"
           />
         </template>
       </div>