@neatui/nuxt 0.1.0 → 1.0.1

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>

package/src/components/basic/LayerView/Layer.vue

@@ -29,35 +29,35 @@
   const props: any = defineProps({
     zIndex: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     area: {
       type: String,
-      default: '#fekit'
+      default: '#fekit',
     },
     id: {
-      type: String
+      type: String,
     },
     am: {
       type: String as PropType<'aa' | 'ab' | 'ac' | 'ad' | 'ae' | 'af' | 'ag' | 'ah' | 'ai' | 'aj' | 'ak' | 'al' | 'am' | 'an' | 'ao' | 'ap' | 'aq' | 'ar' | 'as' | 'at'>,
-      default: 'as'
+      default: 'as',
     },
     flex: {
       type: String as PropType<'lt' | 'ct' | 'rt' | 'lm' | 'cm' | 'rm' | 'lb' | 'cb' | 'rb'>,
-      default: 'cm'
+      default: 'cm',
     },
     dark: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     darkClickClose: {
       type: Boolean,
-      default: true
+      default: true,
     },
     wrapStyle: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   });
 
   const _area: any = document.querySelector(props.area);
@@ -72,7 +72,7 @@
   const state = reactive({
     view: 0,
     params: {},
-    top: 0
+    top: 0,
   });
 
   function disableScroll() {
@@ -101,7 +101,7 @@
         enableScroll();
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 回调合集
@@ -109,7 +109,7 @@
     show: [],
     hide: [],
     open: [],
-    none: []
+    none: [],
   };
 
   // 注入参数
