@neatui/vue 2.7.2 → 2.7.3

package/package.json

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

package/src/components/basic/IDraggable.vue

@@ -13,8 +13,8 @@
   const props = defineProps({
     lists: {
       type: Array as PropType<any[]>,
-      default: () => []
-    }
+      default: () => [],
+    },
   });
   const emit = defineEmits(['update:lists']);
 
@@ -25,14 +25,14 @@
   watch(
     () => props.lists,
     (newVal, oldVal) => {
-      console.log('IDraggable props.lists changed:', {
-        newLength: newVal?.length,
-        oldLength: oldVal?.length,
-        newVal: newVal?.map((item) => item.label || item.field),
-        oldVal: oldVal?.map((item) => item.label || item.field)
-      });
+      // console.log('IDraggable props.lists changed:', {
+      //   newLength: newVal?.length,
+      //   oldLength: oldVal?.length,
+      //   newVal: newVal?.map((item) => item.label || item.field),
+      //   oldVal: oldVal?.map((item) => item.label || item.field)
+      // });
     },
-    { deep: true }
+    { deep: true },
   );
 
   onMounted(() => {
@@ -54,13 +54,13 @@
 
               console.log(
                 'Emitting new list:',
-                newList.map((item) => item.label || item.field)
+                newList.map((item) => item.label || item.field),
               );
 
               // 通知父组件更新数据
               emit('update:lists', newList);
             }
-          }
+          },
         });
       }
     });

package/src/components/loader/FormLoader/FormLoader@v2.vue

@@ -204,7 +204,7 @@
     SearchMoreSelect,
     ImgUpload,
     Upload,
-    Cascader
+    Cascader,
   } from '../../form';
   import { Tree } from '../../display';
 
@@ -238,39 +238,39 @@
     // 用户是否交互
     interacted: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // JSON规则
     form: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     // 表单数据
     data: {
       type: Object as any,
-      default: () => ({})
+      default: () => ({}),
     },
     // 栅格系统
     rows: {
       type: String,
-      default: 'mob-24 pad-12 dpc-8'
+      default: 'mob-24 pad-12 dpc-8',
     },
     // 如果表单是数组的话这里传入下标
     idx: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     // 是否垂直排列
     vertical: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   });
 
   // 数据
   const state: any = reactive({
     form: [],
-    _lw: 6
+    _lw: 6,
   });
 
   // 监听结构
@@ -382,13 +382,13 @@
             },
             {
               deep: true,
-              immediate: true
-            }
-          )
+              immediate: true,
+            },
+          ),
         );
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 处理
@@ -409,7 +409,7 @@
         }
       });
     },
-    { deep: true }
+    { deep: true },
   );
 
   onBeforeUnmount(() => {

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

@@ -16,21 +16,7 @@
     <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>
-    <div
-      v-else
-      :class="json?.attrs?.class?.includes('wrap') ? 'wrap' : 'nowrap'"
-      v-bind="json.attrs"
-      v-on="event(json, data)"
-      v-html="
-        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])
-            : '‐‐'
-      "
-    ></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>
   </template>
 </template>
 <script lang="ts" setup>
