@neatui/vue 2.8.6 → 2.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "2.8.6",
+  "version": "2.9.1",
   "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/IRouterView.vue

@@ -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 },
       );
     };
   };

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/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: [],
   };
 
   // 注入参数

package/src/components/display/Image.vue

@@ -26,26 +26,26 @@
     imgStyle: { type: String, default: '' },
     src: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     files: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     // 图片如何适应容器框,同原生object-fit
     fit: {
       type: String,
-      default: 'contain'
+      default: 'contain',
     },
     // 是否开启图片预览放大
     preview: {
       type: Boolean,
-      default: true
+      default: true,
     },
     initialSlide: {
       type: Number,
-      default: 0
-    }
+      default: 0,
+    },
   });
 
   const emit = defineEmits(['delImg']);

package/src/components/display/PhotoViewer.vue

@@ -5,10 +5,10 @@
       :initialSlide="initialSlide"
       :spaceBetween="30"
       :keyboard="{
-        enabled: true
+        enabled: true,
       }"
       :pagination="{
-        clickable: true
+        clickable: true,
       }"
       :navigation="true"
       :modules="[Keyboard, Pagination, Navigation]"
@@ -32,19 +32,19 @@
   const props: any = defineProps({
     srcName: {
       type: String,
-      default: 'url'
+      default: 'url',
     },
     id: {
       type: String,
-      default: 'PhotoViewer'
+      default: 'PhotoViewer',
     },
     initialSlide: {
       type: Number,
-      default: 0
+      default: 0,
     },
     files: {
       type: Array as () => any[],
-      default: () => []
-    }
+      default: () => [],
+    },
   });
 </script>

package/src/components/display/TreeView.vue

@@ -92,11 +92,11 @@
     suffix: () => [],
     active: () => ({ class: 'co-main' }),
     optional: 'all',
-    multiple: false
+    multiple: false,
   });
 
   const state: any = reactive({
-    value: ''
+    value: '',
   });
   watch(
     () => props.modelValue,
@@ -105,7 +105,7 @@
         state.value = value;
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
   watch(
     () => state.value,
@@ -114,7 +114,7 @@
         emits('update:modelValue', value);
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 事件处理

package/src/components/form/Checkbox.vue

@@ -26,7 +26,7 @@
   const props = withDefaults(defineProps<Props>(), {
     theme: '@a',
     modelValue: () => [],
-    options: () => []
+    options: () => [],
   });
 
   // 定义事件
@@ -34,7 +34,7 @@
 
   // 内部数据
   const state: any = reactive({
-    lists: []
+    lists: [],
   });
 
   // 监听数据
@@ -48,8 +48,8 @@
       }
     },
     {
-      immediate: true
-    }
+      immediate: true,
+    },
   );
   watch(
     () => state.lists,
@@ -58,7 +58,7 @@
       emits('update:modelValue', value);
     },
     {
-      deep: true
-    }
+      deep: true,
+    },
   );
 </script>

package/src/components/form/DateRangeView@v3.vue

@@ -186,20 +186,20 @@
       text: '昨天',
       func() {
         change(0, { date: idate(new Date().setDate(new Date().getDate() - 1)).format('YYYY-MM-DD') });
-      }
+      },
     },
     today: {
       text: '今天',
       func() {
         change(0, { date: idate(new Date()).format('YYYY-MM-DD') });
-      }
+      },
     },
     tomorrow: {
       text: '明天',
       func() {
         change(0, { date: idate(new Date().setDate(new Date().getDate() + 1)).format('YYYY-MM-DD') });
-      }
-    }
+      },
+    },
   };
 
   const emits: any = defineEmits(['update:modelValue', 'change']);
@@ -243,7 +243,7 @@
     // 数据格式化
     format: 'YYYY-MM-DD',
     // 节假日
-    holiday: () => ({})
+    holiday: () => ({}),
   });
 
   // 公共数据
@@ -253,7 +253,7 @@
       return props.shortcuts.map((item: any) => {
         return isString(item) ? shortcutsList[item] : item;
       });
-    })
+    }),
   });
 
   // 开始数据
@@ -268,7 +268,7 @@
       const days = date.calendar({ group: true, value: [sta.value, end.value] });
       const { y = 0, M: m = 0, d = 0 } = date.attr || {};
       return { days, y, m, d };
-    })
+    }),
   });
 
   // 结束数据
@@ -281,7 +281,7 @@
       const days = date.calendar({ group: true, value: [sta.value, end.value] });
       const { y = 0, M: m = 0, d = 0 } = date.attr || {};
       return { days, y, m, d };
