@varlet/ui 2.21.0 → 2.22.0-alpha.1705845515578

package/lib/varlet.cjs.js

@@ -7,7 +7,7 @@ const context = {
   enableRipple: true
 };
 const _ContextComponent = vue.reactive(context);
-var stdin_default$3y = vue.reactive(context);
+var stdin_default$3z = vue.reactive(context);
 var __defProp$v = Object.defineProperty;
 var __defProps$a = Object.defineProperties;
 var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
@@ -824,7 +824,7 @@ function computeRippleStyles(element, event) {
 function createRipple(event) {
   const _ripple = this._ripple;
   _ripple.removeRipple();
-  if (_ripple.disabled || _ripple.tasker || !stdin_default$3y.enableRipple) {
+  if (_ripple.disabled || _ripple.tasker || !stdin_default$3z.enableRipple) {
     return;
   }
   const task = () => {
@@ -867,7 +867,7 @@ function removeRipple() {
   _ripple.tasker ? window.setTimeout(task, 30) : task();
 }
 function forbidRippleTask() {
-  if (!supportTouch() || !stdin_default$3y.enableRipple) {
+  if (!supportTouch() || !stdin_default$3z.enableRipple) {
     return;
   }
   const _ripple = this._ripple;
@@ -919,7 +919,7 @@ const Ripple = {
   }
 };
 const _RippleComponent = Ripple;
-var stdin_default$3x = Ripple;
+var stdin_default$3y = Ripple;
 const props$1g = {
   show: Boolean,
   position: {
@@ -961,15 +961,15 @@ const props$1g = {
   onRouteChange: defineListenerProp()
 };
 function resolveLock() {
-  const lockCounts = Object.keys(stdin_default$3y.locks).length;
+  const lockCounts = Object.keys(stdin_default$3z.locks).length;
   lockCounts <= 0 ? document.body.classList.remove("var--lock") : document.body.classList.add("var--lock");
 }
 function addLock(uid) {
-  stdin_default$3y.locks[uid] = 1;
+  stdin_default$3z.locks[uid] = 1;
   resolveLock();
 }
 function releaseLock(uid) {
-  delete stdin_default$3y.locks[uid];
+  delete stdin_default$3z.locks[uid];
   resolveLock();
 }
 function useLock(source, useSource) {
@@ -1027,13 +1027,13 @@ function useLock(source, useSource) {
   });
 }
 function useZIndex(source, count) {
-  const zIndex = vue.ref(stdin_default$3y.zIndex);
+  const zIndex = vue.ref(stdin_default$3z.zIndex);
   vue.watch(
     source,
     (newValue) => {
       if (newValue) {
-        stdin_default$3y.zIndex += process.env.NODE_ENV === "test" ? 0 : count;
-        zIndex.value = stdin_default$3y.zIndex;
+        stdin_default$3z.zIndex += process.env.NODE_ENV === "test" ? 0 : count;
+        zIndex.value = stdin_default$3z.zIndex;
       }
     },
     { immediate: true }
@@ -1078,7 +1078,7 @@ const {
   n: n$1n,
   classes: classes$19
 } = createNamespace("popup");
-var stdin_default$3w = vue.defineComponent({
+var stdin_default$3x = vue.defineComponent({
   name: name$1g,
   inheritAttrs: false,
   props: props$1g,
@@ -1143,7 +1143,7 @@ var stdin_default$3w = vue.defineComponent({
         "onAfterLeave": props2.onClosed
       }, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": classes$19(n$1n("$--box"), n$1n()),
+          "class": classes$19(n$1n("$--box"), n$1n(), [!props2.overlay, n$1n("--pointer-events-none")]),
           "style": {
             zIndex: zIndex.value - 2
           }
@@ -1170,10 +1170,10 @@ var stdin_default$3w = vue.defineComponent({
     };
   }
 });
-withInstall(stdin_default$3w);
-withPropsDefaultsSetter(stdin_default$3w, props$1g);
-const _PopupComponent = stdin_default$3w;
-var stdin_default$3v = stdin_default$3w;
+withInstall(stdin_default$3x);
+withPropsDefaultsSetter(stdin_default$3x, props$1g);
+const _PopupComponent = stdin_default$3x;
+var stdin_default$3w = stdin_default$3x;
 const props$1f = {
   name: String,
   size: [Number, String],
@@ -1420,11 +1420,11 @@ const __sfc__$1n = vue.defineComponent({
   }
 });
 __sfc__$1n.render = __render__$1m;
-var stdin_default$3u = __sfc__$1n;
-withInstall(stdin_default$3u);
-withPropsDefaultsSetter(stdin_default$3u, props$1f);
-const _IconComponent = stdin_default$3u;
-var stdin_default$3t = stdin_default$3u;
+var stdin_default$3v = __sfc__$1n;
+withInstall(stdin_default$3v);
+withPropsDefaultsSetter(stdin_default$3v, props$1f);
+const _IconComponent = stdin_default$3v;
+var stdin_default$3u = stdin_default$3v;
 var __defProp$q = Object.defineProperty;
 var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
 var __hasOwnProp$q = Object.prototype.hasOwnProperty;
@@ -1470,7 +1470,7 @@ const props$1e = __spreadValues$q({
   // internal for function call closes the dialog
   "onRouteChange"
 ]));
-var stdin_default$3s = {
+var stdin_default$3t = {
   // Dialog
   dialogTitle: "提示",
   dialogConfirmButtonText: "确认",
@@ -1575,7 +1575,7 @@ var stdin_default$3s = {
   // time-picker
   timePickerHint: "选择时间"
 };
-var stdin_default$3r = {
+var stdin_default$3s = {
   // Dialog
   dialogTitle: "Hint",
   dialogConfirmButtonText: "Confirm",
@@ -1680,7 +1680,7 @@ var stdin_default$3r = {
   // time-picker
   timePickerHint: "SELECT TIME"
 };
-var stdin_default$3q = {
+var stdin_default$3r = {
   // Dialog
   dialogTitle: "提示",
   dialogConfirmButtonText: "確認",
@@ -1782,7 +1782,112 @@ var stdin_default$3q = {
   paginationPage: "頁",
   paginationJump: "前往"
 };
-var stdin_default$3p = stdin_default$3q;
+var stdin_default$3q = stdin_default$3r;
+var stdin_default$3p = {
+  // Dialog
+  dialogTitle: "اشاره",
+  dialogConfirmButtonText: "تایید",
+  dialogCancelButtonText: "لغو",
+  // ActionSheet
+  actionSheetTitle: "انتخاب یک مورد",
+  // List
+  listLoadingText: "در حال بارگزاری",
+  listFinishedText: "مورد دیگری وجود ندارد",
+  listErrorText: "بارگزاری ناموفق",
+  // Picker
+  pickerTitle: "انتخاب کنید",
+  pickerConfirmButtonText: "تایید",
+  pickerCancelButtonText: "لغو",
+  // date-picker
+  datePickerMonthDict: {
+    "01": {
+      name: "ژانویه",
+      abbr: "JAN"
+    },
+    "02": {
+      name: "فوریه",
+      abbr: "FEB"
+    },
+    "03": {
+      name: "مارس",
+      abbr: "MAR"
+    },
+    "04": {
+      name: "آوریل",
+      abbr: "APR"
+    },
+    "05": {
+      name: "مه",
+      abbr: "MAY"
+    },
+    "06": {
+      name: "ژوئن",
+      abbr: "JUN"
+    },
+    "07": {
+      name: "جولای",
+      abbr: "JUL"
+    },
+    "08": {
+      name: "آگوست",
+      abbr: "AUG"
+    },
+    "09": {
+      name: "سپتامبر",
+      abbr: "SEP"
+    },
+    "10": {
+      name: "اوکتبر",
+      abbr: "OCT"
+    },
+    "11": {
+      name: "نوامبر",
+      abbr: "NOV"
+    },
+    "12": {
+      name: "دسامبر",
+      abbr: "DEC"
+    }
+  },
+  datePickerWeekDict: {
+    "0": {
+      name: "یکشنبه",
+      abbr: "S"
+    },
+    "1": {
+      name: "دوشنبه",
+      abbr: "M"
+    },
+    "2": {
+      name: "سه‌شنبه",
+      abbr: "T"
+    },
+    "3": {
+      name: "چهارشنبه",
+      abbr: "W"
+    },
+    "4": {
+      name: "پنجشنبه",
+      abbr: "T"
+    },
+    "5": {
+      name: "جمعه",
+      abbr: "F"
+    },
+    "6": {
+      name: "شنبه",
+      abbr: "S"
+    }
+  },
+  datePickerSelected: " انتخاب شده",
+  datePickerHint: "انتخاب تاریخ",
+  // pagination
+  paginationItem: "",
+  paginationPage: "صفحه",
+  paginationJump: "برو به",
+  // time-picker
+  timePickerHint: "انتخاب زمان"
+};
 var __defProp$p = Object.defineProperty;
 var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
 var __hasOwnProp$p = Object.prototype.hasOwnProperty;
@@ -1830,14 +1935,15 @@ function useLocale() {
   };
 }
 const { packs, pack, add: add$2, use, merge } = useLocale();
-add$2("zh-CN", stdin_default$3s);
+add$2("zh-CN", stdin_default$3t);
 use("zh-CN");
-const _LocaleComponent = { zhCN: stdin_default$3s, enUS: stdin_default$3r, packs, pack, add: add$2, use, merge, useLocale };
+const _LocaleComponent = { zhCN: stdin_default$3t, enUS: stdin_default$3s, packs, pack, add: add$2, use, merge, useLocale };
 var stdin_default$3o = {
-  zhCN: stdin_default$3s,
-  enUS: stdin_default$3r,
-  zhTW: stdin_default$3q,
-  zhHK: stdin_default$3p,
+  zhCN: stdin_default$3t,
+  enUS: stdin_default$3s,
+  zhTW: stdin_default$3r,
+  zhHK: stdin_default$3q,
+  faIR: stdin_default$3p,
   packs,
   pack,
   add: add$2,
@@ -1939,10 +2045,10 @@ function __render__$1l(_ctx, _cache) {
 }
 const __sfc__$1m = vue.defineComponent({
   name: name$1e,
-  directives: { Ripple: stdin_default$3x },
+  directives: { Ripple: stdin_default$3y },
   components: {
-    VarPopup: stdin_default$3v,
-    VarIcon: stdin_default$3t
+    VarPopup: stdin_default$3w,
+    VarIcon: stdin_default$3u
   },
   inheritAttrs: false,
   props: props$1e,
@@ -3172,7 +3278,7 @@ const __sfc__$1g = vue.defineComponent({
     VarLoading: stdin_default$3d,
     VarHoverOverlay: stdin_default$3b
   },
-  directives: { Ripple: stdin_default$3x, Hover: stdin_default$3a },
+  directives: { Ripple: stdin_default$3y, Hover: stdin_default$3a },
   props: props$18,
   setup(props2) {
     const pending = vue.ref(false);
@@ -3307,7 +3413,7 @@ const __sfc__$1f = vue.defineComponent({
   name: name$17,
   components: {
     VarButton: stdin_default$38,
-    VarIcon: stdin_default$3t
+    VarIcon: stdin_default$3u
   },
   inheritAttrs: false,
   props: props$17,
@@ -3467,7 +3573,7 @@ function __render__$1d(_ctx, _cache) {
 }
 const __sfc__$1e = vue.defineComponent({
   name: name$16,
-  components: { VarIcon: stdin_default$3t },
+  components: { VarIcon: stdin_default$3u },
   inheritAttrs: false,
   props: props$16,
   setup(props2) {
@@ -3799,9 +3905,9 @@ const __sfc__$1c = vue.defineComponent({
   name: name$14,
   components: {
     VarBadge: stdin_default$34,
-    VarIcon: stdin_default$3t
+    VarIcon: stdin_default$3u
   },
-  directives: { Ripple: stdin_default$3x },
+  directives: { Ripple: stdin_default$3y },
   props: props$14,
   setup(props2) {
     const name2 = vue.computed(() => props2.name);
@@ -4288,9 +4394,9 @@ function __render__$17(_ctx, _cache) {
 }
 const __sfc__$18 = vue.defineComponent({
   name: name$10,
-  directives: { Ripple: stdin_default$3x },
+  directives: { Ripple: stdin_default$3y },
   components: {
-    VarIcon: stdin_default$3t,
+    VarIcon: stdin_default$3u,
     VarButton: stdin_default$38
   },
   props: props$10,
@@ -4524,8 +4630,8 @@ function __render__$16(_ctx, _cache) {
 }
 const __sfc__$17 = vue.defineComponent({
   name: name$$,
-  components: { VarIcon: stdin_default$3t },
-  directives: { Ripple: stdin_default$3x },
+  components: { VarIcon: stdin_default$3u },
+  directives: { Ripple: stdin_default$3y },
   props: props$$,
   setup(props2) {
     const borderOffsetStyles = vue.computed(() => {
@@ -4844,9 +4950,9 @@ function __render__$14(_ctx, _cache) {
 }
 const __sfc__$15 = vue.defineComponent({
   name: name$Z,
-  directives: { Ripple: stdin_default$3x, Hover: stdin_default$3a },
+  directives: { Ripple: stdin_default$3y, Hover: stdin_default$3a },
   components: {
-    VarIcon: stdin_default$3t,
+    VarIcon: stdin_default$3u,
     VarFormDetails: stdin_default$2Q,
     VarHoverOverlay: stdin_default$3b
   },
@@ -5179,7 +5285,7 @@ function __render__$12(_ctx, _cache) {
 const __sfc__$13 = vue.defineComponent({
   name: name$X,
   components: {
-    VarIcon: stdin_default$3t
+    VarIcon: stdin_default$3u
   },
   inheritAttrs: false,
   props: props$X,
@@ -5700,7 +5806,7 @@ function __render__$$(_ctx, _cache) {
 const __sfc__$10 = vue.defineComponent({
   name: name$U,
   components: {
-    VarIcon: stdin_default$3t
+    VarIcon: stdin_default$3u
   },
   props: props$U,
   setup(props2) {
@@ -8470,10 +8576,10 @@ const __sfc__$Z = vue.defineComponent({
   name: name$R,
   components: {
     VarButton: stdin_default$38,
-    VarIcon: stdin_default$3t,
+    VarIcon: stdin_default$3u,
     VarFormDetails: stdin_default$2Q
   },
-  directives: { Ripple: stdin_default$3x },
+  directives: { Ripple: stdin_default$3y },
   inheritAttrs: false,
   props: props$R,
   setup(props2) {
@@ -9223,7 +9329,7 @@ const __sfc__$Y = vue.defineComponent({
   name: "PanelHeader",
   components: {
     VarButton: stdin_default$38,
-    VarIcon: stdin_default$3t
+    VarIcon: stdin_default$3u
   },
   props: {
     date: {
@@ -11238,7 +11344,7 @@ function __render__$R(_ctx, _cache) {
 const __sfc__$S = vue.defineComponent({
   name: name$O,
   components: {
-    VarPopup: stdin_default$3v,
+    VarPopup: stdin_default$3w,
     VarButton: stdin_default$38
   },
   inheritAttrs: false,
@@ -13777,7 +13883,7 @@ var stdin_default$2f = vue.defineComponent({
         "elevation": props2.elevation,
         "round": true
       }, {
-        default: () => [vue.createVNode(stdin_default$3t, {
+        default: () => [vue.createVNode(stdin_default$3u, {
           "var-fab-cover": true,
           "class": classes$E([isActive.value, n$M("trigger-active-icon"), n$M("trigger-inactive-icon")]),
           "name": isActive.value ? props2.activeIcon : props2.inactiveIcon,
@@ -14066,7 +14172,7 @@ function __render__$M(_ctx, _cache) {
 }
 const __sfc__$N = vue.defineComponent({
   name: name$I,
-  components: { VarIcon: stdin_default$3t },
+  components: { VarIcon: stdin_default$3u },
   props: props$I,
   setup(props2, { slots }) {
     const placeholderTextEl = vue.ref(null);
@@ -14525,7 +14631,7 @@ const __sfc__$K = vue.defineComponent({
   name: name$F,
   directives: {
     Lazy: stdin_default$3j,
-    Ripple: stdin_default$3x
+    Ripple: stdin_default$3y
   },
   props: props$F,
   setup(props2, { slots }) {
@@ -14804,7 +14910,7 @@ function __render__$I(_ctx, _cache) {
 const __sfc__$J = vue.defineComponent({
   name: name$E,
   directives: { Hover: stdin_default$3a },
-  components: { VarButton: stdin_default$38, VarIcon: stdin_default$3t },
+  components: { VarButton: stdin_default$38, VarIcon: stdin_default$3u },
   props: props$E,
   setup(props2) {
     const swipeEl = vue.ref(null);
@@ -15345,8 +15451,8 @@ const __sfc__$H = vue.defineComponent({
   components: {
     VarSwipe: stdin_default$24,
     VarSwipeItem: stdin_default$22,
-    VarPopup: stdin_default$3v,
-    VarIcon: stdin_default$3t
+    VarPopup: stdin_default$3w,
+    VarIcon: stdin_default$3u
   },
   inheritAttrs: false,
   props: props$D,
@@ -15809,7 +15915,15 @@ function __render__$E(_ctx, _cache) {
                 class: vue.normalizeClass(_ctx.classes(_ctx.n("anchor-item"), [_ctx.active === anchorName, _ctx.n("anchor-item--active")])),
                 style: vue.normalizeStyle({ color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : void 0 }),
                 onClick: ($event) => _ctx.anchorClick({ anchorName, manualCall: true })
-              }, vue.toDisplayString(anchorName), 15, _hoisted_1$h);
+              }, [
+                vue.renderSlot(_ctx.$slots, "anchor-name", { anchorName }, () => [
+                  vue.createTextVNode(
+                    vue.toDisplayString(anchorName),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ], 14, _hoisted_1$h);
             }),
             128
             /* KEYED_FRAGMENT */
@@ -16662,7 +16776,7 @@ function __render__$B(_ctx, _cache) {
 }
 const __sfc__$C = vue.defineComponent({
   name: name$x,
-  directives: { Ripple: stdin_default$3x },
+  directives: { Ripple: stdin_default$3y },
   components: { VarLoading: stdin_default$3d },
   props: props$y,
   setup(props2) {
@@ -16750,7 +16864,7 @@ var stdin_default$1R = vue.defineComponent({
     return () => vue.createVNode("div", {
       "class": classes$t(n$z(), [props2.error, n$z("--error")]),
       "style": {
-        zIndex: stdin_default$3y.zIndex + 10,
+        zIndex: stdin_default$3z.zIndex + 10,
         width: `${props2.value}%`,
         opacity: props2.opacity,
         height: toSizeUnit(props2.height),
@@ -17105,7 +17219,7 @@ function __render__$z(_ctx, _cache) {
 }
 const __sfc__$A = vue.defineComponent({
   name: name$u,
-  directives: { Ripple: stdin_default$3x, Hover: stdin_default$3a },
+  directives: { Ripple: stdin_default$3y, Hover: stdin_default$3a },
   components: {
     VarCheckbox: stdin_default$2O,
     VarHoverOverlay: stdin_default$3b
@@ -17468,7 +17582,7 @@ function __render__$x(_ctx, _cache) {
 }
 const __sfc__$y = vue.defineComponent({
   name: name$s,
-  directives: { Ripple: stdin_default$3x, Hover: stdin_default$3a },
+  directives: { Ripple: stdin_default$3y, Hover: stdin_default$3a },
   components: {
     VarCheckbox: stdin_default$2O,
     VarHoverOverlay: stdin_default$3b
@@ -17872,11 +17986,11 @@ const __sfc__$x = vue.defineComponent({
   name: name$q,
   components: {
     VarMenu: stdin_default$1O,
-    VarIcon: stdin_default$3t,
+    VarIcon: stdin_default$3u,
     VarCell: stdin_default$2S,
     VarInput: stdin_default$1W
   },
-  directives: { Ripple: stdin_default$3x },
+  directives: { Ripple: stdin_default$3y },
   props: props$q,
   setup(props2) {
     const menuVisible = vue.ref(false);
@@ -18094,7 +18208,7 @@ function __render__$v(_ctx, _cache) {
 }
 const __sfc__$w = vue.defineComponent({
   name: name$p,
-  directives: { Ripple: stdin_default$3x },
+  directives: { Ripple: stdin_default$3y },
   props: props$p,
   setup(props2) {
     function handleClick(e) {
@@ -18399,7 +18513,7 @@ const __sfc__$v = vue.defineComponent({
   name: name$o,
   components: {
     VarButton: stdin_default$38,
-    VarPopup: stdin_default$3v
+    VarPopup: stdin_default$3w
   },
   inheritAttrs: false,
   props: props$o,
@@ -18412,18 +18526,9 @@ const __sfc__$v = vue.defineComponent({
     const columnHeight = vue.computed(() => optionCount.value * optionHeight.value);
     const { prevY, moveY, dragging, startTouch, moveTouch, endTouch } = useTouch();
     let prevIndexes = [];
-    buildScrollColumns();
-    vue.watch(() => props2.columns, buildScrollColumns, { deep: true });
-    vue.watch(
-      () => modelValue.value,
-      () => {
-        if (props2.cascade && props2.modelValue.length) {
-          buildScrollColumns();
-        } else {
-          updateScrollColumnsIndex();
-        }
-      }
-    );
+    initScrollColumns();
+    vue.watch(() => props2.columns, initScrollColumns, { deep: true });
+    vue.watch(() => modelValue.value, initScrollColumns);
     function getOptionKey(key) {
       const keyMap = {
         text: props2.textKey,
@@ -18440,7 +18545,7 @@ const __sfc__$v = vue.defineComponent({
       prevIndexes = [...indexes];
     }
     function normalizeNormalMode(columns) {
-      return columns.map((column) => {
+      return columns.map((column, idx) => {
         const scrollColumn = {
           id: sid$1++,
           prevY: 0,
@@ -18454,6 +18559,9 @@ const __sfc__$v = vue.defineComponent({
           scrollEl: null,
           scrolling: false
         };
+        const value = modelValue.value[idx];
+        const index = scrollColumn.column.findIndex((option) => value === getValue(option));
+        scrollColumn.index = index === -1 ? 0 : index;
         scrollTo2(scrollColumn);
         return scrollColumn;
       });
@@ -18463,7 +18571,7 @@ const __sfc__$v = vue.defineComponent({
       createChildren(scrollColumns2, column);
       return scrollColumns2;
     }
-    function createChildren(scrollColumns2, children) {
+    function createChildren(scrollColumns2, children, syncModelValue = true) {
       var _a;
       if (children.length) {
         const scrollColumn = {
@@ -18480,31 +18588,30 @@ const __sfc__$v = vue.defineComponent({
           scrolling: false
         };
         scrollColumns2.push(scrollColumn);
-        if (props2.modelValue.length) {
-          const index = children.findIndex((option) => modelValue.value[scrollColumns2.length - 1] === getValue(option));
+        if (syncModelValue) {
+          const value = modelValue.value[scrollColumns2.length - 1];
+          const index = children.findIndex((option) => value === getValue(option));
           scrollColumn.index = index === -1 ? 0 : index;
         }
         scrollTo2(scrollColumn);
-        createChildren(scrollColumns2, (_a = scrollColumn.column[scrollColumn.index][getOptionKey("children")]) != null ? _a : []);
+        createChildren(
+          scrollColumns2,
+          (_a = scrollColumn.column[scrollColumn.index][getOptionKey("children")]) != null ? _a : [],
+          syncModelValue
+        );
       }
     }
     function rebuildChildren(scrollColumn) {
       var _a;
       scrollColumns.value.splice(scrollColumns.value.indexOf(scrollColumn) + 1);
-      createChildren(scrollColumns.value, (_a = scrollColumn.column[scrollColumn.index][getOptionKey("children")]) != null ? _a : []);
+      createChildren(
+        scrollColumns.value,
+        (_a = scrollColumn.column[scrollColumn.index][getOptionKey("children")]) != null ? _a : [],
+        false
+      );
     }
-    function buildScrollColumns() {
+    function initScrollColumns() {
       scrollColumns.value = props2.cascade ? normalizeCascadeMode(props2.columns) : normalizeNormalMode(props2.columns);
-      if (!props2.cascade) {
-        updateScrollColumnsIndex();
-      }
-    }
-    function updateScrollColumnsIndex() {
-      scrollColumns.value.forEach((scrollColumn, idx) => {
-        const index = scrollColumn.column.findIndex((option) => modelValue.value[idx] === getValue(option));
-        scrollColumn.index = index === -1 ? 0 : index;
-        scrollTo2(scrollColumn);
-      });
       const { indexes } = getPicked();
       setPrevIndexes(indexes);
     }
@@ -18593,23 +18700,23 @@ const __sfc__$v = vue.defineComponent({
       scrollTo2(scrollColumn, shouldMomentum ? MOMENTUM_TRANSITION_DURATION : TRANSITION_DURATION);
       scrollColumn.scrolling = scrollColumn.translate !== oldTranslate;
       if (!scrollColumn.scrolling) {
-        change(scrollColumn);
+        handleScrollColumnChange(scrollColumn);
       }
     }
     function handleTransitionend(scrollColumn) {
       scrollColumn.scrolling = false;
-      change(scrollColumn);
+      handleScrollColumnChange(scrollColumn);
     }
     function isSamePicked() {
       const { indexes } = getPicked();
       return indexes.every((index, idx) => index === prevIndexes[idx]);
     }
-    function change(scrollColumn) {
-      const { cascade, onChange } = props2;
+    function handleScrollColumnChange(scrollColumn) {
+      const { onChange, cascade } = props2;
       if (isSamePicked()) {
         return;
       }
-      if (cascade && !props2.modelValue.length) {
+      if (cascade) {
         rebuildChildren(scrollColumn);
       }
       const hasScrolling = scrollColumns.value.some((scrollColumn2) => scrollColumn2.scrolling);
@@ -19115,7 +19222,7 @@ function __render__$s(_ctx, _cache) {
 }
 const __sfc__$t = vue.defineComponent({
   name: name$m,
-  components: { VarIcon: stdin_default$3t },
+  components: { VarIcon: stdin_default$3u },
   props: props$m,
   setup(props2) {
     const controlPosition = vue.ref(0);
@@ -19404,9 +19511,9 @@ function __render__$r(_ctx, _cache) {
 }
 const __sfc__$s = vue.defineComponent({
   name: name$l,
-  directives: { Ripple: stdin_default$3x, Hover: stdin_default$3a },
+  directives: { Ripple: stdin_default$3y, Hover: stdin_default$3a },
   components: {
-    VarIcon: stdin_default$3t,
+    VarIcon: stdin_default$3u,
     VarFormDetails: stdin_default$2Q,
     VarHoverOverlay: stdin_default$3b
   },
@@ -19715,11 +19822,11 @@ function __render__$p(_ctx, _cache) {
 const __sfc__$q = vue.defineComponent({
   name: name$j,
   components: {
-    VarIcon: stdin_default$3t,
+    VarIcon: stdin_default$3u,
     VarFormDetails: stdin_default$2Q,
     VarHoverOverlay: stdin_default$3b
   },
-  directives: { Ripple: stdin_default$3x, Hover: stdin_default$3a },
+  directives: { Ripple: stdin_default$3y, Hover: stdin_default$3a },
   props: props$j,
   setup(props2) {
     const currentHoveringValue = vue.ref(-1);
@@ -20523,7 +20630,7 @@ function __render__$g(_ctx, _cache) {
 const __sfc__$h = vue.defineComponent({
   name: name$g,
   components: {
-    VarIcon: stdin_default$3t,
+    VarIcon: stdin_default$3u,
     VarMenu: stdin_default$1O,
     VarChip: stdin_default$2K,
     VarFieldDecorator: stdin_default$2c,
@@ -21475,9 +21582,7 @@ const props$d = {
     type: String,
     default: "top"
   },
-  content: {
-    type: [String, Function, Object]
-  },
+  content: [String, Function, Object],
   contentClass: String,
   duration: {
     type: Number,
@@ -21554,10 +21659,11 @@ function __render__$d(_ctx, _cache) {
             2
             /* CLASS */
           ),
-          vue.createElementVNode(
+          _ctx.iconName || _ctx.type === "loading" || _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock(
             "div",
             {
-              class: vue.normalizeClass([_ctx.n("icon")])
+              key: 0,
+              class: vue.normalizeClass(_ctx.n("icon"))
             },
             [
               _ctx.iconName ? (vue.openBlock(), vue.createBlock(_component_var_icon, {
@@ -21575,11 +21681,11 @@ function __render__$d(_ctx, _cache) {
             ],
             2
             /* CLASS */
-          ),
+          )) : vue.createCommentVNode("v-if", true),
           _ctx.$slots.action ? (vue.openBlock(), vue.createElementBlock(
             "div",
             {
-              key: 0,
+              key: 1,
               class: vue.normalizeClass(_ctx.n("action"))
             },
             [
@@ -21603,7 +21709,7 @@ const __sfc__$e = vue.defineComponent({
   name: "VarSnackbarCore",
   components: {
     VarLoading: stdin_default$3d,
-    VarIcon: stdin_default$3t
+    VarIcon: stdin_default$3u
   },
   props: props$d,
   setup(props2) {
@@ -21613,24 +21719,25 @@ const __sfc__$e = vue.defineComponent({
       () => props2.show,
       () => props2.lockScroll
     );
-    const isForbidClick = vue.computed(() => props2.type === "loading" || props2.forbidClick);
-    const iconName = vue.computed(() => {
-      if (!props2.type)
-        return "";
-      return ICON_TYPE_DICT[props2.type];
+    const isForbidClick = vue.computed(() => {
+      const { type, forbidClick } = props2;
+      return type === "loading" || forbidClick;
     });
-    const updateAfterDuration = () => {
+    const iconName = vue.computed(() => !props2.type ? "" : ICON_TYPE_DICT[props2.type]);
+    function updateAfterDuration() {
       timer.value = setTimeout(() => {
-        props2.type !== "loading" && call(props2["onUpdate:show"], false);
+        if (props2.type !== "loading") {
+          call(props2["onUpdate:show"], false);
+        }
       }, props2.duration);
-    };
+    }
     vue.watch(
       () => props2.show,
       (show) => {
         if (show) {
           call(props2.onOpen);
           updateAfterDuration();
-        } else if (show === false) {
+        } else {
           clearTimeout(timer.value);
           call(props2.onClose);
         }
@@ -21651,11 +21758,11 @@ const __sfc__$e = vue.defineComponent({
     });
     return {
       SNACKBAR_TYPE,
-      n: n$f,
-      classes: classes$b,
       zIndex,
       iconName,
-      isForbidClick
+      isForbidClick,
+      n: n$f,
+      classes: classes$b
     };
   }
 });
@@ -21676,25 +21783,28 @@ function __render__$c(_ctx, _cache) {
       default: vue.withCtx(() => [
         vue.createVNode(_component_var_snackbar_core, vue.mergeProps(_ctx.$props, {
           class: _ctx.n("transition")
-        }), {
-          icon: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "icon")
-          ]),
-          action: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "action")
-          ]),
+        }), vue.createSlots({
           default: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "default", {}, () => [
-              vue.createTextVNode(
-                vue.toDisplayString(_ctx.content),
-                1
-                /* TEXT */
-              )
-            ])
+            vue.renderSlot(_ctx.$slots, "default")
           ]),
-          _: 3
-          /* FORWARDED */
-        }, 16, ["class"])
+          _: 2
+          /* DYNAMIC */
+        }, [
+          _ctx.$slots.icon ? {
+            name: "icon",
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "icon")
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.action ? {
+            name: "action",
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "action")
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1040, ["class"])
       ]),
       _: 3
       /* FORWARDED */
@@ -21805,7 +21915,7 @@ const TransitionGroupHost = {
       });
       return vue.createVNode(vue.TransitionGroup, vue.mergeProps(transitionGroupProps, {
         "style": {
-          zIndex: stdin_default$3y.zIndex
+          zIndex: stdin_default$3z.zIndex
         },
         "onAfterEnter": opened,
         "onAfterLeave": removeUniqOption
@@ -22153,7 +22263,7 @@ function __render__$b(_ctx, _cache) {
 }
 const __sfc__$c = vue.defineComponent({
   name: name$b,
-  components: { VarIcon: stdin_default$3t },
+  components: { VarIcon: stdin_default$3u },
   props: props$b,
   setup() {
     const { index, steps, bindSteps } = useSteps();
@@ -22293,6 +22403,7 @@ const props$8 = {
   inactiveValue: {
     default: false
   },
+  lazyChange: Boolean,
   disabled: Boolean,
   readonly: Boolean,
   loading: Boolean,
@@ -22305,7 +22416,12 @@ const props$8 = {
     type: Boolean,
     default: true
   },
+  validateTrigger: {
+    type: Array,
+    default: () => ["onChange", "onLazyChange"]
+  },
   onClick: defineListenerProp(),
+  onBeforeChange: defineListenerProp(),
   onChange: defineListenerProp(),
   "onUpdate:modelValue": defineListenerProp()
 };
@@ -22425,7 +22541,7 @@ const __sfc__$9 = vue.defineComponent({
     VarFormDetails: stdin_default$2Q,
     VarHoverOverlay: stdin_default$3b
   },
-  directives: { Ripple: stdin_default$3x, Hover: stdin_default$3a },
+  directives: { Ripple: stdin_default$3y, Hover: stdin_default$3a },
   props: props$8,
   setup(props2) {
     const { bindForm, form } = useForm();
@@ -22469,8 +22585,11 @@ const __sfc__$9 = vue.defineComponent({
     function validate() {
       return v(props2.rules, props2.modelValue);
     }
-    function validateWithTrigger() {
-      return vue.nextTick(() => vt(["onChange"], "onChange", props2.rules, props2.modelValue));
+    function validateWithTrigger(trigger) {
+      vue.nextTick(() => {
+        const { validateTrigger, rules, modelValue } = props2;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
     }
     function switchActive(event) {
       const {
@@ -22482,16 +22601,25 @@ const __sfc__$9 = vue.defineComponent({
         modelValue,
         activeValue,
         inactiveValue,
-        "onUpdate:modelValue": updateModelValue
+        lazyChange,
+        "onUpdate:modelValue": updateModelValue,
+        onBeforeChange
       } = props2;
       call(onClick, event);
       if (disabled || loading || readonly || (form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value)) {
         return;
       }
       const newValue = modelValue === activeValue ? inactiveValue : activeValue;
-      call(onChange, newValue);
-      call(updateModelValue, newValue);
-      validateWithTrigger();
+      if (lazyChange) {
+        call(onBeforeChange, newValue, (value) => {
+          call(updateModelValue, value);
+          validateWithTrigger("onLazyChange");
+        });
+      } else {
+        call(onChange, newValue);
+        call(updateModelValue, newValue);
+        validateWithTrigger("onChange");
+      }
     }
     function hover(value) {
       if (props2.disabled || (form == null ? void 0 : form.disabled.value)) {
@@ -22577,7 +22705,7 @@ function __render__$8(_ctx, _cache) {
 }
 const __sfc__$8 = vue.defineComponent({
   name: name$7,
-  directives: { Ripple: stdin_default$3x },
+  directives: { Ripple: stdin_default$3y },
   props: props$7,
   setup(props2) {
     const tabEl = vue.ref(null);
@@ -24482,10 +24610,10 @@ function __render__$1(_ctx, _cache) {
 }
 const __sfc__$1 = vue.defineComponent({
   name: name$1,
-  directives: { Ripple: stdin_default$3x, Hover: stdin_default$3a },
+  directives: { Ripple: stdin_default$3y, Hover: stdin_default$3a },
   components: {
-    VarIcon: stdin_default$3t,
-    VarPopup: stdin_default$3v,
+    VarIcon: stdin_default$3u,
+    VarPopup: stdin_default$3w,
     VarFormDetails: stdin_default$2Q,
     VarHoverOverlay: stdin_default$3b
   },
@@ -25037,7 +25165,7 @@ withInstall(stdin_default$1);
 withPropsDefaultsSetter(stdin_default$1, props);
 const _WatermarkComponent = stdin_default$1;
 var stdin_default = stdin_default$1;
-const version = "2.21.0";
+const version = "2.22.0-alpha.1705845515578";
 function install(app) {
   stdin_default$3m.install && app.use(stdin_default$3m);
   stdin_default$3k.install && app.use(stdin_default$3k);
@@ -25060,7 +25188,7 @@ function install(app) {
   stdin_default$2G.install && app.use(stdin_default$2G);
   stdin_default$2E.install && app.use(stdin_default$2E);
   stdin_default$2C.install && app.use(stdin_default$2C);
-  stdin_default$3y.install && app.use(stdin_default$3y);
+  stdin_default$3z.install && app.use(stdin_default$3z);
   stdin_default$2A.install && app.use(stdin_default$2A);
   stdin_default$2y.install && app.use(stdin_default$2y);
   stdin_default$2q.install && app.use(stdin_default$2q);
@@ -25075,7 +25203,7 @@ function install(app) {
   stdin_default$2Q.install && app.use(stdin_default$2Q);
   stdin_default$3a.install && app.use(stdin_default$3a);
   stdin_default$3b.install && app.use(stdin_default$3b);
-  stdin_default$3t.install && app.use(stdin_default$3t);
+  stdin_default$3u.install && app.use(stdin_default$3u);
   stdin_default$26.install && app.use(stdin_default$26);
   stdin_default$20.install && app.use(stdin_default$20);
   stdin_default$1_.install && app.use(stdin_default$1_);
@@ -25095,14 +25223,14 @@ function install(app) {
   stdin_default$1E.install && app.use(stdin_default$1E);
   stdin_default$1C.install && app.use(stdin_default$1C);
   stdin_default$1A.install && app.use(stdin_default$1A);
-  stdin_default$3v.install && app.use(stdin_default$3v);
+  stdin_default$3w.install && app.use(stdin_default$3w);
   stdin_default$1y.install && app.use(stdin_default$1y);
   stdin_default$1w.install && app.use(stdin_default$1w);
   stdin_default$1u.install && app.use(stdin_default$1u);
   stdin_default$1s.install && app.use(stdin_default$1s);
   stdin_default$1q.install && app.use(stdin_default$1q);
   stdin_default$1i.install && app.use(stdin_default$1i);
-  stdin_default$3x.install && app.use(stdin_default$3x);
+  stdin_default$3y.install && app.use(stdin_default$3y);
   stdin_default$1g.install && app.use(stdin_default$1g);
   stdin_default$1e.install && app.use(stdin_default$1e);
   stdin_default$1c.install && app.use(stdin_default$1c);
@@ -25151,7 +25279,7 @@ const index_bundle = {
   Collapse: stdin_default$2G,
   CollapseItem: stdin_default$2E,
   CollapseTransition: stdin_default$2C,
-  Context: stdin_default$3y,
+  Context: stdin_default$3z,
   Countdown: stdin_default$2A,
   Counter: stdin_default$2y,
   DatePicker: stdin_default$2q,
@@ -25166,7 +25294,7 @@ const index_bundle = {
   FormDetails: stdin_default$2Q,
   Hover: stdin_default$3a,
   HoverOverlay: stdin_default$3b,
-  Icon: stdin_default$3t,
+  Icon: stdin_default$3u,
   Image: stdin_default$26,
   ImagePreview: stdin_default$20,
   IndexAnchor: stdin_default$1_,
@@ -25186,14 +25314,14 @@ const index_bundle = {
   Pagination: stdin_default$1E,
   Paper: stdin_default$1C,
   Picker: stdin_default$1A,
-  Popup: stdin_default$3v,
+  Popup: stdin_default$3w,
   Progress: stdin_default$1y,
   PullRefresh: stdin_default$1w,
   Radio: stdin_default$1u,
   RadioGroup: stdin_default$1s,
   Rate: stdin_default$1q,
   Result: stdin_default$1i,
-  Ripple: stdin_default$3x,
+  Ripple: stdin_default$3y,
   Row: stdin_default$1g,
   Select: stdin_default$1e,
   Skeleton: stdin_default$1c,
@@ -25239,7 +25367,7 @@ exports.Col = stdin_default$2I;
 exports.Collapse = stdin_default$2G;
 exports.CollapseItem = stdin_default$2E;
 exports.CollapseTransition = stdin_default$2C;
-exports.Context = stdin_default$3y;
+exports.Context = stdin_default$3z;
 exports.Countdown = stdin_default$2A;
 exports.Counter = stdin_default$2y;
 exports.DatePicker = stdin_default$2q;
@@ -25254,7 +25382,7 @@ exports.Form = stdin_default$28;
 exports.FormDetails = stdin_default$2Q;
 exports.Hover = stdin_default$3a;
 exports.HoverOverlay = stdin_default$3b;
-exports.Icon = stdin_default$3t;
+exports.Icon = stdin_default$3u;
 exports.Image = stdin_default$26;
 exports.ImagePreview = stdin_default$20;
 exports.IndexAnchor = stdin_default$1_;
@@ -25275,14 +25403,14 @@ exports.PIXEL = PIXEL;
 exports.Pagination = stdin_default$1E;
 exports.Paper = stdin_default$1C;
 exports.Picker = stdin_default$1A;
-exports.Popup = stdin_default$3v;
+exports.Popup = stdin_default$3w;
 exports.Progress = stdin_default$1y;
 exports.PullRefresh = stdin_default$1w;
 exports.Radio = stdin_default$1u;
 exports.RadioGroup = stdin_default$1s;
 exports.Rate = stdin_default$1q;
 exports.Result = stdin_default$1i;
-exports.Ripple = stdin_default$3x;
+exports.Ripple = stdin_default$3y;
 exports.Row = stdin_default$1g;
 exports.SNACKBAR_TYPE = SNACKBAR_TYPE;
 exports.Select = stdin_default$1e;
@@ -25425,7 +25553,7 @@ exports.dialogProps = props$O;
 exports.dividerProps = props$N;
 exports.dragProps = props$M;
 exports.ellipsisProps = props$K;
-exports.enUS = stdin_default$3r;
+exports.enUS = stdin_default$3s;
 exports.fabProps = props$J;
 exports.fieldDecoratorProps = props$I;
 exports.formDetailsProps = props$_;
@@ -25486,4 +25614,4 @@ exports.useHoverOverlay = useHoverOverlay;
 exports.useLocale = useLocale;
 exports.version = version;
 exports.watermarkProps = props;
-exports.zhCN = stdin_default$3s;
+exports.zhCN = stdin_default$3t;