zartui 3.1.12 → 3.1.14

package/lib/picker/Picker.d.ts

@@ -1,6 +1,6 @@
 import type { PropType, ExtractPropTypes } from 'vue';
 import { Numeric } from '../utils';
-import type { PickerColumn, PickerOption, PickerFieldNames, PickerToolbarPosition } from './types';
+import type { PickerColumn, PickerOption, PickerFieldNames, PickerShowType, PickerToolbarPosition } from './types';
 export declare const pickerSharedProps: {
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
@@ -87,6 +87,14 @@ export declare const pickerProps: {
         type: BooleanConstructor;
         default: true;
     };
+    showType: {
+        type: PropType<PickerShowType>;
+        default: PickerShowType;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
 };
 export type PickerProps = ExtractPropTypes<typeof pickerProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -143,7 +151,15 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "change" | "update:modelValue" | "confirm" | "update:showPicker" | "clickOption")[], "cancel" | "change" | "update:modelValue" | "confirm" | "update:showPicker" | "clickOption", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    showType: {
+        type: PropType<PickerShowType>;
+        default: PickerShowType;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "update:showPicker")[], "update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "update:showPicker", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
@@ -197,25 +213,35 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    showType: {
+        type: PropType<PickerShowType>;
+        default: PickerShowType;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
-    "onUpdate:showPicker"?: ((...args: any[]) => any) | undefined;
     onClickOption?: ((...args: any[]) => any) | undefined;
+    "onUpdate:showPicker"?: ((...args: any[]) => any) | undefined;
 }, {
     title: string;
     modelValue: Numeric[];
     readonly: boolean;
     popup: boolean;
     loading: boolean;
+    showType: PickerShowType;
     showTitle: boolean;
     columns: (PickerColumn | PickerOption)[];
     allowHtml: boolean;
     swipeDuration: string | number;
-    showPicker: boolean;
     showToolbar: boolean;
+    showPicker: boolean;
+    columnCounts: number;
     toolbarPosition: PickerToolbarPosition;
     optionHeight: string | number;
     visibleOptionNum: string | number;

package/lib/picker/Picker.js

@@ -43,6 +43,7 @@ var import_PickerColumn = __toESM(require("./PickerColumn"));
 var import_divider = require("../divider");
 var import_PickerToolbar = __toESM(require("./PickerToolbar"));
 var import_popup = __toESM(require("../popup"));
+var import_PickerOptions = __toESM(require("./PickerOptions"));
 const pickerSharedProps = (0, import_utils.extend)({
   loading: Boolean,
   readonly: Boolean,
@@ -61,7 +62,9 @@ const pickerProps = (0, import_utils.extend)({}, pickerSharedProps, {
   toolbarPosition: (0, import_utils.makeStringProp)("top"),
   columnsFieldNames: Object,
   showPicker: Boolean,
-  popup: import_utils.truthProp
+  popup: import_utils.truthProp,
+  showType: (0, import_utils.makeStringProp)("default"),
+  columnCounts: (0, import_utils.makeNumberProp)(3)
 });
 var stdin_default = (0, import_vue2.defineComponent)({
   name: import_utils2.name,
@@ -71,6 +74,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     emit,
     slots
   }) {
+    const pickerOptions = (0, import_vue2.ref)();
     const columnsRef = (0, import_vue2.ref)();
     const selectedValues = (0, import_vue2.ref)(props.modelValue.slice(0));
     const showPicker = (0, import_vue2.ref)(props.showPicker);
@@ -97,6 +101,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
     });
     const hasOptions = (0, import_vue2.computed)(() => currentColumns.value.some((options) => options.length));
     const selectedOptions = (0, import_vue2.computed)(() => currentColumns.value.map((options, index) => (0, import_utils2.findOptionByValue)(options, selectedValues.value[index], fields.value)));
+    const isButtonPicker = (0, import_vue2.computed)(() => {
+      return props.showType === "button" && columnsType.value === "default";
+    });
     (0, import_vue2.watch)(showPicker, (newValue) => {
       if (newValue !== props.showPicker) {
         emit("update:showPicker", newValue);
@@ -134,10 +141,12 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }, getEventParams()));
       });
     };
