zartui 0.1.113 → 3.0.1

package/es/number-keyboard/NumberKeyboard.mjs

@@ -0,0 +1,243 @@
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+import { ref, watch, computed, Teleport, Transition, defineComponent } from "vue";
+import { truthProp, numericProp, getZIndexStyle, makeStringProp, makeNumericProp, stopPropagation, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
+import { useClickAway } from "@zartui/use";
+import NumberKeyboardKey from "./NumberKeyboardKey.mjs";
+import ZtButton from "../button/Button.mjs";
+import { showToast } from "../toast/index.mjs";
+const [name, bem] = createNamespace("number-keyboard");
+const numberKeyboardProps = {
+  show: Boolean,
+  title: String,
+  theme: makeStringProp("default"),
+  zIndex: numericProp,
+  teleport: [String, Object],
+  maxlength: makeNumericProp(Infinity),
+  modelValue: makeStringProp(""),
+  transition: truthProp,
+  blurOnClose: truthProp,
+  showDeleteKey: truthProp,
+  randomKeyOrder: Boolean,
+  closeButtonText: String,
+  deleteButtonText: String,
+  closeButtonLoading: Boolean,
+  hideOnClickOutside: truthProp,
+  safeAreaInsetBottom: truthProp,
+  extraKey: {
+    type: [String, Array],
+    default: ""
+  }
+};
+function shuffle(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    const temp = array[i];
+    array[i] = array[j];
+    array[j] = temp;
+  }
+  return array;
+}
+var stdin_default = defineComponent({
+  name,
+  props: numberKeyboardProps,
+  emits: ["show", "hide", "blur", "input", "close", "delete", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const root = ref();
+    const genBasicKeys = () => {
+      const keys2 = Array(9).fill("").map((_, i) => ({
+        text: i + 1
+      }));
+      if (props.randomKeyOrder) {
+        shuffle(keys2);
+      }
+      return keys2;
+    };
+    const genDefaultKeys = () => [...genBasicKeys(), {
+      text: props.extraKey,
+      type: "extra"
+    }, {
+      text: 0
+    }, {
+      text: props.showDeleteKey ? props.deleteButtonText : "",
+      type: props.showDeleteKey ? "delete" : ""
+    }];
+    const genCustomKeys = () => {
+      const keys2 = genBasicKeys();
+      const {
+        extraKey
+      } = props;
+      const extraKeys = Array.isArray(extraKey) ? extraKey : [extraKey];
+      if (extraKeys.length === 1) {
+        keys2.push({
+          text: 0,
+          wider: true
+        }, {
+          text: extraKeys[0],
+          type: "extra"
+        });
+      } else if (extraKeys.length === 2) {
+        keys2.push({
+          text: extraKeys[0],
+          type: "extra"
+        }, {
+          text: 0
+        }, {
+          text: extraKeys[1],
+          type: "extra"
+        });
+      }
+      return keys2;
+    };
+    const keys = computed(() => props.theme === "custom" ? genCustomKeys() : genDefaultKeys());
+    const onBlur = () => {
+      if (props.show) {
+        emit("blur");
+      }
+    };
+    const onClose = () => {
+      emit("close");
+      if (props.blurOnClose) {
+        onBlur();
+      }
+    };
+    const onAnimationEnd = () => emit(props.show ? "show" : "hide");
+    const onPress = (text, type) => {
+      if (text === "") {
+        if (type === "extra") {
+          onBlur();
+        }
+        return;
+      }
+      const value = props.modelValue;
+      if (type === "delete") {
+        emit("delete");
+        emit("update:modelValue", value.slice(0, value.length - 1));
+      } else if (type === "close") {
+        onClose();
+      } else if (value.length < props.maxlength) {
+        emit("input", text);
+        emit("update:modelValue", value + text);
+      } else if (value.length >= props.maxlength) {
+        showToast(`\u6700\u5927\u957F\u5EA6\u4E3A${props.maxlength}`);
+      }
+    };
+    const renderTitle = () => {
+      const {
+        title,
+        theme,
+        closeButtonText
+      } = props;
+      const leftSlot = slots["title-left"];
+      const showClose = closeButtonText && theme === "default";
+      const showTitle = title || showClose || leftSlot;
+      if (!showTitle) {
+        return;
+      }
+      return _createVNode("div", {
+        "class": bem("header")
+      }, [leftSlot && _createVNode("span", {
+        "class": bem("title-left")
+      }, [leftSlot()]), title && _createVNode("h2", {
+        "class": bem("title")
+      }, [title])]);
+    };
+    const renderKeys = () => keys.value.map((key) => {
+      const keySlots = {};
+      if (key.type === "delete") {
+        keySlots.default = slots.delete;
+      }
+      if (key.type === "extra") {
+        keySlots.default = slots["extra-key"];
+      }
+      return _createVNode(NumberKeyboardKey, {
+        "key": key.text,
+        "text": key.text,
+        "type": key.type,
+        "wider": key.wider,
+        "color": key.color,
+        "onPress": onPress
+      }, keySlots);
+    });
+    const renderSidebar = () => {
+      if (props.theme === "custom") {
+        return _createVNode("div", {
+          "class": bem("sidebar")
+        }, [props.showDeleteKey && _createVNode(NumberKeyboardKey, {
+          "large": true,
+          "text": props.deleteButtonText,
+          "type": "delete",
+          "onPress": onPress
+        }, {
+          delete: slots.delete
+        }), _createVNode(NumberKeyboardKey, {
+          "large": true,
+          "text": props.closeButtonText,
+          "type": "close",
+          "color": "blue",
+          "loading": props.closeButtonLoading,
+          "onPress": onPress
+        }, null)]);
+      }
+    };
+    watch(() => props.show, (value) => {
+      if (!props.transition) {
+        emit(value ? "show" : "hide");
+      }
+    });
+    if (props.hideOnClickOutside) {
+      useClickAway(root, onBlur, {
+        eventName: "touchstart"
+      });
+    }
+    return () => {
+      const Title = renderTitle();
+      const {
+        theme,
+        closeButtonText,
+        title
+      } = props;
+      const showClose = closeButtonText && theme === "default";
+      const Content = _createVNode(Transition, {
+        "name": props.transition ? "zt-slide-up" : ""
+      }, {
+        default: () => [_withDirectives(_createVNode("div", {
+          "ref": root,
+          "style": getZIndexStyle(props.zIndex),
+          "class": [bem({
+            unfit: !props.safeAreaInsetBottom,
+            "with-title": !!Title
+          }), !title ? "" : bem("no-title")],
+          "onTouchstart": stopPropagation,
+          "onAnimationend": onAnimationEnd,
+          "onWebkitAnimationEnd": onAnimationEnd
+        }, [title && Title, _createVNode("div", {
+          "class": [bem("body"), title ? "" : bem("body-no-title")]
+        }, [_createVNode("div", {
+          "class": bem("keys")
+        }, [renderKeys()]), renderSidebar()]), showClose && _createVNode("div", {
+          "class": bem("finish-button-box")
+        }, [_createVNode(ZtButton, {
+          "type": "primary",
+          "block": true,
+          "text": closeButtonText,
+          "class": [bem("finish-button"), HAPTICS_FEEDBACK],
+          "onClick": onClose
+        }, null)])]), [[_vShow, props.show]])]
+      });
+      if (props.teleport) {
+        return _createVNode(Teleport, {
+          "to": props.teleport
+        }, {
+          default: () => [Content]
+        });
+      }
+      return Content;
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/number-keyboard/NumberKeyboardKey.d.ts

@@ -0,0 +1,24 @@
+import { type PropType } from 'vue';
+export declare type KeyType = '' | 'delete' | 'extra' | 'close';
+declare const _default: import("vue").DefineComponent<{
+    type: PropType<KeyType>;
+    text: (NumberConstructor | StringConstructor)[];
+    color: StringConstructor;
+    wider: BooleanConstructor;
+    large: BooleanConstructor;
+    loading: BooleanConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "press"[], "press", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: PropType<KeyType>;
+    text: (NumberConstructor | StringConstructor)[];
+    color: StringConstructor;
+    wider: BooleanConstructor;
+    large: BooleanConstructor;
+    loading: BooleanConstructor;
+}>> & {
+    onPress?: ((...args: any[]) => any) | undefined;
+}, {
+    loading: boolean;
+    large: boolean;
+    wider: boolean;
+}>;
+export default _default;

package/es/number-keyboard/NumberKeyboardKey.mjs

@@ -0,0 +1,89 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, defineComponent } from "vue";
+import { numericProp, createNamespace, preventDefault } from "../utils/index.mjs";
+import { useTouch } from "../composables/use-touch.mjs";
+import { Loading } from "../loading/index.mjs";
+import ZtIcon from "../icon/index.mjs";
+const [name, bem] = createNamespace("key");
+const CollapseIcon = _createVNode(ZtIcon, {
+  "name": "keyboard-shrink",
+  "size": "40"
+}, null);
+const DeleteIcon = _createVNode(ZtIcon, {
+  "name": "backspace",
+  "size": "40"
+}, null);
+var stdin_default = defineComponent({
+  name,
+  props: {
+    type: String,
+    text: numericProp,
+    color: String,
+    wider: Boolean,
+    large: Boolean,
+    loading: Boolean
+  },
+  emits: ["press"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const active = ref(false);
+    const touch = useTouch();
+    const onTouchStart = (event) => {
+      touch.start(event);
+      active.value = true;
+    };
+    const onTouchMove = (event) => {
+      touch.move(event);
+      if (touch.direction.value) {
+        active.value = false;
+      }
+    };
+    const onTouchEnd = (event) => {
+      if (active.value) {
+        if (!slots.default) {
+          preventDefault(event);
+        }
+        active.value = false;
+        emit("press", props.text, props.type);
+      }
+    };
+    const renderContent = () => {
+      if (props.loading) {
+        return _createVNode(Loading, {
+          "class": bem("loading-icon")
+        }, null);
+      }
+      const text = slots.default ? slots.default() : props.text;
+      switch (props.type) {
+        case "delete":
+          return text || DeleteIcon;
+        case "extra":
+          return text || CollapseIcon;
+        default:
+          return text;
+      }
+    };
+    return () => _createVNode("div", {
+      "class": bem("wrapper", {
+        wider: props.wider
+      }),
+      "onTouchstart": onTouchStart,
+      "onTouchmove": onTouchMove,
+      "onTouchend": onTouchEnd,
+      "onTouchcancel": onTouchEnd
+    }, [_createVNode("div", {
+      "role": "button",
+      "tabindex": 0,
+      "class": bem([props.color, {
+        large: props.large,
+        active: active.value,
+        delete: props.type === "delete"
+      }])
+    }, [renderContent()])]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/number-keyboard/index.css

@@ -1 +1 @@
-.zt-number-keyboard{position:fixed;bottom:0;left:0;z-index:100;width:calc(100% - 24px);padding:16px 8px 8px 16px;background-color:#f2f3f5;-webkit-user-select:none;user-select:none}.zt-number-keyboard--with-title{border-radius:20px 20px 0 0}.zt-number-keyboard__header{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;box-sizing:content-box;height:34px;padding-top:6px;color:#646566;font-size:16px}.zt-number-keyboard__title{display:inline-block;font-weight:400}.zt-number-keyboard__title-left{position:absolute;left:0}.zt-number-keyboard__body{display:-webkit-box;display:-webkit-flex;display:flex}.zt-number-keyboard__keys{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:3;-webkit-flex:3;flex:3;-webkit-flex-wrap:wrap;flex-wrap:wrap}.zt-number-keyboard__close{position:absolute;right:0;height:100%;padding:0 16px;color:#576b95;font-size:14px;background-color:transparent;border:none;cursor:pointer}.zt-number-keyboard__close:active{opacity:.7}.zt-number-keyboard__sidebar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.zt-number-keyboard--unfit{padding-bottom:0}.zt-key{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:44px;font-size:28px;line-height:1.5;background-color:#fff;border-radius:8px;cursor:pointer}.zt-key--large{position:absolute;top:0;right:6px;bottom:6px;left:0;height:auto}.zt-key--blue,.zt-key--delete{font-size:16px}.zt-key--active{background-color:#ebedf0}.zt-key--blue{color:#fff;background-color:#0091fa}.zt-key--blue.zt-key--active{background-color:#0073c7}.zt-key__wrapper{position:relative;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-flex-basis:33%;flex-basis:33%;box-sizing:border-box;padding:0 8px 8px 0}.zt-key__wrapper--wider{-webkit-flex-basis:66%;flex-basis:66%}.zt-key__delete-icon{width:32px;height:22px}.zt-key__collapse-icon{width:30px;height:24px}.zt-key__loading-icon{color:#fff}.zt-cell .zt-field__label{color:rgba(0,0,0,.6)}
+body{--zt-number-keyboard-background: #edf3fa;--zt-number-keyboard-key-height: 44px;--zt-number-keyboard-key-font-size: 24px;--zt-number-keyboard-key-active-color: var(--zt-gray-3);--zt-number-keyboard-key-background: var(--zt-background-2);--zt-number-keyboard-delete-font-size: 20px;--zt-number-keyboard-title-color: var(--zt-gray-7);--zt-number-keyboard-title-height: 34px;--zt-number-keyboard-title-font-size: 14px;--zt-number-keyboard-close-padding: 0 var(--zt-padding-md);--zt-number-keyboard-close-color: var(--zt-link-color);--zt-number-keyboard-close-font-size: var(--zt-font-size-md);--zt-number-keyboard-button-text-color: var(--zt-white);--zt-number-keyboard-button-background: var(--zt-primary-color);--zt-number-keyboard-z-index: 100;--zt-number-keyboard-key-spacing: 0 8px 8px 0;--zt-number-keyboard-radius: 16px 16px 0 0;--zt-key-font-color: var(--zt-text-color)}.zt-theme-dark{--zt-number-keyboard-background: var(--zt-gray-8);--zt-number-keyboard-key-background: var(--zt-gray-7);--zt-number-keyboard-key-active-color: var(--zt-gray-6)}.zt-number-keyboard{position:fixed;bottom:0;left:0;z-index:var(--zt-number-keyboard-z-index);width:100%;padding-bottom:8px;background:var(--zt-number-keyboard-background);-webkit-user-select:none;user-select:none;border-radius:var(--zt-number-keyboard-radius);box-sizing:border-box}.zt-number-keyboard--with-title{border-radius:20px 20px 0 0}.zt-number-keyboard__header{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:content-box;height:var(--zt-number-keyboard-title-height);padding-top:2px;color:var(--zt-number-keyboard-title-color)}.zt-number-keyboard__title{display:inline-block;font-weight:400;color:#2d4b73;opacity:.6;line-height:20px;font-size:var(--zt-number-keyboard-title-font-size)}.zt-number-keyboard__title-left{position:absolute;left:0}.zt-number-keyboard__body{display:flex;padding:2px 8px 0 16px}.zt-number-keyboard__body-no-title{padding-top:16px}.zt-number-keyboard__keys{display:flex;flex:3;flex-wrap:wrap}.zt-number-keyboard__close{position:absolute;right:0;height:100%;padding:var(--zt-number-keyboard-close-padding);color:var(--zt-number-keyboard-close-color);font-size:var(--zt-number-keyboard-close-font-size);background-color:transparent;border:none}.zt-number-keyboard__sidebar{display:flex;flex:1;flex-direction:column}.zt-number-keyboard--unfit{padding-bottom:0}.zt-key{display:flex;align-items:center;justify-content:center;height:var(--zt-number-keyboard-key-height);font-size:var(--zt-number-keyboard-key-font-size);line-height:40px;background:var(--zt-number-keyboard-key-background);border-radius:var(--zt-radius-md);cursor:pointer;color:var(--zt-key-font-color)}.zt-key--large{position:absolute;top:0;right:6px;bottom:8px;left:0;height:auto}.zt-key--blue,.zt-key--delete{font-size:var(--zt-number-keyboard-delete-font-size)}.zt-key--active{background-color:var(--zt-number-keyboard-key-active-color)}.zt-key--blue{color:var(--zt-number-keyboard-button-text-color);background:var(--zt-number-keyboard-button-background);line-height:28px;letter-spacing:0}.zt-key--blue.zt-key--active{opacity:var(--zt-active-opacity)}.zt-key__wrapper{position:relative;flex:1;flex-basis:33%;box-sizing:border-box;padding:var(--zt-number-keyboard-key-spacing)}.zt-key__wrapper--wider{flex-basis:66%}.zt-key__delete-icon{width:40px;height:40px}.zt-key__collapse-icon{width:30px;height:24px}.zt-key__loading-icon{color:var(--zt-number-keyboard-button-text-color)}.zt-number-keyboard__finish-button-box{padding:4px 16px 12px}.zt-number-keyboard__no-title{padding-bottom:0}

package/es/number-keyboard/index.d.ts

@@ -0,0 +1,119 @@
+export declare const NumberKeyboard: import("../utils").WithInstall<import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    title: StringConstructor;
+    theme: {
+        type: import("vue").PropType<import("./NumberKeyboard").NumberKeyboardTheme>;
+        default: import("./NumberKeyboard").NumberKeyboardTheme;
+    };
+    zIndex: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    maxlength: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    modelValue: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    transition: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    blurOnClose: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showDeleteKey: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    randomKeyOrder: BooleanConstructor;
+    closeButtonText: StringConstructor;
+    deleteButtonText: StringConstructor;
+    closeButtonLoading: BooleanConstructor;
+    hideOnClickOutside: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    safeAreaInsetBottom: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    extraKey: {
+        type: import("vue").PropType<string | string[]>;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "hide" | "show" | "close" | "blur" | "delete" | "update:modelValue")[], "input" | "hide" | "show" | "close" | "blur" | "delete" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    show: BooleanConstructor;
+    title: StringConstructor;
+    theme: {
+        type: import("vue").PropType<import("./NumberKeyboard").NumberKeyboardTheme>;
+        default: import("./NumberKeyboard").NumberKeyboardTheme;
+    };
+    zIndex: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    maxlength: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    modelValue: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    transition: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    blurOnClose: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showDeleteKey: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    randomKeyOrder: BooleanConstructor;
+    closeButtonText: StringConstructor;
+    deleteButtonText: StringConstructor;
+    closeButtonLoading: BooleanConstructor;
+    hideOnClickOutside: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    safeAreaInsetBottom: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    extraKey: {
+        type: import("vue").PropType<string | string[]>;
+        default: string;
+    };
+}>> & {
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onHide?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
+    onDelete?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    theme: import("./NumberKeyboard").NumberKeyboardTheme;
+    show: boolean;
+    transition: boolean;
+    safeAreaInsetBottom: boolean;
+    maxlength: string | number;
+    modelValue: string;
+    blurOnClose: boolean;
+    showDeleteKey: boolean;
+    randomKeyOrder: boolean;
+    closeButtonLoading: boolean;
+    hideOnClickOutside: boolean;
+    extraKey: string | string[];
+}>>;
+export default NumberKeyboard;
+export type { NumberKeyboardProps, NumberKeyboardTheme, } from './NumberKeyboard';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtNumberKeyboard: typeof NumberKeyboard;
+    }
+}

package/es/number-keyboard/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _NumberKeyboard from "./NumberKeyboard.mjs";
+const NumberKeyboard = withInstall(_NumberKeyboard);
+var stdin_default = NumberKeyboard;
+export {
+  NumberKeyboard,
+  stdin_default as default
+};

package/es/number-keyboard/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/number-keyboard/style/index.mjs

@@ -0,0 +1,9 @@
+import "../../style/base.css";
+import "../../badge/index.css";
+import "../../icon/index.css";
+import "../../loading/index.css";
+import "../../button/index.css";
+import "../../overlay/index.css";
+import "../../popup/index.css";
+import "../../toast/index.css";
+import "../index.css";

package/es/overlay/Overlay.d.ts

@@ -0,0 +1,51 @@
+import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+declare const overlayProps: {
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    duration: (NumberConstructor | StringConstructor)[];
+    className: PropType<unknown>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    customStyle: PropType<CSSProperties>;
+};
+export declare type OverlayProps = ExtractPropTypes<typeof overlayProps>;
+declare const _default: import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    duration: (NumberConstructor | StringConstructor)[];
+    className: PropType<unknown>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    customStyle: PropType<CSSProperties>;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    duration: (NumberConstructor | StringConstructor)[];
+    className: PropType<unknown>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    customStyle: PropType<CSSProperties>;
+}>>, {
+    show: boolean;
+    lockScroll: boolean;
+    lazyRender: boolean;
+}>;
+export default _default;

package/es/overlay/Overlay.mjs

@@ -0,0 +1,47 @@
+import { withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
+import { Transition, defineComponent } from "vue";
+import { noop, isDef, extend, truthProp, numericProp, unknownProp, preventDefault, createNamespace, getZIndexStyle } from "../utils/index.mjs";
+import { useLazyRender } from "../composables/use-lazy-render.mjs";
+const [name, bem] = createNamespace("overlay");
+const overlayProps = {
+  show: Boolean,
+  zIndex: numericProp,
+  duration: numericProp,
+  className: unknownProp,
+  lockScroll: truthProp,
+  lazyRender: truthProp,
+  customStyle: Object
+};
+var stdin_default = defineComponent({
+  name,
+  props: overlayProps,
+  setup(props, {
+    slots
+  }) {
+    const lazyRender = useLazyRender(() => props.show || !props.lazyRender);
+    const preventTouchMove = (event) => {
+      preventDefault(event, true);
+    };
+    const renderOverlay = lazyRender(() => {
+      var _a;
+      const style = extend(getZIndexStyle(props.zIndex), props.customStyle);
+      if (isDef(props.duration)) {
+        style.animationDuration = `${props.duration}s`;
+      }
+      return _withDirectives(_createVNode("div", {
+        "style": style,
+        "class": [bem(), props.className],
+        "onTouchmove": props.lockScroll ? preventTouchMove : noop
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), [[_vShow, props.show]]);
+    });
+    return () => _createVNode(Transition, {
+      "name": "zt-fade",
+      "appear": true
+    }, {
+      default: renderOverlay
+    });
+  }
+});
+export {
+  stdin_default as default
+};

package/es/overlay/index.css

@@ -1 +1 @@
-.zt-overlay{position:fixed;top:0;left:0;z-index:1;width:100%;height:100%;background-color:rgba(0,0,0,.4)}
+body{--zt-overlay-z-index: 1;--zt-overlay-background: rgba(0, 0, 0, .7)}.zt-overlay{position:fixed;top:0;left:0;z-index:var(--zt-overlay-z-index);width:100%;height:100%;background:var(--zt-overlay-background)}

package/es/overlay/index.d.ts

@@ -0,0 +1,40 @@
+export declare const Overlay: import("../utils").WithInstall<import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    duration: (NumberConstructor | StringConstructor)[];
+    className: import("vue").PropType<unknown>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    customStyle: import("vue").PropType<import("vue").CSSProperties>;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    duration: (NumberConstructor | StringConstructor)[];
+    className: import("vue").PropType<unknown>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    customStyle: import("vue").PropType<import("vue").CSSProperties>;
+}>>, {
+    show: boolean;
+    lockScroll: boolean;
+    lazyRender: boolean;
+}>>;
+export default Overlay;
+export type { OverlayProps } from './Overlay';
+declare module 'vue' {
+    interface GlobalComponents {
+        VanOverlay: typeof Overlay;
+    }
+}

package/es/overlay/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _Overlay from "./Overlay.mjs";
+const Overlay = withInstall(_Overlay);
+var stdin_default = Overlay;
+export {
+  Overlay,
+  stdin_default as default
+};

package/es/overlay/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/overlay/style/index.mjs

@@ -0,0 +1,2 @@
+import "../../style/base.css";
+import "../index.css";