@neatui/vue 2.10.0 → 2.12.0

package/package.json

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

package/src/components/basic/LayerView/Layer.vue

@@ -200,8 +200,6 @@
 </script>
 
 <style lang="scss">
-  @use '@neatui/css' as neatui;
-
   // 弹层
   .fekit-layer {
     position: fixed;
@@ -265,18 +263,4 @@
       }
     }
   }
-
-  @include neatui.mob {
-    .fekit-layer-close {
-      top: 1.5em;
-      right: 1.5em;
-
-      color: var(--co-fore);
-      top: auto;
-      right: auto;
-      left: 50%;
-      bottom: -2.5rem;
-      box-shadow: 0 0 0 2px currentColor;
-    }
-  }
 </style>

package/src/components/display/Calendar.vue

@@ -19,8 +19,8 @@
             <div
               ui-flex="col cm"
               class="r-ss b-solid bk-none b-xs"
-              :class="`${item.isToday ? 'bk-main-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
-                state.selected && state.selected === item.date ? 'active bg-main-ls co-fore' : 'hover-bg-weak'
+              :class="`${item.isToday ? 'bk-main-o-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
+                state.selected && state.selected === item.date ? 'active bg-main-o-ls co-fore' : 'hover-bg-weak'
               }`"
             >
               <span>{{ item.day }}</span>
@@ -108,40 +108,40 @@
     // 提示文案
     tips: {
       type: String,
-      default: ''
+      default: '',
     },
     // 提示文案
     placeholder: {
       type: String,
-      default: ''
+      default: '',
     },
     // 格式
     format: {
       type: String,
-      default: ''
+      default: '',
     },
     // 值
     value: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     // 值
     modelValue: { type: [String, Number], default: '' },
     // 节假日
     holiday: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     // 校验规则
     rules: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     // 是否是示校验图标
     verify: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   });
 
   // 内部数据
@@ -186,7 +186,7 @@
         calendar.unshift({
           date: `${last_y}-${last_m}-${prevdays}`,
           day: prevdays,
-          isLastMonth: 1
+          isLastMonth: 1,
         });
         prevdays = prevdays - 1;
       }
@@ -197,7 +197,7 @@
           day: _i,
           isToday: curr_y === y && curr_m === m && curr_d === i,
           isHoliday: props.holiday[`${y}-${m}-${_i}`]?.name ? 1 : 0,
-          holiday: props.holiday[`${y}-${m}-${_i}`]?.name
+          holiday: props.holiday[`${y}-${m}-${_i}`]?.name,
         });
       }
       for (let i = 1; calendar.length < 42; i++) {
@@ -205,14 +205,14 @@
         calendar.push({
           date: `${next_y}-${next_m}-${_i}`,
           day: _i,
-          isNextMonth: 1
+          isNextMonth: 1,
         });
       }
       return { days: calendar, y, m, d };
     }),
     value: computed(() => {
       return props.format ? idate(state.selected || props.value).format(props.format) : state.selected || props.value;
-    })
+    }),
   });
   const { curr = {} }: any = toRefs(state);
 

package/src/components/display/CalendarReg.vue

@@ -19,8 +19,8 @@
             <div
               ui-flex="col cm"
               class="r-ss b-solid bk-none b-xs"
-              :class="`${item.isToday ? 'bk-main-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
-                state.selected && state.selected === item.date ? 'active bg-main-ls co-fore' : 'hover-bg-weak'
+              :class="`${item.isToday ? 'bk-main-o-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
+                state.selected && state.selected === item.date ? 'active bg-main-o-ls co-fore' : 'hover-bg-weak'
               }`"
             >
               <span>{{ item.day }}</span>
@@ -108,40 +108,40 @@
     // 提示文案
     tips: {
       type: String,
-      default: ''
+      default: '',
     },
     // 提示文案
     placeholder: {
       type: String,
-      default: ''
+      default: '',
     },
     // 格式
     format: {
       type: String,
-      default: ''
+      default: '',
     },
     // 值
     value: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     // 值
     modelValue: { type: [String, Number], default: '' },
     // 节假日
     holiday: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     // 校验规则
     rules: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     // 是否是示校验图标
     verify: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   });
 
   // 内部数据
@@ -186,7 +186,7 @@
         calendar.unshift({
           date: `${last_y}-${last_m}-${prevdays}`,
           day: prevdays,
-          isLastMonth: 1
+          isLastMonth: 1,
         });
         prevdays = prevdays - 1;
       }
@@ -197,7 +197,7 @@
           day: _i,
           isToday: curr_y === y && curr_m === m && curr_d === i,
           isHoliday: props.holiday[`${y}-${m}-${_i}`]?.name ? 1 : 0,
-          holiday: props.holiday[`${y}-${m}-${_i}`]?.name
+          holiday: props.holiday[`${y}-${m}-${_i}`]?.name,
         });
       }
       for (let i = 1; calendar.length < 42; i++) {
@@ -205,14 +205,14 @@
         calendar.push({
           date: `${next_y}-${next_m}-${_i}`,
           day: _i,
-          isNextMonth: 1
+          isNextMonth: 1,
         });
       }
       return { days: calendar, y, m, d };
     }),
     value: computed(() => {
       return props.format ? idate(state.selected || props.value).format(props.format) : state.selected || props.value;
-    })
+    }),
   });
   const { curr = {} }: any = toRefs(state);
 

package/src/components/display/Tree.vue

@@ -1,7 +1,7 @@
 <template>
   <ul :class="`${root ? '' : 'nl-ms'}`">
     <li v-if="root" class="pr">
-      <div ui-form="@a sz: co:risk type:none :block" class="full-w">
+      <div ui-form="@a sz: co:risk type:none :block" class="w-full">
         <div style="left: 0.75em" :ui-form-tips="state.error.ontips">{{ state.error.tips }}</div>
       </div>
     </li>
@@ -156,7 +156,7 @@
     line: false,
     interacted: false,
     rules: () => [],
-    block: false
+    block: false,
   });
 
   /*
@@ -227,7 +227,7 @@
     error: {},
     // 用户是否交互
     interacted: false,
-    tree: [] as Array<Record<string, any>>
+    tree: [] as Array<Record<string, any>>,
   });
 
   watch(
@@ -247,7 +247,7 @@
         return n;
       });
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 获取节点勾选状态
@@ -300,7 +300,7 @@
         change(state.selected);
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 校验
@@ -359,7 +359,7 @@
         state.error = { tips: props.tips, ontips: props.tips ? 'show' : '', verify: '', co: '' };
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 </script>
 <style lang="scss" scoped>

package/src/components/form/Cascader.vue

@@ -87,7 +87,7 @@
 
 <script lang="ts" setup>
   import { reactive, ref, watch, computed } from 'vue';
-  import { Input } from '../form';
+  import { Input } from '.';
   import IFollowView from '../basic/IFollowView.vue';
   import { deepcopy } from '@fekit/utils';
 
@@ -101,49 +101,49 @@
     // 提示文案
     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, Array as () => any[]],
-      default: ''
+      default: '',
     },
     tools: {
       type: Boolean,
-      default: true
+      default: true,
     },
     spare: {
       type: String,
-      default: '当前没有可选项'
+      default: '当前没有可选项',
     },
     multiple: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 单选时生效,当为true时选中任何一级节点都生效
     changeOnSelect: {
       type: Boolean,
-      default: false
+      default: false,
     },
     readonly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     disabled: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   });
 
   const emit = defineEmits(['update:modelValue']);
@@ -156,7 +156,7 @@
     flatOpts: [], // 拉平的数据
     selectd: { label: '', value: '' },
     transSelected: { label: '', value: [] }, // 单选选中节点 - 单选过渡节点(记录选中的级联节点)
-    checkAll: false //全选
+    checkAll: false, //全选
   });
 
   // modelValue与input组件的v-model绑定属性重复，会造成覆盖问题。需要删掉
@@ -372,7 +372,7 @@
     } else {
       state.selectd = {
         label: '',
-        value: props.multiple ? [] : ''
+        value: props.multiple ? [] : '',
       };
       handleCheck(true);
     }
@@ -382,7 +382,7 @@
   const remove = () => {
     state.selectd = {
       label: '',
-      value: props.multiple ? [] : ''
+      value: props.multiple ? [] : '',
     };
     if (props.multiple) {
       handleCheck(true);
@@ -390,7 +390,7 @@
     } else {
       state.transSelected = {
         label: '',
-        value: []
+        value: [],
       };
     }
     ifollow.value.cancel();
@@ -405,7 +405,7 @@
     () => {
       init();
     },
-    { deep: true }
+    { deep: true },
   );
 
   watch(
@@ -423,13 +423,13 @@
         emit('update:modelValue', state.selectd.value);
       }
     },
-    { deep: true }
+    { deep: true },
   );
 
   defineExpose({
     select,
     remove,
-    cancel
+    cancel,
   });
 </script>
 . .

package/src/components/form/DatePicker.vue

@@ -18,8 +18,8 @@
 </template>
 <script setup lang="ts">
   import { reactive, watch, ref } from 'vue';
-  import { Input } from '../form';
-  import { DateView } from '../form';
+  import { Input } from '.';
+  import { DateView } from '.';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
   // 方法
@@ -91,30 +91,29 @@
     prefix: () => [],
     suffix: () => [],
     interacted: false,
-    time: false
+    time: false,
   });
 
   const state: any = reactive({
-    // view: 1,
     show: 0,
-    value: ''
+    value: null,
   });
 
   watch(
     () => props.modelValue,
     (value: any) => {
-      state.value = value;
+      state.value = value || null;
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   watch(
     () => state.value,
     (value: any) => {
-      emits('update:modelValue', value);
+      emits('update:modelValue', value || null);
       ifollow.value?.hide();
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   const toggle = () => {

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

@@ -18,7 +18,7 @@
 </template>
 <script setup lang="ts">
   import { reactive, watch, ref } from 'vue';
-  import { InputRange, DateRangeView } from '../form';
+  import { InputRange, DateRangeView } from '.';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
   // 方法
@@ -82,12 +82,12 @@
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false
+    interacted: false,
   });
 
   const state: any = reactive({
     show: 0,
-    value: []
+    value: [],
   });
 
   watch(
@@ -95,7 +95,7 @@
     (value: any) => {
       state.value = value;
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   watch(
@@ -106,7 +106,7 @@
         ifollow.value?.hide();
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   const toggle = () => {

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

@@ -52,7 +52,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(1, item)"
                   >
@@ -61,13 +61,13 @@
                       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-case' : item.holiday ? 'co-risk' : ''} ${
-                        item.selected ? 'active bg-main-lm co-fore' : 'hover-bg-weak'
+                        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% 110%" 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% 110%" ui-flex="row ct" v-html="extras(item)"></div>
                 </div>
               </li>
             </ul>
@@ -126,7 +126,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(2, item)"
                   >
@@ -135,13 +135,13 @@
                       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-case' : item.holiday ? 'co-risk' : ''} ${
-                        item.selected ? 'active bg-main-lm co-fore' : 'hover-bg-weak'
+                        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% 110%" 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% 110%" ui-flex="row ct" v-html="extras(item)"></div>
                 </div>
               </li>
             </ul>
@@ -149,7 +149,7 @@
         </div>
       </div>
     </div>
-    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="nx-sl ny-sl b-solid bk-line-ls bt-xs">
+    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="nx-sl ny-sl b-solid bk-line-o-ls bt-xs">
       <div ui-flex="row lm" class="nl-ss">
         <p v-if="sta.value || end.value">
           <span class="nowrap">已选：</span>
@@ -158,8 +158,8 @@
         <div v-else-if="com.shortcuts?.length" ui-flex="row lm">
           <span class="nowrap">推荐：</span>
           <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 com.shortcuts" :key="idx" class="bg-main-xs co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
-            <p class="bg-main-xs co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
+            <p v-for="(item, idx) in com.shortcuts" :key="idx" class="bg-main-o-xs co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
+            <p class="bg-main-o-xs co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
           </div>
         </div>
         <div v-else>&nbsp;</div>

package/src/components/form/DateView.vue

@@ -44,7 +44,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)"
@@ -53,18 +53,18 @@
                   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% 110%" 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% 110%" ui-flex="row ct" v-html="extras(item)"></div>
             </div>
           </li>
         </ul>
       </div>
     </div>
-    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="nx-sl ny-sl b-solid bk-line-mm bt-xs">
+    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="nx-sl ny-sl b-solid bk-line-o-mm bt-xs">
       <div ui-flex="row lm" class="nl-ss">
         <p v-if="state.date">
           <span class="nowrap">已选：</span>
@@ -73,8 +73,8 @@
         <div v-else-if="state.shortcuts?.length" ui-flex="row lm">
           <span class="nowrap">推荐：</span>
           <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-xs co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
-            <p class="bg-main-xs 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-xs co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
+            <p class="bg-main-o-xs co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
           </div>
         </div>
         <div v-else>&nbsp;</div>
@@ -101,20 +101,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']);
@@ -152,7 +152,7 @@
     // 节假日
     holiday: () => ({}),
     // 范围时间
-    rangeValue: ''
+    rangeValue: '',
   });
 
   // 内部数据
@@ -174,7 +174,7 @@
       return props.shortcuts.map((item: any) => {
         return isString(item) ? shortcutsList[item] : item;
       });
-    })
+    }),
   });
 
   watch(
@@ -183,7 +183,7 @@
       state.date = value || '';
       state.value = value || '';
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
   // 范围时间值
   watch(
@@ -191,7 +191,7 @@
     (value: any) => {
       state.rangeValue = value;
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 更新时间