-    const onClickOption = (currentOption, columnIndex) => emit("clickOption", (0, import_utils.extend)({
-      columnIndex,
-      currentOption
-    }, getEventParams()));
+    const onClickOption = (currentOption, columnIndex) => {
+      emit("clickOption", (0, import_utils.extend)({
+        columnIndex,
+        currentOption
+      }, getEventParams()));
+    };
     const confirm = () => {
       children.forEach((child) => child.stopMomentum());
       const params = getEventParams();
@@ -219,7 +228,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
     }, null) : null;
     (0, import_vue2.watch)(currentColumns, (columns) => {
       columns.forEach((options, index) => {
-        if (options.length && !(0, import_utils2.isOptionExist)(options, selectedValues.value[index], fields.value)) {
+        const judgeSelectedValue = isButtonPicker.value ? selectedValues.value[index] : true;
+        if (options.length && judgeSelectedValue && !(0, import_utils2.isOptionExist)(options, selectedValues.value[index], fields.value)) {
           setValue(index, (0, import_utils2.getFirstEnabledOption)(options)[fields.value.value]);
         }
       });
@@ -259,18 +269,61 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "class": (0, import_utils2.bem)("loading")
       }, null) : null, topDivider(), (_a = slots["columns-top"]) == null ? void 0 : _a.call(slots), renderColumns(), (_b = slots["columns-bottom"]) == null ? void 0 : _b.call(slots), buttomDivider(), renderToolbar()]);
     };
