@neatui/nuxt 0.1.0 → 1.0.0

package/package.json

@@ -1,33 +1,51 @@
 {
   "name": "@neatui/nuxt",
-  "version": "0.1.0",
-  "description": "basic component ui",
-  "main": "./src/index.ts",
+  "version": "1.0.0",
+  "description": "NeatUI component library for Nuxt 3",
+  "main": "./src/module.ts",
+  "types": "./src/module.ts",
+  "exports": {
+    ".": {
+      "types": "./src/module.ts",
+      "import": "./src/module.ts",
+      "require": "./src/module.ts"
+    }
+  },
   "license": "MIT",
   "author": "xiaojunbo",
+  "keywords": ["nuxt", "nuxt-module", "vue", "ui", "components"],
   "peerDependencies": {
+    "@nuxt/kit": "^3.0.0",
+    "nuxt": "^3.0.0",
     "vue": "^3.2.0"
   },
   "scripts": {
-    "build": "rollup -c rollup.config.js"
+    "dev": "nuxi dev playground",
+    "dev:prepare": "nuxi prepare playground",
+    "release": "npm publish",
+    "lint": "echo 'No lint configured'",
+    "test": "echo 'No tests configured'"
   },
   "devDependencies": {
+    "@nuxt/kit": "^3.0.0",
+    "@nuxt/schema": "^3.0.0",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@types/sortablejs": "^1.15.8",
+    "nuxt": "^3.0.0",
     "postcss-scss": "^4.0.9",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "^5.1.6"
   },
   "dependencies": {
-    "@fekit/floor": "^2.2.2",
-    "@fekit/follow": "^1.0.10",
+    "@fekit/floor": "^3.0.1",
+    "@fekit/follow": "^1.7.0",
     "@fekit/itable": "^1.1.6",
     "@fekit/pullload": "^1.3.5",
     "@fekit/scale": "^2.0.1",
     "@fekit/scrollto": "^3.0.3",
-    "@fekit/toast": "^2.2.3",
-    "@fekit/url": "^2.0.1",
-    "@fekit/utils": "^2.10.21",
+    "@fekit/toast": "^2.7.2",
+    "@fekit/utils": "^4.3.1",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",
@@ -36,8 +54,8 @@
     "rollup": "^4.18.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-vue": "^6.0.0",
+    "sortablejs": "^1.15.6",
     "swiper": "^11.0.4",
-    "vue-cropper": "^0.6.4",
-    "vuedraggable": "^4.1.0"
+    "vue-cropper": "^0.6.4"
   }
 }

package/src/components/basic/IDraggable.vue

@@ -1,84 +1,106 @@
 <template>
-  <ul>
-    <li
-      v-for="(item, idx) in list || []"
-      :key="idx"
-      class="pr drag-page-move n-sm"
-      draggable="true"
-      @dragstart.self="fMoveSta($event, list, idx)"
-      @dragend.self="fMoveEnd($event, list, idx)"
-      @dragenter.self="fMoveInt($event, list, idx)"
-      @dragover.prevent="fMoveIng($event)"
-      @dragleave="fMoveOut($event)"
-    >
+  <ul ref="listRef" class="drag-list">
+    <li v-for="(item, idx) in props.lists" :key="item.id ?? item.field ?? idx" class="pr drag-page-move">
       <slot :item="item" :idx="idx">{{ item.label }}</slot>
     </li>
   </ul>
 </template>
 
 <script setup lang="ts">