@@ -71,12 +57,12 @@
   const props: any = defineProps({
     col: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     data: {
       type: [Object],
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   });
 
   // 运行函数计算
@@ -97,6 +83,16 @@
 
   const json = computed(() => runfun(deepcopy(props.col)));
 
+  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])
+        : '‐‐';
+  };
+
   // 事件处理
   const event: any = (col: any, data: any): object => {
     const _event: any = {};

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

@@ -1,40 +1,46 @@
 <template>
   <div class="full" ui-scroll=":x :y">
     <!-- 桌面端 -->
-    <table ui-hide="<pad" ui-table="@b sz:l" ref="tableRef">
+    <table ui-hide="<pad" :ui-table="theme" ref="tableRef">
       <thead class="table-head-fixed">
         <tr>
-          <th v-if="selected" col-fixed="1" min-width>
+          <th v-if="selected" min-width col-fixed="1">
             <label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" :checked="state.isAllSelect" @change="fSelectAll" /><span></span></label>
           </th>
           <template v-for="(col, idx) in state.table" :key="idx">
-            <th v-if="!col._close" class="fs-xs nowrap" :min-width="col.fixed" :col-fixed="col.fixed" :col-fixed-side="col.fixed || 'l'" :data-field="col.field">
-              <div :ui-flex="`row ${!slots.operate && idx === state._last ? 'rm' : 'lm'}`">
-                <span class="nl-xs" v-if="col.sort" :ui-sort="0" @click="emits('onsort', col)">{{ col.label }}</span>
-                <span class="nl-xs" v-else>{{ col.label }}</span>
-                <IFollowView v-if="!slots.operate && idx === state._last" tipBoxClass="n-no">
-                  <button :ui-btn="`@a none s :square`">
-                    <Icon name="tableloader-setting" class="co-read"></Icon>
-                  </button>
-                  <template #tips>
-                    <div class="w-mm h-ls n-sl" ui-scroll="x:hidden :y">
-                      <IDraggable v-model:lists="state.table">
-                        <template #default="{ item: element, idx: index }">
-                          <div :class="`item ux-hover nowrap r-ss ${element.fixed ? 'forbid' : 'element'}`" :key="index">
-                            <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
-                              <input type="checkbox" :checked="!element._close" @change="element._close = element._close ? 0 : 1" />
-                              <span>
-                                {{ element.label }}
-                                <i v-if="element.fixed" class="icon icon-fixed fs-xs"></i>
-                              </span>
-                            </label>
-                          </div>
-                        </template>
-                      </IDraggable>
-                    </div>
-                  </template>
-                </IFollowView>
-              </div>
+            <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.attrs, ...col.thead }">
+                  <span class="nl-xs ux-none" v-if="col.order === 0 || col.order === 1 || col.order === 2" @click="fSetOrder(col)">
+                    <span>{{ col.label }}</span>
+                    <span ui-btn="@a none s" :ui-order="col.__order"></span>
+                  </span>
+                  <span class="nl-xs" v-else>{{ col.label }}</span>
+                  <!-- 设置 -->
+                  <IFollowView v-if="!slots.operate && idx === state._last" tipBoxClass="n-no">
+                    <button :ui-btn="`@a none s :square`">
+                      <Icon name="tableloader-setting" class="co-read"></Icon>
+                    </button>
+                    <template #tips>
+                      <div class="w-mm h-ml+ n-sl" ui-scroll="x:hidden :y">
+                        <IDraggable v-model:lists="state.table">
+                          <template #default="{ item: element, idx: index }">
+                            <div :class="`item ux-hover nowrap r-ss ${element.fixed ? 'forbid' : 'element'}`" :key="index">
+                              <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
+                                <input type="checkbox" :checked="!element.__close" @change="element.__close = element.__close ? 0 : 1" />
+                                <span>
+                                  {{ element.label }}
+                                  <i v-if="element.fixed" class="icon icon-fixed fs-xs"></i>
+                                </span>
+                              </label>
+                            </div>
+                          </template>
+                        </IDraggable>
+                      </div>
+                    </template>
+                  </IFollowView>
+                </div>
+              </slot>
             </th>
           </template>
           <th v-if="slots.operate" col-fixed="r" class="fs-xs nowrap ar">
@@ -42,15 +48,15 @@
               <span class="mr-sm">{{ words['operate'] || '操作' }}</span>
               <IFollowView v-if="tools" tipBoxClass="n-no">
                 <button :ui-btn="`@a none s :square`">
-                  <Icon name="tableloader-setting" class="co-read"></Icon>
+                  <Icon name="tableloader-setting" class="co-auto"></Icon>
                 </button>
                 <template #tips>