-    })
+    }),
   });
 
   const init = ([a = '', b = '']: any = []) => {
@@ -325,7 +325,7 @@
         emits('update:modelValue', [sta, end]);
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 日期前翻

package/src/components/form/DateView@v3.vue

@@ -169,20 +169,20 @@
       text: '昨天',
       func() {
         change({ date: idate(new Date().setDate(new Date().getDate() - 1)).format('YYYY-MM-DD') });
-      }
+      },
     },
     today: {
       text: '今天',
       func() {
         change({ date: idate(new Date()).format('YYYY-MM-DD') });
-      }
+      },
     },
     tomorrow: {
       text: '明天',
       func() {
         change({ date: idate(new Date().setDate(new Date().getDate() + 1)).format('YYYY-MM-DD') });
-      }
-    }
+      },
+    },
   };
 
   const emits: any = defineEmits(['update:modelValue', 'change', 'update']);
@@ -227,7 +227,7 @@
     holiday: () => ({}),
     time: false,
     // 语言
-    lang: 'zh-CN'
+    lang: 'zh-CN',
   });
 
   // 小时
@@ -276,7 +276,7 @@
       } else {
         return !props.time;
       }
-    })
+    }),
   });
 
   // 面板
@@ -294,7 +294,7 @@
     }),
     end: computed(() => {
       return panel.years[9];
-    })
+    }),
   });
 
   // 设置日期
@@ -341,7 +341,7 @@
       // 值
       state.value = value || '';
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   onMounted(() => {
@@ -351,7 +351,7 @@
     () => state.panel,
     () => {
       setTimeValue();
-    }
+    },
   );
 
   // 更新时间

package/src/components/form/ImgUpload.vue

@@ -63,7 +63,7 @@
     accept: 'image/*',
     multiple: false,
     crop: false,
-    action: '/common/updateFile'
+    action: '/common/updateFile',
   });
 
   const emit = defineEmits(['update:modelValue', 'change']);
@@ -104,7 +104,7 @@
             success: resolve,
             maxWidth: 1000,
             maxHeight: 700,
-            error: reject
+            error: reject,
           });
         });
         const { name = '' }: any = _blob || {};
@@ -132,7 +132,7 @@
         emit('update:modelValue', isArray(props.modelValue) ? files.value : files.value.length > 0 ? files.value[0].imgUrl : '');
       }
     },
-    { deep: true }
+    { deep: true },
   );
 
   defineExpose({ change, uploadClick });

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

@@ -139,7 +139,7 @@
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false
+    interacted: false,
   });
   // 内部数据
   const state: any = reactive({
@@ -153,7 +153,7 @@
     }),
     has: computed(() => {
       return props.options?.some((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
-    })
+    }),
   });
 
   // 监听外部数据
@@ -163,7 +163,7 @@
       const selectd: any = o?.filter((item: any) => v?.some((i: any) => `${i}` === `${item.value}`))?.map((item: any) => item.label) || [];
       state.value = selectd?.join(' Ι ') || '';
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 更新

package/src/components/form/MoreSelectList.vue

@@ -29,23 +29,23 @@
     placeholder: { type: String, default: '' },
     modelValue: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     options: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     rules: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     field: {
       type: String,
       default: () => {
         const _name = (l: any) => Array.from({ length: l }, () => 'abcdefghijklmnopqrstuvwxyz'[Math.floor(Math.random() * 26)]).join('');
         return _name(8);
-      }
-    }
+      },
+    },
   });
 
   const mv: any = ref(props.modelValue);
@@ -106,14 +106,14 @@
     () => {
       mv.value = props.modelValue;
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
   watch(
     () => mv.value,
     (v: any) => {
       emits('update:modelValue', v);
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   const ready: any = ref(0);

package/src/components/form/MoreSelectPicker.vue

@@ -43,23 +43,23 @@
     placeholder: { type: String, default: '' },
     modelValue: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     options: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     rules: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     field: {
       type: String,
       default: () => {
         const _name = (l: any) => Array.from({ length: l }, () => 'abcdefghijklmnopqrstuvwxyz'[Math.floor(Math.random() * 26)]).join('');
         return _name(8);
-      }
-    }
+      },
+    },
   });
   const mv: any = ref(props.modelValue);
   const state: any = reactive({
@@ -75,7 +75,7 @@
     }),
     has: computed(() => {
       return props.options?.some((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
-    })
+    }),
   });
 
   // 监听外部数据
@@ -86,7 +86,7 @@
       const selectd: any = props.options?.filter((item: any) => v?.some((i: any) => `${i}` === `${item.value}`))?.map((item: any) => item.label) || [];
       state.value = selectd.join(' Ι ') || '';
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
   // 更新
   const change = (item: any) => {

package/src/components/form/MoreSelectTags.vue

@@ -28,23 +28,23 @@
     placeholder: { type: String, default: '' },
     modelValue: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     options: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     rules: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     field: {
       type: String,
       default: () => {
         const _name = (l: any) => Array.from({ length: l }, () => 'abcdefghijklmnopqrstuvwxyz'[Math.floor(Math.random() * 26)]).join('');
         return _name(8);
-      }
-    }
+      },
+    },
   });
 
   const mv: any = ref(props.modelValue);
