zartui 3.0.2 → 3.0.3

package/lib/dialog/index.d.ts

@@ -0,0 +1,138 @@
+export declare const Dialog: import("../utils").WithInstall<import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    title: StringConstructor;
+    theme: import("vue").PropType<import("./types").DialogTheme>;
+    width: (NumberConstructor | StringConstructor)[];
+    message: import("vue").PropType<import("./types").DialogMessage>;
+    callback: import("vue").PropType<(action?: import("./types").DialogAction | undefined) => void>;
+    allowHtml: BooleanConstructor;
+    className: import("vue").PropType<unknown>;
+    transition: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    messageAlign: import("vue").PropType<import("./types").DialogMessageAlign>;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showCancelButton: BooleanConstructor;
+    cancelButtonText: StringConstructor;
+    cancelButtonColor: StringConstructor;
+    cancelButtonDisabled: BooleanConstructor;
+    confirmButtonText: StringConstructor;
+    confirmButtonColor: StringConstructor;
+    confirmButtonDisabled: BooleanConstructor;
+    showConfirmButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOverlay: BooleanConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("keydown" | "update:show" | "cancel" | "confirm")[], "keydown" | "update:show" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    title: StringConstructor;
+    theme: import("vue").PropType<import("./types").DialogTheme>;
+    width: (NumberConstructor | StringConstructor)[];
+    message: import("vue").PropType<import("./types").DialogMessage>;
+    callback: import("vue").PropType<(action?: import("./types").DialogAction | undefined) => void>;
+    allowHtml: BooleanConstructor;
+    className: import("vue").PropType<unknown>;
+    transition: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    messageAlign: import("vue").PropType<import("./types").DialogMessageAlign>;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showCancelButton: BooleanConstructor;
+    cancelButtonText: StringConstructor;
+    cancelButtonColor: StringConstructor;
+    cancelButtonDisabled: BooleanConstructor;
+    confirmButtonText: StringConstructor;
+    confirmButtonColor: StringConstructor;
+    confirmButtonDisabled: BooleanConstructor;
+    showConfirmButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOverlay: BooleanConstructor;
+}>> & {
+    onKeydown?: ((...args: any[]) => any) | undefined;
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}, {
+    show: boolean;
+    overlay: boolean;
+    lockScroll: boolean;
+    lazyRender: boolean;
+    transitionAppear: boolean;
+    closeOnClickOverlay: boolean;
+    transition: string;
+    closeOnPopstate: boolean;
+    allowHtml: boolean;
+    showCancelButton: boolean;
+    cancelButtonDisabled: boolean;
+    confirmButtonDisabled: boolean;
+    showConfirmButton: boolean;
+}>>;
+export default Dialog;
+export { dialogProps } from './Dialog';
+export { showDialog, closeDialog, showConfirmDialog, setDialogDefaultOptions, resetDialogDefaultOptions, } from './function-call';
+export type { DialogProps } from './Dialog';
+export type { DialogTheme, DialogMessage, DialogOptions, DialogMessageAlign, } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtDialog: typeof Dialog;
+    }
+}

package/lib/dialog/index.js

