@neatui/vue 2.11.0 → 2.15.0

package/src/components/form/DateView@v2.vue

@@ -45,7 +45,7 @@
                 v-if="item.day"
                 :ui-date-day="item.day"
                 class="flex-block"
-                :class="`${item.range ? 'bg-main-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
+                :class="`${item.range ? 'bg-main-o-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
                 ui-flex="col cm"
                 @click="change(item)"
                 @mouseenter="setRangeValue(item)"
@@ -54,12 +54,12 @@
                   ui-flex="col cm"
                   class="r-sm b-solid bk-none b-xs my-ss ux-scale"
                   style="width: 1.8em; height: 1.8em"
-                  :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-lm co-fore' : 'hover-bg-weak'}`"
+                  :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-o-lm co-fore' : 'hover-bg-weak'}`"
                 >
                   <span>{{ item.day }}</span>
                 </div>
               </div>
-              <div class="pa full-x lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 100%" ui-flex="row ct" v-html="extras(item)"></div>
+              <div class="pa w-full lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 100%" ui-flex="row ct" v-html="extras(item)"></div>
             </div>
           </li>
         </ul>
@@ -109,7 +109,7 @@
       </div>
     </div>
 
-    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid bk-line-mm bt-xs">
+    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid bk-line-o-mm bt-xs">
       <div ui-flex="row lm" class="nl-ss">
         <div v-if="state.panel" ui-flex="row lm">
           <span :anim-editing="state.type === 'date'" ui-btn="@a xs none" class="nx-ss" @click="setPanelType('date')">{{ idate(state.panel).format('YYYY-MM-DD') }}</span>
@@ -119,8 +119,8 @@
         </div>
         <div v-else-if="state.shortcuts?.length" ui-flex="row lm">
           <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-ss dib-sub" ui-scroll=":x y:hidden">
-            <p v-for="(item, idx) in state.shortcuts" :key="idx" class="bg-main-ss co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
-            <p class="bg-main-ss co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
+            <p v-for="(item, idx) in state.shortcuts" :key="idx" class="bg-main-o-ss co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
+            <p class="bg-main-o-ss co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
           </div>
         </div>
         <div>&nbsp;</div>
@@ -149,20 +149,20 @@
       text: '昨天',
       func() {
         change({ date: idate(new Date().setDate(new Date().getDate() - 1)).format('YYYY-MM-DD') });
-      }
+      },
     },
     today: {
       text: '今天',
       func() {
         change({ date: idate(new Date()).format('YYYY-MM-DD') });
-      }
+      },
     },
     tomorrow: {
       text: '明天',
       func() {
         change({ date: idate(new Date().setDate(new Date().getDate() + 1)).format('YYYY-MM-DD') });
-      }
-    }
+      },
+    },
   };
 
   const emits: any = defineEmits(['update:modelValue', 'change', 'update']);
@@ -204,7 +204,7 @@
     format: 'YYYY-MM-DD',
     // 节假日
     holiday: () => ({}),
-    time: false
+    time: false,
   });
 
   // 小时
@@ -250,7 +250,7 @@
       } else {
         return !props.time;
       }
-    })
+    }),
   });
 
   const ths: any = ref(null);
@@ -289,7 +289,7 @@
       // 值
       state.value = value || '';
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   onMounted(() => {
@@ -299,7 +299,7 @@
     () => state.panel,
     () => {
       setTimeValue();
-    }
+    },
   );
 
   // 更新时间

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

@@ -67,7 +67,7 @@
                 v-if="item.day"
                 :ui-date-day="item.day"
                 class="flex-block"
-                :class="`${item.range ? 'bg-main-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
+                :class="`${item.range ? 'bg-main-o-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
                 ui-flex="col cm"
                 @click="change(item)"
               >
@@ -75,12 +75,12 @@
                   ui-flex="col cm"
                   class="r-sm b-solid bk-none b-xs my-ss ux-scale co-main:hover"
                   style="width: 1.8em; height: 1.8em"
-                  :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-lm co-fore' : 'hover-bg-weak'}`"
+                  :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-o-lm co-fore' : 'hover-bg-weak'}`"
                 >
                   <span>{{ item.day }}</span>
                 </div>
               </div>
