zartui 3.1.13 → 3.1.15

package/es/multiple-picker/MultiplePicker.d.ts

@@ -1,4 +1,5 @@
 import { ExtractPropTypes } from 'vue';
+import { Numeric } from '../utils';
 import { PickerOption } from './types';
 declare const multiplePickerProps: {
     title: StringConstructor;
@@ -27,6 +28,10 @@ declare const multiplePickerProps: {
         type: BooleanConstructor;
         default: true;
     };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
     options: {
         type: import("vue").PropType<PickerOption[]>;
         default: () => PickerOption[];
@@ -47,6 +52,14 @@ declare const multiplePickerProps: {
         type: import("vue").PropType<number[]>;
         default: () => number[];
     };
+    selectedValue: {
+        type: import("vue").PropType<Numeric[]>;
+        default: () => Numeric[];
+    };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
 };
 export type MultiplePickerProps = ExtractPropTypes<typeof multiplePickerProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -76,6 +89,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
     options: {
         type: import("vue").PropType<PickerOption[]>;
         default: () => PickerOption[];
@@ -96,7 +113,15 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<number[]>;
         default: () => number[];
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "change" | "confirm" | "update:showPicker" | "update:selectedIndex")[], "cancel" | "change" | "confirm" | "update:showPicker" | "update:selectedIndex", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    selectedValue: {
+        type: import("vue").PropType<Numeric[]>;
+        default: () => Numeric[];
+    };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "change" | "confirm" | "update:showPicker" | "update:selectedIndex" | "update:selectedValue")[], "cancel" | "change" | "confirm" | "update:showPicker" | "update:selectedIndex" | "update:selectedValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
@@ -123,6 +148,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
     options: {
         type: import("vue").PropType<PickerOption[]>;
         default: () => PickerOption[];
@@ -143,25 +172,37 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<number[]>;
         default: () => number[];
     };
+    selectedValue: {
+        type: import("vue").PropType<Numeric[]>;
+        default: () => Numeric[];
+    };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
     "onUpdate:showPicker"?: ((...args: any[]) => any) | undefined;
     "onUpdate:selectedIndex"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:selectedValue"?: ((...args: any[]) => any) | undefined;
 }, {
     readonly: boolean;
     closeOnClickOverlay: boolean;
     closeOnPopstate: boolean;
+    popup: boolean;
     loading: boolean;
+    showTitle: boolean;
     options: PickerOption[];
     allowHtml: boolean;
+    showToolbar: boolean;
+    showPicker: boolean;
     textKey: string;
     itemHeight: string | number;
     columnCounts: number;
-    showPicker: boolean;
-    showToolbar: boolean;
     toolbarPosition: string;
     selectedIndex: number[];
+    selectedValue: Numeric[];
 }, {}>;
 export default _default;

package/es/multiple-picker/MultiplePicker.mjs

@@ -2,6 +2,7 @@ import { createVNode as _createVNode } from "vue";
 import { ref, watch, computed, defineComponent } from "vue";
 import { createNamespace, makeArrayProp, makeNumberProp, makeNumericProp, makeStringProp, truthProp } from "../utils/index.mjs";
 import { unitToPx } from "../utils/format.mjs";
+import { deepClone } from "../utils/deep-clone.mjs";
 import Loading from "../loading/index.mjs";
 import MultiplePickerOptions from "./MultiplePickerOptions.mjs";
 import Popup from "../popup/index.mjs";