-    return () => {
-      if (props.popup) {
-        return (0, import_vue.createVNode)(import_popup.default, {
-          "show": showPicker.value,
-          "onUpdate:show": [($event) => showPicker.value = $event, updateShow],
-          "round": true,
-          "position": "bottom"
+    const renderOptionItems = () => {
+      return currentColumns.value.map((options, columnIndex) => {
+        return (0, import_vue.createVNode)(import_PickerOptions.default, {
+          "ref": pickerOptions,
+          "value": selectedValues.value[columnIndex],
+          "columnCounts": props.columnCounts,
+          "fields": fields.value,
+          "options": options,
+          "allowHtml": props.allowHtml,
+          "readonly": props.readonly,
+          "itemHeight": optionHeight.value,
+          "onChange": (value) => onChange(value, columnIndex),
+          "onClickOption": (option) => onClickOption(option, columnIndex)
         }, {
-          default: renderPicker
+          option: slots.option
         });
+      });
+    };
+    const renderOptions = () => (0, import_vue.createVNode)("div", {
+      "class": (0, import_utils2.bem)("options")
+    }, [renderOptionItems()]);
+    const renderTiledPicker = () => {
+      var _a, _b;
+      return (0, import_vue.createVNode)("div", {
+        "class": (0, import_utils2.bem)()
+      }, [renderTitleBar(), props.loading ? (0, import_vue.createVNode)(import_loading.Loading, {
+        "class": (0, import_utils2.bem)("loading")
+      }, null) : null, topDivider(), (_a = slots["columns-top"]) == null ? void 0 : _a.call(slots), renderOptions(), (_b = slots["columns-bottom"]) == null ? void 0 : _b.call(slots), buttomDivider(), renderToolbar()]);
+    };
+    return () => {
+      if (isButtonPicker.value) {
+        if (props.popup) {
+          return (0, import_vue.createVNode)(import_popup.default, {
+            "show": showPicker.value,
+            "onUpdate:show": [($event) => showPicker.value = $event, updateShow],
+            "round": true,
+            "position": "bottom"
+          }, {
+            default: renderTiledPicker
+          });
+        }
+        return renderTiledPicker();
+      } else {
+        if (props.popup) {
+          return (0, import_vue.createVNode)(import_popup.default, {
+            "show": showPicker.value,
+            "onUpdate:show": [($event) => showPicker.value = $event, updateShow],
+            "round": true,
+            "position": "bottom"
+          }, {
+            default: renderPicker
+          });
+        }
+        return renderPicker();
       }
-      return renderPicker();
     };
   }
 });

package/lib/picker/PickerOptions.d.ts

@@ -0,0 +1,75 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { PickerOption, PickerFieldNames } from './types';
+declare const pickerOptionsProps: {
+    value: (NumberConstructor | StringConstructor)[];
+    fields: {
+        type: PropType<Required<PickerFieldNames>>;
+        required: true;
+    };
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    itemHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
+    options: {
+        type: PropType<PickerOption[]>;
+        default: () => PickerOption[];
+    };
+};
+export type PickerOptionsProps = ExtractPropTypes<typeof pickerOptionsProps>;
+declare const _default: import("vue").DefineComponent<{
+    value: (NumberConstructor | StringConstructor)[];
+    fields: {
+        type: PropType<Required<PickerFieldNames>>;
+        required: true;
+    };
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    itemHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
+    options: {
+        type: PropType<PickerOption[]>;
+        default: () => PickerOption[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "clickOption")[], "change" | "clickOption", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    value: (NumberConstructor | StringConstructor)[];
+    fields: {
+        type: PropType<Required<PickerFieldNames>>;
+        required: true;
+    };
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    itemHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
+    options: {
+        type: PropType<PickerOption[]>;
+        default: () => PickerOption[];
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onClickOption?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly: boolean;
+    options: PickerOption[];
+    allowHtml: boolean;
+    itemHeight: number;
+    columnCounts: number;
+}, {}>;
+export default _default;

package/lib/picker/PickerOptions.js

@@ -0,0 +1,112 @@
+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
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("../utils");
+const [name, bem] = (0, import_utils.createNamespace)("picker-options");
+const pickerOptionsProps = {
+  value: import_utils.numericProp,
+  fields: (0, import_utils.makeRequiredProp)(Object),
+  readonly: Boolean,
+  allowHtml: Boolean,
+  itemHeight: (0, import_utils.makeNumberProp)(0),
+  columnCounts: (0, import_utils.makeNumberProp)(3),
+  options: (0, import_utils.makeArrayProp)()
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: pickerOptionsProps,
+  emits: ["change", "clickOption"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const currentIndex = (0, import_vue2.ref)(-1);
+    const state = (0, import_vue2.reactive)({
+      options: props.options,
+      confirmed: false
+    });
+    const columnCounts = (0, import_vue2.ref)(props.columnCounts);
+    const onClickItem = (index) => {
+      if (props.readonly) {
+        return;
+      }
+      if (currentIndex.value !== index) {
+        currentIndex.value = index;
+        const value = props.options[index][props.fields.value];
+        emit("change", value);
+      }
+      emit("clickOption", props.options[index]);
+    };
+    const getOptionText = (option) => {
+      if ((0, import_utils.isObject)(option) && option[props.fields.text]) {
+        return option[props.fields.text];
+      }
+      return option;
+    };
+    const isOptionDisabled = (option) => props.readonly || (0, import_utils.isObject)(option) && option.disabled;
+    const genOptions = () => {
+      columnCounts.value = Number(props.columnCounts);
+      if (columnCounts.value && columnCounts.value > 3) {
+        columnCounts.value = 3;
+      }
+      if (columnCounts.value && columnCounts.value < 1) {
+        columnCounts.value = 1;
+      }
+      const optionStyle = {
+        height: `${props.itemHeight + 8}px`,
+        width: `${1 / columnCounts.value * 100}%`
+      };
+      return state.options.map((option, index) => {
+        const text = getOptionText(option);
+        const value = option[props.fields.value];
+        const disabled = isOptionDisabled(option);
+        const childData = {
+          class: "zt-ellipsis",
+          [props.allowHtml ? "innerHTML" : "textContent"]: text
+        };
+        return (0, import_vue.createVNode)("div", {
+          "role": "button",
+          "style": optionStyle,
+          "tabindex": disabled ? -1 : 0,
+          "onClick": () => onClickItem(index),
+          "class": [bem("item", {
+            disabled,
+            selected: value === props.value,
+            "disabled-selected": disabled && value === props.value,
+            last: (index + 1) % columnCounts.value === 0
+          })]
+        }, [slots.options ? slots.options(option) : (0, import_vue.createVNode)("div", childData, null)]);
+      });
+    };
+    (0, import_vue2.watchEffect)(() => {
+      currentIndex.value = props.options.findIndex((option) => option[props.fields.value] === props.value);
+    });
+    return () => (0, import_vue.createVNode)("div", {
+      "class": bem()
+    }, [(0, import_vue.createVNode)("div", {
+      "ref": "wrapper",
+      "class": bem("wrapper")
+    }, [genOptions()])]);
+  }
+});

package/lib/picker/index.css

@@ -1 +1 @@
-:root{--zt-picker-cancel-margin: 8px 4px 8px 16px;--zt-picker-confirm-margin: 8px 16px 8px 4px;--zt-picker-title-height: 44px;--zt-picker-title-border-radius: 16px 16px 0 0;--zt-picker-frame-background-color: var(--zt-gray-a06);--zt-picker-title-text-color: var(--zt-gray-a4);--zt-picker-background: var(--zt-background-2);--zt-picker-toolbar-height: 60px;--zt-picker-title-background: var(--zt-background-2);--zt-picker-option-padding: 0 var(--zt-padding-base);--zt-picker-option-text-color: var(--zt-text-color);--zt-picker-option-disabled-opacity: var(--zt-disabled-opacity);--zt-picker-loading-icon-color: var(--zt-primary-color);--zt-picker-loading-mask-color: rgba(255, 255, 255, .9);--zt-picker-mask-color: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4))}.zt-theme-dark{--zt-picker-loading-mask-color: rgba(0, 0, 0, .6);--zt-picker-mask-color: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1)), linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1))}.zt-picker{position:relative;background:var(--zt-picker-background);-webkit-user-select:none;user-select:none}.zt-picker__toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--zt-picker-toolbar-height)}.zt-picker__cancel,.zt-picker__confirm{width:50%}.zt-picker__cancel{background:var(--zt-button-default-background);margin:var(--zt-picker-cancel-margin)}.zt-picker__confirm{margin:var(--zt-picker-confirm-margin)}.zt-picker__title{display:flex;justify-content:center;align-items:center;width:100%;height:var(--zt-picker-title-height);border-radius:var(--zt-picker-title-border-radius);font-size:var(--zt-font-size-md);background:var(--zt-picker-title-background);color:var(--zt-picker-title-text-color)}.zt-picker__columns{position:relative;display:flex;cursor:-webkit-grab;cursor:grab}.zt-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--zt-picker-loading-icon-color);background:var(--zt-picker-loading-mask-color)}.zt-picker__frame{position:absolute;top:50%;z-index:2;transform:translateY(-50%);pointer-events:none;width:100%;background:var(--zt-picker-frame-background-color)}.zt-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:var(--zt-picker-mask-color);background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.zt-picker-column{position:relative;flex:1;overflow:hidden;font-size:var(--zt-font-size-lg);background:var(--zt-picker-background)}.zt-picker-column__wrapper{transition-timing-function:cubic-bezier(.23,1,.68,1)}.zt-picker-column__item{display:flex;align-items:center;justify-content:center;padding:var(--zt-picker-option-padding);color:var(--zt-picker-option-text-color)}.zt-picker-column__item--disabled{cursor:not-allowed;opacity:var(--zt-picker-option-disabled-opacity)}.zt-picker-column__item--selected{font-weight:700}.zt-picker-column__unit{background:var(--zt-picker-title-background);position:absolute;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--zt-picker-option-text-color);font-size:var(--zt-font-size-lg);width:100%;height:100%}.zt-picker-column__unit-text{margin:0 4px;font-size:var(--zt-font-size-md)}
+:root{--zt-picker-cancel-margin: 8px 4px 8px 16px;--zt-picker-confirm-margin: 8px 16px 8px 4px;--zt-picker-title-height: 44px;--zt-picker-title-border-radius: 16px 16px 0 0;--zt-picker-frame-background-color: var(--zt-gray-a06);--zt-picker-title-text-color: var(--zt-gray-a4);--zt-picker-background: var(--zt-background-popup);--zt-picker-toolbar-height: 60px;--zt-picker-title-background: var(--zt-background-popup);--zt-picker-option-padding: 0 var(--zt-padding-base);--zt-picker-option-text-color: var(--zt-text-color);--zt-picker-option-disabled-opacity: var(--zt-disabled-opacity);--zt-picker-option-disabled-background: var(--zt-gray-a04);--zt-picker-loading-icon-color: var(--zt-primary-color);--zt-picker-loading-mask-color: rgba(255, 255, 255, .9);--zt-picker-mask-color: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4));--zt-picker-warpper-padding: 12px 16px 4px 16px;--zt-picker-option-item-text-color: var(--zt-gray-a6);--zt-picker-option-item-padding: 0 4px 8px 0;--zt-picker-options-ellipsis-height: 36px;--zt-picker-options-ellipsis-border: 1px solid var(--zt-gray-a2);--zt-picker-option-item-disabled-opacity: var(--zt-disabled-opacity)}:root[zt-theme-size=large]{--zt-picker-options-ellipsis-height: 50px}.zt-theme-dark{--zt-picker-loading-mask-color: rgba(0, 0, 0, .6);--zt-picker-mask-color: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1)), linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1))}.zt-picker{position:relative;background:var(--zt-picker-background);-webkit-user-select:none;user-select:none}.zt-picker__toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--zt-picker-toolbar-height)}.zt-picker__cancel,.zt-picker__confirm{width:50%}.zt-picker__cancel{background:var(--zt-button-default-background);margin:var(--zt-picker-cancel-margin)}.zt-picker__confirm{margin:var(--zt-picker-confirm-margin)}.zt-picker__title{display:flex;justify-content:center;align-items:center;width:100%;height:var(--zt-picker-title-height);border-radius:var(--zt-picker-title-border-radius);font-size:var(--zt-font-size-md);background:var(--zt-picker-title-background);color:var(--zt-picker-title-text-color)}.zt-picker__columns{position:relative;display:flex;cursor:-webkit-grab;cursor:grab}.zt-picker__options{position:relative;display:flex;cursor:-webkit-grab;cursor:grab;overflow-y:scroll}.zt-picker__options:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-picker__options:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:0;right:0;left:0;border-top:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--zt-picker-loading-icon-color);background:var(--zt-picker-loading-mask-color)}.zt-picker__frame{position:absolute;top:50%;z-index:2;transform:translateY(-50%);pointer-events:none;width:100%;background:var(--zt-picker-frame-background-color)}.zt-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:var(--zt-picker-mask-color);background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.zt-picker-column{position:relative;flex:1;overflow:hidden;font-size:var(--zt-font-size-lg);background:var(--zt-picker-background)}.zt-picker-column__wrapper{transition-timing-function:cubic-bezier(.23,1,.68,1)}.zt-picker-column__item{display:flex;align-items:center;justify-content:center;padding:var(--zt-picker-option-padding);color:var(--zt-picker-option-text-color)}.zt-picker-column__item--disabled{cursor:not-allowed;opacity:var(--zt-picker-option-disabled-opacity)}.zt-picker-column__item--selected{font-weight:700}.zt-picker-column__unit{background:var(--zt-picker-title-background);position:absolute;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--zt-picker-option-text-color);font-size:var(--zt-font-size-lg);width:100%;height:100%}.zt-picker-column__unit-text{margin:0 4px;font-size:var(--zt-font-size-md)}.zt-picker-options{flex:1;overflow-y:scroll;font-size:var(--zt-font-size-md);margin:0;outline:0 none;padding:0}.zt-picker-options__wrapper{display:flex;flex-wrap:wrap;background-color:var(--zt-picker-background);padding:var(--zt-picker-warpper-padding)}.zt-picker-options__item{color:var(--zt-picker-option-item-text-color);padding:var(--zt-picker-option-item-padding);box-sizing:border-box;text-align:center;font-size:var(--zt-font-size-md)}.zt-picker-options__item .zt-ellipsis{height:var(--zt-picker-options-ellipsis-height);line-height:var(--zt-picker-options-ellipsis-height);border-radius:calc(var(--zt-picker-options-ellipsis-height) / 2);background:var(--zt-gray-a04);padding:0 var(--zt-padding-md)}.zt-picker-options__item:active{opacity:var(--zt-active-opacity)}.zt-picker-options__item--disabled{cursor:not-allowed;color:var(--zt-gray-a2)}.zt-picker-options__item--disabled .zt-ellipsis{background:var(--zt-picker-option-disabled-background)!important}.zt-picker-options__item--last{padding-right:0}.zt-picker-options__item--selected{color:var(--zt-white)}.zt-picker-options__item--selected .zt-ellipsis{background:var(--zt-primary-color)}.zt-picker-options__item--disabled-selected{cursor:not-allowed;color:var(--zt-gray)!important}.zt-picker-options__item--disabled-selected .zt-ellipsis{background:var(--zt-picker-option-disabled-background)!important}

