@neatui/vue 2.12.0 → 2.15.0

package/package.json

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

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

@@ -230,11 +230,11 @@
       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 || null);

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

@@ -24,13 +24,13 @@
           <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>
@@ -43,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">全选({{ state.filter?.length || 0 }})</span>
+                <span class="ml-sm">全选({{ state.selectedCount }}/{{ state.availableCount }})</span>
               </label>
             </div>
             <div>
@@ -57,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);
@@ -96,7 +96,7 @@
 
   // 类型
   interface Props {
-    modelValue?: Array<string | number>;
+    modelValue?: Array<string | number> | string;
     options: Array<object>;
     tools?: boolean;
     spare?: string;
@@ -158,11 +158,21 @@
     show: 0,
     value: '',
     search: '',
+    originalType: 'array',
+    processedValue: computed(() => processInput(props.modelValue)),
     all: computed(() => {
-      return state.filter?.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 state.filter?.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) {
@@ -175,23 +185,62 @@
     }),
   });
 
+  // 处理输入数据类型转换和过滤
+  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 },
   );
 
+  // 输出时类型转换
+  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);
@@ -202,7 +251,9 @@
   };
   // 全选
   const allselect = () => {
-    const s = state.all ? [] : state.filter?.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/Select@v3.vue

@@ -3,7 +3,7 @@
     <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
-        v-model="state.selectd.label"
+        v-model="state.displayLabel"
         :interacted="interacted"
       >
         <template #suffix>
@@ -21,21 +21,37 @@
         </div>
         <ul v-if="state.filter?.length" ui-scroll=":y s" class="nx-sm lh-sl" style="min-width: 100%; max-height: 16em">
           <template v-for="(item, idx) of state.filter" :key="idx">
-            <li v-if="item.disabled" class="ux-hover nx-sm ny-ss r-ss o-ms nowrap" :class="item.value === state.selectd?.value ? 'co-main' : ''">
+            <li v-if="item.disabled" class="ux-hover nx-sm ny-ss r-ss o-ms nowrap" :class="isItemSelected(item) ? 'co-main' : ''">
               <del>{{ item.label || item }}</del>
             </li>
-            <li v-else class="ux-hover nx-sm ny-ss r-ss nowrap" :class="item.value === state.selectd?.value ? 'co-main' : ''" @click="select(item)">
+            <li v-else class="ux-hover nx-sm ny-ss r-ss nowrap" :class="isItemSelected(item) ? 'co-main' : ''" @click="select(item)">
               <span>{{ item.label || item }}</span>
             </li>
           </template>
         </ul>
         <div v-else class="w-full ny-ms" ui-flex="col cm" v-html="spare"></div>
+        <!-- 其他选项输入框 -->
+        <div v-if="other && state.isInputting" class="nx-sm ny-sm">
+          <div class="o-mm" ui-line="@a"></div>
+          <div class="ny-sm">
+            <Input
+              v-model="customInputValue"
+              v-bind="other.config || {}"
+              :placeholder="other.config?.placeholder || '请输入自定义内容'"
+              sz="s"
+              @keyup.enter="confirmCustomInput"
+              @blur="confirmCustomInput"
+              ref="customInputRef"
+            />
+          </div>
+        </div>
+
         <ul class="nx-sm lh-ml" v-if="tools">
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
             <div class="co-main">
               <p class="nx-sm r-ss nowrap">
-                <span>{{ state.filter?.length || 0 }}个可选项</span>
+                <span>{{ state.availableCount }}个可选项</span>
               </p>
             </div>
             <div>
@@ -49,12 +65,14 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive, ref, computed } from 'vue';
+  import { reactive, ref, computed, watch, nextTick } from 'vue';
   import { Input } from '.';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
+  const customInputRef: any = ref(null);
+
+  const emits = defineEmits(['update:modelValue', 'change', 'onshow', 'onhide', 'update:other']);
 
