@neatui/nuxt 0.1.0 → 1.0.0

package/src/components/form/ImgUpload.vue

@@ -1,13 +1,13 @@
 <template>
   <div ui-flex="row" class="mc-upload">
     <template v-if="files && files.length > 0">
-      <draggable :list="files" @update="update" :force-fallback="false" item-key="name" chosen-class="chosen" animation="200" class="mc-upload-img">
-        <template #item="{ element, index }">
+      <IDraggable v-model:lists="files" @update:lists="update" class="mc-upload-img">
+        <template #default="{ item: element, idx: index }">
           <div class="mc-upload-img-item">
             <Image :src="element" :files="files" :initialSlide="index" v-bind="$attrs" @delImg="delImg" />
           </div>
         </template>
-      </draggable>
+      </IDraggable>
     </template>
     <template v-if="(!multiple && files && files.length === 0) || (multiple && (!limit || (limit && files && files.length < limit)))">
       <slot>
@@ -33,7 +33,7 @@
 <script setup lang="ts">
   import { ref, watch } from 'vue';
   import { Image, PhotoEditor } from '../display';
-  import draggable from 'vuedraggable';
+  import IDraggable from '../basic/IDraggable.vue';
   import Compressor from 'compressorjs';
   import { Layer, LayerById } from '../basic';
   import { isArray } from '@fekit/utils';
@@ -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/Input@v3.vue

@@ -113,7 +113,7 @@
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false
+    interacted: false,
   });
 
   const state: any = reactive({
@@ -122,7 +122,7 @@
     // 值
     value: props.modelValue,
     // 错误
-    error: {}
+    error: {},
   });
   // 外部传入交互标识，主要用于外部没有输入但点击了提交
   watch(
@@ -132,7 +132,7 @@
         state.interacted = interacted;
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 监听外部数据
@@ -207,12 +207,12 @@
         state.error = { tips: props.tips, ontips: props.tips ? 'show' : '', verify: '', co: '' };
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 清空
   function clear() {
-    emits('update:modelValue', '');
+    emits('update:modelValue', null);
     emits('clear');
   }
   // 输入
@@ -230,14 +230,14 @@
       e.target.value = props.modelValue;
       return false;
     }
-    // 数字类型
-    if (props.type === 'number' && !value && props.modelValue?.length !== 1) {
-      e.target.value = props.modelValue;
-      return false;
-    }
+    // 数字类型 - 移除有问题的逻辑，允许用户正常删除数字
+    // if (props.type === 'number' && !value && props.modelValue?.length !== 1) {
+    //   e.target.value = props.modelValue;
+    //   return false;
+    // }
     // 输入事件
     emits('input', e, state);
-    emits('update:modelValue', value);
+    emits('update:modelValue', value || null);
   };
   // 失焦
   const blur = (e: any) => {

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

@@ -13,17 +13,24 @@
         </Input>
       </slot>
       <template #tips>
-        <ul v-if="props.options?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
-          <template v-for="(item, idx) of props.options" :key="idx">
+        <div v-if="search" class="ny-sm nx-sl">
+          <Input v-model="state.search" sz="s">
+            <template #suffix>
+              <i ui-form-search="" class="co-note"></i>
+            </template>
+          </Input>
+        </div>
+        <ul v-if="state.filter?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
+          <template v-for="(item, idx) of state.filter" :key="idx">
             <li v-if="item.disabled" class="ux-hover nx-sm r-ss o-ms nowrap">
               <label style="pointer-events: none" ui-form="@a type:checkbox :block">
-                <input type="checkbox" :name="state.name" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
+                <input type="checkbox" :name="state.name" :checked="state.processedValue?.some((i: any) => `${i}` === `${item.value}`)" />
                 <del class="ml-sm">{{ item.label || item }}</del>
               </label>
             </li>
             <li v-else class="ux-hover nx-sm r-ss nowrap" @click.stop="select(item.value)">
               <label style="pointer-events: none" ui-form="@a type:checkbox :block">
-                <input type="checkbox" :name="state.name" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
+                <input type="checkbox" :name="state.name" :checked="state.processedValue?.some((i: any) => `${i}` === `${item.value}`)" />
                 <span class="ml-sm">{{ item.label || item }}</span>
               </label>
             </li>
@@ -36,7 +43,7 @@
             <div class="ux-hover nx-sm ny-ss r-ss nowrap co-main" @click.stop="allselect()">
               <label style="pointer-events: none" ui-form="@a type:checkbox :block">
                 <input type="checkbox" :name="state.name" :checked="state.all" />
-                <span class="ml-sm">全选({{ props.options?.length || 0 }})</span>
+                <span class="ml-sm">全选({{ state.selectedCount }}/{{ state.availableCount }})</span>
               </label>
             </div>
             <div>
@@ -50,7 +57,7 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive, ref, computed, watch } from 'vue';
+  import { reactive, ref, computed, watch, nextTick } from 'vue';
   import { Input } from '.';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