package/lib/picker/index.d.ts

@@ -53,7 +53,15 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         type: BooleanConstructor;
         default: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "change" | "update:modelValue" | "confirm" | "update:showPicker" | "clickOption")[], "cancel" | "change" | "update:modelValue" | "confirm" | "update:showPicker" | "clickOption", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    showType: {
+        type: import("vue").PropType<import("./types").PickerShowType>;
+        default: import("./types").PickerShowType;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "update:showPicker")[], "update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "update:showPicker", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
@@ -107,25 +115,35 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         type: BooleanConstructor;
         default: true;
     };
+    showType: {
+        type: import("vue").PropType<import("./types").PickerShowType>;
+        default: import("./types").PickerShowType;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
-    "onUpdate:showPicker"?: ((...args: any[]) => any) | undefined;
     onClickOption?: ((...args: any[]) => any) | undefined;
+    "onUpdate:showPicker"?: ((...args: any[]) => any) | undefined;
 }, {
     title: string;
     modelValue: import("../utils").Numeric[];
     readonly: boolean;
     popup: boolean;
     loading: boolean;
+    showType: import("./types").PickerShowType;
     showTitle: boolean;
     columns: (import("./types").PickerColumn | import("./types").PickerOption)[];
     allowHtml: boolean;
     swipeDuration: string | number;
-    showPicker: boolean;
     showToolbar: boolean;
+    showPicker: boolean;
+    columnCounts: number;
     toolbarPosition: import("./types").PickerToolbarPosition;
     optionHeight: string | number;
     visibleOptionNum: string | number;

package/lib/picker/types.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentPublicInstance } from 'vue';
 import type { Numeric } from '../utils';
 import type { PickerProps } from './Picker';