-  const emits = defineEmits(['update:modelValue', 'change', 'onshow', 'onhide']);
 
   /**
    * 入参说明
@@ -89,8 +107,15 @@
 
   // 类型
   interface Props {
-    modelValue?: string | number;
+    modelValue?: string | number | null;
     options: Array<object>;
+    all?: { label: string; value: null | '*' };
+    other?: {
+      value: string;
+      field?: string;
+      config?: object;
+    };
+    otherValue?: string;
     tools?: boolean;
     spare?: string;
     search?: boolean;
@@ -122,6 +147,9 @@
   const props: any = withDefaults(defineProps<Props>(), {
     modelValue: '',
     options: () => [],
+    all: undefined,
+    other: undefined,
+    otherValue: '',
     tools: false,
     spare: '当前没有可选项',
     search: false,
@@ -149,35 +177,211 @@
     interacted: false,
   });
 
-  const change = ({ value = null }: any = {}) => {
+  const change = (value: any = null) => {
     emits('update:modelValue', value);
     emits('change', value);
   };
 
+  // 自定义输入值
+  const customInputValue = ref('');
+
   const state = reactive({
     show: 0,
     search: '',
+    isInputting: computed(() => {
+      // 如果配置了"其他"选项且当前选中的是"其他"
+      if (props.other) {
+        if (props.other.field) {
+          // 情况2：有独立字段，当主值匹配other.value且有otherValue时显示输入框
+          return props.modelValue === props.other.value && props.otherValue;
+        } else {
+          // 情况1：无独立字段，当值不在枚举中时显示输入框
+          if (props.modelValue && props.modelValue !== '') {
+            const isInEnum = props.options?.some((option: any) => `${option.value}` === `${props.modelValue}`);
+            return !isInEnum;
+          }
+        }
+      }
+      return false;
+    }),
     selectd: computed(() => {
-      return props?.options?.find((option: any) => `${option.value}` === `${props.modelValue}`) || {};
+      // 优先查找 all 选项
+      if (props.all && props.modelValue === props.all.value) {
+        return props.all;
+      }
+      // 查找普通选项
+      const found = props?.options?.find((option: any) => `${option.value}` === `${props.modelValue}`);
+      if (found) {
+        // 如果是分字段存储模式且选中的是other选项，需要显示自定义值
+        if (props.other?.field && found.value === props.other.value && props.otherValue) {
+          const otherLabel = found.label || '其他';
+          return {
+            label: `${otherLabel}-${props.otherValue}`,
+            value: found.value
+          };
+        }
+        return found;
+      }
+
+      // 如果配置了 other 且当前值不在枚举中，可能是自定义输入值（直接存储模式）
+      if (props.other && props.modelValue && !props.other.field) {
+        // 找到其他选项的label
+        const otherOption = props?.options?.find((option: any) => `${option.value}` === `${props.other.value}`);
+        const otherLabel = otherOption?.label || '其他';
+        return {
+          label: `${otherLabel}-${props.modelValue}`,
+          value: props.modelValue
+        };
+      }
+
+      return {};
+    }),
+    displayLabel: computed(() => {
+      return state.selectd.label || '';
+    }),
+    availableCount: computed(() => {
+      return state.filter?.filter((item: any) => !item.disabled)?.length || 0;
     }),
     filter: computed(() => {
+      let filteredOptions = props.options || [];
+
       if (state.search) {
-        return props.options?.filter((item: any) => {
+        filteredOptions = filteredOptions.filter((item: any) => {
           return item.label?.includes(state.search);
         });
-      } else {
-        return props.options;
       }
+
+      // 在顶部添加全部选项
+      if (props.all) {
+        filteredOptions = [props.all, ...filteredOptions];
+      }
+
+      return filteredOptions;
     }),
   });
+
+  // 同步自定义输入值
+  watch(
+    [() => props.modelValue, () => props.otherValue, () => props.other, () => props.options],
+    () => {
+      if (props.other) {
+        if (props.other.field) {
+          // 情况2：有独立字段，显示otherValue
+          customInputValue.value = props.otherValue || '';
+        } else {
+          // 情况1：无独立字段，显示当前modelValue（如果不在枚举中）
+          if (props.modelValue && props.modelValue !== '') {
+            const isInEnum = props.options?.some((option: any) => `${option.value}` === `${props.modelValue}`);
+            customInputValue.value = !isInEnum ? props.modelValue : '';
+          } else {
+            customInputValue.value = '';
+          }
+        }
+      } else {
+        customInputValue.value = '';
+      }
+    },
+    { immediate: true }
+  );
+
+  // 监听并验证modelValue的有效性
+  watch(
+    [() => props.modelValue, () => props.options, () => props.all, () => props.other],
+    ([value, options, allOption, otherConfig]) => {
+      // 如果配置了 other，则允许任意值（可能是用户自定义输入）
+      if (otherConfig) {
+        return;
+      }
+
+      // 如果有值但不在有效选项中，清空该值
+      if (value != null && value !== '' && options?.length > 0) {
+        let isValid = false;
+
+        // 检查是否是 all 选项
+        if (allOption && value === allOption.value) {
+          isValid = true;
+        } else {
+          // 检查是否在普通选项中
+          isValid = options.some((option: any) => `${option.value}` === `${value}`);
+        }
+
+        if (!isValid) {
+          nextTick(() => {
+            change(null);
+          });
+        }
+      }
+    },
+    { immediate: true }
+  );
+
   // 选择
   const select = (item: any = {}) => {
-    change(item);
-    ifollow.value.cancel();
+    if (props.other && item.value === props.other.value) {
+      // 选中"其他"选项时，设置值并聚焦输入框
+      if (props.other.field) {
+        change(props.other.value);
+        emits('update:other', '');
+      } else {
+        change('');
+      }
+      customInputValue.value = '';
+      nextTick(() => {
+        customInputRef.value?.focus();
+      });
+    } else {
+      change(item.value);
+      ifollow.value.cancel();
+    }
+  };
+
+  // 确认自定义输入
+  const confirmCustomInput = () => {
+    if (customInputValue.value.trim()) {
+      if (props.other?.field) {
+        // 如果指定了 field，则主字段存储选项值，field 存储自定义输入
+        change(props.other.value);
+        emits('update:other', customInputValue.value.trim());
+      } else {
+        // 如果没有指定 field，则直接在主字段存储自定义输入
+        change(customInputValue.value.trim());
+      }
+      ifollow.value.cancel();
+    } else {
+      // 如果输入为空，清空值
+      change(null);
+      if (props.other?.field) {
+        emits('update:other', '');
+      }
+    }
+  };
+
+  // 判断选项是否被选中（包括"其他"选项的特殊逻辑）
+  const isItemSelected = (item: any) => {
+    // 普通选项的判断
+    if (item.value === state.selectd?.value) {
+      return true;
+    }
+
+    // "其他"选项的特殊判断
+    if (props.other && item.value === props.other.value) {
+      if (props.other.field) {
+        // 情况2：有独立字段，当主值匹配other.value时高亮
+        return props.modelValue === props.other.value;
+      } else {
+        // 情况1：无独立字段，当值不在枚举中时高亮
+        if (props.modelValue && props.modelValue !== '') {
+          const isInEnum = props.options?.some((option: any) => `${option.value}` === `${props.modelValue}`);
+          return !isInEnum;
+        }
+      }
+    }
+
+    return false;
   };
   // 清空
   const remove = () => {
-    change({});
+    change(null);
     ifollow.value.cancel();
   };
   // 取消