@neatui/vue 2.15.3 → 2.15.5

package/package.json

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

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

@@ -26,28 +26,34 @@
         </div>
       </div>
     </div>
-    <div ui-date-body="" class="flex-block pr min-h-ls+">
-      <div v-if="state.type === 2" class="full n-ms">
-        <ul ui-row="mob-6" class="n-ms ny-sm-sub">
+    <div ui-date-body="" :class="['flex-block pr', bodyClass]">
+      <div v-if="state.type === 2" class="full">
+        <ul ui-grid="mob:4" class="n-ms ny-sm-sub">
           <li v-for="(year, idx) in panel.years" :key="idx" ui-flex="col cm" @click="setDateValue('y', year)">
-            <div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">{{ year }}</div>
+            <div
+              ui-flex="col cm"
+              class="w-ss h-xs ac ux-none r-sm"
+              :class="isSelectedYear(year) ? 'active bg-main-o-lm co-w' : 'co-main:hover'"
+            >
+              {{ year }}
+            </div>
           </li>
         </ul>
       </div>
       <div v-else-if="state.type === 1" class="full">
-        <ul ui-row="mob-4" class="n-ms ny-sm-sub">
-          <li ui-flex="col cm" @click="setDateValue('m', 1)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">1月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 2)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">2月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 3)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">3月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 4)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">4月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 5)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">5月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 6)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">6月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 7)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">7月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 8)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">8月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 9)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">9月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 10)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">10月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 11)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">11月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 12)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">12月</div></li>
+        <ul ui-grid="mob:4" class="n-ms ny-sm-sub">
+          <li ui-flex="col cm" @click="setDateValue('m', 1)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(1) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">1月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 2)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(2) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">2月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 3)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(3) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">3月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 4)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(4) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">4月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 5)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(5) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">5月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 6)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(6) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">6月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 7)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(7) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">7月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 8)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(8) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">8月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 9)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(9) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">9月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 10)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(10) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">10月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 11)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(11) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">11月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 12)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(12) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">12月</div></li>
         </ul>
       </div>
       <div v-else class="full">
@@ -132,11 +138,11 @@
       </div>
       <div v-else class="h-ss"></div>
     </template>
-    <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 v-if="showTools" 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 === 0" class="nx-ss">{{ idate(state.panel).format('YYYY-MM-DD') }}</span>
-          <span v-if="!state.isNoTime" :anim-editing="state.type === 0" class="nx-ss">{{ idate(state.panel).format('HH:mm:ss') }}</span>
+          <span :anim-editing="state.type === baseType" class="nx-ss">{{ idate(state.panel).format(panelFormat) }}</span>
+          <span v-if="!state.isNoTime" :anim-editing="state.type === baseType" class="nx-ss">{{ idate(state.panel).format('HH:mm:ss') }}</span>
         </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">
@@ -159,9 +165,40 @@
   import { idate } from './date';
   import { Icon } from '../basic';
 
+  const normalizeDateInput = (value: any) => {
+    if (!value) {
+      return value;
+    }
+    if (isString(value)) {
+      if (/^\d{4}$/.test(value)) {
+        return `${value}-01-01`;
+      }
+      if (/^\d{4}-(\d{1,2})$/.test(value)) {
+        const [year, month] = value.split('-');
+        const m = month.padStart(2, '0');
+        return `${year}-${m}-01`;
+      }
+    }
+    return value;
+  };
+
+  interface PickerConfig {
+    baseType: number;
+    format: string;
+    bodyClass: string;
+    tools: boolean;
+  }
+
+  const PICKER_CONFIGS: Record<string, PickerConfig> = {
+    date: { baseType: 0, format: 'YYYY-MM-DD', bodyClass: 'min-h-ls+', tools: true },
+    month: { baseType: 1, format: 'YYYY-MM', bodyClass: 'min-h-ms', tools: false },
+    year: { baseType: 2, format: 'YYYY', bodyClass: 'min-h-ms', tools: false },
+  };
+
   // 创建日期
   const cDate = (date: any = null) => {
-    return isDateString(date) ? new Date(date) : new Date();
+    const normalized = normalizeDateInput(date);
+    return isDateString(normalized) ? new Date(normalized) : new Date();
   };
 
   // 快捷预设
@@ -198,7 +235,7 @@
     tools?: boolean;
     range?: boolean;
     format?: string;
-    picker?: 'date' | 'week' | 'month' | 'quarter';
+    picker?: 'date' | 'week' | 'month' | 'quarter' | 'year';
     holiday?: object;
     shortcuts?: Array<'yesterday' | 'today' | 'tomorrow'>;
     extras?: (item: any) => string;