@@ -19,21 +20,37 @@ const multiplePickerProps = {
   closeOnPopstate: truthProp,
   closeOnClickOverlay: truthProp,
   showToolbar: truthProp,
+  showTitle: truthProp,
   options: makeArrayProp(),
   toolbarPosition: makeStringProp("bottom"),
   textKey: makeStringProp("text"),
   columnCounts: makeNumberProp(3),
-  selectedIndex: makeArrayProp([])
+  selectedIndex: makeArrayProp([]),
+  selectedValue: makeArrayProp([]),
+  popup: truthProp
 };
 var stdin_default = defineComponent({
   name,
   props: multiplePickerProps,
-  emits: ["cancel", "confirm", "change", "update:showPicker", "update:selectedIndex"],
+  emits: ["cancel", "confirm", "change", "update:showPicker", "update:selectedIndex", "update:selectedValue"],
   setup(props, {
     emit,
     slots
   }) {
     const confirmIndexes = ref(props.selectedIndex);
+    const confirmValues = ref(props.selectedValue);
+    const getIndexesByValues = () => {
+      var _a;
+      if (confirmValues.value && confirmValues.value.length > 0) {
+        confirmIndexes.value.splice(0, confirmIndexes.value.length);
+        (_a = props.options) == null ? void 0 : _a.forEach((option, index) => {
+          if (option.value && confirmValues.value.includes(option.value)) {
+            confirmIndexes.value.push(index);
+          }
+        });
+      }
+    };
+    getIndexesByValues();
     const pickerOptions = ref();
     const currentShow = ref(props.showPicker);
     const DEFAULT_ITEM_HEIGHT = ref(36);
@@ -41,7 +58,9 @@ var stdin_default = defineComponent({
       if (newValue !== props.showPicker) {
         emit("update:showPicker", newValue);
       }
-      confirmIndexes.value = props.selectedIndex;
+      confirmIndexes.value = deepClone(props.selectedIndex);
+      confirmValues.value = deepClone(props.selectedValue);
+      getIndexesByValues();
     });
     watch(() => props.showPicker, (newValue) => {
       var _a;
@@ -78,12 +97,14 @@ var stdin_default = defineComponent({
       emit("confirm", options);
     };
     const genTitle = () => {
-      if (slots.title) {
-        return slots.title();
+      if (props.showTitle) {
+        if (slots.title) {
+          return slots.title();
+        }
+        return _createVNode("div", {
+          "class": ["zt-ellipsis", bem("title")]
+        }, [props.title ? props.title : "\u8BF7\u9009\u62E9"]);
       }
-      return _createVNode("div", {
-        "class": ["zt-ellipsis", bem("title")]
-      }, [props.title ? props.title : "\u8BF7\u9009\u62E9"]);
     };
     const genCancel = () => {
       const text = props.cancelButtonText || "\u53D6\u6D88";
@@ -152,16 +173,22 @@ var stdin_default = defineComponent({
     }, [genTitle(), props.loading ? _createVNode(Loading, {
       "class": bem("loading")
     }, null) : "", genOptions(), props.toolbarPosition === "bottom" ? genToolbar() : ""]);
-    return () => _createVNode(Popup, {
-      "show": currentShow.value,
-      "onUpdate:show": [($event) => currentShow.value = $event, updateShow],
-      "round": true,
-      "position": "bottom",
-      "closeOnPopstate": props.closeOnPopstate,
-      "closeOnClickOverlay": props.closeOnClickOverlay
-    }, {
-      default: renderMultiplePicker
-    });
+    return () => {
+      if (props.popup) {
+        return _createVNode(Popup, {
+          "show": currentShow.value,
+          "onUpdate:show": [($event) => currentShow.value = $event, updateShow],
+          "round": true,
+          "position": "bottom",
+          "closeOnPopstate": props.closeOnPopstate,
+          "closeOnClickOverlay": props.closeOnClickOverlay
+        }, {
+          default: renderMultiplePicker
+        });
+      } else {
+        return renderMultiplePicker();
+      }
+    };
   }
 });
 export {

package/es/multiple-picker/MultiplePickerOptions.mjs

@@ -1,6 +1,7 @@
 import { createVNode as _createVNode } from "vue";
 import { ref, defineComponent, reactive } from "vue";
 import { createNamespace, isObject, makeArrayProp, makeNumberProp, makeStringProp } from "../utils/index.mjs";
+import { deepClone } from "../utils/deep-clone.mjs";
 import { useExpose } from "../composables/use-expose.mjs";
 const [name, bem] = createNamespace("multiple-picker-options");
 const multiplePickerOptionsProps = {
@@ -49,7 +50,7 @@ var stdin_default = defineComponent({
       }
       return option;
     };
-    const isOptionDisabled = (option) => isObject(option) && option.disabled;
+    const isOptionDisabled = (option) => props.readonly || isObject(option) && option.disabled;
     const genOptions = () => {
       columnCounts.value = Number(props.columnCounts);
       if (columnCounts.value && columnCounts.value > 3) {
@@ -77,12 +78,14 @@ var stdin_default = defineComponent({
           "class": [bem("item", {
             disabled,
             selected: currentIndexes.value.indexOf(index) > -1,
+            "disabled-selected": disabled && currentIndexes.value.indexOf(index) > -1,
             last: (index + 1) % columnCounts.value === 0
           })]
         }, [slots.options ? slots.options(option) : _createVNode("div", childData, null)]);
       });
     };
-    const setConfirmIndex = (indexes) => {
+    const setConfirmIndex = (data) => {
+      const indexes = deepClone(data);
       state.confirmed = true;
       const keys = Object.keys(indexes);
       currentIndexes.value.length = 0;

package/es/multiple-picker/index.css

@@ -1 +1 @@
-:root{--zt-multiple-picker-warpper-padding: 12px 16px 4px 16px;--zt-multiple-picker-option-text-color: var(--zt-gray-a6);--zt-multiple-picker-background-color: var(--zt-background-popup);--zt-multiple-picker-toolbar-height: 44px;--zt-multiple-picker-title-text-color: var(--zt-gray-a4);--zt-multiple-picker-title-padding: 12px 0;--zt-multiple-picker-item-padding: 0 4px 8px 0;--zt-multiple-picker-option-disabled-opacity: var(--zt-disabled-opacity);--zt-multiple-picker-max-height: 84vh;--zt-multiple-picker-loading-icon-color: var(--zt-primary-color);--zt-multiple-picker-loading-mask-color: var(--zt-picker-loading-mask-color);--zt-multiple-picker-toolbar-padding: 8px 16px;--zt-multiple-picker-ellipsis-border: 1px solid var(--zt-gray-a2);--zt-multiple-picker-title-background: var(--zt-background-popup);--zt-multiple-picker-ellipsis-height: 38px}:root[zt-theme-size=large]{--zt-multiple-picker-ellipsis-height: 50px}.zt-multiple-picker{display:flex;flex-direction:column;justify-content:space-between;position:relative;background-color:var(--zt-multiple-picker-background-color);-webkit-user-select:none;user-select:none;max-height:var(--zt-multiple-picker-max-height)}.zt-multiple-picker__toolbar{display:flex;align-items:center;justify-content:space-between;box-sizing:content-box;flex-shrink:0;background:var(--zt-multiple-picker-title-background);height:var(--zt-multiple-picker-toolbar-height);padding:var(--zt-multiple-picker-toolbar-padding)}.zt-multiple-picker__title{flex-shrink:0;font-weight:var(--zt-multiple-picker-cancel-action-font-weight);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md);text-align:center;background:var(--zt-multiple-picker-title-background);color:var(--zt-multiple-picker-title-text-color);padding:var(--zt-multiple-picker-title-padding)}.zt-multiple-picker__options{position:relative;display:flex;cursor:-webkit-grab;cursor:grab;overflow-y:scroll}.zt-multiple-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-multiple-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-multiple-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-multiple-picker-loading-icon-color);background-color:var(--zt-multiple-picker-loading-mask-color)}.zt-multiple-picker-options{flex:1;overflow-y:scroll;font-size:var(--zt-font-size-md);margin:0;outline:0 none;padding:0}.zt-multiple-picker-options__wrapper{display:flex;flex-wrap:wrap;background-color:var(--zt-multiple-picker-background-color);padding:var(--zt-multiple-picker-warpper-padding)}.zt-multiple-picker-options__item{color:var(--zt-multiple-picker-option-text-color);padding:var(--zt-multiple-picker-item-padding);box-sizing:border-box;text-align:center;font-size:var(--zt-font-size-md)}.zt-multiple-picker-options__item .zt-ellipsis{height:var(--zt-multiple-picker-ellipsis-height);line-height:var(--zt-multiple-picker-ellipsis-height);border-radius:calc(var(--zt-multiple-picker-ellipsis-height) / 2);border:var(--zt-multiple-picker-ellipsis-border);padding:0 var(--zt-padding-md)}.zt-multiple-picker-options__item:active{opacity:var(--zt-active-opacity)}.zt-multiple-picker-options__item--disabled{cursor:not-allowed;opacity:var(--zt-multiple-picker-option-disabled-opacity)}.zt-multiple-picker-options__item--last{padding-right:0}.zt-multiple-picker-options__item--selected{color:var(--zt-primary-color)}.zt-multiple-picker-options__item--selected .zt-ellipsis{background:var(--zt-primary-color-a1)}
+:root{--zt-multiple-picker-warpper-padding: 12px 16px 4px 16px;--zt-multiple-picker-option-text-color: var(--zt-gray-a6);--zt-multiple-picker-background-color: var(--zt-background-popup);--zt-multiple-picker-toolbar-height: 44px;--zt-multiple-picker-title-text-color: var(--zt-gray-a4);--zt-multiple-picker-title-padding: 12px 0;--zt-multiple-picker-item-padding: 0 4px 8px 0;--zt-multiple-picker-option-disabled-opacity: var(--zt-disabled-opacity);--zt-multiple-picker-option-disabled-background: var(--zt-gray-a04);--zt-multiple-picker-max-height: 84vh;--zt-multiple-picker-loading-icon-color: var(--zt-primary-color);--zt-multiple-picker-loading-mask-color: var(--zt-picker-loading-mask-color);--zt-multiple-picker-toolbar-padding: 8px 16px;--zt-multiple-picker-ellipsis-border: 1px solid var(--zt-gray-a2);--zt-multiple-picker-ellipsis-border-selected: 1px solid var(--zt-blue-a6);--zt-multiple-picker-title-background: var(--zt-background-popup);--zt-multiple-picker-ellipsis-height: 38px}:root[zt-theme-size=large]{--zt-multiple-picker-ellipsis-height: 50px}.zt-multiple-picker{display:flex;flex-direction:column;justify-content:space-between;position:relative;background-color:var(--zt-multiple-picker-background-color);-webkit-user-select:none;user-select:none;max-height:var(--zt-multiple-picker-max-height)}.zt-multiple-picker__toolbar{display:flex;align-items:center;justify-content:space-between;box-sizing:content-box;flex-shrink:0;background:var(--zt-multiple-picker-title-background);height:var(--zt-multiple-picker-toolbar-height);padding:var(--zt-multiple-picker-toolbar-padding)}.zt-multiple-picker__title{flex-shrink:0;font-weight:var(--zt-multiple-picker-cancel-action-font-weight);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md);text-align:center;background:var(--zt-multiple-picker-title-background);color:var(--zt-multiple-picker-title-text-color);padding:var(--zt-multiple-picker-title-padding)}.zt-multiple-picker__options{position:relative;display:flex;cursor:-webkit-grab;cursor:grab;overflow-y:scroll}.zt-multiple-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-multiple-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-multiple-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-multiple-picker-loading-icon-color);background-color:var(--zt-multiple-picker-loading-mask-color)}.zt-multiple-picker-options{flex:1;overflow-y:scroll;font-size:var(--zt-font-size-md);margin:0;outline:0 none;padding:0}.zt-multiple-picker-options__wrapper{display:flex;flex-wrap:wrap;background-color:var(--zt-multiple-picker-background-color);padding:var(--zt-multiple-picker-warpper-padding)}.zt-multiple-picker-options__item{color:var(--zt-multiple-picker-option-text-color);padding:var(--zt-multiple-picker-item-padding);box-sizing:border-box;text-align:center;font-size:var(--zt-font-size-md)}.zt-multiple-picker-options__item .zt-ellipsis{height:var(--zt-multiple-picker-ellipsis-height);line-height:var(--zt-multiple-picker-ellipsis-height);border-radius:calc(var(--zt-multiple-picker-ellipsis-height) / 2);border:var(--zt-multiple-picker-ellipsis-border);padding:0 var(--zt-padding-md)}.zt-multiple-picker-options__item:active{opacity:var(--zt-active-opacity)}.zt-multiple-picker-options__item--disabled{cursor:not-allowed;color:var(--zt-gray-a2)}.zt-multiple-picker-options__item--disabled .zt-ellipsis{background:var(--zt-multiple-picker-option-disabled-background);border:0}.zt-multiple-picker-options__item--last{padding-right:0}.zt-multiple-picker-options__item--selected{color:var(--zt-primary-color)}.zt-multiple-picker-options__item--selected .zt-ellipsis{background:var(--zt-primary-color-a1);border:var(--zt-multiple-picker-ellipsis-border-selected)}.zt-multiple-picker-options__item--disabled-selected{cursor:not-allowed;color:var(--zt-gray)!important}.zt-multiple-picker-options__item--disabled-selected .zt-ellipsis{background:var(--zt-picker-option-disabled-background)!important;border:0!important}

package/es/multiple-picker/index.d.ts

@@ -27,6 +27,10 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
         type: BooleanConstructor;
         default: true;
     };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
     options: {
         type: import("vue").PropType<import("./types").PickerOption[]>;
         default: () => import("./types").PickerOption[];
@@ -47,7 +51,15 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
         type: import("vue").PropType<number[]>;
         default: () => number[];
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "change" | "confirm" | "update:showPicker" | "update:selectedIndex")[], "cancel" | "change" | "confirm" | "update:showPicker" | "update:selectedIndex", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    selectedValue: {
+        type: import("vue").PropType<import("../utils").Numeric[]>;
+        default: () => import("../utils").Numeric[];
+    };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "change" | "confirm" | "update:showPicker" | "update:selectedIndex" | "update:selectedValue")[], "cancel" | "change" | "confirm" | "update:showPicker" | "update:selectedIndex" | "update:selectedValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
@@ -74,6 +86,10 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
         type: BooleanConstructor;
         default: true;
     };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
     options: {
         type: import("vue").PropType<import("./types").PickerOption[]>;
         default: () => import("./types").PickerOption[];
@@ -94,26 +110,38 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
         type: import("vue").PropType<number[]>;
         default: () => number[];
     };