@@ -0,0 +1,41 @@
+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, {
+  Dialog: () => Dialog,
+  closeDialog: () => import_function_call.closeDialog,
+  default: () => stdin_default,
+  dialogProps: () => import_Dialog2.dialogProps,
+  resetDialogDefaultOptions: () => import_function_call.resetDialogDefaultOptions,
+  setDialogDefaultOptions: () => import_function_call.setDialogDefaultOptions,
+  showConfirmDialog: () => import_function_call.showConfirmDialog,
+  showDialog: () => import_function_call.showDialog
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_utils = require("../utils");
+var import_Dialog = __toESM(require("./Dialog"));
+var import_Dialog2 = require("./Dialog");
+var import_function_call = require("./function-call");
+const Dialog = (0, import_utils.withInstall)(import_Dialog.default);
+var stdin_default = Dialog;

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

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

package/lib/dialog/style/index.js

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

package/lib/dialog/types.d.ts

@@ -0,0 +1,32 @@
+import type { CSSProperties, TeleportProps } from 'vue';
+import type { Interceptor, Numeric } from '../utils';
+export declare type DialogTheme = 'default' | 'round-button';
+export declare type DialogAction = 'confirm' | 'cancel';
+export declare type DialogMessage = string | (() => JSX.Element);
+export declare type DialogMessageAlign = 'left' | 'center' | 'right' | 'justify';
+export declare type DialogOptions = {
+    title?: string;
+    width?: Numeric;
+    theme?: DialogTheme;
+    message?: DialogMessage;
+    overlay?: boolean;
+    teleport?: TeleportProps['to'];
+    className?: unknown;
+    allowHtml?: boolean;
+    lockScroll?: boolean;
+    transition?: string;
+    beforeClose?: Interceptor;
+    messageAlign?: DialogMessageAlign;
+    overlayClass?: string;
+    overlayStyle?: CSSProperties;
+    closeOnPopstate?: boolean;
+    showCancelButton?: boolean;
+    showConfirmButton?: boolean;
+    cancelButtonText?: string;
+    cancelButtonColor?: string;
+    cancelButtonDisabled?: boolean;
+    confirmButtonText?: string;
+    confirmButtonColor?: string;
+    confirmButtonDisabled?: boolean;
+    closeOnClickOverlay?: boolean;
+};

package/lib/dialog/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/divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import { ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes } from 'vue';
 export declare type DividerContentPosition = 'left' | 'center' | 'right';
 declare const dividerProps: {
     dashed: BooleanConstructor;

package/lib/divider/index.css

@@ -1 +1 @@
-body{--zt-divider-margin: var(--zt-padding-md) 0;--zt-divider-text-color: var(--zt-text-color-2);--zt-divider-font-size: var(--zt-font-size-md);--zt-divider-line-height: 24px;--zt-divider-border-color: var(--zt-border-color);--zt-divider-content-padding: var(--zt-padding-md);--zt-divider-content-left-width: 10%;--zt-divider-content-right-width: 10%}.zt-divider{display:flex;align-items:center;margin:var(--zt-divider-margin);color:var(--zt-divider-text-color);font-size:var(--zt-divider-font-size);line-height:var(--zt-divider-line-height);border-color:var(--zt-divider-border-color);border-style:solid;border-width:0}.zt-divider:before,.zt-divider:after{display:block;flex:1;box-sizing:border-box;height:1px;border-color:inherit;border-style:inherit;border-width:var(--zt-border-width) 0 0}.zt-divider:before{content:""}.zt-divider--hairline:before,.zt-divider--hairline:after{transform:scaleY(.5)}.zt-divider--dashed{border-style:dashed}.zt-divider--content-center:before,.zt-divider--content-left:before,.zt-divider--content-right:before{margin-right:var(--zt-divider-content-padding)}.zt-divider--content-center:after,.zt-divider--content-left:after,.zt-divider--content-right:after{margin-left:var(--zt-divider-content-padding);content:""}.zt-divider--content-left:before{max-width:var(--zt-divider-content-left-width)}.zt-divider--content-right:after{max-width:var(--zt-divider-content-right-width)}
+:root{--zt-divider-margin: var(--zt-padding-md) 0;--zt-divider-text-color: var(--zt-text-color-2);--zt-divider-font-size: var(--zt-font-size-md);--zt-divider-line-height: 24px;--zt-divider-border-color: var(--zt-border-color);--zt-divider-content-padding: var(--zt-padding-md);--zt-divider-content-left-width: 10%;--zt-divider-content-right-width: 10%}.zt-divider{display:flex;align-items:center;margin:var(--zt-divider-margin);color:var(--zt-divider-text-color);font-size:var(--zt-divider-font-size);line-height:var(--zt-divider-line-height);border-color:var(--zt-divider-border-color);border-style:solid;border-width:0}.zt-divider:before,.zt-divider:after{display:block;flex:1;box-sizing:border-box;height:1px;border-color:inherit;border-style:inherit;border-width:var(--zt-border-width) 0 0}.zt-divider:before{content:""}.zt-divider--hairline:before,.zt-divider--hairline:after{transform:scaleY(.5)}.zt-divider--dashed{border-style:dashed}.zt-divider--content-center:before,.zt-divider--content-left:before,.zt-divider--content-right:before{margin-right:var(--zt-divider-content-padding)}.zt-divider--content-center:after,.zt-divider--content-left:after,.zt-divider--content-right:after{margin-left:var(--zt-divider-content-padding);content:""}.zt-divider--content-left:before{max-width:var(--zt-divider-content-left-width)}.zt-divider--content-right:after{max-width:var(--zt-divider-content-right-width)}

package/lib/dropdown-item/DropdownItem.d.ts

@@ -0,0 +1,78 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { DropdownItemOption } from './types';
+export declare const dropdownItemProps: {
+    title: StringConstructor;
+    options: {
+        type: PropType<DropdownItemOption[]>;
+        default: () => DropdownItemOption[];
+    };
+    disabled: BooleanConstructor;
+    teleport: PropType<string | import("vue").RendererElement | null | undefined>;
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    modelValue: PropType<unknown>;
+    modelValueArray: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    titleClass: PropType<unknown>;
+    multiSelect: BooleanConstructor;
+};
+export declare type DropdownItemProps = ExtractPropTypes<typeof dropdownItemProps>;
+declare const _default: import("vue").DefineComponent<{
+    title: StringConstructor;
+    options: {
+        type: PropType<DropdownItemOption[]>;
+        default: () => DropdownItemOption[];
+    };
+    disabled: BooleanConstructor;
+    teleport: PropType<string | import("vue").RendererElement | null | undefined>;
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    modelValue: PropType<unknown>;
+    modelValueArray: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    titleClass: PropType<unknown>;
+    multiSelect: BooleanConstructor;
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("reset" | "update:modelValue" | "change" | "close" | "open" | "opened" | "closed" | "confirm")[], "reset" | "open" | "update:modelValue" | "change" | "close" | "opened" | "closed" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    title: StringConstructor;
+    options: {
+        type: PropType<DropdownItemOption[]>;
+        default: () => DropdownItemOption[];
+    };
+    disabled: BooleanConstructor;
+    teleport: PropType<string | import("vue").RendererElement | null | undefined>;
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    modelValue: PropType<unknown>;
+    modelValueArray: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    titleClass: PropType<unknown>;
+    multiSelect: BooleanConstructor;
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onReset?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onOpened?: ((...args: any[]) => any) | undefined;
+    onClosed?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    lazyRender: boolean;
+    options: DropdownItemOption[];
+    modelValueArray: any[];
+    multiSelect: boolean;
+}>;
+export default _default;

package/lib/dropdown-item/DropdownItem.js

@@ -0,0 +1,321 @@
+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,
+  dropdownItemProps: () => dropdownItemProps
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("../utils");
+var import_DropdownMenu = require("../dropdown-menu/DropdownMenu");
+var import_use = require("@zartui/use");
+var import_use_expose = require("../composables/use-expose");
+var import_cell = require("../cell");
+var import_checkbox = require("../checkbox");
+var import_icon = require("../icon");
+var import_popup = require("../popup");
+var import_button = require("../button");
+const [name, bem] = (0, import_utils.createNamespace)("dropdown-item");
+const dropdownItemProps = {
+  title: String,
+  options: (0, import_utils.makeArrayProp)(),
+  disabled: Boolean,
+  teleport: [String, Object],
+  lazyRender: import_utils.truthProp,
+  modelValue: import_utils.unknownProp,
+  modelValueArray: (0, import_utils.makeArrayProp)(),
+  titleClass: import_utils.unknownProp,
+  multiSelect: Boolean
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: dropdownItemProps,
+  emits: ["open", "opened", "close", "closed", "change", "update:modelValue", "reset", "confirm"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const state = (0, import_vue2.reactive)({
+      showPopup: false,
+      transition: true,
+      showWrapper: false
+    });
+    const {
+      parent,
+      index
+    } = (0, import_use.useParent)(import_DropdownMenu.DROPDOWN_KEY);
+    const modelArray = (0, import_vue2.reactive)(props.modelValueArray);
+    if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[ZartUI] <DropdownItem> must be a child component of <DropdownMenu>.");
+      }
+      return;
+    }
+    const getEmitter = (name2) => () => emit(name2);
+    const onOpen = getEmitter("open");
+    const onOpened = getEmitter("opened");
+    const onClose = () => {
+      if (props.multiSelect) {
+        emit("close", modelArray);
+      } else {
+        emit("close");
+      }
+    };
+    const onClosed = () => {
+      state.showWrapper = false;
+      if (props.multiSelect) {
+        emit("closed", modelArray);
+      } else {
+        emit("closed");
+      }
+    };
+    const onClickWrapper = (event) => {
+      if (props.teleport) {
+        event.stopPropagation();
+      }
+    };
+    const onClickReset = () => {
+      props.options.forEach((item) => {
+        item.selected = false;
+      });
+      modelArray.splice(0);
+      state.showPopup = false;
+      emit("reset");
+    };
+    const onClickConfirm = () => {
+      state.showPopup = false;
+      emit("confirm", modelArray);
+    };
+    const toggle = (show = !state.showPopup, options = {}) => {
+      if (show === state.showPopup) {
+        return;
+      }
+      state.showPopup = show;
+      state.transition = !options.immediate;
+      if (show) {
+        state.showWrapper = true;
+      }
+    };
+    const renderTitle = () => {
+      if (slots.title) {
+        return slots.title();
+      }
+      if (props.title) {
+        return props.title;
+      }
+      if (props.multiSelect) {
+        let title = "";
+        props.options.forEach((item) => {
+          if (modelArray.indexOf(item.value) > -1) {
+            title += item.text + "\u3001";
+          }
+        });
+        if (title.length > 0) {
+          title = title.substring(0, title.length - 1);
+        }
+        return title || "\u672A\u9009\u62E9";
+      }
+      const match = props.options.find((option) => option.value === props.modelValue);
+      return match ? match.text : "";
+    };
+    const renderOption = (option) => {
+      const {
+        activeColor
+      } = parent.props;
+      let active = false;
+      if (props.multiSelect) {
+        if (option.selected) {
+          active = true;
+        }
+      } else {
+        active = option.value === props.modelValue;
+      }
+      const onClick = () => {
+        if (props.multiSelect) {
+          if (option.selected) {
+            option.selected = false;
+            modelArray.splice(modelArray.indexOf(option.value), 1);
+            emit("update:modelValue", -option.value);
+            emit("change", -option.value);
+          } else {
+            option.selected = true;
+            modelArray.push(option.value);
+            emit("update:modelValue", option.value);
+            emit("change", option.value);
+          }
+        } else {
+          state.showPopup = false;
+          if (option.value !== props.modelValue) {
+            emit("update:modelValue", option.value);
+            emit("change", option.value);
+          }
+        }
+      };
+      const renderIcon = () => {
+        if (props.multiSelect) {
+          return (0, import_vue.createVNode)(import_checkbox.Checkbox, {
+            "style": "padding:0;",
+            "model-value": option.selected
+          }, null);
+        }
+        if (active) {
+          return (0, import_vue.createVNode)(import_icon.Icon, {
+            "class": bem("icon"),
+            "color": activeColor,
+            "name": "success"
+          }, null);
+        }
+      };
+      if (props.multiSelect) {
+        return (0, import_vue.createVNode)(import_cell.Cell, {
+          "role": "menuitem",
+          "key": option.value,
+          "title-icon": option.icon,
+          "title": option.text,
+          "direction": "horizontal",
+          "class": [bem("option", {
+            active
+          }), import_utils.HAPTICS_FEEDBACK],
+          "style": {
+            color: option.selected ? activeColor : ""
+          },
+          "tabindex": option.selected ? 0 : -1,
+          "clickable": true,
+          "onClick": onClick
+        }, {
+          value: renderIcon
+        });
+      }
+      return (0, import_vue.createVNode)(import_cell.Cell, {
+        "role": "menuitem",
+        "key": option.value,
+        "title-icon": option.icon,
+        "title": option.text,
+        "direction": "horizontal",
+        "class": [bem("option", {
+          active
+        }), import_utils.HAPTICS_FEEDBACK],
+        "style": {
+          color: active ? activeColor : ""
+        },
+        "tabindex": active ? 0 : -1,
+        "clickable": true,
+        "onClick": onClick
+      }, {
+        value: renderIcon
+      });
+    };
+    const renderContent = () => {
+      const {
+        offset
+      } = parent;
+      const {
+        zIndex,
+        overlay,
+        duration,
+        direction,
+        closeOnClickOverlay
+      } = parent.props;
+      const style = (0, import_utils.getZIndexStyle)(zIndex);
+      const contentStyle = {};
+      const optionsStyle = {};
+      const buttonStyle = {};
+      if (direction === "down") {
+        style.top = `${offset.value}px`;
+        contentStyle.borderRadius = `0 0 16px 16px`;
+      } else {
+        style.bottom = `${offset.value}px`;
+        contentStyle.borderRadius = `16px 16px 0 0`;
+      }
+      if (props.multiSelect) {
+        const optionsLength = props.options.length;
+        if (optionsLength < 4) {
+          contentStyle.height = `${optionsLength * 44 + 68}px`;
+          optionsStyle.height = `${optionsLength * 44}px`;
+          buttonStyle.top = `${optionsLength * 44}px`;
+        } else {
+          contentStyle.height = `244px`;
+          optionsStyle.height = `175px`;
+          buttonStyle.top = `176px`;
+        }
+      }
+      return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
+        "style": style,
+        "class": bem([direction]),
+        "onClick": onClickWrapper
+      }, [(0, import_vue.createVNode)(import_popup.Popup, {
+        "show": state.showPopup,
+        "onUpdate:show": ($event) => state.showPopup = $event,
+        "role": "menu",
+        "class": bem("content"),
+        "style": contentStyle,
+        "overlay": overlay,
+        "position": direction === "down" ? "top" : "bottom",
+        "duration": state.transition ? duration : 0,
+        "lazyRender": props.lazyRender,
+        "overlayStyle": {
+          position: "absolute"
+        },
+        "aria-labelledby": `${parent.id}-${index.value}`,
+        "closeOnClickOverlay": closeOnClickOverlay,
+        "onOpen": onOpen,
+        "onClose": onClose,
+        "onOpened": onOpened,
+        "onClosed": onClosed
+      }, {
+        default: () => {
+          var _a;
+          return [(0, import_vue.withDirectives)((0, import_vue.createVNode)("div", null, [props.options.map(renderOption)]), [[import_vue.vShow, !props.multiSelect]]), (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
+            "class": bem("options"),
+            "style": optionsStyle
+          }, [props.options.map(renderOption)]), [[import_vue.vShow, props.multiSelect]]), (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
+            "class": bem("button"),
+            "style": buttonStyle
+          }, [(0, import_vue.createVNode)(import_button.Button, {
+            "onClick": onClickReset,
+            "class": bem("button-reset")
+          }, {
+            default: () => [(0, import_vue.createTextVNode)("\u91CD\u7F6E")]
+          }), (0, import_vue.createVNode)(import_button.Button, {
+            "onClick": onClickConfirm,
+            "class": bem("button-confirm")
+          }, {
+            default: () => [(0, import_vue.createTextVNode)("\u786E\u5B9A")]
+          })]), [[import_vue.vShow, props.multiSelect]]), (_a = slots.default) == null ? void 0 : _a.call(slots)];
+        }
+      })]), [[import_vue.vShow, state.showWrapper]]);
+    };
+    (0, import_use_expose.useExpose)({
+      state,
+      toggle,
+      renderTitle
+    });
+    return () => {
+      if (props.teleport) {
+        return (0, import_vue.createVNode)(import_vue2.Teleport, {
+          "to": props.teleport
+        }, {
+          default: () => [renderContent()]
+        });
+      }
+      return renderContent();
+    };
+  }
+});