@@ -64,7 +71,7 @@
    * options        枚举列表
    * tools          是否显示工具栏
    * spare          空闲兜底内容
-   * search         是否显示搜索框
+   * search         是否启用搜索框
    *
    * -----------------------------------------
    * theme          主题
@@ -89,10 +96,11 @@
 
   // 类型
   interface Props {
-    modelValue?: Array<string | number>;
+    modelValue?: Array<string | number> | string;
     options: Array<object>;
     tools?: boolean;
     spare?: string;
+    search?: boolean;
 
     // Input
     placeholder?: string;
@@ -120,6 +128,7 @@
     options: () => [],
     tools: true,
     spare: '当前没有可选项',
+    search: false,
 
     // Input
     placeholder: '',
@@ -139,7 +148,7 @@
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false
+    interacted: false,
   });
   // 内部数据
   const state: any = reactive({
@@ -148,31 +157,90 @@
     }),
     show: 0,
     value: '',
+    search: '',
+    originalType: 'array',
+    processedValue: computed(() => processInput(props.modelValue)),
     all: computed(() => {
-      return props.options?.every((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
+      const availableItems = state.filter?.filter((item: any) => !item.disabled);
+      return availableItems?.length > 0 && availableItems?.every((item: any) => state.processedValue?.some((i: any) => `${i}` === `${item.value}`));
     }),
     has: computed(() => {
-      return props.options?.some((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
-    })
+      return state.filter?.some((item: any) => state.processedValue?.some((i: any) => `${i}` === `${item.value}`));
+    }),
+    availableCount: computed(() => {
+      return state.filter?.filter((item: any) => !item.disabled)?.length || 0;
+    }),
+    selectedCount: computed(() => {
+      const availableItems = state.filter?.filter((item: any) => !item.disabled);
+      return availableItems?.filter((item: any) => state.processedValue?.some((i: any) => `${i}` === `${item.value}`))?.length || 0;
+    }),
+    filter: computed(() => {
+      if (state.search) {
+        return props.options?.filter((item: any) => {
+          return item.label?.includes(state.search);
+        });
+      } else {
+        return props.options;
+      }
+    }),
   });
 
