@neatui/vue 2.9.1 → 2.11.0

package/package.json

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

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

@@ -119,7 +119,7 @@
   const props: any = withDefaults(defineProps<Props>(), {
     modelValue: '',
     options: () => [],
-    tools: true,
+    tools: false,
     spare: '当前没有可选项',
     search: false,
     pagination: false,
@@ -143,7 +143,7 @@
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false
+    interacted: false,
   });
 
   const change = ({ value = '' }: any = {}) => {
@@ -165,7 +165,7 @@
       } else {
         return props.options;
       }
-    })
+    }),
   });
   // 选择
   const select = (item: any = {}) => {
@@ -195,7 +195,7 @@
     select,
     remove,
     change,
-    cancel
+    cancel,
   });
 </script>
 . .

package/src/components/form/Switch.vue

@@ -1,7 +1,9 @@
 <template>
   <label ui-form="@a type:switch" class="lh-ls">
     <input type="checkbox" name="form2" :checked="value ? true : false" />
-    <slot>&nbsp;</slot>
+    <slot>
+      <span>{{ text }}</span>
+    </slot>
   </label>
 </template>
 
@@ -16,106 +18,70 @@
     // 值
     modelValue: {
       type: [Number, Boolean],
-      default: false
+      default: false,
     },
     // 类型
     type: {
       type: String,
-      default: 'text'
+      default: 'text',
+    },
+    text: {
+      type: String,
+      default: '',
     },
     // 提示文案
     tips: {
       type: String,
-      default: ''
+      default: '',
     },
     // 内容占位
     placeholder: {
       type: String,
-      default: ''
+      default: '',
     },
     // 最大长度
     maxlength: {
       type: Number,
-      default: null
+      default: null,
     },
     // 最小长度
     minlength: {
       type: Number,
-      default: null
+      default: null,
     },
     // 是否禁用
     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: () => []
-    }
-  });
-
-  const ready: any = ref(0);
-  const state: any = computed(() => {
-    if (ready.value) {
-      // 提示文案
-      let tips = '';
-      // 错误类型
-      let type = '';
-      // 验证结果
-      let verify = '';
-      if (props.modelValue) {
-        // 有值
-        const res: any = props.rules?.some((rule: any) => {
-          const yes = rule.validator && !rule.validator(props.modelValue);
-          tips = rule.msg;
-          type = rule.type;
-          return yes;
-        });
-        verify = res ? 'no' : 'ok';
-      } else {
-        // 无值
-        const res: any = props.rules?.some((rule: any) => {
-          tips = rule.msg;
-          type = rule.type;
-          return rule.required;
-        });
-        verify = res ? 'no' : '';
-      }
-      if (verify !== 'no' && props.tips) {
-        tips = props.tips;
-      }
-      // 是否显示提示
-      const ontips = verify === 'no' && tips ? 'show' : '';
-      // 状态颜色
-      const co = verify === 'no' ? 'co:' + type : props.co ? 'co:' + props.co : '';
-      return { tips, ontips, verify, co };
-    } else {
-      return {};
-    }
+      default: () => [],
+    },
   });
 
   const value = ref(props.modelValue);
@@ -124,12 +90,6 @@
     () => props.modelValue,
     (newValue) => {
       value.value = newValue;
-    }
+    },
   );
-
-  onMounted(() => {
-    setTimeout(() => {
-      ready.value = 1;
-    }, 300);
-  });
 </script>

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/TableLoader/TableLoader.vue

@@ -87,7 +87,7 @@
                 :col-fixed-side="col.fixed || 'l'"
                 :data-field="col.field"
               >
-                <slot :name="col.field" :col="col" :item="item" :idx="idx"><TableRender :col="col" :data="item" /></slot>
+                <slot :name="col.field" :col="col" :item="item" :idx="idx"><TableRender :node="col" :data="item" /></slot>
               </td>
             </template>
             <td v-if="slots.operate" col-fixed="r" class="ar"><slot name="operate" :item="item" :idx="idx"></slot></td>
@@ -127,7 +127,7 @@
                 <tr v-if="!col.__close">
                   <td class="nowrap vt n-ss">{{ col.label }}:</td>
                   <td class="n-ss">
-                    <TableRender :col="col" :data="item" />
+                    <TableRender :node="col" :data="item" />
                   </td>
                 </tr>
               </template>
@@ -167,14 +167,14 @@
     field: string | (() => string);
     width?: string | (() => string);
     fixed?: string | (() => string);
-    thead?: object | (() => object);
-    tbody?: object | (() => object);
     paths?: string | (() => string);
-    model?: string | Array<any> | (() => string | Array<any>);
-    enums?: Array<any> | (() => string | Array<any>);
-    rules?: Array<any> | (() => string | Array<any>);
-    event?: Array<any> | (() => string | Array<any>);
-    attrs?: string | Record<string, any> | Record<string, any>[] | (() => string | Record<string, any> | Record<string, any>[]);
+    thead?: Record<string, any> | ((data: any) => Record<string, any>);
+    tbody?: Record<string, any> | ((data: any) => Record<string, any>);
+    model?: string | any[] | ((data: any) => string | any[]);
+    enums?: any[] | ((data: any) => any[]);
+    rules?: any[] | ((data: any) => any[]);
+    event?: Record<string, any> | ((data: any) => Record<string, any>);
+    attrs?: Record<string, any> | ((data: any) => Record<string, any>);
     value?: any | (() => any);
     clear?: boolean | (() => boolean);
     order?: 0 | 1 | 2 | number | (() => 0 | 1 | 2 | number);