-                  <div class="w-mm h-ls n-sl" ui-scroll="x:hidden :y">
+                  <div class="w-mm h-ml+ n-sl" ui-scroll="x:hidden :y">
                     <IDraggable v-model:lists="state.table">
                       <template #default="{ item: element, idx: index }">
                         <div :class="`item ux-hover nowrap r-ss ${element.fixed ? 'forbid' : 'element'}`" :key="index">
                           <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
-                            <input type="checkbox" :checked="!element._close" @change="element._close = element._close ? 0 : 1" />
+                            <input type="checkbox" :checked="!element.__close" @change="element.__close = element.__close ? 0 : 1" />
                             <span>
                               {{ element.label }}
                               <i v-if="element.fixed" class="icon icon-fixed fs-xs"></i>
@@ -72,17 +78,16 @@
             <td v-if="selected" col-fixed="1" min-width>
               <label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" v-model="item.__selected" /><span></span></label>
             </td>
-            <template v-for="(col, idx) in state.table" :key="idx">
+            <template v-for="(col, cid) in state.table" :key="cid">
               <td
-                v-if="!col._close"
-                :class="`${!slots.operate && idx === state._last ? 'ar' : ''}`"
+                v-if="!col.__close"
+                :class="`${!slots.operate && cid === state._last ? 'ar' : ''}`"
                 :min-width="col.fixed"
                 :col-fixed="col.fixed"
                 :col-fixed-side="col.fixed || 'l'"
                 :data-field="col.field"
               >
-                <slot v-if="slots[col.field]" :name="col.field"></slot>
-                <TableColView v-else :col="col" :data="item" />
+                <slot :name="col.field" :col="col" :item="item" :idx="idx"><TableColView :col="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>
@@ -92,51 +97,45 @@
     </table>
     <!-- 移动端 -->
     <div ui-hide=">mob">
-      <table class="n-sl" ui-table="@a">
-        <thead class="table-head-fixed">
-          <tr>
-            <th class="fs-xs ar ps nr-no">
-              <div ui-flex="row xm">
-                <span class="fs-xs bold">信息</span>
-                <IFollowView>
-                  <button :ui-btn="`@a none s :square`"><Icon name="tableloader-setting" class="co-read"></Icon></button>
-                  <template #tips>
-                    <IDraggable v-model:lists="state.table">
-                      <template #default="{ item: element, idx: index }">
-                        <div class="item ux-hover nowrap r-ss" :key="index">
-                          <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
-                            <input type="checkbox" :checked="!element._close" @change="element._close = element._close ? 0 : 1" />
-                            <span>{{ element.label }}</span>
-                          </label>
-                        </div>
-                      </template>
-                    </IDraggable>
+      <ul>
+        <li class="bg-fore r-sm my-sl nx-ms ny-sl" ui-flex="row xm">
+          <div>
+            <label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" :checked="state.isAllSelect" @change="fSelectAll" /><span>全选</span></label>
+          </div>
+          <div>
+            <IFollowView>
+              <button :ui-btn="`@a none s :square`"><Icon name="tableloader-setting" class="co-read"></Icon></button>
+              <template #tips>
+                <IDraggable v-model:lists="state.table">
+                  <template #default="{ item: element, idx: index }">
+                    <div class="item ux-hover nowrap r-ss" :key="index">
+                      <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
+                        <input type="checkbox" :checked="!element.__close" @change="element.__close = element.__close ? 0 : 1" />
+                        <span>{{ element.label }}</span>
+                      </label>
+                    </div>
                   </template>
