@varlet/ui 3.5.0 → 3.5.1

package/es/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-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-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-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);}.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);}.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%);}

package/es/date-picker/index.mjs

@@ -1,12 +0,0 @@
-import DatePicker from "./DatePicker.mjs";
-import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
-import { props as datePickerProps } from "./props.mjs";
-withInstall(DatePicker);
-withPropsDefaultsSetter(DatePicker, datePickerProps);
-const _DatePickerComponent = DatePicker;
-var stdin_default = DatePicker;
-export {
-  _DatePickerComponent,
-  datePickerProps,
-  stdin_default as default
-};

package/es/date-picker/props.mjs

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

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

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