+    selectedValue: {
+        type: import("vue").PropType<import("../utils").Numeric[]>;
+        default: () => import("../utils").Numeric[];
+    };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
     "onUpdate:showPicker"?: ((...args: any[]) => any) | undefined;
     "onUpdate:selectedIndex"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:selectedValue"?: ((...args: any[]) => any) | undefined;
 }, {
     readonly: boolean;
     closeOnClickOverlay: boolean;
     closeOnPopstate: boolean;
+    popup: boolean;
     loading: boolean;
+    showTitle: boolean;
     options: import("./types").PickerOption[];
     allowHtml: boolean;
+    showToolbar: boolean;
+    showPicker: boolean;
     textKey: string;
     itemHeight: string | number;
     columnCounts: number;
-    showPicker: boolean;
-    showToolbar: boolean;
     toolbarPosition: string;
     selectedIndex: number[];
+    selectedValue: import("../utils").Numeric[];
 }, {}>>;
 export default MultiplePicker;
 export type { MultiplePickerProps };

package/es/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, ("update:modelValue" | "cancel" | "change" | "confirm" | "update:showPicker" | "clickOption")[], "update:modelValue" | "cancel" | "change" | "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/es/picker/Picker.mjs

@@ -1,6 +1,6 @@
 import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 import { ref, watch, computed, defineComponent, nextTick } from "vue";