-                </IFollowView>
-              </div>
-            </th>
-          </tr>
-        </thead>
-        <tbody :ui-tbody-load="state.load">
-          <template v-if="lists.length">
-            <tr v-for="(item, idx) in lists" :key="idx" v-bind="rows.attrs" v-on="event(rows.event, item)">
-              <td ui-card="@a bk:line" class="mb-sl">
-                <div ui-card-body="" class="n-ss">
-                  <ul>
-                    <template v-for="(col, idx) in state.table" :key="idx">
-                      <li v-if="!col._close" :class="`${col.fixed ? 'ps z-sm' : ''}`" ui-flex="row lm">
-                        <div class="w-sl">{{ col.label }}:</div>
-                        <TableColView :col="col" :data="item" />
-                      </li>
-                    </template>
-                    <li v-if="slots.operate"><slot name="operate" :item="item" :idx="idx"></slot></li>
-                  </ul>
-                </div>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
+                </IDraggable>
+              </template>
+            </IFollowView>
+          </div>
+        </li>
+        <li v-for="(item, idx) in lists" :key="idx" class="bg-fore r-sm my-sl n-ms">
+          <table>
+            <tbody>
+              <template v-for="(col, idx) in state.table" :key="idx">
+                <tr v-if="!col.__close">
+                  <td class="nowrap vt n-ss">{{ col.label }}:</td>
+                  <td class="n-ss">
+                    <TableColView :col="col" :data="item" />
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+          <div v-if="slots.operate"><slot name="operate" :item="item" :idx="idx"></slot></div>
+        </li>
+      </ul>
     </div>
     <div v-if="!lists.length" class="ny-ls o-mm" ui-flex="col cm">
       <div class="ac">
@@ -159,12 +158,16 @@
   // 外部插槽
   const slots: any = useSlots();
   // 外部方法
-  const emits = defineEmits(['update:table', 'onsort', 'refresh']);
+  const emits = defineEmits(['update:table', 'order', 'refresh']);
 
   // 类型定义
   interface JSONRules {
     label: string | (() => string);
     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>);
@@ -173,7 +176,7 @@
     attrs?: string | Record<string, any> | Record<string, any>[] | (() => string | Record<string, any> | Record<string, any>[]);
     value?: any | (() => any);
     clear?: boolean | (() => boolean);
-    sort?: boolean | (() => boolean);
+    order?: 0 | 1 | 2 | number | (() => 0 | 1 | 2 | number);
   }
   interface Props {
     words?: { [key: string]: any };
@@ -181,6 +184,7 @@
     lists: Array<any>;
     selected?: boolean;
     tools?: boolean;
+    theme?: string;
     rows?: {
       attrs?: { [key: string]: any };
       event?: { [key: string]: any };
@@ -193,7 +197,8 @@
     lists: () => [],
     selected: true,
     tools: true,
-    rows: () => ({ attrs: {}, event: {} })
+    rows: () => ({ attrs: {}, event: {} }),
+    theme: '@b sz:l',
   });
 
   // 内部数据
@@ -206,11 +211,11 @@
     limit: computed(() => {
       const _cache = JSON.parse(localStorage.getItem(`${state.name}_limit`) || '{}');
       return (props.limit || [])?.map((item: any) => {
-        if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_close')) {
-          item._close = _cache[item.field]?._close;
+        if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '__close')) {
+          item.__close = _cache[item.field]?.__close;
         } else {
           if (item.close === true || item.close === 1 || item.close === 'always') {
-            item._close = 1;
+            item.__close = 1;
           }
         }
         return item;
@@ -239,32 +244,55 @@
       });
     }),
     // 最后一列可见列
-    last: 0
+    last: 0,
+    lw: 0,
   });
 
