zartui 3.0.2 → 3.0.4

package/lib/popover/Popover.js

@@ -0,0 +1,205 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default,
+  popoverProps: () => popoverProps
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_popperjs = require("@zartui/popperjs");
+var import_utils = require("../utils");
+var import_use = require("@zartui/use");
+var import_icon = require("../icon");
+var import_popup = require("../popup");
+const [name, bem] = (0, import_utils.createNamespace)("popover");
+const popupProps = ["show", "overlay", "duration", "teleport", "overlayStyle", "overlayClass", "closeOnClickOverlay"];
+const popoverProps = {
+  show: Boolean,
+  theme: (0, import_utils.makeStringProp)("light"),
+  overlay: Boolean,
+  actions: (0, import_utils.makeArrayProp)(),
+  trigger: (0, import_utils.makeStringProp)("click"),
+  duration: import_utils.numericProp,
+  showArrow: import_utils.truthProp,
+  placement: (0, import_utils.makeStringProp)("bottom"),
+  iconPrefix: String,
+  overlayClass: import_utils.unknownProp,
+  overlayStyle: Object,
+  closeOnClickAction: import_utils.truthProp,
+  closeOnClickOverlay: import_utils.truthProp,
+  closeOnClickOutside: import_utils.truthProp,
+  offset: {
+    type: Array,
+    default: () => [0, 8]
+  },
+  teleport: {
+    type: [String, Object],
+    default: "body"
+  }
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: popoverProps,
+  emits: ["select", "touchstart", "update:show"],
+  setup(props, {
+    emit,
+    slots,
+    attrs
+  }) {
+    let popper;
+    const popupRef = (0, import_vue2.ref)();
+    const wrapperRef = (0, import_vue2.ref)();
+    const popoverRef = (0, import_vue2.ref)();
+    const getPopoverOptions = () => ({
+      placement: props.placement,
+      modifiers: [{
+        name: "computeStyles",
+        options: {
+          adaptive: false,
+          gpuAcceleration: false
+        }
+      }, (0, import_utils.extend)({}, import_popperjs.offsetModifier, {
+        options: {
+          offset: props.offset
+        }
+      })]
+    });
+    const createPopperInstance = () => {
+      if (wrapperRef.value && popoverRef.value) {
+        return (0, import_popperjs.createPopper)(wrapperRef.value, popoverRef.value.popupRef.value, getPopoverOptions());
+      }
+      return null;
+    };
+    const updateLocation = () => {
+      (0, import_vue2.nextTick)(() => {
+        if (!props.show) {
+          return;
+        }
+        if (!popper) {
+          popper = createPopperInstance();
+        } else {
+          popper.setOptions(getPopoverOptions());
+        }
+      });
+    };
+    const updateShow = (value) => emit("update:show", value);
+    const onClickWrapper = () => {
+      if (props.trigger === "click") {
+        updateShow(!props.show);
+      }
+    };
+    const onClickAction = (action, index) => {
+      if (action.disabled) {
+        return;
+      }
+      props.actions.forEach((action1) => {
+        action1.selected = false;
+      });
+      action.selected = true;
+      emit("select", action, index);
+      if (props.closeOnClickAction) {
+        updateShow(false);
+      }
+    };
+    const onClickAway = () => {
+      if (props.show && props.closeOnClickOutside && (!props.overlay || props.closeOnClickOverlay)) {
+        updateShow(false);
+      }
+    };
+    const renderActionContent = (action, index) => {
+      if (slots.action) {
+        return slots.action({
+          action,
+          index
+        });
+      }
+      return [action.icon && (0, import_vue.createVNode)(import_icon.Icon, {
+        "name": action.icon,
+        "classPrefix": props.iconPrefix,
+        "class": bem("action-icon")
+      }, null), (0, import_vue.createVNode)("div", {
+        "class": [bem("action-text"), import_utils.BORDER_BOTTOM]
+      }, [action.text])];
+    };
+    const renderAction = (action, index) => {
+      const {
+        icon,
+        color,
+        disabled,
+        className,
+        selected
+      } = action;
+      return (0, import_vue.createVNode)("div", {
+        "role": "menuitem",
+        "class": [bem("action", {
+          disabled,
+          "with-icon": icon
+        }), className],
+        "style": selected ? {
+          color: "#0091fa"
+        } : {
+          color
+        },
+        "tabindex": disabled ? void 0 : 0,
+        "aria-disabled": disabled || void 0,
+        "onClick": () => onClickAction(action, index)
+      }, [renderActionContent(action, index)]);
+    };
+    (0, import_vue2.onMounted)(() => {
+      updateLocation();
+      (0, import_vue2.watchEffect)(() => {
+        var _a;
+        popupRef.value = (_a = popoverRef.value) == null ? void 0 : _a.popupRef.value;
+      });
+    });
+    (0, import_vue2.onBeforeUnmount)(() => {
+      if (popper) {
+        popper.destroy();
+        popper = null;
+      }
+    });
+    (0, import_vue2.watch)(() => [props.show, props.offset, props.placement], updateLocation);
+    (0, import_use.useClickAway)(wrapperRef, onClickAway, {
+      eventName: "touchstart"
+    });
+    return () => {
+      var _a;
+      return (0, import_vue.createVNode)(import_vue.Fragment, null, [(0, import_vue.createVNode)("span", {
+        "ref": wrapperRef,
+        "class": bem("wrapper"),
+        "onClick": onClickWrapper
+      }, [(_a = slots.reference) == null ? void 0 : _a.call(slots)]), (0, import_vue.createVNode)(import_popup.Popup, (0, import_vue.mergeProps)({
+        "ref": popoverRef,
+        "class": bem([props.theme]),
+        "position": "",
+        "transition": "zt-popover-zoom",
+        "lockScroll": false,
+        "onUpdate:show": updateShow
+      }, attrs, (0, import_utils.pick)(props, popupProps)), {
+        default: () => [props.showArrow && (0, import_vue.createVNode)("div", {
+          "class": bem("arrow")
+        }, null), (0, import_vue.createVNode)("div", {
+          "role": "menu",
+          "class": bem("content")
+        }, [slots.default ? slots.default() : props.actions.map(renderAction)])]
+      })]);
+    };
+  }
+});

