zartui 3.1.61 → 3.1.63

package/lib/index.d.ts

@@ -84,4 +84,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.1.61";
+export const version: "3.1.63";

package/lib/index.js

@@ -182,7 +182,7 @@ __reExport(stdin_exports, require("./timeline"), module.exports);
 __reExport(stdin_exports, require("./toast"), module.exports);
 __reExport(stdin_exports, require("./uploader"), module.exports);
 __reExport(stdin_exports, require("./video"), module.exports);
-const version = "3.1.61";
+const version = "3.1.63";
 function install(app) {
   const components = [
     import_action_sheet.ActionSheet,

package/lib/media-picker/MediaPicker.js

@@ -713,8 +713,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
       emit("delete", media, index);
     };
     const renderMediaThumbnail = (media) => {
-      if (slots["preview-media"]) {
-        return slots["preview-media"]({
+      if (slots["thumbnail"]) {
+        return slots["thumbnail"]({
           file: media
         });
       }

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

@@ -11,6 +11,7 @@ declare const multiplePickerProps: {
     };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
+    otherButtonText: StringConstructor;
     showPicker: BooleanConstructor;
     allowHtml: {
         type: BooleanConstructor;
@@ -60,6 +61,7 @@ declare const multiplePickerProps: {
         type: BooleanConstructor;
         default: true;
     };
+    showSelectAll: BooleanConstructor;
 };
 export type MultiplePickerExpose = {
     resetOptions: (props: {
@@ -78,6 +80,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
+    otherButtonText: StringConstructor;
     showPicker: BooleanConstructor;
     allowHtml: {
         type: BooleanConstructor;
@@ -127,6 +130,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         type: BooleanConstructor;
         default: true;
     };
+    showSelectAll: BooleanConstructor;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, 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").PublicProps, Readonly<ExtractPropTypes<{
     title: StringConstructor;
     loading: BooleanConstructor;
@@ -137,6 +141,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
+    otherButtonText: StringConstructor;
     showPicker: BooleanConstructor;
     allowHtml: {
         type: BooleanConstructor;
@@ -186,6 +191,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         type: BooleanConstructor;
         default: true;
     };
+    showSelectAll: BooleanConstructor;
 }>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
@@ -210,5 +216,6 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     toolbarPosition: string;
     selectedIndex: number[];
     selectedValue: Numeric[];
+    showSelectAll: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/multiple-picker/MultiplePicker.js

@@ -35,6 +35,7 @@ var import_utils = require("../utils");
 var import_format = require("../utils/format");
 var import_deep_clone = require("../utils/deep-clone");
 var import_loading = __toESM(require("../loading"));
+var import_checkbox = __toESM(require("../checkbox"));
 var import_MultiplePickerOptions = __toESM(require("./MultiplePickerOptions"));
 var import_popup = __toESM(require("../popup"));
 var import_button = __toESM(require("../button"));
@@ -47,6 +48,7 @@ const multiplePickerProps = {
   itemHeight: (0, import_utils.makeNumericProp)(0),
   cancelButtonText: String,
   confirmButtonText: String,
+  otherButtonText: String,
   showPicker: Boolean,
   allowHtml: import_utils.truthProp,
   closeOnPopstate: import_utils.truthProp,
@@ -59,7 +61,8 @@ const multiplePickerProps = {
   columnCounts: (0, import_utils.makeNumberProp)(3),
   selectedIndex: (0, import_utils.makeArrayProp)([]),
   selectedValue: (0, import_utils.makeArrayProp)([]),
-  popup: import_utils.truthProp
+  popup: import_utils.truthProp,
+  showSelectAll: Boolean
 };
 var stdin_default = (0, import_vue.defineComponent)({
   name,
@@ -74,6 +77,12 @@ var stdin_default = (0, import_vue.defineComponent)({
     const currentSelectedValue = (0, import_vue.computed)(() => props.selectedValue);
     const confirmIndexes = (0, import_vue.ref)(props.selectedIndex);
     const confirmValues = (0, import_vue.ref)(props.selectedValue);
+    const isIndeterminate = (0, import_vue.computed)(() => {
+      return confirmIndexes.value.length > 0 && confirmIndexes.value.length < currentOptions.value.length;
+    });
+    const isAllSelected = (0, import_vue.computed)(() => {
+      return confirmIndexes.value.length > 0 && confirmIndexes.value.length === currentOptions.value.length;
+    });
     const resetOptions = (props2) => {
       currentOptions.value = props2.options;
       confirmIndexes.value = props2.selectedIndex;
@@ -172,40 +181,89 @@ var stdin_default = (0, import_vue.defineComponent)({
         }, [props.title ? props.title : "\u8BF7\u9009\u62E9"]);
       }
     };
+    const genOther = () => {
+      const text = props.otherButtonText || "\u5176\u4ED6";
+      return (0, import_vue.createVNode)(import_button.default, {
+        "class": bem("select-other"),
+        "size": "medium",
+        "style": {
+          marginLeft: "12px",
+          marginRight: "8px"
+        },
+        "onClick": onSelectOther
+      }, {
+        default: () => [slots.selectOther ? slots.selectOther() : text]
+      });
+    };
     const genCancel = () => {
       const text = props.cancelButtonText || "\u53D6\u6D88";
-      return (0, import_vue.createVNode)(import_button.default, {
-        "size": "normal",
-        "block": true,
+      return (0, import_vue.createVNode)(import_button.default, (0, import_vue.mergeProps)({
+        "class": [props.showSelectAll ? bem("in-select-all") : ""],
+        "size": props.showSelectAll ? "medium" : "normal"
+      }, props.showSelectAll !== true ? {
+        block: true
+      } : {}, {
         "style": {
           marginRigth: "4px"
         },
         "onClick": onCancel
-      }, {
+      }), {
         default: () => [slots.cancel ? slots.cancel() : text]
       });
     };
     const genConfirm = () => {
       const text = props.confirmButtonText || "\u786E\u5B9A";
-      return (0, import_vue.createVNode)(import_button.default, {
+      return (0, import_vue.createVNode)(import_button.default, (0, import_vue.mergeProps)({
         "type": "primary",
-        "size": "normal",
-        "block": true,
+        "class": [props.showSelectAll ? bem("in-select-all") : ""],
+        "size": props.showSelectAll ? "medium" : "normal"
+      }, props.showSelectAll !== true ? {
+        block: true
+      } : {}, {
         "style": {
           marginLeft: "8px"
         },
         "onClick": confirm
-      }, {
+      }), {
         default: () => [slots.confirm ? slots.confirm() : text]
       });
     };
     const genToolbar = () => {
       if (props.showToolbar) {
+        const content = props.showSelectAll ? [genSelectAll(), genOther(), genCancel(), genConfirm()] : [genCancel(), genConfirm()];
         return (0, import_vue.createVNode)("div", {
           "class": bem("toolbar")
-        }, [slots.toolbar ? slots.toolbar() : [genCancel(), genConfirm()]]);
+        }, [slots.toolbar ? slots.toolbar() : content]);
       }
     };
+    const genSelectAll = () => (0, import_vue.createVNode)("div", {
+      "class": bem("toolbar-select-all")
+    }, [(0, import_vue.createVNode)(import_checkbox.default, {
+      "class": bem("toolbar-checkbox"),
+      "shape": "square",
+      "modelValue": isAllSelected.value,
+      "onUpdate:modelValue": ($event) => isAllSelected.value = $event,
+      "indeterminate": isIndeterminate.value,
+      "onClick": handleSelectAll
+    }, {
+      default: () => [(0, import_vue.createTextVNode)("\u5168\u9009")]
+    }), (0, import_vue.createVNode)("div", {
+      "class": bem("toolbar-divider")
+    }, null), (0, import_vue.createVNode)("span", {
+      "class": bem("toolbar-checkbox-text")
+    }, [(0, import_vue.createTextVNode)("\u5DF2\u9009 "), confirmIndexes.value.length])]);
+    const handleSelectAll = () => {
+      confirmIndexes.value = !isAllSelected.value ? currentOptions.value.map((_, index) => index) : [];
+    };
+    const onSelectOther = () => {
+      const temp = Array();
+      currentOptions.value.forEach((_, index) => {
+        if (!confirmIndexes.value.includes(index)) {
+          temp.push(index);
+        }
+      });
+      confirmIndexes.value = temp;
+    };
     const genOptionItems = (0, import_vue.computed)(() => {
       let formatOptions = [];
       if (currentOptions.value && currentOptions.value[0] && typeof currentOptions.value[0] !== "object") {

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-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;-moz-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: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}
+: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;-moz-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;overflow:hidden;background:var(--zt-multiple-picker-title-background);height:var(--zt-multiple-picker-toolbar-height);padding:var(--zt-multiple-picker-toolbar-padding)}.zt-multiple-picker__toolbar-select-all{display:flex;align-items:center;flex:1;max-width:45%}.zt-multiple-picker__toolbar-divider{width:1px;height:14px;background-color:var(--zt-gray-a2);margin-left:7px;margin-right:7px}.zt-multiple-picker__toolbar-checkbox{flex-shrink:0}.zt-multiple-picker__toolbar-checkbox .zt-checkbox__icon{font-size:var(--zt-font-size-xl)}.zt-multiple-picker__toolbar-checkbox .zt-checkbox__label{font-size:var(--zt-font-size-lg);margin-left:var(--zt-padding-base)}.zt-multiple-picker__toolbar-checkbox-text{font-size:var(--zt-font-size-lg);color:var(--zt-text-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media (max-width: 375px){.zt-multiple-picker__toolbar .zt-multiple-picker__in-select-all{padding:0 14px}}@media (min-width: 376px){.zt-multiple-picker__toolbar .zt-multiple-picker__in-select-all{padding:0 22px}}.zt-multiple-picker__toolbar .zt-multiple-picker__in-select-all .zt-button__text{font-size:var(--zt-font-size-lg)}@media (max-width: 375px){.zt-multiple-picker__toolbar .zt-multiple-picker__select-other{padding:0 10px}}@media (min-width: 376px){.zt-multiple-picker__toolbar .zt-multiple-picker__select-other{padding:0 14px}}.zt-multiple-picker__toolbar .zt-multiple-picker__select-other .zt-button__text{font-size:var(--zt-font-size-lg)}.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: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

@@ -10,6 +10,7 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
     };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
+    otherButtonText: StringConstructor;
     showPicker: BooleanConstructor;
     allowHtml: {
         type: BooleanConstructor;
@@ -59,6 +60,7 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
         type: BooleanConstructor;
         default: true;
     };
+    showSelectAll: BooleanConstructor;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, 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").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     loading: BooleanConstructor;
@@ -69,6 +71,7 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
     };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
+    otherButtonText: StringConstructor;
     showPicker: BooleanConstructor;
     allowHtml: {
         type: BooleanConstructor;
@@ -118,6 +121,7 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
         type: BooleanConstructor;
         default: true;
     };
+    showSelectAll: BooleanConstructor;
 }>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
@@ -142,6 +146,7 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
     toolbarPosition: string;
     selectedIndex: number[];
     selectedValue: import("../utils").Numeric[];
+    showSelectAll: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
 export default MultiplePicker;
 export type { MultiplePickerProps };

package/lib/multiple-picker/style/index.js

@@ -5,4 +5,6 @@ require("../../overlay/index.css");
 require("../../popup/index.css");
 require("../../loading/index.css");
 require("../../button/index.css");
+require("../../checkbox-group/index.css");
+require("../../checkbox/index.css");
 require("../index.css");