@neatui/vue 2.8.6 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "2.8.6",
+  "version": "2.9.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",

package/src/components/basic/IFollowView.vue

@@ -55,14 +55,14 @@
     modelValue: 0,
     pos: 'bl',
     event: 'click',
-    btnClass: '',
+    btnClass: 'dib',
     btnStyle: '',
     tipClass: '',
     tipStyle: '',
     tipBoxClass: '',
     tipBoxStyle: '',
     arrow: {},
-    clickTipHide: false
+    clickTipHide: false,
   });
 
   const dom: any = ref(null);
@@ -73,7 +73,7 @@
     show: 0,
     pos: props.pos,
     hover: 0,
-    tipdom: false
+    tipdom: false,
   });
 
   const showTimer: any = ref(null);
@@ -92,7 +92,7 @@
           state.show = 0;
         }, 100);
       }
-    }
+    },
   );
 
   // 开关
@@ -112,7 +112,7 @@
       }
       emits('update:modelValue', state.show);
     },
-    { deep: true }
+    { deep: true },
   );
 
   const hovershow = () => {
@@ -208,13 +208,13 @@
           ex.value.remove();
         }
       }
-    }
+    },
   );
 
   defineExpose({
     toggle,
     show,
     hide,
-    cancel
+    cancel,
   });
 </script>

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/form/Input@v3.vue

@@ -113,7 +113,7 @@
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false
+    interacted: false,
   });
 
   const state: any = reactive({
@@ -122,7 +122,7 @@
     // 值
     value: props.modelValue,
     // 错误
-    error: {}
+    error: {},
   });
   // 外部传入交互标识，主要用于外部没有输入但点击了提交
   watch(
@@ -132,7 +132,7 @@
         state.interacted = interacted;
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 监听外部数据
@@ -207,7 +207,7 @@
         state.error = { tips: props.tips, ontips: props.tips ? 'show' : '', verify: '', co: '' };
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 清空

package/src/components/icon/OrderIcon.vue

@@ -0,0 +1,113 @@
+<template>
+  <span class="pr full" ui-flex="row cm">
+    <span :ui-order="`@b ${status}`" :style="{ width: size + '%', height: size + '%' }">
+      <i></i>
+      <b></b>
+      <u></u>
+    </span>
+  </span>
+</template>
+<script setup lang="ts">
+  // 类型
+  interface Props {
+    status?: number;
+    size?: number;
+  }
+  withDefaults(defineProps<Props>(), {
+    status: 0,
+    size: 100,
+  });
+</script>
+<style lang="scss">
+  [ui-order~='@b'] {
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+
+    i,
+    b,
+    u {
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+    }
+
+    i {
+      opacity: 0;
+
+      &::before,
+      &::after {
+        display: block;
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+      }
+
+      &::before {
+        background:
+          linear-gradient(45deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 28.7% 95% / 30% 35%,
+          linear-gradient(-45deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 71.3% 95% / 30% 35%;
+        transform: translateY(-50%);
+      }
+
+      &::after {
+        background:
+          linear-gradient(135deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 28.5% 10% / 30% 35%,
+          linear-gradient(-135deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 71.3% 10% / 30% 35%;
+        transform: translateY(50%);
+      }
+    }
+
+    b {
+      background:
+        linear-gradient(45deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 28.7% 95% / 30% 35%,
+        linear-gradient(-45deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 71.3% 95% / 30% 35%,
+        linear-gradient(90deg, transparent 35%, currentColor 40%, currentColor 60%, transparent 65%) no-repeat 50% 45% / 33% 70%;
+      transform: translateY(-110%);
+    }
+
+    u {
+      background:
+        linear-gradient(135deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 28.5% 10% / 30% 35%,
+        linear-gradient(-135deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 71.3% 10% / 30% 35%,
+        linear-gradient(90deg, transparent 35%, currentColor 40%, currentColor 60%, transparent 65%) no-repeat 50% 45% / 33% 70%;
+      transform: translateY(110%);
+    }
+
+    &[ui-order~='0'] i {
+      opacity: 0.3;
+
+      &::before {
+        background:
+          linear-gradient(45deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 28.7% 95% / 30% 35%,
+          linear-gradient(-45deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 71.3% 95% / 30% 35%;
+        transform: translateY(0%);
+        transition: all 0.2s cubic-bezier(0.65, 0, 0.35, 1);
+      }
+
+      &::after {
+        background:
+          linear-gradient(135deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 28.5% 15% / 30% 35%,
+          linear-gradient(-135deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 71.3% 15% / 30% 35%;
+        transform: translateY(0%);
+        transition: all 0.2s cubic-bezier(0.65, 0, 0.35, 1);
+      }
+    }
+
+    &[ui-order~='1'] u {
+      transform: translateY(5%);
+      transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
+    }
+
+    &[ui-order~='2'] b {
+      transform: translateY(0%);
+      transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
+    }
+  }
+</style>

package/src/components/loader/TableLoader/TableLoader.vue

@@ -13,7 +13,7 @@
                 <div v-bind="col.thead">
                   <span class="ux-none" ui-flex="row rm" v-if="col.order === 0 || col.order === 1 || col.order === 2" @click="fSetOrder(col)">
                     <span>{{ col.label }}</span>
-                    <span ui-btn="@a none xs :square" :ui-order="col.__order"></span>
+                    <span ui-btn="@a none xs :square" :ui-order="`@a ${col.__order}`"></span>
                   </span>
                   <span v-else>{{ col.label }}</span>
                   <!-- 设置 -->
@@ -153,6 +153,7 @@
   import { itable } from '@fekit/itable';
   import TableRender from './TableRender.vue';
   import { isFunction, isObject, hasOwnProp, deepcopy } from '@fekit/utils';
+
   const route = useRoute();
   const router = useRouter();
   // 外部插槽