init

2024-05-30 18:06:50 +07:00
parent 8ca31c6b18
commit 2aa5607c48
147 changed files with 5815 additions and 1 deletions
@@ -0,0 +1,86 @@
+<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 { isEmpty } from "lodash";
+
+const _props = defineProps<{
+  dataResult?: any[];
+  dataQuery?: string;
+  layout?: string;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 5,
+  TEMPLATE: "Article",
+  LAYOUT: "LAYOUT:vertical"
+};
+
+const LAYOUT_PARSE = computed(() => {
+  const parseLayout = _props.layout?.split("-")?.map((_layout: any) => {
+    const parseItem = _layout.split(":");
+    return {
+      [parseItem[0]]: parseItem[1],
+    };
+  });
+  return Object.assign({}, ...parseLayout);
+}); 
+
+const _dataResult = computed(() => {
+  let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  const result = getInputValue(_props.dataResult, 'ARRAY');
+  result && result.length > 0 && _components.map((_ : any, index : any) => {
+    _components[index] = result[index] || null;
+  })
+  return _components;
+});
+</script>
+
+<template>
+  <div>
+    <div class="collection-container p-2" :class="LAYOUT_PARSE['LAYOUT'] || 'horizontal'">
+      <div v-for="(component, index) in _dataResult" :key="index">
+        <template v-if="!isEmpty(component)">
+          <DynamicComponent
+            :settings="{
+              template: LAYOUT_PARSE.TYPE || SETTING_OPTIONS.TEMPLATE,
+              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>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.collection-container {
+  display: grid;
+  gap: 10px;
+  &.vertical {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  &.horizontal {
+    grid-template-rows: auto;
+    grid-auto-flow: column;
+  }
+  .empty {
+    min-height: 100px;
+    border-radius: 6px;
+    background: #409eff;
+  }
+  &.noData {
+    border-radius: 6px;
+  }
+}
+</style>