@@ -268,6 +268,11 @@
       state.__last = 0;
       state.table = deepcopy(props.table || [])
         ?.map((col: TableColumn, idx: number) => {
+          // 标题处理
+          if (isFunction(col.label)) {
+            col.label = col.label(props.lists);
+          }
+
           // 表头属性处理
           col.thead ??= {};
           col.thead.class = (col.thead.class || '').split(/\s+/);

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

@@ -1,61 +1,43 @@
 <template>
-  <template v-if="isArray(json.child)">
-    <div :class="json?.attrs?.class?.includes('wrap') ? 'wrap' : 'nowrap'" v-bind="json.attrs" v-on="event(json, data)">
-      <TableRender v-for="(sub, idx) in col.child" :key="idx" :col="sub" :data="data" />
+  <template v-if="isArray(node.child)">
+    <div v-bind="attrs" v-on="event" v-memo="[node.child, data]">
+      <TableRender v-for="(sub, idx) in node.child" :key="idx" :node="sub" :data="data" />
     </div>
   </template>
-  <template v-else-if="json.popup">
-    <IFollowView>
-      <TableRender :col="{ ...col, popup: null }" :data="data" />
+  <template v-else-if="node.popup">
+    <IFollowView v-memo="[node.popup, data]">
+      <TableRender :node="{ ...node, popup: null }" :data="data" />
       <template #tips>
-        <TableRender :col="isFunction(col.popup) ? col.popup(data) : col.popup" :data="data" />
+        <TableRender :node="isFunction(node.popup) ? node.popup(data) : node.popup" :data="data" />
       </template>
     </IFollowView>
   </template>
   <template v-else>
-    <div v-if="json.model === 'Image'" :class="json?.attrs?.class?.includes('wrap') ? 'wrap' : 'nowrap'" ui-img="@a read :round" v-bind="json.attrs" v-on="event(json, data)">
-      <img :src="json.value || data[json.field] || DefaultImage" alt="" />
+    <div v-if="model.value" v-bind="attrs" v-on="event">
+      <div v-if="model.value === 'image'" ui-cover="1:1" v-bind="model.attrs">
+        <div class="pa full bg-case-ls r-sm ot-no ol-no" :class="state.isloaded ? 'o-no' : 'o-ms'" ui-flex="col cm"><i ui-load="@d"></i></div>
+        <img ref="img" class="r-sm" :src="value" @load="state.isloaded = 1" />
+      </div>
+      <label v-else-if="model.value === 'switch'" ui-form="@a type:switch" @click.prevent>
+        <input type="checkbox" :checked="value" />
+        <span v-if="model.attrs?.label">{{ model.attrs?.label }}</span>
+      </label>
     </div>
-    <div v-else :class="json?.attrs?.class?.includes('wrap') ? 'wrap' : 'nowrap'" v-bind="json.attrs" v-on="event(json, data)" v-html="value(json, data)"></div>
+    <div v-else v-bind="attrs" v-on="event" v-html="value"></div>
   </template>
 </template>
 <script lang="ts" setup>
-  import { computed } from 'vue';
-  import { isFunction, isArray, isObject, deepcopy } from '@fekit/utils';
+  import { computed, onMounted, reactive, ref } from 'vue';
+  import { isFunction, isArray, isObject, isString, findEnumName } from '@fekit/utils';
   import { useRoute, useRouter } from 'vue-router';
   import TableRender from './TableRender.vue';
   import { IFollowView } from '../../basic';
 
-  const DefaultImage =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKYAAACmBAMAAACipulEAAAAHlBMVEXMzMz////z8/Pf39/Z2dnS0tLq6urk5OTu7u74+PjCLuPVAAABxUlEQVRo3u2YsUsDMRSHX9Wzupn22qObVxAd7SCuV1BwvGrVtQcqjlYQHFVEVzv575qklReE9urlFTL8vqUvQz+Se3m5yyMAAAAAAAAAAAAAsFIu7rvz+DiqprxSi7itotxQi8kqOHslzqbHNAUnul3q/PJYutzi01Jn47/KSBm+jxep8yopSojqgklaV5qRDor5zsMKTru4gazTJmEtfKcyQU3Waf/UE3bGXPb7p5fDRwmnuhkWyvJEhmt/JzOiKZtyzph+6Us5O1zY0UTI2TKy5+4nl5W/M9PpT00NmEDG2dbDgiMR5w7R1ix84brycz7oyfGU6yLO3HmIGUUSzoY9m3jxqYAzsRuIt9VYwBm7Z1OTB57Owt1XfQFn649zEOg8YzctiYyz6Wpizxzxcmtunb5K1JGtR65TkdrMiCazsMOHnZ9zlx9ozHXq5XTfyBnr/ZwdPTy30Z6OJr5OfhOf6d934tPZ15mQJjrJSVN4O3mi/NEg5GzkNCVKBZy8estYeTuZdmbuDYWScDIHd29KSTmZEJ26GsUvxpEqJw/gDrvMXTuInsASvYsgeizlvaBAelZlvTUAAAAAAAAAAAAAsEp+AEDOpCBEwOONAAAAAElFTkSuQmCC';
-
-  // 通过枚举值查找枚举名
-  const findEnumName = (enums: any, val: any, join: boolean | string = ' Ι ') => {
-    // 转换核心
-    const _core = (v: any) => {
-      const { label = v }: any = enums.find(({ value = '' }: any) => value == v) || {};
-      return label;
-    };
-    // 判断枚举字典是否可用
-    if (enums && enums.find) {
-      // 兼容多种入参类型
-      if (isArray(val)) {
-        // 数组
-        const arr = val.map((i: any) => _core(i));
-        return join ? arr.join(join) : arr;
-      } else {
-        return _core(val);
-      }
-    } else {
-      return val;
-    }
-  };
-
   const route = useRoute();
   const router = useRouter();
 
   const props: any = defineProps({
-    col: {
+    node: {
       type: Object,
       default: () => ({}),
     },
@@ -65,47 +47,95 @@
     },
   });
 
-  // 运行函数计算
-  const runfun = (obj: any): any => {
-    if (isArray(obj)) {
-      obj = obj.map((i: any) => runfun(i));
-    } else if (isObject(obj)) {
-      for (const k in obj) {
-        if (k !== 'event') {
-          obj[k] = runfun(obj[k]);
-        }
+  const img = ref<HTMLImageElement | null>(null);
+  onMounted(() => {
+    if (img.value) {
+      state.isloaded = img.value.complete && img.value.naturalWidth > 0 ? 1 : 0;
+    }
+  });
+
+  const state: any = reactive({
+    isloaded: 0,
+  });
+
+  // 属性处理
+  const attrs = computed(() => {
+    const a = props.node.attrs;
+    let attrs = isFunction(a) ? a?.(props.data) : a;
+
+    // 确保 attrs 存在
+    if (!attrs) attrs = {};
+    else attrs = { ...attrs };
+
+    // 处理 class 属性
+    if (attrs.class) {
+      attrs.class = attrs.class.split(/\s+/);
+      if (!attrs.class.some((c: string) => c === 'wrap' || c === 'nowrap')) {
+        attrs.class.push('nowrap');
       }
-    } else if (isFunction(obj)) {
-      obj = obj(deepcopy(props.data));
+    } else {
+      attrs.class = ['nowrap'];
     }
-    return obj;
-  };
 
-  const json = computed(() => runfun(deepcopy(props.col)));
+    return attrs;
+  });
+
+  // 模型处理
+  const model: any = computed(() => {
+    const m = props.node.model;
+    if (!m) return { value: '', attrs: {} };
+
+    const model = isFunction(m) ? m(props.data) : m;
 
-  const value = (json: any, data: any) => {
-    return json.value !== null && json.value !== undefined
-      ? isFunction(json.value)
-        ? json.value(json)
-        : json.value
-      : findEnumName(json.enums, data[json.field]) !== null && findEnumName(json.enums, data[json.field]) !== undefined
-        ? findEnumName(json.enums, data[json.field])
+    let value = '';
+    let attrs = {};
+    if (isString(model)) {
+      value = model;
+    } else if (isArray(model)) {
+      value = model[0] ?? '';
+      attrs = isObject(model[1]) ? model[1] : {};
+    }
+    value = value.toString().toLowerCase();
+
+    return { value, attrs };
+  });
+
+  // 枚举处理
+  const enums = computed(() => {
+    const e = props.node.enums;
+    return isFunction(e) ? e(props.data) : e;
+  });
+
+  // 数值处理
+  const value = computed(() => {
+    const n = props?.node;
+    const v = props?.data?.[n.field];
+    return n?.value !== null && n?.value !== undefined
+      ? isFunction(n?.value)
+        ? n?.value(props?.data)
+        : n?.value
+      : findEnumName(enums.value, v) !== null && findEnumName(enums.value, v) !== undefined
+        ? findEnumName(enums.value, v)
         : '‐‐';
-  };
+  });
 
-  // 事件处理
-  const event: any = (col: any, data: any): object => {
-    const _event: any = {};
-    if (isObject(col.event)) {
-      for (const key in col.event) {
-        const fun = col.event[key];
+  // 事件处理 (直接使用 computed)
+  const event = computed(() => {
+    let e = props.node.event;
+    if (isFunction(e)) {
+      e = e(props.data);
+    }
+    const events: any = {};
+    if (isObject(e)) {
+      for (const key in e) {
+        const fun = e[key];
         if (isFunction(fun)) {
-          _event[key] = (...args: any) => {
-            return fun({ data, route, router }, ...args);
+          events[key] = (...args: any) => {
+            return fun({ data: props.data, route, router }, ...args);
           };
         }
       }
     }
-    return { ..._event };
-  };
+    return events;
+  });
 </script>

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);
+};