@@ -211,7 +248,7 @@
     // 是否显示框架
     frame: false,
     // 是否是示工具
-    tools: true,
+    tools: undefined,
     // 时间范围
     range: false,
     // 面板类型
@@ -223,7 +260,7 @@
     // 快捷选择
     shortcuts: () => ['yesterday', 'today', 'tomorrow'],
     // 数据格式化
-    format: 'YYYY-MM-DD',
+    format: undefined,
     // 节假日
     holiday: () => ({}),
     time: false,
@@ -231,6 +268,11 @@
     lang: 'zh-CN',
   });
 
+  const pickerConfig = computed<PickerConfig>(() => {
+    const key = props.picker || 'date';
+    return PICKER_CONFIGS[key] || PICKER_CONFIGS.date;
+  });
+
   // 小时
   const hours = computed(() => {
     const _hours: any = [];
@@ -248,6 +290,27 @@
     return _seconds;
   });
 
+  const baseType = computed(() => pickerConfig.value.baseType);
+
+  const panelFormat = computed(() => props.format || pickerConfig.value.format);
+
+  const bodyClass = computed(() => pickerConfig.value.bodyClass);
+
+  const showTools = computed(() => {
+    if (props.tools !== undefined) {
+      return !!props.tools;
+    }
+    return pickerConfig.value.tools;
+  });
+
+  const isSelectedYear = (year: number) => {
+    return !!state.panel && state.curr?.y === year;
+  };
+
+  const isSelectedMonth = (month: number) => {
+    return !!state.panel && state.curr?.M === month;
+  };
+
   // 内部数据
   const state: any = reactive({
     // 面板显示时间
@@ -280,6 +343,28 @@
     }),
   });
 
+  watch(
+    () => baseType.value,
+    (value) => {
+      state.type = value;
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => panelFormat.value,
+    (format) => {
+      if (state.panel) {
+        const formatted = idate(state.panel).format(format);
+        if (formatted !== state.panel) {
+          state.panel = formatted;
+        }
+        state.value = formatted;
+      }
+    },
+    { immediate: true },
+  );
+
   // 面板
   const panel: any = reactive({
     years: computed(() => {
@@ -300,9 +385,18 @@
 
   // 设置日期
   const setDateValue = (type: any, value: number = 0, add: number = 0) => {
-    state.panel = upload(type, value, add);
+    const panelValue = upload(type, value, add);
+    state.panel = panelValue;
+    state.value = panelValue;
     // 面板返回上一级
-    state.type = Math.max(0, state.type - 1);
+    const base = baseType.value;
+    const nextType = Math.max(base, state.type - 1);
+    state.type = nextType;
+
+    if (base > 0 && nextType === base) {
+      emits('change', panelValue);
+      update();
+    }
   };
 
   // 时分秒
@@ -337,10 +431,11 @@
   watch(
     () => props.modelValue,
     (value: any) => {
+      const formatted = value ? idate(value).format(panelFormat.value) : undefined;
       // 面板显示日期
-      state.panel = value || undefined;
+      state.panel = formatted;
       // 值
-      state.value = value || undefined;
+      state.value = formatted;
     },
     { deep: true, immediate: true },
   );
@@ -405,7 +500,7 @@
       default:
         break;
     }
-    return idate(date).format(props.format);
+    return idate(date).format(panelFormat.value);
   };
 
   // 日期前翻
@@ -419,7 +514,7 @@
 
   // 向外通信
   const change = (item: any) => {
-    const panelValue = item ? idate(item.date).format(props.format) : item;
+    const panelValue = item ? idate(item.date).format(panelFormat.value) : item;
     state.panel = panelValue;
     state.value = panelValue;
     emits('change', panelValue);
@@ -431,13 +526,19 @@
   // 清空日期
   const remove = () => {
     state.panel = undefined;
+    state.value = undefined;
     update();
   };
 
   // 更新数据
   const update = () => {
-    emits('update:modelValue', state.panel ? idate(state.panel).format(props.format) : undefined);
-    emits('update', state.panel ? idate(state.panel).format(props.format) : undefined);
+    const nextValue = state.panel ? idate(state.panel).format(panelFormat.value) : undefined;
+    if (state.panel && nextValue !== state.panel) {
+      state.panel = nextValue;
+    }
+    state.value = nextValue;
+    emits('update:modelValue', nextValue);
+    emits('update', nextValue);
   };
 
   // 面板类型