@varlet/ui 3.8.2 → 3.8.3

package/es/date-picker/DatePicker.mjs

@@ -18,21 +18,21 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+import { computed, defineComponent, ref, watch } from "vue";
+import { call, doubleRaf, error, isArray, toNumber } from "@varlet/shared";
 import dayjs from "dayjs/esm/index.js";
-import MonthPickerPanel from "./src/month-picker-panel.mjs";
-import YearPickerPanel from "./src/year-picker-panel.mjs";
-import DayPickerPanel from "./src/day-picker-panel.mjs";
-import { defineComponent, ref, computed, watch } from "vue";
+import { t } from "../locale/index.mjs";
+import { injectLocaleProvider } from "../locale-provider/provide.mjs";
+import { createNamespace, formatElevation } from "../utils/components.mjs";
+import { padStart } from "../utils/shared.mjs";
 import {
-  props,
   MONTH_LIST,
+  props,
   WEEK_HEADER
 } from "./props.mjs";
-import { isArray, toNumber, doubleRaf, call, error } from "@varlet/shared";
-import { createNamespace, formatElevation } from "../utils/components.mjs";
-import { padStart } from "../utils/shared.mjs";
-import { t } from "../locale/index.mjs";
-import { injectLocaleProvider } from "../locale-provider/provide.mjs";
+import DayPickerPanel from "./src/day-picker-panel.mjs";
+import MonthPickerPanel from "./src/month-picker-panel.mjs";
+import YearPickerPanel from "./src/year-picker-panel.mjs";
 const { name, n, classes } = createNamespace("date-picker");
 import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeProps as _normalizeProps, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock } from "vue";
 function __render__(_ctx, _cache) {
@@ -364,20 +364,32 @@ const __sfc__ = defineComponent({
         const formatRangeDays = chooseRangeDay.value.map((date) => dayjs(date).format("YYYY-MM-DD"));
         return formatRangeDays.length ? `${formatRangeDays[0]} ~ ${formatRangeDays[1]}` : "";
       }
-      if (multiple) return `${chooseDays.value.length}${(pt || t)("datePickerSelected")}`;
-      if (!chooseYear.value || !chooseMonth.value || !chooseDay.value) return "";
+      if (multiple) {
+        return `${chooseDays.value.length}${(pt || t)("datePickerSelected")}`;
+      }
+      if (!chooseYear.value || !chooseMonth.value || !chooseDay.value) {
+        return "";
+      }
       const weekIndex = dayjs(`${chooseYear.value}-${chooseMonth.value}-${chooseDay.value}`).day();
       const week = WEEK_HEADER.find((value) => value === `${weekIndex}`);
       const weekName = (_b = (_a = (pt || t)("datePickerWeekDict")) == null ? void 0 : _a[week].name) != null ? _b : "";
       const monthName = (_d = (_c = (pt || t)("datePickerMonthDict")) == null ? void 0 : _c[chooseMonth.value].name) != null ? _d : "";
       const showDay = padStart(chooseDay.value, 2, "0");
-      if ((pt || t)("lang") === "zh-CN") return `${chooseMonth.value}-${showDay} ${weekName.slice(0, 3)}`;
+      if ((pt || t)("lang") === "zh-CN") {
+        return `${chooseMonth.value}-${showDay} ${weekName.slice(0, 3)}`;
+      }
       return `${weekName.slice(0, 3)}, ${monthName.slice(0, 3)} ${chooseDay.value}`;
     });
     const getPanelType = computed(() => {
-      if (props2.type === "year" || isYearPanel.value) return "year";
-      if (props2.type === "month" || isMonthPanel.value) return "month";
-      if (props2.type === "date") return "date";
+      if (props2.type === "year" || isYearPanel.value) {
+        return "year";
+      }
+      if (props2.type === "month" || isMonthPanel.value) {
+        return "month";
+      }
+      if (props2.type === "date") {
+        return "date";
+      }
       return "";
     });
     const isUntouchable = computed(() => !props2.touchable || !getPanelType.value);
