polarvo-layout 1.0.29 → 1.0.31

package/package.json

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

package/src/components/Layout/FreeItem.vue

@@ -7,9 +7,10 @@
     @mousedown.stop="activeEditMode ? null : handleMouseDown($event, item.id)"
   >
     <!-- 크기-->
-    <div v-if="item.id === activeId" class="absolute bg-blue-400 px-2 py-1 text-sm text-white right-0 z-10 ">
-        가로: {{ size.w }} 세로: {{ size.h }}</div>
-    
+    <div v-if="item.id === activeId" class="absolute bg-blue-400 px-2 py-1 text-sm text-white right-0 z-10">
+      가로: {{ Math.round(size.w) }} 세로: {{ Math.round(size.h) }}
+    </div>
+
     <!-- 리사이즈 핸들 -->
     <div v-if="item.id === activeId" class="absolute inset-0 pointer-events-none">
       <div
@@ -61,7 +62,7 @@ const props = defineProps({
 
 const { activeId, handles, activeElement } = toRefs(props.polarvo.freeDrop.state);
 const { getElementStyle, handleMouseDown, startResize, toggleLock } = props.polarvo.freeDrop;
-const size = computed(() => activeElement.value ? activeElement.value.size : { w: 0, h: 0 });
+const size = computed(() => (activeElement.value ? activeElement.value.size : { w: 0, h: 0 }));
 
 const activeEditMode = inject('activeEditMode');
 function toggleEditMode() {

package/src/components/SideBar/ElementSideBar.vue

@@ -4,7 +4,7 @@
       v-for="(item, index) in allElements"
       :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.elName) : addElementToGrid(item.elName)"
+      @mousedown.stop="sectionMode == 'free' ? addElementToFree($event, item) : addElementToGrid(item)"
     >
       <img :src="item.imgurl" alt="" class="w-24 h-auto rounded" />
       <h4 class="text-sm">{{ item.elName }}</h4>
@@ -36,9 +36,21 @@ const allElements = ref([]);
 
 /** 프로젝트 폴더에서 요소 컴포넌트 주소를 맞춰줘야 정상 작동합니다.
  * (현재 /src/components/elements/ 내부에 모든 요소 컴포넌트가 있어야 함) */
-const modules = import.meta.glob('@/components/elements/*.vue');
+const modules = import.meta.glob('@/components/elements/*.vue', { eager: true });
 const imageModules = import.meta.glob('@/assets/el_img/*.{png,gif}', { eager: true });
 
+function getPropsDefaults(props) {
+  if (!props) return {};
+  return Object.fromEntries(
+    Object.entries(props).map(([key, prop]) => {
+      if (prop.default !== undefined) {
+        return [key, typeof prop.default === 'function' ? prop.default() : prop.default];
+      }
+      return [key, null];
+    })
+  );
+}
+
 async function getElements() {
   // 특정 컴포넌트는 제외
   const excludedElements = [
@@ -59,6 +71,7 @@ async function getElements() {
     })
     .map((path) => {
       const elName = path.split('/').pop().replace('.vue', '');
+      const propDefaults = getPropsDefaults(modules[path].default?.props);
 
       // 확장자 조건 설정
       const ext = elName === 'dataList' ? 'gif' : 'png';
@@ -66,6 +79,7 @@ async function getElements() {
 
       let result = {
         elName,
+        propDefaults: propDefaults,
         // imgurl: new URL(`../../assets/el_img/${elName}.${ext}`, props.urlBase),
         imgurl: imageModules[imgKey]?.default ?? '',
         // component: markRaw(defineAsyncComponent(modules[path]))

package/src/core/engines/FreeDropEngine.js

@@ -362,10 +362,11 @@ class FreeDropEngine {
   /** ---------------------------------- 배치요소 관련 메소드 ---------------------------------- **/
   /** 배치요소 신규 추가 - 메뉴에서 추가 아이템 선택
    * @param {MouseEvent} event - 마우스 이벤트
-   * @param {string} elName - 추가할 아이템 이름
+   * @param {object} item - 추가할 아이템 정보
    */
-  addElement(event, elName) {
+  addElement(event, item) {
     if (this._activeMode !== 'free') return;
+    const elName = item.elName; 
 
     this._startPos = { x: event.clientX, y: event.clientY };
 
@@ -378,6 +379,7 @@ class FreeDropEngine {
       size: elementSource[elName] || { w: 100, h: 100 },
       section: this._activeSection,
       isLocked: false,
+      propDefaults: item.propDefaults || {}, // 아이템의 기본 props 설정
     };
 
     this.setActiveElement(element, 'add');

package/src/core/engines/GridDropEngine.js

@@ -334,15 +334,17 @@ class GridDropEngine {
 
   /** ---------------------------------- 배치요소 관련 메소드 ---------------------------------- **/
   /** 배치요소 신규 추가 - 메뉴에서 추가 아이템 선택
-   * @param {string} elName - 추가할 아이템 이름
+   * @param {object} item - 추가할 아이템 정보
    */
-  addElement(elName) {
+  addElement(item) {
     if (!this._dragState.activeCell) {
       console.error('[GridDropEngine] 활성화된 데이터가 없습니다.');
       return;
     }
     if (this._activeMode !== 'grid') return;
 
+    const elName = item.elName;
+
     const element = {
       id: elName + '_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7),
       type: elName,
@@ -351,6 +353,7 @@ class GridDropEngine {
       size: { colSpan: 1, rowSpan: 1 },
       section: this._activeSection,
       isLocked: false,
+      propDefaults: item.propDefaults || {}, // 아이템의 기본 props 설정
     };
 
     this.setActiveElement(null, 'add');