polarvo-layout 1.0.22 → 1.0.24

package/package.json

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

package/src/components/FastMenu/DesignFastmenu.vue

@@ -52,7 +52,6 @@ const selectedElement = inject('selectedElement');
 // const emits = defineEmits(['click:designBar']);
 function clickDesignBar(designMenu) {
   if (designMenu == 'option') {
-    // 테스트용 -> inputForm만 남기고 추후 삭제 예정
     designMenu = activeElement.value?.type === 'inputForm' ? 'option-form' : 'option-default';
   }
 

package/src/components/Layout/BaseLayout.vue

@@ -79,9 +79,9 @@ const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio }
 
 const getBaseStyle = computed(() => {
   return {
-    // gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}%`).join(' '),
-    // gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}%`).join(' '),
-    // marginRight: layoutType.value === 'no-split' ? '0' : layoutType.value === 'three-column-split' ? '14px' : '8px',
+    gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}%`).join(' '),
+    gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}%`).join(' '),
+    marginRight: layoutType.value === 'no-split' ? '0' : layoutType.value === 'three-column-split' ? '14px' : '8px',
     gap: `${gapSize.value}px`,
   };
 });

package/src/components/Layout/FreeItem.vue

@@ -0,0 +1,169 @@
+<template>
+  <div
+    :id="item.id"
+    class="absolute user-select-none"
+    :style="itemStyle"
+    :class="{ 'z-50': item.id === activeId, 'bg-white border-2 border-blue-400': item.id === activeId }"
+    @mousedown.stop="activeEditMode ? null : handleMouseDown($event, item.id)"
+    >
+    
+    <!-- 리사이즈 핸들 -->
+    <div v-if="item.id === activeId" class="absolute inset-0 pointer-events-none">
+      <div
+        v-for="handle in handles"
+        :key="handle.name"
+        :class="`handle absolute bg-blue-400 z-10 pointer-events-auto hover:bg-blue-700 ${handle.name}`"
+        @mousedown="startResize($event, handle.name)"
+      ></div>
+      <div class="flex flex-row m-1 gap-1">
+        <!-- 잠금 토글-->
+        <div class="z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
+          <LockIcon v-if="item.isLocked" />
+          <UnlockIcon v-else />
+        </div>
+        <!-- 편집 토글-->
+        <div class="z-10 pointer-events-auto cursor-pointer">
+          <div v-if="item.type === 'inputForm'" @click="toggleEditMode">
+            <div v-if="activeEditMode" class="bg-red-100 text-red-400 px-2 py-1 text-sm rounded-md hover:opacity-80 animate-pulse">
+              편집모드 on
+            </div>
+            <div v-else class="bg-gray-100 px-2 py-1 text-sm rounded-md hover:bg-gray-200">편집모드 off</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <component
+      :is="dynamicComponent"
+      :id="`${sectionKey}-${item.id}`"
+      :rootId="item.id"
+      :ref="setRef"
+      v-bind="item"
+      class="hover:opacity-80"
+      :class="activeEditMode ? `pointer-events-auto ` : `pointer-events-none`"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, inject, toRefs, defineAsyncComponent, markRaw } from 'vue';
+import LockIcon from '../../icons/action/LockIcon.vue';
+import UnlockIcon from '../../icons/action/UnlockIcon.vue';
+
+const props = defineProps({
+  item: { type: Object, required: true },
+  polarvo: { type: Object, required: true },
+  sectionKey: { type: String, required: true },
+});
+
+const { activeId, handles } = toRefs(props.polarvo.freeDrop.state);
+const { getElementStyle, handleMouseDown, startResize, toggleLock } = props.polarvo.freeDrop;
+
+const activeEditMode = inject('activeEditMode');
+function toggleEditMode() {
+  activeEditMode.value = !activeEditMode.value;
+}
+
+const itemStyle = computed(() => getElementStyle(props.item));
+
+const _componentCache = new Map();
+const _modules = import.meta.glob('@/components/elements/*.vue');
+
+const dynamicComponent = computed(() => {
+  const elName = props.item.type;
+  if (_componentCache.has(elName)) return _componentCache.get(elName);
+
+  const matched = Object.keys(_modules).find((path) => path.includes(elName));
+  if (!matched) {
+    const fallback = markRaw(defineAsyncComponent(async () => ({ template: '<span style="display:none"></span>' })));
+    _componentCache.set(elName, fallback);
+    return fallback;
+  }
+  const component = markRaw(defineAsyncComponent(_modules[matched]));
+  _componentCache.set(elName, component);
+  return component;
+});
+
+function setRef(el) {
+  if (el) {
+    props.polarvo.components.register('elements', `${props.sectionKey}-${props.item.id}`, el);
+  } else {
+    props.polarvo.components.unregister('elements', `${props.sectionKey}-${props.item.id}`);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.handle {
+  // 모서리
+  &.nw {
+    top: -4px;
+    left: -4px;
+    width: 8px;
+    height: 8px;
+    cursor: nw-resize;
+  }
+
+  &.ne {
+    top: -4px;
+    right: -4px;
+    width: 8px;
+    height: 8px;
+    cursor: ne-resize;
+  }
+
+  &.sw {
+    bottom: -4px;
+    left: -4px;
+    width: 8px;
+    height: 8px;
+    cursor: sw-resize;
+  }
+
+  &.se {
+    bottom: -4px;
+    right: -4px;
+    width: 8px;
+    height: 8px;
+    cursor: se-resize;
+  }
+
+  // 가장자리
+  &.n {
+    top: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 8px;
+    height: 8px;
+    cursor: n-resize;
+  }
+
+  &.s {
+    bottom: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 8px;
+    height: 8px;
+    cursor: s-resize;
+  }
+
+  &.w {
+    top: 50%;
+    left: -4px;
+    transform: translateY(-50%);
+    width: 8px;
+    height: 8px;
+    cursor: w-resize;
+  }
+
+  &.e {
+    top: 50%;
+    right: -4px;
+    transform: translateY(-50%);
+    width: 8px;
+    height: 8px;
+    cursor: e-resize;
+  }
+}
+</style>

package/src/components/Layout/FreeLayout.vue

@@ -1,50 +1,12 @@
 <template>
   <div v-if="!preview">
-    <div
+    <FreeItem
       v-for="(item, index) in filteredElements"
       :key="item.id"
-      :id="item.id"
-      class="absolute user-select-none"
-      :style="getElementStyle(item)"
-      :class="{ 'z-50': item.id === activeId, 'bg-white border-2 border-blue-400': item.id === activeId }"
-      @mousedown.stop="activeEditMode ? null : handleMouseDown($event, item.id)"
-    >
-      <!-- 리사이즈 핸들 -->
-      <div v-if="item.id === activeId" class="absolute inset-0 pointer-events-none">
-        <div
-          v-for="handle in handles"
-          :key="handle.name"
-          :class="`handle absolute bg-blue-400 z-10 pointer-events-auto hover:bg-blue-700 ${handle.name}`"
-          @mousedown="startResize($event, handle.name)"
-        ></div>
-        <div class="flex flex-row m-1 gap-1">
-          <!-- 잠금 토글-->
-          <div class="z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
-            <LockIcon v-if="item.isLocked" />
-            <UnlockIcon v-else />
-          </div>
-          <!-- 편집 토글-->
-          <div class="z-10 pointer-events-auto cursor-pointer">
-            <div v-if="item.type === 'inputForm'" @click="toggleEditMode">
-              <div v-if="activeEditMode" class="bg-red-100 text-red-400 px-2 py-1 text-sm rounded-md hover:opacity-80 animate-pulse">
-                편집모드 on
-              </div>
-              <div v-else class="bg-gray-100 px-2 py-1 text-sm rounded-md hover:bg-gray-200">편집모드 off</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <component
-        :is="dynamicComponent(item.type)"
-        :id="`${sectionKey}-${item.id}`"
-        :rootId="item.id"
-        :ref="(el) => setComponentRef(el, item.id)"
-        v-bind="item"
-        class="hover:opacity-80"
-        :class="activeEditMode ? `pointer-events-auto ` : `pointer-events-none`"
-      />
-    </div>
+      :item="item"
+      :polarvo="props.polarvo"
+      :sectionKey="props.sectionKey"
+    ></FreeItem>
 
     <!-- 오버레이 -->
     <div v-if="activeEditMode" class="absolute inset-0 bg-black opacity-50"></div>
@@ -68,20 +30,9 @@
 </template>
 
 <script setup>
-import LockIcon from '../../icons/action/LockIcon.vue';
-import UnlockIcon from '../../icons/action/UnlockIcon.vue';
+import FreeItem from './FreeItem.vue';
 
-import {
-  toRefs,
-  defineAsyncComponent,
-  markRaw,
-  getCurrentInstance,
-  onMounted,
-  onUnmounted,
-  inject,
-  watch,
-  computed,
-} from 'vue';
+import { toRefs, getCurrentInstance, onMounted, onUnmounted, inject, watch, computed } from 'vue';
 
 const props = defineProps({
   polarvo: {
@@ -108,48 +59,14 @@ const props = defineProps({
 
 const { setActiveDesign } = props.polarvo.display;
 const { updateActiveElement } = props.polarvo.layout;
-const { elements, activeId, handles, guides, activeElement } = toRefs(props.polarvo.freeDrop.state);
-const { getElementStyle, toggleLock, handleMouseDown, startResize } = props.polarvo.freeDrop;
+const { elements, guides, activeElement } = toRefs(props.polarvo.freeDrop.state);
 const filteredElements = computed(() => {
   return elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey);
 });
 
-const _componentCache = new Map();
-const modules = import.meta.glob('@/components/elements/*.vue');
-
-function dynamicComponent(elName) {
-  if (_componentCache.has(elName)) {
-    return _componentCache.get(elName);
-  }
-
-  const matched = Object.keys(modules).find((path) => {
-    return path.includes(elName);
-  });
-
-  if (!matched) {
-    return markRaw(defineAsyncComponent(async () => ({ template: '<span style="display:none"></span>' })));
-  }
-
-  const component = markRaw(defineAsyncComponent(modules[matched]));
-  _componentCache.set(elName, component);
-  return component;
-}
-
-function setComponentRef(el, elementId) {
-  if (el) {
-    props.polarvo.components.register('elements', `${props.sectionKey}-${elementId}`, el);
-  } else {
-    props.polarvo.components.unregister('elements', `${props.sectionKey}-${elementId}`);
-  }
-}
-
 const selectedElement = inject('selectedElement');
 const activeEditMode = inject('activeEditMode');
 
-function toggleEditMode() {
-  activeEditMode.value = !activeEditMode.value;
-}
-
 let _isElementSwitching = false;
 import { omit, cloneDeep } from 'lodash-es';
 watch(
@@ -159,6 +76,7 @@ watch(
     if (!newId) {
       setActiveDesign(null);
     }
+
     _isElementSwitching = true;
     // selectedElement.value = structuredClone(toRaw(activeElement.value));
     selectedElement.value = cloneDeep(activeElement.value);
@@ -194,77 +112,6 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.handle {
-  // 모서리
-  &.nw {
-    top: -4px;
-    left: -4px;
-    width: 8px;
-    height: 8px;
-    cursor: nw-resize;
-  }
-
-  &.ne {
-    top: -4px;
-    right: -4px;
-    width: 8px;
-    height: 8px;
-    cursor: ne-resize;
-  }
-
-  &.sw {
-    bottom: -4px;
-    left: -4px;
-    width: 8px;
-    height: 8px;
-    cursor: sw-resize;
-  }
-
-  &.se {
-    bottom: -4px;
-    right: -4px;
-    width: 8px;
-    height: 8px;
-    cursor: se-resize;
-  }
-
-  // 가장자리
-  &.n {
-    top: -4px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 8px;
-    height: 8px;
-    cursor: n-resize;
-  }
-
-  &.s {
-    bottom: -4px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 8px;
-    height: 8px;
-    cursor: s-resize;
-  }
-
-  &.w {
-    top: 50%;
-    left: -4px;
-    transform: translateY(-50%);
-    width: 8px;
-    height: 8px;
-    cursor: w-resize;
-  }
-
-  &.e {
-    top: 50%;
-    right: -4px;
-    transform: translateY(-50%);
-    width: 8px;
-    height: 8px;
-    cursor: e-resize;
-  }
-}
 
 .guide {
   &.vertical {

package/src/components/Layout/GridItem.vue

@@ -0,0 +1,108 @@
+<template>
+  <div
+    :id="item.id ?? `${item.row}-${item.col}`"
+    :class="
+      item.id
+        ? ['relative bg-gray-200 user-select-none', { 'z-50 bg-white border-2 border-blue-400': item.id === activeId }]
+        : 'flex items-center justify-center bg-gray-100 border border-gray-300'
+    "
+    :style="itemStyle"
+    @mousedown.stop="activeEditMode ? null : handleMouseDown($event, item)"
+    @mouseenter="item.id ? null : detectHoverCell(item)"
+  >
+    <template v-if="item.id">
+      <!-- 리사이즈 핸들 -->
+      <div v-if="item.id === activeId" class="absolute inset-0 pointer-events-none">
+        <div
+          class="absolute w-4 h-4 bottom-0 right-0 bg-blue-400 z-10 pointer-events-auto cursor-se-resize"
+          @mousedown="startResize($event, item.id)"
+        ></div>
+        <div class="flex gap-1 m-1">
+          <!-- 잠금 토글-->
+          <div class="z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
+            <LockIcon v-if="item.isLocked" />
+            <UnlockIcon v-else />
+          </div>
+          <!-- 편집 토글-->
+          <div class="z-10 pointer-events-auto cursor-pointer">
+            <div v-if="item.type === 'inputForm'" @click="toggleEditMode">
+              <div v-if="activeEditMode" class="bg-red-100 text-red-400 px-2 py-1 text-sm rounded-md hover:opacity-80 animate-pulse">
+                편집모드 on
+              </div>
+              <div v-else class="bg-gray-100 px-2 py-1 text-sm rounded-md hover:bg-gray-200">편집모드 off</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <component
+        :is="dynamicComponent"
+        :id="`${sectionKey}-${item.id}`"
+        :rootId="item.id"
+        :ref="setRef"
+        v-bind="item"
+        class="hover:opacity-80"
+        :class="activeEditMode ? `pointer-events-auto ` : `pointer-events-none`"
+      />
+
+      <!-- 오버레이 -->
+      <div v-if="activeEditMode && item.id !== activeId" class="absolute inset-0 bg-black opacity-50"></div>
+    </template>
+
+    <template v-else>
+      <div
+        class="text-sm w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-500 hover:bg-blue-200 hover:text-white transition-colors cursor-pointer"
+      >
+        +
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject, toRefs, defineAsyncComponent, markRaw } from 'vue';
+import LockIcon from '../../icons/action/LockIcon.vue';
+import UnlockIcon from '../../icons/action/UnlockIcon.vue';
+
+const props = defineProps({
+  item: { type: Object, required: true },
+  polarvo: { type: Object, required: true },
+  sectionKey: { type: String, required: true },
+});
+
+const { activeId } = toRefs(props.polarvo.gridDrop.state);
+const { getElementStyle, toggleLock, handleMouseDown, detectHoverCell, startResize } = props.polarvo.gridDrop;
+
+const activeEditMode = inject('activeEditMode');
+function toggleEditMode() {
+  activeEditMode.value = !activeEditMode.value;
+}
+
+const itemStyle = computed(() => getElementStyle(props.item.id ? 'element' : 'empty', props.item));
+
+const _componentCache = new Map();
+const _modules = import.meta.glob('@/components/elements/*.vue');
+
+const dynamicComponent = computed(() => {
+  const elName = props.item.type;
+  if (_componentCache.has(elName)) return _componentCache.get(elName);
+
+  const matched = Object.keys(_modules).find((path) => path.includes(elName));
+  if (!matched) {
+    const fallback = markRaw(defineAsyncComponent(async () => ({ template: '<span style="display:none"></span>' })));
+    _componentCache.set(elName, fallback);
+    return fallback;
+  }
+  const component = markRaw(defineAsyncComponent(_modules[matched]));
+  _componentCache.set(elName, component);
+  return component;
+});
+
+function setRef(el) {
+  if (el) {
+    props.polarvo.components.register('elements', `${props.sectionKey}-${props.item.id}`, el);
+  } else {
+    props.polarvo.components.unregister('elements', `${props.sectionKey}-${props.item.id}`);
+  }
+}
+</script>

package/src/components/Layout/GridLayout.vue

@@ -1,76 +1,23 @@
 <template>
   <template v-if="!preview">
-    <div
+    <GridItem
       v-for="(item, index) in mergedData"
-      :key="item.id ?? `${item.row}-${item.col}`"
-      :id="item.id ?? `${item.row}-${item.col}`"
-      :style="getElementStyle(item.id ? 'element' : 'empty', item)"
-      :class="
-        item.id
-          ? ['relative bg-gray-200', { 'z-50 bg-white border-2 border-blue-400': item.id === activeId }]
-          : 'flex items-center justify-center bg-gray-100 border border-gray-300'
-      "
-      @mousedown="activeEditMode ? null : handleMouseDown($event, item)"
-      @mouseenter="item.id ? null : detectHoverCell(item)"
-    >
-      <template v-if="item.id">
-        <div>
-          <!-- 리사이즈 핸들 -->
-          <div v-if="item.id === activeId">
-            <div
-              class="absolute w-4 h-4 bottom-0 right-0 bg-blue-400 z-10 cursor-se-resize"
-              @mousedown="startResize($event, item.id)"
-            ></div>
-            <div class="flex gap-1 m-1">
-              <!-- 잠금 토글-->
-              <div class="z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
-                <LockIcon v-if="item.isLocked" />
-                <UnlockIcon v-else />
-              </div>
-              <!-- 편집 토글-->
-              <div class="z-10 pointer-events-auto cursor-pointer">
-                <div v-if="item.type === 'inputForm'" @click="toggleEditMode">
-                  <div v-if="activeEditMode" class="bg-red-100 text-red-400 px-2 py-1 text-sm rounded-md hover:opacity-80 animate-pulse">
-                    편집모드 on
-                  </div>
-                  <div v-else class="bg-gray-100 px-2 py-1 text-sm rounded-md hover:bg-gray-200">편집모드 off</div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <component
-            :is="dynamicComponent(item.type)"
-            :id="`${sectionKey}-${item.id}`"
-            :rootId="item.id"
-            :ref="(el) => setComponentRef(el, item.id)"
-            v-bind="item"
-            class="hover:opacity-80"
-            :class="activeEditMode ? `pointer-events-auto ` : `pointer-events-none`"
-          />
-        </div>
-
-        <!-- 오버레이 -->
-        <div v-if="activeEditMode && item.id !== activeId" class="absolute inset-0 bg-black opacity-50"></div>
-      </template>
-
-      <template v-else>
-        <div
-          class="text-sm w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-500 hover:bg-blue-200 hover:text-white transition-colors cursor-pointer"
-        >
-          +
-        </div>
-      </template>
-    </div>
+      :key="item.id || `empty-${index}`"
+      :item="item"
+      :polarvo="props.polarvo"
+      :sectionKey="props.sectionKey"
+    ></GridItem>
+
+    <!-- 오버레이 -->
+    <div v-if="activeEditMode" class="absolute inset-0 bg-black opacity-50"></div>
   </template>
 </template>
 
 <script setup>
-import LockIcon from '../../icons/action/LockIcon.vue';
-import UnlockIcon from '../../icons/action/UnlockIcon.vue';
+import GridItem from './GridItem.vue';
+
+import { toRefs, getCurrentInstance, onMounted, onUnmounted, inject, watch, computed } from 'vue';
 
-import { toRefs, ref, defineAsyncComponent, markRaw, getCurrentInstance, onMounted, onUnmounted, inject, watch, computed } from 'vue';
-const emit = defineEmits(['click:element']);
 const props = defineProps({
   polarvo: {
     type: Object,
@@ -121,42 +68,9 @@ const mergedData = computed(() => {
   return [...filled, ...empty];
 });
 
-const _componentCache = new Map();
-const modules = import.meta.glob('@/components/elements/*.vue');
-
-function dynamicComponent(elName) {
-  if (_componentCache.has(elName)) {
-    return _componentCache.get(elName);
-  }
-
-  const matched = Object.keys(modules).find((path) => {
-    return path.includes(elName);
-  });
-
-  if (!matched) {
-    return markRaw(defineAsyncComponent(async () => ({ template: '<span style="display:none"></span>' })));
-  }
-
-  const component = markRaw(defineAsyncComponent(modules[matched]));
-  _componentCache.set(elName, component);
-  return component;
-}
-
-function setComponentRef(el, elementId) {
-  if (el) {
-    props.polarvo.components.register('elements', `${props.sectionKey}-${elementId}`, el);
-  } else {
-    props.polarvo.components.unregister('elements', `${props.sectionKey}-${elementId}`);
-  }
-}
-
 const selectedElement = inject('selectedElement');
 const activeEditMode = inject('activeEditMode');
 
-function toggleEditMode() {
-  activeEditMode.value = !activeEditMode.value;
-}
-
 let _isElementSwitching = false;
 import { omit, cloneDeep } from 'lodash-es';
 watch(