polarvo-layout 1.0.64 → 1.0.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polarvo-layout",
-  "version": "1.0.64",
+  "version": "1.0.65",
   "type": "module",
   "author": "unigence <unigencelab@gmail.com>",
   "repository": {

package/src/components/SideBar/ElementSideBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="gap-4 space-y-4">
     <div
-      v-for="(item, index) in allElements"
+      v-for="(item, index) in currentElements"
       :key="index"
       class="flex flex-col items-center justify-center border border-gray-200 rounded-lg p-2 hover:bg-gray-50 transition-colors cursor-pointer active:scale-95"
       @mousedown.stop="sectionMode == 'free' ? addElementToFree($event, item) : addElementToGrid(item)"
@@ -12,6 +12,11 @@
   </div>
 </template>
 
+<script>
+let cachedDefaultElements = null;
+let cachedCustomElements = null;
+</script>
+
 <script setup>
 import { ref, onBeforeMount, toRefs, computed } from 'vue';
 
@@ -25,14 +30,32 @@ const props = defineProps({
     required: false,
     default: '',
   },
+  elType: {
+    type: String,
+    required: false,
+    default: 'default',
+  },
+  customElements: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
 });
+
 const { addElement: addElementToFree } = props.polarvo.freeDrop;
 const { addElement: addElementToGrid } = props.polarvo.gridDrop;
 
 const { activeMode } = toRefs(props.polarvo.layout.state);
 const sectionMode = computed(() => activeMode.value);
 
-const allElements = ref([]);
+const allElements = ref({
+  default: [],
+  custom: props.customElements || [],
+});
+
+const currentElements = computed(() => {
+  return allElements.value[props.elType] || [];
+});
 
 /** 프로젝트 폴더에서 요소 컴포넌트 주소를 맞춰줘야 정상 작동합니다.
  * (현재 /src/components/elements/ 내부에 모든 요소 컴포넌트가 있어야 함) */
@@ -42,56 +65,77 @@ const imageModules = import.meta.glob('@/assets/el_img/*.{png,gif}', { eager: tr
 function getPropsDefaults(props) {
   if (!props) return {};
 
-  return Object.fromEntries(Object.entries(props).map(([key, prop]) => {
-    if (['size', 'preview'].includes(key)) return null;
+  return Object.fromEntries(
+    Object.entries(props)
+      .map(([key, prop]) => {
+        if (['size', 'preview'].includes(key)) return null;
 
-    if (prop.default !== undefined) {
-      return [key, typeof prop.default === 'function' ? prop.default() : prop.default];
-    }
-    return null; // 기본값이 없는 경우 null 반환
-  }).filter(entry => entry !== null));
+        if (prop.default !== undefined) {
+          return [key, typeof prop.default === 'function' ? prop.default() : prop.default];
+        }
+        return null; // 기본값이 없는 경우 null 반환
+      })
+      .filter((entry) => entry !== null),
+  );
 }
 
-async function getElements() {
-  // 특정 컴포넌트는 제외
-  const excludedElements = [
-    'button',
-    'labelInput',
-    'labelSelect',
-    'dataList',
-    'multiCheckRadio',
-    'labelInputRows',
-    'refLabel',
-    'labelTextarea',
-    'loginForm',
-    'searchAddress'
-  ];
-
-  const elementsData = Object.keys(modules)
-    .filter((path) => {
-      const elName = path.split('/').pop().replace('.vue', '');
-      return !excludedElements.includes(elName);
-    })
-    .map((path) => {
-      const elName = path.split('/').pop().replace('.vue', '');
-      const propDefaults = getPropsDefaults(modules[path].default?.props);
-
-      // 확장자 조건 설정
+// 기본 요소 목록에서 제외할 컴포넌트
+const EXCLUDED_ELEMENTS = [
+  'button',
+  'labelInput',
+  'labelSelect',
+  'dataList',
+  'multiCheckRadio',
+  'labelInputRows',
+  'refLabel',
+  'labelTextarea',
+  'loginForm',
+  'searchAddress',
+];
+
+function buildDefaultElements() {
+  if (cachedDefaultElements) return cachedDefaultElements;
+
+  cachedDefaultElements = Object.keys(modules)
+    .map((path) => ({ path, elName: path.split('/').pop().replace('.vue', '') }))
+    .filter(({ elName }) => !EXCLUDED_ELEMENTS.includes(elName))
+    .map(({ path, elName }) => {
       const ext = elName === 'dataList' ? 'gif' : 'png';
       const imgKey = `/src/assets/el_img/${elName}.${ext}`;
 
-      let result = {
+      return {
+        elType: 'default',
         elName,
-        propDefaults: propDefaults,
-        // imgurl: new URL(`../../assets/el_img/${elName}.${ext}`, props.urlBase),
+        propDefaults: getPropsDefaults(modules[path].default?.props),
         imgurl: imageModules[imgKey]?.default ?? '',
-        // component: markRaw(defineAsyncComponent(modules[path]))
       };
-
-      return result;
     });
 
-  allElements.value = elementsData;
+  return cachedDefaultElements;
+}
+
+function buildCustomElements() {
+  if (cachedCustomElements) return cachedCustomElements;
+
+  const imgurl = imageModules['/src/assets/el_img/customDefault.png']?.default ?? '';
+
+  cachedCustomElements = props.customElements.map((el) => {
+    const { elName, mode, position, size, section, isLocked, ...propDefaults } = el;
+
+    return {
+      elType: 'custom',
+      elName,
+      propDefaults,
+      imgurl,
+    };
+  });
+
+  return cachedCustomElements;
+}
+
+function getElements() {
+  allElements.value.default = buildDefaultElements();
+  allElements.value.custom = buildCustomElements();
 }
 
 onBeforeMount(() => {