@@ -105,14 +105,14 @@
     () => {
       mv.value = props.modelValue;
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
   watch(
     () => mv.value,
     (v: any) => {
       emits('update:modelValue', v);
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   const ready: any = ref(0);

package/src/components/form/SearchMoreSelect.vue

@@ -54,7 +54,7 @@
     // 用户是否交互
     interacted: {
       type: Boolean,
-      default: false
+      default: false,
     },
     theme: { type: String, default: '@a' },
     sz: { type: String, default: 'm' },
@@ -63,42 +63,42 @@
     // 提示文案
     tips: {
       type: String,
-      default: ''
+      default: '',
     },
     placeholder: {
       type: String,
-      default: ''
+      default: '',
     },
     modelValue: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     options: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     ui: {
       type: Object,
-      default: () => ({ sz: 'm' })
+      default: () => ({ sz: 'm' }),
     },
     // 校验规则
     rules: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     // 是否是示校验图标
     verify: {
       type: Boolean,
-      default: false
+      default: false,
     },
     tools: {
       type: Boolean,
-      default: true
+      default: true,
     },
     spare: {
       type: String,
-      default: '当前没有可选项'
-    }
+      default: '当前没有可选项',
+    },
   });
   const formName = new Date().getTime().toString();
 
@@ -129,7 +129,7 @@
     }),
     has: computed(() => {
       return props.options?.some((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
-    })
+    }),
   });
 
   const toggle = () => {

package/src/components/form/TextArea.vue

@@ -36,75 +36,75 @@
     // 值
     modelValue: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     // 类型
     type: {
       type: String,
-      default: 'text'
+      default: 'text',
     },
     // 提示文案
     tips: {
       type: String,
-      default: ''
+      default: '',
     },
     // 内容占位
     placeholder: {
       type: String,
-      default: ''
+      default: '',
     },
     // 最大长度
     maxLength: {
       type: Number,
-      default: null
+      default: null,
     },
     // 最小长度
     minLength: {
       type: Number,
-      default: null
+      default: null,
     },
     // 最小长度
     autoHeight: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 是否禁用
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 是否中读
     readonly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 是否显示清除按钮
     clearable: {
       type: Boolean,
-      default: true
+      default: true,
     },
     // 校验规则
     rules: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     // 是否是示校验图标
     verify: {
       type: Boolean,
-      default: false
+      default: false,
     },
     prefix: {
       type: Array as PropType<any[]>,
-      default: () => []
+      default: () => [],
     },
     suffix: {
       type: Array as PropType<any[]>,
-      default: () => []
+      default: () => [],
     },
     rows: {
       type: Number,
-      default: 3
-    }
+      default: 3,
+    },
   });
 
   const ready: any = ref(0);
@@ -164,7 +164,7 @@
     (v: any) => {
       mv.value = v;
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   watch(
@@ -180,7 +180,7 @@
       // 自动高度
       fAutoHeight();
     },
-    { deep: true }
+    { deep: true },
   );
 
   onMounted(() => {

package/src/components/form/index.ts

@@ -54,7 +54,7 @@ export {
   DateRangePicker,
   ImgUpload,
   Upload,
-  Cascader
+  Cascader,
 };
 
 // 单选

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

@@ -89,7 +89,7 @@
     words: () => ({}),
     limit: () => [],
     param: () => ({}),
-    tools: false
+    tools: false,
   });
 
   // 定义emit事件
@@ -101,7 +101,7 @@
   const state: any = reactive({
     name: computed(() => 'confs' + route.path?.replace(/\//g, '_')),
     limit: [],
-    param: {}
+    param: {},
   });
 
   // 监听外部配置
@@ -143,7 +143,7 @@
         return item;
       });
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 缓存交互配置
@@ -161,7 +161,7 @@
       });
       localStorage.setItem(`${state.name}_limit`, JSON.stringify(_limit));
     },
-    { deep: true }
+    { deep: true },
   );
 
   watch(
@@ -169,7 +169,7 @@
     () => {
       state.param = props.param;
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 重置筛选

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

@@ -10,10 +10,10 @@
           <template v-for="(col, idx) in state.table" :key="idx">
             <th v-if="!col.__close" :min-width="col.fixed" :col-fixed="col.fixed" :col-fixed-side="col.fixed || 'l'" :data-field="col.field">
               <slot :name="`thead-${col.field}`" :col="col" :idx="idx">
-                <div v-bind="col.thead">
+                <div :class="!slots.operate && idx === state.__last ? 'ar' : ''" 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();
   // 外部插槽