package/lib/popover/index.css

@@ -0,0 +1 @@
+:root{--zt-popover-arrow-size: 6px;--zt-popover-radius: var(--zt-radius-lg);--zt-popover-action-width: 120px;--zt-popover-action-height: 40px;--zt-popover-action-font-size: var(--zt-font-size-md);--zt-popover-action-line-height: var(--zt-line-height-md);--zt-popover-action-icon-size: 20px;--zt-popover-light-text-color: var(--zt-text-color);--zt-popover-light-background: var(--zt-background-2);--zt-popover-light-action-disabled-text-color: var(--zt-text-color-3);--zt-popover-dark-text-color: var(--zt-white);--zt-popover-dark-background: #4a4a4a;--zt-popover-dark-action-disabled-text-color: var(--zt-text-color-2)}.zt-popover{position:absolute;overflow:visible;background-color:transparent;transition:opacity .15s,transform .15s}.zt-popover__wrapper{display:inline-block}.zt-popover__arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;border-width:var(--zt-popover-arrow-size)}.zt-popover__content{overflow:hidden;border-radius:var(--zt-popover-radius)}.zt-popover__action{position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--zt-popover-action-width);height:var(--zt-popover-action-height);padding:0 var(--zt-padding-md);font-size:var(--zt-popover-action-font-size);line-height:var(--zt-line-height-md);cursor:pointer}.zt-popover__action:last-child .zt-popover__action-text:after{display:none}.zt-popover__action-text{display:flex;flex:1;align-items:center;justify-content:center;height:100%}.zt-popover__action-icon{margin-right:var(--zt-padding-xs);font-size:var(--zt-popover-action-icon-size)}.zt-popover__action--with-icon .zt-popover__action-text{justify-content:flex-start}.zt-popover[data-popper-placement^=top] .zt-popover__arrow{bottom:0;border-top-color:currentColor;border-bottom-width:0;transform:translate(-50%);margin-bottom:calc(var(--zt-popover-arrow-size) * -1)}.zt-popover[data-popper-placement=top]{transform-origin:50% 100%}.zt-popover[data-popper-placement=top] .zt-popover__arrow{left:50%}.zt-popover[data-popper-placement=top-start]{transform-origin:0 100%}.zt-popover[data-popper-placement=top-start] .zt-popover__arrow{left:var(--zt-padding-md)}.zt-popover[data-popper-placement=top-end]{transform-origin:100% 100%}.zt-popover[data-popper-placement=top-end] .zt-popover__arrow{right:var(--zt-padding-md)}.zt-popover[data-popper-placement^=left] .zt-popover__arrow{right:0;border-right-width:0;border-left-color:currentColor;transform:translateY(-50%);margin-right:calc(var(--zt-popover-arrow-size) * -1)}.zt-popover[data-popper-placement=left]{transform-origin:100% 50%}.zt-popover[data-popper-placement=left] .zt-popover__arrow{top:50%}.zt-popover[data-popper-placement=left-start]{transform-origin:100% 0}.zt-popover[data-popper-placement=left-start] .zt-popover__arrow{top:var(--zt-padding-md)}.zt-popover[data-popper-placement=left-end]{transform-origin:100% 100%}.zt-popover[data-popper-placement=left-end] .zt-popover__arrow{bottom:var(--zt-padding-md)}.zt-popover[data-popper-placement^=right] .zt-popover__arrow{left:0;border-right-color:currentColor;border-left-width:0;transform:translateY(-50%);margin-left:calc(var(--zt-popover-arrow-size) * -1)}.zt-popover[data-popper-placement=right]{transform-origin:0 50%}.zt-popover[data-popper-placement=right] .zt-popover__arrow{top:50%}.zt-popover[data-popper-placement=right-start]{transform-origin:0 0}.zt-popover[data-popper-placement=right-start] .zt-popover__arrow{top:var(--zt-padding-md)}.zt-popover[data-popper-placement=right-end]{transform-origin:0 100%}.zt-popover[data-popper-placement=right-end] .zt-popover__arrow{bottom:var(--zt-padding-md)}.zt-popover[data-popper-placement^=bottom] .zt-popover__arrow{top:0;border-top-width:0;border-bottom-color:currentColor;transform:translate(-50%);margin-top:calc(var(--zt-popover-arrow-size) * -1)}.zt-popover[data-popper-placement=bottom]{transform-origin:50% 0}.zt-popover[data-popper-placement=bottom] .zt-popover__arrow{left:50%}.zt-popover[data-popper-placement=bottom-start]{transform-origin:0 0}.zt-popover[data-popper-placement=bottom-start] .zt-popover__arrow{left:var(--zt-padding-md)}.zt-popover[data-popper-placement=bottom-end]{transform-origin:100% 0}.zt-popover[data-popper-placement=bottom-end] .zt-popover__arrow{right:var(--zt-padding-md)}.zt-popover--light{color:var(--zt-popover-light-text-color)}.zt-popover--light .zt-popover__content{background:var(--zt-popover-light-background);box-shadow:0 2px 12px rgba(50,50,51,.12)}.zt-popover--light .zt-popover__arrow{color:var(--zt-popover-light-background)}.zt-popover--light .zt-popover__action:active{background-color:var(--zt-active-color)}.zt-popover--light .zt-popover__action--selected{color:var(--zt-blue);cursor:not-allowed}.zt-popover--light .zt-popover__action--selected:active{background-color:transparent}.zt-popover--light .zt-popover__action--disabled{color:var(--zt-popover-light-action-disabled-text-color);cursor:not-allowed}.zt-popover--light .zt-popover__action--disabled:active{background-color:transparent}.zt-popover--dark{color:var(--zt-popover-dark-text-color)}.zt-popover--dark .zt-popover__content{background:var(--zt-popover-dark-background)}.zt-popover--dark .zt-popover__arrow{color:var(--zt-popover-dark-background)}.zt-popover--dark .zt-popover__action:active{background-color:rgba(0,0,0,.2)}.zt-popover--dark .zt-popover__action--disabled{color:var(--zt-popover-dark-action-disabled-text-color)}.zt-popover--dark .zt-popover__action--disabled:active{background-color:transparent}.zt-popover--dark .zt-popover__action-text:after{border-color:var(--zt-gray-7)}.zt-popover-zoom-enter-from,.zt-popover-zoom-leave-active{transform:scale(.8);opacity:0}.zt-popover-zoom-enter-active{transition-timing-function:var(--zt-ease-out)}.zt-popover-zoom-leave-active{transition-timing-function:var(--zt-ease-in)}

package/lib/popover/index.d.ts

@@ -0,0 +1,121 @@
+export declare const Popover: import("../utils").WithInstall<import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    theme: {
+        type: import("vue").PropType<import("./types").PopoverTheme>;
+        default: import("./types").PopoverTheme;
+    };
+    overlay: BooleanConstructor;
+    actions: {
+        type: import("vue").PropType<import("./types").PopoverAction[]>;
+        default: () => import("./types").PopoverAction[];
+    };
+    trigger: {
+        type: import("vue").PropType<import("./types").PopoverTrigger>;
+        default: import("./types").PopoverTrigger;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    showArrow: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    placement: {
+        type: import("vue").PropType<import("./types").PopoverPlacement>;
+        default: import("./types").PopoverPlacement;
+    };
+    iconPrefix: StringConstructor;
+    overlayClass: import("vue").PropType<unknown>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    closeOnClickAction: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOutside: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    offset: {
+        type: import("vue").PropType<[number, number]>;
+        default: () => number[];
+    };
+    teleport: {
+        type: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "touchstart" | "update:show")[], "select" | "touchstart" | "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    show: BooleanConstructor;
+    theme: {
+        type: import("vue").PropType<import("./types").PopoverTheme>;
+        default: import("./types").PopoverTheme;
+    };
+    overlay: BooleanConstructor;
+    actions: {
+        type: import("vue").PropType<import("./types").PopoverAction[]>;
+        default: () => import("./types").PopoverAction[];
+    };
+    trigger: {
+        type: import("vue").PropType<import("./types").PopoverTrigger>;
+        default: import("./types").PopoverTrigger;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    showArrow: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    placement: {
+        type: import("vue").PropType<import("./types").PopoverPlacement>;
+        default: import("./types").PopoverPlacement;
+    };
+    iconPrefix: StringConstructor;
+    overlayClass: import("vue").PropType<unknown>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    closeOnClickAction: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOutside: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    offset: {
+        type: import("vue").PropType<[number, number]>;
+        default: () => number[];
+    };
+    teleport: {
+        type: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+        default: string;
+    };
+}>> & {
+    onSelect?: ((...args: any[]) => any) | undefined;
+    onTouchstart?: ((...args: any[]) => any) | undefined;
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+}, {
+    offset: [number, number];
+    theme: import("./types").PopoverTheme;
+    show: boolean;
+    overlay: boolean;
+    teleport: string | import("vue").RendererElement | null | undefined;
+    closeOnClickOverlay: boolean;
+    actions: import("./types").PopoverAction[];
+    closeOnClickAction: boolean;
+    closeOnClickOutside: boolean;
+    trigger: import("./types").PopoverTrigger;
+    showArrow: boolean;
+    placement: import("./types").PopoverPlacement;
+}>>;
+export default Popover;
+export { popoverProps } from './Popover';
+export type { PopoverProps } from './Popover';
+export type { PopoverTheme, PopoverAction, PopoverTrigger, PopoverPlacement, } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtPopover: typeof Popover;
+    }
+}

