@varlet/ui 3.18.1 → 3.19.0

package/es/date-picker/PanelHeader.mjs

@@ -0,0 +1,332 @@
+import { defineComponent } from "vue";
+import VarButton from "../button/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import { t } from "../locale/index.mjs";
+import { injectLocaleProvider } from "../locale-provider/provide.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { DatePickerTypes, DatePickerUnits, ShiftDirections } from "./constants.mjs";
+const { n } = createNamespace("date-picker-header");
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, withCtx as _withCtx, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_button = _resolveComponent("var-button");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass([_ctx.n(), _ctx.n(`--${_ctx.type}`)])
+    },
+    [
+      _ctx.type === _ctx.DatePickerUnits.Day ? (_openBlock(), _createElementBlock(
+        _Fragment,
+        { key: 0 },
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("nav"))
+            },
+            [
+              _createVNode(_component_var_button, {
+                class: _normalizeClass(_ctx.n("arrow")),
+                "var-date-picker-header-cover": "",
+                round: "",
+                text: "",
+                onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("shift-year-preview", _ctx.ShiftDirections.Prev))
+              }, {
+                default: _withCtx(() => [
+                  _createVNode(_component_var_icon, { name: "chevron-left" })
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"]),
+              _createVNode(_component_var_button, {
+                class: _normalizeClass([_ctx.n("text-button"), _ctx.n("year")]),
+                "var-date-picker-header-cover": "",
+                text: "",
+                onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("open-year-panel"))
+              }, {
+                default: _withCtx(() => [
+                  _createElementVNode(
+                    "span",
+                    {
+                      class: _normalizeClass(_ctx.n("year-value"))
+                    },
+                    [
+                      _createTextVNode(
+                        _toDisplayString(_ctx.date.previewYear) + " ",
+                        1
+                        /* TEXT */
+                      ),
+                      _createVNode(_component_var_icon, {
+                        class: _normalizeClass(_ctx.n("text-button-icon")),
+                        name: "chevron-down"
+                      }, null, 8, ["class"])
+                    ],
+                    2
+                    /* CLASS */
+                  )
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"]),
+              _createVNode(_component_var_button, {
+                class: _normalizeClass(_ctx.n("arrow")),
+                "var-date-picker-header-cover": "",
+                round: "",
+                text: "",
+                onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("shift-year-preview", _ctx.ShiftDirections.Next))
+              }, {
+                default: _withCtx(() => [
+                  _createVNode(_component_var_icon, { name: "chevron-right" })
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"])
+            ],
+            2
+            /* CLASS */
+          ),
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass([_ctx.n("nav"), _ctx.n("nav--month")])
+            },
+            [
+              _createVNode(_component_var_button, {
+                class: _normalizeClass(_ctx.n("arrow")),
+                "var-date-picker-header-cover": "",
+                round: "",
+                text: "",
+                onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("shift-preview", _ctx.ShiftDirections.Prev))
+              }, {
+                default: _withCtx(() => [
+                  _createVNode(_component_var_icon, { name: "chevron-left" })
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"]),
+              _createVNode(_component_var_button, {
+                class: _normalizeClass([_ctx.n("text-button"), _ctx.n("month")]),
+                "var-date-picker-header-cover": "",
+                text: "",
+                onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("open-month-panel"))
+              }, {
+                default: _withCtx(() => [
+                  _createTextVNode(
+                    _toDisplayString(_ctx.getMonthName()) + " ",
+                    1
+                    /* TEXT */
+                  ),
+                  _createVNode(_component_var_icon, {
+                    class: _normalizeClass(_ctx.n("text-button-icon")),
+                    name: "chevron-down"
+                  }, null, 8, ["class"])
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"]),
+              _createVNode(_component_var_button, {
+                class: _normalizeClass(_ctx.n("arrow")),
+                "var-date-picker-header-cover": "",
+                round: "",
+                text: "",
+                onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("shift-preview", _ctx.ShiftDirections.Next))
+              }, {
+                default: _withCtx(() => [
+                  _createVNode(_component_var_icon, { name: "chevron-right" })
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"])
+            ],
+            2
+            /* CLASS */
+          )
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      )) : _ctx.type === _ctx.DatePickerTypes.Month && !_ctx.showPanelToggle ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 1,
+          class: _normalizeClass(_ctx.n("nav"))
+        },
+        [
+          _createVNode(_component_var_button, {
+            class: _normalizeClass(_ctx.n("arrow")),
+            "var-date-picker-header-cover": "",
+            round: "",
+            text: "",
+            onClick: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("shift-preview", _ctx.ShiftDirections.Prev))
+          }, {
+            default: _withCtx(() => [
+              _createVNode(_component_var_icon, { name: "chevron-left" })
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["class"]),
+          _createVNode(_component_var_button, {
+            class: _normalizeClass([_ctx.n("text-button"), _ctx.n("year")]),
+            "var-date-picker-header-cover": "",
+            text: "",
+            onClick: _cache[7] || (_cache[7] = ($event) => _ctx.$emit("open-year-panel"))
+          }, {
+            default: _withCtx(() => [
+              _createElementVNode(
+                "span",
+                {
+                  class: _normalizeClass(_ctx.n("year-value"))
+                },
+                [
+                  _createTextVNode(
+                    _toDisplayString(_ctx.date.previewYear) + " ",
+                    1
+                    /* TEXT */
+                  ),
+                  _createVNode(_component_var_icon, {
+                    class: _normalizeClass(_ctx.n("text-button-icon")),
+                    name: "chevron-down"
+                  }, null, 8, ["class"])
+                ],
+                2
+                /* CLASS */
+              )
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["class"]),
+          _createVNode(_component_var_button, {
+            class: _normalizeClass(_ctx.n("arrow")),
+            "var-date-picker-header-cover": "",
+            round: "",
+            text: "",
+            onClick: _cache[8] || (_cache[8] = ($event) => _ctx.$emit("shift-preview", _ctx.ShiftDirections.Next))
+          }, {
+            default: _withCtx(() => [
+              _createVNode(_component_var_icon, { name: "chevron-right" })
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["class"])
+        ],
+        2
+        /* CLASS */
+      )) : (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 2,
+          class: _normalizeClass([_ctx.n("nav"), _ctx.n(`nav--${_ctx.type}`)])
+        },
+        [
+          _createVNode(_component_var_button, {
+            class: _normalizeClass(_ctx.n("arrow")),
+            "var-date-picker-header-cover": "",
+            round: "",
+            text: "",
+            onClick: _cache[9] || (_cache[9] = ($event) => _ctx.$emit("shift-preview", _ctx.ShiftDirections.Prev))
+          }, {
+            default: _withCtx(() => [
+              _createVNode(_component_var_icon, { name: "chevron-left" })
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["class"]),
+          _ctx.showPanelToggle ? (_openBlock(), _createBlock(_component_var_button, {
+            key: 0,
+            class: _normalizeClass([_ctx.n("text-button"), _ctx.n("panel-label")]),
+            "var-date-picker-header-cover": "",
+            text: "",
+            onClick: _cache[10] || (_cache[10] = ($event) => _ctx.$emit("open-date-panel"))
+          }, {
+            default: _withCtx(() => [
+              _createTextVNode(
+                _toDisplayString(_ctx.getPanelLabel()) + " ",
+                1
+                /* TEXT */
+              ),
+              _createVNode(_component_var_icon, {
+                class: _normalizeClass(_ctx.n("text-button-icon")),
+                name: "chevron-up"
+              }, null, 8, ["class"])
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["class"])) : (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 1,
+              class: _normalizeClass([_ctx.n("text-button"), _ctx.n("panel-label")]),
+              "var-date-picker-header-cover": ""
+            },
+            _toDisplayString(_ctx.getPanelLabel()),
+            3
+            /* TEXT, CLASS */
+          )),
+          _createVNode(_component_var_button, {
+            class: _normalizeClass(_ctx.n("arrow")),
+            "var-date-picker-header-cover": "",
+            round: "",
+            text: "",
+            onClick: _cache[11] || (_cache[11] = ($event) => _ctx.$emit("shift-preview", _ctx.ShiftDirections.Next))
+          }, {
+            default: _withCtx(() => [
+              _createVNode(_component_var_icon, { name: "chevron-right" })
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["class"])
+        ],
+        2
+        /* CLASS */
+      ))
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name: "PanelHeader",
+  components: {
+    VarButton,
+    VarIcon
+  },
+  props: {
+    date: {
+      type: Object,
+      required: true
+    },
+    type: {
+      type: String,
+      default: DatePickerTypes.Date
+    },
+    showPanelToggle: Boolean
+  },
+  emits: ["open-date-panel", "open-year-panel", "open-month-panel", "shift-year-preview", "shift-preview"],
+  setup(props) {
+    const { t: pt } = injectLocaleProvider();
+    function getMonthName() {
+      var _a, _b, _c;
+      const month = (_a = (pt || t)("datePickerMonthDict")) == null ? void 0 : _a[props.date.previewMonth];
+      return (pt || t)("lang") === "zh-CN" ? (_b = month == null ? void 0 : month.name) != null ? _b : "" : (_c = month == null ? void 0 : month.abbr) != null ? _c : "";
+    }
+    function getPanelLabel() {
+      if (props.type === DatePickerTypes.Month && props.showPanelToggle) {
+        return getMonthName();
+      }
+      return props.date.previewYear;
+    }
+    return {
+      n,
+      DatePickerTypes,
+      DatePickerUnits,
+      ShiftDirections,
+      getMonthName,
+      getPanelLabel
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/date-picker/YearPickerPanel.mjs

@@ -0,0 +1,199 @@
+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 { times, toNumber } from "@varlet/shared";
+import { onSmartMounted } from "@varlet/use";
+import { computed, defineComponent, ref, watch } from "vue";
+import VarButton from "../button/index.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { createDayjs } from "../utils/shared.mjs";
+import { DatePickerTypes, DatePickerUnits, ShiftDirections } from "./constants.mjs";
+const dayjs = createDayjs();
+const { n } = createNamespace("year-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, normalizeClass as _normalizeClass, Transition as _Transition } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_button = _resolveComponent("var-button");
+  return _openBlock(), _createElementBlock("div", null, [
+    _createVNode(_Transition, {
+      name: `${_ctx.nDate()}${_ctx.reverse ? "-reverse" : ""}-translatex`
+    }, {
+      default: _withCtx(() => [
+        (_openBlock(), _createElementBlock(
+          "ul",
+          {
+            ref: "panel",
+            key: _ctx.panelKey,
+            class: _normalizeClass(_ctx.n())
+          },
+          [
+            (_openBlock(true), _createElementBlock(
+              _Fragment,
+              null,
+              _renderList(_ctx.yearList, (year) => {
+                return _openBlock(), _createElementBlock("li", { key: year }, [
+                  _createVNode(_component_var_button, _mergeProps({
+                    type: "primary",
+                    "var-year-picker-cover": "",
+                    elevation: _ctx.panelProps.buttonElevation
+                  }, { ref_for: true }, __spreadValues({}, _ctx.buttonProps(`${year}`)), {
+                    onClick: ($event) => _ctx.selectYear(year)
+                  }), {
+                    default: _withCtx(() => [
+                      _createTextVNode(
+                        _toDisplayString(year),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1040, ["elevation", "onClick"])
+                ]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ],
+          2
+          /* CLASS */
+        ))
+      ]),
+      _: 1
+      /* STABLE */
+    }, 8, ["name"])
+  ]);
+}
+const __sfc__ = defineComponent({
+  name: "YearPickerPanel",
+  components: {
+    VarButton
+  },
+  props: {
+    preview: {
+      type: String
+    },
+    selection: {
+      type: Object,
+      required: true
+    },
+    panelProps: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["choose-year"],
+  setup(props, { emit }) {
+    const panel = ref();
+    const reverse = ref(false);
+    const panelKey = ref(0);
+    const page = ref(0);
+    const yearList = computed(() => {
+      if (!props.preview) {
+        return [];
+      }
+      const startYear = Math.floor(toNumber(props.preview) / 100 + page.value) * 100;
+      return times(100, (index) => Math.max(0, startYear) + index);
+    });
+    function isInRange(year) {
+      const {
+        panelProps: { min, max }
+      } = props;
+      const isBeforeMax = max ? dayjs(year).isSameOrBefore(dayjs(max), DatePickerUnits.Year) : true;
+      const isAfterMin = min ? dayjs(year).isSameOrAfter(dayjs(min), DatePickerUnits.Year) : true;
+      return isBeforeMax && isAfterMin;
+    }
+    function isSelectedYear(year) {
+      const {
+        selection: { selectedYear, selectedYears, selectedRangeYears },
+        panelProps: { multiple, range }
+      } = props;
+      if (range) {
+        if (!selectedRangeYears.length) {
+          return false;
+        }
+        if (selectedRangeYears.length === 1) {
+          return dayjs(year).isSame(dayjs(selectedRangeYears[0]), DatePickerUnits.Year);
+        }
+        const isBeforeMax = dayjs(year).isSameOrBefore(dayjs(selectedRangeYears[1]), DatePickerUnits.Year);
+        const isAfterMin = dayjs(year).isSameOrAfter(dayjs(selectedRangeYears[0]), DatePickerUnits.Year);
+        return isBeforeMax && isAfterMin;
+      }
+      return multiple ? selectedYears.includes(year) : selectedYear === year;
+    }
+    function buttonProps(year) {
+      const {
+        panelProps: { allowedDates, color, type: pickerType }
+      } = props;
+      const active = isSelectedYear(year);
+      const disabled = !isInRange(year) || (pickerType === DatePickerTypes.Year && allowedDates ? !allowedDates(year) : false);
+      return {
+        outline: false,
+        text: disabled || !active,
+        color: active && !disabled ? color : "",
+        textColor: "",
+        [`${nDate()}-color-cover`]: !active && !disabled,
+        class: n("button"),
+        disabled
+      };
+    }
+    function selectYear(year) {
+      emit("choose-year", year);
+    }
+    function scrollToView() {
+      const activeEl = panel.value.querySelector(".var-button--primary");
+      const scrollContainer = panel.value.closest(`.${nDate("body")}`);
+      if (!activeEl || !scrollContainer) {
+        return;
+      }
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const activeRect = activeEl.getBoundingClientRect();
+      scrollContainer.scrollTop += activeRect.top - containerRect.top - (scrollContainer.clientHeight - activeRect.height) / 2;
+    }
+    function shiftPreview(direction) {
+      const isPrevType = direction === ShiftDirections.Prev;
+      if (isPrevType && yearList.value[0] <= 0) {
+        return;
+      }
+      reverse.value = isPrevType;
+      panelKey.value += isPrevType ? -1 : 1;
+      page.value += isPrevType ? -1 : 1;
+    }
+    onSmartMounted(scrollToView);
+    watch(
+      () => props.preview,
+      () => {
+        page.value = 0;
+      }
+    );
+    return {
+      n,
+      buttonProps,
+      panel,
+      yearList,
+      reverse,
+      panelKey,
+      nDate,
+      selectYear,
+      shiftPreview
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/date-picker/constants.mjs

@@ -0,0 +1,31 @@
+import { enumOf } from "@varlet/shared";
+const DatePickerTypes = enumOf({
+  Year: "year",
+  Month: "month",
+  Date: "date"
+});
+const DatePickerUnits = enumOf({
+  Year: DatePickerTypes.Year,
+  Month: DatePickerTypes.Month,
+  Day: "day"
+});
+const MonthList = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
+const WeekHeader = ["0", "1", "2", "3", "4", "5", "6"];
+const DatePickerFormats = {
+  Year: "YYYY",
+  Month: "YYYY-MM",
+  Day: "YYYY-MM-D",
+  DayPadded: "YYYY-MM-DD"
+};
+const ShiftDirections = enumOf({
+  Prev: "prev",
+  Next: "next"
+});
+export {
+  DatePickerFormats,
+  DatePickerTypes,
+  DatePickerUnits,
+  MonthList,
+  ShiftDirections,
+  WeekHeader
+};

package/es/date-picker/date-picker.css

@@ -1 +1 @@
-:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-hint-color: #fff; --date-picker-title-hint-font-size: var(--font-size-md); --date-picker-title-height: 105px; --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-year-min-height: 21px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-title-date-justify-content: normal; --date-picker-body-background-color: #fff; --date-picker-body-height: 280px; --date-picker-body-padding: 0; --date-picker-header-padding: 4px 16px; --date-picker-header-color: #555; --date-picker-actions-padding: 0 8px 12px 8px; --date-picker-header-arrow-filter: opacity(0.54); --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-padding: 0 12px; --year-picker-item-width: 33%; --year-picker-item-height: 56px; --year-picker-item-button-max-width: 140px; --day-picker-content-item-width: 14.28%; --day-picker-content-item-min-height: 21px; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: transparent; border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { min-height: var(--date-picker-title-height); padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-select { display: inline-flex; align-items: center; justify-content: space-between; margin-bottom: var(--date-picker-title-year-margin-bottom); min-height: var(--date-picker-title-year-min-height);}.var-date-picker__title-hint { color: var(--date-picker-title-hint-color); font-size: var(--date-picker-title-hint-font-size);}.var-date-picker__title-year { cursor: pointer; -webkit-tap-highlight-color: transparent; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); transition: 0.3s var(--cubic-bezier); margin-bottom: 0;}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: var(--date-picker-title-date-justify-content); opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { position: relative; overflow: auto; height: var(--date-picker-body-height); background-color: var(--date-picker-body-background-color); padding: var(--date-picker-body-padding);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker__actions { background-color: var(--date-picker-body-background-color); padding: var(--date-picker-actions-padding); display: flex; justify-content: flex-end;}.var-date-picker-header { padding: var(--date-picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative; color: var(--date-picker-header-color); background-color: var(--date-picker-body-background-color);}.var-date-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker-header__value div { width: 100%;}.var-date-picker-header__arrow[var-date-picker-header-cover] { filter: var(--date-picker-header-arrow-filter);}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { padding: var(--year-picker-padding); display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-year-picker li { width: var(--year-picker-item-width); display: flex; height: var(--year-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-year-picker__button[var-year-picker-cover] { width: 100%; max-width: var(--year-picker-item-button-max-width);}.var-date-picker .var-year-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-year-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding); min-height: var(--day-picker-content-item-min-height);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}
+:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-hint-color: var(--color-on-surface-variant); --date-picker-title-hint-font-size: var(--font-size-md); --date-picker-title-height: 105px; --date-picker-title-padding: 20px 20px 16px; --date-picker-title-background: #fff; --date-picker-title-color: rgba(0, 0, 0, 0.87); --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-title-date-justify-content: normal; --date-picker-body-background-color: #fff; --date-picker-body-height: 304px; --date-picker-body-padding-horizontal: 12px; --date-picker-body-padding: 0 var(--date-picker-body-padding-horizontal) 16px; --date-picker-header-padding: 0 0 16px; --date-picker-header-padding-top-no-title: 20px; --date-picker-header-color: #555; --date-picker-actions-padding: 10px 20px 20px; --date-picker-header-arrow-filter: opacity(1); --month-picker-padding: 0 12px; --month-picker-item-width: 32%; --month-picker-item-height: 46px; --month-picker-item-button-max-width: 140px; --month-picker-item-button-font-weight: normal; --year-picker-padding: 0 12px; --year-picker-item-width: 32%; --year-picker-item-height: 46px; --year-picker-item-button-max-width: 140px; --year-picker-item-button-font-weight: normal; --day-picker-content-item-width: 14.28%; --day-picker-content-item-min-height: 21px; --day-picker-content-item-font-size: var(--font-size-md); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-md); --day-picker-head-item-font-size: var(--font-size-md); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: normal; --day-picker-adjacent-item-color: rgba(0, 0, 0, 0.54); --day-picker-disabled-item-color: var(--color-text-disabled);}.var-date-picker { -webkit-tap-highlight-color: transparent; border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { min-height: var(--date-picker-title-height); padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-select { display: inline-flex; align-items: center; margin-bottom: 8px; min-height: 21px;}.var-date-picker__title-hint { color: var(--date-picker-title-hint-color); font-size: var(--date-picker-title-hint-font-size);}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: var(--date-picker-title-date-justify-content); opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { position: relative; overflow-x: hidden; overflow-y: auto; height: var(--date-picker-body-height); background-color: var(--date-picker-body-background-color); padding: var(--date-picker-body-padding); scrollbar-width: none;}.var-date-picker__body::-webkit-scrollbar { display: none;}.var-date-picker__panel { position: relative; z-index: 0;}.var-date-picker--no-title .var-date-picker__body { height: calc(var(--date-picker-body-height) + var(--date-picker-header-padding-top-no-title));}.var-date-picker__actions { background-color: var(--date-picker-body-background-color); padding: var(--date-picker-actions-padding); display: flex; justify-content: flex-end;}.var-date-picker-header { padding: var(--date-picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: sticky; top: 0; z-index: 2; color: var(--date-picker-header-color); background-color: var(--date-picker-body-background-color); box-sizing: border-box; width: calc(100% + var(--date-picker-body-padding-horizontal) * 2); margin-left: calc(var(--date-picker-body-padding-horizontal) * -1); margin-right: calc(var(--date-picker-body-padding-horizontal) * -1);}.var-date-picker--no-title .var-date-picker-header { padding-top: var(--date-picker-header-padding-top-no-title);}.var-date-picker-header--day,.var-date-picker-header--month,.var-date-picker-header--year { padding-left: calc(var(--date-picker-body-padding-horizontal) + 4px); padding-right: calc(var(--date-picker-body-padding-horizontal) + 4px);}.var-date-picker-header__year-value { display: flex; align-items: center; justify-content: center; white-space: nowrap;}.var-date-picker-header__nav { display: flex; align-items: center; height: 32px;}.var-date-picker-header__nav--month { margin-left: auto;}.var-date-picker-header__panel-label { min-width: 72px; height: 32px; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; user-select: none; white-space: nowrap;}.var-date-picker-header__text-button[var-date-picker-header-cover] { padding: 0 4px; min-width: 72px; height: 32px; font-size: inherit; font-weight: 700; color: var(--date-picker-header-color); border-radius: var(--button-border-radius); white-space: nowrap;}.var-date-picker-header__text-button[var-date-picker-header-cover] .var-button__content { flex-wrap: nowrap;}.var-date-picker-header__text-button-icon { flex: none; margin-left: 1px; font-size: 16px;}.var-date-picker-header__arrow[var-date-picker-header-cover] { width: 28px; height: 28px; padding: 3px; color: var(--date-picker-header-color); filter: var(--date-picker-header-arrow-filter);}.var-date-picker-header__arrow[var-date-picker-header-cover] .var-icon { font-size: 20px;}.var-date-picker .var-month-picker__content ul { padding: var(--month-picker-padding); display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width); font-weight: var(--month-picker-item-button-font-weight);}.var-date-picker .var-month-picker__button[var-month-picker-cover]:disabled { pointer-events: none;}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-year-picker { padding: var(--year-picker-padding); display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-year-picker li { width: var(--year-picker-item-width); display: flex; height: var(--year-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-year-picker__button[var-year-picker-cover] { width: 100%; max-width: var(--year-picker-item-button-max-width); font-weight: var(--year-picker-item-button-font-weight);}.var-date-picker .var-year-picker__button[var-year-picker-cover]:disabled { pointer-events: none;}.var-date-picker .var-year-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding); min-height: var(--day-picker-content-item-min-height);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); font-size: var(--day-picker-head-item-font-size); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button[var-day-picker-cover]:disabled { pointer-events: none; color: var(--day-picker-disabled-item-color);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable):not(.var-day-picker__button--adjacent) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--adjacent[var-date-picker-color-cover='true'] { color: var(--day-picker-adjacent-item-color);}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute; top: 0; left: 0; right: 0;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}

package/es/date-picker/props.mjs

@@ -1,11 +1,10 @@
 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"];
+import { DatePickerTypes } from "./constants.mjs";
 const props = {
   modelValue: [String, Array],
   type: {
     type: String,
-    default: "date"
+    default: DatePickerTypes.Date
   },
   hint: String,
   fallbackViewDate: String,
@@ -30,19 +29,17 @@ const props = {
     type: Boolean,
     default: true
   },
-  readonly: Boolean,
-  multiple: Boolean,
-  range: Boolean,
-  touchable: {
+  showTitle: {
     type: Boolean,
     default: true
   },
+  readonly: Boolean,
+  multiple: Boolean,
+  range: Boolean,
   onPreview: defineListenerProp(),
   onChange: defineListenerProp(),
   "onUpdate:modelValue": defineListenerProp()
 };
 export {
-  MONTH_LIST,
-  WEEK_HEADER,
   props
 };

package/es/date-picker/style/index.mjs

@@ -2,7 +2,6 @@ import '../../styles/common.css'
 import '../../styles/elevation.css'
 import '../../ripple/ripple.css'
 import '../../button/button.css'
-import '../../sticky/sticky.css'
 import '../../icon/icon.css'
 import '../date-picker.css'
 import '../DatePickerSfc.css'