package/lib/dropdown-item/index.css

@@ -0,0 +1 @@
+:root{--zt-dropdown-item-z-index: 10}.zt-dropdown-item{position:fixed;right:0;left:0;z-index:var(--zt-dropdown-item-z-index);overflow:hidden}.zt-dropdown-item__icon{display:block;line-height:inherit}.zt-dropdown-item__option{text-align:left}.zt-dropdown-item__option--active,.zt-dropdown-item__option--active .zt-dropdown-item__icon{color:var(--zt-dropdown-menu-option-active-color)}.zt-dropdown-item--up{top:0}.zt-dropdown-item--down{bottom:0}.zt-dropdown-item__content{position:absolute;max-height:var(--zt-dropdown-menu-content-max-height)}.zt-dropdown-item__options{position:absolute;top:0px;width:100%;overflow-y:scroll}.zt-dropdown-item__button{position:absolute;overflow-y:hidden;z-index:1;width:100%;display:flex;height:68px;border-top:1px solid rgba(0,0,0,.05);border-radius:0 0 16px 16px}.zt-dropdown-item__button-reset{margin-top:12px;margin-left:16px;margin-right:4px;border-color:#ff8700;color:#ff8700;background:#ffffff;width:50%}.zt-dropdown-item__button-confirm{margin-top:12px;margin-left:4px;margin-right:16px;width:50%;background-image:linear-gradient(-45deg,#3cafff 0%,#0091fa 100%);color:#fff}