-import { pick, extend, unitToPx, truthProp, HAPTICS_FEEDBACK, isSameValue, makeArrayProp, preventDefault, makeStringProp, makeNumericProp } from "../utils/index.mjs";
+import { pick, extend, unitToPx, truthProp, HAPTICS_FEEDBACK, isSameValue, makeArrayProp, preventDefault, makeStringProp, makeNumericProp, makeNumberProp } from "../utils/index.mjs";
 import { bem, name, isOptionExist, getColumnsType, findOptionByValue, assignDefaultFields, formatCascadeColumns, getFirstEnabledOption } from "./utils.mjs";
 import { useChildren, useEventListener } from "@zartui/use";
 import { useExpose } from "../composables/use-expose.mjs";
@@ -9,6 +9,7 @@ import Column, { PICKER_KEY } from "./PickerColumn.mjs";
 import { Divider } from "../divider/index.mjs";
 import Toolbar, { pickerToolbarPropKeys, pickerToolbarProps, pickerToolbarSlots } from "./PickerToolbar.mjs";
 import Popup from "../popup/index.mjs";
+import PickerOptions from "./PickerOptions.mjs";
 const pickerSharedProps = extend({
   loading: Boolean,
   readonly: Boolean,
@@ -27,7 +28,9 @@ const pickerProps = extend({}, pickerSharedProps, {
   toolbarPosition: makeStringProp("top"),
   columnsFieldNames: Object,
   showPicker: Boolean,
-  popup: truthProp
+  popup: truthProp,
+  showType: makeStringProp("default"),
+  columnCounts: makeNumberProp(3)
 });
 var stdin_default = defineComponent({
   name,
@@ -37,6 +40,7 @@ var stdin_default = defineComponent({
     emit,
     slots
   }) {
+    const pickerOptions = ref();
     const columnsRef = ref();
     const selectedValues = ref(props.modelValue.slice(0));
     const showPicker = ref(props.showPicker);
@@ -63,6 +67,9 @@ var stdin_default = defineComponent({
     });
     const hasOptions = computed(() => currentColumns.value.some((options) => options.length));
     const selectedOptions = computed(() => currentColumns.value.map((options, index) => findOptionByValue(options, selectedValues.value[index], fields.value)));
+    const isButtonPicker = computed(() => {
+      return props.showType === "button" && columnsType.value === "default";
+    });
     watch(showPicker, (newValue) => {
       if (newValue !== props.showPicker) {
         emit("update:showPicker", newValue);
@@ -100,10 +107,12 @@ var stdin_default = defineComponent({
         }, getEventParams()));
       });
     };
-    const onClickOption = (currentOption, columnIndex) => emit("clickOption", extend({
-      columnIndex,
-      currentOption
-    }, getEventParams()));
+    const onClickOption = (currentOption, columnIndex) => {
+      emit("clickOption", extend({
+        columnIndex,
+        currentOption
+      }, getEventParams()));
+    };
     const confirm = () => {
       children.forEach((child) => child.stopMomentum());
       const params = getEventParams();
@@ -185,7 +194,8 @@ var stdin_default = defineComponent({
     }, null) : null;
     watch(currentColumns, (columns) => {
       columns.forEach((options, index) => {
-        if (options.length && !isOptionExist(options, selectedValues.value[index], fields.value)) {
+        const judgeSelectedValue = isButtonPicker.value ? selectedValues.value[index] : true;
+        if (options.length && judgeSelectedValue && !isOptionExist(options, selectedValues.value[index], fields.value)) {
           setValue(index, getFirstEnabledOption(options)[fields.value.value]);
         }
       });
@@ -225,18 +235,61 @@ var stdin_default = defineComponent({
         "class": 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 _createVNode(Popup, {
-          "show": showPicker.value,
-          "onUpdate:show": [($event) => showPicker.value = $event, updateShow],
-          "round": true,
-          "position": "bottom"
+    const renderOptionItems = () => {
+      return currentColumns.value.map((options, columnIndex) => {
+        return _createVNode(PickerOptions, {
+          "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 = () => _createVNode("div", {
+      "class": bem("options")
+    }, [renderOptionItems()]);
+    const renderTiledPicker = () => {
+      var _a, _b;
+      return _createVNode("div", {
+        "class": bem()
+      }, [renderTitleBar(), props.loading ? _createVNode(Loading, {
+        "class": 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 _createVNode(Popup, {
+            "show": showPicker.value,
+            "onUpdate:show": [($event) => showPicker.value = $event, updateShow],
+            "round": true,
+            "position": "bottom"
+          }, {
+            default: renderTiledPicker
+          });
+        }
+        return renderTiledPicker();
+      } else {
+        if (props.popup) {
+          return _createVNode(Popup, {
+            "show": showPicker.value,
+            "onUpdate:show": [($event) => showPicker.value = $event, updateShow],
+            "round": true,
+            "position": "bottom"
+          }, {
+            default: renderPicker
+          });
+        }
+        return renderPicker();
       }
-      return renderPicker();
     };
   }
 });

package/es/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;