zartui 3.1.67 → 3.1.69

package/es/index.d.ts

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

package/es/index.mjs

@@ -77,7 +77,7 @@ import { Timeline } from "./timeline/index.mjs";
 import { Toast } from "./toast/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
 import { Video } from "./video/index.mjs";
-const version = "3.1.67";
+const version = "3.1.69";
 function install(app) {
   const components = [
     ActionSheet,

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

@@ -1,4 +1,4 @@
-import { ExtractPropTypes } from 'vue';
+import { ExtractPropTypes, PropType } from 'vue';
 import { Numeric } from '../utils';
 import { PickerOption } from './types';
 declare const multiplePickerProps: {
@@ -34,19 +34,19 @@ declare const multiplePickerProps: {
         default: true;
     };
     options: {
-        type: import("vue").PropType<PickerOption[]>;
+        type: PropType<PickerOption[]>;
         default: () => PickerOption[];
     };
     filteredOptions: {
-        type: import("vue").PropType<PickerOption[]>;
-        default: () => PickerOption[];
+        type: PropType<PickerOption[]>;
+        default: undefined;
     };
     toolbarPosition: {
-        type: import("vue").PropType<string>;
+        type: PropType<string>;
         default: string;
     };
     textKey: {
-        type: import("vue").PropType<string>;
+        type: PropType<string>;
         default: string;
     };
     columnCounts: {
@@ -54,11 +54,11 @@ declare const multiplePickerProps: {
         default: number;
     };
     selectedIndex: {
-        type: import("vue").PropType<number[]>;
+        type: PropType<number[]>;
         default: () => number[];
     };
     selectedValue: {
-        type: import("vue").PropType<Numeric[]>;
+        type: PropType<Numeric[]>;
         default: () => Numeric[];
     };
     popup: {
@@ -107,19 +107,19 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: true;
     };
     options: {
-        type: import("vue").PropType<PickerOption[]>;
+        type: PropType<PickerOption[]>;
         default: () => PickerOption[];
     };
     filteredOptions: {
-        type: import("vue").PropType<PickerOption[]>;
-        default: () => PickerOption[];
+        type: PropType<PickerOption[]>;
+        default: undefined;
     };
     toolbarPosition: {
-        type: import("vue").PropType<string>;
+        type: PropType<string>;
         default: string;
     };
     textKey: {
-        type: import("vue").PropType<string>;
+        type: PropType<string>;
         default: string;
     };
     columnCounts: {
@@ -127,11 +127,11 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: number;
     };
     selectedIndex: {
-        type: import("vue").PropType<number[]>;
+        type: PropType<number[]>;
         default: () => number[];
     };
     selectedValue: {
-        type: import("vue").PropType<Numeric[]>;
+        type: PropType<Numeric[]>;
         default: () => Numeric[];
     };
     popup: {
@@ -172,19 +172,19 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: true;
     };
     options: {
-        type: import("vue").PropType<PickerOption[]>;
+        type: PropType<PickerOption[]>;
         default: () => PickerOption[];
     };
     filteredOptions: {
-        type: import("vue").PropType<PickerOption[]>;
-        default: () => PickerOption[];
+        type: PropType<PickerOption[]>;
+        default: undefined;
     };
     toolbarPosition: {
-        type: import("vue").PropType<string>;
+        type: PropType<string>;
         default: string;
     };
     textKey: {
-        type: import("vue").PropType<string>;
+        type: PropType<string>;
         default: string;
     };
     columnCounts: {
@@ -192,11 +192,11 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: number;
     };
     selectedIndex: {
-        type: import("vue").PropType<number[]>;
+        type: PropType<number[]>;
         default: () => number[];
     };
     selectedValue: {
-        type: import("vue").PropType<Numeric[]>;
+        type: PropType<Numeric[]>;
         default: () => Numeric[];
     };
     popup: {

package/es/multiple-picker/MultiplePicker.mjs

@@ -25,7 +25,10 @@ const multiplePickerProps = {
   showToolbar: truthProp,
   showTitle: truthProp,
   options: makeArrayProp(),
-  filteredOptions: makeArrayProp(),
+  filteredOptions: {
+    type: Array,
+    default: void 0
+  },
   toolbarPosition: makeStringProp("bottom"),
   textKey: makeStringProp("text"),
   columnCounts: makeNumberProp(3),
@@ -49,7 +52,7 @@ var stdin_default = defineComponent({
     const confirmIndexes = ref(props.selectedIndex);
     const confirmValues = ref(props.selectedValue);
     const displayOptions = computed(() => {
-      return props.filteredOptions && props.filteredOptions.length > 0 ? props.filteredOptions : currentOptions.value;
+      return props.filteredOptions !== void 0 ? props.filteredOptions : currentOptions.value;
     });
     const displaySelectedIndexes = computed(() => {
       if (!props.filteredOptions || props.filteredOptions.length === 0) {
@@ -147,11 +150,13 @@ var stdin_default = defineComponent({
       if (newValue !== props.showPicker) {
         emit("update:showPicker", newValue);
       }
-      currentOptions.value = deepClone(props.options);
-      confirmIndexes.value = deepClone(currentSelectedIndex.value);
-      confirmValues.value = deepClone(currentSelectedValue.value);
-      getIndexesByValues();
-      updateAllSelectedOptions();
+      if (newValue) {
+        currentOptions.value = deepClone(props.options);
+        confirmIndexes.value = deepClone(currentSelectedIndex.value);
+        confirmValues.value = deepClone(currentSelectedValue.value);
+        getIndexesByValues();
+        updateAllSelectedOptions();
+      }
     });
     watch(() => props.showPicker, (newValue) => {
       var _a;
@@ -277,65 +282,87 @@ var stdin_default = defineComponent({
     const handleSelectAll = () => {
       if (props.filteredOptions && props.filteredOptions.length === 0) {
         confirmIndexes.value = [];
+        confirmValues.value = [];
+        emit("update:selectedValue", confirmValues.value);
+        emit("update:selectedIndex", confirmIndexes.value);
         updateAllSelectedOptions();
+        onChange();
         return;
       }
+      let newIndexes = [];
       if (!isAllSelected.value) {
         if (props.filteredOptions && props.filteredOptions.length > 0) {
-          const selectedIndexes = [];
           displayOptions.value.forEach((option) => {
             const originalIndex = currentOptions.value.findIndex((opt) => opt.value === option.value);
             if (originalIndex >= 0) {
-              selectedIndexes.push(originalIndex);
+              newIndexes.push(originalIndex);
             }
           });
-          confirmIndexes.value = selectedIndexes;
         } else {
-          confirmIndexes.value = currentOptions.value.map((_, index) => index);
+          newIndexes = currentOptions.value.map((_, index) => index);
         }
       } else {
-        confirmIndexes.value = [];
+        newIndexes = [];
+      }
+      confirmIndexes.value = newIndexes;
+      if (confirmIndexes.value.length > 0) {
+        getValuesByIndexes();
+      } else {
+        confirmValues.value = [];
       }
+      emit("update:selectedValue", confirmValues.value);
+      emit("update:selectedIndex", confirmIndexes.value);
       updateAllSelectedOptions();
+      onChange();
     };
     const onSelectOther = () => {
       if (props.filteredOptions && props.filteredOptions.length === 0) {
         confirmIndexes.value = [];
+        confirmValues.value = [];
+        emit("update:selectedValue", confirmValues.value);
+        emit("update:selectedIndex", confirmIndexes.value);
         updateAllSelectedOptions();
+        onChange();
         return;
       }
+      let newIndexes = [];
       if (props.filteredOptions && props.filteredOptions.length > 0) {
-        const filteredValues = new Set(displayOptions.value.map((opt) => opt.value));
         const currentSelectedInFiltered = /* @__PURE__ */ new Set();
         confirmIndexes.value.forEach((idx) => {
           var _a;
           if (idx >= 0 && idx < currentOptions.value.length) {
             const value = (_a = currentOptions.value[idx]) == null ? void 0 : _a.value;
-            if (filteredValues.has(value)) {
+            const isInFilteredList = displayOptions.value.some((opt) => opt.value === value);
+            if (isInFilteredList) {
               currentSelectedInFiltered.add(idx);
             }
           }
         });
-        const newSelectedIndexes = [];
         displayOptions.value.forEach((option) => {
           const originalIndex = currentOptions.value.findIndex((opt) => opt.value === option.value);
           if (originalIndex >= 0) {
             if (!currentSelectedInFiltered.has(originalIndex)) {
-              newSelectedIndexes.push(originalIndex);
+              newIndexes.push(originalIndex);
             }
           }
         });
-        confirmIndexes.value = newSelectedIndexes;
       } else {
-        const temp = new Array();
         currentOptions.value.forEach((_, index) => {
           if (!confirmIndexes.value.includes(index)) {
-            temp.push(index);
+            newIndexes.push(index);
           }
         });
-        confirmIndexes.value = temp;
       }
+      confirmIndexes.value = newIndexes;
+      if (confirmIndexes.value.length > 0) {
+        getValuesByIndexes();
+      } else {
+        confirmValues.value = [];
+      }
+      emit("update:selectedValue", confirmValues.value);
+      emit("update:selectedIndex", confirmIndexes.value);
       updateAllSelectedOptions();
+      onChange();
     };
     const genOptionItems = () => {
       let formatOptions = [];
@@ -350,7 +377,7 @@ var stdin_default = defineComponent({
       return _createVNode(MultiplePickerOptions, {
         "ref": pickerOptions,
         "currentIndexes": displaySelectedIndexes.value,
-        "onUpdate:currentIndexes": [($event) => displaySelectedIndexes.value = $event, onUpdateCurrentIndexes],
+        "onUpdate:currentIndexes": onUpdateCurrentIndexes,
         "columnCounts": props.columnCounts,
         "initialOptions": formatOptions,
         "allowHtml": props.allowHtml,

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

@@ -38,7 +38,7 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
     };
     filteredOptions: {
         type: import("vue").PropType<import("./types").PickerOption[]>;
-        default: () => import("./types").PickerOption[];
+        default: undefined;
     };
     toolbarPosition: {
         type: import("vue").PropType<string>;
@@ -103,7 +103,7 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
     };
     filteredOptions: {
         type: import("vue").PropType<import("./types").PickerOption[]>;
-        default: () => import("./types").PickerOption[];
+        default: undefined;
     };
     toolbarPosition: {
         type: import("vue").PropType<string>;

package/es/tabs/TabsTitle.mjs

@@ -41,6 +41,7 @@ var stdin_default = defineComponent({
         scrollable
       } = props;
       const isCard = type === "card";
+      const isCapsule = type === "capsule";
       if (color && isCard) {
         style2.borderColor = color;
         if (!disabled) {
@@ -51,6 +52,17 @@ var stdin_default = defineComponent({
           }
         }
       }
+      if (isCapsule) {
+        if (!disabled) {
+          if (isActive) {
+            style2.backgroundImage = "linear-gradient(-80deg, #85C0FF 0%, #3388FF 100%)";
+            style2.borderRadius = "14px";
+            style2.color = "#ffffff";
+          } else {
+            style2.backgroundColor = "#ffffff";
+          }
+        }
+      }
       const titleColor = isActive ? activeColor : inactiveColor;
       if (titleColor) {
         style2.color = titleColor;

package/es/tabs/index.css

@@ -1 +1 @@
-:root{--zt-tab-active-text-color: var(--zt-text-color);--zt-tab-disabled-text-color: var(--zt-text-color-3);--zt-tab-active-opacity: .2;--zt-tabs-default-color: var(--zt-primary-color);--zt-tabs-line-height: 44px;--zt-tabs-line-bottom: 16px;--zt-tabs-card-height: 32px;--zt-tabs-bottom-bar-width: 12px;--zt-tabs-bottom-bar-height: 4px;--zt-tabs-bottom-bar-color: var(--zt-primary-color);--zt-tabs-bottom-bar-radius: 2px;--zt-tabs-nav-background: var(--zt-background);--zt-tab-text-color: var(--zt-gray-a6);--zt-tabs-overlay-left-background: linear-gradient(90deg, #ffffff 0%, rgba(245, 250, 255, 0) 100%);--zt-tabs-overlay-right-background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%)}.zt-tab{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--zt-padding-md);color:var(--zt-tab-text-color);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md);cursor:pointer}.zt-tab--active{color:var(--zt-tab-active-text-color);font-size:var(--zt-font-size-lg);font-weight:var(--zt-font-bold)}.zt-tab--active:active{opacity:var(--zt-tab-active-opacity)}.zt-tab--disabled{color:var(--zt-tab-disabled-text-color);cursor:not-allowed;font-size:var(--zt-font-size-md)}.zt-tab--grow{flex:1 0 auto;padding:0 var(--zt-padding-sm)}.zt-tab--shrink{flex:none;padding:0 var(--zt-padding-xs)}.zt-tab--card{color:var(--zt-tabs-default-color)}.zt-tab--card.zt-tab--active{color:var(--zt-white);background-color:var(--zt-tabs-default-color)}.zt-tab--card--disabled{color:var(--zt-tab-disabled-text-color)}.zt-tab__title{flex:1;display:flex;align-items:center;justify-content:center}.zt-tab__text--ellipsis{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.zt-tab__text-wrapper,.zt-tabs{position:relative}.zt-tabs__wrap{overflow:hidden;position:relative}.zt-tabs__wrap--page-top{position:fixed}.zt-tabs__wrap--content-bottom{top:auto;bottom:0}.zt-tabs__overlay-left,.zt-tabs__overlay-right{position:absolute;top:0;width:var(--zt-tabs-line-height);height:var(--zt-tabs-line-height);pointer-events:none}.zt-tabs__overlay-left{left:0;background:var(--zt-tabs-overlay-left-background)}.zt-tabs__overlay-right{right:0;background:var(--zt-tabs-overlay-right-background)}.zt-tabs__nav{position:relative;display:flex;justify-content:flex-start;background-color:var(--zt-tabs-nav-background);-webkit-user-select:none;-moz-user-select:none;user-select:none}.zt-tabs__nav--complete{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.zt-tabs__nav--complete::-webkit-scrollbar{display:none}.zt-tabs__nav--line{box-sizing:content-box;height:100%;padding-bottom:var(--zt-tabs-line-bottom)}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tab,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tab{flex:1 0 auto;padding:0 var(--zt-padding-sm)}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tabs__nav,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tabs__nav{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tabs__nav::-webkit-scrollbar,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tabs__nav::-webkit-scrollbar{display:none}.zt-tabs__nav--card.zt-tabs__nav--shrink{display:inline-flex}.zt-tabs__line{position:absolute;bottom:var(--zt-tabs-line-bottom);left:0;z-index:1;width:var(--zt-tabs-bottom-bar-width);height:var(--zt-tabs-bottom-bar-height);background:var(--zt-tabs-bottom-bar-color);border-radius:var(--zt-tabs-bottom-bar-radius)}.zt-tabs__track{position:relative;display:flex;width:100%;height:100%;will-change:left}.zt-tabs__content--animated{overflow:hidden}.zt-tabs--line .zt-tabs__wrap{height:var(--zt-tabs-line-height)}.zt-tabs--card>.zt-tabs__wrap{height:var(--zt-tabs-card-height);display:flex;justify-content:center}.zt-theme-dark{--zt-tabs-overlay-left-background: linear-gradient(90deg, #0f1923 0%, rgba(15, 25, 35, 0) 100%);--zt-tabs-overlay-right-background: linear-gradient(90deg, rgba(15, 25, 35, 0) 3%, #0f1923 100%)}
+:root{--zt-tab-active-text-color: var(--zt-text-color);--zt-tab-disabled-text-color: var(--zt-text-color-3);--zt-tab-active-opacity: .2;--zt-tabs-default-color: var(--zt-primary-color);--zt-tabs-line-height: 44px;--zt-tabs-line-bottom: 16px;--zt-tabs-card-height: 32px;--zt-tabs-bottom-bar-width: 12px;--zt-tabs-bottom-bar-height: 4px;--zt-tabs-bottom-bar-color: var(--zt-primary-color);--zt-tabs-bottom-bar-radius: 2px;--zt-tabs-nav-background: var(--zt-background);--zt-tab-text-color: var(--zt-gray-a6);--zt-tabs-overlay-left-background: linear-gradient(90deg, #ffffff 0%, rgba(245, 250, 255, 0) 100%);--zt-tabs-overlay-right-background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%)}.zt-tab{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--zt-padding-md);color:var(--zt-tab-text-color);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md);cursor:pointer}.zt-tab--active{color:var(--zt-tab-active-text-color);font-size:var(--zt-font-size-lg);font-weight:var(--zt-font-bold)}.zt-tab--active:active{opacity:var(--zt-tab-active-opacity)}.zt-tab--disabled{color:var(--zt-tab-disabled-text-color);cursor:not-allowed;font-size:var(--zt-font-size-md)}.zt-tab--grow{flex:1 0 auto;padding:0 var(--zt-padding-sm)}.zt-tab--shrink{flex:none;padding:0 var(--zt-padding-xs)}.zt-tab--card{color:var(--zt-tabs-default-color)}.zt-tab--card.zt-tab--active{color:var(--zt-white);background-color:var(--zt-tabs-default-color)}.zt-tab--card--disabled{color:var(--zt-tab-disabled-text-color)}.zt-tab--capsule{color:var(--zt-black)}.zt-tab--capsule.zt-tab--active{color:var(--zt-white);font-size:var(--zt-font-size-md);background-image:linear-gradient(-80deg,#85C0FF 0%,#3388FF 100%);border-radius:14px}.zt-tab--capsule--disabled{color:var(--zt-tab-disabled-text-color)}.zt-tab__title{flex:1;display:flex;align-items:center;justify-content:center}.zt-tab__text--ellipsis{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.zt-tab__text-wrapper,.zt-tabs{position:relative}.zt-tabs__wrap{overflow:hidden;position:relative}.zt-tabs__wrap--page-top{position:fixed}.zt-tabs__wrap--content-bottom{top:auto;bottom:0}.zt-tabs__overlay-left,.zt-tabs__overlay-right{position:absolute;top:0;width:var(--zt-tabs-line-height);height:var(--zt-tabs-line-height);pointer-events:none}.zt-tabs__overlay-left{left:0;background:var(--zt-tabs-overlay-left-background)}.zt-tabs__overlay-right{right:0;background:var(--zt-tabs-overlay-right-background)}.zt-tabs__nav{position:relative;display:flex;justify-content:flex-start;background-color:var(--zt-tabs-nav-background);-webkit-user-select:none;-moz-user-select:none;user-select:none}.zt-tabs__nav--complete{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.zt-tabs__nav--complete::-webkit-scrollbar{display:none}.zt-tabs__nav--line{box-sizing:content-box;height:100%;padding-bottom:var(--zt-tabs-line-bottom)}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tab,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tab{flex:1 0 auto;padding:0 var(--zt-padding-sm)}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tabs__nav,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tabs__nav{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.zt-tabs__nav--line.zt-tabs__nav--shrink .zt-tabs__nav::-webkit-scrollbar,.zt-tabs__nav--line.zt-tabs__nav--complete .zt-tabs__nav::-webkit-scrollbar{display:none}.zt-tabs__nav--card.zt-tabs__nav--shrink{display:inline-flex}.zt-tabs__nav--capsule{flex:1;box-sizing:border-box;justify-content:space-around;align-items:center;height:var(--zt-tabs-card-height);background:#ffffff;border-radius:18px;padding:4px}.zt-tabs__nav--capsule .zt-tab{flex:1;color:var(--zt-black)}.zt-tabs__nav--capsule .zt-tab.zt-tab--active{height:24px;color:var(--zt-white);font-size:var(--zt-font-size-md);background-image:linear-gradient(-80deg,#85C0FF 0%,#3388FF 100%);border-radius:14px}.zt-tabs__nav--capsule .zt-tab--disabled{color:var(--zt-tab-disabled-text-color)}.zt-tabs__nav--capsule.zt-tabs__nav--shrink{display:inline-flex}.zt-tabs__line{position:absolute;bottom:var(--zt-tabs-line-bottom);left:0;z-index:1;width:var(--zt-tabs-bottom-bar-width);height:var(--zt-tabs-bottom-bar-height);background:var(--zt-tabs-bottom-bar-color);border-radius:var(--zt-tabs-bottom-bar-radius)}.zt-tabs__track{position:relative;display:flex;width:100%;height:100%;will-change:left}.zt-tabs__content--animated{overflow:hidden}.zt-tabs--line .zt-tabs__wrap{height:var(--zt-tabs-line-height)}.zt-tabs--card>.zt-tabs__wrap,.zt-tabs--capsule>.zt-tabs__wrap{height:var(--zt-tabs-card-height);display:flex;justify-content:center}.zt-theme-dark{--zt-tabs-overlay-left-background: linear-gradient(90deg, #0f1923 0%, rgba(15, 25, 35, 0) 100%);--zt-tabs-overlay-right-background: linear-gradient(90deg, rgba(15, 25, 35, 0) 3%, #0f1923 100%)}

package/es/tabs/types.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPublicInstance, ComputedRef } from 'vue';
 import type { Numeric } from '../utils';
 import type { TabsProps } from './Tabs';
-export type TabsType = 'line' | 'card';
+export type TabsType = 'line' | 'card' | 'capsule';
 export type TabsClickTabEventParams = {
     name: Numeric;
     title: string;