@varlet/ui 2.9.6 → 2.10.0-alpha.1682067841655

package/lib/varlet.cjs.js

@@ -424,11 +424,14 @@ function useEventListener(target, type, listener, options = {}) {
   const { passive: passive2 = false, capture = false } = options;
   let listening = false;
   let cleaned = false;
+  const getElement = (target2) => {
+    return isFunction(target2) ? target2() : vue.unref(target2);
+  };
   const add2 = (target2) => {
     if (listening || cleaned) {
       return;
     }
-    const element = vue.unref(target2);
+    const element = getElement(target2);
     if (element) {
       element.addEventListener(type, listener, {
         passive: passive2,
@@ -441,7 +444,7 @@ function useEventListener(target, type, listener, options = {}) {
     if (!listening || cleaned) {
       return;
     }
-    const element = vue.unref(target2);
+    const element = getElement(target2);
     if (element) {
       element.removeEventListener(type, listener, {
         capture
@@ -582,30 +585,6 @@ function useChildren(key) {
     bindChildren
   };
 }
-function useVModel(props2, key, options = {}) {
-  const vm = vue.getCurrentInstance();
-  const { passive: passive2 = true, eventName, defaultValue, emit = vm === null || vm === void 0 ? void 0 : vm.emit } = options;
-  const event = eventName !== null && eventName !== void 0 ? eventName : `update:${key.toString()}`;
-  const getValue = () => props2[key] != null ? props2[key] : defaultValue;
-  if (!passive2) {
-    return vue.computed({
-      get() {
-        return getValue();
-      },
-      set(value) {
-        emit(event, value);
-      }
-    });
-  }
-  const proxy = vue.ref(getValue());
-  vue.watch(() => props2[key], () => {
-    proxy.value = getValue();
-  });
-  vue.watch(() => proxy.value, (newValue) => {
-    emit(event, newValue);
-  });
-  return proxy;
-}
 function asyncGeneratorStep$d(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -635,8 +614,8 @@ function _asyncToGenerator$d(fn2) {
     });
   };
 }
-function _extends$n() {
-  _extends$n = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$p() {
+  _extends$p = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -647,7 +626,7 @@ function _extends$n() {
     }
     return target;
   };
-  return _extends$n.apply(this, arguments);
+  return _extends$p.apply(this, arguments);
 }
 function pickProps(props2, propsKey) {
   return Array.isArray(propsKey) ? propsKey.reduce((pickedProps, key) => {
@@ -676,7 +655,7 @@ function mountInstance(component, props2, eventListener) {
   }
   var Host = {
     setup() {
-      return () => vue.h(component, _extends$n({}, props2, eventListener));
+      return () => vue.h(component, _extends$p({}, props2, eventListener));
     }
   };
   var {
@@ -742,12 +721,9 @@ function useValidation() {
     validateWithTrigger
   };
 }
-function useRouteListener(cb) {
-  if (!inBrowser()) {
-    return;
-  }
-  useEventListener(window, "hashchange", cb);
-  useEventListener(window, "popstate", cb);
+function useRouteListener(listener) {
+  useEventListener(() => window, "hashchange", listener);
+  useEventListener(() => window, "popstate", listener);
 }
 function useTeleport() {
   var disabled = vue.ref(false);
@@ -815,8 +791,39 @@ function formatElevation(elevation2, defaultLevel) {
   }
   return "var-elevation--" + elevation2;
 }
-function _extends$m() {
-  _extends$m = Object.assign ? Object.assign.bind() : function(target) {
+function useVModel(props2, key, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var {
+    passive: passive2 = true,
+    eventName,
+    defaultValue,
+    emit
+  } = options;
+  var event = eventName != null ? eventName : "onUpdate:" + key.toString();
+  var getValue = () => props2[key] != null ? props2[key] : defaultValue;
+  if (!passive2) {
+    return vue.computed({
+      get() {
+        return getValue();
+      },
+      set(value) {
+        emit ? emit(event, value) : call(props2[event], value);
+      }
+    });
+  }
+  var proxy = vue.ref(getValue());
+  vue.watch(() => props2[key], () => {
+    proxy.value = getValue();
+  });
+  vue.watch(() => proxy.value, (newValue) => {
+    emit ? emit(event, newValue) : call(props2[event], newValue);
+  });
+  return proxy;
+}
+function _extends$o() {
+  _extends$o = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -827,10 +834,10 @@ function _extends$m() {
     }
     return target;
   };
-  return _extends$m.apply(this, arguments);
+  return _extends$o.apply(this, arguments);
 }
 var {
-  n: n$1h
+  n: n$1i
 } = createNamespace("ripple");
 var ANIMATION_DURATION$1 = 250;
 function setStyles(element) {
@@ -885,7 +892,7 @@ function createRipple(event) {
       size
     } = computeRippleStyles(this, event);
     var ripple2 = document.createElement("div");
-    ripple2.classList.add(n$1h());
+    ripple2.classList.add(n$1i());
     ripple2.style.opacity = "0";
     ripple2.style.transform = "translate(" + x + "px, " + y + "px) scale3d(.3, .3, .3)";
     ripple2.style.width = size + "px";
@@ -904,7 +911,7 @@ function createRipple(event) {
 function removeRipple() {
   var _ripple = this._ripple;
   var task = () => {
-    var ripples = this.querySelectorAll("." + n$1h());
+    var ripples = this.querySelectorAll("." + n$1i());
     if (!ripples.length) {
       return;
     }
@@ -930,7 +937,7 @@ function forbidRippleTask() {
 }
 function mounted$2(el, binding) {
   var _binding$value;
-  el._ripple = _extends$m({
+  el._ripple = _extends$o({
     tasker: null
   }, (_binding$value = binding.value) != null ? _binding$value : {}, {
     removeRipple: removeRipple.bind(el)
@@ -967,7 +974,7 @@ function updated$2(el, binding) {
   var diff2 = newBinding.color !== ((_el$_ripple = el._ripple) == null ? void 0 : _el$_ripple.color) || newBinding.disabled !== ((_el$_ripple2 = el._ripple) == null ? void 0 : _el$_ripple2.disabled);
   if (diff2) {
     var _el$_ripple3, _el$_ripple4;
-    el._ripple = _extends$m({
+    el._ripple = _extends$o({
       tasker: newBinding.disabled ? null : (_el$_ripple3 = el._ripple) == null ? void 0 : _el$_ripple3.tasker,
       removeRipple: (_el$_ripple4 = el._ripple) == null ? void 0 : _el$_ripple4.removeRipple
     }, newBinding);
@@ -986,7 +993,7 @@ const Ripple$1 = Ripple;
 function positionValidator$4(position) {
   return ["top", "bottom", "right", "left", "center"].includes(position);
 }
-var props$19 = {
+var props$1a = {
   show: {
     type: Boolean,
     default: false
@@ -1115,8 +1122,8 @@ function useZIndex(source, count) {
     zIndex
   };
 }
-function _extends$l() {
-  _extends$l = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$n() {
+  _extends$n = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1127,19 +1134,19 @@ function _extends$l() {
     }
     return target;
   };
-  return _extends$l.apply(this, arguments);
+  return _extends$n.apply(this, arguments);
 }
 function _isSlot$3(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }
 var {
-  n: n$1g,
-  classes: classes$13
+  n: n$1h,
+  classes: classes$14
 } = createNamespace("popup");
 const Popup = vue.defineComponent({
   name: "VarPopup",
   inheritAttrs: false,
-  props: props$19,
+  props: props$1a,
   setup(props2, _ref) {
     var {
       slots,
@@ -1173,8 +1180,8 @@ const Popup = vue.defineComponent({
         overlayStyle
       } = props2;
       return vue.createVNode("div", {
-        "class": classes$13(n$1g("overlay"), overlayClass),
-        "style": _extends$l({
+        "class": classes$14(n$1h("overlay"), overlayClass),
+        "style": _extends$n({
           zIndex: zIndex.value - 1
         }, overlayStyle),
         "onClick": hidePopup
@@ -1182,7 +1189,7 @@ const Popup = vue.defineComponent({
     };
     var renderContent = () => {
       return vue.createVNode("div", vue.mergeProps({
-        "class": classes$13(n$1g("content"), n$1g("--" + props2.position), [props2.defaultStyle, n$1g("--content-background-color")], [props2.defaultStyle, n$1g("$-elevation--3")]),
+        "class": classes$14(n$1h("content"), n$1h("--" + props2.position), [props2.defaultStyle, n$1h("--content-background-color")], [props2.defaultStyle, n$1h("$-elevation--3")]),
         "style": {
           zIndex: zIndex.value
         }
@@ -1198,17 +1205,17 @@ const Popup = vue.defineComponent({
         position
       } = props2;
       return vue.createVNode(vue.Transition, {
-        "name": n$1g("$-fade"),
+        "name": n$1h("$-fade"),
         "onAfterEnter": onOpened,
         "onAfterLeave": onClosed
       }, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": classes$13(n$1g("$--box"), n$1g()),
+          "class": classes$14(n$1h("$--box"), n$1h()),
           "style": {
             zIndex: zIndex.value - 2
           }
         }, [overlay2 && renderOverlay(), vue.createVNode(vue.Transition, {
-          "name": transition || n$1g("$-pop-" + position)
+          "name": transition || n$1h("$-pop-" + position)
         }, {
           default: () => [show && renderContent()]
         })]), [[vue.vShow, show]])]
@@ -1235,7 +1242,7 @@ Popup.install = function(app) {
   app.component(Popup.name, Popup);
 };
 var _PopupComponent = Popup;
-var props$18 = {
+var props$19 = {
   name: {
     type: String
   },
@@ -1288,10 +1295,10 @@ function _asyncToGenerator$c(fn2) {
   };
 }
 var {
-  n: n$1f,
-  classes: classes$12
+  n: n$1g,
+  classes: classes$13
 } = createNamespace("icon");
-function __render__$1f(_ctx, _cache) {
+function __render__$1g(_ctx, _cache) {
   return vue.openBlock(), vue.createBlock(
     vue.resolveDynamicComponent(_ctx.isURL(_ctx.name) ? "img" : "i"),
     {
@@ -1311,9 +1318,9 @@ function __render__$1f(_ctx, _cache) {
     ["class", "style", "src", "onClick"]
   );
 }
-var __sfc__$1g = vue.defineComponent({
+var __sfc__$1h = vue.defineComponent({
   name: "VarIcon",
-  props: props$18,
+  props: props$19,
   setup(props2) {
     var nextName = vue.ref("");
     var animateInProgress = vue.ref(false);
@@ -1343,8 +1350,8 @@ var __sfc__$1g = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$1f,
-      classes: classes$12,
+      n: n$1g,
+      classes: classes$13,
       nextName,
       animateInProgress,
       isURL,
@@ -1353,14 +1360,14 @@ var __sfc__$1g = vue.defineComponent({
     };
   }
 });
-__sfc__$1g.render = __render__$1f;
-const Icon = __sfc__$1g;
+__sfc__$1h.render = __render__$1g;
+const Icon = __sfc__$1h;
 Icon.install = function(app) {
   app.component(Icon.name, Icon);
 };
 var _IconComponent = Icon;
-function _extends$k() {
-  _extends$k = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$m() {
+  _extends$m = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1371,9 +1378,9 @@ function _extends$k() {
     }
     return target;
   };
-  return _extends$k.apply(this, arguments);
+  return _extends$m.apply(this, arguments);
 }
-var props$17 = _extends$k({
+var props$18 = _extends$m({
   show: {
     type: Boolean,
     default: false
@@ -1391,7 +1398,7 @@ var props$17 = _extends$k({
   },
   onSelect: defineListenerProp(),
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$19, [
+}, pickProps(props$1a, [
   "overlay",
   "overlayClass",
   "overlayStyle",
@@ -1610,8 +1617,8 @@ const enUS = {
   paginationPage: "page",
   paginationJump: "Go to"
 };
-function _extends$j() {
-  _extends$j = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$l() {
+  _extends$l = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1622,7 +1629,7 @@ function _extends$j() {
     }
     return target;
   };
-  return _extends$j.apply(this, arguments);
+  return _extends$l.apply(this, arguments);
 }
 function useLocale() {
   var packs2 = {};
@@ -1643,7 +1650,7 @@ function useLocale() {
       console.warn("The " + lang + " does not exist. You can mount a language package using the add method");
       return;
     }
-    packs2[lang] = _extends$j({}, packs2[lang], pack3);
+    packs2[lang] = _extends$l({}, packs2[lang], pack3);
     use2(lang);
   };
   return {
@@ -1684,11 +1691,11 @@ const Locale = {
   useLocale
 };
 var {
-  n: n$1e,
-  classes: classes$11
+  n: n$1f,
+  classes: classes$12
 } = createNamespace("action-sheet");
-var _hoisted_1$r = ["onClick"];
-function __render__$1e(_ctx, _cache) {
+var _hoisted_1$s = ["onClick"];
+function __render__$1f(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_popup = vue.resolveComponent("var-popup");
   var _directive_ripple = vue.resolveDirective("ripple");
@@ -1763,7 +1770,7 @@ function __render__$1e(_ctx, _cache) {
                 /* TEXT, CLASS */
               )],
               14,
-              _hoisted_1$r
+              _hoisted_1$s
             )), [[_directive_ripple, {
               disabled: action.disabled
             }]]);
@@ -1781,7 +1788,7 @@ function __render__$1e(_ctx, _cache) {
     ["class", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "show", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]
   );
 }
-var __sfc__$1f = vue.defineComponent({
+var __sfc__$1g = vue.defineComponent({
   name: "VarActionSheet",
   directives: {
     Ripple: Ripple$1
@@ -1791,7 +1798,7 @@ var __sfc__$1f = vue.defineComponent({
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$17,
+  props: props$18,
   setup(props2) {
     var popupShow = vue.ref(false);
     var handleSelect = (action) => {
@@ -1812,8 +1819,8 @@ var __sfc__$1f = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$1e,
-      classes: classes$11,
+      n: n$1f,
+      classes: classes$12,
       handlePopupUpdateShow,
       popupShow,
       pack,
@@ -1822,10 +1829,10 @@ var __sfc__$1f = vue.defineComponent({
     };
   }
 });
-__sfc__$1f.render = __render__$1e;
-const VarActionSheet = __sfc__$1f;
-function _extends$i() {
-  _extends$i = Object.assign ? Object.assign.bind() : function(target) {
+__sfc__$1g.render = __render__$1f;
+const VarActionSheet = __sfc__$1g;
+function _extends$k() {
+  _extends$k = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1836,7 +1843,7 @@ function _extends$i() {
     }
     return target;
   };
-  return _extends$i.apply(this, arguments);
+  return _extends$k.apply(this, arguments);
 }
 var singletonOptions$3;
 var defaultOptions$3 = {};
@@ -1844,7 +1851,7 @@ function normalizeOptions$3(options) {
   if (options === void 0) {
     options = {};
   }
-  return _extends$i({}, defaultOptions$3, options);
+  return _extends$k({}, defaultOptions$3, options);
 }
 function ActionSheet(options) {
   if (!inBrowser()) {
@@ -1909,7 +1916,7 @@ function positionValidator$3(position) {
   var validPositions = ["left", "center", "right"];
   return validPositions.includes(position);
 }
-var props$16 = {
+var props$17 = {
   color: {
     type: String
   },
@@ -1944,10 +1951,10 @@ var props$16 = {
   }
 };
 var {
-  n: n$1d,
-  classes: classes$10
+  n: n$1e,
+  classes: classes$11
 } = createNamespace("app-bar");
-function __render__$1d(_ctx, _cache) {
+function __render__$1e(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2028,9 +2035,9 @@ function __render__$1d(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$1e = vue.defineComponent({
+var __sfc__$1f = vue.defineComponent({
   name: "VarAppBar",
-  props: props$16,
+  props: props$17,
   setup(props2, _ref) {
     var {
       slots
@@ -2064,8 +2071,8 @@ var __sfc__$1e = vue.defineComponent({
     useMounted(computePadding);
     vue.onUpdated(computePadding);
     return {
-      n: n$1d,
-      classes: classes$10,
+      n: n$1e,
+      classes: classes$11,
       formatElevation,
       rootStyles,
       paddingLeft,
@@ -2073,8 +2080,8 @@ var __sfc__$1e = vue.defineComponent({
     };
   }
 });
-__sfc__$1e.render = __render__$1d;
-const AppBar = __sfc__$1e;
+__sfc__$1f.render = __render__$1e;
+const AppBar = __sfc__$1f;
 AppBar.install = function(app) {
   app.component(AppBar.name, AppBar);
 };
@@ -2108,8 +2115,8 @@ function _asyncToGenerator$b(fn2) {
     });
   };
 }
-function _extends$h() {
-  _extends$h = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$j() {
+  _extends$j = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2120,7 +2127,7 @@ function _extends$h() {
     }
     return target;
   };
-  return _extends$h.apply(this, arguments);
+  return _extends$j.apply(this, arguments);
 }
 var BACKGROUND_IMAGE_ARG_NAME = "background-image";
 var LAZY_LOADING = "lazy-loading";
@@ -2190,7 +2197,7 @@ function createLazy(el, binding) {
     error: (_el$getAttribute2 = el.getAttribute(LAZY_ERROR)) != null ? _el$getAttribute2 : defaultLazyOptions.error,
     attempt: el.getAttribute(LAZY_ATTEMPT) ? Number(el.getAttribute(LAZY_ATTEMPT)) : defaultLazyOptions.attempt
   };
-  el._lazy = _extends$h({
+  el._lazy = _extends$j({
     src: binding.value,
     arg: binding.arg,
     currentAttempt: 0,
@@ -2323,17 +2330,17 @@ function fitValidator$2(fit) {
   return ["fill", "contain", "cover", "none", "scale-down"].includes(fit);
 }
 var internalSizeValidator$1 = (size) => ["mini", "small", "normal", "large"].includes(size);
-function sizeValidator$5(size) {
+function sizeValidator$6(size) {
   return internalSizeValidator$1(size) || isNumber(size) || isString(size);
 }
-var props$15 = {
+var props$16 = {
   round: {
     type: Boolean,
     default: true
   },
   size: {
     type: [String, Number],
-    validator: sizeValidator$5,
+    validator: sizeValidator$6,
     default: "normal"
   },
   color: {
@@ -2369,12 +2376,12 @@ var props$15 = {
   onError: defineListenerProp()
 };
 var {
-  n: n$1c,
-  classes: classes$$
+  n: n$1d,
+  classes: classes$10
 } = createNamespace("avatar");
-var _hoisted_1$q = ["src", "lazy-loading", "lazy-error"];
+var _hoisted_1$r = ["src", "lazy-loading", "lazy-error"];
 var _hoisted_2$d = ["src"];
-function __render__$1c(_ctx, _cache) {
+function __render__$1d(_ctx, _cache) {
   var _directive_lazy = vue.resolveDirective("lazy");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -2413,7 +2420,7 @@ function __render__$1c(_ctx, _cache) {
         },
         null,
         46,
-        _hoisted_1$q
+        _hoisted_1$r
       )), [[_directive_lazy, _ctx.src]]) : (vue.openBlock(), vue.createElementBlock(
         "img",
         {
@@ -2454,12 +2461,12 @@ function __render__$1c(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$1d = vue.defineComponent({
+var __sfc__$1e = vue.defineComponent({
   name: "VarAvatar",
   directives: {
     Lazy: Lazy$1
   },
-  props: props$15,
+  props: props$16,
   setup(props2) {
     var avatarElement = vue.ref(null);
     var textElement = vue.ref(null);
@@ -2501,10 +2508,10 @@ var __sfc__$1d = vue.defineComponent({
     vue.onUpdated(getScale);
     return {
       internalSizeValidator: internalSizeValidator$1,
-      sizeValidator: sizeValidator$5,
+      sizeValidator: sizeValidator$6,
       toSizeUnit,
-      n: n$1c,
-      classes: classes$$,
+      n: n$1d,
+      classes: classes$10,
       avatarElement,
       textElement,
       scale,
@@ -2514,13 +2521,13 @@ var __sfc__$1d = vue.defineComponent({
     };
   }
 });
-__sfc__$1d.render = __render__$1c;
-const Avatar = __sfc__$1d;
+__sfc__$1e.render = __render__$1d;
+const Avatar = __sfc__$1e;
 Avatar.install = function(app) {
   app.component(Avatar.name, Avatar);
 };
 var _AvatarComponent = Avatar;
-var props$14 = {
+var props$15 = {
   offset: {
     type: [Number, String]
   },
@@ -2530,10 +2537,10 @@ var props$14 = {
   }
 };
 var {
-  n: n$1b,
-  classes: classes$_
+  n: n$1c,
+  classes: classes$$
 } = createNamespace("avatar-group");
-function __render__$1b(_ctx, _cache) {
+function __render__$1c(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2545,9 +2552,9 @@ function __render__$1b(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$1c = vue.defineComponent({
+var __sfc__$1d = vue.defineComponent({
   name: "VarAvatarGroup",
-  props: props$14,
+  props: props$15,
   setup(props2) {
     var rootStyles = vue.computed(() => {
       if (props2.offset == null) {
@@ -2558,15 +2565,15 @@ var __sfc__$1c = vue.defineComponent({
       };
     });
     return {
-      n: n$1b,
-      classes: classes$_,
+      n: n$1c,
+      classes: classes$$,
       toSizeUnit,
       rootStyles
     };
   }
 });
-__sfc__$1c.render = __render__$1b;
-const AvatarGroup = __sfc__$1c;
+__sfc__$1d.render = __render__$1c;
+const AvatarGroup = __sfc__$1d;
 AvatarGroup.install = function(app) {
   app.component(AvatarGroup.name, AvatarGroup);
 };
@@ -2574,10 +2581,10 @@ var _AvatarGroupComponent = AvatarGroup;
 function typeValidator$a(type) {
   return ["circle", "wave", "cube", "rect", "disappear"].includes(type);
 }
-function sizeValidator$4(size) {
+function sizeValidator$5(size) {
   return ["normal", "mini", "small", "large"].includes(size);
 }
-var props$13 = {
+var props$14 = {
   type: {
     type: String,
     default: "circle",
@@ -2589,7 +2596,7 @@ var props$13 = {
   size: {
     type: String,
     default: "normal",
-    validator: sizeValidator$4
+    validator: sizeValidator$5
   },
   color: {
     type: String
@@ -2603,11 +2610,11 @@ var props$13 = {
   }
 };
 var {
-  n: n$1a,
-  classes: classes$Z
+  n: n$1b,
+  classes: classes$_
 } = createNamespace("loading");
 var _withScopeId$6 = (n2) => (vue.pushScopeId(""), n2 = n2(), vue.popScopeId(), n2);
-var _hoisted_1$p = /* @__PURE__ */ _withScopeId$6(() => /* @__PURE__ */ vue.createElementVNode(
+var _hoisted_1$q = /* @__PURE__ */ _withScopeId$6(() => /* @__PURE__ */ vue.createElementVNode(
   "svg",
   {
     viewBox: "25 25 50 50"
@@ -2621,8 +2628,8 @@ var _hoisted_1$p = /* @__PURE__ */ _withScopeId$6(() => /* @__PURE__ */ vue.crea
   -1
   /* HOISTED */
 ));
-var _hoisted_2$c = [_hoisted_1$p];
-function __render__$1a(_ctx, _cache) {
+var _hoisted_2$c = [_hoisted_1$q];
+function __render__$1b(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2743,9 +2750,9 @@ function __render__$1a(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$1b = vue.defineComponent({
+var __sfc__$1c = vue.defineComponent({
   name: "VarLoading",
-  props: props$13,
+  props: props$14,
   setup(props2, _ref) {
     var {
       slots
@@ -2762,31 +2769,31 @@ var __sfc__$1b = vue.defineComponent({
       return props2.loading;
     });
     return {
-      n: n$1a,
-      classes: classes$Z,
+      n: n$1b,
+      classes: classes$_,
       multiplySizeUnit,
       loadingTypeDict,
       isShow
     };
   }
 });
-__sfc__$1b.render = __render__$1a;
-const Loading = __sfc__$1b;
+__sfc__$1c.render = __render__$1b;
+const Loading = __sfc__$1c;
 Loading.install = function(app) {
   app.component(Loading.name, Loading);
 };
 var _LoadingComponent = Loading;
-var props$12 = {
+var props$13 = {
   hovering: {
     type: Boolean,
     default: true
   }
 };
 var {
-  n: n$19,
-  classes: classes$Y
+  n: n$1a,
+  classes: classes$Z
 } = createNamespace("hover-overlay");
-function __render__$19(_ctx, _cache) {
+function __render__$1a(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2797,18 +2804,18 @@ function __render__$19(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$1a = vue.defineComponent({
+var __sfc__$1b = vue.defineComponent({
   name: "VarHoverOverlay",
-  props: props$12,
+  props: props$13,
   setup() {
     return {
-      n: n$19,
-      classes: classes$Y
+      n: n$1a,
+      classes: classes$Z
     };
   }
 });
-__sfc__$1a.render = __render__$19;
-const HoverOverlay = __sfc__$1a;
+__sfc__$1b.render = __render__$1a;
+const HoverOverlay = __sfc__$1b;
 HoverOverlay.install = function(app) {
   app.component(HoverOverlay.name, HoverOverlay);
 };
@@ -2950,8 +2957,8 @@ var Hover = {
 };
 var _HoverComponent = Hover;
 const Hover$1 = Hover;
-function _extends$g() {
-  _extends$g = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$i() {
+  _extends$i = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2962,18 +2969,18 @@ function _extends$g() {
     }
     return target;
   };
-  return _extends$g.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
 function typeValidator$9(type) {
   return ["default", "primary", "info", "success", "warning", "danger"].includes(type);
 }
-function sizeValidator$3(size) {
+function sizeValidator$4(size) {
   return ["normal", "mini", "small", "large"].includes(size);
 }
 function nativeTypeValidator(nativeType) {
   return ["button", "reset", "submit"].includes(nativeType);
 }
-var props$11 = {
+var props$12 = {
   type: {
     type: String,
     validator: typeValidator$9
@@ -2985,7 +2992,7 @@ var props$11 = {
   },
   size: {
     type: String,
-    validator: sizeValidator$3
+    validator: sizeValidator$4
   },
   loading: {
     type: Boolean,
@@ -3032,9 +3039,9 @@ var props$11 = {
   loadingRadius: {
     type: [Number, String]
   },
-  loadingType: pickProps(props$13, "type"),
-  loadingSize: pickProps(props$13, "size"),
-  loadingColor: _extends$g({}, pickProps(props$13, "color"), {
+  loadingType: pickProps(props$14, "type"),
+  loadingSize: pickProps(props$14, "size"),
+  loadingColor: _extends$i({}, pickProps(props$14, "color"), {
     default: "currentColor"
   }),
   onClick: defineListenerProp(),
@@ -3066,11 +3073,11 @@ function useButtonGroup() {
   };
 }
 var {
-  n: n$18,
-  classes: classes$X
+  n: n$19,
+  classes: classes$Y
 } = createNamespace("button");
-var _hoisted_1$o = ["type", "disabled"];
-function __render__$18(_ctx, _cache) {
+var _hoisted_1$p = ["type", "disabled"];
+function __render__$19(_ctx, _cache) {
   var _component_var_loading = vue.resolveComponent("var-loading");
   var _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
   var _directive_ripple = vue.resolveDirective("ripple");
@@ -3124,12 +3131,12 @@ function __render__$18(_ctx, _cache) {
       ["hovering"]
     )],
     46,
-    _hoisted_1$o
+    _hoisted_1$p
   )), [[_directive_ripple, {
     disabled: _ctx.disabled || !_ctx.ripple
   }], [_directive_hover, _ctx.handleHovering, "desktop"]]);
 }
-var __sfc__$19 = vue.defineComponent({
+var __sfc__$1a = vue.defineComponent({
   name: "VarButton",
   components: {
     VarLoading: Loading,
@@ -3139,7 +3146,7 @@ var __sfc__$19 = vue.defineComponent({
     Ripple: Ripple$1,
     Hover: Hover$1
   },
-  props: props$11,
+  props: props$12,
   setup(props2) {
     var pending = vue.ref(false);
     var {
@@ -3212,8 +3219,8 @@ var __sfc__$19 = vue.defineComponent({
       attemptAutoLoading(call(onTouchstart, e));
     };
     return {
-      n: n$18,
-      classes: classes$X,
+      n: n$19,
+      classes: classes$Y,
       pending,
       states,
       hovering,
@@ -3223,13 +3230,13 @@ var __sfc__$19 = vue.defineComponent({
     };
   }
 });
-__sfc__$19.render = __render__$18;
-const Button = __sfc__$19;
+__sfc__$1a.render = __render__$19;
+const Button = __sfc__$1a;
 Button.install = function(app) {
   app.component(Button.name, Button);
 };
 var _ButtonComponent = Button;
-var props$10 = {
+var props$11 = {
   visibilityHeight: {
     type: [Number, String],
     default: 200
@@ -3254,10 +3261,10 @@ var props$10 = {
   onClick: defineListenerProp()
 };
 var {
-  n: n$17,
-  classes: classes$W
+  n: n$18,
+  classes: classes$X
 } = createNamespace("back-top");
-function __render__$17(_ctx, _cache) {
+function __render__$18(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createBlock(
@@ -3305,14 +3312,14 @@ function __render__$17(_ctx, _cache) {
     ["disabled"]
   );
 }
-var __sfc__$18 = vue.defineComponent({
+var __sfc__$19 = vue.defineComponent({
   name: "VarBackTop",
   components: {
     VarButton: Button,
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$10,
+  props: props$11,
   setup(props2) {
     var show = vue.ref(false);
     var backTopEl = vue.ref(null);
@@ -3352,14 +3359,14 @@ var __sfc__$18 = vue.defineComponent({
       show,
       backTopEl,
       toSizeUnit,
-      n: n$17,
-      classes: classes$W,
+      n: n$18,
+      classes: classes$X,
       handleClick
     };
   }
 });
-__sfc__$18.render = __render__$17;
-const BackTop = __sfc__$18;
+__sfc__$19.render = __render__$18;
+const BackTop = __sfc__$19;
 BackTop.install = function(app) {
   app.component(BackTop.name, BackTop);
 };
@@ -3370,7 +3377,7 @@ function typeValidator$8(type) {
 function positionValidator$2(position) {
   return ["right-top", "right-bottom", "left-top", "left-bottom"].includes(position);
 }
-var props$$ = {
+var props$10 = {
   type: {
     type: String,
     default: "default",
@@ -3404,10 +3411,10 @@ var props$$ = {
   }
 };
 var {
-  n: n$16,
-  classes: classes$V
+  n: n$17,
+  classes: classes$W
 } = createNamespace("badge");
-function __render__$16(_ctx, _cache) {
+function __render__$17(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -3462,13 +3469,13 @@ function __render__$16(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$17 = vue.defineComponent({
+var __sfc__$18 = vue.defineComponent({
   name: "VarBadge",
   components: {
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$$,
+  props: props$10,
   setup(props2) {
     var value = vue.computed(() => {
       var {
@@ -3478,19 +3485,19 @@ var __sfc__$17 = vue.defineComponent({
       return value2 != null && maxValue != null && toNumber(value2) > toNumber(maxValue) ? maxValue + "+" : value2;
     });
     return {
-      n: n$16,
-      classes: classes$V,
+      n: n$17,
+      classes: classes$W,
       value
     };
   }
 });
-__sfc__$17.render = __render__$16;
-const Badge = __sfc__$17;
+__sfc__$18.render = __render__$17;
+const Badge = __sfc__$18;
 Badge.install = function(app) {
   app.component(Badge.name, Badge);
 };
 var _BadgeComponent = Badge;
-var props$_ = {
+var props$$ = {
   active: {
     type: [Number, String],
     default: 0
@@ -3538,8 +3545,8 @@ function useBottomNavigationItems() {
     bindBottomNavigationItem: bindChildren
   };
 }
-function _extends$f() {
-  _extends$f = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$h() {
+  _extends$h = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -3550,11 +3557,11 @@ function _extends$f() {
     }
     return target;
   };
-  return _extends$f.apply(this, arguments);
+  return _extends$h.apply(this, arguments);
 }
 var {
-  n: n$15,
-  classes: classes$U
+  n: n$16,
+  classes: classes$V
 } = createNamespace("bottom-navigation");
 var {
   n: nItem
@@ -3565,7 +3572,7 @@ var RIGHT_SPACE_CLASS = nItem("--right-space");
 var defaultFabProps = {
   type: "primary"
 };
-function __render__$15(_ctx, _cache) {
+function __render__$16(_ctx, _cache) {
   var _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -3596,12 +3603,12 @@ function __render__$15(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$16 = vue.defineComponent({
+var __sfc__$17 = vue.defineComponent({
   name: "VarBottomNavigation",
   components: {
     VarButton: Button
   },
-  props: props$_,
+  props: props$$,
   setup(props2, _ref) {
     var {
       slots
@@ -3710,7 +3717,7 @@ var __sfc__$16 = vue.defineComponent({
     bindBottomNavigationItem(bottomNavigationProvider);
     vue.watch(() => length.value, matchBoundary);
     vue.watch(() => props2.fabProps, (newValue) => {
-      fabProps.value = _extends$f({}, defaultFabProps, newValue);
+      fabProps.value = _extends$h({}, defaultFabProps, newValue);
     }, {
       immediate: true,
       deep: true
@@ -3729,8 +3736,8 @@ var __sfc__$16 = vue.defineComponent({
       addMarginClass(length.value);
     });
     return {
-      n: n$15,
-      classes: classes$U,
+      n: n$16,
+      classes: classes$V,
       length,
       bottomNavigationDom,
       handleFabClick,
@@ -3738,13 +3745,13 @@ var __sfc__$16 = vue.defineComponent({
     };
   }
 });
-__sfc__$16.render = __render__$15;
-const BottomNavigation = __sfc__$16;
+__sfc__$17.render = __render__$16;
+const BottomNavigation = __sfc__$17;
 BottomNavigation.install = function(app) {
   app.component(BottomNavigation.name, BottomNavigation);
 };
 var _BottomNavigationComponent = BottomNavigation;
-var props$Z = {
+var props$_ = {
   name: {
     type: String
   },
@@ -3780,14 +3787,14 @@ function useBottomNavigation() {
   };
 }
 var {
-  n: n$14,
-  classes: classes$T
+  n: n$15,
+  classes: classes$U
 } = createNamespace("bottom-navigation-item");
 var defaultBadgeProps = {
   type: "danger",
   dot: true
 };
-function __render__$14(_ctx, _cache) {
+function __render__$15(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_badge = vue.resolveComponent("var-badge");
   var _directive_ripple = vue.resolveDirective("ripple");
@@ -3852,7 +3859,7 @@ function __render__$14(_ctx, _cache) {
     /* CLASS, STYLE */
   )), [[_directive_ripple]]);
 }
-var __sfc__$15 = vue.defineComponent({
+var __sfc__$16 = vue.defineComponent({
   name: "VarBottomNavigationItem",
   components: {
     VarBadge: Badge,
@@ -3861,7 +3868,7 @@ var __sfc__$15 = vue.defineComponent({
   directives: {
     Ripple: Ripple$1
   },
-  props: props$Z,
+  props: props$_,
   setup(props2) {
     var name = vue.computed(() => props2.name);
     var badge2 = vue.computed(() => props2.badge);
@@ -3896,8 +3903,8 @@ var __sfc__$15 = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$14,
-      classes: classes$T,
+      n: n$15,
+      classes: classes$U,
       index,
       active,
       badge: badge2,
@@ -3907,13 +3914,13 @@ var __sfc__$15 = vue.defineComponent({
     };
   }
 });
-__sfc__$15.render = __render__$14;
-const BottomNavigationItem = __sfc__$15;
+__sfc__$16.render = __render__$15;
+const BottomNavigationItem = __sfc__$16;
 BottomNavigationItem.install = function(app) {
   app.component(BottomNavigationItem.name, BottomNavigationItem);
 };
 var _BottomNavigationItemComponent = BottomNavigationItem;
-var props$Y = {
+var props$Z = {
   separator: {
     type: String
   },
@@ -3948,10 +3955,10 @@ function useBreadcrumb() {
   };
 }
 var {
-  n: n$13,
-  classes: classes$S
+  n: n$14,
+  classes: classes$T
 } = createNamespace("breadcrumb");
-function __render__$13(_ctx, _cache) {
+function __render__$14(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -3986,9 +3993,9 @@ function __render__$13(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$14 = vue.defineComponent({
+var __sfc__$15 = vue.defineComponent({
   name: "VarBreadcrumb",
-  props: props$Y,
+  props: props$Z,
   setup(props2) {
     var {
       index,
@@ -4005,30 +4012,30 @@ var __sfc__$14 = vue.defineComponent({
     };
     bindBreadcrumb(null);
     return {
-      n: n$13,
-      classes: classes$S,
+      n: n$14,
+      classes: classes$T,
       isLast,
       parentSeparator,
       handleClick
     };
   }
 });
-__sfc__$14.render = __render__$13;
-const Breadcrumb = __sfc__$14;
+__sfc__$15.render = __render__$14;
+const Breadcrumb = __sfc__$15;
 Breadcrumb.install = function(app) {
   app.component(Breadcrumb.name, Breadcrumb);
 };
 var _BreadcrumbComponent = Breadcrumb;
-var props$X = {
+var props$Y = {
   separator: {
     type: String,
     default: "/"
   }
 };
 var {
-  n: n$12
+  n: n$13
 } = createNamespace("breadcrumbs");
-function __render__$12(_ctx, _cache) {
+function __render__$13(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -4039,9 +4046,9 @@ function __render__$12(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$13 = vue.defineComponent({
+var __sfc__$14 = vue.defineComponent({
   name: "VarBreadcrumbs",
-  props: props$X,
+  props: props$Y,
   setup(props2) {
     var separator = vue.computed(() => props2.separator);
     var {
@@ -4054,12 +4061,12 @@ var __sfc__$13 = vue.defineComponent({
     };
     bindBreadcrumbList(breadcrumbsProvider);
     return {
-      n: n$12
+      n: n$13
     };
   }
 });
-__sfc__$13.render = __render__$12;
-const Breadcrumbs = __sfc__$13;
+__sfc__$14.render = __render__$13;
+const Breadcrumbs = __sfc__$14;
 Breadcrumbs.install = function(app) {
   app.component(Breadcrumbs.name, Breadcrumbs);
 };
@@ -4067,13 +4074,13 @@ var _BreadcrumbsComponent = Breadcrumbs;
 function typeValidator$7(type) {
   return ["default", "primary", "info", "success", "warning", "danger"].includes(type);
 }
-function sizeValidator$2(size) {
+function sizeValidator$3(size) {
   return ["normal", "mini", "small", "large"].includes(size);
 }
 function modeValidator$1(mode) {
   return ["normal", "text", "outline"].includes(mode);
 }
-var props$W = {
+var props$X = {
   type: {
     type: String,
     default: "default",
@@ -4082,7 +4089,7 @@ var props$W = {
   size: {
     type: String,
     default: "normal",
-    validator: sizeValidator$2
+    validator: sizeValidator$3
   },
   color: {
     type: String
@@ -4105,10 +4112,10 @@ var props$W = {
   }
 };
 var {
-  n: n$11,
-  classes: classes$R
+  n: n$12,
+  classes: classes$S
 } = createNamespace("button-group");
-function __render__$11(_ctx, _cache) {
+function __render__$12(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -4119,9 +4126,9 @@ function __render__$11(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$12 = vue.defineComponent({
+var __sfc__$13 = vue.defineComponent({
   name: "VarButtonGroup",
-  props: props$W,
+  props: props$X,
   setup(props2) {
     var {
       bindButtons
@@ -4136,14 +4143,14 @@ var __sfc__$12 = vue.defineComponent({
     };
     bindButtons(buttonGroupProvider);
     return {
-      n: n$11,
-      classes: classes$R,
+      n: n$12,
+      classes: classes$S,
       formatElevation
     };
   }
 });
-__sfc__$12.render = __render__$11;
-const ButtonGroup = __sfc__$12;
+__sfc__$13.render = __render__$12;
+const ButtonGroup = __sfc__$13;
 ButtonGroup.install = function(app) {
   app.component(ButtonGroup.name, ButtonGroup);
 };
@@ -4151,7 +4158,7 @@ var _ButtonGroupComponent = ButtonGroup;
 function fitValidator$1(fit) {
   return ["fill", "contain", "cover", "none", "scale-down"].includes(fit);
 }
-var props$V = {
+var props$W = {
   src: {
     type: String
   },
@@ -4235,12 +4242,12 @@ function _asyncToGenerator$a(fn2) {
   };
 }
 var {
-  n: n$10,
-  classes: classes$Q
+  n: n$11,
+  classes: classes$R
 } = createNamespace("card");
 var RIPPLE_DELAY = 500;
-var _hoisted_1$n = ["src", "alt"];
-function __render__$10(_ctx, _cache) {
+var _hoisted_1$o = ["src", "alt"];
+function __render__$11(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_button = vue.resolveComponent("var-button");
   var _directive_ripple = vue.resolveDirective("ripple");
@@ -4286,7 +4293,7 @@ function __render__$10(_ctx, _cache) {
         },
         null,
         14,
-        _hoisted_1$n
+        _hoisted_1$o
       )) : vue.createCommentVNode("v-if", true)]), vue.createElementVNode(
         "div",
         {
@@ -4406,7 +4413,7 @@ function __render__$10(_ctx, _cache) {
     disabled: !_ctx.ripple || _ctx.floater
   }]]);
 }
-var __sfc__$11 = vue.defineComponent({
+var __sfc__$12 = vue.defineComponent({
   name: "VarCard",
   directives: {
     Ripple: Ripple$1
@@ -4415,7 +4422,7 @@ var __sfc__$11 = vue.defineComponent({
     VarIcon: Icon,
     VarButton: Button
   },
-  props: props$V,
+  props: props$W,
   setup(props2) {
     var card2 = vue.ref(null);
     var cardFloater = vue.ref(null);
@@ -4518,8 +4525,8 @@ var __sfc__$11 = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$10,
-      classes: classes$Q,
+      n: n$11,
+      classes: classes$R,
       toSizeUnit,
       card: card2,
       cardFloater,
@@ -4544,13 +4551,13 @@ var __sfc__$11 = vue.defineComponent({
     };
   }
 });
-__sfc__$11.render = __render__$10;
-const Card = __sfc__$11;
+__sfc__$12.render = __render__$11;
+const Card = __sfc__$12;
 Card.install = function(app) {
   app.component(Card.name, Card);
 };
 var _CardComponent = Card;
-var props$U = {
+var props$V = {
   title: {
     type: [Number, String]
   },
@@ -4586,10 +4593,10 @@ var props$U = {
   onClick: defineListenerProp()
 };
 var {
-  n: n$$,
-  classes: classes$P
+  n: n$10,
+  classes: classes$Q
 } = createNamespace("cell");
-function __render__$$(_ctx, _cache) {
+function __render__$10(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _directive_ripple = vue.resolveDirective("ripple");
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
@@ -4660,7 +4667,7 @@ function __render__$$(_ctx, _cache) {
     disabled: !_ctx.ripple
   }]]);
 }
-var __sfc__$10 = vue.defineComponent({
+var __sfc__$11 = vue.defineComponent({
   name: "VarCell",
   components: {
     VarIcon: Icon
@@ -4668,7 +4675,7 @@ var __sfc__$10 = vue.defineComponent({
   directives: {
     Ripple: Ripple$1
   },
-  props: props$U,
+  props: props$V,
   setup(props2) {
     var borderOffsetStyles = vue.computed(() => {
       if (props2.borderOffset == null) {
@@ -4683,21 +4690,21 @@ var __sfc__$10 = vue.defineComponent({
       call(props2.onClick, e);
     };
     return {
-      n: n$$,
-      classes: classes$P,
+      n: n$10,
+      classes: classes$Q,
       toSizeUnit,
       borderOffsetStyles,
       handleClick
     };
   }
 });
-__sfc__$10.render = __render__$$;
-const Cell = __sfc__$10;
+__sfc__$11.render = __render__$10;
+const Cell = __sfc__$11;
 Cell.install = function(app) {
   app.component(Cell.name, Cell);
 };
 var _CellComponent = Cell;
-var props$T = {
+var props$U = {
   errorMessage: {
     type: String,
     default: ""
@@ -4708,15 +4715,15 @@ var props$T = {
   }
 };
 var {
-  n: n$_
+  n: n$$
 } = createNamespace("form-details");
-var _hoisted_1$m = {
+var _hoisted_1$n = {
   key: 0
 };
 var _hoisted_2$b = {
   key: 0
 };
-function __render__$_(_ctx, _cache) {
+function __render__$$(_ctx, _cache) {
   return vue.openBlock(), vue.createBlock(
     vue.Transition,
     {
@@ -4742,7 +4749,7 @@ function __render__$_(_ctx, _cache) {
             {
               default: vue.withCtx(() => [_ctx.errorMessage ? (vue.openBlock(), vue.createElementBlock(
                 "div",
-                _hoisted_1$m,
+                _hoisted_1$n,
                 vue.toDisplayString(_ctx.errorMessage),
                 1
                 /* TEXT */
@@ -4792,20 +4799,20 @@ function __render__$_(_ctx, _cache) {
     ["name"]
   );
 }
-var __sfc__$$ = vue.defineComponent({
+var __sfc__$10 = vue.defineComponent({
   name: "VarFormDetails",
-  props: props$T,
+  props: props$U,
   setup: () => ({
-    n: n$_
+    n: n$$
   })
 });
-__sfc__$$.render = __render__$_;
-const FormDetails = __sfc__$$;
+__sfc__$10.render = __render__$$;
+const FormDetails = __sfc__$10;
 FormDetails.install = function(app) {
   app.component(FormDetails.name, FormDetails);
 };
 var _FormDetailsComponent = FormDetails;
-var props$S = {
+var props$T = {
   modelValue: {
     type: [String, Number, Boolean, Object, Array],
     default: false
@@ -4875,8 +4882,8 @@ function useCheckboxGroup() {
     bindCheckboxGroup: bindParent
   };
 }
-function _extends$e() {
-  _extends$e = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$g() {
+  _extends$g = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -4887,7 +4894,7 @@ function _extends$e() {
     }
     return target;
   };
-  return _extends$e.apply(this, arguments);
+  return _extends$g.apply(this, arguments);
 }
 var FORM_BIND_FORM_ITEM_KEY = Symbol("FORM_BIND_FORM_ITEM_KEY");
 function useForm() {
@@ -4898,7 +4905,7 @@ function useForm() {
   } = useParent(FORM_BIND_FORM_ITEM_KEY);
   var instance = vue.getCurrentInstance();
   var bindForm = bindParent ? (formItemProvider) => {
-    bindParent(_extends$e({}, formItemProvider, {
+    bindParent(_extends$g({}, formItemProvider, {
       instance
     }));
   } : null;
@@ -4921,10 +4928,10 @@ function useFormItems() {
   };
 }
 var {
-  n: n$Z,
-  classes: classes$O
+  n: n$_,
+  classes: classes$P
 } = createNamespace("checkbox");
-function __render__$Z(_ctx, _cache) {
+function __render__$_(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
   var _component_var_form_details = vue.resolveComponent("var-form-details");
@@ -5014,7 +5021,7 @@ function __render__$Z(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$_ = vue.defineComponent({
+var __sfc__$$ = vue.defineComponent({
   name: "VarCheckbox",
   directives: {
     Ripple: Ripple$1,
@@ -5025,7 +5032,7 @@ var __sfc__$_ = vue.defineComponent({
     VarFormDetails: FormDetails,
     VarHoverOverlay: HoverOverlay
   },
-  props: props$S,
+  props: props$T,
   setup(props2) {
     var value = vue.ref(false);
     var checked = vue.computed(() => value.value === props2.checkedValue);
@@ -5144,8 +5151,8 @@ var __sfc__$_ = vue.defineComponent({
       formReadonly: form == null ? void 0 : form.readonly,
       hovering,
       handleHovering,
-      n: n$Z,
-      classes: classes$O,
+      n: n$_,
+      classes: classes$P,
       handleClick,
       toggle,
       reset,
@@ -5154,8 +5161,8 @@ var __sfc__$_ = vue.defineComponent({
     };
   }
 });
-__sfc__$_.render = __render__$Z;
-const Checkbox = __sfc__$_;
+__sfc__$$.render = __render__$_;
+const Checkbox = __sfc__$$;
 Checkbox.install = function(app) {
   app.component(Checkbox.name, Checkbox);
 };
@@ -5163,7 +5170,7 @@ var _CheckboxComponent = Checkbox;
 function directionValidator$5(direction) {
   return ["horizontal", "vertical"].includes(direction);
 }
-var props$R = {
+var props$S = {
   modelValue: {
     type: Array,
     default: () => []
@@ -5187,10 +5194,10 @@ var props$R = {
   "onUpdate:modelValue": defineListenerProp()
 };
 var {
-  n: n$Y,
-  classes: classes$N
+  n: n$Z,
+  classes: classes$O
 } = createNamespace("checkbox-group");
-function __render__$Y(_ctx, _cache) {
+function __render__$Z(_ctx, _cache) {
   var _component_var_form_details = vue.resolveComponent("var-form-details");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -5218,12 +5225,12 @@ function __render__$Y(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$Z = vue.defineComponent({
+var __sfc__$_ = vue.defineComponent({
   name: "VarCheckboxGroup",
   components: {
     VarFormDetails: FormDetails
   },
-  props: props$R,
+  props: props$S,
   setup(props2) {
     var max2 = vue.computed(() => props2.max);
     var checkedCount = vue.computed(() => props2.modelValue.length);
@@ -5336,8 +5343,8 @@ var __sfc__$Z = vue.defineComponent({
     call(bindForm, checkboxGroupProvider);
     return {
       errorMessage,
-      n: n$Y,
-      classes: classes$N,
+      n: n$Z,
+      classes: classes$O,
       checkAll: checkAll2,
       inverseAll,
       reset,
@@ -5346,8 +5353,8 @@ var __sfc__$Z = vue.defineComponent({
     };
   }
 });
-__sfc__$Z.render = __render__$Y;
-const CheckboxGroup = __sfc__$Z;
+__sfc__$_.render = __render__$Z;
+const CheckboxGroup = __sfc__$_;
 CheckboxGroup.install = function(app) {
   app.component(CheckboxGroup.name, CheckboxGroup);
 };
@@ -5355,10 +5362,10 @@ var _CheckboxGroupComponent = CheckboxGroup;
 function typeValidator$6(type) {
   return ["default", "primary", "info", "success", "warning", "danger"].includes(type);
 }
-function sizeValidator$1(size) {
+function sizeValidator$2(size) {
   return ["normal", "mini", "small", "large"].includes(size);
 }
-var props$Q = {
+var props$R = {
   type: {
     type: String,
     default: "default",
@@ -5367,7 +5374,7 @@ var props$Q = {
   size: {
     type: String,
     default: "normal",
-    validator: sizeValidator$1
+    validator: sizeValidator$2
   },
   color: {
     type: String
@@ -5375,7 +5382,7 @@ var props$Q = {
   textColor: {
     type: String
   },
-  iconName: pickProps(props$18, "name"),
+  iconName: pickProps(props$19, "name"),
   plain: {
     type: Boolean,
     default: false
@@ -5395,10 +5402,10 @@ var props$Q = {
   onClose: defineListenerProp()
 };
 var {
-  n: n$X,
-  classes: classes$M
+  n: n$Y,
+  classes: classes$N
 } = createNamespace("chip");
-function __render__$X(_ctx, _cache) {
+function __render__$Y(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   return vue.openBlock(), vue.createBlock(
     vue.Transition,
@@ -5451,13 +5458,13 @@ function __render__$X(_ctx, _cache) {
     ["name"]
   );
 }
-var __sfc__$Y = vue.defineComponent({
+var __sfc__$Z = vue.defineComponent({
   name: "VarChip",
   components: {
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$Q,
+  props: props$R,
   setup(props2) {
     var chipStyles = vue.computed(() => {
       var {
@@ -5484,25 +5491,25 @@ var __sfc__$Y = vue.defineComponent({
         plain,
         round: round2
       } = props2;
-      var blockClass = block ? n$X("$--flex") : n$X("$--inline-flex");
-      var plainTypeClass = plain ? n$X("plain") + " " + n$X("plain-" + type) : n$X("--" + type);
-      var roundClass = round2 ? n$X("--round") : null;
-      return [n$X("--" + size), blockClass, plainTypeClass, roundClass];
+      var blockClass = block ? n$Y("$--flex") : n$Y("$--inline-flex");
+      var plainTypeClass = plain ? n$Y("plain") + " " + n$Y("plain-" + type) : n$Y("--" + type);
+      var roundClass = round2 ? n$Y("--round") : null;
+      return [n$Y("--" + size), blockClass, plainTypeClass, roundClass];
     });
     var handleClose = (e) => {
       call(props2.onClose, e);
     };
     return {
-      n: n$X,
-      classes: classes$M,
+      n: n$Y,
+      classes: classes$N,
       chipStyles,
       contentClass,
       handleClose
     };
   }
 });
-__sfc__$Y.render = __render__$X;
-const Chip = __sfc__$Y;
+__sfc__$Z.render = __render__$Y;
+const Chip = __sfc__$Z;
 Chip.install = function(app) {
   app.component(Chip.name, Chip);
 };
@@ -5516,7 +5523,7 @@ function justifyValidator$2(justify) {
 function alignValidator$2(align) {
   return ["stretch", "center", "start", "end", "baseline", "initial", "inherit", "flex-start", "flex-end"].includes(align);
 }
-var props$P = {
+var props$Q = {
   span: {
     type: [String, Number],
     default: 24
@@ -5581,10 +5588,10 @@ function useRow() {
   };
 }
 var {
-  n: n$W,
-  classes: classes$L
+  n: n$X,
+  classes: classes$M
 } = createNamespace("col");
-function __render__$W(_ctx, _cache) {
+function __render__$X(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -5605,9 +5612,9 @@ function __render__$W(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$X = vue.defineComponent({
+var __sfc__$Y = vue.defineComponent({
   name: "VarCol",
-  props: props$P,
+  props: props$Q,
   setup(props2) {
     var padding = vue.ref({
       left: 0,
@@ -5634,10 +5641,10 @@ var __sfc__$X = vue.defineComponent({
           offset: _offset,
           span: _span
         } = size;
-        Number(_span) >= 0 && classes2.push(n$W("--span-" + mode + "-" + _span));
-        _offset && classes2.push(n$W("--offset-" + mode + "-" + _offset));
+        Number(_span) >= 0 && classes2.push(n$X("--span-" + mode + "-" + _span));
+        _offset && classes2.push(n$X("--offset-" + mode + "-" + _offset));
       } else {
-        Number(size) >= 0 && classes2.push(n$W("--span-" + mode + "-" + size));
+        Number(size) >= 0 && classes2.push(n$X("--span-" + mode + "-" + size));
       }
       return classes2;
     };
@@ -5649,8 +5656,8 @@ var __sfc__$X = vue.defineComponent({
     });
     call(bindRow, colProvider);
     return {
-      n: n$W,
-      classes: classes$L,
+      n: n$X,
+      classes: classes$M,
       padding,
       toNumber,
       toSizeUnit,
@@ -5662,8 +5669,8 @@ var __sfc__$X = vue.defineComponent({
     };
   }
 });
-__sfc__$X.render = __render__$W;
-const Col = __sfc__$X;
+__sfc__$Y.render = __render__$X;
+const Col = __sfc__$Y;
 Col.install = function(app) {
   app.component(Col.name, Col);
 };
@@ -5681,7 +5688,7 @@ function useCollapseItem() {
     bindCollapseItem: bindChildren
   };
 }
-var props$O = {
+var props$P = {
   modelValue: {
     type: [Array, String, Number]
   },
@@ -5705,9 +5712,9 @@ var props$O = {
   "onUpdate:modelValue": defineListenerProp()
 };
 var {
-  n: n$V
+  n: n$W
 } = createNamespace("collapse");
-function __render__$V(_ctx, _cache) {
+function __render__$W(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -5718,9 +5725,9 @@ function __render__$V(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$W = vue.defineComponent({
+var __sfc__$X = vue.defineComponent({
   name: "VarCollapse",
-  props: props$O,
+  props: props$P,
   setup(props2) {
     var {
       length,
@@ -5817,13 +5824,13 @@ var __sfc__$W = vue.defineComponent({
     vue.watch(() => length.value, () => vue.nextTick().then(resize));
     vue.watch(() => props2.modelValue, () => vue.nextTick().then(resize));
     return {
-      n: n$V,
+      n: n$W,
       divider: divider2
     };
   }
 });
-__sfc__$W.render = __render__$V;
-const Collapse = __sfc__$W;
+__sfc__$X.render = __render__$W;
+const Collapse = __sfc__$X;
 Collapse.install = function(app) {
   app.component(Collapse.name, Collapse);
 };
@@ -5843,7 +5850,7 @@ function useCollapse() {
     bindCollapse: bindParent
   };
 }
-var props$N = {
+var props$O = {
   name: {
     type: [String, Number]
   },
@@ -5860,10 +5867,10 @@ var props$N = {
   }
 };
 var {
-  n: n$U,
-  classes: classes$K
+  n: n$V,
+  classes: classes$L
 } = createNamespace("collapse-item");
-function __render__$U(_ctx, _cache) {
+function __render__$V(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -5946,12 +5953,12 @@ function __render__$U(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$V = vue.defineComponent({
+var __sfc__$W = vue.defineComponent({
   name: "VarCollapseItem",
   components: {
     VarIcon: Icon
   },
-  props: props$N,
+  props: props$O,
   setup(props2) {
     var {
       index,
@@ -6037,9 +6044,9 @@ var __sfc__$V = vue.defineComponent({
         closePanel();
     });
     return {
-      n: n$U,
+      n: n$V,
       start: start2,
-      classes: classes$K,
+      classes: classes$L,
       showContent,
       isShow,
       offset: offset2,
@@ -6052,13 +6059,13 @@ var __sfc__$V = vue.defineComponent({
     };
   }
 });
-__sfc__$V.render = __render__$U;
-const CollapseItem = __sfc__$V;
+__sfc__$W.render = __render__$V;
+const CollapseItem = __sfc__$W;
 CollapseItem.install = function(app) {
   app.component(CollapseItem.name, CollapseItem);
 };
 var _CollapseItemComponent = CollapseItem;
-var props$M = {
+var props$N = {
   time: {
     type: [String, Number],
     default: 0
@@ -6075,13 +6082,13 @@ var props$M = {
   onChange: defineListenerProp()
 };
 var {
-  n: n$T
+  n: n$U
 } = createNamespace("countdown");
 var SECOND = 1e3;
 var MINUTE = 60 * SECOND;
 var HOUR = 60 * MINUTE;
 var DAY = 24 * HOUR;
-function __render__$T(_ctx, _cache) {
+function __render__$U(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -6096,9 +6103,9 @@ function __render__$T(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$U = vue.defineComponent({
+var __sfc__$V = vue.defineComponent({
   name: "VarCountdown",
-  props: props$M,
+  props: props$N,
   setup(props2) {
     var showTime = vue.ref("");
     var timeData = vue.ref({
@@ -6221,15 +6228,15 @@ var __sfc__$U = vue.defineComponent({
     return {
       showTime,
       timeData,
-      n: n$T,
+      n: n$U,
       start: start2,
       pause,
       reset
     };
   }
 });
-__sfc__$U.render = __render__$T;
-const Countdown = __sfc__$U;
+__sfc__$V.render = __render__$U;
+const Countdown = __sfc__$V;
 Countdown.install = function(app) {
   app.component(Countdown.name, Countdown);
 };
@@ -8561,7 +8568,7 @@ P[Symbol.toStringTag] = "Decimal";
 var Decimal = P.constructor = clone(DEFAULTS);
 LN10 = new Decimal(LN10);
 PI = new Decimal(PI);
-var props$L = {
+var props$M = {
   modelValue: {
     type: [String, Number],
     default: 0
@@ -8649,13 +8656,13 @@ var props$L = {
   "onUpdate:modelValue": defineListenerProp()
 };
 var {
-  n: n$S,
-  classes: classes$J
+  n: n$T,
+  classes: classes$K
 } = createNamespace("counter");
 var SPEED = 100;
 var DELAY = 600;
-var _hoisted_1$l = ["inputmode", "readonly", "disabled"];
-function __render__$S(_ctx, _cache) {
+var _hoisted_1$m = ["inputmode", "readonly", "disabled"];
+function __render__$T(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_button = vue.resolveComponent("var-button");
   var _component_var_form_details = vue.resolveComponent("var-form-details");
@@ -8715,7 +8722,7 @@ function __render__$S(_ctx, _cache) {
         },
         null,
         46,
-        _hoisted_1$l
+        _hoisted_1$m
       ), [[vue.vModelText, _ctx.inputValue]]), vue.createVNode(
         _component_var_button,
         {
@@ -8757,7 +8764,7 @@ function __render__$S(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$T = vue.defineComponent({
+var __sfc__$U = vue.defineComponent({
   name: "VarCounter",
   components: {
     VarButton: Button,
@@ -8768,7 +8775,7 @@ var __sfc__$T = vue.defineComponent({
     Ripple: Ripple$1
   },
   inheritAttrs: false,
-  props: props$L,
+  props: props$M,
   setup(props2) {
     var inputValue = vue.ref("");
     var {
@@ -8976,8 +8983,8 @@ var __sfc__$T = vue.defineComponent({
     });
     setNormalizedValue(normalizeValue(String(props2.modelValue)));
     return {
-      n: n$S,
-      classes: classes$J,
+      n: n$T,
+      classes: classes$K,
       formatElevation,
       inputValue,
       errorMessage,
@@ -9000,8 +9007,8 @@ var __sfc__$T = vue.defineComponent({
     };
   }
 });
-__sfc__$T.render = __render__$S;
-const Counter = __sfc__$T;
+__sfc__$U.render = __render__$T;
+const Counter = __sfc__$U;
 Counter.install = function(app) {
   app.component(Counter.name, Counter);
 };
@@ -9473,7 +9480,7 @@ var WEEK_HEADER = [{
 }, {
   index: "6"
 }];
-var props$K = {
+var props$L = {
   modelValue: {
     type: [String, Array]
   },
@@ -9534,9 +9541,9 @@ var props$K = {
   "onUpdate:modelValue": defineListenerProp()
 };
 var {
-  n: n$R
+  n: n$S
 } = createNamespace("picker-header");
-function __render__$R(_ctx, _cache) {
+function __render__$S(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createElementBlock(
@@ -9618,7 +9625,7 @@ function __render__$R(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$S = vue.defineComponent({
+var __sfc__$T = vue.defineComponent({
   name: "PanelHeader",
   components: {
     VarButton: Button,
@@ -9671,17 +9678,17 @@ var __sfc__$S = vue.defineComponent({
       forwardOrBackNum.value = 0;
     });
     return {
-      n: n$R,
+      n: n$S,
       reverse,
       showDate,
       checkDate
     };
   }
 });
-__sfc__$S.render = __render__$R;
-const PanelHeader = __sfc__$S;
-function _extends$d() {
-  _extends$d = Object.assign ? Object.assign.bind() : function(target) {
+__sfc__$T.render = __render__$S;
+const PanelHeader = __sfc__$T;
+function _extends$f() {
+  _extends$f = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -9692,18 +9699,18 @@ function _extends$d() {
     }
     return target;
   };
-  return _extends$d.apply(this, arguments);
+  return _extends$f.apply(this, arguments);
 }
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 var {
-  n: n$Q,
-  classes: classes$I
+  n: n$R,
+  classes: classes$J
 } = createNamespace("month-picker");
 var {
   n: nDate$1
 } = createNamespace("date-picker");
-function __render__$Q(_ctx, _cache) {
+function __render__$R(_ctx, _cache) {
   var _component_panel_header = vue.resolveComponent("panel-header");
   var _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createElementBlock(
@@ -9750,7 +9757,7 @@ function __render__$Q(_ctx, _cache) {
                   "var-month-picker-cover": "",
                   ripple: false,
                   elevation: _ctx.componentProps.buttonElevation
-                }, _extends$d({}, _ctx.buttonProps(month.index)), {
+                }, _extends$f({}, _ctx.buttonProps(month.index)), {
                   onClick: _cache[0] || (_cache[0] = (event) => chooseMonth(month, event))
                 }),
                 {
@@ -9782,7 +9789,7 @@ function __render__$Q(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$R = vue.defineComponent({
+var __sfc__$S = vue.defineComponent({
   name: "MonthPickerPanel",
   components: {
     VarButton: Button,
@@ -9934,13 +9941,13 @@ var __sfc__$R = vue.defineComponent({
         color: !computeText() ? color : "",
         textColor: isCover ? "" : textColorOrCover(),
         [nDate$1() + "-color-cover"]: isCover,
-        class: classes$I(n$Q("button"), [disabled, n$Q("button--disabled")]),
+        class: classes$J(n$R("button"), [disabled, n$R("button--disabled")]),
         disabled
       };
     };
     var chooseMonth2 = (month, event) => {
       var buttonEl = event.currentTarget;
-      if (buttonEl.classList.contains(n$Q("button--disabled")))
+      if (buttonEl.classList.contains(n$R("button--disabled")))
         return;
       emit("choose-month", month);
     };
@@ -9967,7 +9974,7 @@ var __sfc__$R = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$Q,
+      n: n$R,
       nDate: nDate$1,
       pack,
       MONTH_LIST,
@@ -9983,14 +9990,14 @@ var __sfc__$R = vue.defineComponent({
     };
   }
 });
-__sfc__$R.render = __render__$Q;
-const MonthPickerPanel = __sfc__$R;
+__sfc__$S.render = __render__$R;
+const MonthPickerPanel = __sfc__$S;
 var {
-  n: n$P,
-  classes: classes$H
+  n: n$Q,
+  classes: classes$I
 } = createNamespace("year-picker");
-var _hoisted_1$k = ["onClick"];
-function __render__$P(_ctx, _cache) {
+var _hoisted_1$l = ["onClick"];
+function __render__$Q(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "ul",
     {
@@ -10012,7 +10019,7 @@ function __render__$P(_ctx, _cache) {
           },
           vue.toDisplayString(year),
           15,
-          _hoisted_1$k
+          _hoisted_1$l
         );
       }),
       128
@@ -10022,7 +10029,7 @@ function __render__$P(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$Q = vue.defineComponent({
+var __sfc__$R = vue.defineComponent({
   name: "YearPickerPanel",
   props: {
     preview: {
@@ -10075,24 +10082,24 @@ var __sfc__$Q = vue.defineComponent({
       emit("choose-year", year);
     };
     useMounted(() => {
-      var activeEl = document.querySelector("." + n$P("item--active"));
+      var activeEl = document.querySelector("." + n$Q("item--active"));
       activeEl == null ? void 0 : activeEl.scrollIntoView({
         block: "center"
       });
     });
     return {
-      n: n$P,
-      classes: classes$H,
+      n: n$Q,
+      classes: classes$I,
       yearList,
       chooseYear,
       toNumber
     };
   }
 });
-__sfc__$Q.render = __render__$P;
-const YearPickerPanel = __sfc__$Q;
-function _extends$c() {
-  _extends$c = Object.assign ? Object.assign.bind() : function(target) {
+__sfc__$R.render = __render__$Q;
+const YearPickerPanel = __sfc__$R;
+function _extends$e() {
+  _extends$e = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -10103,18 +10110,18 @@ function _extends$c() {
     }
     return target;
   };
-  return _extends$c.apply(this, arguments);
+  return _extends$e.apply(this, arguments);
 }
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 var {
-  n: n$O,
-  classes: classes$G
+  n: n$P,
+  classes: classes$H
 } = createNamespace("day-picker");
 var {
   n: nDate
 } = createNamespace("date-picker");
-function __render__$O(_ctx, _cache) {
+function __render__$P(_ctx, _cache) {
   var _component_panel_header = vue.resolveComponent("panel-header");
   var _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createElementBlock(
@@ -10191,7 +10198,7 @@ function __render__$O(_ctx, _cache) {
                     round: "",
                     ripple: false,
                     elevation: _ctx.componentProps.buttonElevation
-                  }, _extends$c({}, _ctx.buttonProps(day)), {
+                  }, _extends$e({}, _ctx.buttonProps(day)), {
                     onClick: _cache[0] || (_cache[0] = (event) => chooseDay(day, event))
                   }),
                   {
@@ -10226,7 +10233,7 @@ function __render__$O(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$P = vue.defineComponent({
+var __sfc__$Q = vue.defineComponent({
   name: "DayPickerPanel",
   components: {
     VarButton: Button,
@@ -10361,7 +10368,7 @@ var __sfc__$P = vue.defineComponent({
           text: true,
           outline: false,
           textColor: "",
-          class: n$O("button"),
+          class: n$P("button"),
           disabled: true
         };
       }
@@ -10427,7 +10434,7 @@ var __sfc__$P = vue.defineComponent({
         outline: computeOutline(),
         textColor: isCover ? "" : textColorOrCover(),
         [nDate() + "-color-cover"]: isCover,
-        class: classes$G(n$O("button"), n$O("button--usable"), [disabled, n$O("button--disabled")]),
+        class: classes$H(n$P("button"), n$P("button--usable"), [disabled, n$P("button--disabled")]),
         disabled
       };
     };
@@ -10438,7 +10445,7 @@ var __sfc__$P = vue.defineComponent({
     };
     var chooseDay2 = (day, event) => {
       var buttonEl = event.currentTarget;
-      if (buttonEl.classList.contains(n$O("button--disabled")))
+      if (buttonEl.classList.contains(n$P("button--disabled")))
         return;
       emit("choose-day", day);
     };
@@ -10454,7 +10461,7 @@ var __sfc__$P = vue.defineComponent({
       initHeader();
     });
     return {
-      n: n$O,
+      n: n$P,
       nDate,
       days,
       reverse,
@@ -10471,13 +10478,13 @@ var __sfc__$P = vue.defineComponent({
     };
   }
 });
-__sfc__$P.render = __render__$O;
-const DayPickerPanel = __sfc__$P;
+__sfc__$Q.render = __render__$P;
+const DayPickerPanel = __sfc__$Q;
 var {
-  n: n$N,
-  classes: classes$F
+  n: n$O,
+  classes: classes$G
 } = createNamespace("date-picker");
-function __render__$N(_ctx, _cache) {
+function __render__$O(_ctx, _cache) {
   var _component_year_picker_panel = vue.resolveComponent("year-picker-panel");
   var _component_month_picker_panel = vue.resolveComponent("month-picker-panel");
   var _component_day_picker_panel = vue.resolveComponent("day-picker-panel");
@@ -10659,14 +10666,14 @@ function __render__$N(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$O = vue.defineComponent({
+var __sfc__$P = vue.defineComponent({
   name: "VarDatePicker",
   components: {
     MonthPickerPanel,
     YearPickerPanel,
     DayPickerPanel
   },
-  props: props$K,
+  props: props$L,
   setup(props2) {
     var startX = 0;
     var startY = 0;
@@ -11008,8 +11015,8 @@ var __sfc__$O = vue.defineComponent({
     });
     vue.watch(getPanelType, resetState);
     return {
-      n: n$N,
-      classes: classes$F,
+      n: n$O,
+      classes: classes$G,
       monthPanelEl,
       dayPanelEl,
       reverse,
@@ -11040,14 +11047,14 @@ var __sfc__$O = vue.defineComponent({
     };
   }
 });
-__sfc__$O.render = __render__$N;
-const DatePicker = __sfc__$O;
+__sfc__$P.render = __render__$O;
+const DatePicker = __sfc__$P;
 DatePicker.install = function(app) {
   app.component(DatePicker.name, DatePicker);
 };
 var _DatePickerComponent = DatePicker;
-function _extends$b() {
-  _extends$b = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$d() {
+  _extends$d = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -11058,12 +11065,12 @@ function _extends$b() {
     }
     return target;
   };
-  return _extends$b.apply(this, arguments);
+  return _extends$d.apply(this, arguments);
 }
 function messageAlignValidator(messageAlign) {
   return ["left", "center", "right"].includes(messageAlign);
 }
-var props$J = _extends$b({
+var props$K = _extends$d({
   show: {
     type: Boolean,
     default: false
@@ -11118,7 +11125,7 @@ var props$J = _extends$b({
   onConfirm: defineListenerProp(),
   onCancel: defineListenerProp(),
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$19, [
+}, pickProps(props$1a, [
   "overlay",
   "overlayClass",
   "overlayStyle",
@@ -11133,8 +11140,8 @@ var props$J = _extends$b({
   // internal for function call closes the dialog
   "onRouteChange"
 ]));
-function _extends$a() {
-  _extends$a = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$c() {
+  _extends$c = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -11145,13 +11152,13 @@ function _extends$a() {
     }
     return target;
   };
-  return _extends$a.apply(this, arguments);
+  return _extends$c.apply(this, arguments);
 }
 var {
-  n: n$M,
-  classes: classes$E
+  n: n$N,
+  classes: classes$F
 } = createNamespace("dialog");
-function __render__$M(_ctx, _cache) {
+function __render__$N(_ctx, _cache) {
   var _component_var_button = vue.resolveComponent("var-button");
   var _component_var_popup = vue.resolveComponent("var-popup");
   return vue.openBlock(), vue.createBlock(
@@ -11178,7 +11185,7 @@ function __render__$M(_ctx, _cache) {
         "div",
         vue.mergeProps({
           class: _ctx.classes(_ctx.n("$--box"), _ctx.n(), _ctx.dialogClass),
-          style: _extends$a({
+          style: _extends$c({
             width: _ctx.toSizeUnit(_ctx.width)
           }, _ctx.dialogStyle)
         }, _ctx.$attrs),
@@ -11272,14 +11279,14 @@ function __render__$M(_ctx, _cache) {
     ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onClickOverlay"]
   );
 }
-var __sfc__$N = vue.defineComponent({
+var __sfc__$O = vue.defineComponent({
   name: "VarDialog",
   components: {
     VarPopup: Popup,
     VarButton: Button
   },
   inheritAttrs: false,
-  props: props$J,
+  props: props$K,
   setup(props2) {
     var popupShow = vue.ref(false);
     var popupCloseOnClickOverlay = vue.ref(false);
@@ -11339,8 +11346,8 @@ var __sfc__$N = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$M,
-      classes: classes$E,
+      n: n$N,
+      classes: classes$F,
       pack,
       dt,
       popupShow,
@@ -11352,10 +11359,10 @@ var __sfc__$N = vue.defineComponent({
     };
   }
 });
-__sfc__$N.render = __render__$M;
-const VarDialog = __sfc__$N;
-function _extends$9() {
-  _extends$9 = Object.assign ? Object.assign.bind() : function(target) {
+__sfc__$O.render = __render__$N;
+const VarDialog = __sfc__$O;
+function _extends$b() {
+  _extends$b = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -11366,7 +11373,7 @@ function _extends$9() {
     }
     return target;
   };
-  return _extends$9.apply(this, arguments);
+  return _extends$b.apply(this, arguments);
 }
 var singletonOptions$2;
 var defaultOptions$2 = {};
@@ -11375,11 +11382,11 @@ function normalizeOptions$2(options) {
     options = {};
   }
   if (isString(options)) {
-    return _extends$9({}, defaultOptions$2, {
+    return _extends$b({}, defaultOptions$2, {
       message: options
     });
   }
-  return _extends$9({}, defaultOptions$2, options);
+  return _extends$b({}, defaultOptions$2, options);
 }
 function Dialog(options) {
   if (!inBrowser()) {
@@ -11445,7 +11452,7 @@ Dialog.install = function(app) {
 };
 Dialog.Component = VarDialog;
 var _DialogComponent = VarDialog;
-var props$I = {
+var props$J = {
   inset: {
     type: [Boolean, Number, String],
     default: false
@@ -11469,8 +11476,8 @@ var props$I = {
     default: false
   }
 };
-function _extends$8() {
-  _extends$8 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$a() {
+  _extends$a = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -11481,13 +11488,13 @@ function _extends$8() {
     }
     return target;
   };
-  return _extends$8.apply(this, arguments);
+  return _extends$a.apply(this, arguments);
 }
 var {
-  n: n$L,
-  classes: classes$D
+  n: n$M,
+  classes: classes$E
 } = createNamespace("divider");
-function __render__$L(_ctx, _cache) {
+function __render__$M(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -11508,9 +11515,9 @@ function __render__$L(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$M = vue.defineComponent({
+var __sfc__$N = vue.defineComponent({
   name: "VarDivider",
-  props: props$I,
+  props: props$J,
   setup(props2, _ref) {
     var {
       slots
@@ -11531,13 +11538,13 @@ var __sfc__$M = vue.defineComponent({
         margin
       };
       if (isBoolean(inset) || inset === 0) {
-        return _extends$8({}, baseStyle);
+        return _extends$a({}, baseStyle);
       }
       var _inset = toNumber(inset);
       var absInsetWithUnit = Math.abs(_inset) + (inset + "").replace(_inset + "", "");
-      return vertical ? _extends$8({}, baseStyle, {
+      return vertical ? _extends$a({}, baseStyle, {
         height: "calc(80% - " + toSizeUnit(absInsetWithUnit) + ")"
-      }) : _extends$8({}, baseStyle, {
+      }) : _extends$a({}, baseStyle, {
         width: "calc(100% - " + toSizeUnit(absInsetWithUnit) + ")",
         left: _inset > 0 ? toSizeUnit(absInsetWithUnit) : toSizeUnit(0)
       });
@@ -11551,17 +11558,17 @@ var __sfc__$M = vue.defineComponent({
     vue.onUpdated(() => {
       checkHasText();
     });
-    return _extends$8({
-      n: n$L,
-      classes: classes$D
+    return _extends$a({
+      n: n$M,
+      classes: classes$E
     }, vue.toRefs(state), {
       style,
       isInset
     });
   }
 });
-__sfc__$M.render = __render__$L;
-const Divider = __sfc__$M;
+__sfc__$N.render = __render__$M;
+const Divider = __sfc__$N;
 Divider.install = function(app) {
   app.component(Divider.name, Divider);
 };
@@ -12832,8 +12839,8 @@ var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyS
 var createPopper = /* @__PURE__ */ popperGenerator({
   defaultModifiers
 });
-function _extends$7() {
-  _extends$7 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$9() {
+  _extends$9 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -12844,7 +12851,7 @@ function _extends$7() {
     }
     return target;
   };
-  return _extends$7.apply(this, arguments);
+  return _extends$9.apply(this, arguments);
 }
 function asyncGeneratorStep$9(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -13063,9 +13070,9 @@ function usePopover(options) {
       skidding,
       distance
     } = getPosition();
-    var modifiers = [_extends$7({}, flip$1, {
+    var modifiers = [_extends$9({}, flip$1, {
       enabled: show.value
-    }), _extends$7({}, offset$1, {
+    }), _extends$9({}, offset$1, {
       options: {
         offset: [skidding, distance]
       }
@@ -13131,7 +13138,7 @@ function placementValidator$1(alignment) {
 function typeValidator$4(type) {
   return ["default", "primary", "info", "success", "warning", "danger"].includes(type);
 }
-var props$H = {
+var props$I = {
   type: {
     type: String,
     default: "default",
@@ -13187,10 +13194,10 @@ var props$H = {
   "onUpdate:show": defineListenerProp()
 };
 var {
-  n: n$K,
-  classes: classes$C
+  n: n$L,
+  classes: classes$D
 } = createNamespace("tooltip");
-function __render__$K(_ctx, _cache) {
+function __render__$L(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -13269,9 +13276,9 @@ function __render__$K(_ctx, _cache) {
     /* CLASS, HYDRATE_EVENTS */
   );
 }
-var __sfc__$L = vue.defineComponent({
+var __sfc__$M = vue.defineComponent({
   name: "VarTooltip",
-  props: props$H,
+  props: props$I,
   setup(props2) {
     var {
       popover,
@@ -13299,8 +13306,8 @@ var __sfc__$L = vue.defineComponent({
       hostSize,
       show,
       zIndex,
-      n: n$K,
-      classes: classes$C,
+      n: n$L,
+      classes: classes$D,
       handleHostClick,
       handlePopoverClose,
       handleHostMouseenter,
@@ -13313,8 +13320,8 @@ var __sfc__$L = vue.defineComponent({
     };
   }
 });
-__sfc__$L.render = __render__$K;
-const Tooltip = __sfc__$L;
+__sfc__$M.render = __render__$L;
+const Tooltip = __sfc__$M;
 Tooltip.install = function(app) {
   app.component(Tooltip.name, Tooltip);
 };
@@ -13322,7 +13329,7 @@ var _TooltipComponent = Tooltip;
 function expandTriggerValidator(expandTrigger) {
   return ["click"].includes(expandTrigger);
 }
-var props$G = {
+var props$H = {
   expandTrigger: {
     type: String,
     validator: expandTriggerValidator
@@ -13335,8 +13342,8 @@ var props$G = {
     default: true
   }
 };
-function _extends$6() {
-  _extends$6 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$8() {
+  _extends$8 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -13347,16 +13354,16 @@ function _extends$6() {
     }
     return target;
   };
-  return _extends$6.apply(this, arguments);
+  return _extends$8.apply(this, arguments);
 }
 var {
-  n: n$J,
-  classes: classes$B
+  n: n$K,
+  classes: classes$C
 } = createNamespace("ellipsis");
-var _hoisted_1$j = {
+var _hoisted_1$k = {
   key: 0
 };
-function __render__$J(_ctx, _cache) {
+function __render__$K(_ctx, _cache) {
   var _component_var_tooltip = vue.resolveComponent("var-tooltip");
   return vue.openBlock(), vue.createBlock(
     _component_var_tooltip,
@@ -13366,7 +13373,7 @@ function __render__$J(_ctx, _cache) {
         var _ctx$tooltip;
         return [(_ctx$tooltip = _ctx.tooltip) != null && _ctx$tooltip.content ? (vue.openBlock(), vue.createElementBlock(
           "span",
-          _hoisted_1$j,
+          _hoisted_1$k,
           vue.toDisplayString(_ctx.tooltip.content),
           1
           /* TEXT */
@@ -13394,12 +13401,12 @@ function __render__$J(_ctx, _cache) {
     /* FULL_PROPS */
   );
 }
-var __sfc__$K = vue.defineComponent({
+var __sfc__$L = vue.defineComponent({
   name: "VarEllipsis",
   components: {
     VarTooltip: Tooltip
   },
-  props: props$G,
+  props: props$H,
   setup(props2) {
     var expanding = vue.ref(false);
     var rootStyles = vue.computed(() => {
@@ -13421,7 +13428,7 @@ var __sfc__$K = vue.defineComponent({
           sameWidth: true
         };
       }
-      return _extends$6({
+      return _extends$8({
         sameWidth: true
       }, props2.tooltip);
     });
@@ -13432,8 +13439,8 @@ var __sfc__$K = vue.defineComponent({
       expanding.value = !expanding.value;
     };
     return {
-      n: n$J,
-      classes: classes$B,
+      n: n$K,
+      classes: classes$C,
       tooltip: tooltip2,
       expanding,
       rootStyles,
@@ -13441,8 +13448,8 @@ var __sfc__$K = vue.defineComponent({
     };
   }
 });
-__sfc__$K.render = __render__$J;
-const Ellipsis = __sfc__$K;
+__sfc__$L.render = __render__$K;
+const Ellipsis = __sfc__$L;
 Ellipsis.install = function(app) {
   app.component(Ellipsis.name, Ellipsis);
 };
@@ -13456,7 +13463,7 @@ function directionValidator$3(direction) {
 function triggerValidator$1(trigger) {
   return ["click", "hover"].includes(trigger);
 }
-var props$F = {
+var props$G = {
   active: {
     type: Boolean,
     default: false
@@ -13548,21 +13555,19 @@ function _isSlot$2(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }
 var {
-  classes: classes$A,
-  n: n$I
+  classes: classes$B,
+  n: n$J
 } = createNamespace("fab");
 const Fab = vue.defineComponent({
   name: "VarFab",
   inheritAttrs: false,
-  props: props$F,
+  props: props$G,
   setup(props2, _ref) {
     var {
       slots,
       attrs
     } = _ref;
-    var isActive = useVModel(props2, "active", {
-      emit: (event, value) => call(props2["onUpdate:active"], value)
-    });
+    var isActive = useVModel(props2, "active");
     var host = vue.ref(null);
     var {
       disabled
@@ -13604,7 +13609,7 @@ const Fab = vue.defineComponent({
       }
       return vue.withDirectives(vue.createVNode(Button, {
         "var-fab-cover": true,
-        "class": n$I("trigger"),
+        "class": n$J("trigger"),
         "type": props2.type,
         "color": props2.color,
         "disabled": props2.disabled,
@@ -13613,11 +13618,11 @@ const Fab = vue.defineComponent({
       }, {
         default: () => [vue.createVNode(Icon, {
           "var-fab-cover": true,
-          "class": classes$A([isActive.value, n$I("trigger-active-icon"), n$I("trigger-inactive-icon")]),
+          "class": classes$B([isActive.value, n$J("trigger-active-icon"), n$J("trigger-inactive-icon")]),
           "name": isActive.value ? props2.activeIcon : props2.inactiveIcon,
           "size": isActive.value ? props2.inactiveIconSize : props2.activeIconSize,
           "transition": 200,
-          "animationClass": n$I("--trigger-icon-animation")
+          "animationClass": n$J("--trigger-icon-animation")
         }, null)]
       }), [[vue.vShow, props2.show]]);
     };
@@ -13626,7 +13631,7 @@ const Fab = vue.defineComponent({
       var _slots$default;
       var children = flatFragment((_slots$default = slots.default == null ? void 0 : slots.default()) != null ? _slots$default : []);
       return vue.createVNode("div", vue.mergeProps({
-        "class": classes$A(n$I(), n$I("--position-" + props2.position), n$I("--direction-" + props2.direction), [props2.fixed, n$I("--fixed"), n$I("--absolute")], [props2.safeArea, n$I("--safe-area")]),
+        "class": classes$B(n$J(), n$J("--position-" + props2.position), n$J("--direction-" + props2.direction), [props2.fixed, n$J("--fixed"), n$J("--absolute")], [props2.safeArea, n$J("--safe-area")]),
         "style": {
           zIndex: toNumber(props2.zIndex),
           top: toSizeUnit(props2.top),
@@ -13639,20 +13644,20 @@ const Fab = vue.defineComponent({
         "onMouseleave": () => handleMouse(false, children.length),
         "onMouseenter": () => handleMouse(true, children.length)
       }, attrs), [vue.createVNode(vue.Transition, {
-        "name": n$I("--active-transition")
+        "name": n$J("--active-transition")
       }, _isSlot$2(_slot = renderTrigger()) ? _slot : {
         default: () => [_slot]
       }), vue.createVNode(vue.Transition, {
-        "name": n$I("--actions-transition-" + props2.direction),
+        "name": n$J("--actions-transition-" + props2.direction),
         "onAfterEnter": props2.onOpened,
         "onAfterLeave": props2.onClosed
       }, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": n$I("actions"),
+          "class": n$J("actions"),
           "onClick": (e) => e.stopPropagation()
         }, [children.map((child) => {
           return vue.createVNode("div", {
-            "class": n$I("action")
+            "class": n$J("action")
           }, [child]);
         })]), [[vue.vShow, props2.show && isActive.value && children.length]])]
       })]);
@@ -13688,7 +13693,7 @@ var _FabComponent = Fab;
 function scrollToErrorValidator(status) {
   return ["start", "end"].includes(status);
 }
-var props$E = {
+var props$F = {
   disabled: {
     type: Boolean,
     default: false
@@ -13736,9 +13741,9 @@ function _asyncToGenerator$8(fn2) {
   };
 }
 var {
-  n: n$H
+  n: n$I
 } = createNamespace("form");
-function __render__$I(_ctx, _cache) {
+function __render__$J(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -13749,9 +13754,9 @@ function __render__$I(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$J = vue.defineComponent({
+var __sfc__$K = vue.defineComponent({
   name: "VarForm",
-  props: props$E,
+  props: props$F,
   setup(props2) {
     var disabled = vue.computed(() => props2.disabled);
     var readonly = vue.computed(() => props2.readonly);
@@ -13812,15 +13817,15 @@ var __sfc__$J = vue.defineComponent({
     };
     bindFormItems(formProvider);
     return {
-      n: n$H,
+      n: n$I,
       validate,
       reset,
       resetValidation
     };
   }
 });
-__sfc__$J.render = __render__$I;
-const Form = __sfc__$J;
+__sfc__$K.render = __render__$J;
+const Form = __sfc__$K;
 Form.install = function(app) {
   app.component(Form.name, Form);
 };
@@ -13830,7 +13835,7 @@ var _FormComponent = Form;
 function fitValidator(fit) {
   return ["fill", "contain", "cover", "none", "scale-down"].includes(fit);
 }
-var props$D = {
+var props$E = {
   src: {
     type: String
   },
@@ -13878,12 +13883,12 @@ var props$D = {
   onError: defineListenerProp()
 };
 var {
-  n: n$G,
-  classes: classes$z
+  n: n$H,
+  classes: classes$A
 } = createNamespace("image");
-var _hoisted_1$i = ["alt", "title", "lazy-error", "lazy-loading"];
+var _hoisted_1$j = ["alt", "title", "lazy-error", "lazy-loading"];
 var _hoisted_2$a = ["alt", "title", "src"];
-function __render__$H(_ctx, _cache) {
+function __render__$I(_ctx, _cache) {
   var _directive_lazy = vue.resolveDirective("lazy");
   var _directive_ripple = vue.resolveDirective("ripple");
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
@@ -13920,7 +13925,7 @@ function __render__$H(_ctx, _cache) {
       },
       null,
       46,
-      _hoisted_1$i
+      _hoisted_1$j
     )), [[_directive_lazy, _ctx.src]]) : (vue.openBlock(), vue.createElementBlock(
       "img",
       {
@@ -13952,13 +13957,13 @@ function __render__$H(_ctx, _cache) {
     disabled: !_ctx.ripple
   }]]);
 }
-var __sfc__$I = vue.defineComponent({
+var __sfc__$J = vue.defineComponent({
   name: "VarImage",
   directives: {
     Lazy: Lazy$1,
     Ripple: Ripple$1
   },
-  props: props$D,
+  props: props$E,
   setup(props2) {
     var handleLoad = (e) => {
       var el = e.currentTarget;
@@ -13985,8 +13990,8 @@ var __sfc__$I = vue.defineComponent({
       call(props2.onClick, e);
     };
     return {
-      n: n$G,
-      classes: classes$z,
+      n: n$H,
+      classes: classes$A,
       toSizeUnit,
       handleLoad,
       handleError,
@@ -13994,8 +13999,8 @@ var __sfc__$I = vue.defineComponent({
     };
   }
 });
-__sfc__$I.render = __render__$H;
-const Image$1 = __sfc__$I;
+__sfc__$J.render = __render__$I;
+const Image$1 = __sfc__$J;
 Image$1.install = function(app) {
   app.component(Image$1.name, Image$1);
 };
@@ -14013,7 +14018,7 @@ function useSwipeItems() {
     bindSwipeItems: bindChildren
   };
 }
-var props$C = {
+var props$D = {
   loop: {
     type: Boolean,
     default: true
@@ -14078,11 +14083,11 @@ function _asyncToGenerator$7(fn2) {
 var SWIPE_DELAY = 250;
 var SWIPE_DISTANCE = 20;
 var {
-  n: n$F,
-  classes: classes$y
+  n: n$G,
+  classes: classes$z
 } = createNamespace("swipe");
-var _hoisted_1$h = ["onClick"];
-function __render__$G(_ctx, _cache) {
+var _hoisted_1$i = ["onClick"];
+function __render__$H(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -14137,7 +14142,7 @@ function __render__$G(_ctx, _cache) {
             },
             null,
             14,
-            _hoisted_1$h
+            _hoisted_1$i
           );
         }),
         128
@@ -14150,9 +14155,9 @@ function __render__$G(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$H = vue.defineComponent({
+var __sfc__$I = vue.defineComponent({
   name: "VarSwipe",
-  props: props$C,
+  props: props$D,
   setup(props2) {
     var swipeEl = vue.ref(null);
     var size = vue.ref(0);
@@ -14433,10 +14438,10 @@ var __sfc__$H = vue.defineComponent({
     vue.onActivated(resize);
     vue.onDeactivated(stopAutoplay);
     vue.onUnmounted(stopAutoplay);
-    useEventListener(window, "resize", resize);
+    useEventListener(() => window, "resize", resize);
     return {
-      n: n$F,
-      classes: classes$y,
+      n: n$G,
+      classes: classes$z,
       length,
       index,
       swipeEl,
@@ -14454,8 +14459,8 @@ var __sfc__$H = vue.defineComponent({
     };
   }
 });
-__sfc__$H.render = __render__$G;
-const Swipe = __sfc__$H;
+__sfc__$I.render = __render__$H;
+const Swipe = __sfc__$I;
 Swipe.install = function(app) {
   app.component(Swipe.name, Swipe);
 };
@@ -14476,9 +14481,9 @@ function useSwipe() {
   };
 }
 var {
-  n: n$E
+  n: n$F
 } = createNamespace("swipe-item");
-function __render__$F(_ctx, _cache) {
+function __render__$G(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -14494,7 +14499,7 @@ function __render__$F(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$G = vue.defineComponent({
+var __sfc__$H = vue.defineComponent({
   name: "VarSwipeItem",
   setup() {
     var translate = vue.ref(0);
@@ -14516,21 +14521,21 @@ var __sfc__$G = vue.defineComponent({
     };
     bindSwipe(swipeItemProvider);
     return {
-      n: n$E,
+      n: n$F,
       size,
       vertical,
       translate
     };
   }
 });
-__sfc__$G.render = __render__$F;
-const SwipeItem = __sfc__$G;
+__sfc__$H.render = __render__$G;
+const SwipeItem = __sfc__$H;
 SwipeItem.install = function(app) {
   app.component(SwipeItem.name, SwipeItem);
 };
 var _SwipeItemComponent = SwipeItem;
-function _extends$5() {
-  _extends$5 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$7() {
+  _extends$7 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -14541,9 +14546,9 @@ function _extends$5() {
     }
     return target;
   };
-  return _extends$5.apply(this, arguments);
+  return _extends$7.apply(this, arguments);
 }
-var props$B = _extends$5({
+var props$C = _extends$7({
   show: {
     type: Boolean,
     default: false
@@ -14564,7 +14569,7 @@ var props$B = _extends$5({
     default: false
   },
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$C, ["loop", "indicator", "onChange"]), pickProps(props$19, [
+}, pickProps(props$D, ["loop", "indicator", "onChange"]), pickProps(props$1a, [
   "lockScroll",
   "teleport",
   "onOpen",
@@ -14575,15 +14580,15 @@ var props$B = _extends$5({
   "onRouteChange"
 ]));
 var {
-  n: n$D,
-  classes: classes$x
+  n: n$E,
+  classes: classes$y
 } = createNamespace("image-preview");
 var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
 var TAP_DELAY = 350;
 var ANIMATION_DURATION = 200;
-var _hoisted_1$g = ["src", "alt"];
-function __render__$E(_ctx, _cache) {
+var _hoisted_1$h = ["src", "alt"];
+function __render__$F(_ctx, _cache) {
   var _component_var_swipe_item = vue.resolveComponent("var-swipe-item");
   var _component_var_swipe = vue.resolveComponent("var-swipe");
   var _component_var_icon = vue.resolveComponent("var-icon");
@@ -14658,7 +14663,7 @@ function __render__$E(_ctx, _cache) {
                       },
                       null,
                       10,
-                      _hoisted_1$g
+                      _hoisted_1$h
                     )],
                     38
                     /* CLASS, STYLE, HYDRATE_EVENTS */
@@ -14725,7 +14730,7 @@ function __render__$E(_ctx, _cache) {
     ["class", "transition", "show", "lock-scroll", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]
   );
 }
-var __sfc__$F = vue.defineComponent({
+var __sfc__$G = vue.defineComponent({
   name: "VarImagePreview",
   components: {
     VarSwipe: Swipe,
@@ -14734,7 +14739,7 @@ var __sfc__$F = vue.defineComponent({
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$B,
+  props: props$C,
   setup(props2) {
     var popupShow = vue.ref(false);
     var initialIndex = vue.computed(() => {
@@ -14828,7 +14833,7 @@ var __sfc__$F = vue.defineComponent({
       var {
         naturalWidth,
         naturalHeight
-      } = target.querySelector("." + n$D("image"));
+      } = target.querySelector("." + n$E("image"));
       return {
         width: offsetWidth,
         height: offsetHeight,
@@ -14907,8 +14912,8 @@ var __sfc__$F = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$D,
-      classes: classes$x,
+      n: n$E,
+      classes: classes$y,
       initialIndex,
       popupShow,
       scale,
@@ -14924,10 +14929,10 @@ var __sfc__$F = vue.defineComponent({
     };
   }
 });
-__sfc__$F.render = __render__$E;
-const VarImagePreview = __sfc__$F;
-function _extends$4() {
-  _extends$4 = Object.assign ? Object.assign.bind() : function(target) {
+__sfc__$G.render = __render__$F;
+const VarImagePreview = __sfc__$G;
+function _extends$6() {
+  _extends$6 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -14938,7 +14943,7 @@ function _extends$4() {
     }
     return target;
   };
-  return _extends$4.apply(this, arguments);
+  return _extends$6.apply(this, arguments);
 }
 var singletonOptions$1;
 var defaultOptions$1 = {};
@@ -14947,16 +14952,16 @@ function normalizeOptions$1(options) {
     options = {};
   }
   if (isString(options)) {
-    return _extends$4({}, defaultOptions$1, {
+    return _extends$6({}, defaultOptions$1, {
       images: [options]
     });
   }
   if (isArray(options)) {
-    return _extends$4({}, defaultOptions$1, {
+    return _extends$6({}, defaultOptions$1, {
       images: options
     });
   }
-  return _extends$4({}, defaultOptions$1, options);
+  return _extends$6({}, defaultOptions$1, options);
 }
 function ImagePreview(options) {
   if (!inBrowser()) {
@@ -15009,7 +15014,7 @@ ImagePreview.install = function(app) {
 };
 ImagePreview.Component = VarImagePreview;
 var _ImagePreviewComponent = VarImagePreview;
-var props$A = {
+var props$B = {
   offsetTop: {
     type: [String, Number],
     default: 0
@@ -15058,10 +15063,10 @@ function _asyncToGenerator$6(fn2) {
   };
 }
 var {
-  n: n$C,
-  classes: classes$w
+  n: n$D,
+  classes: classes$x
 } = createNamespace("sticky");
-function __render__$D(_ctx, _cache) {
+function __render__$E(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -15096,9 +15101,9 @@ function __render__$D(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$E = vue.defineComponent({
+var __sfc__$F = vue.defineComponent({
   name: "VarSticky",
-  props: props$A,
+  props: props$B,
   setup(props2) {
     var stickyEl = vue.ref(null);
     var wrapperEl = vue.ref(null);
@@ -15193,11 +15198,11 @@ var __sfc__$E = vue.defineComponent({
     useMounted(addScrollListener);
     vue.onUnmounted(removeScrollListener);
     vue.onDeactivated(removeScrollListener);
-    useEventListener(window, "scroll", handleScroll);
-    useEventListener(window, "resize", resize);
+    useEventListener(() => window, "scroll", handleScroll);
+    useEventListener(() => window, "resize", resize);
     return {
-      n: n$C,
-      classes: classes$w,
+      n: n$D,
+      classes: classes$x,
       resize,
       stickyEl,
       wrapperEl,
@@ -15215,8 +15220,8 @@ var __sfc__$E = vue.defineComponent({
     };
   }
 });
-__sfc__$E.render = __render__$D;
-const Sticky = __sfc__$E;
+__sfc__$F.render = __render__$E;
+const Sticky = __sfc__$F;
 Sticky.install = function(app) {
   app.component(Sticky.name, Sticky);
 };
@@ -15249,16 +15254,16 @@ function useIndexBar() {
     bindIndexBar: bindParent
   };
 }
-var props$z = {
+var props$A = {
   index: {
     type: [Number, String]
   }
 };
 var {
-  n: n$B,
-  classes: classes$v
+  n: n$C,
+  classes: classes$w
 } = createNamespace("index-anchor");
-function __render__$C(_ctx, _cache) {
+function __render__$D(_ctx, _cache) {
   return vue.openBlock(), vue.createBlock(
     vue.resolveDynamicComponent(_ctx.sticky ? _ctx.n("$-sticky") : _ctx.Transition),
     {
@@ -15289,13 +15294,13 @@ function __render__$C(_ctx, _cache) {
     ["offset-top", "z-index", "disabled", "css-mode"]
   );
 }
-var __sfc__$D = vue.defineComponent({
+var __sfc__$E = vue.defineComponent({
   name: "VarIndexAnchor",
   components: {
     VarSticky: Sticky
   },
   inheritAttrs: false,
-  props: props$z,
+  props: props$A,
   setup(props2) {
     var {
       index,
@@ -15330,8 +15335,8 @@ var __sfc__$D = vue.defineComponent({
     };
     bindIndexBar(indexAnchorProvider);
     return {
-      n: n$B,
-      classes: classes$v,
+      n: n$C,
+      classes: classes$w,
       name,
       anchorEl,
       active,
@@ -15344,13 +15349,13 @@ var __sfc__$D = vue.defineComponent({
     };
   }
 });
-__sfc__$D.render = __render__$C;
-const IndexAnchor = __sfc__$D;
+__sfc__$E.render = __render__$D;
+const IndexAnchor = __sfc__$E;
 IndexAnchor.install = function(app) {
   app.component(IndexAnchor.name, IndexAnchor);
 };
 var _IndexAnchorComponent = IndexAnchor;
-var props$y = {
+var props$z = {
   sticky: {
     type: Boolean,
     default: true
@@ -15416,11 +15421,11 @@ function _asyncToGenerator$5(fn2) {
   };
 }
 var {
-  n: n$A,
-  classes: classes$u
+  n: n$B,
+  classes: classes$v
 } = createNamespace("index-bar");
-var _hoisted_1$f = ["onClick"];
-function __render__$B(_ctx, _cache) {
+var _hoisted_1$g = ["onClick"];
+function __render__$C(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -15455,7 +15460,7 @@ function __render__$B(_ctx, _cache) {
             },
             vue.toDisplayString(anchorName),
             15,
-            _hoisted_1$f
+            _hoisted_1$g
           );
         }),
         128
@@ -15468,9 +15473,9 @@ function __render__$B(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$C = vue.defineComponent({
+var __sfc__$D = vue.defineComponent({
   name: "VarIndexBar",
-  props: props$y,
+  props: props$z,
   setup(props2) {
     var {
       length,
@@ -15629,8 +15634,8 @@ var __sfc__$C = vue.defineComponent({
       isDeactivated = false;
     });
     return {
-      n: n$A,
-      classes: classes$u,
+      n: n$B,
+      classes: classes$v,
       barEl,
       active,
       zIndex,
@@ -15641,35 +15646,39 @@ var __sfc__$C = vue.defineComponent({
     };
   }
 });
-__sfc__$C.render = __render__$B;
-const IndexBar = __sfc__$C;
+__sfc__$D.render = __render__$C;
+const IndexBar = __sfc__$D;
 IndexBar.install = function(app) {
   app.component(IndexBar.name, IndexBar);
 };
 var _IndexBarComponent = IndexBar;
-function typeValidator$3(type) {
-  return ["text", "password", "number"].includes(type);
+function sizeValidator$1(size) {
+  return ["small", "normal"].includes(size);
 }
-var props$x = {
-  modelValue: {
-    type: String
-  },
-  modelModifiers: {
-    type: Object,
-    default: () => ({})
+function variantValidator(variant) {
+  return ["outlined", "standard"].includes(variant);
+}
+var props$y = {
+  value: {
+    type: null,
+    required: true
   },
-  type: {
+  id: {
     type: String,
-    default: "text",
-    validator: typeValidator$3
+    default: ""
   },
-  textarea: {
-    type: Boolean,
-    default: false
+  isFocus: {
+    type: Boolean
   },
-  rows: {
-    type: [String, Number],
-    default: 8
+  size: {
+    type: String,
+    default: "normal",
+    validator: sizeValidator$1
+  },
+  variant: {
+    type: String,
+    default: "standard",
+    validator: variantValidator
   },
   placeholder: {
     type: String
@@ -15691,14 +15700,13 @@ var props$x = {
   blurColor: {
     type: String
   },
-  maxlength: {
-    type: [String, Number]
+  errorMessage: {
+    type: String
   },
-  disabled: {
-    type: Boolean,
-    default: false
+  formDisabled: {
+    type: Boolean
   },
-  readonly: {
+  disabled: {
     type: Boolean,
     default: false
   },
@@ -15706,44 +15714,36 @@ var props$x = {
     type: Boolean,
     default: false
   },
-  resize: {
+  textarea: {
     type: Boolean,
     default: false
   },
-  autofocus: {
+  cursor: {
+    type: String
+  },
+  composing: {
     type: Boolean,
     default: false
   },
-  validateTrigger: {
-    type: Array,
-    default: () => ["onInput", "onClear"]
-  },
-  rules: {
-    type: Array
+  alwaysCustomPlaceholder: {
+    type: Boolean,
+    default: true
   },
-  onFocus: defineListenerProp(),
-  onBlur: defineListenerProp(),
   onClick: defineListenerProp(),
-  onClear: defineListenerProp(),
-  onInput: defineListenerProp(),
-  onChange: defineListenerProp(),
-  "onUpdate:modelValue": defineListenerProp()
+  onClear: defineListenerProp()
 };
 var {
-  n: n$z,
-  classes: classes$t
-} = createNamespace("input");
-var _hoisted_1$e = ["id", "disabled", "type", "value", "maxlength", "rows"];
-var _hoisted_2$9 = ["id", "disabled", "type", "value", "maxlength"];
-var _hoisted_3$7 = ["for"];
-function __render__$A(_ctx, _cache) {
+  n: n$A,
+  classes: classes$u
+} = createNamespace("field-decorator");
+var _hoisted_1$f = ["for"];
+function __render__$B(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
-  var _component_var_form_details = vue.resolveComponent("var-form-details");
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.disabled, _ctx.n("--disabled")])),
-      onClick: _cache[14] || (_cache[14] = function() {
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n("--" + _ctx.variant), [_ctx.size === "small", _ctx.n("--small")], [_ctx.disabled, _ctx.n("--disabled")])),
+      onClick: _cache[0] || (_cache[0] = function() {
         return _ctx.handleClick && _ctx.handleClick(...arguments);
       })
     },
@@ -15752,13 +15752,15 @@ function __render__$A(_ctx, _cache) {
       {
         class: vue.normalizeClass(_ctx.classes(_ctx.n("controller"), [_ctx.isFocus, _ctx.n("--focus")], [_ctx.errorMessage, _ctx.n("--error")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")])),
         style: vue.normalizeStyle({
-          color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : void 0
+          color: _ctx.color,
+          cursor: _ctx.cursor
         })
       },
       [vue.createElementVNode(
         "div",
         {
-          class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [!_ctx.hint, _ctx.n("--non-hint")]))
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [!_ctx.hint, _ctx.n("--non-hint")])),
+          ref: "prependIconEl"
         },
         [vue.renderSlot(_ctx.$slots, "prepend-icon")],
         2
@@ -15766,34 +15768,350 @@ function __render__$A(_ctx, _cache) {
       ), vue.createElementVNode(
         "div",
         {
-          class: vue.normalizeClass(_ctx.classes(_ctx.n("wrap"), [!_ctx.hint, _ctx.n("--non-hint")]))
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("wrap"), [!_ctx.hint, _ctx.n("--wrap-non-hint")]))
         },
-        [_ctx.type === "password" ? (vue.openBlock(), vue.createElementBlock(
+        [vue.renderSlot(_ctx.$slots, "default"), _ctx.hint || _ctx.alwaysCustomPlaceholder ? (vue.openBlock(), vue.createElementBlock(
+          "label",
+          {
+            key: 0,
+            class: vue.normalizeClass(_ctx.classes(_ctx.n("placeholder"), _ctx.n("$--ellipsis"), [_ctx.textarea, _ctx.n("placeholder-textarea")], [_ctx.isFocus, _ctx.n("--focus")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")], [_ctx.errorMessage, _ctx.n("--error")], [!_ctx.hint, _ctx.n("--placeholder-non-hint")], _ctx.computePlaceholderState())),
+            style: vue.normalizeStyle({
+              color: _ctx.color,
+              transform: _ctx.placeholderTransform
+            }),
+            for: _ctx.id
+          },
+          vue.toDisplayString(_ctx.placeholder),
+          15,
+          _hoisted_1$f
+        )) : vue.createCommentVNode("v-if", true)],
+        2
+        /* CLASS */
+      ), vue.createElementVNode(
+        "div",
+        {
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [!_ctx.hint, _ctx.n("--non-hint")]))
+        },
+        [vue.renderSlot(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable && !_ctx.isEmpty(_ctx.value) ? (vue.openBlock(), vue.createBlock(
+          _component_var_icon,
+          {
+            key: 0,
+            class: vue.normalizeClass(_ctx.n("clear-icon")),
+            "var-field-decorator-cover": "",
+            name: "close-circle",
+            onClick: _ctx.handleClear
+          },
+          null,
+          8,
+          ["class", "onClick"]
+        )) : vue.createCommentVNode("v-if", true)])],
+        2
+        /* CLASS */
+      )],
+      6
+      /* CLASS, STYLE */
+    ), _ctx.line ? (vue.openBlock(), vue.createElementBlock(
+      vue.Fragment,
+      {
+        key: 0
+      },
+      [_ctx.variant === "outlined" ? (vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("line"), [_ctx.isFocus, _ctx.n("--line-focus")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")]))
+        },
+        [!(_ctx.formDisabled || _ctx.disabled) ? (vue.openBlock(), vue.createElementBlock(
+          vue.Fragment,
+          {
+            key: 0
+          },
+          [vue.createElementVNode(
+            "div",
+            {
+              class: vue.normalizeClass(_ctx.classes(_ctx.n("line-start"), [_ctx.errorMessage, _ctx.n("--line-error")])),
+              style: vue.normalizeStyle({
+                borderColor: _ctx.color
+              })
+            },
+            null,
+            6
+            /* CLASS, STYLE */
+          ), vue.createElementVNode(
+            "div",
+            {
+              class: vue.normalizeClass(_ctx.classes(_ctx.n("line-notch"), [_ctx.hint && (!_ctx.isEmpty(_ctx.value) || _ctx.isFocus), _ctx.n("line-notch--hint")], [_ctx.errorMessage, _ctx.n("--line-error")])),
+              style: vue.normalizeStyle({
+                borderColor: _ctx.color
+              })
+            },
+            [vue.createElementVNode(
+              "div",
+              {
+                class: vue.normalizeClass(_ctx.classes(_ctx.n("line-placeholder"), _ctx.n("$--ellipsis")))
+              },
+              vue.toDisplayString(_ctx.placeholder),
+              3
+              /* TEXT, CLASS */
+            )],
+            6
+            /* CLASS, STYLE */
+          ), vue.createElementVNode(
+            "div",
+            {
+              class: vue.normalizeClass(_ctx.classes(_ctx.n("line-end"), [_ctx.errorMessage, _ctx.n("--line-error")])),
+              style: vue.normalizeStyle({
+                borderColor: _ctx.color
+              })
+            },
+            null,
+            6
+            /* CLASS, STYLE */
+          )],
+          64
+          /* STABLE_FRAGMENT */
+        )) : vue.createCommentVNode("v-if", true)],
+        2
+        /* CLASS */
+      )) : (vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          key: 1,
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("line"), [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")], [_ctx.errorMessage, _ctx.n("--line-error")])),
+          style: vue.normalizeStyle({
+            background: !_ctx.errorMessage ? _ctx.blurColor : void 0
+          })
+        },
+        [vue.createElementVNode(
+          "div",
+          {
+            class: vue.normalizeClass(_ctx.classes(_ctx.n("dot"), [_ctx.isFocus, _ctx.n("--line-focus")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")], [_ctx.errorMessage, _ctx.n("--line-error")])),
+            style: vue.normalizeStyle({
+              background: !_ctx.errorMessage ? _ctx.focusColor : void 0
+            })
+          },
+          null,
+          6
+          /* CLASS, STYLE */
+        )],
+        6
+        /* CLASS, STYLE */
+      ))],
+      2112
+      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+    )) : vue.createCommentVNode("v-if", true)],
+    2
+    /* CLASS */
+  );
+}
+var __sfc__$C = vue.defineComponent({
+  name: "VarFieldDecorator",
+  components: {
+    VarIcon: Icon
+  },
+  props: props$y,
+  setup(props2) {
+    var prependIconEl = vue.ref(null);
+    var placeholderTransform = vue.ref("");
+    var color = vue.computed(() => !props2.errorMessage ? props2.isFocus ? props2.focusColor : props2.blurColor : void 0);
+    var computePlaceholderState = () => {
+      var {
+        hint,
+        value,
+        isFocus,
+        composing
+      } = props2;
+      if (!hint && (!isEmpty(value) || composing)) {
+        return n$A("--placeholder-hidden");
+      }
+      if (hint && (!isEmpty(value) || isFocus)) {
+        return n$A("--placeholder-hint");
+      }
+    };
+    var handleClear = (e) => {
+      call(props2.onClear, e);
+    };
+    var handleClick = (e) => {
+      call(props2.onClick, e);
+    };
+    vue.watchEffect(() => {
+      var {
+        hint,
+        value,
+        isFocus,
+        variant
+      } = props2;
+      if (!prependIconEl.value) {
+        return;
+      }
+      if (hint && (!isEmpty(value) || isFocus)) {
+        var _window$getComputedSt;
+        var prependIconWidth = ((_window$getComputedSt = window.getComputedStyle(prependIconEl.value)) == null ? void 0 : _window$getComputedSt.width) || 0;
+        placeholderTransform.value = "translate(-" + prependIconWidth + ", " + (variant === "outlined" ? "-50%" : 0) + ")";
+        return;
+      }
+      placeholderTransform.value = "";
+    });
+    return {
+      prependIconEl,
+      placeholderTransform,
+      color,
+      computePlaceholderState,
+      n: n$A,
+      classes: classes$u,
+      isEmpty,
+      handleClear,
+      handleClick
+    };
+  }
+});
+__sfc__$C.render = __render__$B;
+const VarFieldDecorator = __sfc__$C;
+function _extends$5() {
+  _extends$5 = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$5.apply(this, arguments);
+}
+function typeValidator$3(type) {
+  return ["text", "password", "number"].includes(type);
+}
+var props$x = _extends$5({
+  modelValue: {
+    type: String
+  },
+  modelModifiers: {
+    type: Object,
+    default: () => ({})
+  },
+  type: {
+    type: String,
+    default: "text",
+    validator: typeValidator$3
+  },
+  textarea: {
+    type: Boolean,
+    default: false
+  },
+  rows: {
+    type: [String, Number],
+    default: 8
+  },
+  maxlength: {
+    type: [String, Number]
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  resize: {
+    type: Boolean,
+    default: false
+  },
+  autofocus: {
+    type: Boolean,
+    default: false
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ["onInput", "onClear"]
+  },
+  rules: {
+    type: Array
+  },
+  onFocus: defineListenerProp(),
+  onBlur: defineListenerProp(),
+  onInput: defineListenerProp(),
+  onChange: defineListenerProp(),
+  onClear: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+}, pickProps(props$y, ["size", "variant", "placeholder", "line", "hint", "textColor", "focusColor", "blurColor", "disabled", "clearable", "onClick"]));
+var {
+  n: n$z,
+  classes: classes$t
+} = createNamespace("input");
+var _hoisted_1$e = ["placeholder"];
+var _hoisted_2$9 = ["id", "disabled", "type", "value", "placeholder", "maxlength", "rows"];
+var _hoisted_3$7 = ["id", "disabled", "type", "value", "placeholder", "maxlength"];
+function __render__$A(_ctx, _cache) {
+  var _component_var_field_decorator = vue.resolveComponent("var-field-decorator");
+  var _component_var_form_details = vue.resolveComponent("var-form-details");
+  return vue.openBlock(), vue.createElementBlock(
+    "div",
+    {
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
+      onMousedown: _cache[15] || (_cache[15] = function() {
+        return _ctx.handleMousedown && _ctx.handleMousedown(...arguments);
+      })
+    },
+    [vue.createVNode(
+      _component_var_field_decorator,
+      vue.normalizeProps(vue.guardReactiveProps({
+        value: _ctx.modelValue,
+        id: _ctx.id,
+        size: _ctx.size,
+        variant: _ctx.variant,
+        placeholder: _ctx.placeholder,
+        line: _ctx.line,
+        hint: _ctx.hint,
+        textColor: _ctx.textColor,
+        focusColor: _ctx.focusColor,
+        blurColor: _ctx.blurColor,
+        isFocus: _ctx.isFocus,
+        errorMessage: _ctx.errorMessage,
+        formDisabled: _ctx.formDisabled,
+        disabled: _ctx.disabled,
+        clearable: _ctx.clearable,
+        textarea: _ctx.textarea,
+        cursor: _ctx.cursor,
+        composing: _ctx.isComposing,
+        alwaysCustomPlaceholder: false,
+        onClick: _ctx.handleClick,
+        onClear: _ctx.handleClear
+      })),
+      {
+        "prepend-icon": vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "prepend-icon")]),
+        "append-icon": vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "append-icon")]),
+        default: vue.withCtx(() => [_ctx.type === "password" ? (vue.openBlock(), vue.createElementBlock(
           "input",
           {
             key: 0,
-            class: vue.normalizeClass(_ctx.n("autocomplete"))
+            class: vue.normalizeClass(_ctx.n("autocomplete")),
+            placeholder: !_ctx.hint ? _ctx.placeholder : void 0,
+            style: vue.normalizeStyle({
+              "--input-placeholder-color": _ctx.placeholderColor
+            })
           },
           null,
-          2
-          /* CLASS */
+          14,
+          _hoisted_1$e
         )) : vue.createCommentVNode("v-if", true), _ctx.textarea ? (vue.openBlock(), vue.createElementBlock(
           "textarea",
           {
             key: 1,
-            class: vue.normalizeClass(_ctx.classes(_ctx.n("input"), _ctx.n("--textarea"), [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")], [_ctx.errorMessage, _ctx.n("--caret-error")])),
+            class: vue.normalizeClass(_ctx.classes(_ctx.n("input"), _ctx.n("--textarea"), [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")], [_ctx.errorMessage, _ctx.n("--error")], [_ctx.errorMessage, _ctx.n("--caret-error")])),
             ref: "el",
             autocomplete: "new-password",
             id: _ctx.id,
             disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
             type: _ctx.type,
             value: _ctx.modelValue,
+            placeholder: !_ctx.hint ? _ctx.placeholder : void 0,
             maxlength: _ctx.maxlength,
             rows: _ctx.rows,
             style: vue.normalizeStyle({
-              color: _ctx.textColor,
+              color: !_ctx.errorMessage ? _ctx.textColor : void 0,
               caretColor: !_ctx.errorMessage ? _ctx.focusColor : void 0,
-              resize: _ctx.resize ? "vertical" : "none"
+              resize: _ctx.resize ? "vertical" : "none",
+              "--input-placeholder-color": _ctx.placeholderColor
             }),
             onFocus: _cache[0] || (_cache[0] = function() {
               return _ctx.handleFocus && _ctx.handleFocus(...arguments);
@@ -15817,24 +16135,26 @@ function __render__$A(_ctx, _cache) {
               return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...arguments);
             })
           },
-          "\n        ",
+          "\n      ",
           46,
-          _hoisted_1$e
+          _hoisted_2$9
         )) : (vue.openBlock(), vue.createElementBlock(
           "input",
           {
             key: 2,
-            class: vue.normalizeClass(_ctx.classes(_ctx.n("input"), [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")], [_ctx.errorMessage, _ctx.n("--caret-error")])),
+            class: vue.normalizeClass(_ctx.classes(_ctx.n("input"), [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")], [_ctx.errorMessage, _ctx.n("--error")], [_ctx.errorMessage, _ctx.n("--caret-error")])),
             ref: "el",
             autocomplete: "new-password",
             id: _ctx.id,
             disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
             type: _ctx.type,
             value: _ctx.modelValue,
+            placeholder: !_ctx.hint ? _ctx.placeholder : void 0,
             maxlength: _ctx.maxlength,
             style: vue.normalizeStyle({
-              color: _ctx.textColor,
-              caretColor: !_ctx.errorMessage ? _ctx.focusColor : void 0
+              color: !_ctx.errorMessage ? _ctx.textColor : void 0,
+              caretColor: !_ctx.errorMessage ? _ctx.focusColor : void 0,
+              "--input-placeholder-color": _ctx.placeholderColor
             }),
             onFocus: _cache[7] || (_cache[7] = function() {
               return _ctx.handleFocus && _ctx.handleFocus(...arguments);
@@ -15854,93 +16174,40 @@ function __render__$A(_ctx, _cache) {
             onCompositionstart: _cache[12] || (_cache[12] = function() {
               return _ctx.handleCompositionStart && _ctx.handleCompositionStart(...arguments);
             }),
-            onCompositionend: _cache[13] || (_cache[13] = function() {
-              return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...arguments);
-            })
-          },
-          null,
-          46,
-          _hoisted_2$9
-        )), vue.createElementVNode(
-          "label",
-          {
-            class: vue.normalizeClass(_ctx.classes(_ctx.n("$--ellipsis"), [_ctx.isFocus, _ctx.n("--focus")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")], [_ctx.errorMessage, _ctx.n("--error")], [_ctx.textarea, _ctx.n("textarea-placeholder"), _ctx.n("placeholder")], _ctx.computePlaceholderState(), [!_ctx.hint, _ctx.n("--placeholder-non-hint")])),
-            style: vue.normalizeStyle({
-              color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : void 0
-            }),
-            for: _ctx.id
-          },
-          vue.toDisplayString(_ctx.placeholder),
-          15,
-          _hoisted_3$7
-        )],
-        2
-        /* CLASS */
-      ), vue.createElementVNode(
-        "div",
-        {
-          class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [!_ctx.hint, _ctx.n("--non-hint")]))
-        },
-        [vue.renderSlot(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable && !_ctx.isEmpty(_ctx.modelValue) ? (vue.openBlock(), vue.createBlock(
-          _component_var_icon,
-          {
-            key: 0,
-            class: vue.normalizeClass(_ctx.n("clear-icon")),
-            "var-input-cover": "",
-            name: "close-circle",
-            onClick: _ctx.handleClear
+            onCompositionend: _cache[13] || (_cache[13] = function() {
+              return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...arguments);
+            })
           },
           null,
-          8,
-          ["class", "onClick"]
-        )) : vue.createCommentVNode("v-if", true)])],
-        2
-        /* CLASS */
-      )],
-      6
-      /* CLASS, STYLE */
-    ), _ctx.line ? (vue.openBlock(), vue.createElementBlock(
-      "div",
-      {
-        key: 0,
-        class: vue.normalizeClass(_ctx.classes(_ctx.n("line"), [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")], [_ctx.errorMessage, _ctx.n("--line-error")])),
-        style: vue.normalizeStyle({
-          background: !_ctx.errorMessage ? _ctx.blurColor : void 0
-        })
+          46,
+          _hoisted_3$7
+        ))]),
+        _: 3
+        /* FORWARDED */
       },
-      [vue.createElementVNode(
-        "div",
-        {
-          class: vue.normalizeClass(_ctx.classes(_ctx.n("dot"), [_ctx.isFocus, _ctx.n("--spread")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")], [_ctx.errorMessage, _ctx.n("--line-error")])),
-          style: vue.normalizeStyle({
-            background: !_ctx.errorMessage ? _ctx.focusColor : void 0
-          })
-        },
-        null,
-        6
-        /* CLASS, STYLE */
-      )],
-      6
-      /* CLASS, STYLE */
-    )) : vue.createCommentVNode("v-if", true), vue.createVNode(
+      16
+      /* FULL_PROPS */
+    ), vue.createVNode(
       _component_var_form_details,
       {
         "error-message": _ctx.errorMessage,
-        "extra-message": _ctx.maxlengthText
+        "extra-message": _ctx.maxlengthText,
+        onMousedown: _cache[14] || (_cache[14] = vue.withModifiers(() => {
+        }, ["stop"]))
       },
       null,
       8,
       ["error-message", "extra-message"]
     )],
-    2
-    /* CLASS */
+    34
+    /* CLASS, HYDRATE_EVENTS */
   );
 }
 var __sfc__$B = vue.defineComponent({
   name: "VarInput",
   components: {
-    VarIcon: Icon,
-    VarFormDetails: FormDetails
+    VarFormDetails: FormDetails,
+    VarFieldDecorator
   },
   props: props$x,
   setup(props2) {
@@ -15967,6 +16234,24 @@ var __sfc__$B = vue.defineComponent({
       }
       return String(modelValue).length + "/" + maxlength;
     });
+    var cursor = vue.computed(() => props2.disabled || props2.readonly ? "" : "text");
+    var placeholderColor = vue.computed(() => {
+      var {
+        hint,
+        blurColor,
+        focusColor
+      } = props2;
+      if (hint) {
+        return void 0;
+      }
+      if (errorMessage.value) {
+        return "var(--field-decorator-error-color)";
+      }
+      if (isFocus.value) {
+        return focusColor || "var(--field-decorator-focus-color)";
+      }
+      return blurColor || "var(--field-decorator-blur-color)";
+    });
     var {
       bindForm,
       form
@@ -15988,18 +16273,6 @@ var __sfc__$B = vue.defineComponent({
         vt(validateTrigger, trigger, rules, modelValue);
       });
     };
-    var computePlaceholderState = () => {
-      var {
-        hint,
-        modelValue
-      } = props2;
-      if (!hint && (!isEmpty(modelValue) || isComposing.value)) {
-        return n$z("--placeholder-hidden");
-      }
-      if (hint && (!isEmpty(modelValue) || isFocus.value)) {
-        return n$z("--placeholder-hint");
-      }
-    };
     var handleFocus = (e) => {
       isFocus.value = true;
       call(props2.onFocus, e);
@@ -16092,6 +16365,16 @@ var __sfc__$B = vue.defineComponent({
       }
       e.stopPropagation();
     };
+    function handleMousedown(e) {
+      var {
+        disabled
+      } = props2;
+      if (form != null && form.disabled.value || disabled || e.target === el.value) {
+        return;
+      }
+      focus();
+      e.preventDefault();
+    }
     var reset = () => {
       call(props2["onUpdate:modelValue"], "");
       resetValidation();
@@ -16121,14 +16404,15 @@ var __sfc__$B = vue.defineComponent({
       isFocus,
       isComposing,
       errorMessage,
+      placeholderColor,
       type,
+      cursor,
       maxlengthText,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
       n: n$z,
       classes: classes$t,
       isEmpty,
-      computePlaceholderState,
       handleFocus,
       handleBlur,
       handleInput,
@@ -16138,6 +16422,7 @@ var __sfc__$B = vue.defineComponent({
       handleTouchstart,
       handleCompositionStart,
       handleCompositionEnd,
+      handleMousedown,
       validate,
       resetValidation,
       reset,
@@ -16855,7 +17140,6 @@ function __render__$w(_ctx, _cache) {
     {
       class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.optionSelected, _ctx.n("--selected-color")])),
       style: vue.normalizeStyle({
-        width: _ctx.wrapWidth,
         color: _ctx.optionSelected ? _ctx.focusColor : void 0
       }),
       onClick: _cache[2] || (_cache[2] = function() {
@@ -16924,7 +17208,6 @@ var __sfc__$x = vue.defineComponent({
       bindSelect
     } = useSelect();
     var {
-      wrapWidth,
       multiple,
       focusColor,
       onSelect,
@@ -16950,7 +17233,6 @@ var __sfc__$x = vue.defineComponent({
       n: n$u,
       classes: classes$o,
       optionSelected,
-      wrapWidth,
       multiple,
       focusColor,
       handleClick,
@@ -17578,8 +17860,8 @@ Paper.install = function(app) {
   app.component(Paper.name, Paper);
 };
 var _PaperComponent = Paper;
-function _extends$3() {
-  _extends$3 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$4() {
+  _extends$4 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -17590,9 +17872,9 @@ function _extends$3() {
     }
     return target;
   };
-  return _extends$3.apply(this, arguments);
+  return _extends$4.apply(this, arguments);
 }
-var props$n = _extends$3({
+var props$n = _extends$4({
   columns: {
     type: Array,
     default: () => []
@@ -17648,7 +17930,7 @@ var props$n = _extends$3({
   onChange: defineListenerProp(),
   onConfirm: defineListenerProp(),
   onCancel: defineListenerProp()
-}, pickProps(props$19, ["show", "onUpdate:show", "closeOnClickOverlay", "teleport", "onOpen", "onClose", "onOpened", "onClosed", "onClickOverlay", "onRouteChange"]));
+}, pickProps(props$1a, ["show", "onUpdate:show", "closeOnClickOverlay", "teleport", "onOpen", "onClose", "onOpened", "onClosed", "onClickOverlay", "onRouteChange"]));
 var {
   n: n$q,
   classes: classes$l
@@ -19855,16 +20137,27 @@ Row.install = function(app) {
   app.component(Row.name, Row);
 };
 var _RowComponent = Row;
+function _extends$3() {
+  _extends$3 = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$3.apply(this, arguments);
+}
 function textAlignValidator(textAlign) {
   return ["left", "right", "center"].includes(textAlign);
 }
-var props$f = {
+var props$f = _extends$3({
   modelValue: {
     default: void 0
   },
-  placeholder: {
-    type: String
-  },
   multiple: {
     type: Boolean,
     default: false
@@ -19877,35 +20170,10 @@ var props$f = {
     type: Boolean,
     default: false
   },
-  line: {
-    type: Boolean,
-    default: true
-  },
-  hint: {
-    type: Boolean,
-    default: true
-  },
-  textColor: {
-    type: String
-  },
-  focusColor: {
-    type: String
-  },
-  blurColor: {
-    type: String
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
   readonly: {
     type: Boolean,
     default: false
   },
-  clearable: {
-    type: Boolean,
-    default: false
-  },
   separator: {
     type: String,
     default: ","
@@ -19924,12 +20192,11 @@ var props$f = {
   },
   onFocus: defineListenerProp(),
   onBlur: defineListenerProp(),
-  onClick: defineListenerProp(),
-  onClear: defineListenerProp(),
   onClose: defineListenerProp(),
   onChange: defineListenerProp(),
+  onClear: defineListenerProp(),
   "onUpdate:modelValue": defineListenerProp()
-};
+}, pickProps(props$y, ["size", "variant", "placeholder", "line", "hint", "textColor", "focusColor", "blurColor", "disabled", "clearable", "onClick"]));
 var {
   n: n$h,
   classes: classes$d
@@ -19940,64 +20207,66 @@ var _hoisted_1$4 = {
 function __render__$f(_ctx, _cache) {
   var _component_var_chip = vue.resolveComponent("var-chip");
   var _component_var_icon = vue.resolveComponent("var-icon");
+  var _component_var_field_decorator = vue.resolveComponent("var-field-decorator");
   var _component_var_menu = vue.resolveComponent("var-menu");
   var _component_var_form_details = vue.resolveComponent("var-form-details");
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")])),
+      class: vue.normalizeClass(_ctx.n()),
       onClick: _cache[3] || (_cache[3] = function() {
-        return _ctx.handleClick && _ctx.handleClick(...arguments);
+        return _ctx.handleFocus && _ctx.handleFocus(...arguments);
       })
     },
-    [vue.createElementVNode(
-      "div",
+    [vue.createVNode(
+      _component_var_menu,
       {
-        class: vue.normalizeClass(_ctx.classes(_ctx.n("controller"), [_ctx.isFocus, _ctx.n("--focus")], [_ctx.errorMessage, _ctx.n("--error")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")])),
-        style: vue.normalizeStyle({
-          color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : void 0
-        })
+        class: vue.normalizeClass(_ctx.n("menu")),
+        "var-select-cover": "",
+        "same-width": "",
+        "offset-y": _ctx.offsetY,
+        disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled,
+        placement: _ctx.placement,
+        "default-style": false,
+        show: _ctx.isFocus,
+        "onUpdate:show": _cache[1] || (_cache[1] = ($event) => _ctx.isFocus = $event),
+        onClose: _ctx.handleBlur
       },
-      [vue.createElementVNode(
-        "div",
-        {
-          class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [!_ctx.hint, _ctx.n("--non-hint")]))
-        },
-        [vue.renderSlot(_ctx.$slots, "prepend-icon")],
-        2
-        /* CLASS */
-      ), vue.createElementVNode(
-        "div",
-        {
-          class: vue.normalizeClass(_ctx.classes(_ctx.n("wrap"), [!_ctx.hint, _ctx.n("--non-hint")])),
-          ref: "wrapEl",
-          onClick: _cache[2] || (_cache[2] = function() {
-            return _ctx.handleFocus && _ctx.handleFocus(...arguments);
-          })
-        },
-        [vue.createVNode(
-          _component_var_menu,
+      {
+        menu: vue.withCtx(() => [vue.createElementVNode(
+          "div",
           {
-            "var-select-cover": "",
-            class: vue.normalizeClass(_ctx.classes(_ctx.n("menu"))),
-            "offset-y": _ctx.offsetY,
-            disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled,
-            "default-style": false,
-            show: _ctx.isFocus,
-            "onUpdate:show": _cache[1] || (_cache[1] = ($event) => _ctx.isFocus = $event),
-            onClose: _ctx.handleBlur
+            ref: "menuEl",
+            class: vue.normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("scroller-" + _ctx.variant), [!_ctx.hint, _ctx.n("scroller-non-hint")], _ctx.n("$-elevation--3")))
           },
+          [vue.renderSlot(_ctx.$slots, "default")],
+          2
+          /* CLASS */
+        )]),
+        default: vue.withCtx(() => [vue.createVNode(
+          _component_var_field_decorator,
+          vue.normalizeProps(vue.guardReactiveProps({
+            value: _ctx.modelValue,
+            size: _ctx.size,
+            variant: _ctx.variant,
+            placeholder: _ctx.placeholder,
+            line: _ctx.line,
+            hint: _ctx.hint,
+            textColor: _ctx.textColor,
+            focusColor: _ctx.focusColor,
+            blurColor: _ctx.blurColor,
+            isFocus: _ctx.isFocus,
+            errorMessage: _ctx.errorMessage,
+            formDisabled: _ctx.formDisabled,
+            disabled: _ctx.disabled,
+            clearable: _ctx.clearable,
+            cursor: _ctx.cursor,
+            onClick: _ctx.handleClick,
+            onClear: _ctx.handleClear
+          })),
           {
-            menu: vue.withCtx(() => [vue.createElementVNode(
-              "div",
-              {
-                ref: "menuEl",
-                class: vue.normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("$-elevation--3")))
-              },
-              [vue.renderSlot(_ctx.$slots, "default")],
-              2
-              /* CLASS */
-            )]),
+            "prepend-icon": vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "prepend-icon")]),
+            "append-icon": vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "append-icon")]),
             default: vue.withCtx(() => [vue.createElementVNode(
               "div",
               {
@@ -20097,76 +20366,24 @@ function __render__$f(_ctx, _cache) {
               )])],
               6
               /* CLASS, STYLE */
-            ), vue.createElementVNode(
-              "label",
-              {
-                class: vue.normalizeClass(_ctx.classes(_ctx.n("placeholder"), _ctx.n("$--ellipsis"), [_ctx.isFocus, _ctx.n("--focus")], [_ctx.errorMessage, _ctx.n("--error")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")], _ctx.computePlaceholderState(), [!_ctx.hint, _ctx.n("--placeholder-non-hint")])),
-                style: vue.normalizeStyle({
-                  color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : void 0
-                })
-              },
-              vue.toDisplayString(_ctx.placeholder),
-              7
-              /* TEXT, CLASS, STYLE */
             )]),
             _: 3
             /* FORWARDED */
           },
-          8,
-          ["class", "offset-y", "disabled", "show", "onClose"]
-        )],
-        2
-        /* CLASS */
-      ), vue.createElementVNode(
-        "div",
-        {
-          class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [!_ctx.hint, _ctx.n("--non-hint")]))
-        },
-        [vue.renderSlot(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable ? (vue.openBlock(), vue.createBlock(
-          _component_var_icon,
-          {
-            key: 0,
-            class: vue.normalizeClass(_ctx.n("clear-icon")),
-            name: "close-circle",
-            size: "14px",
-            onClick: _ctx.handleClear
-          },
-          null,
-          8,
-          ["class", "onClick"]
-        )) : vue.createCommentVNode("v-if", true)])],
-        2
-        /* CLASS */
-      )],
-      6
-      /* CLASS, STYLE */
-    ), _ctx.line ? (vue.openBlock(), vue.createElementBlock(
-      "div",
-      {
-        key: 0,
-        class: vue.normalizeClass(_ctx.classes(_ctx.n("line"), [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")], [_ctx.errorMessage, _ctx.n("--line-error")])),
-        style: vue.normalizeStyle({
-          background: !_ctx.errorMessage ? _ctx.blurColor : void 0
-        })
+          16
+          /* FULL_PROPS */
+        )]),
+        _: 3
+        /* FORWARDED */
       },
-      [vue.createElementVNode(
-        "div",
-        {
-          class: vue.normalizeClass(_ctx.classes(_ctx.n("dot"), [_ctx.isFocus, _ctx.n("--spread")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")], [_ctx.errorMessage, _ctx.n("--line-error")])),
-          style: vue.normalizeStyle({
-            background: !_ctx.errorMessage ? _ctx.focusColor : void 0
-          })
-        },
-        null,
-        6
-        /* CLASS, STYLE */
-      )],
-      6
-      /* CLASS, STYLE */
-    )) : vue.createCommentVNode("v-if", true), vue.createVNode(
+      8,
+      ["class", "offset-y", "disabled", "placement", "show", "onClose"]
+    ), vue.createVNode(
       _component_var_form_details,
       {
-        "error-message": _ctx.errorMessage
+        "error-message": _ctx.errorMessage,
+        onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+        }, ["stop"]))
       },
       null,
       8,
@@ -20182,18 +20399,18 @@ var __sfc__$g = vue.defineComponent({
     VarIcon: Icon,
     VarMenu: Menu,
     VarChip: Chip,
+    VarFieldDecorator,
     VarFormDetails: FormDetails
   },
   props: props$f,
   setup(props2) {
-    var wrapEl = vue.ref(null);
     var isFocus = vue.ref(false);
     var multiple = vue.computed(() => props2.multiple);
     var focusColor = vue.computed(() => props2.focusColor);
     var label = vue.ref("");
     var labels = vue.ref([]);
     var isEmptyModelValue = vue.computed(() => isEmpty(props2.modelValue));
-    var wrapWidth = vue.ref("0px");
+    var cursor = vue.computed(() => props2.disabled || props2.readonly ? "" : "pointer");
     var offsetY = vue.ref(0);
     var {
       bindForm,
@@ -20212,6 +20429,7 @@ var __sfc__$g = vue.defineComponent({
       resetValidation
     } = useValidation();
     var menuEl = vue.ref(null);
+    var placement = vue.computed(() => props2.variant === "outlined" ? "bottom-start" : "cover-top-start");
     var computeLabel = () => {
       var {
         multiple: multiple2,
@@ -20266,21 +20484,6 @@ var __sfc__$g = vue.defineComponent({
       }
       return (_option$label$value = (_option = option2) == null ? void 0 : _option.label.value) != null ? _option$label$value : "";
     };
-    var computePlaceholderState = () => {
-      var {
-        hint,
-        modelValue
-      } = props2;
-      if (!hint && !isEmpty(modelValue)) {
-        return n$h("--placeholder-hidden");
-      }
-      if (hint && (!isEmpty(modelValue) || isFocus.value)) {
-        return n$h("--placeholder-hint");
-      }
-    };
-    var getWrapWidth = () => {
-      return wrapEl.value && window.getComputedStyle(wrapEl.value).width || "0px";
-    };
     var handleFocus = () => {
       var {
         disabled,
@@ -20290,7 +20493,6 @@ var __sfc__$g = vue.defineComponent({
       if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly) {
         return;
       }
-      wrapWidth.value = getWrapWidth();
       offsetY.value = toPxNum(props2.offsetY);
       isFocus.value = true;
       call(onFocus);
@@ -20395,7 +20597,6 @@ var __sfc__$g = vue.defineComponent({
       computeLabel();
     };
     var focus = () => {
-      wrapWidth.value = getWrapWidth();
       offsetY.value = toPxNum(props2.offsetY);
       isFocus.value = true;
     };
@@ -20421,7 +20622,6 @@ var __sfc__$g = vue.defineComponent({
     });
     vue.watch(() => length.value, syncOptions);
     var selectProvider = {
-      wrapWidth: vue.computed(() => wrapWidth.value),
       multiple,
       focusColor,
       computeLabel,
@@ -20433,7 +20633,6 @@ var __sfc__$g = vue.defineComponent({
     bindOptions(selectProvider);
     call(bindForm, selectProvider);
     return {
-      wrapEl,
       offsetY,
       isFocus,
       errorMessage,
@@ -20443,9 +20642,10 @@ var __sfc__$g = vue.defineComponent({
       labels,
       isEmptyModelValue,
       menuEl,
+      placement,
+      cursor,
       n: n$h,
       classes: classes$d,
-      computePlaceholderState,
       handleFocus,
       handleBlur,
       handleClear,
@@ -21264,7 +21464,7 @@ var props$c = {
   },
   // content内容
   content: {
-    type: String
+    type: [String, Function, Object]
   },
   // 为snackbar content添加自定义类名
   contentClass: {
@@ -21280,10 +21480,10 @@ var props$c = {
     type: Boolean,
     default: false
   },
-  loadingType: pickProps(props$13, "type"),
-  loadingSize: pickProps(props$13, "size"),
-  loadingRadius: pickProps(props$13, "radius"),
-  loadingColor: _extends$2({}, pickProps(props$13, "color"), {
+  loadingType: pickProps(props$14, "type"),
+  loadingSize: pickProps(props$14, "size"),
+  loadingRadius: pickProps(props$14, "radius"),
+  loadingColor: _extends$2({}, pickProps(props$14, "color"), {
     default: "currentColor"
   }),
   // 是否禁止滚动穿透
@@ -21362,6 +21562,14 @@ function __render__$c(_ctx, _cache) {
         )])],
         2
         /* CLASS */
+      ), vue.createElementVNode(
+        "div",
+        {
+          class: vue.normalizeClass([_ctx.n("icon")])
+        },
+        [vue.renderSlot(_ctx.$slots, "icon")],
+        2
+        /* CLASS */
       ), vue.createElementVNode(
         "div",
         {
@@ -21479,6 +21687,7 @@ function __render__$b(_ctx, _cache) {
             class: _ctx.n("transition")
           }),
           {
+            icon: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "icon")]),
             action: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "action")]),
             default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(
               vue.toDisplayString(_ctx.content),
@@ -21544,6 +21753,8 @@ var isAllowMultiple = false;
 var defaultOptionsValue = {
   type: void 0,
   content: "",
+  icon: "",
+  action: "",
   position: "top",
   duration: 3e3,
   vertical: false,
@@ -21569,6 +21780,7 @@ var transitionGroupProps = {
   tag: "div",
   class: "var-transition-group"
 };
+var getSlotValue = (value) => () => isFunction(value) ? value() : value;
 var TransitionGroupHost = {
   setup() {
     return () => {
@@ -21590,6 +21802,16 @@ var TransitionGroupHost = {
         var style = _extends$1({
           position
         }, getTop(reactiveSnackOptions.position));
+        var {
+          content,
+          icon: icon2,
+          action
+        } = reactiveSnackOptions;
+        var slots = {
+          default: getSlotValue(content),
+          icon: getSlotValue(icon2),
+          action: getSlotValue(action)
+        };
         return vue.createVNode(VarSnackbarCore, vue.mergeProps(reactiveSnackOptions, {
           "key": id,
           "style": style,
@@ -21597,7 +21819,7 @@ var TransitionGroupHost = {
           "_update": _update,
           "show": reactiveSnackOptions.show,
           "onUpdate:show": ($event) => reactiveSnackOptions.show = $event
-        }), null);
+        }), slots);
       });
       return vue.createVNode(vue.TransitionGroup, vue.mergeProps(transitionGroupProps, {
         "style": {
@@ -22837,9 +23059,9 @@ var props$3 = {
     type: Boolean,
     default: false
   },
-  stickyCssMode: pickProps(props$A, "cssMode"),
-  stickyZIndex: pickProps(props$A, "zIndex"),
-  offsetTop: pickProps(props$A, "offsetTop"),
+  stickyCssMode: pickProps(props$B, "cssMode"),
+  stickyZIndex: pickProps(props$B, "zIndex"),
+  offsetTop: pickProps(props$B, "offsetTop"),
   onClick: defineListenerProp(),
   onChange: defineListenerProp(),
   "onUpdate:active": defineListenerProp()
@@ -23082,8 +23304,8 @@ var __sfc__$4 = vue.defineComponent({
     }));
     vue.watch(() => props2.active, resize);
     vue.watch(() => props2.scrollable, resize);
-    useEventListener(window, "resize", resize);
     vue.onActivated(resize);
+    useEventListener(() => window, "resize", resize);
     return {
       stickyComponent,
       indicatorWidth,
@@ -23305,9 +23527,9 @@ const divider$1 = {
   "--divider-color": "rgba(255, 255, 255, 0.2)",
   "--divider-text-color": "#aaa"
 };
-const input$1 = {
-  "--input-input-text-color": "#fff",
-  "--input-blur-color": "rgb(255, 255, 255, .7)"
+const fieldDecorator$1 = {
+  "--field-decorator-text-color": "#fff",
+  "--field-decorator-blur-color": "rgb(255, 255, 255, .7)"
 };
 const pagination$1 = {
   "--pagination-list-bg-color": "#303030",
@@ -23341,8 +23563,6 @@ const result$1 = {
   "--result-empty-border-color": "rgba(232,229,229,0.3)"
 };
 const select$1 = {
-  "--select-select-text-color": "#fff",
-  "--select-blur-color": "rgb(255, 255, 255, .7)",
   "--select-scroller-background": "#303030"
 };
 const skeleton$1 = {
@@ -23434,7 +23654,7 @@ const dark = _extends({
   "--color-danger": "#ef5350",
   "--color-disabled": "#404040",
   "--color-text-disabled": "#757575"
-}, button$1, cell$1, card$1, timePicker$1, datePicker$1, skeleton$1, tabs$1, tab$1, popup$1, dialog$1, actionSheet$1, chip$1, badge$1, uploader$1, collapse, pullRefresh$1, switchThemes, steps, pagination$1, table$1, input$1, select$1, radio$1, checkbox$1, divider$1, picker$1, appBar$1, bottomNavigation$1, bottomNavigationItem$1, menu$1, result$1, breadcrumb$1, paper$1, avatar$1);
+}, button$1, cell$1, card$1, timePicker$1, datePicker$1, skeleton$1, tabs$1, tab$1, popup$1, dialog$1, actionSheet$1, chip$1, badge$1, uploader$1, collapse, pullRefresh$1, switchThemes, steps, pagination$1, table$1, fieldDecorator$1, select$1, radio$1, checkbox$1, divider$1, picker$1, appBar$1, bottomNavigation$1, bottomNavigationItem$1, menu$1, result$1, breadcrumb$1, paper$1, avatar$1);
 var Themes = {
   dark
 };
@@ -25028,6 +25248,7 @@ const sticky = "";
 const IndexAnchorSfc = "";
 const indexBar = "";
 const IndexBarSfc = "";
+const fieldDecorator = "";
 const input = "";
 const InputSfc = "";
 const link = "";
@@ -25067,9 +25288,9 @@ const skeleton = "";
 const SkeletonSfc = "";
 const slider = "";
 const SliderSfc = "";
+const SnackbarSfc = "";
 const snackbar = "";
 const coreSfc = "";
-const SnackbarSfc = "";
 const space = "";
 const step = "";
 const StepSfc = "";
@@ -25094,7 +25315,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.9.6";
+const version = "2.10.0-alpha.1682067841655";
 function install(app) {
   ActionSheet.install && app.use(ActionSheet);
   AppBar.install && app.use(AppBar);
@@ -25423,48 +25644,48 @@ exports._ThemesComponent = _ThemesComponent;
 exports._TimePickerComponent = _TimePickerComponent;
 exports._TooltipComponent = _TooltipComponent;
 exports._UploaderComponent = _UploaderComponent;
-exports.actionSheetProps = props$17;
+exports.actionSheetProps = props$18;
 exports.add = add$2;
-exports.appBarProps = props$16;
-exports.avatarGroupProps = props$14;
-exports.avatarProps = props$15;
-exports.backTopProps = props$10;
-exports.badgeProps = props$$;
-exports.bottomNavigationItemProps = props$Z;
-exports.bottomNavigationProps = props$_;
-exports.breadcrumbProps = props$Y;
-exports.breadcrumbsProps = props$X;
-exports.buttonProps = props$11;
-exports.cardProps = props$V;
-exports.cellProps = props$U;
-exports.checkboxGroupProps = props$R;
-exports.checkboxProps = props$S;
-exports.chipProps = props$Q;
-exports.colProps = props$P;
-exports.collapseItemProps = props$N;
-exports.collapseProps = props$O;
-exports.countdownProps = props$M;
-exports.counterProps = props$L;
-exports.datePickerProps = props$K;
+exports.appBarProps = props$17;
+exports.avatarGroupProps = props$15;
+exports.avatarProps = props$16;
+exports.backTopProps = props$11;
+exports.badgeProps = props$10;
+exports.bottomNavigationItemProps = props$_;
+exports.bottomNavigationProps = props$$;
+exports.breadcrumbProps = props$Z;
+exports.breadcrumbsProps = props$Y;
+exports.buttonProps = props$12;
+exports.cardProps = props$W;
+exports.cellProps = props$V;
+exports.checkboxGroupProps = props$S;
+exports.checkboxProps = props$T;
+exports.chipProps = props$R;
+exports.colProps = props$Q;
+exports.collapseItemProps = props$O;
+exports.collapseProps = props$P;
+exports.countdownProps = props$N;
+exports.counterProps = props$M;
+exports.datePickerProps = props$L;
 exports.default = index_bundle;
 exports.defaultLazyOptions = defaultLazyOptions;
-exports.dialogProps = props$J;
-exports.dividerProps = props$I;
+exports.dialogProps = props$K;
+exports.dividerProps = props$J;
 exports.enUS = enUS;
-exports.formDetailsProps = props$T;
-exports.formProps = props$E;
-exports.iconProps = props$18;
+exports.formDetailsProps = props$U;
+exports.formProps = props$F;
+exports.iconProps = props$19;
 exports.imageCache = imageCache;
-exports.imagePreviewProps = props$B;
-exports.imageProps = props$D;
-exports.indexAnchorProps = props$z;
-exports.indexBarProps = props$y;
+exports.imagePreviewProps = props$C;
+exports.imageProps = props$E;
+exports.indexAnchorProps = props$A;
+exports.indexBarProps = props$z;
 exports.inputProps = props$x;
 exports.install = install;
 exports.linkProps = props$w;
 exports.listProps = props$v;
 exports.loadingBarProps = props$u;
-exports.loadingProps = props$13;
+exports.loadingProps = props$14;
 exports.menuProps = props$s;
 exports.merge = merge;
 exports.optionProps = props$r;
@@ -25474,7 +25695,7 @@ exports.packs = packs;
 exports.paginationProps = props$p;
 exports.paperProps = props$o;
 exports.pickerProps = props$n;
-exports.popupProps = props$19;
+exports.popupProps = props$1a;
 exports.progressProps = props$m;
 exports.pullRefreshProps = props$l;
 exports.radioGroupProps = props$j;
@@ -25489,9 +25710,9 @@ exports.snackbarProps = props$c;
 exports.spaceProps = props$b;
 exports.stepProps = props$a;
 exports.stepsProps = props$9;
-exports.stickyProps = props$A;
+exports.stickyProps = props$B;
 exports.styleProviderProps = props$8;
-exports.swipeProps = props$C;
+exports.swipeProps = props$D;
 exports.switchProps = props$7;
 exports.tabItemProps = props$5;
 exports.tabProps = props$6;
@@ -25499,7 +25720,7 @@ exports.tableProps = props$4;
 exports.tabsItemsProps = props$2;
 exports.tabsProps = props$3;
 exports.timePickerProps = props$1;
-exports.tooltipProps = props$H;
+exports.tooltipProps = props$I;
 exports.uploaderProps = props;
 exports.use = use;
 exports.useHoverOverlay = useHoverOverlay;