package/lib/popover/index.js

@@ -0,0 +1,35 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  Popover: () => Popover,
+  default: () => stdin_default,
+  popoverProps: () => import_Popover2.popoverProps
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_utils = require("../utils");
+var import_Popover = __toESM(require("./Popover"));
+var import_Popover2 = require("./Popover");
+const Popover = (0, import_utils.withInstall)(import_Popover.default);
+var stdin_default = Popover;

package/lib/popover/style/index.d.ts

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

package/lib/popover/style/index.js

@@ -0,0 +1,6 @@
+require("../../style/base.css");
+require("../../badge/index.css");
+require("../../icon/index.css");
+require("../../overlay/index.css");
+require("../../popup/index.css");
+require("../index.css");

package/lib/popover/types.d.ts

@@ -0,0 +1,11 @@
+export declare type PopoverTheme = 'light' | 'dark';
+export declare type PopoverTrigger = 'manual' | 'click';
+export declare type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+export declare type PopoverAction = {
+    text: string;
+    icon?: string;
+    color?: string;
+    disabled?: boolean;
+    className?: string;
+    [key: PropertyKey]: any;
+};

package/lib/popover/types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+module.exports = __toCommonJS(stdin_exports);

package/lib/popup/Popup.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ExtractPropTypes } from 'vue';
+import type { CSSProperties, ExtractPropTypes } from 'vue';
 import type { PopupPosition, PopupCloseIconPosition } from './types';
 declare const popupProps: {
     show: BooleanConstructor;
@@ -45,6 +45,19 @@ declare const popupProps: {
     };
     safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: BooleanConstructor;
+    sliderContentHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    maxDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    slideable: BooleanConstructor;
 };
 export declare type PopupProps = ExtractPropTypes<typeof popupProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -92,7 +105,20 @@ declare const _default: import("vue").DefineComponent<{
     };
     safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: BooleanConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon")[], "open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    sliderContentHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    maxDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    slideable: BooleanConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "keydown" | "open" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon")[], "open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     show: BooleanConstructor;
     zIndex: (NumberConstructor | StringConstructor)[];
     overlay: {
@@ -137,6 +163,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: BooleanConstructor;
+    sliderContentHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    maxDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    slideable: BooleanConstructor;
 }>> & {
     onKeydown?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
@@ -148,18 +187,22 @@ declare const _default: import("vue").DefineComponent<{
     onClickCloseIcon?: ((...args: any[]) => any) | undefined;
 }, {
     position: PopupPosition;
-    round: boolean;
-    overlay: boolean;
     show: boolean;
-    closeable: boolean;
+    overlay: boolean;
     lockScroll: boolean;
     lazyRender: boolean;
     transitionAppear: boolean;
     closeOnClickOverlay: boolean;
+    round: boolean;
     closeIcon: string;
+    closeable: boolean;
     closeOnPopstate: boolean;
     closeIconPosition: PopupCloseIconPosition;
     safeAreaInsetTop: boolean;
     safeAreaInsetBottom: boolean;
+    sliderContentHeight: number;
+    minDragHeight: string;
+    maxDragHeight: string;
+    slideable: boolean;
 }>;
 export default _default;

package/lib/popup/Popup.js

@@ -34,14 +34,18 @@ var import_overlay = require("../overlay");
 const popupProps = (0, import_utils.extend)({}, import_shared.popupSharedProps, {
   round: Boolean,
   position: (0, import_utils.makeStringProp)("center"),
-  closeIcon: (0, import_utils.makeStringProp)("cross"),
+  closeIcon: (0, import_utils.makeStringProp)("clear"),
   closeable: Boolean,
   transition: String,
   iconPrefix: String,
   closeOnPopstate: Boolean,
   closeIconPosition: (0, import_utils.makeStringProp)("top-right"),
   safeAreaInsetTop: Boolean,
-  safeAreaInsetBottom: Boolean
+  safeAreaInsetBottom: Boolean,
+  sliderContentHeight: (0, import_utils.makeNumberProp)(60),
+  minDragHeight: (0, import_utils.makeStringProp)("40px"),
+  maxDragHeight: (0, import_utils.makeStringProp)("85vh"),
+  slideable: Boolean
 });
 const [name, bem] = (0, import_utils.createNamespace)("popup");
 let globalZIndex = 2e3;
@@ -57,8 +61,14 @@ var stdin_default = (0, import_vue2.defineComponent)({
   }) {
     let opened;
     let shouldReopen;
+    const root = (0, import_vue2.ref)();
+    let timerId = setInterval(() => {
+    }, 0);
+    const contentStyle = (0, import_vue2.ref)(`height:${props.sliderContentHeight}px;`);
     const zIndex = (0, import_vue2.ref)();
     const popupRef = (0, import_vue2.ref)();
+    let touchPoint = 0;
+    const touchAreaHeight = (0, import_utils.unitToPx)(props.minDragHeight);
     const lazyRender = (0, import_use_lazy_render.useLazyRender)(() => props.show || !props.lazyRender);
     const style = (0, import_vue2.computed)(() => {
       const style2 = {
@@ -71,6 +81,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
       return style2;
     });
     const open = () => {
+      if (props.slideable) {
+        contentStyle.value = `height:${props.sliderContentHeight}px;`;
+      }
       if (!opened) {
         if (props.zIndex !== void 0) {
           globalZIndex = +props.zIndex;
@@ -97,6 +110,40 @@ var stdin_default = (0, import_vue2.defineComponent)({
         close();
       }
     };
+    const move = (event) => {
+      if (timerId) {
+        event.preventDefault();
+      }
+      const h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+      const positionY = event.touches[0].clientY || 0;
+      let touchHeight = 0;
+      timerId = setTimeout(() => {
+        if (positionY === 0 || positionY < h - (0, import_utils.unitToPx)(props.maxDragHeight)) {
+          return;
+        }
+        touchHeight = positionY - touchAreaHeight > h - touchAreaHeight ? h - touchAreaHeight + touchPoint : positionY;
+        contentStyle.value = `height:${h - touchHeight - touchAreaHeight + touchPoint}px;`;
+      }, 10);
+    };
+    const startMove = (event) => {
+      var _a, _b;
+      if (timerId) {
+        clearInterval(timerId);
+      }
+      touchPoint = event.touches[0].clientY - (((_b = (_a = popupRef.value) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.top) || 0);
+    };
+    const endMove = () => {
+      clearInterval(timerId);
+    };
+    (0, import_use.useEventListener)("touchmove", move, {
+      target: root
+    });
+    (0, import_use.useEventListener)("touchstart", startMove, {
+      target: root
+    });
+    (0, import_use.useEventListener)("touchend", endMove, {
+      target: root
+    });
     const renderOverlay = () => {
       if (props.overlay) {
         return (0, import_vue.createVNode)(import_overlay.Overlay, {
@@ -151,6 +198,24 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "onKeydown": onKeydown
       }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[import_vue.vShow, props.show]]);
     });
+    const sliderRenderPopup = lazyRender(() => {
+      var _a, _b;
+      return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", (0, import_vue.mergeProps)({
+        "class": bem("slider"),
+        "ref": popupRef,
+        "style": style.value,
+        "onKeydown": onKeydown
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon(), (0, import_vue.createVNode)("div", {
+        "class": bem("slider-title"),
+        "style": `height:${touchAreaHeight}px;`,
+        "ref": root
+      }, [(0, import_vue.createVNode)("div", {
+        "class": bem("slider-bar")
+      }, null)]), (0, import_vue.createVNode)("div", {
+        "class": bem("slider-content"),
+        "style": contentStyle.value
+      }, [(_b = slots.default) == null ? void 0 : _b.call(slots)])]), [[import_vue.vShow, props.show]]);
+    });
     const renderTransition = () => {
       const {
         position,
@@ -167,6 +232,22 @@ var stdin_default = (0, import_vue2.defineComponent)({
         default: renderPopup
       });
     };
+    const sliderRenderTransition = () => {
+      const {
+        position,
+        transition,
+        transitionAppear
+      } = props;
+      const name2 = position === "center" ? "zt-fade" : `zt-popup-slide-${position}`;
+      return (0, import_vue.createVNode)(import_vue2.Transition, {
+        "name": transition || name2,
+        "appear": transitionAppear,
+        "onAfterEnter": onOpened,
+        "onAfterLeave": onClosed
+      }, {
+        default: sliderRenderPopup
+      });
+    };
     (0, import_vue2.watch)(() => props.show, (show) => {
       if (show && !opened) {
         open();
@@ -218,6 +299,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
           default: () => [renderOverlay(), renderTransition()]
         });
       }
+      if (props.slideable) {
+        return (0, import_vue.createVNode)(import_vue.Fragment, null, [renderOverlay(), sliderRenderTransition()]);
+      }
       return (0, import_vue.createVNode)(import_vue.Fragment, null, [renderOverlay(), renderTransition()]);
     };
   }

package/lib/popup/index.css

@@ -1 +1 @@
-body{--zt-popup-background: var(--zt-background-2);--zt-popup-transition: transform var(--zt-duration-base);--zt-popup-round-radius: 16px;--zt-popup-close-icon-size: 22px;--zt-popup-close-icon-color: var(--zt-gray-5);--zt-popup-close-icon-margin: 16px;--zt-popup-close-icon-z-index: 1}.zt-overflow-hidden{overflow:hidden!important}.zt-popup{position:fixed;max-height:100%;overflow-y:auto;background:var(--zt-popup-background);transition:var(--zt-popup-transition);-webkit-overflow-scrolling:touch}.zt-popup--center{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.zt-popup--center.zt-popup--round{border-radius:var(--zt-popup-round-radius)}.zt-popup--top{top:0;left:0;width:100%}.zt-popup--top.zt-popup--round{border-radius:0 0 var(--zt-popup-round-radius) var(--zt-popup-round-radius)}.zt-popup--right{top:50%;right:0;transform:translate3d(0,-50%,0)}.zt-popup--right.zt-popup--round{border-radius:var(--zt-popup-round-radius) 0 0 var(--zt-popup-round-radius)}.zt-popup--bottom{bottom:0;left:0;width:100%}.zt-popup--bottom.zt-popup--round{border-radius:var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0 0}.zt-popup--left{top:50%;left:0;transform:translate3d(0,-50%,0)}.zt-popup--left.zt-popup--round{border-radius:0 var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0}.zt-popup-slide-top-enter-active,.zt-popup-slide-left-enter-active,.zt-popup-slide-right-enter-active,.zt-popup-slide-bottom-enter-active{transition-timing-function:var(--zt-ease-out)}.zt-popup-slide-top-leave-active,.zt-popup-slide-left-leave-active,.zt-popup-slide-right-leave-active,.zt-popup-slide-bottom-leave-active{transition-timing-function:var(--zt-ease-in)}.zt-popup-slide-top-enter-from,.zt-popup-slide-top-leave-active{transform:translate3d(0,-100%,0)}.zt-popup-slide-right-enter-from,.zt-popup-slide-right-leave-active{transform:translate3d(100%,-50%,0)}.zt-popup-slide-bottom-enter-from,.zt-popup-slide-bottom-leave-active{transform:translate3d(0,100%,0)}.zt-popup-slide-left-enter-from,.zt-popup-slide-left-leave-active{transform:translate3d(-100%,-50%,0)}.zt-popup__close-icon{position:absolute;z-index:var(--zt-popup-close-icon-z-index);color:var(--zt-popup-close-icon-color);font-size:var(--zt-popup-close-icon-size)}.zt-popup__close-icon--top-left{top:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--top-right{top:var(--zt-popup-close-icon-margin);right:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-left{bottom:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-right{right:var(--zt-popup-close-icon-margin);bottom:var(--zt-popup-close-icon-margin)}
+:root{--zt-popup-background: var(--zt-background-2);--zt-popup-transition: transform var(--zt-duration-base);--zt-popup-round-radius: 16px;--zt-popup-close-icon-size: 22px;--zt-popup-close-icon-color: var(--zt-gray-5);--zt-popup-close-icon-margin: 16px;--zt-popup-close-icon-z-index: 1}.zt-overflow-hidden{overflow:hidden!important}.zt-popup{position:fixed;max-height:100%;overflow-y:auto;background:var(--zt-popup-background);transition:var(--zt-popup-transition);-webkit-overflow-scrolling:touch}.zt-popup__slider{position:fixed;width:100%;bottom:0;border-radius:16px 16px 0 0;background-color:var(--zt-popup-background)}.zt-popup__slider-title{height:40px;text-align:center}.zt-popup__slider-bar{display:inline-block;width:32px;height:4px;transform:scaleY(-1);background:rgba(45,75,115,.2);border-radius:3px}.zt-popup__slider-content{overflow-y:auto}.zt-popup--center{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.zt-popup--center.zt-popup--round{border-radius:var(--zt-popup-round-radius)}.zt-popup--top{top:0;left:0;width:100%}.zt-popup--top.zt-popup--round{border-radius:0 0 var(--zt-popup-round-radius) var(--zt-popup-round-radius)}.zt-popup--right{top:50%;right:0;transform:translate3d(0,-50%,0)}.zt-popup--right.zt-popup--round{border-radius:var(--zt-popup-round-radius) 0 0 var(--zt-popup-round-radius)}.zt-popup--bottom{bottom:0;left:0;width:100%}.zt-popup--bottom.zt-popup--round{border-radius:var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0 0}.zt-popup--left{top:50%;left:0;transform:translate3d(0,-50%,0)}.zt-popup--left.zt-popup--round{border-radius:0 var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0}.zt-popup-slide-top-enter-active,.zt-popup-slide-left-enter-active,.zt-popup-slide-right-enter-active,.zt-popup-slide-bottom-enter-active{transition-timing-function:var(--zt-ease-out)}.zt-popup-slide-top-leave-active,.zt-popup-slide-left-leave-active,.zt-popup-slide-right-leave-active,.zt-popup-slide-bottom-leave-active{transition-timing-function:var(--zt-ease-in)}.zt-popup-slide-top-enter-from,.zt-popup-slide-top-leave-active{transform:translate3d(0,-100%,0)}.zt-popup-slide-right-enter-from,.zt-popup-slide-right-leave-active{transform:translate3d(100%,-50%,0)}.zt-popup-slide-bottom-enter-from,.zt-popup-slide-bottom-leave-active{transform:translate3d(0,100%,0)}.zt-popup-slide-left-enter-from,.zt-popup-slide-left-leave-active{transform:translate3d(-100%,-50%,0)}.zt-popup__slider-icon{z-index:var(--zt-popup-close-icon-z-index);color:var(--zt-popup-close-icon-color);font-size:var(--zt-popup-close-icon-size);cursor:pointer}.zt-popup__close-icon{position:absolute;z-index:var(--zt-popup-close-icon-z-index);color:var(--zt-popup-close-icon-color);font-size:var(--zt-popup-close-icon-size)}.zt-popup__close-icon--top-left{top:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--top-right{top:var(--zt-popup-close-icon-margin);right:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-left{bottom:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-right{right:var(--zt-popup-close-icon-margin);bottom:var(--zt-popup-close-icon-margin)}