@neatui/vue 2.7.1 → 2.7.2

package/package.json

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

package/src/components/form/Upload.vue

@@ -1,6 +1,6 @@
 <template>
   <div ui-flex="row lm :wrap" class="neatui-upload mb-sm-sub mr-sm-sub" v-bind="{ ...attrs }">
-    <div v-for="(file, idx) in state.files" :key="idx" ui-flex="col cm" class="flex-fixed bg-fore n-sl w-ms h-ms b-solid bk-case b-xs r-sm pr">
+    <div v-for="(file, idx) in state.files" :key="idx" ui-flex="col cm" class="flex-fixed bg-fore n-sl w-ms h-ms b-solid bk-case b-xs r-sm pr" v-bind="itemAttrs">
       <!-- 删除按钮 -->
       <div class="pa ot-ss or-ss bg-fore co-risk lh-xs r-xl parent-hover:show" @click="remove(idx)">
         <svg class="block" viewBox="0 0 1024 1024" style="width: 1em; height: 1em">
@@ -147,7 +147,7 @@
         </svg>
       </template>
 
-      <!-- 上传状态显示 -->
+      <!-- 上传状态 -->
       <div v-if="file.status === 'uploading'" class="upload-status">
         <div class="loading-spinner"></div>
         <span class="status-text">上传中...</span>
@@ -155,14 +155,11 @@
       <div v-else-if="file.status === 'error'" class="upload-status error">
         <span class="status-text">上传失败</span>
       </div>
-
-      <!-- 文件名 -->
-      <!-- <p ui-omit="1" class="fs-ss ac">{{ file.name }}</p> -->
     </div>
 
     <!-- 上传按钮 -->
     <div v-if="showUploadButton">
-      <slot>
+      <slot name="btn">
         <label ui-flex="row cm" ui-form="@a type:upload tips:hover" :class="`upload w-ms h-ms n-sl bg-fore b-solid bk-case b-xs r-sm ${uploadClass}`" :style="uploadStyle">
           <div v-if="tips" ui-form-tips>
             {{ tips }}
@@ -189,6 +186,7 @@
     modelValue?: string | any[];
     max?: number;
     attrs?: object;
+    itemAttrs?: object;
     uploadClass?: string;
     uploadStyle?: string;
     tips?: string;
@@ -196,6 +194,7 @@
     upload?: (formData: FormData) => Promise<any>;
     maxSize?: number;
     compress?: boolean;
+    disabled?: boolean;
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -203,12 +202,14 @@
     uploadClass: '',
     uploadStyle: '',
     attrs: () => ({}),
-    tips: '', // 提示文案
-    accept: '*', // 文件类型
-    upload: async () => null, // 请求上传接口
-    maxSize: 10, // 文件大小限制（MB）
-    compress: true, // 是否启用图片压缩
-    max: 0 // 文件数量限制
+    itemAttrs: () => ({}),
+    tips: '',
+    accept: '*',
+    upload: async () => null,
+    maxSize: 10,
+    compress: true,
+    max: 0,
+    disabled: false,
   });
 
   interface UploadFile {
@@ -226,7 +227,7 @@
     isInternalUpdate: boolean; // 标记是否为内部更新
   }>({
     files: [],
-    isInternalUpdate: false
+    isInternalUpdate: false,
   });
 
   const emit = defineEmits(['update:modelValue', 'change', 'error']);
@@ -314,7 +315,7 @@
         success: (result) => {
           resolve(new File([result], file.name, { type: result.type }));
         },
-        error: reject
+        error: reject,
       });
     });
   };
@@ -395,7 +396,7 @@
         type: getFileType(file),
         path: previewUrl,
         status: 'uploading',
-        size: file.size
+        size: file.size,
       };
       state.files.push(uploadFile);
       validFiles.push({ file, uploadFile });
@@ -475,7 +476,7 @@
               type: 'image',
               path: item,
               status: 'success' as const,
-              result: item
+              result: item,
             };
           } else {
             // 如果是对象
@@ -484,7 +485,7 @@
               type: item.type || 'file',
               path: item.url || item.path || '',
               status: 'success' as const,
-              result: item
+              result: item,
             };
           }
         });
@@ -495,8 +496,8 @@
             type: 'image',
             path: newValue,
             status: 'success',
-            result: newValue
-          }
+            result: newValue,
+          },
         ];
       } else if (newValue && typeof newValue === 'object') {
         const objValue = newValue as any;
@@ -506,14 +507,14 @@
             type: objValue.type || 'file',
             path: objValue.url || objValue.path || '',
             status: 'success',
-            result: newValue
-          }
+            result: newValue,
+          },
         ];
       } else {
         state.files = [];
       }
     },
