zartui 3.1.13 → 3.1.14

package/es/lazyload/vue-lazyload/index.d.ts

@@ -1,55 +1,55 @@
-import type { App } from 'vue';
-
-declare type ListenEvent =
-  | 'scroll'
-  | 'wheel'
-  | 'mousewheel'
-  | 'resize'
-  | 'animationend'
-  | 'transitionend'
-  | 'touchmove';
-
-// eslint-disable-next-line
-declare type Callback = (listener: any, options: LazyloadOptions) => void;
-
-declare type Filter = {
-  webp?: Callback;
-  progressive?: Callback;
-};
-
-declare type Adapter = {
-  error?: Callback;
-  loaded?: Callback;
-  loading?: Callback;
-};
-
-export declare type LazyloadOptions = {
-  error?: string;
-  filter?: Filter;
-  silent?: boolean;
-  adapter?: Adapter;
-  loading?: string;
-  attempt?: number;
-  preLoad?: number;
-  observer?: boolean;
-  lazyImage?: boolean;
-  throttleWait?: number;
-  listenEvents?: ListenEvent[];
-  dispatchEvent?: boolean;
-  lazyComponent?: boolean;
-  observerOptions?: IntersectionObserverInit;
-};
-
-export declare const Lazyload: {
-  install(app: App, options?: LazyloadOptions): void;
-};
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $Lazyload: {
-      $on: (event: string, handler: Callback) => void;
-      $off: (event: string, handler?: Callback) => void;
-      $once: (event: string, handler: Callback) => void;
-    };
-  }
-}
+import type { App } from 'vue';
+
+declare type ListenEvent =
+  | 'scroll'
+  | 'wheel'
+  | 'mousewheel'
+  | 'resize'
+  | 'animationend'
+  | 'transitionend'
+  | 'touchmove';
+
+// eslint-disable-next-line
+declare type Callback = (listener: any, options: LazyloadOptions) => void;
+
+declare type Filter = {
+  webp?: Callback;
+  progressive?: Callback;
+};
+
+declare type Adapter = {
+  error?: Callback;
+  loaded?: Callback;
+  loading?: Callback;
+};
+
+export declare type LazyloadOptions = {
+  error?: string;
+  filter?: Filter;
+  silent?: boolean;
+  adapter?: Adapter;
+  loading?: string;
+  attempt?: number;
+  preLoad?: number;
+  observer?: boolean;
+  lazyImage?: boolean;
+  throttleWait?: number;
+  listenEvents?: ListenEvent[];
+  dispatchEvent?: boolean;
+  lazyComponent?: boolean;
+  observerOptions?: IntersectionObserverInit;
+};
+
+export declare const Lazyload: {
+  install(app: App, options?: LazyloadOptions): void;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $Lazyload: {
+      $on: (event: string, handler: Callback) => void;
+      $off: (event: string, handler?: Callback) => void;
+      $once: (event: string, handler: Callback) => void;
+    };
+  }
+}

package/es/media-picker/MediaPicker.mjs

@@ -265,6 +265,9 @@ var stdin_default = defineComponent({
         uniqueCode: getFileUniqueCode(f),
         lastModified: f.lastModified,
         fileSize: f.size,
+        fileName: f.name,
+        originalName: f.name,
+        originalSize: f.size,
         deletable: true,
         message: ""
       };
@@ -310,8 +313,15 @@ var stdin_default = defineComponent({
               uniqueCode: getFileUniqueCode(file),
               lastModified: f.lastModified,
               fileSize: f.size,
+              // 修改后大小，水印，压缩等
+              fileName: f.name,
+              // 修改后名称
               deletable: true,
-              message: ""
+              message: "",
+              originalName: file.name,
+              // 原始名称
+              originalSize: file.size
+              // 原始大小
             };
             return Promise.resolve(media);
           });
@@ -595,7 +605,7 @@ var stdin_default = defineComponent({
         const imageIndex = imageList.value.indexOf(media);
         showImagePreview({
           images: imageList.value.map((image) => ({
-            url: image.showSrc || ""
+            url: image.url || image.showSrc || ""
           })),
           startPosition: imageIndex
         });

package/es/media-picker/type.d.ts

@@ -8,6 +8,9 @@ export type Media = {
     uniqueCode: string;
     showSrc?: string;
     fileSize: number;
+    fileName: string;
+    originalName: string;
+    originalSize: number;
     lastModified: number;
     deletable: boolean;
     status?: MediaUploadStatus;

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

@@ -27,6 +27,10 @@ declare const multiplePickerProps: {
         type: BooleanConstructor;
         default: true;
     };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
     options: {
         type: import("vue").PropType<PickerOption[]>;
         default: () => PickerOption[];
@@ -47,6 +51,10 @@ declare const multiplePickerProps: {
         type: import("vue").PropType<number[]>;
         default: () => number[];
     };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
 };
 export type MultiplePickerProps = ExtractPropTypes<typeof multiplePickerProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -76,6 +84,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,6 +108,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<number[]>;
         default: () => number[];
     };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
 }, () => 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<{
     title: StringConstructor;
     loading: BooleanConstructor;
@@ -123,6 +139,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,6 +163,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<number[]>;
         default: () => number[];
     };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
@@ -153,14 +177,16 @@ declare const _default: import("vue").DefineComponent<{
     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[];
 }, {}>;

package/es/multiple-picker/MultiplePicker.mjs

@@ -19,11 +19,13 @@ 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([]),
+  popup: truthProp
 };
 var stdin_default = defineComponent({
   name,
@@ -78,12 +80,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 +156,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

@@ -49,7 +49,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,6 +77,7 @@ 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)]);

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,6 +51,10 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
         type: import("vue").PropType<number[]>;
         default: () => number[];
     };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
 }, () => 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<{
     title: StringConstructor;
     loading: BooleanConstructor;
@@ -74,6 +82,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,6 +106,10 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
         type: import("vue").PropType<number[]>;
         default: () => number[];
     };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
@@ -104,14 +120,16 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
     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[];
 }, {}>>;

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();
     };
   }
 });