@@ -167,7 +167,6 @@
     if (state.view === 1) {
       state.view = 0;
       on.hide.forEach((fun: any) => {
-        // isFunction(fun) && fun();
         if (isFunction(fun)) {
           fun();
         }
@@ -176,7 +175,6 @@
     if (state.view === 2) {
       state.view = 3;
       on.show.forEach((fun: any) => {
-        // isFunction(fun) && fun();
         if (isFunction(fun)) {
           fun();
         }
@@ -200,11 +198,6 @@
     delete _tasks[id];
   });
 </script>
-<!-- <script lang="ts">
-  export const LayerById = (id: any) => {
-    return (window as any)._FEKIT_LAYER_TASKS[id];
-  };
-</script> -->
 
 <style lang="scss">
   // 弹层
@@ -234,106 +227,40 @@
     }
 
     &-close {
+      cursor: pointer;
       position: absolute;
-      width: 1.5em;
-      height: 1.5em;
-      left: 50%;
-      bottom: -2.5rem;
-      margin-left: -1rem;
+      width: 2em;
+      height: 2em;
+
+      color: var(--co-read);
+      bottom: auto;
+      top: 0.5em;
+      right: 0.5em;
+      left: auto;
+      box-shadow: none;
+
       padding: 0.25em;
+      margin-left: -1rem;
       text-align: center;
-      transform: scale(1) translate3d(0, -100%, 0);
+      transform: scale(0.8);
       transition: all 0.2s;
-      color: #fff;
-      box-shadow: 0 0 0 2px currentColor;
       border-radius: 50%;
-      opacity: 0;
       background:
-        linear-gradient(45deg, transparent 44%, currentColor 45%, currentColor 56%, transparent 57%) no-repeat center / 50% 50%,
-        linear-gradient(-45deg, transparent 44%, currentColor 45%, currentColor 56%, transparent 57%) no-repeat center / 50% 50%;
+        linear-gradient(45deg, transparent 44%, currentColor 45%, currentColor 55%, transparent 56%) no-repeat center / 50% 50%,
+        linear-gradient(-45deg, transparent 44%, currentColor 45%, currentColor 55%, transparent 56%) no-repeat center / 50% 50%;
 
       &:active {
         transform: scale(0.9);
       }
     }
 
-    &[view='3'] {
-      .fekit-layer-close {
-        opacity: 0.85;
-        transform: translate3d(0, 0, 0);
+    .fekit-layer-close {
+      &:hover {
+        transform: scale(0.8) rotate(90deg);
+      }
+      &:active {
+        transform: scale(0.7) rotate(90deg);
       }
     }
-
-    // &-close {
-    //   position: absolute;
-    //   width: 2rem;
-    //   height: 2rem;
-    //   line-height: 2rem;
-    //   right: 0.5rem;
-    //   top: 0.5rem;
-    //   text-align: center;
-    //   transform: rotate(0deg);
-    //   transition: all 0.2s;
-
-    //   &:hover {
-    //     transform: rotate(-90deg);
-    //   }
-    // }
-
-    // &-close {
-    //   position: absolute;
-    //   width: 18px;
-    //   height: 18px;
-    //   right: 0.5em;
-    //   top: 0.5em;
-    //   padding: 0.25em;
-    //   text-align: center;
-    //   transition: all 0.2s;
-    //   // box-shadow: 0 0 0 1px currentColor;
-    //   border-radius: 50%;
-    //   background: linear-gradient(45deg, transparent 44%, currentColor 46%, currentColor 54%, transparent 56%) no-repeat center / 50% 50%,
-    //     linear-gradient(-45deg, transparent 44%, currentColor 46%, currentColor 54%, transparent 56%) no-repeat center / 50% 50%;
-    //   transform: scale(1) rotate(0deg);
-    //   opacity: 0.8;
-    //   transition: all 0.25s;
-
-    //   &:hover {
-    //     transform: scale(1) rotate(-90deg);
-    //   }
-
-    //   &:active {
-    //     transform: scale(0.8) rotate(-90deg);
-    //   }
-
-    //   &::before {
-    //     position: absolute;
-    //     content: '';
-    //     width: 200%;
-    //     height: 200%;
-    //     left: -50%;
-    //     top: -50%;
-    //   }
-    // }
   }
-
-  // html {
-  //   &[size='xs'] {
-  //     .fekit-layer-close {
-  //       width: 16px;
-  //       height: 16px;
-  //     }
-  //   }
-  //   &[size='l'] {
-  //     .fekit-layer-close {
-  //       width: 20px;
-  //       height: 20px;
-  //     }
-  //   }
-  //   &[size='xl'] {
-  //     .fekit-layer-close {
-  //       width: 22px;
-  //       height: 22px;
-  //     }
-  //   }
-  // }
 </style>

package/src/components/basic/follow.ts

@@ -0,0 +1,133 @@
+import ResizeObserver from 'resize-observer-polyfill';
+import raf from 'raf';
+
+class Follow {
+  box: any[];
+  dom: any;
+  tip: any;
+  ing: any;
+  sub: any;
+  obs: any;
+  fun: (status: any) => void;
+  private css: () => void;
+  z: number;
+  constructor(dom: any, tip: any, fun = (_status: any) => {}) {
+    this.dom = dom;
+    this.tip = tip;
+    this.box = [];
+    this.css = this.setcss.bind(this);
+    this.fun = fun;
+    this.sub = this.tip.firstElementChild;
+    this.z = 0;
+  }
+  setcss() {
+    if (!this.ing) {
+      raf(() => {
+        this.ing = false;
+        const dr = this.dom?.getBoundingClientRect() || { width: 0, height: 0, top: 0, bottom: 0, left: 0, right: 0 };
+        const sr = this.sub?.getBoundingClientRect() || { height: 0 };
+        this.tip.style.inset = `${dr.top}px auto auto ${dr.left}px`;
+        this.tip.style.width = dr.width + 'px';
+        this.tip.style.height = dr.height + 'px';
+        this.fun('');
+        this.box.forEach((e: any) => {
+          const _ar = { top: 0, bottom: window.innerHeight, left: 0, right: window.innerWidth };
+          const ar = e === window ? _ar : e?.getBoundingClientRect() || _ar;
+          if (dr.bottom < ar.top || dr.top > ar.bottom || dr.right < ar.left || dr.left > ar.right) {
+            this.tip.style.opacity = '0';
+            this.sub.style.pointerEvents = 'none';
+          } else {
+            this.tip.style.opacity = '';
+            this.sub.style.pointerEvents = '';
+          }
+          if (dr.bottom + sr.height + 10 > ar.bottom) {
+            this.fun('b');
+          }
+        });
+        const tr = this.tip?.getBoundingClientRect() || { left: 0 };
+        const x = this.sub.offsetLeft + tr.left;
+        const arrow = this.sub.querySelector('[ui-tips-arrow]');
+        if (x < 0) {
+          this.sub.style.transform = `translate3d(${-x}px,0,0)`;
+          if (arrow && arrow.style) {
+            arrow.style.transform = `translateX(${x}px) rotate(45deg)`;
+          }
+        } else {
+          this.sub.style.transform = '';
+          if (arrow && arrow.style) {
+            arrow.style.transform = '';
+          }
+        }
+      });
+      this.ing = true;
+    }
+  }
+  listen() {
+    // 向上查询有滚动条的元素
+    const _find = (e: any) => {
+      // 判断是否为DOM节点
+      if (e) {
+        if (e.nodeType === 1) {
+          const css: any = window.getComputedStyle(e);
+          // 查询所有父组节点的最高层级
+          if (!isNaN(css.zIndex) && css.zIndex >= this.z) {
+            this.z = Number(css.zIndex) + 10;
+          } else {
+            this.z += 1;
+          }
+          // 节点是否有滚动条
+          if (
+            (css.overflowY === 'auto' || css.overflowY === 'scroll' || css.overflowX === 'auto' || css.overflowX === 'scroll') &&
+            (e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth)
+          ) {
+            this.box.push(e);
+          }
+          _find(e.parentNode);
+        } else if (e.nodeType === 9) {
+          console.log(42, e, e.nodeType);
+          this.box.push(window);
+        }
+      }
+    };
+    _find(this.dom);
+
+    // 自动层级
+    if (window.getComputedStyle(this.tip).zIndex) {
+      this.tip.style.zIndex = `${this.z}`;
+    }
+
+    this.css();
+    // 监听窗口尺寸变化
+    window.addEventListener('resize', this.css);
+    window.addEventListener('click', this.css);
+    // 监听滚动条的元素
+    this.box.forEach((e: any) => {
+      e.addEventListener('scroll', this.css);
+    });
+    // 监听移入事件
+    this.dom?.addEventListener('mouseenter', this.css);
+    // 监听参考元素变化
+    this.obs = new ResizeObserver(this.css);
+    if (this.dom) {
+      this.obs?.observe(this.dom);
+    }
+    if (this.sub) {
+      this.obs?.observe(this.sub);
+    }
+  }
+  remove() {
+    // console.log('移除监听');
+    // 清除窗口尺寸变化事件监听器
+    window.removeEventListener('resize', this.css);
+    window.removeEventListener('click', this.css);
+    // 清除滚动条元素的事件监听器
+    this.box.forEach((e: any) => {
+      e.removeEventListener('scroll', this.css);
+    });
+    // 清除鼠标移入事件监听器
+    this.dom?.removeEventListener('mouseenter', this.css);
+    // 清除监听参考元素变化
+    this.obs?.disconnect();
+  }
+}
+export default Follow;