-    { immediate: true, deep: true }
+    { immediate: true, deep: true },
   );
 
   // 组件销毁时清理资源

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

@@ -1,186 +1,184 @@
 <template>
-  <slot>
-    <div :ui-row="rows" class="n-sl-sub">
-      <template v-for="(col, idx) in state.form" :key="idx">
-        <div v-if="!col.clear" :id="col._fid" :ui-col="col.media" :ui-flex="`${vertical ? 'col xm' : 'row lt'}`">
-          <template v-if="col.label">
-            <h6 v-if="vertical" :style="`${col.rules?.some((validator: any) => validator.required) ? 'text-indent: -1em' : ''}`" class="o-ls">
-              <template v-if="col.label == '*'"></template>
-              <template v-else>
-                <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk pr" style="left: 0.1em">﹡</b>
-                <span>{{ col.label ? col.label + ':' : '' }}</span>
-              </template>
-            </h6>
-            <p v-else :class="`${clh({ ...(col.model[1] || {}) })}`" :style="`width:${state._lw + 'em'}; max-width:50%;`" class="ar nr-sm flex-fixed o-ls">
-              <template v-if="col.label == '*'"></template>
-              <template v-else>
-                <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk">﹡</b>
-                <span>{{ col.label ? col.label + ':' : '' }}</span>
-              </template>
-            </p>
-          </template>
-          <Input v-if="col.model[0] === 'Input'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" class="full-w" v-bind="{ ...(col.model[1] || {}) }" />
-          <Select
-            v-else-if="col.model[0] === 'Select'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col?.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          ></Select>
-          <SelectList
-            v-else-if="col.model[0] === 'SelectList'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col?.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SelectTags
-            v-else-if="col.model[0] === 'SelectTags'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col?.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SelectPicker
-            v-else-if="col.model[0] === 'SelectPicker'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col?.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SearchSelect
-            v-else-if="col.model[0] === 'SearchSelect'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <MoreSelect
-            v-else-if="col.model[0] === 'MoreSelect'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <MoreSelectList
-            v-else-if="col.model[0] === 'MoreSelectList'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <MoreSelectTags
-            v-else-if="col.model[0] === 'MoreSelectTags'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <MoreSelectPicker
-            v-else-if="col.model[0] === 'MoreSelectPicker'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SearchMoreSelect
-            v-else-if="col.model[0] === 'SearchMoreSelect'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <PageSelect
-            v-else-if="col.model[0] === 'PageSelect'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SelectTree
-            v-else-if="col.model[0] === 'SelectTree'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <DatePicker
-            v-else-if="col.model[0] === 'DatePicker'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <DateRangePicker
-            v-else-if="col.model[0] === 'DateRangePicker'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <ImgUpload v-else-if="col.model[0] === 'ImgUpload'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
-          <Upload v-else-if="col.model[0] === 'Upload'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
-          <TextArea
-            v-else-if="col.model[0] === 'TextArea'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :rules="col.rules"
-            v-bind="{ ...(col.model[1] || {}) }"
-          ></TextArea>
-          <Switch v-else-if="col.model[0] === 'Switch'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
-          <Tree v-else-if="col.model[0] === 'Tree'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" class="mt-sm" v-bind="{ ...(col.model[1] || {}) }" />
-          <Cascader
-            v-else-if="col.model[0] === 'Cascader'"
-            v-model="col._data[col.field]"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            class="full-w"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <template v-else>
-            <slot v-if="col.slot" :name="col.slot" :col="col"></slot>
-            <slot v-else-if="col.model[0]" :name="col.model[0]" :col="col"></slot>
-            <slot v-else :name="col.field" :col="col"></slot>
-          </template>
-        </div>
-      </template>
-      <div :ui-flex="`${vertical ? 'col xm' : 'row xt'}`">
-        <div v-if="vertical">
-          <slot name="submit"></slot>
-        </div>
-        <div v-else :style="`padding-left:${state._lw + 'em'};`">
-          <slot name="submit"></slot>
-        </div>
+  <div :ui-row="rows" class="n-sl-sub">
+    <template v-for="(col, idx) in state.form" :key="idx">
+      <div v-if="!col.clear" :id="col._fid" :ui-col="col.media" :ui-flex="`${vertical ? 'col xm' : 'row lt'}`">
+        <template v-if="col.label">
+          <h6 v-if="vertical" :style="`${col.rules?.some((validator: any) => validator.required) ? 'text-indent: -1em' : ''}`" class="o-ls">
+            <template v-if="col.label == '*'"></template>
+            <template v-else>
+              <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk pr" style="left: 0.1em">﹡</b>
+              <span>{{ col.label ? col.label + ':' : '' }}</span>
+            </template>
+          </h6>
+          <p v-else :class="`${clh({ ...(col.model[1] || {}) })}`" :style="`width:${state._lw + 'em'}; max-width:50%;`" class="ar nr-sm flex-fixed o-ls">
+            <template v-if="col.label == '*'"></template>
+            <template v-else>
+              <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk">﹡</b>
+              <span>{{ col.label ? col.label + ':' : '' }}</span>
+            </template>
+          </p>
+        </template>
+        <Input v-if="col.model[0] === 'Input'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" class="full-w" v-bind="{ ...(col.model[1] || {}) }" />
+        <Select
+          v-else-if="col.model[0] === 'Select'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col?.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        ></Select>
+        <SelectList
+          v-else-if="col.model[0] === 'SelectList'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col?.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SelectTags
+          v-else-if="col.model[0] === 'SelectTags'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col?.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SelectPicker
+          v-else-if="col.model[0] === 'SelectPicker'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col?.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SearchSelect
+          v-else-if="col.model[0] === 'SearchSelect'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <MoreSelect
+          v-else-if="col.model[0] === 'MoreSelect'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <MoreSelectList
+          v-else-if="col.model[0] === 'MoreSelectList'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <MoreSelectTags
+          v-else-if="col.model[0] === 'MoreSelectTags'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <MoreSelectPicker
+          v-else-if="col.model[0] === 'MoreSelectPicker'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SearchMoreSelect
+          v-else-if="col.model[0] === 'SearchMoreSelect'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <PageSelect
+          v-else-if="col.model[0] === 'PageSelect'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SelectTree
+          v-else-if="col.model[0] === 'SelectTree'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <DatePicker
+          v-else-if="col.model[0] === 'DatePicker'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <DateRangePicker
+          v-else-if="col.model[0] === 'DateRangePicker'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <ImgUpload v-else-if="col.model[0] === 'ImgUpload'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
+        <Upload v-else-if="col.model[0] === 'Upload'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
+        <TextArea
+          v-else-if="col.model[0] === 'TextArea'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :rules="col.rules"
+          v-bind="{ ...(col.model[1] || {}) }"
+        ></TextArea>
+        <Switch v-else-if="col.model[0] === 'Switch'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
+        <Tree v-else-if="col.model[0] === 'Tree'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" class="mt-sm" v-bind="{ ...(col.model[1] || {}) }" />
+        <Cascader
+          v-else-if="col.model[0] === 'Cascader'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="full-w"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <template v-else>
+          <slot v-if="col.slot" :name="col.slot" :col="col"></slot>
+          <slot v-else-if="col.model[0]" :name="col.model[0]" :col="col"></slot>
+          <slot v-else :name="col.field" :col="col"></slot>
+        </template>
+      </div>
+    </template>
+    <div :ui-flex="`${vertical ? 'col xm' : 'row xt'}`">
+      <div v-if="vertical">
+        <slot name="submit"></slot>
+      </div>
+      <div v-else :style="`padding-left:${state._lw + 'em'};`">
+        <slot name="submit"></slot>
       </div>
     </div>