+export type PickerShowType = 'default' | 'button';
 export type PickerToolbarPosition = 'top' | 'bottom';
 export type PickerFieldNames = {
     text?: string;
@@ -15,6 +16,9 @@ export type PickerOption = {
     className?: unknown;
     [key: PropertyKey]: any;
 };
+export type PickerOptionsExpose = {
+    setConfirmIndex: (indexes: PickerOption) => void;
+};
 export type PickerColumn = PickerOption[];
 export type PickerExpose = {
     confirm: () => void;
@@ -33,7 +37,7 @@ export type PickerColumnProvide = {
     setOptions: (options: PickerOption[]) => void;
     stopMomentum: () => void;
 };
-export type PickerInstance = ComponentPublicInstance<PickerProps, PickerExpose>;
+export type PickerInstance = ComponentPublicInstance<PickerProps, PickerExpose, PickerOptionsExpose>;
 export type PickerConfirmEventParams = {
     selectedValues: Numeric[];
     selectedOptions: Array<PickerOption | undefined>;

package/lib/popover/index.css

@@ -1 +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-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-font-size-md);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-font-size-xxl)}.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;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%;transform:translate(-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{display:none;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-primary-color);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{display:none;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--show{display:block}.zt-popover--hidden{display:none}.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)}
+: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-light-text-color: var(--zt-text-color);--zt-popover-light-background: var(--zt-background-popup);--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-font-size-md);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{width:100%;height:100%;line-height:var(--zt-popover-action-height);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zt-popover__action-icon{margin-right:var(--zt-padding-xs);font-size:var(--zt-font-size-xxl)}.zt-popover__action--with-icon .zt-popover__action-text{text-align:start}.zt-popover[data-popper-placement^=top] .zt-popover__arrow{bottom:0;border-top-color:currentColor;border-bottom-width:0;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%;transform:translate(-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{display:none;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-primary-color);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{display:none;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--show{display:block}.zt-popover--hidden{display:none}.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/popup/Popup.js

@@ -199,13 +199,13 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }, attrs, (0, import_use_scope_id.useScopeId)()), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[import_vue.vShow, props.show]]);
     });
     const sliderRenderPopup = lazyRender(() => {
-      var _a, _b;
+      var _a;
       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", {
+      }, attrs), [renderCloseIcon(), (0, import_vue.createVNode)("div", {
         "class": bem("slider-title"),
         "style": `height:${touchAreaHeight}px;`,
         "ref": root
@@ -214,7 +214,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }, 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]]);
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]), [[import_vue.vShow, props.show]]);
     });
     const renderTransition = () => {
       const {

package/lib/popup/index.css

@@ -1 +1 @@
-: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-color: var(--zt-gray-a6);--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;left: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-font-size-xxxl);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-font-size-xxxl)}.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-popup);--zt-popup-transition: transform var(--zt-duration-base);--zt-popup-round-radius: 16px;--zt-popup-close-icon-color: var(--zt-gray-a6);--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;left: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-font-size-xxxl);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-font-size-xxxl)}.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)}

