@neatui/vue 2.11.0 → 2.15.0

package/src/components/form/PageSelect.vue

@@ -42,7 +42,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed, watch } from 'vue';
-  import { Input } from '../form';
+  import { Input } from '.';
   import { IFollowView } from '../basic';
 
   const ifollow: any = ref(null);
@@ -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>

package/src/components/form/SearchMoreSelect.vue

@@ -44,7 +44,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed } from 'vue';
-  import { Input } from '../form';
+  import { Input } from '.';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
 

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

@@ -48,7 +48,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed } from 'vue';
-  import { Input } from '../form';
+  import { Input } from '.';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
   console.warn('「SearchSelect」 即将废弃，建议使用「Select」 设置参数search为true，示例：<Select v-model="value" :search="true" />');
@@ -144,7 +144,7 @@
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false
+    interacted: false,
   });
 
   const change = ({ value = '' }: any = {}) => {
@@ -166,7 +166,7 @@
       } else {
         return props.options;
       }
-    })
+    }),
   });
   // 选择
   const select = (item: any = {}) => {
@@ -196,7 +196,7 @@
     select,
     remove,
     change,
-    cancel
+    cancel,
   });
 </script>
 . .

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

@@ -1,12 +1,15 @@
 <template>
-  <div :ui-form="`@a type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
+  <div :ui-form="`@a type:select${sz ? 'sz:' + sz : ''}`" :ui-form-open="state.show ? 'show' : ''">
     <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><i ui-form-select=""></i></template>
+        <template #suffix>
+          <i v-if="clearable && modelValue && !readonly && !disabled" ui-form-clean="" @click.stop="remove"></i>
+          <i ui-form-select=""></i>
+        </template>
       </Input>
       <template #tips v-if="!readonly && !disabled">
         <div v-if="search" class="ny-sm nx-sl">
@@ -16,23 +19,39 @@
             </template>
           </Input>
         </div>
-        <ul v-if="props.options?.length" ui-scroll=":y s" class="nx-sm lh-sl" style="min-width: 100%; max-height: 16em">
+        <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>
@@ -46,12 +65,14 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive, ref, computed } from 'vue';
-  import { Input } from '../form';
+  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']);
 
   /**
    * 入参说明
@@ -86,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;
@@ -119,6 +147,9 @@
   const props: any = withDefaults(defineProps<Props>(), {
     modelValue: '',
     options: () => [],
+    all: undefined,
+    other: undefined,
+    otherValue: '',
     tools: false,
     spare: '当前没有可选项',
     search: false,
@@ -139,42 +170,218 @@
     minlength: null,
     disabled: false,
     readonly: false,
-    clearable: false,
+    clearable: true,
     verify: false,
     prefix: () => [],
     suffix: () => [],
     interacted: false,
   });
 
-  const change = ({ value = '' }: 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();
   };
   // 取消

package/src/components/form/SelectList.vue

@@ -1,8 +1,8 @@
 <template>
   <ul v-if="props.options?.length" class="my-sm-sub lh-ss">
     <li
-      class="hover:bg-main-ss n-sl r-ss b-solid b-xs"
-      :class="`${item.value === mv ? 'bk-main-ml bg-main-ss' : 'bk-case'}`"
+      class="hover:bg-main-o-ss n-sl r-ss b-solid b-xs"
+      :class="`${item.value === mv ? 'bk-main-o-ml bg-main-o-ss' : 'bk-case'}`"
       v-for="(item, idx) of props.options"
       :key="idx"
       @click="mv = item.value === mv ? '' : item.value"
@@ -27,16 +27,16 @@
     placeholder: { type: String, default: '' },
     options: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     modelValue: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     rules: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   });
 
   // eslint-disable-next-line vue/no-dupe-keys
@@ -47,12 +47,12 @@
     () => props.modelValue,
     (value: any) => {
       mv.value = value;
-    }
+    },
   );
   watch(
     () => mv.value,
     (value: any) => {
       emits('update:modelValue', value);
-    }
+    },
   );
 </script>

package/src/components/form/SelectPicker.vue

@@ -29,7 +29,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed } from 'vue';
-  import { Input } from '../form';
+  import { Input } from '.';
   import { IPickerView, IScrollView } from '../basic';
   import { watch } from 'vue';
   const ipicker: any = ref(null);
@@ -43,16 +43,16 @@
     placeholder: { type: String, default: '' },
     options: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     modelValue: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     rules: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   });
   // 内部数据
   const mv: any = ref(props.modelValue);
@@ -61,7 +61,7 @@
     (v: any) => {
       mv.value = v;
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
   const state = reactive({
     view: 0,
@@ -74,7 +74,7 @@
         }
       }
       return _value;
-    })
+    }),
   });
   // 更新
   const change = ({ value = null }: any = {}) => {

package/src/components/form/SelectTags.vue

@@ -2,7 +2,7 @@
   <div v-if="props.options?.length" class="mr-sm-sub mb-sm-sub">
     <span
       class="lh-ss ny-sm nx-ms r-xl dib"
-      :class="`${mv == item.value ? 'bg-main-sm co-main' : 'bg-weak'}`"
+      :class="`${mv == item.value ? 'bg-main-o-sm co-main' : 'bg-weak'}`"
       v-for="(item, idx) of props.options"
       :key="idx"
       @click="mv = item.value === mv ? '' : item.value"
@@ -24,16 +24,16 @@
     placeholder: { type: String, default: '' },
     options: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     modelValue: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     rules: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   });
   // 内部数据
   const mv: any = ref(props.modelValue);
@@ -41,12 +41,12 @@
     () => props.modelValue,
     (value: any) => {
       mv.value = value;
-    }
+    },
   );
   watch(
     () => mv.value,
     (value: any) => {
       emits('update:modelValue', value);
-    }
+    },
   );
 </script>

package/src/components/form/SelectTree/SelectTree@v1.vue

@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed, watch } from 'vue';
-  import { Input } from '../../form';
+  import { Input } from '..';
   import { IFollowView } from '../../basic';
   import { TreeView } from '../../display';
   import { findByJson, filterJson } from '@fekit/utils';
@@ -144,7 +144,7 @@
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false
+    interacted: false,
   });
 
   const state: any = reactive({
@@ -158,7 +158,7 @@
       return (props.chain ? _item.chain : _item.label) || '';
     }),
     filter: [],
-    value: ''
+    value: '',
   });
   watch(
     () => state.value,
@@ -167,7 +167,7 @@
         change(value);
       }
     },
-    { deep: true }
+    { deep: true },
   );
   watch(
     [() => state.search, () => props.options],
@@ -178,7 +178,7 @@
         state.filter = props.options;
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   const change = (value: any = '') => {
@@ -221,7 +221,7 @@
     select,
     remove,
     change,
-    cancel
+    cancel,
   });
 </script>
 .. ..