-  </slot>
+  </div>
 </template>
 <script lang="ts" setup>
   import { watch, reactive, onBeforeUnmount, nextTick } from 'vue';

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

@@ -1,2 +1,49 @@
+import { isFunction } from '@fekit/utils';
 import TableLoader from './TableLoader.vue';
+
+// 类型定义
+interface ListItem {
+  __selected?: boolean;
+  [key: string]: any;
+}
+
+type KeyExtractor<T = ListItem> = string | ((item: T) => any);
+
 export default TableLoader;
+
+// 是否有选中记录
+export const hasSelected = (lists: ListItem[] = []): boolean => {
+  return lists.some((item) => item.__selected === true);
+};
+
+// 获取选中记录的数量
+export const getSelectedCount = (lists: ListItem[] = []): number => {
+  return lists.filter((item) => item.__selected === true).length;
+};
+
+// 获取选中的记录
+export const getSelected = <T extends Record<string, any> = ListItem>(lists: T[] = [], key: KeyExtractor<T> = ''): any[] => {
+  return (
+    lists
+      ?.filter((item: T) => {
+        return item.__selected === true;
+      })
+      ?.map((item: T) => {
+        return isFunction(key) ? (key as (item: T) => any)(item) : key ? item[key as string] : item;
+      }) || []
+  );
+};
+
+// 全选计算属性
+export function allSelected(lists: ListItem[] = []) {
+  return {
+    get(): boolean {
+      return lists.length > 0 && lists.every((item) => item.__selected === true);
+    },
+    set(value: boolean): void {
+      lists.forEach((item) => {
+        item.__selected = value;
+      });
+    }
+  };
+}