@varlet/ui 1.23.4-alpha.4 → 1.23.4

package/lib/date-picker/DatePicker.js

@@ -1,469 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.render = render;
-exports.default = void 0;
-
-var _vue = require("vue");
-
-var dayjs = _interopRequireWildcard(require("dayjs"));
-
-var _monthPickerPanel = _interopRequireDefault(require("./src/month-picker-panel.js"));
-
-var _yearPickerPanel = _interopRequireDefault(require("./src/year-picker-panel.js"));
-
-var _dayPickerPanel = _interopRequireDefault(require("./src/day-picker-panel.js"));
-
-var _props = require("./props");
-
-var _shared = require("../utils/shared");
-
-var _locale = require("../locale");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 = dayjs().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 => dayjs(date).format('YYYY-MM-DD'));
-        return chooseRangeDay.value[0] + " ~ " + chooseRangeDay.value[1];
-      }
-
-      if (multiple) return "" + chooseDays.value.length + _locale.pack.value.datePickerSelected;
-      var weekIndex = dayjs(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 = dayjs(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 => dayjs(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 = dayjs(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 => dayjs(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 = dayjs(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 => dayjs(choose).format(formatType)).slice(0, 2);
-      var isValid = rangeDate.value.some(date => invalidFormatDate(date));
-      if (isValid) return;
-      rangeDate.value = formatDateList;
-      var isChangeOrder = dayjs(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 => dayjs(choose).format(formatType))));
-      rangeDate.value = formatDateList.filter(date => date !== 'Invalid Date');
-    };
-
-    var dateInit = value => {
-      var formatDate = dayjs(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

@@ -1 +0,0 @@
-: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%);}