@neatui/vue 2.9.0 → 2.10.0

package/package.json

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

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/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/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/loader/LayerLoader/LayerLoader.vue

@@ -75,13 +75,13 @@
 <script setup lang="ts">
   import { nextTick, reactive, ref, watch, onMounted } from 'vue';
   import LayerLoader from './LayerLoader.vue';
-  import { useBaseStore, useWorksStore, storeToRefs } from '@/store';
+  import { useBasicStore, useWorksStore, storeToRefs } from '@/store';
   import { deepcopy } from '@fekit/utils';
   import scrollto from '@fekit/scrollto';
 
   // 事件定义
   const store: any = useWorksStore();
-  const base: any = useBaseStore();
+  const base: any = useBasicStore();
   const { word } = base;
 
   // 类型定义

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,7 +10,7 @@
           <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="`@a ${col.__order}`"></span>

package/src/index.ts

@@ -1,5 +1,6 @@
 // 数据
-export * from './store/myui';
+export * from './store/frame';
+export * from './utils/theme';
 
 // 组件
 export * from './components/basic';

package/src/store/{myui.ts → frame.ts}

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 
 // 基础数据
-export const useMyuiStore = defineStore('myui', {
+export const useFrameStore = defineStore('frame', {
   state: () => {
     return {
       full: localStorage.getItem('neatui_full') || 0,
@@ -10,7 +10,7 @@ export const useMyuiStore = defineStore('myui', {
       // 主题
       theme: localStorage.getItem('neatui_theme') || document?.documentElement?.getAttribute('theme') || 'auto',
       // 侧边
-      side: 1
+      side: 1,
     };
   },
   getters: {},
@@ -45,6 +45,6 @@ export const useMyuiStore = defineStore('myui', {
         document.documentElement.setAttribute('size', this.size);
         then(this.size);
       }
-    }
-  }
+    },
+  },
 });

package/src/utils/theme.ts

@@ -0,0 +1,14 @@
+// 主题
+export const theme = (then = (_theme: any) => {}) => {
+  // 自动设置主题
+  const auto = (scheme: any) => {
+    const _theme = window.localStorage.getItem('theme') || (scheme.matches ? 'dark' : 'light');
+    document.documentElement.setAttribute('theme', _theme);
+    then(_theme);
+  };
+  // 监听系统主题
+  const scheme: any = window.matchMedia('(prefers-color-scheme: dark)');
+  auto(scheme);
+  // 监控主题事件
+  scheme.addListener(auto);
+};