@varlet/ui 3.18.1 → 3.19.0

package/es/date-picker/DayPickerPanel.mjs

@@ -0,0 +1,318 @@
+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 { onSmartMounted } from "@varlet/use";
+import { computed, defineComponent, ref, watch } from "vue";
+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 { createDayjs } from "../utils/shared.mjs";
+import { DatePickerFormats, DatePickerUnits, ShiftDirections, WeekHeader } from "./constants.mjs";
+const dayjs = createDayjs();
+const DAYS_PER_WEEK = 7;
+const WEEKS_PER_PANEL = 6;
+const MonthOffset = {
+  Prev: -1,
+  Current: 0,
+  Next: 1
+};
+const { n } = createNamespace("day-picker");
+const { n: nDate } = createNamespace("date-picker");
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, createVNode as _createVNode, Transition as _Transition } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_button = _resolveComponent("var-button");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n())
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("content"))
+        },
+        [
+          _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, (cell, index) => {
+                        return _openBlock(), _createElementBlock("li", { key: index }, [
+                          _createVNode(_component_var_button, _mergeProps({
+                            type: "primary",
+                            "var-day-picker-cover": "",
+                            round: "",
+                            elevation: _ctx.panelProps.buttonElevation
+                          }, { ref_for: true }, __spreadValues({}, _ctx.buttonProps(cell)), {
+                            onClick: ($event) => _ctx.selectDay(cell)
+                          }), {
+                            default: _withCtx(() => [
+                              _createTextVNode(
+                                _toDisplayString(cell.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
+  },
+  props: {
+    selection: {
+      type: Object,
+      required: true
+    },
+    preview: {
+      type: Object,
+      required: true
+    },
+    current: {
+      type: String,
+      required: true
+    },
+    panelProps: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["choose-day"],
+  setup(props, { emit }) {
+    const [, , currentDay] = props.current.split("-");
+    const days = ref([]);
+    const reverse = ref(false);
+    const panelKey = ref(0);
+    const { t: pt } = injectLocaleProvider();
+    const previewIsSelectedMonth = computed(
+      () => props.selection.selectedYear === props.preview.previewYear && props.selection.selectedMonth === props.preview.previewMonth
+    );
+    const sortWeekList = computed(() => {
+      const index = WeekHeader.findIndex((week) => week === props.panelProps.firstDayOfWeek);
+      if (index === -1 || index === 0) {
+        return [...WeekHeader];
+      }
+      return [...WeekHeader.slice(index), ...WeekHeader.slice(0, index)];
+    });
+    function getDayAbbr(key) {
+      var _a, _b;
+      return (_b = (_a = (pt || t)("datePickerWeekDict")) == null ? void 0 : _a[key].abbr) != null ? _b : "";
+    }
+    function createCell(dayjsObject, monthOffset) {
+      return {
+        dateValue: dayjsObject.format(DatePickerFormats.Day),
+        day: dayjsObject.date(),
+        monthOffset
+      };
+    }
+    function initDays() {
+      const {
+        preview: { previewMonth, previewYear }
+      } = props;
+      const firstDayjsObject = dayjs(`${previewYear}-${previewMonth}-01`);
+      const lastDayjsObject = firstDayjsObject.endOf(DatePickerUnits.Month);
+      const daysInMonth = firstDayjsObject.daysInMonth();
+      const leadingCount = Math.max(
+        0,
+        sortWeekList.value.findIndex((week) => week === `${firstDayjsObject.day()}`)
+      );
+      const trailingCount = WEEKS_PER_PANEL * DAYS_PER_WEEK - leadingCount - daysInMonth;
+      const cells = [];
+      for (let offset = leadingCount; offset > 0; offset--) {
+        cells.push(createCell(firstDayjsObject.subtract(offset, DatePickerUnits.Day), MonthOffset.Prev));
+      }
+      for (let day = 1; day <= daysInMonth; day++) {
+        cells.push(createCell(firstDayjsObject.date(day), MonthOffset.Current));
+      }
+      for (let offset = 1; offset <= trailingCount; offset++) {
+        cells.push(createCell(lastDayjsObject.add(offset, DatePickerUnits.Day), MonthOffset.Next));
+      }
+      days.value = cells;
+    }
+    function isInRange(dateValue) {
+      const { min, max } = props.panelProps;
+      const isBeforeMax = max ? dayjs(dateValue).isSameOrBefore(dayjs(max), DatePickerUnits.Day) : true;
+      const isAfterMin = min ? dayjs(dateValue).isSameOrAfter(dayjs(min), DatePickerUnits.Day) : true;
+      return isBeforeMax && isAfterMin;
+    }
+    function getSelectedValue() {
+      const { selectedYear, selectedMonth, selectedDay } = props.selection;
+      return selectedYear && selectedMonth && selectedDay ? `${selectedYear}-${selectedMonth}-${selectedDay}` : void 0;
+    }
+    function isSingleSelectedDate(dateValue) {
+      const selectedDateValue = getSelectedValue();
+      return selectedDateValue ? dayjs(dateValue).isSame(dayjs(selectedDateValue), DatePickerUnits.Day) : false;
+    }
+    function isSelectedDate(dateValue) {
+      const {
+        selection: { selectedDays, selectedRangeDays },
+        panelProps: { range }
+      } = props;
+      if (!range) {
+        return selectedDays.includes(dateValue);
+      }
+      if (!selectedRangeDays.length) {
+        return false;
+      }
+      if (selectedRangeDays.length === 1) {
+        return dayjs(dateValue).isSame(dayjs(selectedRangeDays[0]), DatePickerUnits.Day);
+      }
+      const isBeforeMax = dayjs(dateValue).isSameOrBefore(dayjs(selectedRangeDays[1]), DatePickerUnits.Day);
+      const isAfterMin = dayjs(dateValue).isSameOrAfter(dayjs(selectedRangeDays[0]), DatePickerUnits.Day);
+      return isBeforeMax && isAfterMin;
+    }
+    function isDateDisabled(dateValue) {
+      const { allowedDates } = props.panelProps;
+      return !isInRange(dateValue) || (allowedDates ? !allowedDates(dateValue) : false);
+    }
+    function shouldShowOutline(dateValue, selected, disabled) {
+      const { multiple, range, showCurrent } = props.panelProps;
+      const current = showCurrent && dayjs(dateValue).isSame(dayjs(props.current), DatePickerUnits.Day);
+      if (!current) {
+        return false;
+      }
+      if ((range || multiple || previewIsSelectedMonth.value) && disabled) {
+        return true;
+      }
+      if (range || multiple) {
+        return !selected;
+      }
+      return previewIsSelectedMonth.value ? props.selection.selectedDay !== currentDay : true;
+    }
+    function buttonProps(cell) {
+      const {
+        panelProps: { color, multiple, range }
+      } = props;
+      const { dateValue, monthOffset } = cell;
+      const isCurrentMonth = monthOffset === MonthOffset.Current;
+      const singleSelected = isSingleSelectedDate(dateValue);
+      const selected = range || multiple ? isSelectedDate(dateValue) : singleSelected;
+      const disabled = isDateDisabled(dateValue);
+      const text = disabled || (range || multiple ? !selected : !singleSelected);
+      const outline = shouldShowOutline(dateValue, selected, disabled);
+      const cover = !disabled && !outline && !selected;
+      const textColor = !disabled && outline ? color != null ? color : "" : "";
+      return {
+        text,
+        outline,
+        textColor,
+        [`${nDate()}-color-cover`]: cover,
+        class: [n("button"), { [n("button--usable")]: isCurrentMonth, [n("button--adjacent")]: !isCurrentMonth }],
+        disabled
+      };
+    }
+    function shiftPreview(direction) {
+      reverse.value = direction === ShiftDirections.Prev;
+      panelKey.value += direction === ShiftDirections.Prev ? -1 : 1;
+    }
+    function shiftYearPreview(direction) {
+      reverse.value = direction === ShiftDirections.Prev;
+      panelKey.value += direction === ShiftDirections.Prev ? -1 : 1;
+    }
+    function selectDay(cell) {
+      emit("choose-day", cell.day, cell.monthOffset);
+    }
+    onSmartMounted(() => {
+      initDays();
+    });
+    watch(
+      () => props.preview,
+      () => {
+        initDays();
+      }
+    );
+    return {
+      n,
+      nDate,
+      days,
+      reverse,
+      panelKey,
+      sortWeekList,
+      shiftPreview,
+      shiftYearPreview,
+      getDayAbbr,
+      selectDay,
+      buttonProps
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/date-picker/MonthPickerPanel.mjs

@@ -0,0 +1,187 @@
+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 } from "vue";
+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 { createDayjs } from "../utils/shared.mjs";
+import { DatePickerTypes, DatePickerUnits, MonthList, ShiftDirections } from "./constants.mjs";
+const dayjs = createDayjs();
+const { n } = createNamespace("month-picker");
+const { n: nDate } = createNamespace("date-picker");
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, createVNode as _createVNode, Transition as _Transition, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_button = _resolveComponent("var-button");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n())
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("content"))
+        },
+        [
+          _createVNode(_Transition, {
+            name: `${_ctx.nDate()}${_ctx.reverse ? "-reverse" : ""}-translatex`
+          }, {
+            default: _withCtx(() => [
+              (_openBlock(), _createElementBlock("ul", { key: _ctx.panelKey }, [
+                (_openBlock(true), _createElementBlock(
+                  _Fragment,
+                  null,
+                  _renderList(_ctx.MonthList, (month) => {
+                    return _openBlock(), _createElementBlock("li", { key: month }, [
+                      _createVNode(_component_var_button, _mergeProps({
+                        type: "primary",
+                        "var-month-picker-cover": "",
+                        elevation: _ctx.panelProps.buttonElevation
+                      }, { ref_for: true }, __spreadValues({}, _ctx.buttonProps(month)), {
+                        onClick: ($event) => _ctx.selectMonth(month)
+                      }), {
+                        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
+  },
+  props: {
+    preview: {
+      type: Object,
+      required: true
+    },
+    selection: {
+      type: Object,
+      required: true
+    },
+    panelProps: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["choose-month"],
+  setup(props, { emit }) {
+    const reverse = ref(false);
+    const panelKey = ref(0);
+    const { t: pt } = injectLocaleProvider();
+    function getMonthAbbr(key) {
+      var _a, _b;
+      return (_b = (_a = (pt || t)("datePickerMonthDict")) == null ? void 0 : _a[key].abbr) != null ? _b : "";
+    }
+    function isInRange(month) {
+      const {
+        preview: { previewYear },
+        panelProps: { min, max }
+      } = props;
+      const monthValue = `${previewYear}-${month}`;
+      const isBeforeMax = max ? dayjs(monthValue).isSameOrBefore(dayjs(max), DatePickerUnits.Month) : true;
+      const isAfterMin = min ? dayjs(monthValue).isSameOrAfter(dayjs(min), DatePickerUnits.Month) : true;
+      return isBeforeMax && isAfterMin;
+    }
+    function isSelectedMonth(monthValue, month) {
+      const {
+        preview: { previewYear },
+        selection: { selectedMonth, selectedYear, selectedMonths, selectedRangeMonths },
+        panelProps: { multiple, range }
+      } = props;
+      if (range) {
+        if (!selectedRangeMonths.length) {
+          return false;
+        }
+        if (selectedRangeMonths.length === 1) {
+          return dayjs(monthValue).isSame(dayjs(selectedRangeMonths[0]), DatePickerUnits.Month);
+        }
+        const isBeforeMax = dayjs(monthValue).isSameOrBefore(dayjs(selectedRangeMonths[1]), DatePickerUnits.Month);
+        const isAfterMin = dayjs(monthValue).isSameOrAfter(dayjs(selectedRangeMonths[0]), DatePickerUnits.Month);
+        return isBeforeMax && isAfterMin;
+      }
+      return multiple ? selectedMonths.includes(monthValue) : selectedYear === previewYear && selectedMonth === month;
+    }
+    function buttonProps(month) {
+      const {
+        preview: { previewYear },
+        panelProps: { allowedDates, color, type: pickerType }
+      } = props;
+      const monthValue = `${previewYear}-${month}`;
+      const active = isSelectedMonth(monthValue, month);
+      const disabled = !isInRange(month) || (pickerType === DatePickerTypes.Month && allowedDates ? !allowedDates(monthValue) : false);
+      return {
+        outline: false,
+        text: disabled || !active,
+        color: active && !disabled ? color : "",
+        textColor: "",
+        [`${nDate()}-color-cover`]: !active && !disabled,
+        class: n("button"),
+        disabled
+      };
+    }
+    function selectMonth(month) {
+      emit("choose-month", month);
+    }
+    function shiftPreview(direction) {
+      reverse.value = direction === ShiftDirections.Prev;
+      panelKey.value += direction === ShiftDirections.Prev ? -1 : 1;
+    }
+    return {
+      n,
+      nDate,
+      MonthList,
+      reverse,
+      panelKey,
+      shiftPreview,
+      buttonProps,
+      getMonthAbbr,
+      selectMonth
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};