+  // 处理输入数据类型转换和过滤
+  const processInput = (value: any) => {
+    let processedArray: any[] = [];
+
+    if (typeof value === 'string') {
+      state.originalType = 'string';
+      processedArray = value.trim() ? (value.includes(',') ? value.split(',').map((s: string) => s.trim()) : [value]) : [];
+    } else {
+      state.originalType = 'array';
+      processedArray = value || [];
+    }
+
+    // 过滤掉在options中不存在的值
+    const validValues = processedArray.filter((val: any) =>
+      props.options?.some((option: any) => `${option.value}` === `${val}`)
+    );
+
+    return validValues;
+  };
+
   // 监听外部数据
   watch(
     [() => props.modelValue, () => props.options],
     ([v = [], o = []]: any = []) => {
-      const selectd: any = o?.filter((item: any) => v?.some((i: any) => `${i}` === `${item.value}`))?.map((item: any) => item.label) || [];
+      const processedValue = processInput(v);
+
+      // 如果过滤后的值与原始值不同，需要更新modelValue
+      const originalProcessedValue = v ? (typeof v === 'string' ?
+        (v.trim() ? (v.includes(',') ? v.split(',').map((s: string) => s.trim()) : [v]) : []) :
+        (v || [])) : [];
+
+      if (originalProcessedValue.length !== processedValue.length) {
+        // 异步更新以避免递归
+        nextTick(() => {
+          emits('update:modelValue', convertOutput(processedValue));
+        });
+      }
+
+      const selectd: any = o?.filter((item: any) => processedValue?.some((i: any) => `${i}` === `${item.value}`))?.map((item: any) => item.label) || [];
       state.value = selectd?.join(' Ι ') || '';
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
+  // 输出时类型转换
+  const convertOutput = (arrayValue: any[]) => {
+    return state.originalType === 'string' ? arrayValue.join(',') : arrayValue;
+  };
+
   // 更新
   const change = (item: any) => {
-    emits('update:modelValue', item);
+    emits('update:modelValue', convertOutput(item));
   };
   // 选中
   const select = (item: any) => {
-    const s = [...props.modelValue];
+    const s = [...state.processedValue];
     // s?.indexOf(item) !== -1 ? s?.splice(s?.indexOf(item), 1) : s?.push(item);
     if (s?.indexOf(item) !== -1) {
       s?.splice(s?.indexOf(item), 1);
@@ -183,7 +251,9 @@
   };
   // 全选
   const allselect = () => {
-    const s = state.all ? [] : props.options?.map((item: any) => item.value);
+    // 只选择可用的选项，排除禁用项
+    const availableItems = state.filter?.filter((item: any) => !item.disabled);
+    const s = state.all ? [] : availableItems?.map((item: any) => item.value);
     change(s);
   };
   // 清除

package/src/components/form/MoreSelectList.vue

@@ -4,7 +4,7 @@
     <li
       v-for="(item, idx) of props.options"
       :key="idx"
-      :class="`${mv?.some((i: any) => `${i}` === `${item.value}`) ? 'bg-main-ss bk-main-ml' : 'bk-case'}`"
+      :class="`${mv?.some((i: any) => `${i}` === `${item.value}`) ? 'bg-main-o-ss bk-main-o-ml' : 'bk-case'}`"
       class="n-sm r-ss b-solid b-xs"
       @click.stop="select(item.value)"
     >
@@ -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/MoreSelectPanel@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/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

@@ -5,7 +5,7 @@
       <li
         v-for="(item, idx) of props.options"
         :key="idx"
-        :class="`${mv?.some((i: any) => `${i}` === `${item.value}`) ? 'bg-main-ss bk-main-ml' : 'bk-case'}`"
+        :class="`${mv?.some((i: any) => `${i}` === `${item.value}`) ? 'bg-main-o-ss bk-main-o-ml' : 'bk-case'}`"
         class="nx-ms ny-ss r-sm b-solid b-xs pr"
         @click.stop="select(item.value)"
       >
@@ -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/PageMoreSelect.vue

@@ -66,51 +66,51 @@
     // 提示文案
     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: '当前没有可选项',
     },
     // 分页
     pageInfo: {
       type: Object,
-      default: () => ({ total: 0, pages: 0, page: 0 })
+      default: () => ({ total: 0, pages: 0, page: 0 }),
     },
     filterable: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   });
 
   const formName = new Date().getTime().toString();
@@ -136,7 +136,7 @@
     }),
     has: computed(() => {
       return props.options?.some((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
-    })
+    }),
   });
 
   // 选中
@@ -175,7 +175,7 @@
     () => {
       change([]);
       emit('searchChange', state.search);
-    }
+    },
   );
 </script>
 <style lang="scss" scoped>

package/src/components/form/PageSelect.vue

@@ -51,7 +51,7 @@
     // 用户是否交互
     interacted: {
       type: Boolean,
-      default: false
+      default: false,
     },
     theme: { type: String, default: '@a' },
     sz: { type: String, default: 'm' },
@@ -60,51 +60,51 @@
     // 提示文案
     tips: {
       type: String,
-      default: ''
+      default: '',
     },
     placeholder: {
       type: String,
-      default: ''
+      default: '',
     },
     options: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     ui: {
       type: Object,
-      default: () => ({ sz: 'm' })
+      default: () => ({ sz: 'm' }),
     },
     modelValue: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     // 校验规则
     rules: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     // 是否是示校验图标
     verify: {
       type: Boolean,
-      default: false
+      default: false,
     },
     tools: {
       type: Boolean,
-      default: true
+      default: true,
     },
     spare: {
       type: String,
-      default: '当前没有可选项'
+      default: '当前没有可选项',
     },
     // 分页
     pageInfo: {
       type: Object,
-      default: () => ({ total: 0, pages: 0, page: 0 })
+      default: () => ({ total: 0, pages: 0, page: 0 }),
     },
     filterable: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   });
 
   const emit = defineEmits(['update:modelValue', 'pageChange', 'searchChange']);
@@ -126,7 +126,7 @@
         }
       }
       return _value;
-    })
+    }),
     /* filter: computed(() => {
       if (state.search) {
         return props.options?.filter((item) => {
@@ -170,14 +170,14 @@
     () => {
       change({});
       emit('searchChange', state.search);
-    }
+    },
   );
 
   defineExpose({
     select,
     remove,
     change,
-    cancel
+    cancel,
   });
 </script>
 <style lang="scss" scoped>