-              <div class="pa full-x lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 100%" ui-flex="row ct" v-html="extras(item)"></div>
+              <div class="pa w-full lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 100%" ui-flex="row ct" v-html="extras(item)"></div>
             </div>
           </li>
         </ul>
@@ -129,7 +129,7 @@
         </ul>
       </div>
     </div>
-    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid bk-line-mm bt-xs">
+    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid bk-line-o-mm bt-xs">
       <div ui-flex="row lm" class="nl-ss">
         <div v-if="state.panel" ui-flex="row lm">
           <span :anim-editing="state.type === 'date'" class="nx-ss">{{ idate(state.panel).format('YYYY-MM-DD') }}</span>
@@ -137,8 +137,8 @@
         </div>
         <div v-else-if="state.shortcuts?.length" ui-flex="row lm">
           <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-ss dib-sub" ui-scroll=":x y:hidden">
-            <p v-for="(item, idx) in state.shortcuts" :key="idx" class="bg-main-ss co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
-            <p class="bg-main-ss co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
+            <p v-for="(item, idx) in state.shortcuts" :key="idx" class="bg-main-o-ss co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
+            <p class="bg-main-o-ss co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
           </div>
         </div>
         <div>&nbsp;</div>
@@ -153,10 +153,11 @@
 <script setup lang="ts">
   import { computed, ref, reactive, watch, onMounted } from 'vue';
   import { isDateString, isObject, isString } from '@fekit/utils';
-  import { idate } from '@fekit/utils';
+  // import { idate } from '@fekit/utils';
+  import { idate } from './date';
   import { Icon } from '../basic';
 
-  const _level: any = { 0: ['d', 1], 1: ['m', 1], 2: ['y', 10], 3: ['y', 100] };
+  // const _level: any = { 0: ['d', 1], 1: ['m', 1], 2: ['y', 10], 3: ['y', 100] };
 
   // 创建日期
   const cDate = (date: any = null) => {
@@ -250,11 +251,12 @@
   // 内部数据
   const state: any = reactive({
     // 面板显示时间
-    panel: '',
+    panel: undefined,
     // 面板年份选择
     years: 0,
     // 当前时间计算
     curr: computed(() => {
+      // console.log(158, state.panel);
       const date = idate(state.panel);
       const days = date.calendar({ group: true, value: [state.panel] });
       return { days, ...date.attr };
@@ -262,7 +264,7 @@
     // 当前面板类型
     type: 0,
     // 值
-    value: '',
+    value: undefined,
     // 快捷选择
     shortcuts: computed(() => {
       return props.shortcuts.map((item: any) => {
@@ -337,9 +339,9 @@
     () => props.modelValue,
     (value: any) => {
       // 面板显示日期
-      state.panel = value || '';
+      state.panel = value || undefined;
       // 值
-      state.value = value || '';
+      state.value = value || undefined;
     },
     { deep: true, immediate: true },
   );
@@ -427,14 +429,14 @@
 
   // 清空日期
   const remove = () => {
-    state.panel = '';
+    state.panel = undefined;
     update();
   };
 
   // 更新数据
   const update = () => {
-    emits('update:modelValue', state.panel ? idate(state.panel).format(props.format) : '');
-    emits('update', state.panel ? idate(state.panel).format(props.format) : '');
+    emits('update:modelValue', state.panel ? idate(state.panel).format(props.format) : undefined);
+    emits('update', state.panel ? idate(state.panel).format(props.format) : undefined);
   };
 
   // 面板类型

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

@@ -212,7 +212,7 @@
 
   // 清空
   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,8 +57,8 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive, ref, computed, watch } 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);
 
@@ -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: '',
@@ -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 },
   );
 
+  // 输出时类型转换
+  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)"
     >

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

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

@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed, watch } from 'vue';
-  import { Input } from '../form';
+  import { Input } from '.';
   import { IPickerView, IScrollView } from '../basic';
   const ipicker: any = ref(null);
   const emits = defineEmits(['update:modelValue']);

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)"
       >

package/src/components/form/PageMoreSelect.vue

@@ -54,7 +54,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);
 
@@ -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>