@neatui/vue 2.10.0 → 2.12.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');
   }
   // 输入
@@ -237,7 +237,7 @@
     }
     // 输入事件
     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,8 +13,15 @@
         </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}`)" />
@@ -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.filter?.length || 0 }})</span>
               </label>
             </div>
             <div>
@@ -51,7 +58,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);
 
@@ -64,7 +71,7 @@
    * options        枚举列表
    * tools          是否显示工具栏
    * spare          空闲兜底内容
-   * search         是否显示搜索框
+   * search         是否启用搜索框
    *
    * -----------------------------------------
    * theme          主题
@@ -93,6 +100,7 @@
     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,11 +157,21 @@
     }),
     show: 0,
     value: '',
+    search: '',
     all: computed(() => {
-      return props.options?.every((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
+      return state.filter?.every((item: any) => props.modelValue?.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) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
+    }),
+    filter: computed(() => {
+      if (state.search) {
+        return props.options?.filter((item: any) => {
+          return item.label?.includes(state.search);
+        });
+      } else {
+        return props.options;
+      }
     }),
   });
 
@@ -183,7 +202,7 @@
   };
   // 全选
   const allselect = () => {
-    const s = state.all ? [] : props.options?.map((item: any) => item.value);
+    const s = state.all ? [] : state.filter?.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>

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>
 . .