@varlet/ui 3.5.1 → 3.5.2

package/es/date-picker/props.mjs

@@ -0,0 +1,47 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const MONTH_LIST = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
+const WEEK_HEADER = ["0", "1", "2", "3", "4", "5", "6"];
+const props = {
+  modelValue: [String, Array],
+  type: {
+    type: String,
+    default: "date"
+  },
+  hint: String,
+  allowedDates: Function,
+  color: String,
+  titleColor: String,
+  elevation: {
+    type: [Boolean, Number, String],
+    default: false
+  },
+  buttonElevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
+  firstDayOfWeek: {
+    type: [String, Number],
+    default: 0
+  },
+  min: String,
+  max: String,
+  showCurrent: {
+    type: Boolean,
+    default: true
+  },
+  readonly: Boolean,
+  multiple: Boolean,
+  range: Boolean,
+  touchable: {
+    type: Boolean,
+    default: true
+  },
+  onPreview: defineListenerProp(),
+  onChange: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+};
+export {
+  MONTH_LIST,
+  WEEK_HEADER,
+  props
+};

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

@@ -0,0 +1,353 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  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 {
+  defineComponent,
+  ref,
+  computed,
+  watch,
+  reactive
+} 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 { injectLocaleProvider } from "../../locale-provider/provide.mjs";
+dayjs.extend(isSameOrBefore);
+dayjs.extend(isSameOrAfter);
+const { n, classes } = createNamespace("day-picker");
+const { n: nDate } = createNamespace("date-picker");
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, Transition as _Transition } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_panel_header = _resolveComponent("panel-header");
+  const _component_var_button = _resolveComponent("var-button");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n())
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("content"))
+        },
+        [
+          _createVNode(_component_panel_header, {
+            ref: "headerEl",
+            type: "day",
+            date: _ctx.preview,
+            disabled: _ctx.panelBtnDisabled,
+            onCheckPanel: _ctx.clickMonth,
+            onCheckDate: _ctx.checkDate
+          }, null, 8, ["date", "disabled", "onCheckPanel", "onCheckDate"]),
+          _createVNode(_Transition, {
+            name: `${_ctx.nDate()}${_ctx.reverse ? "-reverse" : ""}-translatex`
+          }, {
+            default: _withCtx(() => [
+              (_openBlock(), _createElementBlock("div", { key: _ctx.panelKey }, [
+                _createElementVNode(
+                  "ul",
+                  {
+                    class: _normalizeClass(_ctx.n("head"))
+                  },
+                  [
+                    (_openBlock(true), _createElementBlock(
+                      _Fragment,
+                      null,
+                      _renderList(_ctx.sortWeekList, (week) => {
+                        return _openBlock(), _createElementBlock(
+                          "li",
+                          { key: week },
+                          _toDisplayString(_ctx.getDayAbbr(week)),
+                          1
+                          /* TEXT */
+                        );
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ],
+                  2
+                  /* CLASS */
+                ),
+                _createElementVNode(
+                  "ul",
+                  {
+                    class: _normalizeClass(_ctx.n("body"))
+                  },
+                  [
+                    (_openBlock(true), _createElementBlock(
+                      _Fragment,
+                      null,
+                      _renderList(_ctx.days, (day, index) => {
+                        return _openBlock(), _createElementBlock("li", { key: index }, [
+                          _createVNode(_component_var_button, _mergeProps({
+                            type: "primary",
+                            "var-day-picker-cover": "",
+                            round: "",
+                            ripple: false,
+                            elevation: _ctx.componentProps.buttonElevation,
+                            ref_for: true
+                          }, __spreadValues({}, _ctx.buttonProps(day)), {
+                            onClick: (event) => _ctx.chooseDay(day, event)
+                          }), {
+                            default: _withCtx(() => [
+                              _createTextVNode(
+                                _toDisplayString(_ctx.filterDay(day)),
+                                1
+                                /* TEXT */
+                              )
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1040, ["elevation", "onClick"])
+                        ]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ],
+                  2
+                  /* CLASS */
+                )
+              ]))
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["name"])
+        ],
+        2
+        /* CLASS */
+      )
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name: "DayPickerPanel",
+  components: {
+    VarButton,
+    PanelHeader
+  },
+  props: {
+    choose: {
+      type: Object,
+      required: true
+    },
+    preview: {
+      type: Object,
+      required: true
+    },
+    current: {
+      type: String,
+      required: true
+    },
+    clickMonth: {
+      type: Function,
+      required: true
+    },
+    componentProps: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["check-preview", "choose-day"],
+  setup(props, { emit }) {
+    const [currentYear, currentMonth, currentDay] = props.current.split("-");
+    const days = ref([]);
+    const reverse = ref(false);
+    const panelKey = ref(0);
+    const headerEl = ref(null);
+    const panelBtnDisabled = reactive({
+      left: false,
+      right: false
+    });
+    const { t: pt } = injectLocaleProvider();
+    const isCurrent = computed(
+      () => props.preview.previewYear === currentYear && props.preview.previewMonth === currentMonth
+    );
+    const isSame = computed(
+      () => props.choose.chooseYear === props.preview.previewYear && props.choose.chooseMonth === props.preview.previewMonth
+    );
+    const sortWeekList = computed(() => {
+      const index = WEEK_HEADER.findIndex((week) => week === props.componentProps.firstDayOfWeek);
+      if (index === -1 || index === 0) {
+        return WEEK_HEADER;
+      }
+      return [...WEEK_HEADER.slice(index), ...WEEK_HEADER.slice(0, index)];
+    });
+    const getDayAbbr = (key) => {
+      var _a, _b;
+      return (_b = (_a = (pt || t)("datePickerWeekDict")) == null ? void 0 : _a[key].abbr) != null ? _b : "";
+    };
+    const filterDay = (day) => day > 0 ? day : "";
+    const initDate = () => {
+      const {
+        preview: { previewMonth, previewYear }
+      } = props;
+      const monthNum = dayjs(`${previewYear}-${previewMonth}`).daysInMonth();
+      const firstDayToWeek = dayjs(`${previewYear}-${previewMonth}-01`).day();
+      const index = sortWeekList.value.findIndex((week) => week === `${firstDayToWeek}`);
+      days.value = [...Array(index).fill(-1), ...Array.from(Array(monthNum + 1).keys())].filter((value) => value);
+    };
+    const initHeader = () => {
+      const {
+        preview: { previewYear, previewMonth },
+        componentProps: { max, min }
+      } = props;
+      if (max) {
+        const date = `${previewYear}-${toNumber(previewMonth) + 1}`;
+        panelBtnDisabled.right = !dayjs(date).isSameOrBefore(dayjs(max), "month");
+      }
+      if (min) {
+        const date = `${previewYear}-${toNumber(previewMonth) - 1}`;
+        panelBtnDisabled.left = !dayjs(date).isSameOrAfter(dayjs(min), "month");
+      }
+    };
+    const inRange = (day) => {
+      const {
+        preview: { previewYear, previewMonth },
+        componentProps: { min, max }
+      } = props;
+      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");
+      return isBeforeMax && isAfterMin;
+    };
+    const shouldChoose = (val) => {
+      const {
+        choose: { chooseDays, chooseRangeDay },
+        componentProps: { range }
+      } = props;
+      if (range) {
+        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;
+      }
+      return chooseDays.includes(val);
+    };
+    const buttonProps = (day) => {
+      if (day < 0) {
+        return {
+          text: true,
+          outline: false,
+          textColor: "",
+          class: n("button"),
+          disabled: true
+        };
+      }
+      const {
+        choose: { chooseDay: chooseDay2 },
+        preview: { previewYear, previewMonth },
+        componentProps: { allowedDates, color, multiple, range }
+      } = props;
+      const val = `${previewYear}-${previewMonth}-${day}`;
+      const dayExist = () => {
+        if (range || multiple) return shouldChoose(val);
+        return toNumber(chooseDay2) === day && isSame.value;
+      };
+      const computeDisabled = () => {
+        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);
+        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;
+        return true;
+      };
+      const textColorOrCover = () => {
+        if (disabled) return "";
+        if (computeOutline()) return color != null ? color : "";
+        if (dayExist()) return "";
+        return `${nDate()}-color-cover`;
+      };
+      const isCover = textColorOrCover().startsWith(nDate());
+      return {
+        text: computeText(),
+        outline: computeOutline(),
+        textColor: isCover ? "" : textColorOrCover(),
+        [`${nDate()}-color-cover`]: isCover,
+        class: classes(n("button"), n("button--usable"), [disabled, n("button--disabled")]),
+        disabled
+      };
+    };
+    const checkDate = (checkType) => {
+      reverse.value = checkType === "prev";
+      panelKey.value += checkType === "prev" ? -1 : 1;
+      emit("check-preview", "month", checkType);
+    };
+    const chooseDay = (day, event) => {
+      const buttonEl = event.currentTarget;
+      if (buttonEl.classList.contains(n("button--disabled"))) return;
+      emit("choose-day", day);
+    };
+    const forwardRef = (checkType) => {
+      headerEl.value.checkDate(checkType);
+    };
+    onSmartMounted(() => {
+      initDate();
+      initHeader();
+    });
+    watch(
+      () => props.preview,
+      () => {
+        initDate();
+        initHeader();
+      }
+    );
+    return {
+      n,
+      nDate,
+      days,
+      reverse,
+      headerEl,
+      panelKey,
+      sortWeekList,
+      panelBtnDisabled,
+      forwardRef,
+      filterDay,
+      getDayAbbr,
+      checkDate,
+      chooseDay,
+      buttonProps
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

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

@@ -0,0 +1,266 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { defineComponent, ref, computed, reactive, watch } from "vue";
+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 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";
+dayjs.extend(isSameOrBefore);
+dayjs.extend(isSameOrAfter);
+const { n, classes } = createNamespace("month-picker");
+const { n: nDate } = createNamespace("date-picker");
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, Transition as _Transition, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_panel_header = _resolveComponent("panel-header");
+  const _component_var_button = _resolveComponent("var-button");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n())
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("content"))
+        },
+        [
+          _createVNode(_component_panel_header, {
+            ref: "headerEl",
+            type: "month",
+            date: _ctx.preview,
+            disabled: _ctx.panelBtnDisabled,
+            onCheckPanel: _ctx.clickYear,
+            onCheckDate: _ctx.checkDate
+          }, null, 8, ["date", "disabled", "onCheckPanel", "onCheckDate"]),
+          _createVNode(_Transition, {
+            name: `${_ctx.nDate()}${_ctx.reverse ? "-reverse" : ""}-translatex`
+          }, {
+            default: _withCtx(() => [
+              (_openBlock(), _createElementBlock("ul", { key: _ctx.panelKey }, [
+                (_openBlock(true), _createElementBlock(
+                  _Fragment,
+                  null,
+                  _renderList(_ctx.MONTH_LIST, (month) => {
+                    return _openBlock(), _createElementBlock("li", { key: month }, [
+                      _createVNode(_component_var_button, _mergeProps({
+                        type: "primary",
+                        "var-month-picker-cover": "",
+                        ripple: false,
+                        elevation: _ctx.componentProps.buttonElevation,
+                        ref_for: true
+                      }, __spreadValues({}, _ctx.buttonProps(month)), {
+                        onClick: (event) => _ctx.chooseMonth(month, event)
+                      }), {
+                        default: _withCtx(() => [
+                          _createTextVNode(
+                            _toDisplayString(_ctx.getMonthAbbr(month)),
+                            1
+                            /* TEXT */
+                          )
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      }, 1040, ["elevation", "onClick"])
+                    ]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ]))
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["name"])
+        ],
+        2
+        /* CLASS */
+      )
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name: "MonthPickerPanel",
+  components: {
+    VarButton,
+    PanelHeader
+  },
+  props: {
+    choose: {
+      type: Object,
+      required: true
+    },
+    preview: {
+      type: Object,
+      required: true
+    },
+    current: {
+      type: String,
+      required: true
+    },
+    clickYear: {
+      type: Function,
+      required: true
+    },
+    componentProps: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["check-preview", "choose-month"],
+  setup(props, { emit }) {
+    const [currentYear, currentMonth] = props.current.split("-");
+    const reverse = ref(false);
+    const panelKey = ref(0);
+    const headerEl = ref(null);
+    const panelBtnDisabled = reactive({
+      left: false,
+      right: false
+    });
+    const { t: pt } = injectLocaleProvider();
+    const isSameYear = computed(() => props.choose.chooseYear === props.preview.previewYear);
+    const isCurrentYear = computed(() => props.preview.previewYear === currentYear);
+    const getMonthAbbr = (key) => {
+      var _a, _b;
+      return (_b = (_a = (pt || t)("datePickerMonthDict")) == null ? void 0 : _a[key].abbr) != null ? _b : "";
+    };
+    const inRange = (key) => {
+      const {
+        preview: { previewYear },
+        componentProps: { min, max }
+      } = props;
+      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");
+      return isBeforeMax && isAfterMin;
+    };
+    const shouldChoose = (val) => {
+      const {
+        choose: { chooseMonths, chooseDays, chooseRangeMonth },
+        componentProps: { type, range }
+      } = props;
+      if (range) {
+        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);
+      return chooseDays.some((value) => value.includes(val));
+    };
+    const buttonProps = (key) => {
+      const {
+        choose: { chooseMonth: chooseMonth2 },
+        preview: { previewYear },
+        componentProps: { allowedDates, color, multiple, range }
+      } = props;
+      const val = `${previewYear}-${key}`;
+      const monthExist = () => {
+        if (range || multiple) return shouldChoose(val);
+        return chooseMonth2 === key && isSameYear.value;
+      };
+      const computeDisabled = () => {
+        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);
+        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;
+        return true;
+      };
+      const textColorOrCover = () => {
+        if (disabled) return "";
+        if (computeOutline()) return color != null ? color : "";
+        if (monthExist()) return "";
+        return `${nDate()}-color-cover`;
+      };
+      const isCover = textColorOrCover().startsWith(nDate());
+      return {
+        outline: computeOutline(),
+        text: computeText(),
+        color: !computeText() ? color : "",
+        textColor: isCover ? "" : textColorOrCover(),
+        [`${nDate()}-color-cover`]: isCover,
+        class: classes(n("button"), [disabled, n("button--disabled")]),
+        disabled
+      };
+    };
+    const chooseMonth = (month, event) => {
+      const buttonEl = event.currentTarget;
+      if (buttonEl.classList.contains(n("button--disabled"))) return;
+      emit("choose-month", month);
+    };
+    const checkDate = (checkType) => {
+      reverse.value = checkType === "prev";
+      panelKey.value += checkType === "prev" ? -1 : 1;
+      emit("check-preview", "year", checkType);
+    };
+    const forwardRef = (checkType) => {
+      headerEl.value.checkDate(checkType);
+    };
+    watch(
+      () => props.preview.previewYear,
+      (year) => {
+        const {
+          componentProps: { min, max }
+        } = props;
+        if (max) panelBtnDisabled.right = !dayjs(`${toNumber(year) + 1}`).isSameOrBefore(dayjs(max), "year");
+        if (min) panelBtnDisabled.left = !dayjs(`${toNumber(year) - 1}`).isSameOrAfter(dayjs(min), "year");
+      },
+      { immediate: true }
+    );
+    return {
+      n,
+      nDate,
+      t,
+      MONTH_LIST,
+      headerEl,
+      reverse,
+      panelKey,
+      panelBtnDisabled,
+      forwardRef,
+      buttonProps,
+      getMonthAbbr,
+      chooseMonth,
+      checkDate
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};