@@ -404,13 +416,19 @@ const __sfc__ = defineComponent({
     watch(
       () => props2.modelValue,
       (value) => {
-        if (!checkValue() || invalidFormatDate(value)) return;
+        if (!checkValue() || invalidFormatDate(value)) {
+          return;
+        }
         if (props2.range) {
-          if (!isArray(value)) return;
+          if (!isArray(value)) {
+            return;
+          }
           rangeDone.value = value.length !== 1;
           rangeInit(value, props2.type);
         } else if (props2.multiple) {
-          if (!isArray(value)) return;
+          if (!isArray(value)) {
+            return;
+          }
           multipleInit(value, props2.type);
         } else {
           dateInit(value);
@@ -420,15 +438,19 @@ const __sfc__ = defineComponent({
     );
     watch(getPanelType, resetState);
     function clickEl(type) {
-      if (type === "year") isYearPanel.value = true;
-      else if (type === "month") isMonthPanel.value = true;
-      else {
+      if (type === "year") {
+        isYearPanel.value = true;
+      } else if (type === "month") {
+        isMonthPanel.value = true;
+      } else {
         isYearPanel.value = false;
         isMonthPanel.value = false;
       }
     }
     function handleTouchstart(event) {
-      if (isUntouchable.value) return;
+      if (isUntouchable.value) {
+        return;
+      }
       const { clientX, clientY } = event.touches[0];
       startX = clientX;
       startY = clientY;
@@ -437,7 +459,9 @@ const __sfc__ = defineComponent({
       return x >= y && x > 20 ? "x" : "y";
     }
     function handleTouchmove(event) {
-      if (isUntouchable.value) return;
+      if (isUntouchable.value) {
+        return;
+      }
       const { clientX, clientY } = event.touches[0];
       const x = clientX - startX;
       const y = clientY - startY;
@@ -446,7 +470,9 @@ const __sfc__ = defineComponent({
     }
     function handleTouchend() {
       return __async(this, null, function* () {
-        if (isUntouchable.value || touchDirection !== "x") return;
+        if (isUntouchable.value || touchDirection !== "x") {
+          return;
+        }
         const componentRef = getPanelType.value === "year" ? yearPanelEl : getPanelType.value === "month" ? monthPanelEl : dayPanelEl;
         yield doubleRaf();
         componentRef.value.forwardRef(checkType);
@@ -469,27 +495,42 @@ const __sfc__ = defineComponent({
       const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-DD";
       const formatDates = multipleDates.value.map((date2) => dayjs(date2).format(formatType));
       const index = formatDates.findIndex((choose) => choose === date);
-      if (index === -1) formatDates.push(date);
-      else formatDates.splice(index, 1);
+      if (index === -1) {
+        formatDates.push(date);
+      } else {
+        formatDates.splice(index, 1);
+      }
       call(props2["onUpdate:modelValue"], formatDates);
       call(props2.onChange, formatDates);
     }
     function getReverse(dateType, date) {
-      if (!chooseYear.value || !chooseMonth.value) return false;
-      if (!isSameYear.value) return chooseYear.value > previewYear.value;
-      if (dateType === "year") return date < toNumber(chooseYear.value);
-      if (dateType === "month") return date < chooseMonth.value;
+      if (!chooseYear.value || !chooseMonth.value) {
+        return false;
+      }
+      if (!isSameYear.value) {
+        return chooseYear.value > previewYear.value;
+      }
+      if (dateType === "year") {
+        return date < toNumber(chooseYear.value);
+      }
+      if (dateType === "month") {
+        return date < chooseMonth.value;
+      }
       return isSameMonth.value ? date < toNumber(chooseDay.value) : chooseMonth.value > previewMonth.value;
     }
     function getChooseDay(day) {
       const { readonly, range, multiple, onChange, "onUpdate:modelValue": updateModelValue } = props2;
-      if (day < 0 || readonly) return;
+      if (day < 0 || readonly) {
+        return;
+      }
       reverse.value = getReverse("day", day);
       const date = `${previewYear.value}-${previewMonth.value}-${day}`;
       const formatDate = dayjs(date).format("YYYY-MM-DD");
-      if (range) updateRange(formatDate, "day");
-      else if (multiple) updateMultiple(formatDate, "day");
-      else {
+      if (range) {
+        updateRange(formatDate, "day");
+      } else if (multiple) {
+        updateMultiple(formatDate, "day");
+      } else {
         call(updateModelValue, formatDate);
         call(onChange, formatDate);
       }
@@ -499,9 +540,11 @@ const __sfc__ = defineComponent({
       reverse.value = getReverse("month", month);
       if (type === "month" && !readonly) {
         const date = `${previewYear.value}-${month}`;
-        if (range) updateRange(date, "month");
-        else if (multiple) updateMultiple(date, "month");
-        else {
+        if (range) {
+          updateRange(date, "month");
+        } else if (multiple) {
+          updateMultiple(date, "month");
+        } else {
           call(updateModelValue, date);
           call(onChange, date);
         }
@@ -520,9 +563,11 @@ const __sfc__ = defineComponent({
       const { type, readonly, range, multiple, onChange, onPreview, "onUpdate:modelValue": updateModelValue } = props2;
       reverse.value = getReverse("year", year);
       if (type === "year" && !readonly) {
-        if (range) updateRange(`${year}`, "year");
-        else if (multiple) updateMultiple(`${year}`, "year");
-        else {
+        if (range) {
+          updateRange(`${year}`, "year");
+        } else if (multiple) {
+          updateMultiple(`${year}`, "year");
+        } else {
           call(updateModelValue, `${year}`);
           call(onChange, `${year}`);
         }
@@ -586,7 +631,9 @@ const __sfc__ = defineComponent({
       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;
+      if (isValid) {
+        return;
+      }
       rangeDate.value = formatDateList;
       const isChangeOrder = dayjs(rangeDate.value[0]).isAfter(rangeDate.value[1]);
       if (rangeDate.value.length === 2 && isChangeOrder) {
@@ -602,7 +649,9 @@ const __sfc__ = defineComponent({
     function dateInit(value) {
       const handleValue = value ? dayjs(value) : dayjs();
       const formatDate = handleValue.format("YYYY-MM-D");
-      if (invalidFormatDate(formatDate)) return;
+      if (invalidFormatDate(formatDate)) {
+        return;
+      }
       const [yearValue, monthValue, dayValue] = formatDate.split("-");
       const monthDes2 = MONTH_LIST.find((month) => month === monthValue);
       chooseMonth.value = monthDes2;

package/es/date-picker/index.mjs

@@ -1,5 +1,5 @@
-import DatePicker from "./DatePicker.mjs";
 import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import DatePicker from "./DatePicker.mjs";
 import { props as datePickerProps } from "./props.mjs";
 withInstall(DatePicker);
 withPropsDefaultsSetter(DatePicker, datePickerProps);

package/es/date-picker/src/day-picker-panel.mjs

@@ -14,24 +14,24 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import dayjs from "dayjs/esm/index.js";
-import isSameOrBefore from "dayjs/esm/plugin/isSameOrBefore/index.js";
-import isSameOrAfter from "dayjs/esm/plugin/isSameOrAfter/index.js";
-import PanelHeader from "./panel-header.mjs";
-import VarButton from "../../button/index.mjs";
 import {
+  computed,
   defineComponent,
+  reactive,
   ref,
-  computed,
-  watch,
-  reactive
+  watch
 } from "vue";
-import { WEEK_HEADER } from "../props.mjs";
 import { toNumber } from "@varlet/shared";
-import { createNamespace } from "../../utils/components.mjs";
-import { t } from "../../locale/index.mjs";
 import { onSmartMounted } from "@varlet/use";
+import dayjs from "dayjs/esm/index.js";
+import isSameOrAfter from "dayjs/esm/plugin/isSameOrAfter/index.js";
+import isSameOrBefore from "dayjs/esm/plugin/isSameOrBefore/index.js";
+import VarButton from "../../button/index.mjs";
+import { t } from "../../locale/index.mjs";
 import { injectLocaleProvider } from "../../locale-provider/provide.mjs";
+import { createNamespace } from "../../utils/components.mjs";
+import { WEEK_HEADER } from "../props.mjs";
+import PanelHeader from "./panel-header.mjs";
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 const { n, classes } = createNamespace("day-picker");
@@ -233,8 +233,12 @@ const __sfc__ = defineComponent({
       let isBeforeMax = true;
       let isAfterMin = true;
       const previewDate = `${previewYear}-${previewMonth}-${day}`;
-      if (max) isBeforeMax = dayjs(previewDate).isSameOrBefore(dayjs(max), "day");
-      if (min) isAfterMin = dayjs(previewDate).isSameOrAfter(dayjs(min), "day");
+      if (max) {
+        isBeforeMax = dayjs(previewDate).isSameOrBefore(dayjs(max), "day");
+      }
+      if (min) {
+        isAfterMin = dayjs(previewDate).isSameOrAfter(dayjs(min), "day");
+      }
       return isBeforeMax && isAfterMin;
     };
     const shouldChoose = (val) => {
@@ -243,7 +247,9 @@ const __sfc__ = defineComponent({
         componentProps: { range }
       } = props;
       if (range) {
-        if (!chooseRangeDay.length) return false;
+        if (!chooseRangeDay.length) {
+          return false;
+        }
         const isBeforeMax = dayjs(val).isSameOrBefore(dayjs(chooseRangeDay[1]), "day");
         const isAfterMin = dayjs(val).isSameOrAfter(dayjs(chooseRangeDay[0]), "day");
         return isBeforeMax && isAfterMin;
@@ -267,31 +273,55 @@ const __sfc__ = defineComponent({
       } = props;
       const val = `${previewYear}-${previewMonth}-${day}`;
       const dayExist = () => {
-        if (range || multiple) return shouldChoose(val);
+        if (range || multiple) {
+          return shouldChoose(val);
+        }
         return toNumber(chooseDay2) === day && isSame.value;
       };
       const computeDisabled = () => {
-        if (!inRange(day)) return true;
-        if (!allowedDates) return false;
+        if (!inRange(day)) {
+          return true;
+        }
+        if (!allowedDates) {
+          return false;
+        }
         return !allowedDates(val);
       };
       const disabled = computeDisabled();
       const computeText = () => {
-        if (disabled) return true;
-        if (range || multiple) return !shouldChoose(val);
+        if (disabled) {
+          return true;
+        }
+        if (range || multiple) {
+          return !shouldChoose(val);
+        }
         return !isSame.value || toNumber(chooseDay2) !== day;
       };
       const computeOutline = () => {
-        if (!(isCurrent.value && toNumber(currentDay) === day && props.componentProps.showCurrent)) return false;
-        if ((range || multiple || isSame.value) && disabled) return true;
-        if (range || multiple) return !shouldChoose(val);
-        if (isSame.value) return chooseDay2 !== currentDay;
+        if (!(isCurrent.value && toNumber(currentDay) === day && props.componentProps.showCurrent)) {
+          return false;
+        }
+        if ((range || multiple || isSame.value) && disabled) {
+          return true;
+        }
+        if (range || multiple) {
+          return !shouldChoose(val);
+        }
+        if (isSame.value) {
+          return chooseDay2 !== currentDay;
+        }
         return true;
       };
       const textColorOrCover = () => {
-        if (disabled) return "";
-        if (computeOutline()) return color != null ? color : "";
-        if (dayExist()) return "";
+        if (disabled) {
+          return "";
+        }
+        if (computeOutline()) {
+          return color != null ? color : "";
+        }
+        if (dayExist()) {
+          return "";
+        }
         return `${nDate()}-color-cover`;
       };
       const isCover = textColorOrCover().startsWith(nDate());
@@ -311,7 +341,9 @@ const __sfc__ = defineComponent({
     };
     const chooseDay = (day, event) => {
       const buttonEl = event.currentTarget;
-      if (buttonEl.classList.contains(n("button--disabled"))) return;
+      if (buttonEl.classList.contains(n("button--disabled"))) {
+        return;
+      }
       emit("choose-day", day);
     };
     const forwardRef = (checkType) => {

package/es/date-picker/src/month-picker-panel.mjs

@@ -14,17 +14,17 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, ref, computed, reactive, watch } from "vue";
+import { computed, defineComponent, reactive, ref, watch } from "vue";
+import { toNumber } from "@varlet/shared";
 import dayjs from "dayjs/esm/index.js";
-import isSameOrBefore from "dayjs/esm/plugin/isSameOrBefore/index.js";
 import isSameOrAfter from "dayjs/esm/plugin/isSameOrAfter/index.js";
-import { MONTH_LIST } from "../props.mjs";
-import PanelHeader from "./panel-header.mjs";
+import isSameOrBefore from "dayjs/esm/plugin/isSameOrBefore/index.js";
 import VarButton from "../../button/index.mjs";
-import { toNumber } from "@varlet/shared";
-import { createNamespace } from "../../utils/components.mjs";
 import { t } from "../../locale/index.mjs";
 import { injectLocaleProvider } from "../../locale-provider/provide.mjs";
+import { createNamespace } from "../../utils/components.mjs";
+import { MONTH_LIST } from "../props.mjs";
+import PanelHeader from "./panel-header.mjs";
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 const { n, classes } = createNamespace("month-picker");
@@ -154,8 +154,12 @@ const __sfc__ = defineComponent({
       let isBeforeMax = true;
       let isAfterMin = true;
       const previewDate = `${previewYear}-${key}`;
-      if (max) isBeforeMax = dayjs(previewDate).isSameOrBefore(dayjs(max), "month");
-      if (min) isAfterMin = dayjs(previewDate).isSameOrAfter(dayjs(min), "month");
+      if (max) {
+        isBeforeMax = dayjs(previewDate).isSameOrBefore(dayjs(max), "month");
+      }
+      if (min) {
+        isAfterMin = dayjs(previewDate).isSameOrAfter(dayjs(min), "month");
+      }
       return isBeforeMax && isAfterMin;
     };
     const shouldChoose = (val) => {
@@ -164,12 +168,16 @@ const __sfc__ = defineComponent({
         componentProps: { type, range }
       } = props;
       if (range) {
-        if (!chooseRangeMonth.length) return false;
+        if (!chooseRangeMonth.length) {
+          return false;
+        }
         const isBeforeMax = dayjs(val).isSameOrBefore(dayjs(chooseRangeMonth[1]), "month");
         const isAfterMin = dayjs(val).isSameOrAfter(dayjs(chooseRangeMonth[0]), "month");
         return isBeforeMax && isAfterMin;
       }
-      if (type === "month") return chooseMonths.includes(val);
+      if (type === "month") {
+        return chooseMonths.includes(val);
+      }
       return chooseDays.some((value) => value.includes(val));
     };
     const buttonProps = (key) => {
@@ -180,31 +188,55 @@ const __sfc__ = defineComponent({
       } = props;
       const val = `${previewYear}-${key}`;
       const monthExist = () => {
-        if (range || multiple) return shouldChoose(val);
+        if (range || multiple) {
+          return shouldChoose(val);
+        }
         return chooseMonth2 === key && isSameYear.value;
       };
       const computeDisabled = () => {
-        if (!inRange(key)) return true;
-        if (!allowedDates) return false;
+        if (!inRange(key)) {
+          return true;
+        }
+        if (!allowedDates) {
+          return false;
+        }
         return !allowedDates(val);
       };
       const disabled = computeDisabled();
       const computeText = () => {
-        if (disabled) return true;
-        if (range || multiple) return !shouldChoose(val);
+        if (disabled) {
+          return true;
+        }
+        if (range || multiple) {
+          return !shouldChoose(val);
+        }
         return !isSameYear.value || chooseMonth2 !== key;
       };
       const computeOutline = () => {
-        if (!(isCurrentYear.value && currentMonth === key && props.componentProps.showCurrent)) return false;
-        if ((range || multiple || isSameYear.value) && disabled) return true;
-        if (range || multiple) return !shouldChoose(val);
-        if (isSameYear.value) return chooseMonth2 !== currentMonth;
+        if (!(isCurrentYear.value && currentMonth === key && props.componentProps.showCurrent)) {
+          return false;
+        }
+        if ((range || multiple || isSameYear.value) && disabled) {
+          return true;
+        }
+        if (range || multiple) {
+          return !shouldChoose(val);
+        }
+        if (isSameYear.value) {
+          return chooseMonth2 !== currentMonth;
+        }
         return true;
       };
       const textColorOrCover = () => {
-        if (disabled) return "";
-        if (computeOutline()) return color != null ? color : "";
-        if (monthExist()) return "";
+        if (disabled) {
+          return "";
+        }
+        if (computeOutline()) {
+          return color != null ? color : "";
+        }
+        if (monthExist()) {
+          return "";
+        }
         return `${nDate()}-color-cover`;
       };
       const isCover = textColorOrCover().startsWith(nDate());
@@ -220,7 +252,9 @@ const __sfc__ = defineComponent({
     };
     const chooseMonth = (month, event) => {
       const buttonEl = event.currentTarget;
-      if (buttonEl.classList.contains(n("button--disabled"))) return;
+      if (buttonEl.classList.contains(n("button--disabled"))) {
+        return;
+      }
       emit("choose-month", month);
     };
     const checkDate = (checkType) => {

package/es/date-picker/src/panel-header.mjs

@@ -1,10 +1,10 @@
+import { computed, defineComponent, ref, watch } from "vue";
+import { toNumber } from "@varlet/shared";
 import VarButton from "../../button/index.mjs";
 import VarIcon from "../../icon/index.mjs";
-import { defineComponent, ref, computed, watch } from "vue";
-import { toNumber } from "@varlet/shared";
-import { createNamespace } from "../../utils/components.mjs";
 import { t } from "../../locale/index.mjs";
 import { injectLocaleProvider } from "../../locale-provider/provide.mjs";
+import { createNamespace } from "../../utils/components.mjs";
 const { n } = createNamespace("date-picker-header");
 import { resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, withCtx as _withCtx, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, Transition as _Transition, createElementVNode as _createElementVNode } from "vue";
 function __render__(_ctx, _cache) {
@@ -104,13 +104,19 @@ const __sfc__ = defineComponent({
       var _a;
       const { date, type } = props;
       const { previewMonth, previewYear } = date;
-      if (type === "year") return previewYear;
-      if (type === "month") return toNumber(previewYear) + forwardOrBackNum.value;
+      if (type === "year") {
+        return previewYear;
+      }
+      if (type === "month") {
+        return toNumber(previewYear) + forwardOrBackNum.value;
+      }
       const monthName = (_a = (pt || t)("datePickerMonthDict")) == null ? void 0 : _a[previewMonth].name;
       return (pt || t)("lang") === "zh-CN" ? `${previewYear} ${monthName}` : `${monthName} ${previewYear}`;
     });
     const checkDate = (checkType) => {
-      if (checkType === "prev" && props.disabled.left || checkType === "next" && props.disabled.right) return;
+      if (checkType === "prev" && props.disabled.left || checkType === "next" && props.disabled.right) {
+        return;
+      }
       emit("check-date", checkType);
       reverse.value = checkType === "prev";
       forwardOrBackNum.value += checkType === "prev" ? -1 : 1;