polarvo-layout 1.0.63 → 1.0.65

package/package.json

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

package/src/components/Layout/FreeItem.vue

@@ -43,8 +43,9 @@
       :rootId="item.id"
       :ref="setRef"
       v-bind="item"
+      :isHovable="isHovable"
       class="hover:opacity-80"
-      :class="activeEditMode ? `pointer-events-auto ` : `pointer-events-none`"
+      :class="activeEditMode || isHovable ? `pointer-events-auto ` : `pointer-events-none`"
       @set:defaultStyle="setDefaultStyle"
     />
   </div>
@@ -59,6 +60,7 @@ const props = defineProps({
   item: { type: Object, required: true },
   polarvo: { type: Object, required: true },
   sectionKey: { type: String, required: true },
+  isHovable: { type: Boolean, required: true },
 });
 
 const { activeId, handles, activeElement } = toRefs(props.polarvo.freeDrop.state);

package/src/components/Layout/FreeLayout.vue

@@ -6,6 +6,7 @@
       :item="item"
       :polarvo="props.polarvo"
       :sectionKey="props.sectionKey"
+      :isHovable="isHovable(item)"
     ></FreeItem>
 
     <!-- 오버레이 -->
@@ -68,6 +69,11 @@ const filteredElements = computed(() => {
 const selectedElement = inject('selectedElement');
 const activeEditMode = inject('activeEditMode');
 
+const isHovable = (item) => {
+  if (!item || props.preview) return true;
+  return activeElement.value?.id === item.id && ['chart'].includes(item.type);
+};
+
 let _isElementSwitching = false;
 import { omit, cloneDeep } from 'lodash-es';
 
@@ -79,7 +85,7 @@ watch(
     if (newId && activeElement.value?.section !== props.sectionKey) return;
 
     if (!newId) {
-      console.l
+      console.l;
       setActiveDesign(null);
       setActiveMenu(null);
     }

package/src/components/Layout/GridItem.vue

@@ -41,11 +41,11 @@
         :rootId="item.id"
         :ref="setRef"
         v-bind="item"
+        :isHovable="isHovable"
         class="hover:opacity-80"
-        :class="activeEditMode ? `pointer-events-auto ` : `pointer-events-none`"
-      @set:defaultStyle="setDefaultStyle"
+        :class="activeEditMode || isHovable ? `pointer-events-auto ` : `pointer-events-none`"
+        @set:defaultStyle="setDefaultStyle"
       />
-
       <!-- 오버레이 -->
       <div v-if="activeEditMode && item.id !== activeId" class="absolute inset-0 bg-black opacity-50 z-30"></div>
     </template>
@@ -69,6 +69,7 @@ const props = defineProps({
   item: { type: Object, required: true },
   polarvo: { type: Object, required: true },
   sectionKey: { type: String, required: true },
+  isHovable: { type: Boolean, required: true },
 });
 
 const { activeId } = toRefs(props.polarvo.gridDrop.state);

package/src/components/Layout/GridLayout.vue

@@ -6,6 +6,7 @@
       :item="item"
       :polarvo="props.polarvo"
       :sectionKey="props.sectionKey"
+      :isHovable="isHovable(item)"
     ></GridItem>
 
     <!-- 행 크기 조절 -->
@@ -107,6 +108,11 @@ const { activeDesign } = toRefs(props.polarvo.display.state);
 const selectedElement = inject('selectedElement');
 const activeEditMode = inject('activeEditMode');
 
+const isHovable = (item) => {
+  if (!item || props.preview) return true;
+  return activeElement.value?.id === item.id && ['chart'].includes(item.type);
+};
+
 import { omit, cloneDeep, debounce } from 'lodash-es';
 
 const gridColumns = ref(3); // 동적으로 계산

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(() => {