@varlet/ui 1.23.4-alpha.0 → 1.23.4-alpha.1

package/lib/date-picker/DatePicker.js

@@ -0,0 +1,465 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _esm = _interopRequireDefault(require("dayjs/esm"));
+
+var _monthPickerPanel = _interopRequireDefault(require("./src/month-picker-panel.vue"));
+
+var _yearPickerPanel = _interopRequireDefault(require("./src/year-picker-panel.vue"));
+
+var _dayPickerPanel = _interopRequireDefault(require("./src/day-picker-panel.vue"));
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var _locale = require("../locale");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-date-picker-body"
+};
+
+function render(_ctx, _cache) {
+  var _component_year_picker_panel = (0, _vue.resolveComponent)("year-picker-panel");
+
+  var _component_month_picker_panel = (0, _vue.resolveComponent)("month-picker-panel");
+
+  var _component_day_picker_panel = (0, _vue.resolveComponent)("day-picker-panel");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(["var-date-picker", [_ctx.shadow ? 'var-elevation--2' : null]])
+  }, [(0, _vue.createElementVNode)("div", {
+    class: "var-date-picker-title",
+    style: (0, _vue.normalizeStyle)({
+      background: _ctx.headerColor || _ctx.color
+    })
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-date-picker-title__year", [_ctx.isYearPanel ? 'var-date-picker-title__year--active' : null]]),
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.clickEl('year'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "year", {
+    year: _ctx.previewYear
+  }, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.previewYear), 1
+  /* TEXT */
+  )])], 2
+  /* CLASS */
+  ), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-date-picker-title__date", [!_ctx.isYearPanel ? 'var-date-picker-title__date--active' : null, _ctx.range ? 'var-date-picker-title__date--range' : null]]),
+    onClick: _cache[1] || (_cache[1] = $event => _ctx.clickEl('date'))
+  }, [(0, _vue.createVNode)(_vue.Transition, {
+    name: _ctx.multiple ? '' : _ctx.reverse ? 'var-date-picker-reverse-translatey' : 'var-date-picker-translatey'
+  }, {
+    default: (0, _vue.withCtx)(() => {
+      var _ctx$chooseMonth, _ctx$chooseMonth2, _ctx$chooseMonth3;
+
+      return [_ctx.type === 'month' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+        key: _ctx.chooseYear + ((_ctx$chooseMonth = _ctx.chooseMonth) == null ? void 0 : _ctx$chooseMonth.index)
+      }, [_ctx.range ? (0, _vue.renderSlot)(_ctx.$slots, "range", {
+        key: 0,
+        choose: _ctx.getChoose.chooseRangeMonth
+      }, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.getMonthTitle), 1
+      /* TEXT */
+      )]) : _ctx.multiple ? (0, _vue.renderSlot)(_ctx.$slots, "multiple", {
+        key: 1,
+        choose: _ctx.getChoose.chooseMonths
+      }, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.getMonthTitle), 1
+      /* TEXT */
+      )]) : (0, _vue.renderSlot)(_ctx.$slots, "month", {
+        key: 2,
+        month: (_ctx$chooseMonth2 = _ctx.chooseMonth) == null ? void 0 : _ctx$chooseMonth2.index,
+        year: _ctx.chooseYear
+      }, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.getMonthTitle), 1
+      /* TEXT */
+      )])])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+        key: _ctx.chooseYear + ((_ctx$chooseMonth3 = _ctx.chooseMonth) == null ? void 0 : _ctx$chooseMonth3.index) + _ctx.chooseDay
+      }, [_ctx.range ? (0, _vue.renderSlot)(_ctx.$slots, "range", {
+        key: 0,
+        choose: _ctx.formatRange
+      }, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.getDateTitle), 1
+      /* TEXT */
+      )]) : _ctx.multiple ? (0, _vue.renderSlot)(_ctx.$slots, "multiple", {
+        key: 1,
+        choose: _ctx.getChoose.chooseDays
+      }, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.getDateTitle), 1
+      /* TEXT */
+      )]) : (0, _vue.renderSlot)(_ctx.$slots, "date", (0, _vue.normalizeProps)((0, _vue.mergeProps)({
+        key: 2
+      }, _ctx.slotProps)), () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.getDateTitle), 1
+      /* TEXT */
+      )])]))];
+    }),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["name"])], 2
+  /* CLASS */
+  )], 4
+  /* STYLE */
+  ), (0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.createVNode)(_vue.Transition, {
+    name: "var-date-picker-panel-fade"
+  }, {
+    default: (0, _vue.withCtx)(() => [_ctx.isYearPanel ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_year_picker_panel, {
+      key: 0,
+      "component-props": _ctx.componentProps,
+      preview: _ctx.previewYear,
+      onChooseYear: _ctx.getChooseYear
+    }, null, 8
+    /* PROPS */
+    , ["component-props", "preview", "onChooseYear"])) : !_ctx.isYearPanel && _ctx.type === 'month' || _ctx.isMonthPanel ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_month_picker_panel, {
+      key: 1,
+      current: _ctx.currentDate,
+      choose: _ctx.getChoose,
+      preview: _ctx.getPreview,
+      "click-year": () => _ctx.clickEl('year'),
+      "component-props": _ctx.componentProps,
+      onChooseMonth: _ctx.getChooseMonth,
+      onCheckPreview: _ctx.checkPreview
+    }, null, 8
+    /* PROPS */
+    , ["current", "choose", "preview", "click-year", "component-props", "onChooseMonth", "onCheckPreview"])) : !_ctx.isYearPanel && !_ctx.isMonthPanel && _ctx.type === 'date' ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_day_picker_panel, {
+      key: 2,
+      current: _ctx.currentDate,
+      choose: _ctx.getChoose,
+      preview: _ctx.getPreview,
+      "component-props": _ctx.componentProps,
+      "click-month": () => _ctx.clickEl('month'),
+      onChooseDay: _ctx.getChooseDay,
+      onCheckPreview: _ctx.checkPreview
+    }, null, 8
+    /* PROPS */
+    , ["current", "choose", "preview", "component-props", "click-month", "onChooseDay", "onCheckPreview"])) : (0, _vue.createCommentVNode)("v-if", true)]),
+    _: 1
+    /* STABLE */
+
+  })])], 2
+  /* CLASS */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarDatePicker',
+  components: {
+    MonthPickerPanel: _monthPickerPanel.default,
+    YearPickerPanel: _yearPickerPanel.default,
+    DayPickerPanel: _dayPickerPanel.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var currentDate = (0, _esm.default)().format('YYYY-MM-D');
+    var [currentYear, currentMonth, currentDay] = currentDate.split('-');
+
+    var monthDes = _props.MONTH_LIST.find(month => month.index === currentMonth);
+
+    var isYearPanel = (0, _vue.ref)(false);
+    var isMonthPanel = (0, _vue.ref)(false);
+    var rangeDone = (0, _vue.ref)(true);
+    var chooseMonth = (0, _vue.ref)(monthDes);
+    var chooseYear = (0, _vue.ref)(currentYear);
+    var chooseDay = (0, _vue.ref)(currentDay);
+    var previewMonth = (0, _vue.ref)(monthDes);
+    var previewYear = (0, _vue.ref)(currentYear);
+    var reverse = (0, _vue.ref)(false);
+    var chooseMonths = (0, _vue.ref)([currentYear + "-" + currentMonth]);
+    var chooseDays = (0, _vue.ref)([currentDate]);
+    var chooseRangeMonth = (0, _vue.ref)([currentYear + "-" + currentMonth]);
+    var chooseRangeDay = (0, _vue.ref)([currentDate]);
+    var componentProps = (0, _vue.reactive)({
+      allowedDates: props.allowedDates,
+      type: props.type,
+      color: props.color,
+      firstDayOfWeek: props.firstDayOfWeek,
+      min: props.min,
+      max: props.max,
+      showCurrent: props.showCurrent,
+      multiple: props.multiple,
+      range: props.range
+    });
+    var getChoose = (0, _vue.computed)(() => ({
+      chooseMonth: chooseMonth.value,
+      chooseYear: chooseYear.value,
+      chooseDay: chooseDay.value,
+      chooseMonths: chooseMonths.value,
+      chooseDays: chooseDays.value,
+      chooseRangeMonth: chooseRangeMonth.value,
+      chooseRangeDay: chooseRangeDay.value
+    }));
+    var getPreview = (0, _vue.computed)(() => ({
+      previewMonth: previewMonth.value,
+      previewYear: previewYear.value
+    }));
+    var getMonthTitle = (0, _vue.computed)(() => {
+      var _pack$value$datePicke, _pack$value$datePicke2;
+
+      var {
+        multiple,
+        range
+      } = props;
+      if (range) return chooseRangeMonth.value[0] + " ~ " + chooseRangeMonth.value[1];
+      var monthName = (_pack$value$datePicke = (_pack$value$datePicke2 = _locale.pack.value.datePickerMonthDict) == null ? void 0 : _pack$value$datePicke2[chooseMonth.value.index].name) != null ? _pack$value$datePicke : '';
+      return multiple ? "" + chooseMonths.value.length + _locale.pack.value.datePickerSelected : monthName;
+    });
+    var getDateTitle = (0, _vue.computed)(() => {
+      var _pack$value$datePicke3, _pack$value$datePicke4, _pack$value$datePicke5, _pack$value$datePicke6;
+
+      var {
+        multiple,
+        range
+      } = props;
+
+      if (range) {
+        chooseRangeDay.value = chooseRangeDay.value.map(date => (0, _esm.default)(date).format('YYYY-MM-DD'));
+        return chooseRangeDay.value[0] + " ~ " + chooseRangeDay.value[1];
+      }
+
+      if (multiple) return "" + chooseDays.value.length + _locale.pack.value.datePickerSelected;
+      var weekIndex = (0, _esm.default)(chooseYear.value + "-" + chooseMonth.value.index + "-" + chooseDay.value).day();
+
+      var week = _props.WEEK_HEADER.find(value => value.index === "" + weekIndex);
+
+      var weekName = (_pack$value$datePicke3 = (_pack$value$datePicke4 = _locale.pack.value.datePickerWeekDict) == null ? void 0 : _pack$value$datePicke4[week.index].name) != null ? _pack$value$datePicke3 : '';
+      var monthName = (_pack$value$datePicke5 = (_pack$value$datePicke6 = _locale.pack.value.datePickerMonthDict) == null ? void 0 : _pack$value$datePicke6[chooseMonth.value.index].name) != null ? _pack$value$datePicke5 : '';
+      var showDay = chooseDay.value.padStart(2, '0');
+      if (_locale.pack.value.lang === 'zh-CN') return chooseMonth.value.index + "-" + showDay + " " + weekName.slice(0, 3);
+      return weekName.slice(0, 3) + ", " + monthName.slice(0, 3) + " " + chooseDay.value;
+    });
+    var slotProps = (0, _vue.computed)(() => {
+      var weekIndex = (0, _esm.default)(chooseYear.value + "-" + chooseMonth.value.index + "-" + chooseDay.value).day();
+      return {
+        week: "" + weekIndex,
+        year: chooseYear.value,
+        month: chooseMonth.value.index,
+        date: chooseDay.value
+      };
+    });
+    var formatRange = (0, _vue.computed)(() => getChoose.value.chooseRangeDay.map(choose => (0, _esm.default)(choose).format('YYYY-MM-DD')));
+    var isSameYear = (0, _vue.computed)(() => chooseYear.value === previewYear.value);
+    var isSameMonth = (0, _vue.computed)(() => chooseMonth.value.index === previewMonth.value.index);
+
+    var clickEl = type => {
+      if (type === 'year') isYearPanel.value = true;else if (type === 'month') isMonthPanel.value = true;else {
+        isYearPanel.value = false;
+        isMonthPanel.value = false;
+      }
+    };
+
+    var updateRange = (date, type) => {
+      var rangeDate = type === 'month' ? chooseRangeMonth : chooseRangeDay;
+      rangeDate.value = rangeDone.value ? [date, date] : [rangeDate.value[0], date];
+      rangeDone.value = !rangeDone.value;
+
+      if (rangeDone.value) {
+        var _props$onUpdateModel;
+
+        var isChangeOrder = (0, _esm.default)(rangeDate.value[0]).isAfter(rangeDate.value[1]);
+
+        var _date = isChangeOrder ? [rangeDate.value[1], rangeDate.value[0]] : [...rangeDate.value];
+
+        (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, _date);
+        props.onChange == null ? void 0 : props.onChange(_date);
+      }
+    };
+
+    var updateMultiple = (date, type) => {
+      var _props$onUpdateModel2;
+
+      var multipleDates = type === 'month' ? chooseMonths : chooseDays;
+      var formatType = type === 'month' ? 'YYYY-MM' : 'YYYY-MM-DD';
+      var formatDates = multipleDates.value.map(date => (0, _esm.default)(date).format(formatType));
+      var index = formatDates.findIndex(choose => choose === date);
+      if (index === -1) formatDates.push(date);else formatDates.splice(index, 1);
+      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, formatDates);
+      props.onChange == null ? void 0 : props.onChange(formatDates);
+    };
+
+    var getReverse = (dateType, date) => {
+      if (!isSameYear.value) return chooseYear.value > previewYear.value;
+      if (dateType === 'month') return date.index < chooseMonth.value.index;
+      return isSameMonth.value ? date < (0, _shared.toNumber)(chooseDay.value) : chooseMonth.value.index > previewMonth.value.index;
+    };
+
+    var getChooseDay = day => {
+      var {
+        readonly,
+        range,
+        multiple,
+        onChange,
+        'onUpdate:modelValue': updateModelValue
+      } = props;
+      if (day < 0 || readonly) return;
+      reverse.value = getReverse('day', day);
+      var date = previewYear.value + "-" + previewMonth.value.index + "-" + day;
+      var formatDate = (0, _esm.default)(date).format('YYYY-MM-DD');
+      if (range) updateRange(formatDate, 'day');else if (multiple) updateMultiple(formatDate, 'day');else {
+        updateModelValue == null ? void 0 : updateModelValue(formatDate);
+        onChange == null ? void 0 : onChange(formatDate);
+      }
+    };
+
+    var getChooseMonth = month => {
+      var {
+        type,
+        readonly,
+        range,
+        multiple,
+        onChange,
+        'onUpdate:modelValue': updateModelValue
+      } = props;
+      reverse.value = getReverse('month', month);
+
+      if (type === 'month' && !readonly) {
+        var date = previewYear.value + "-" + month.index;
+        if (range) updateRange(date, 'month');else if (multiple) updateMultiple(date, 'month');else {
+          updateModelValue == null ? void 0 : updateModelValue(date);
+          onChange == null ? void 0 : onChange(date);
+        }
+      } else {
+        previewMonth.value = month;
+      }
+
+      isMonthPanel.value = false;
+    };
+
+    var getChooseYear = year => {
+      previewYear.value = "" + year;
+      isYearPanel.value = false;
+      isMonthPanel.value = true;
+    };
+
+    var checkPreview = (type, checkType) => {
+      var changeValue = checkType === 'prev' ? -1 : 1;
+
+      if (type === 'year') {
+        previewYear.value = "" + ((0, _shared.toNumber)(previewYear.value) + changeValue);
+      } else {
+        var checkIndex = (0, _shared.toNumber)(previewMonth.value.index) + changeValue;
+
+        if (checkIndex < 1) {
+          previewYear.value = "" + ((0, _shared.toNumber)(previewYear.value) - 1);
+          checkIndex = 12;
+        }
+
+        if (checkIndex > 12) {
+          previewYear.value = "" + ((0, _shared.toNumber)(previewYear.value) + 1);
+          checkIndex = 1;
+        }
+
+        previewMonth.value = _props.MONTH_LIST.find(month => (0, _shared.toNumber)(month.index) === checkIndex);
+      }
+    };
+
+    var checkValue = () => {
+      if ((props.multiple || props.range) && !(0, _shared.isArray)(props.modelValue)) {
+        console.error('[Varlet] DatePicker: type of prop "modelValue" should be an Array');
+        return false;
+      }
+
+      if (!props.multiple && !props.range && (0, _shared.isArray)(props.modelValue)) {
+        console.error('[Varlet] DatePicker: type of prop "modelValue" should be a String');
+        return false;
+      }
+
+      return true;
+    };
+
+    var invalidFormatDate = date => {
+      if ((0, _shared.isArray)(date)) return false;
+
+      if (date === undefined || date === 'Invalid Date') {
+        console.error('[Varlet] DatePicker: "modelValue" is an Invalid Date');
+        return true;
+      }
+
+      return false;
+    };
+
+    var rangeInit = (value, type) => {
+      var rangeDate = type === 'month' ? chooseRangeMonth : chooseRangeDay;
+      var formatType = type === 'month' ? 'YYYY-MM' : 'YYYY-MM-D';
+      var formatDateList = value.map(choose => (0, _esm.default)(choose).format(formatType)).slice(0, 2);
+      var isValid = rangeDate.value.some(date => invalidFormatDate(date));
+      if (isValid) return;
+      rangeDate.value = formatDateList;
+      var isChangeOrder = (0, _esm.default)(rangeDate.value[0]).isAfter(rangeDate.value[1]);
+
+      if (rangeDate.value.length === 2 && isChangeOrder) {
+        rangeDate.value = [rangeDate.value[1], rangeDate.value[0]];
+      }
+    };
+
+    var multipleInit = (value, type) => {
+      var rangeDate = type === 'month' ? chooseMonths : chooseDays;
+      var formatType = type === 'month' ? 'YYYY-MM' : 'YYYY-MM-D'; // 需要去重
+
+      var formatDateList = Array.from(new Set(value.map(choose => (0, _esm.default)(choose).format(formatType))));
+      rangeDate.value = formatDateList.filter(date => date !== 'Invalid Date');
+    };
+
+    var dateInit = value => {
+      var formatDate = (0, _esm.default)(value).format('YYYY-MM-D');
+      if (invalidFormatDate(formatDate)) return;
+      var [yearValue, monthValue, dayValue] = formatDate.split('-');
+
+      var monthDes = _props.MONTH_LIST.find(month => month.index === monthValue);
+
+      chooseMonth.value = monthDes;
+      chooseYear.value = yearValue;
+      chooseDay.value = dayValue;
+      previewMonth.value = monthDes;
+      previewYear.value = yearValue;
+    };
+
+    (0, _vue.watch)(() => props.modelValue, value => {
+      if (!checkValue() || invalidFormatDate(value)) return;
+
+      if (props.range) {
+        if (!(0, _shared.isArray)(value)) return;
+        rangeDone.value = value.length !== 1;
+        rangeInit(value, props.type);
+      } else if (props.multiple) {
+        if (!(0, _shared.isArray)(value)) return;
+        multipleInit(value, props.type);
+      } else {
+        dateInit(value);
+      }
+    }, {
+      immediate: true
+    });
+    return {
+      reverse,
+      currentDate,
+      chooseMonth,
+      chooseYear,
+      chooseDay,
+      previewYear,
+      isYearPanel,
+      isMonthPanel,
+      getMonthTitle,
+      getDateTitle,
+      getChoose,
+      getPreview,
+      componentProps,
+      slotProps,
+      formatRange,
+      clickEl,
+      getChooseDay,
+      getChooseMonth,
+      getChooseYear,
+      checkPreview
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/date-picker/date-picker.css

@@ -0,0 +1 @@
+:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --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-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-body-background-color: rgba(0, 0, 0, 0); --picker-header-padding: 4px 16px; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --day-picker-content-item-width: 14.28%; --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: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker-title { 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__year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; display: inline-flex; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); margin-bottom: var(--date-picker-title-year-margin-bottom); transition: 0.3s var(--cubic-bezier);}.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: rgba(0, 0, 0, 0); display: flex; align-items: center; 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 { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative;}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer;}.var-date-picker .var-picker-header__value div { width: 100%;}.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-year-picker__panel { width: 100%; height: 100%; font-weight: var(--year-picker-font-weight); padding: 0; margin: 0; list-style-type: none; overflow: auto; text-align: center;}.var-date-picker .var-year-picker__panel li { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-date-picker .var-year-picker__panel--active { font-size: var(--year-picker-item-active-font-size); font-weight: var(--year-picker-item-active-font-weight); padding: var(--year-picker-item-active-font-padding); color: var(--year-picker-item-active-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);}.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-main__color { color: var(--date-picker-main-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;}.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%);}