polarvo-layout 1.0.0 → 1.0.1

package/README.md

@@ -5,7 +5,7 @@
 
 # 로컬에서 라이브러리 테스트하기
 1) 라이브러리(polavo-layout)에서 ```npm link```
-2) 라이브러리를 사용하려는 프로젝트에서 ```npm link polavo-layout```
+2) 라이브러리를 사용하려는 프로젝트에서 ```npm link polarvo-layout```
 
 # 폴더구조
 src/

package/package.json

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

package/src/components/FastMenu/DesignFastMenu.vue

@@ -23,19 +23,19 @@
 import { toRefs, computed, inject, watch } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
-const { activeDesign } = toRefs(props.polavo.display.state);
-const { setActiveDesign } = props.polavo.display;
+const { activeDesign } = toRefs(props.polarvo.display.state);
+const { setActiveDesign } = props.polarvo.display;
 
-const { activeData, activeSection } = toRefs(props.polavo.layout.state);
+const { activeData, activeSection } = toRefs(props.polarvo.layout.state);
 const sectionMode = computed(() => activeData.value?.mode);
 
-const { activeElement: freeActiveElement } = toRefs(props.polavo.freeDrop.state);
-const { activeElement: gridActiveElement } = toRefs(props.polavo.gridDrop.state);
+const { activeElement: freeActiveElement } = toRefs(props.polarvo.freeDrop.state);
+const { activeElement: gridActiveElement } = toRefs(props.polarvo.gridDrop.state);
 
 const activeElement = computed(() => {
   if (sectionMode.value === 'free') {
@@ -65,7 +65,7 @@ function clickDesignBar(designMenu) {
 
 
 function setComponentDefaults(element) {
-  const child = props.polavo.components.getElement(activeSection.value, element.id);
+  const child = props.polarvo.components.getElement(activeSection.value, element.id);
   if (!child) return;
   selectedChildProps.value = Object.keys(child.$props);
 

package/src/components/FastMenu/DisplayFastMenu.vue

@@ -49,13 +49,13 @@
 import { toRefs } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
-const { displayMode, displaySize } = toRefs(props.polavo.display.state);
-const { setDisplayMode, setDisplaySize } = props.polavo.display;
+const { displayMode, displaySize } = toRefs(props.polarvo.display.state);
+const { setDisplayMode, setDisplaySize } = props.polarvo.display;
 </script>
 
 <style scoped>

package/src/components/FastMenu/HistoryFastMenu.vue

@@ -1,6 +1,8 @@
 <template>
   <!-- editor - title right -->
   <div id="fast-menu" class="flex gap-2 text-gray-400">
+  1111
+   
     <UndoIcon class="size-5 cursor-pointer hover:opacity-70 active:text-blue-600" />
     <RedoIcon class="size-5 cursor-pointer hover:opacity-70 active:text-blue-600" />
   </div>

package/src/components/FastMenu/LayoutFastMenu.vue

@@ -71,14 +71,14 @@
 import { toRefs, computed } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
 
-const { activeSection, activeData, gapSize } = toRefs(props.polavo.layout.state);
-const { setGapSize, setSectionMode, setSectionConfig } = props.polavo.layout;
+const { activeSection, activeData, gapSize } = toRefs(props.polarvo.layout.state);
+const { setGapSize, setSectionMode, setSectionConfig } = props.polarvo.layout;
 const sectionMode = computed(() => activeData.value?.mode);
 </script>
 

package/src/components/IconBar/IconBar.vue

@@ -32,7 +32,7 @@
               class="icon-wrapper text-2xl text-gray-400 p-2 hover"
               title="내부설정"
               :class="{ active: activeMenu === 'projectSetting' }"
-              @click="polavo.display.setActiveMenu('projectSetting')"
+              @click="polarvo.display.setActiveMenu('projectSetting')"
             >
               <font-awesome-icon :icon="['fas', 'computer']" />
               <div class="text-xs text-center col-span-1 w-max">내부설정</div>
@@ -41,7 +41,7 @@
               class="icon-wrapper text-2xl text-gray-400 p-2 hover"
               title="DB관리"
               :class="{ active: activeMenu === 'dbSetting' }"
-              @click="polavo.display.setActiveMenu('dbSetting')"
+              @click="polarvo.display.setActiveMenu('dbSetting')"
             >
               <font-awesome-icon :icon="['fas', 'database']" />
               <div class="text-xs text-center col-span-1 w-max">DB관리</div>
@@ -50,7 +50,7 @@
               class="icon-wrapper text-2xl text-gray-400 p-2 hover"
               title="화면관리"
               :class="{ active: activeMenu === 'screenSetting' }"
-              @click="polavo.display.setActiveMenu('screenSetting')"
+              @click="polarvo.display.setActiveMenu('screenSetting')"
             >
               <font-awesome-icon :icon="['far', 'window-restore']" />
               <div class="text-xs text-center col-span-1 w-max">화면관리</div>
@@ -65,7 +65,7 @@
                 class="icon-wrapper text-2xl text-gray-400 p-2 hover"
                 title="레이아웃"
                 :class="{ active: activeMenu === 'layout' }"
-                @click="polavo.display.setActiveMenu('layout')"
+                @click="polarvo.display.setActiveMenu('layout')"
               >
                 <font-awesome-icon :icon="['fas', 'table-columns']" />
                 <div class="text-xs text-center col-span-1 w-max">레이아웃</div>
@@ -75,7 +75,7 @@
                 class="icon-wrapper text-2xl text-gray-400 p-2 hover"
                 title="요소"
                 :class="{ active: activeMenu === 'element' }"
-                @click="polavo.display.setActiveMenu('element')"
+                @click="polarvo.display.setActiveMenu('element')"
               >
                 <font-awesome-icon :icon="['fas', 'shapes']" />
                 <div class="text-xs text-center col-span-1 w-max">요소</div>
@@ -128,7 +128,7 @@ import { ref, toRefs } from 'vue';
 import { clickOutside } from '../../utils/index.js';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
@@ -141,8 +141,8 @@ const props = defineProps({
     default: false,
   },
 });
-const { activeMenu } = toRefs(props.polavo.display.state);
-const { activeSection } = toRefs(props.polavo.layout.state);
+const { activeMenu } = toRefs(props.polarvo.display.state);
+const { activeSection } = toRefs(props.polarvo.layout.state);
 
 // 디렉티브 등록
 const vClickOutside = clickOutside;
@@ -156,7 +156,7 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 
 async function logout() {
-  const result = await props.polavo.userApi.logout();
+  const result = await props.polarvo.userApi.logout();
   if (result) {
     // 로그아웃 성공 시 라우터 이동
     //서브도메인 제거하기위해 아래와 같이 코드 짰습니다

package/src/components/Layout/BaseLayout.vue

@@ -23,12 +23,12 @@
           {{ key }}
         </div>
         <template v-if="section.mode === 'grid'">
-          <GridLayout :polavo="polavo" :preview="preview" :sectionKey="key"  />
+          <GridLayout :polarvo="polarvo" :preview="preview" :sectionKey="key"  />
         </template>
 
         <template v-else>
           <FreeLayout
-            :polavo="polavo"
+            :polarvo="polarvo"
             :preview="preview"
             :sectionKey="key"
             :isActive="activeSection === key"
@@ -53,7 +53,7 @@ window.oncontextmenu = () => {
 
 const emit = defineEmits(['click:section']);
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
@@ -93,7 +93,7 @@ const getSectionClass = (key, section) => ({
   disabled: activeSection.value != key && !props.preview,
 });
 
-const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polavo.layout.state);
+const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polarvo.layout.state);
 </script>
 
 <style scoped>

package/src/components/Layout/CanvasContainer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full h-full p-4">
     <div id="canvas-container" class="border rounded-md w-full h-full bg-white" :style="containerStyle">
-      <BaseLayout ref="baseLayoutRef" :polavo="polavo" />
+      <BaseLayout ref="baseLayoutRef" :polarvo="polarvo" />
     </div>
   </div>
 </template>
@@ -11,13 +11,13 @@ import { toRefs, inject, computed, provide } from 'vue';
 import BaseLayout from './BaseLayout.vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
 
-const { displaySize } = toRefs(props.polavo.display.state);
+const { displaySize } = toRefs(props.polarvo.display.state);
 const gridSize = computed(() => displaySize.value.gridSize || 16);
 
 const containerStyle = computed(() => {
@@ -35,7 +35,7 @@ const containerStyle = computed(() => {
   };
 });
 
-const { elements } = toRefs(props.polavo.layout.state);
+const { elements } = toRefs(props.polarvo.layout.state);
 
 // 전체 elements
 provide('elements', elements)

package/src/components/Layout/FreeLayout.vue

@@ -76,7 +76,7 @@ import {
 } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
@@ -94,10 +94,10 @@ const props = defineProps({
   },
 });
 
-const { setActiveDesign } = props.polavo.display;
-const { updateActiveElement } = props.polavo.layout;
-const { elements, activeId, handles, guides, activeElement } = toRefs(props.polavo.freeDrop.state);
-const { getElementStyle, toggleLock, startDrag, startResize } = props.polavo.freeDrop;
+const { setActiveDesign } = props.polarvo.display;
+const { updateActiveElement } = props.polarvo.layout;
+const { elements, activeId, handles, guides, activeElement } = toRefs(props.polarvo.freeDrop.state);
+const { getElementStyle, toggleLock, startDrag, startResize } = props.polarvo.freeDrop;
 
 function dynamicComponent(elName) {
   const modules = import.meta.glob('@/components/elements/*.vue');
@@ -114,9 +114,9 @@ function dynamicComponent(elName) {
 
 function setComponentRef(el, elementId) {
   if (el) {
-    props.polavo.components.register('elements', `${props.sectionKey}-${elementId}`, el);
+    props.polarvo.components.register('elements', `${props.sectionKey}-${elementId}`, el);
   } else {
-    props.polavo.components.unregister('elements', `${props.sectionKey}-${elementId}`);
+    props.polarvo.components.unregister('elements', `${props.sectionKey}-${elementId}`);
   }
 }
 
@@ -147,11 +147,11 @@ watch(
 );
 
 onMounted(() => {
-  props.polavo.components.register('sections', props.sectionKey, getCurrentInstance());
+  props.polarvo.components.register('sections', props.sectionKey, getCurrentInstance());
 });
 
 onUnmounted(() => {
-  props.polavo.components.unregister('sections', props.sectionKey);
+  props.polarvo.components.unregister('sections', props.sectionKey);
 });
 </script>
 

package/src/components/Layout/GridLayout.vue

@@ -69,7 +69,7 @@ import {
 } from 'vue';
 const emit = defineEmits(['click:element']);
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
@@ -83,10 +83,10 @@ const props = defineProps({
   },
 });
 
-const { setActiveDesign } = props.polavo.display;
-const { updateActiveElement } = props.polavo.layout;
-const { elements, emptyData, activeCell, activeElement } = toRefs(props.polavo.gridDrop.state);
-const { getElementStyle, setActiveCell, toggleLock, startDrag, detectHoverCell, startResize } = props.polavo.gridDrop;
+const { setActiveDesign } = props.polarvo.display;
+const { updateActiveElement } = props.polarvo.layout;
+const { elements, emptyData, activeCell, activeElement } = toRefs(props.polarvo.gridDrop.state);
+const { getElementStyle, setActiveCell, toggleLock, startDrag, detectHoverCell, startResize } = props.polarvo.gridDrop;
 
 function dynamicComponent(elName) {
   const modules = import.meta.glob('@/components/elements/*.vue');
@@ -103,9 +103,9 @@ function dynamicComponent(elName) {
 
 function setComponentRef(el, elementId) {
   if (el) {
-    props.polavo.components.register('elements', `${props.sectionKey}-${elementId}`, el);
+    props.polarvo.components.register('elements', `${props.sectionKey}-${elementId}`, el);
   } else {
-    props.polavo.components.unregister('elements', `${props.sectionKey}-${elementId}`);
+    props.polarvo.components.unregister('elements', `${props.sectionKey}-${elementId}`);
   }
 }
 
@@ -137,10 +137,10 @@ watch(
 );
 
 onMounted(() => {
-  props.polavo.components.register('sections', props.sectionKey, getCurrentInstance());
+  props.polarvo.components.register('sections', props.sectionKey, getCurrentInstance());
 });
 
 onUnmounted(() => {
-  props.polavo.components.unregister('sections', props.sectionKey);
+  props.polarvo.components.unregister('sections', props.sectionKey);
 });
 </script>

package/src/components/MiniMenu/LayoutMiniMenu.vue

@@ -32,13 +32,13 @@
 import { toRefs, watch } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
-const { layoutName, layoutSource } = toRefs(props.polavo.layout.state);
-const { setLayoutName } = props.polavo.layout;
+const { layoutName, layoutSource } = toRefs(props.polarvo.layout.state);
+const { setLayoutName } = props.polarvo.layout;
 
 const emits = defineEmits(['click:layout']);
 watch(

package/src/components/SideBar/ElementSideBar.vue

@@ -17,7 +17,7 @@
 import { ref, onBeforeMount } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
@@ -27,8 +27,8 @@ const props = defineProps({
     default: '',
   },
 });
-const { addElement: addElementToFree } = props.polavo.freeDrop;
-const { addElement: addElementToGrid } = props.polavo.gridDrop;
+const { addElement: addElementToFree } = props.polarvo.freeDrop;
+const { addElement: addElementToGrid } = props.polarvo.gridDrop;
 
 const allElements = ref([]);
 

package/src/components/SideBar/LayoutSettingSideBar.vue

@@ -76,13 +76,13 @@
 import { toRefs, computed } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
-const { activeData, gapSize, gridNumber, gridRatio } = toRefs(props.polavo.layout.state);
-const { setGapSize, setRatio, setSectionMode, setSectionConfig } = props.polavo.layout;
+const { activeData, gapSize, gridNumber, gridRatio } = toRefs(props.polarvo.layout.state);
+const { setGapSize, setRatio, setSectionMode, setSectionConfig } = props.polarvo.layout;
 
 const sectionMode = computed(() => activeData.value?.mode);
 </script>

package/src/components/SideBar/LayoutSideBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="aspect-[3/2] border border-gray-200 rounded-md bg-white">
-      <BaseLayout id="preview" :polavo="polavo" :preview="true" @click:section="setActiveSection($event)" />
+    <div class="aspect-[3/2] border border-gray-200 rounded-md bg-white ">
+      <BaseLayout id="preview" :polarvo="polarvo" :preview="true" @click:section="setActiveSection($event)" />
       <button
         class="text-sm bg-blue-100 text-center w-full py-1 hover:cursor-pointer hover:bg-blue-200 active:opacity-80"
         @click="setActiveSection(null)"
@@ -62,7 +62,7 @@
       </h5>
       <LayoutSetting
         v-if="activeSection !== null"
-        :polavo="polavo"
+        :polarvo="polarvo"
         class="mt-2 border border-gray-200 rounded-md bg-white"
       />
       <div v-else>
@@ -79,11 +79,11 @@ import BaseLayout from '../Layout/BaseLayout.vue';
 import LayoutSetting from './LayoutSettingSideBar.vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
-const { layoutName, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polavo.layout.state);
-const { setGapSize, setRatio, setActiveSection } = props.polavo.layout;
+const { layoutName, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polarvo.layout.state);
+const { setGapSize, setRatio, setActiveSection } = props.polarvo.layout;
 </script>

package/src/index.js

@@ -2,7 +2,7 @@
 import './styles.scss';
 
 // 라이브러리 함수
-import createPolavoLayout from './library/index.js';
+import createPolarvoLayout from './library/index.js';
 
 // 컴포넌트
 import IconBar from './components/IconBar/IconBar.vue';
@@ -19,7 +19,7 @@ import CanvasContainer from './components/Layout/CanvasContainer.vue';
 
 
 export {
-  createPolavoLayout,
+  createPolarvoLayout,
   IconBar,
   DisplayFastMenu,
   HistoryFastMenu,

package/src/library/index.js

@@ -6,7 +6,7 @@ import useFreeDrop from './FreeDropLibrary.js';
 import useGridDrop from './GridDropLibrary.js';
 import useHistory from './HistoryLibrary.js';
 
-async function createPolavoLayout(config = {}) {
+async function createPolarvoLayout(config = {}) {
   let manager = new EngineManager(config);
   await manager.initialize();
 
@@ -47,4 +47,4 @@ async function createPolavoLayout(config = {}) {
   };
 }
 
-export default createPolavoLayout;
+export default createPolarvoLayout;