package/lib/pull-refresh/PullRefresh.d.ts

@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue" | "refresh")[], "change" | "update:modelValue" | "refresh", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "refresh")[], "update:modelValue" | "change" | "refresh", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     disabled: BooleanConstructor;
     modelValue: BooleanConstructor;
     headHeight: {

package/lib/pull-refresh/index.d.ts

@@ -18,7 +18,7 @@ export declare const PullRefresh: import("../utils").WithInstall<import("vue").D
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue" | "refresh")[], "change" | "update:modelValue" | "refresh", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "refresh")[], "update:modelValue" | "change" | "refresh", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: BooleanConstructor;
     modelValue: BooleanConstructor;
     headHeight: {

package/lib/radio-group/RadioGroup.d.ts

@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     modelValue: import("vue").PropType<unknown>;
     checkedColor: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     disabled: BooleanConstructor;
     iconSize: (NumberConstructor | StringConstructor)[];
     direction: {

package/lib/radio-group/index.d.ts

@@ -7,7 +7,7 @@ export declare const RadioGroup: import("../utils").WithInstall<import("vue").De
     };
     modelValue: import("vue").PropType<unknown>;
     checkedColor: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: BooleanConstructor;
     iconSize: (NumberConstructor | StringConstructor)[];
     direction: {