@varlet/ui 3.15.1 → 3.15.2

package/es/action-sheet/style/index.mjs

@@ -3,5 +3,5 @@ import '../../icon/icon.css'
 import '../../ripple/ripple.css'
 import '../../popup/popup.css'
 import '../actionSheet.css'
-import '../ActionItemSfc.css'
 import '../ActionSheetSfc.css'
+import '../ActionItemSfc.css'

package/es/date-picker/DatePicker.mjs

@@ -76,9 +76,9 @@ function __render__(_ctx, _cache) {
                   onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickEl("year"))
                 },
                 [
-                  _renderSlot(_ctx.$slots, "year", { year: _ctx.chooseYear }, () => [
+                  _renderSlot(_ctx.$slots, "year", { year: _ctx.displayYear }, () => [
                     _createTextVNode(
-                      _toDisplayString(_ctx.chooseYear),
+                      _toDisplayString(_ctx.displayYear),
                       1
                       /* TEXT */
                     )
@@ -337,6 +337,7 @@ const __sfc__ = defineComponent({
       previewMonth: previewMonth.value,
       previewYear: previewYear.value
     }));
+    const displayYear = computed(() => previewYear.value || chooseYear.value || "");
     const getYearTitle = computed(() => {
       var _a;
       const { multiple, range } = props2;
@@ -416,7 +417,7 @@ const __sfc__ = defineComponent({
     watch(
       () => props2.modelValue,
       (value) => {
-        if (!checkValue() || invalidFormatDate(value)) {
+        if (!checkValue()) {
           return;
         }
         if (props2.range) {
@@ -431,7 +432,7 @@ const __sfc__ = defineComponent({
           }
           multipleInit(value, props2.type);
         } else {
-          dateInit(value);
+          dateInit(getSingleDate(value));
         }
       },
       { immediate: true }
@@ -626,28 +627,47 @@ const __sfc__ = defineComponent({
       }
       return false;
     }
+    function getFallbackDate() {
+      if (props2.fallbackViewDate) {
+        const formatDate = dayjs(props2.fallbackViewDate).format("YYYY-MM-D");
+        if (formatDate !== "Invalid Date") {
+          return props2.fallbackViewDate;
+        }
+      }
+      return dayjs().format("YYYY-MM-D");
+    }
+    function getSingleDate(value) {
+      if (value && !invalidFormatDate(dayjs(value).format("YYYY-MM-D"))) {
+        return value;
+      }
+      return getFallbackDate();
+    }
+    function getFirstValidDate(value, type) {
+      const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-D";
+      return value.find((choose) => !invalidFormatDate(dayjs(choose).format(formatType)));
+    }
     function rangeInit(value, type) {
+      var _a;
       const rangeDate = type === "year" ? chooseRangeYear : type === "month" ? chooseRangeMonth : chooseRangeDay;
       const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-D";
-      const formatDateList = value.map((choose) => dayjs(choose).format(formatType)).slice(0, 2);
-      const isValid = rangeDate.value.some((date) => invalidFormatDate(date));
-      if (isValid) {
-        return;
-      }
+      const formatDateList = value.map((choose) => dayjs(choose).format(formatType)).filter((date) => !invalidFormatDate(date)).slice(0, 2);
       rangeDate.value = formatDateList;
       const isChangeOrder = dayjs(rangeDate.value[0]).isAfter(rangeDate.value[1]);
       if (rangeDate.value.length === 2 && isChangeOrder) {
         rangeDate.value = [rangeDate.value[1], rangeDate.value[0]];
       }
+      previewInit((_a = getFirstValidDate(value, type)) != null ? _a : getFallbackDate());
     }
     function multipleInit(value, type) {
+      var _a;
       const rangeDate = type === "year" ? chooseYears : type === "month" ? chooseMonths : chooseDays;
       const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-D";
       const formatDateList = Array.from(new Set(value.map((choose) => dayjs(choose).format(formatType))));
       rangeDate.value = formatDateList.filter((date) => date !== "Invalid Date");
+      previewInit((_a = getFirstValidDate(value, type)) != null ? _a : getFallbackDate());
     }
     function dateInit(value) {
-      const handleValue = value ? dayjs(value) : dayjs();
+      const handleValue = value ? dayjs(value) : dayjs(getFallbackDate());
       const formatDate = handleValue.format("YYYY-MM-D");
       if (invalidFormatDate(formatDate)) {
         return;
@@ -657,6 +677,16 @@ const __sfc__ = defineComponent({
       chooseMonth.value = monthDes2;
       chooseYear.value = yearValue;
       chooseDay.value = dayValue;
+      previewInit(formatDate);
+    }
+    function previewInit(value) {
+      const handleValue = value ? dayjs(value) : dayjs(getFallbackDate());
+      const formatDate = handleValue.format("YYYY-MM-D");
+      if (invalidFormatDate(formatDate)) {
+        return;
+      }
+      const [yearValue, monthValue] = formatDate.split("-");
+      const monthDes2 = MONTH_LIST.find((month) => month === monthValue);
       previewMonth.value = monthDes2;
       previewYear.value = yearValue;
     }
@@ -676,6 +706,7 @@ const __sfc__ = defineComponent({
       chooseYear,
       chooseDay,
       previewYear,
+      displayYear,
       isYearPanel,
       isMonthPanel,
       getMonthTitle,

package/es/date-picker/props.mjs

@@ -8,6 +8,7 @@ const props = {
     default: "date"
   },
   hint: String,
+  fallbackViewDate: String,
   allowedDates: Function,
   color: String,
   titleColor: String,

package/es/index.bundle.mjs

@@ -283,7 +283,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.15.1'
+const version = '3.15.2'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -188,7 +188,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.15.1'
+const version = '3.15.2'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)