zartui 3.1.13 → 3.1.14

package/lib/index.d.ts

@@ -55,6 +55,7 @@ export * from "./row";
 export * from "./search";
 export * from "./signature";
 export * from "./skeleton";
+export * from "./slider";
 export * from "./step";
 export * from "./stepper";
 export * from "./steps";

package/lib/index.js

@@ -79,6 +79,7 @@ var import_row = require("./row");
 var import_search = require("./search");
 var import_signature = require("./signature");
 var import_skeleton = require("./skeleton");
+var import_slider = require("./slider");
 var import_step = require("./step");
 var import_stepper = require("./stepper");
 var import_steps = require("./steps");
@@ -155,6 +156,7 @@ __reExport(stdin_exports, require("./row"), module.exports);
 __reExport(stdin_exports, require("./search"), module.exports);
 __reExport(stdin_exports, require("./signature"), module.exports);
 __reExport(stdin_exports, require("./skeleton"), module.exports);
+__reExport(stdin_exports, require("./slider"), module.exports);
 __reExport(stdin_exports, require("./step"), module.exports);
 __reExport(stdin_exports, require("./stepper"), module.exports);
 __reExport(stdin_exports, require("./steps"), module.exports);
@@ -233,6 +235,7 @@ function install(app) {
     import_search.Search,
     import_signature.Signature,
     import_skeleton.Skeleton,
+    import_slider.Slider,
     import_step.Step,
     import_stepper.Stepper,
     import_steps.Steps,

package/lib/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/lib/media-picker/MediaPicker.js

@@ -297,6 +297,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
         uniqueCode: (0, import_media_util.getFileUniqueCode)(f),
         lastModified: f.lastModified,
         fileSize: f.size,
+        fileName: f.name,
+        originalName: f.name,
+        originalSize: f.size,
         deletable: true,
         message: ""
       };
@@ -342,8 +345,15 @@ var stdin_default = (0, import_vue2.defineComponent)({
               uniqueCode: (0, import_media_util.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);
           });
@@ -627,7 +637,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         const imageIndex = imageList.value.indexOf(media);
         (0, import_image_preview.showImagePreview)({
           images: imageList.value.map((image) => ({
-            url: image.showSrc || ""
+            url: image.url || image.showSrc || ""
           })),
           startPosition: imageIndex
         });

package/lib/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/lib/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/lib/multiple-picker/MultiplePicker.js

@@ -51,11 +51,13 @@ const multiplePickerProps = {
   closeOnPopstate: import_utils.truthProp,
   closeOnClickOverlay: import_utils.truthProp,
   showToolbar: import_utils.truthProp,
+  showTitle: import_utils.truthProp,
   options: (0, import_utils.makeArrayProp)(),
   toolbarPosition: (0, import_utils.makeStringProp)("bottom"),
   textKey: (0, import_utils.makeStringProp)("text"),
   columnCounts: (0, import_utils.makeNumberProp)(3),
-  selectedIndex: (0, import_utils.makeArrayProp)([])
+  selectedIndex: (0, import_utils.makeArrayProp)([]),
+  popup: import_utils.truthProp
 };
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
@@ -110,12 +112,14 @@ var stdin_default = (0, import_vue2.defineComponent)({
       emit("confirm", options);
     };
     const genTitle = () => {
-      if (slots.title) {
-        return slots.title();
+      if (props.showTitle) {
+        if (slots.title) {
+          return slots.title();
+        }
+        return (0, import_vue.createVNode)("div", {
+          "class": ["zt-ellipsis", bem("title")]
+        }, [props.title ? props.title : "\u8BF7\u9009\u62E9"]);
       }
-      return (0, import_vue.createVNode)("div", {
-        "class": ["zt-ellipsis", bem("title")]
-      }, [props.title ? props.title : "\u8BF7\u9009\u62E9"]);
     };
     const genCancel = () => {
       const text = props.cancelButtonText || "\u53D6\u6D88";
@@ -184,15 +188,21 @@ var stdin_default = (0, import_vue2.defineComponent)({
     }, [genTitle(), props.loading ? (0, import_vue.createVNode)(import_loading.default, {
       "class": bem("loading")
     }, null) : "", genOptions(), props.toolbarPosition === "bottom" ? genToolbar() : ""]);
-    return () => (0, import_vue.createVNode)(import_popup.default, {
-      "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 (0, import_vue.createVNode)(import_popup.default, {
+          "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();
+      }
+    };
   }
 });

package/lib/multiple-picker/MultiplePickerOptions.js

@@ -71,7 +71,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return option;
     };
-    const isOptionDisabled = (option) => (0, import_utils.isObject)(option) && option.disabled;
+    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) {
@@ -99,6 +99,7 @@ var stdin_default = (0, import_vue2.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) : (0, import_vue.createVNode)("div", childData, null)]);

package/lib/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/lib/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/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, ("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/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();
     };
   }
 });