-  import { reactive, PropType } from 'vue';
+  import { ref, PropType, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+  import Sortable, { SortableEvent } from 'sortablejs';
+
   const props = defineProps({
-    list: {
+    lists: {
       type: Array as PropType<any[]>,
-      default: () => []
-    }
+      default: () => [],
+    },
   });
-  const state: any = reactive({});
+  const emit = defineEmits(['update:lists']);
 
-  // 按下
-  const fMoveSta = (e: any, arr: any, idx: any) => {
-    state.__page_moveing = 1;
-    state.__page_moveStaNode = { e, arr, idx };
-  };
-  // 移动
-  const fMoveIng = (e: any) => {
-    if (state.__page_moveing) {
-      const _h = e?.target?.getBoundingClientRect()?.height || 0;
-      const _v = _h / 2 > 0 ? _h / 2 : 0;
-      state.__page_moveEndNodeIsNext = e?.layerY > _v ? 1 : 0;
-      console.log(40, e, _v, e?.layerY > _v ? 'next' : 'prev');
-      e?.target?.setAttribute('data-ins', e?.layerY > _v ? 'next' : 'prev');
-    }
-  };
-  // 移入
-  const fMoveInt = (e: any, arr: any, idx: any, page: any = '') => {
-    if (state.__page_moveing) {
-      state.__page_moveEndNode = { e, arr, idx, page };
-    }
-  };
-  // 移出
-  const fMoveOut = (e: any) => {
-    if (state.__page_moveing) {
-      e?.target?.removeAttribute('data-ins');
-    }
-  };
-  // 松开
-  const fMoveEnd = (_e: any, arr: any, i2: any) => {
-    if (state.__page_moveing) {
-      if (state.__page_moveEndNode) {
-        const [item] = arr.splice(i2, 1);
-        let idx = state.__page_moveEndNode?.idx || 0;
-        if (state.__page_moveEndNodeIsNext && i2 >= idx) {
-          idx = idx + 1;
-        }
-        if (!state.__page_moveEndNodeIsNext && i2 < idx) {
-          idx = idx - 1;
-        }
-        state.__page_moveEndNode?.arr?.splice(idx, 0, item);
-        fMoveOut(state.__page_moveEndNode?.e);
+  const listRef = ref<HTMLElement | null>(null);
+  let sortable: Sortable | null = null;
+
+  // 添加调试日志
+  watch(
+    () => props.lists,
+    (newVal, oldVal) => {
+      // console.log('IDraggable props.lists changed:', {
+      //   newLength: newVal?.length,
+      //   oldLength: oldVal?.length,
+      //   newVal: newVal?.map((item) => item.label || item.field),
+      //   oldVal: oldVal?.map((item) => item.label || item.field)
+      // });
+    },
+    { deep: true },
+  );
+
+  onMounted(() => {
+    nextTick(() => {
+      if (listRef.value) {
+        sortable = Sortable.create(listRef.value, {
+          animation: 200,
+          ghostClass: 'drag-ghost',
+          chosenClass: 'drag-chosen',
+          dragClass: 'drag-dragging',
+          onEnd(evt: SortableEvent) {
+            console.log('Sortable onEnd:', { oldIndex: evt.oldIndex, newIndex: evt.newIndex });
+
+            if (evt.oldIndex !== undefined && evt.newIndex !== undefined && evt.oldIndex !== evt.newIndex) {
+              // 创建新的数组顺序
+              const newList = [...props.lists];
+              const moved = newList.splice(evt.oldIndex, 1)[0];
+              newList.splice(evt.newIndex, 0, moved);
+
+              console.log(
+                'Emitting new list:',
+                newList.map((item) => item.label || item.field),
+              );
+
+              // 通知父组件更新数据
+              emit('update:lists', newList);
+            }
+          },
+        });
       }
-      state.__page_moveing = 0;
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (sortable) {
+      sortable.destroy();
+      sortable = null;
     }
-  };
+  });
 </script>
+
 <style lang="scss">
+  .drag-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
   .drag-page-move {
-    &[data-ins='prev'] {
-      box-shadow: inset 0 1px 0 0 #000;
-    }
-    &[data-ins='next'] {
-      box-shadow: inset 0 -1px 0 0 #000;
+    cursor: move;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.02);
     }
   }
+  .drag-ghost {
+    opacity: 0.4;
+    background: rgba(0, 0, 0, 0.05);
+    border: 2px dashed #ddd;
+  }
+  .drag-chosen {
+    background: rgba(24, 144, 255, 0.08);
+  }
+  .drag-dragging {
+    opacity: 0.8;
+    background: #fff;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    z-index: 1000;
+  }
 </style>

package/src/components/basic/IFollowView.vue

@@ -3,23 +3,24 @@
     <slot>
       <button ui-btn="@a s case :border"><i class="icon icon-dropdown"></i></button>
     </slot>
-  </div>
-  <Teleport to="#ifollow" v-if="$slots.tips">
-    <div
-      ref="tip"
-      :class="tipClass"
-      :style="`position: fixed; pointer-events: none; ${tipStyle}`"
-      ui-tips="@a"
-      :ui-tips-view="state.show ? 1 : 0"
-      @mouseover="hovershow"
-      @mouseout="hoverhide"
-    >
-      <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle" @mousedown="downdom">
-        <slot name="tips"></slot>
-        <div v-if="arrow" ui-tips-arrow="" v-bind="arrow"></div>
+    <Teleport to="#ifollow" v-if="$slots.tips">
+      <div
+        ref="tip"
+        :class="tipClass"
+        :style="`position: fixed; pointer-events: none; ${tipStyle}`"
+        ui-tips="@a"
+        :ui-tips-view="state.show ? 1 : 0"
+        @mouseover="hovershow"
+        @mouseout="hoverhide"
+        @click="clickhide"
+      >
+        <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle" @mousedown="downdom">
+          <slot name="tips"></slot>
+          <div v-if="arrow" ui-tips-arrow="" v-bind="arrow"></div>
+        </div>
       </div>
-    </div>
-  </Teleport>
+    </Teleport>
+  </div>
 </template>
 <script setup lang="ts">
   import { reactive, ref, onMounted, onUnmounted, watch } from 'vue';
@@ -46,6 +47,7 @@
     tipBoxClass?: string;
     tipBoxStyle?: string;
     arrow?: any;
+    clickTipHide?: boolean;
   }
 
   // 入参
@@ -54,12 +56,13 @@
     pos: 'bl',
     event: 'click',
     btnClass: 'dib',
-    btnStyle: 'dib',
+    btnStyle: '',
     tipClass: '',
     tipStyle: '',
     tipBoxClass: '',
     tipBoxStyle: '',
-    arrow: {}
+    arrow: {},
+    clickTipHide: false,
   });
 
   const dom: any = ref(null);
@@ -70,7 +73,7 @@
     show: 0,
     pos: props.pos,
     hover: 0,
-    tipdom: false
+    tipdom: false,
   });
 
   const showTimer: any = ref(null);
