@varlet/ui 2.20.1 → 2.20.2

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

@@ -0,0 +1,303 @@
+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";
+import {
+  defineComponent,
+  computed,
+  ref,
+  watch,
+  reactive
+} from "vue";
+import { toNumber } from "@varlet/shared";
+import VarButton from "../../button/index.mjs";
+import VarSticky from "../../sticky/index.mjs";
+import PanelHeader from "./panel-header.mjs";
+import { createNamespace } from "../../utils/components.mjs";
+import { onSmartMounted } from "@varlet/use";
+const { n, classes } = createNamespace("year-picker");
+const { n: nDate } = createNamespace("date-picker");
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, mergeProps as _mergeProps, normalizeClass as _normalizeClass, Transition as _Transition } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_panel_header = _resolveComponent("panel-header");
+  const _component_var_sticky = _resolveComponent("var-sticky");
+  const _component_var_button = _resolveComponent("var-button");
+  return _openBlock(), _createElementBlock("div", null, [
+    _createVNode(_component_var_sticky, { "css-mode": "" }, {
+      default: _withCtx(() => [
+        _createVNode(_component_panel_header, {
+          ref: "headerEl",
+          type: "year",
+          date: {
+            previewYear: `${_ctx.yearList[0]} ~ ${_ctx.yearList[_ctx.yearList.length - 1]}`
+          },
+          disabled: _ctx.panelBtnDisabled,
+          onCheckDate: _ctx.checkDate
+        }, null, 8, ["date", "disabled", "onCheckDate"])
+      ]),
+      _: 1
+      /* STABLE */
+    }),
+    _createVNode(_Transition, {
+      name: `${_ctx.nDate()}${_ctx.reverse ? "-reverse" : ""}-translatex`
+    }, {
+      default: _withCtx(() => [
+        (_openBlock(), _createElementBlock(
+          "ul",
+          {
+            ref: "panel",
+            class: _normalizeClass(_ctx.n()),
+            key: _ctx.panelKey
+          },
+          [
+            (_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": "",
+                    ripple: false,
+                    elevation: _ctx.componentProps.buttonElevation
+                  }, __spreadValues({}, _ctx.buttonProps(`${year}`)), {
+                    onClick: (event) => _ctx.chooseYear(year, event)
+                  }), {
+                    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,
+    VarSticky,
+    PanelHeader
+  },
+  props: {
+    choose: {
+      type: Object,
+      required: true
+    },
+    current: {
+      type: String,
+      required: true
+    },
+    preview: {
+      type: String
+    },
+    componentProps: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["choose-year"],
+  setup(props, { emit }) {
+    const [currentYear] = props.current.split("-");
+    const panel = ref();
+    const headerEl = ref(null);
+    const reverse = ref(false);
+    const panelKey = ref(0);
+    const page = ref(0);
+    const panelBtnDisabled = reactive({
+      left: false,
+      right: false
+    });
+    const yearList = computed(() => {
+      const list = [];
+      if (!props.preview)
+        return list;
+      let startYear = Math.floor(toNumber(props.preview) / 100 + page.value) * 100;
+      startYear = startYear < 0 ? 0 : startYear;
+      const yearRange = [startYear, startYear + 100];
+      for (let i = yearRange[0]; i < yearRange[1]; i++) {
+        list.push(i);
+      }
+      return list;
+    });
+    const shouldChoose = (val) => {
+      const {
+        choose: { chooseMonths, chooseDays, chooseYears, chooseRangeYear },
+        componentProps: { type, range }
+      } = props;
+      if (range) {
+        if (!chooseRangeYear.length)
+          return false;
+        const isBeforeMax = dayjs(val).isSameOrBefore(dayjs(chooseRangeYear[1]), "year");
+        const isAfterMin = dayjs(val).isSameOrAfter(dayjs(chooseRangeYear[0]), "year");
+        return isBeforeMax && isAfterMin;
+      }
+      if (type === "year")
+        return chooseYears.includes(val);
+      if (type === "month")
+        return chooseMonths.some((value) => value.includes(val));
+      return chooseDays.some((value) => value.includes(val));
+    };
+    const inRange = (year) => {
+      const {
+        componentProps: { min, max }
+      } = props;
+      let isBeforeMax = true;
+      let isAfterMin = true;
+      if (max)
+        isBeforeMax = dayjs(year).isSameOrBefore(dayjs(max), "year");
+      if (min)
+        isAfterMin = dayjs(year).isSameOrAfter(dayjs(min), "year");
+      return isBeforeMax && isAfterMin;
+    };
+    const buttonProps = (year) => {
+      const {
+        choose: { chooseYear: chooseYear2 },
+        componentProps: { allowedDates, color, multiple, range }
+      } = props;
+      const yearExist = () => {
+        if (range || multiple)
+          return shouldChoose(year);
+        return chooseYear2 === year;
+      };
+      const computeDisabled = () => {
+        if (!inRange(year))
+          return true;
+        if (!allowedDates)
+          return false;
+        return !allowedDates(year);
+      };
+      const disabled = computeDisabled();
+      const computeText = () => {
+        if (disabled)
+          return true;
+        if (range || multiple)
+          return !shouldChoose(year);
+        return chooseYear2 !== year;
+      };
+      const computeOutline = () => {
+        if (!(currentYear === year && props.componentProps.showCurrent))
+          return false;
+        if ((range || multiple) && disabled)
+          return true;
+        if (range || multiple)
+          return !shouldChoose(year);
+        return chooseYear2 !== currentYear;
+      };
+      const textColorOrCover = () => {
+        if (disabled)
+          return "";
+        if (computeOutline())
+          return color != null ? color : "";
+        if (yearExist())
+          return "";
+        return `${nDate()}-color-cover`;
+      };
+      const isCover = textColorOrCover().startsWith(nDate());
+      return {
+        outline: computeOutline(),
+        text: computeText(),
+        color: !computeText() ? color : "",
+        textColor: isCover ? "" : textColorOrCover(),
+        [`${nDate()}-color-cover`]: isCover,
+        class: classes(n("button"), [disabled, n("button--disabled")]),
+        disabled
+      };
+    };
+    const chooseYear = (year, event) => {
+      const buttonEl = event.currentTarget;
+      if (buttonEl.classList.contains(n("button--disabled")))
+        return;
+      emit("choose-year", year);
+    };
+    const scrollToView = () => {
+      var _a;
+      const activeEl = (_a = panel.value.querySelector(".var-button--primary")) != null ? _a : panel.value.querySelector(".var-button--outline");
+      activeEl == null ? void 0 : activeEl.scrollIntoView({
+        block: "center"
+      });
+    };
+    const checkDate = (checkType) => {
+      reverse.value = checkType === "prev";
+      panelKey.value += checkType === "prev" ? -1 : 1;
+      page.value += checkType === "prev" ? -1 : 1;
+    };
+    const forwardRef = (checkType) => {
+      headerEl.value.checkDate(checkType);
+    };
+    onSmartMounted(scrollToView);
+    watch(
+      () => props.preview,
+      () => {
+        page.value = 0;
+      }
+    );
+    watch(
+      yearList,
+      (list) => {
+        const {
+          componentProps: { min, max }
+        } = props;
+        if (max)
+          panelBtnDisabled.right = !dayjs(`${toNumber(list[list.length - 1])}`).isSameOrBefore(dayjs(max), "year");
+        if (min)
+          panelBtnDisabled.left = !dayjs(`${toNumber(list[0])}`).isSameOrAfter(dayjs(min), "year");
+        if (toNumber(list[0] <= 0))
+          panelBtnDisabled.left = false;
+      },
+      {
+        immediate: true
+      }
+    );
+    return {
+      n,
+      classes,
+      buttonProps,
+      panel,
+      headerEl,
+      yearList,
+      reverse,
+      panelKey,
+      panelBtnDisabled,
+      nDate,
+      checkDate,
+      chooseYear,
+      forwardRef,
+      toNumber
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

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

@@ -0,0 +1,8 @@
+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'

package/es/dialog/Dialog.mjs

@@ -0,0 +1,235 @@
+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 VarPopup from "../popup/index.mjs";
+import VarButton from "../button/index.mjs";
+import { props } from "./props.mjs";
+import { defineComponent, ref, watch } from "vue";
+import { pack } from "../locale/index.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { call } from "@varlet/shared";
+const { name, n, classes } = createNamespace("dialog");
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_button = _resolveComponent("var-button");
+  const _component_var_popup = _resolveComponent("var-popup");
+  return _openBlock(), _createBlock(_component_var_popup, {
+    class: _normalizeClass(_ctx.n("popup")),
+    "var-dialog-cover": "",
+    show: _ctx.popupShow,
+    overlay: _ctx.overlay,
+    "overlay-class": _ctx.overlayClass,
+    "overlay-style": _ctx.overlayStyle,
+    "lock-scroll": _ctx.lockScroll,
+    "close-on-click-overlay": _ctx.popupCloseOnClickOverlay,
+    teleport: _ctx.teleport,
+    onOpen: _ctx.onOpen,
+    onClose: _ctx.onClose,
+    onClosed: _ctx.onClosed,
+    onOpened: _ctx.onOpened,
+    onRouteChange: _ctx.onRouteChange,
+    onClickOverlay: _ctx.handleClickOverlay
+  }, {
+    default: _withCtx(() => [
+      _createElementVNode(
+        "div",
+        _mergeProps({
+          class: _ctx.classes(_ctx.n("$--box"), _ctx.n(), _ctx.dialogClass),
+          style: __spreadValues({ width: _ctx.toSizeUnit(_ctx.width) }, _ctx.dialogStyle)
+        }, _ctx.$attrs),
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("title"))
+            },
+            [
+              _renderSlot(_ctx.$slots, "title", {}, () => {
+                var _a;
+                return [
+                  _createTextVNode(
+                    _toDisplayString((_a = _ctx.title) != null ? _a : _ctx.pack.dialogTitle),
+                    1
+                    /* TEXT */
+                  )
+                ];
+              })
+            ],
+            2
+            /* CLASS */
+          ),
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("message")),
+              style: _normalizeStyle({ textAlign: _ctx.messageAlign })
+            },
+            [
+              _renderSlot(_ctx.$slots, "default", {}, () => [
+                _createTextVNode(
+                  _toDisplayString(_ctx.message),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ],
+            6
+            /* CLASS, STYLE */
+          ),
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("actions"))
+            },
+            [
+              _ctx.cancelButton ? (_openBlock(), _createBlock(_component_var_button, {
+                key: 0,
+                class: _normalizeClass(_ctx.classes(_ctx.n("button"), _ctx.n("cancel-button"))),
+                "var-dialog-cover": "",
+                text: "",
+                "text-color": _ctx.cancelButtonTextColor,
+                color: _ctx.cancelButtonColor,
+                onClick: _ctx.cancel
+              }, {
+                default: _withCtx(() => {
+                  var _a;
+                  return [
+                    _createTextVNode(
+                      _toDisplayString((_a = _ctx.cancelButtonText) != null ? _a : _ctx.pack.dialogCancelButtonText),
+                      1
+                      /* TEXT */
+                    )
+                  ];
+                }),
+                _: 1
+                /* STABLE */
+              }, 8, ["class", "text-color", "color", "onClick"])) : _createCommentVNode("v-if", true),
+              _ctx.confirmButton ? (_openBlock(), _createBlock(_component_var_button, {
+                key: 1,
+                class: _normalizeClass(_ctx.classes(_ctx.n("button"), _ctx.n("confirm-button"))),
+                "var-dialog-cover": "",
+                text: "",
+                "text-color": _ctx.confirmButtonTextColor,
+                color: _ctx.confirmButtonColor,
+                onClick: _ctx.confirm
+              }, {
+                default: _withCtx(() => {
+                  var _a;
+                  return [
+                    _createTextVNode(
+                      _toDisplayString((_a = _ctx.confirmButtonText) != null ? _a : _ctx.pack.dialogConfirmButtonText),
+                      1
+                      /* TEXT */
+                    )
+                  ];
+                }),
+                _: 1
+                /* STABLE */
+              }, 8, ["class", "text-color", "color", "onClick"])) : _createCommentVNode("v-if", true)
+            ],
+            2
+            /* CLASS */
+          )
+        ],
+        16
+        /* FULL_PROPS */
+      )
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onClickOverlay"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarPopup,
+    VarButton
+  },
+  inheritAttrs: false,
+  props,
+  setup(props2) {
+    const popupShow = ref(false);
+    const popupCloseOnClickOverlay = ref(false);
+    watch(
+      () => props2.show,
+      (newValue) => {
+        popupShow.value = newValue;
+      },
+      { immediate: true }
+    );
+    watch(
+      () => props2.closeOnClickOverlay,
+      (newValue) => {
+        if (props2.onBeforeClose != null) {
+          popupCloseOnClickOverlay.value = false;
+          return;
+        }
+        popupCloseOnClickOverlay.value = newValue;
+      },
+      { immediate: true }
+    );
+    function done() {
+      return call(props2["onUpdate:show"], false);
+    }
+    function handleClickOverlay() {
+      const { closeOnClickOverlay, onClickOverlay, onBeforeClose } = props2;
+      call(onClickOverlay);
+      if (!closeOnClickOverlay) {
+        return;
+      }
+      if (onBeforeClose != null) {
+        call(onBeforeClose, "close", done);
+        return;
+      }
+      call(props2["onUpdate:show"], false);
+    }
+    function confirm() {
+      const { onBeforeClose, onConfirm } = props2;
+      call(onConfirm);
+      if (onBeforeClose != null) {
+        call(onBeforeClose, "confirm", done);
+        return;
+      }
+      call(props2["onUpdate:show"], false);
+    }
+    function cancel() {
+      const { onBeforeClose, onCancel } = props2;
+      call(onCancel);
+      if (onBeforeClose != null) {
+        call(onBeforeClose, "cancel", done);
+        return;
+      }
+      call(props2["onUpdate:show"], false);
+    }
+    return {
+      pack,
+      popupShow,
+      popupCloseOnClickOverlay,
+      n,
+      classes,
+      handleClickOverlay,
+      confirm,
+      cancel,
+      toSizeUnit
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/dialog/dialog.css

@@ -0,0 +1 @@
+:root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-title-color: #555; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: #fff;}.var-dialog { width: var(--dialog-width); border-radius: var(--dialog-border-radius); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent;}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding); color: var(--dialog-title-color);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size); word-wrap: break-word;}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover] { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover] { color: var(--dialog-cancel-button-color);}

package/es/dialog/index.mjs

@@ -0,0 +1,97 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import VarDialog from "./Dialog.mjs";
+import { reactive, nextTick } from "vue";
+import { inBrowser, isString, call } from "@varlet/shared";
+import { mountInstance, withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as dialogProps } from "./props.mjs";
+let singletonOptions;
+let defaultOptions = {};
+function normalizeOptions(options = {}) {
+  if (isString(options)) {
+    return __spreadProps(__spreadValues({}, defaultOptions), { message: options });
+  }
+  return __spreadValues(__spreadValues({}, defaultOptions), options);
+}
+function Dialog(options) {
+  if (!inBrowser()) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    Dialog.close();
+    const dialogOptions = normalizeOptions(options);
+    const reactiveDialogOptions = reactive(dialogOptions);
+    reactiveDialogOptions.teleport = "body";
+    singletonOptions = reactiveDialogOptions;
+    const { unmountInstance } = mountInstance(VarDialog, reactiveDialogOptions, {
+      onConfirm: () => {
+        call(reactiveDialogOptions.onConfirm);
+        resolve("confirm");
+      },
+      onCancel: () => {
+        call(reactiveDialogOptions.onCancel);
+        resolve("cancel");
+      },
+      onClose: () => {
+        call(reactiveDialogOptions.onClose);
+        resolve("close");
+      },
+      onClosed: () => {
+        call(reactiveDialogOptions.onClosed);
+        unmountInstance();
+        singletonOptions === reactiveDialogOptions && (singletonOptions = null);
+      },
+      onRouteChange: () => {
+        unmountInstance();
+        singletonOptions === reactiveDialogOptions && (singletonOptions = null);
+      },
+      "onUpdate:show": (value) => {
+        reactiveDialogOptions.show = value;
+      }
+    });
+    reactiveDialogOptions.show = true;
+  });
+}
+Dialog.setDefaultOptions = function(options) {
+  defaultOptions = options;
+};
+Dialog.resetDefaultOptions = function() {
+  defaultOptions = {};
+};
+Dialog.close = function() {
+  if (singletonOptions != null) {
+    const prevSingletonOptions = singletonOptions;
+    singletonOptions = null;
+    nextTick().then(() => {
+      prevSingletonOptions.show = false;
+    });
+  }
+};
+Dialog.Component = VarDialog;
+withInstall(VarDialog);
+withInstall(VarDialog, Dialog);
+withPropsDefaultsSetter(Dialog, dialogProps);
+const _DialogComponent = VarDialog;
+var stdin_default = Dialog;
+export {
+  _DialogComponent,
+  stdin_default as default,
+  dialogProps
+};