@neatui/vue 2.7.0 → 2.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "2.7.0",
+  "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-line 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,15 +155,12 @@
       <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>
-        <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-line b-xs r-sm ${uploadClass}`" :style="uploadStyle">
+      <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 }}
           </div>
@@ -179,53 +176,40 @@
         </label>
       </slot>
     </div>
-    <Layer :id="layerId" am="as"></Layer>
   </div>
 </template>
 <script setup lang="ts">
-  import { reactive, ref, watch, onUnmounted, computed } from 'vue';
-  import { Image } from '../display';
-  import draggable from 'vuedraggable';
+  import { reactive, watch, onUnmounted, computed } from 'vue';
   import Compressor from 'compressorjs';
-  import { Layer, LayerById } from '../basic';
-  import { isArray, isFunction } from '@fekit/utils';
-
-  const layerId = Math.random().toString(36).slice(-6);
 
   interface Props {
     modelValue?: string | any[];
-    // 文件数量限制
     max?: number;
     attrs?: object;
+    itemAttrs?: object;
     uploadClass?: string;
     uploadStyle?: string;
-    id?: string;
-    tips?: string; // 提示文案
-    // 文件类型
+    tips?: string;
     accept?: string | 'image/*' | 'video/*' | 'audio/*';
-    // 是否需要抠图处理
-    crop?: boolean;
-    // 请求上传接口
     upload?: (formData: FormData) => Promise<any>;
-    // 文件大小限制（MB）
     maxSize?: number;
-    // 是否启用图片压缩
     compress?: boolean;
+    disabled?: boolean;
   }
 
   const props = withDefaults(defineProps<Props>(), {
     modelValue: '',
     uploadClass: '',
     uploadStyle: '',
-    id: '',
     attrs: () => ({}),
+    itemAttrs: () => ({}),
     tips: '',
     accept: '*',
-    crop: false,
     upload: async () => null,
-    maxSize: 10, // 默认10MB
+    maxSize: 10,
     compress: true,
-    max: 0
+    max: 0,
+    disabled: false,
   });
 
   interface UploadFile {
@@ -243,7 +227,7 @@
     isInternalUpdate: boolean; // 标记是否为内部更新
   }>({
     files: [],
-    isInternalUpdate: false
+    isInternalUpdate: false,
   });
 
   const emit = defineEmits(['update:modelValue', 'change', 'error']);
@@ -331,7 +315,7 @@
         success: (result) => {
           resolve(new File([result], file.name, { type: result.type }));
         },
-        error: reject
+        error: reject,
       });
     });
   };
@@ -412,7 +396,7 @@
         type: getFileType(file),
         path: previewUrl,
         status: 'uploading',
-        size: file.size
+        size: file.size,
       };
       state.files.push(uploadFile);
       validFiles.push({ file, uploadFile });
@@ -492,7 +476,7 @@
               type: 'image',
               path: item,
               status: 'success' as const,
-              result: item
+              result: item,
             };
           } else {
             // 如果是对象
@@ -501,7 +485,7 @@
               type: item.type || 'file',
               path: item.url || item.path || '',
               status: 'success' as const,
-              result: item
+              result: item,
             };
           }
         });
@@ -512,8 +496,8 @@
             type: 'image',
             path: newValue,
             status: 'success',
-            result: newValue
-          }
+            result: newValue,
+          },
         ];
       } else if (newValue && typeof newValue === 'object') {
         const objValue = newValue as any;
@@ -523,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/LimitLoader/LimitLoader@v3.vue

@@ -43,6 +43,7 @@
         </template>
       </IFollowView>
       <button class="bg-fore" ui-btn="@a s case :border" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
+      <button class="bg-fore" ui-btn="@a s case :border" @click="fSearch">{{ words['common.search'] || '搜索' }}</button>
     </div>
   </div>
 </template>
@@ -91,6 +92,11 @@
     tools: false
   });
 
+  // 定义emit事件
+  const emits = defineEmits<{
+    search: [param: any];
+  }>();
+
   // 内部数据
   const state: any = reactive({
     name: computed(() => 'confs' + route.path?.replace(/\//g, '_')),
@@ -173,5 +179,16 @@
         delete state.param[key];
       }
     }
+    // 触发搜索事件
+    emits('search', state.param);
+  };
+
+  // 搜索功能
+  const fSearch = () => {
+    // 重置页码
+    if (state.param.page) {
+      state.param.page = 1;
+    }
+    emits('search', state.param);
   };
 </script>

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