@@ -89,7 +92,7 @@
           state.show = 0;
         }, 100);
       }
-    }
+    },
   );
 
   // 开关
@@ -109,7 +112,7 @@
       }
       emits('update:modelValue', state.show);
     },
-    { deep: true }
+    { deep: true },
   );
 
   const hovershow = () => {
@@ -124,6 +127,12 @@
     }
   };
 
+  const clickhide = () => {
+    if (props.clickTipHide) {
+      state.show = 0;
+    }
+  };
+
   const show = () => {
     state.show = 1;
   };
@@ -199,13 +208,13 @@
           ex.value.remove();
         }
       }
-    }
+    },
   );
 
   defineExpose({
     toggle,
     show,
     hide,
-    cancel
+    cancel,
   });
 </script>

package/src/components/basic/IRouterView.vue

@@ -5,7 +5,7 @@
     </div>
     <div :class="itemClass" :style="itemStyle" am-view-item="item" ref="itemRef" v-if="view === 'iteming' || view === 'listing' || view === 'item'">
       <div class="iroute-view-dark" @click="cancel"></div>
-      <div class="iroute-view-body" :style="mode === 'preview' || mode === 'pop-up' ? 'box-shadow: rgba(0, 0, 0, 0.08) -5px 0px 10px 0px;' : 'width: 100%;'">
+      <div class="iroute-view-body" :style="mode === 'preview' || mode === 'pop-up' ? '' : 'width: 100%;'">
         <slot name="item" :mode="mode"></slot>
       </div>
     </div>
@@ -36,12 +36,12 @@
     listClass: 'full',
     listStyle: '',
     itemClass: 'full',
-    itemStyle: ''
+    itemStyle: '',
   });
   const state: any = reactive({
     first: 1,
     list: null,
-    item: null
+    item: null,
   });
 
   const evs = (v: any = 'list', p: any = 'item') => {
@@ -60,7 +60,7 @@
             }
           }
         },
-        { deep: true, immediate: true }
+        { deep: true, immediate: true },
       );
     };
   };