+  // 前置处理
   watch(
     () => props.table,
     () => {
       const _cache = JSON.parse(localStorage.getItem(`${state.name}_table`) || '{}');
       state._last = 0;
       state.table = deepcopy(props.table || [])
-        ?.map((item: any, idx: number) => {
+        ?.map((col: any, idx: number) => {
+          // 表头属性处理
+          if (!col.thead) {
+            col.thead = {};
+          }
+          // 表头默认样式
+          const _thc = (col.thead.class || '').split(/\s+/);
+          if (!_thc.includes('wrap') && !_thc.includes('nowrap')) {
+            _thc.push('nowrap');
+          }
+          if (!_thc.some((c: any) => c.startsWith('fs-'))) {
+            _thc.unshift('fs-xs');
+          }
+          col.thead.class = _thc.join(' ').trim();
+
           // 缓存的显示信息
-          if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_close')) {
-            item._close = _cache[item.field]?._close;
+          if (_cache[col.field] && Object.prototype.hasOwnProperty.call(_cache[col.field], '__close')) {
+            col.__close = _cache[col.field]?.__close;
           } else {
-            if (item.close === true || item.close === 1 || item.close === 'always') {
-              item._close = 1;
+            if (col.close === true || col.close === 1 || col.close === 'always') {
+              col.__close = 1;
             }
           }
-          // 缓存的排序信息
-          if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_sort')) {
-            item._sort = _cache[item.field]?._sort;
+          // 获取缓存的表格列顺序（注意不是数据记录的排序）
+          if (_cache[col.field] && Object.prototype.hasOwnProperty.call(_cache[col.field], '_sort')) {
+            col._sort = _cache[col.field]?._sort;
           }
-          if (!item._close) {
+
+          // 获取本地存储的字段升降序（注意不是表格列的顺序）
+          if (col.order === 0 || col.order === 1 || col.order === 2 || (_cache[col.field] && Object.prototype.hasOwnProperty.call(_cache[col.field], '__order'))) {
+            col.__order = _cache[col.field]?.__order || col.order;
+          }
+
+          // 最后一列可见列
+          if (!col.__close) {
             state._last = idx;
           }
-          return item;
+          return col;
         })
         .sort((a: any, b: any) => a._sort - b._sort)
         .sort((a: any, b: any) => {
@@ -276,33 +304,37 @@
     },
     {
       deep: true,
-      immediate: true
-    }
+      immediate: true,
+    },
   );
+
+  // 缓存配置
   watch(
     [() => state.table],
     () => {
       const _table: any = {};
       state._last = 0;
-      state.table.forEach((item: any, idx: number) => {
-        _table[item.field] = { _sort: idx };
-        if (Object.prototype.hasOwnProperty.call(item, '_close')) {
-          _table[item.field]._close = item._close ? 1 : 0;
+      state.table.forEach((col: any, idx: number) => {
+        _table[col.field] = { _sort: idx };
+        if (Object.prototype.hasOwnProperty.call(col, '__close')) {
+          _table[col.field].__close = col.__close ? 1 : 0;
         }
-        if (!item._close) {
+        if (Object.prototype.hasOwnProperty.call(col, '__order')) {
+          _table[col.field].__order = col.__order;
+        }
+        if (!col.__close) {
           state._last = idx;
         }
       });
-      console.log(338);
       localStorage.setItem(`${state.name}_table`, JSON.stringify(_table));
     },
-    { deep: true }
+    { deep: true },
   );
 
   // 全选
   const fSelectAll = ({ target = {} }: any = {}) => {
-    props.lists.map((item: any = {}) => {
-      item.__selected = target.checked;
+    props.lists.map((col: any = {}) => {
+      col.__selected = target.checked;
     });
   };
   const tableRef: any = ref(null);
@@ -321,13 +353,21 @@
       });
     },
     {
-      deep: true
-    }
+      deep: true,
+    },
   );
   onUnmounted(() => {
     itable.remove();
   });
 
+  // 设置字段升降序
+  const fSetOrder = (col: any) => {
+    const all = state.table.filter((i: any) => i.__order && i.field !== col.field).map((i: any) => ({ field: i.field, order: i.__order }));
+    col.__order = col.__order = (col.__order + 1) % 3;
+    all.unshift({ field: col.field, order: col.__order });
+    emits('order', { field: col.field, order: col.__order }, all);
+  };
+
   // 事件处理
   const event: any = (event: any, data: any): object => {
     const _event: any = {};

package/src/components/loader/TableLoader/index.ts

@@ -44,6 +44,6 @@ export function allSelected(lists: ListItem[] = []) {
       lists.forEach((item) => {
         item.__selected = value;
       });
-    }
+    },
   };
 }