@@ -106,6 +106,7 @@
 
 <style lang="scss">
   .iroute-view-dark {
+    pointer-events: auto;
     position: absolute;
     width: 100%;
     height: 100%;
@@ -113,14 +114,19 @@
     top: 0;
   }
   .iroute-view-body {
+    pointer-events: none;
+    position: relative;
+    display: flex;
     z-index: 1;
     flex: 1;
     overflow: hidden;
-  }
-
-  [am-mode='preview'] {
-    .iroute-view-body > * {
-      height: 100%;
+    width: 100%;
+    height: 100%;
+    & > * {
+      pointer-events: none;
+      & > * {
+        pointer-events: auto;
+      }
     }
   }
 
@@ -166,27 +172,27 @@
       }
     }
     &[am-view='list'] {
-      [am-view-item~='list'] {
+      & > [am-view-item~='list'] {
         flex-direction: column;
         display: flex;
         animation: am-show-default 0.35s ease both;
       }
     }
     &[am-view='listing'] {
-      [am-view-item~='item'] {
+      & > [am-view-item~='item'] {
         flex-direction: column;
         display: flex;
         animation: am-hide-default 0.3s ease-in-out both;
       }
     }
     &[am-view='item'] {
-      [am-view-item~='item'] {
+      & > [am-view-item~='item'] {
         display: flex;
         animation: am-show-default 0.35s ease both;
       }
     }
     &[am-view='iteming'] {
-      [am-view-item~='list'] {
+      & > [am-view-item~='list'] {
         display: flex;
         animation: am-hide-default 0.3s ease-in-out both;
       }
@@ -197,6 +203,10 @@
   [am-view][am-mode~='preview'] {
     overflow: hidden;
 
+    .iroute-view-body {
+      justify-content: end;
+    }
+
     @keyframes am-show-preview {
       0% {
         opacity: 0;
@@ -245,21 +255,18 @@
         align-items: stretch;
         align-content: space-between;
         pointer-events: none;
-        & > * {
-          pointer-events: auto;
-        }
       }
     }
     &[am-view='list'],
     &[am-view='listing'] {
-      [am-view-item~='item'] {
+      & > [am-view-item~='item'] {
         display: flex;
         animation: am-hide-preview 0.5s ease-in-out both;
       }
     }
     &[am-view='item'],
     &[am-view='iteming'] {
-      [am-view-item~='item'] {
+      & > [am-view-item~='item'] {
         display: flex;
         animation: am-show-preview 0.5s ease both;
       }
@@ -281,6 +288,16 @@
   [am-view][am-mode~='pop-up'] {
     overflow: hidden;
 
+    .iroute-view-body {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-content: center;
+      pointer-events: none;
+    }
+
     @keyframes am-show-pop-up {
       0% {
         opacity: 0;
@@ -321,6 +338,7 @@
       }
       &[am-view-item~='item'] {
         position: fixed;
+        flex-direction: column;
         top: 0;
         right: 0;
         z-index: 100;
@@ -331,14 +349,11 @@
         pointer-events: none;
         background-color: rgba(0, 0, 0, 0.5);
         transition: all 0.35s;
-        & > * {
-          pointer-events: auto;
-        }
       }
     }
     &[am-view='list'],
     &[am-view='listing'] {
-      [am-view-item~='item'] {
+      & > [am-view-item~='item'] {
         display: flex;
         opacity: 0;
         & > * {
@@ -348,7 +363,7 @@
     }
     &[am-view='item'],
     &[am-view='iteming'] {
-      [am-view-item~='item'] {
+      & > [am-view-item~='item'] {
         display: flex;
         opacity: 1;
         & > * {

package/src/components/basic/IScrollView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="full fekit-ipull-scroll" ui-scroll=":y" ref="root">
+  <div class="fekit-ipull-scroll" :ui-scroll="`:y ${stable ? 'stable' : ''}`" ref="root">
     <div>
       <div class="fs-xs co-text o-mm" fekit-pullload-head="" v-if="pull">
         <div v-show="demo.store.pull < 2" ui-flex="row cm">
@@ -36,12 +36,16 @@
   const props: any = defineProps({
     pull: {
       type: Boolean,
-      default: false
+      default: false,
     },
     load: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
+    stable: {
+      type: Boolean,
+      default: false,
+    },
   });
   const root: any = ref(null);
   const demo: any = ref(null);
@@ -54,16 +58,16 @@
       ? {
           onpull: async () => {
             emits('onpull', demo.value);
-          }
+          },
         }
       : {}),
     ...(props.pull
       ? {
           onload: async () => {
             emits('onload', demo.value);
-          }
+          },
         }
-      : {})
+      : {}),
   });
 
   onMounted(() => {

package/src/components/basic/Icon.vue

@@ -7,48 +7,48 @@
   const icons: any = {
     'arrow-left': {
       path: [
-        'M655.2 844c-12 0-24-4.8-32-13.6L336.8 544c-8.8-8.8-13.6-20-13.6-32s4.8-24 13.6-32l286.4-287.2c8.8-8 20-12.8 32-12.8s24 4.8 32 13.6c8.8 8.8 13.6 20 13.6 32s-4.8 23.2-12.8 32L432.8 512l254.4 254.4c8.8 8.8 13.6 20 13.6 32s-4.8 23.2-13.6 32c-8 8.8-20 13.6-32 13.6z'
-      ]
+        'M655.2 844c-12 0-24-4.8-32-13.6L336.8 544c-8.8-8.8-13.6-20-13.6-32s4.8-24 13.6-32l286.4-287.2c8.8-8 20-12.8 32-12.8s24 4.8 32 13.6c8.8 8.8 13.6 20 13.6 32s-4.8 23.2-12.8 32L432.8 512l254.4 254.4c8.8 8.8 13.6 20 13.6 32s-4.8 23.2-13.6 32c-8 8.8-20 13.6-32 13.6z',
+      ],
     },
     'arrow-right': {
       path: [
-        'M368.8 844c-12 0-24-4.8-32-13.6-8.8-8.8-13.6-20-13.6-32s4.8-24 13.6-32L591.2 512 336.8 256.8c-8-8.8-12.8-20-12.8-32s4.8-23.2 13.6-32c8-8 20-13.6 32-13.6s23.2 4.8 32 12.8L688 479.2c8.8 8.8 13.6 20 13.6 32s-4.8 24-13.6 32l-286.4 286.4c-9.6 9.6-20.8 14.4-32.8 14.4z'
-      ]
+        'M368.8 844c-12 0-24-4.8-32-13.6-8.8-8.8-13.6-20-13.6-32s4.8-24 13.6-32L591.2 512 336.8 256.8c-8-8.8-12.8-20-12.8-32s4.8-23.2 13.6-32c8-8 20-13.6 32-13.6s23.2 4.8 32 12.8L688 479.2c8.8 8.8 13.6 20 13.6 32s-4.8 24-13.6 32l-286.4 286.4c-9.6 9.6-20.8 14.4-32.8 14.4z',
+      ],
     },
     'double-arrow-left': {
       path: [
         'M518.4 836.8c-11.2 0-22.4-4.8-31.2-12.8L205.6 541.6c-8.8-8.8-12.8-20-12.8-32s4.8-23.2 12.8-32l281.6-282.4c8.8-8.8 20-12.8 32-12.8s23.2 4.8 32 12.8c8.8 8.8 12.8 20 12.8 32s-4.8 23.2-12.8 32L300.8 509.6 551.2 760c8 8.8 12.8 20 12.8 32s-4.8 23.2-12.8 31.2-20 13.6-32.8 13.6z',
-        'M786.4 840.8c-11.2 0-22.4-4.8-31.2-12.8L473.6 546.4c-8-8-12.8-20-12.8-32s4.8-23.2 12.8-32L755.2 200c8.8-8.8 20-12.8 32-12.8s23.2 4.8 32 12.8c8.8 8.8 12.8 20 12.8 32s-4.8 23.2-12.8 32L568 514.4l250.4 250.4c8 8.8 12.8 20 12.8 32s-4.8 23.2-12.8 31.2c-8.8 8-20 12.8-32 12.8z'
-      ]
+        'M786.4 840.8c-11.2 0-22.4-4.8-31.2-12.8L473.6 546.4c-8-8-12.8-20-12.8-32s4.8-23.2 12.8-32L755.2 200c8.8-8.8 20-12.8 32-12.8s23.2 4.8 32 12.8c8.8 8.8 12.8 20 12.8 32s-4.8 23.2-12.8 32L568 514.4l250.4 250.4c8 8.8 12.8 20 12.8 32s-4.8 23.2-12.8 31.2c-8.8 8-20 12.8-32 12.8z',
+      ],
     },
     'double-arrow-right': {
       path: [
         'M504.8 836.8c-12 0-23.2-4.8-31.2-12.8s-12.8-19.2-12.8-31.2 4-23.2 12.8-31.2l250.4-250.4-250.4-252c-8.8-8.8-12.8-20-12.8-32s4.8-23.2 12.8-32c8.8-8.8 20-12.8 32-12.8s23.2 4.8 32 12.8l281.6 282.4c8 8 12.8 20 12.8 32s-4.8 23.2-12.8 32L536.8 824c-8.8 8-20 12.8-32 12.8 0.8 0 0 0 0 0z',
-        'M237.6 840.8c-12 0-23.2-4.8-31.2-12.8s-12.8-19.2-12.8-31.2 4-23.2 12.8-31.2L456 514.4 205.6 264c-8.8-8.8-12.8-20-12.8-32s4.8-23.2 12.8-32c8.8-8.8 20-12.8 32-12.8s23.2 4.8 32 12.8l281.6 282.4c8.8 8.8 12.8 20 12.8 32s-4.8 23.2-12.8 32l-281.6 282.4c-9.6 8-20 12-32 12z'
-      ]
+        'M237.6 840.8c-12 0-23.2-4.8-31.2-12.8s-12.8-19.2-12.8-31.2 4-23.2 12.8-31.2L456 514.4 205.6 264c-8.8-8.8-12.8-20-12.8-32s4.8-23.2 12.8-32c8.8-8.8 20-12.8 32-12.8s23.2 4.8 32 12.8l281.6 282.4c8.8 8.8 12.8 20 12.8 32s-4.8 23.2-12.8 32l-281.6 282.4c-9.6 8-20 12-32 12z',
+      ],
     },
     more: {
       path: [
         'M512 512m-116.363636 0a116.363636 116.363636 0 1 0 232.727272 0 116.363636 116.363636 0 1 0-232.727272 0Z',
         'M116.363636 512m-93.090909 0a93.090909 93.090909 0 1 0 186.181818 0 93.090909 93.090909 0 1 0-186.181818 0Z',
-        'M907.636364 512m-93.090909 0a93.090909 93.090909 0 1 0 186.181818 0 93.090909 93.090909 0 1 0-186.181818 0Z'
-      ]
+        'M907.636364 512m-93.090909 0a93.090909 93.090909 0 1 0 186.181818 0 93.090909 93.090909 0 1 0-186.181818 0Z',
+      ],
     },
     setting: {
       path: [
-        'M512 998.4c-22.4 0-44.8-3.2-67.2-6.4-35.2-6.4-67.2-32-76.8-64-16-54.4-64-89.6-121.6-89.6-9.6 0-19.2 0-28.8 3.2-6.4 0-12.8 3.2-19.2 3.2-28.8 0-54.4-12.8-73.6-35.2-25.6-35.2-51.2-73.6-67.2-115.2-12.8-35.2-6.4-73.6 19.2-99.2 44.8-48 44.8-121.6 0-172.8-25.6-25.6-32-64-19.2-99.2 19.2-38.4 41.6-76.8 70.4-112 19.2-22.4 44.8-35.2 73.6-35.2 6.4 0 12.8 0 19.2 3.2 9.6 3.2 19.2 3.2 28.8 3.2 54.4 0 102.4-35.2 118.4-89.6 9.6-35.2 41.6-60.8 76.8-64 22.4-3.2 44.8-3.2 67.2-3.2 22.4 0 44.8 0 67.2 3.2 35.2 6.4 67.2 32 76.8 64 9.6 32 28.8 57.6 57.6 70.4 19.2 9.6 41.6 16 64 16 9.6 0 19.2 0 28.8-3.2 6.4 0 12.8-3.2 19.2-3.2 28.8 0 54.4 12.8 73.6 35.2 25.6 35.2 48 76.8 67.2 118.4 12.8 32 6.4 73.6-19.2 99.2-44.8 48-44.8 121.6 0 172.8 25.6 25.6 32 64 19.2 99.2-16 41.6-38.4 80-67.2 115.2-19.2 22.4-44.8 35.2-73.6 35.2-6.4 0-12.8 0-19.2-3.2-9.6-3.2-19.2-3.2-28.8-3.2-54.4 0-102.4 35.2-118.4 89.6-9.6 35.2-41.6 60.8-76.8 64-25.6 3.2-48 3.2-70.4 3.2z m-265.6-236.8c89.6 0 169.6 57.6 198.4 144 3.2 6.4 6.4 9.6 12.8 9.6 19.2 3.2 35.2 3.2 54.4 3.2 12.8 0 25.6 0 38.4-3.2h22.4c6.4-3.2 9.6-6.4 9.6-9.6 16-51.2 48-92.8 92.8-115.2 32-19.2 67.2-25.6 102.4-25.6 16 0 32 3.2 44.8 6.4h3.2c3.2 0 9.6-3.2 12.8-3.2 22.4-28.8 41.6-60.8 57.6-96 3.2-6.4 0-12.8-3.2-16-70.4-80-70.4-198.4 0-275.2 3.2-6.4 3.2-12.8 3.2-19.2-12.8-35.2-32-67.2-57.6-96-6.4-6.4-9.6-9.6-12.8-9.6h-3.2c-16 3.2-28.8 6.4-44.8 6.4-35.2 0-70.4-9.6-102.4-25.6-44.8-25.6-76.8-67.2-92.8-115.2 0-6.4-6.4-9.6-9.6-9.6-19.2-3.2-38.4-3.2-57.6-3.2s-38.4 0-57.6 3.2c-6.4 3.2-9.6 6.4-9.6 9.6-16 51.2-48 92.8-92.8 115.2-32 19.2-67.2 25.6-102.4 25.6-16 0-32-3.2-44.8-6.4h-3.2c-9.6 3.2-12.8 3.2-16 6.4-22.4 28.8-41.6 60.8-57.6 96-3.2 6.4 0 12.8 3.2 16 70.4 80 70.4 198.4 0 275.2-3.2 3.2-3.2 9.6-3.2 16 12.8 35.2 32 67.2 54.4 96 3.2 3.2 9.6 6.4 16 6.4 12.8-3.2 28.8-6.4 44.8-6.4z m256-67.2c-48 0-92.8-19.2-128-54.4S320 560 320 512c0-99.2 83.2-182.4 182.4-182.4 102.4 0 182.4 83.2 182.4 182.4 0 102.4-80 182.4-182.4 182.4z m0-284.8c-57.6 0-102.4 48-102.4 105.6 0 57.6 48 105.6 105.6 105.6 57.6 0 105.6-48 102.4-105.6 0-60.8-48-105.6-105.6-105.6v-3.2 3.2z'
-      ]
+        'M512 998.4c-22.4 0-44.8-3.2-67.2-6.4-35.2-6.4-67.2-32-76.8-64-16-54.4-64-89.6-121.6-89.6-9.6 0-19.2 0-28.8 3.2-6.4 0-12.8 3.2-19.2 3.2-28.8 0-54.4-12.8-73.6-35.2-25.6-35.2-51.2-73.6-67.2-115.2-12.8-35.2-6.4-73.6 19.2-99.2 44.8-48 44.8-121.6 0-172.8-25.6-25.6-32-64-19.2-99.2 19.2-38.4 41.6-76.8 70.4-112 19.2-22.4 44.8-35.2 73.6-35.2 6.4 0 12.8 0 19.2 3.2 9.6 3.2 19.2 3.2 28.8 3.2 54.4 0 102.4-35.2 118.4-89.6 9.6-35.2 41.6-60.8 76.8-64 22.4-3.2 44.8-3.2 67.2-3.2 22.4 0 44.8 0 67.2 3.2 35.2 6.4 67.2 32 76.8 64 9.6 32 28.8 57.6 57.6 70.4 19.2 9.6 41.6 16 64 16 9.6 0 19.2 0 28.8-3.2 6.4 0 12.8-3.2 19.2-3.2 28.8 0 54.4 12.8 73.6 35.2 25.6 35.2 48 76.8 67.2 118.4 12.8 32 6.4 73.6-19.2 99.2-44.8 48-44.8 121.6 0 172.8 25.6 25.6 32 64 19.2 99.2-16 41.6-38.4 80-67.2 115.2-19.2 22.4-44.8 35.2-73.6 35.2-6.4 0-12.8 0-19.2-3.2-9.6-3.2-19.2-3.2-28.8-3.2-54.4 0-102.4 35.2-118.4 89.6-9.6 35.2-41.6 60.8-76.8 64-25.6 3.2-48 3.2-70.4 3.2z m-265.6-236.8c89.6 0 169.6 57.6 198.4 144 3.2 6.4 6.4 9.6 12.8 9.6 19.2 3.2 35.2 3.2 54.4 3.2 12.8 0 25.6 0 38.4-3.2h22.4c6.4-3.2 9.6-6.4 9.6-9.6 16-51.2 48-92.8 92.8-115.2 32-19.2 67.2-25.6 102.4-25.6 16 0 32 3.2 44.8 6.4h3.2c3.2 0 9.6-3.2 12.8-3.2 22.4-28.8 41.6-60.8 57.6-96 3.2-6.4 0-12.8-3.2-16-70.4-80-70.4-198.4 0-275.2 3.2-6.4 3.2-12.8 3.2-19.2-12.8-35.2-32-67.2-57.6-96-6.4-6.4-9.6-9.6-12.8-9.6h-3.2c-16 3.2-28.8 6.4-44.8 6.4-35.2 0-70.4-9.6-102.4-25.6-44.8-25.6-76.8-67.2-92.8-115.2 0-6.4-6.4-9.6-9.6-9.6-19.2-3.2-38.4-3.2-57.6-3.2s-38.4 0-57.6 3.2c-6.4 3.2-9.6 6.4-9.6 9.6-16 51.2-48 92.8-92.8 115.2-32 19.2-67.2 25.6-102.4 25.6-16 0-32-3.2-44.8-6.4h-3.2c-9.6 3.2-12.8 3.2-16 6.4-22.4 28.8-41.6 60.8-57.6 96-3.2 6.4 0 12.8 3.2 16 70.4 80 70.4 198.4 0 275.2-3.2 3.2-3.2 9.6-3.2 16 12.8 35.2 32 67.2 54.4 96 3.2 3.2 9.6 6.4 16 6.4 12.8-3.2 28.8-6.4 44.8-6.4z m256-67.2c-48 0-92.8-19.2-128-54.4S320 560 320 512c0-99.2 83.2-182.4 182.4-182.4 102.4 0 182.4 83.2 182.4 182.4 0 102.4-80 182.4-182.4 182.4z m0-284.8c-57.6 0-102.4 48-102.4 105.6 0 57.6 48 105.6 105.6 105.6 57.6 0 105.6-48 102.4-105.6 0-60.8-48-105.6-105.6-105.6v-3.2 3.2z',
+      ],
     },
     'tableloader-setting': {
       path: [
-        'M372 981.6c-80 0-154.4-43.2-195.2-112L35.2 624.8c-40-68.8-40-155.2 0-224.8l141.6-244.8c40-69.6 115.2-112 195.2-112h282.4c80 0 154.4 43.2 195.2 112L991.2 400c40 68.8 40 155.2 0 224.8l-141.6 244.8c-40 69.6-115.2 112-195.2 112H372z m0-825.6c-39.2 0-76.8 21.6-96.8 56L134.4 456c-20 34.4-20 76.8 0 112l140.8 244.8c20 34.4 56.8 55.2 96.8 55.2h282.4c39.2 0 76.8-21.6 96.8-56l140.8-244.8c20-34.4 20-76.8 0-112L751.2 211.2c-20-34.4-56.8-55.2-96.8-55.2H372z m140.8 552.8c-108.8 0-196.8-88-196.8-196.8 0-108.8 88-196.8 196.8-196.8 108.8 0 196.8 88 196.8 196.8 0.8 108.8-88 196.8-196.8 196.8z m0-280c-45.6 0-83.2 37.6-83.2 83.2s37.6 83.2 83.2 83.2c22.4 0 43.2-8.8 59.2-24 16-16 24-36.8 24-59.2 0-45.6-37.6-83.2-83.2-83.2z'
-      ]
-    }
+        'M372 981.6c-80 0-154.4-43.2-195.2-112L35.2 624.8c-40-68.8-40-155.2 0-224.8l141.6-244.8c40-69.6 115.2-112 195.2-112h282.4c80 0 154.4 43.2 195.2 112L991.2 400c40 68.8 40 155.2 0 224.8l-141.6 244.8c-40 69.6-115.2 112-195.2 112H372z m0-825.6c-39.2 0-76.8 21.6-96.8 56L134.4 456c-20 34.4-20 76.8 0 112l140.8 244.8c20 34.4 56.8 55.2 96.8 55.2h282.4c39.2 0 76.8-21.6 96.8-56l140.8-244.8c20-34.4 20-76.8 0-112L751.2 211.2c-20-34.4-56.8-55.2-96.8-55.2H372z m140.8 552.8c-108.8 0-196.8-88-196.8-196.8 0-108.8 88-196.8 196.8-196.8 108.8 0 196.8 88 196.8 196.8 0.8 108.8-88 196.8-196.8 196.8z m0-280c-45.6 0-83.2 37.6-83.2 83.2s37.6 83.2 83.2 83.2c22.4 0 43.2-8.8 59.2-24 16-16 24-36.8 24-59.2 0-45.6-37.6-83.2-83.2-83.2z',
+      ],
+    },
   };
   const props: any = defineProps({
     name: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   });
 </script>