@varlet/ui 2.12.3 → 2.13.0-alpha.1689346411483

package/lib/varlet.cjs.js

@@ -150,8 +150,8 @@ function error$1(source, message) {
 function warn(source, message) {
   console.warn("Varlet [" + source + "]: " + message);
 }
-function _extends$q() {
-  _extends$q = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$r() {
+  _extends$r = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -162,7 +162,7 @@ function _extends$q() {
     }
     return target;
   };
-  return _extends$q.apply(this, arguments);
+  return _extends$r.apply(this, arguments);
 }
 function getStyle$1(element) {
   return window.getComputedStyle(element);
@@ -181,7 +181,7 @@ function getRect(element) {
       width,
       height
     };
-    return _extends$q({}, rect, {
+    return _extends$r({}, rect, {
       toJSON: () => rect
     });
   }
@@ -616,7 +616,7 @@ function useInitialized(source, value) {
   }, { immediate: true });
   return initialized;
 }
-function asyncGeneratorStep$d(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$e(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
     var value = info.value;
@@ -630,23 +630,23 @@ function asyncGeneratorStep$d(gen, resolve, reject, _next, _throw, key, arg) {
     Promise.resolve(value).then(_next, _throw);
   }
 }
-function _asyncToGenerator$d(fn2) {
+function _asyncToGenerator$e(fn2) {
   return function() {
     var self2 = this, args = arguments;
     return new Promise(function(resolve, reject) {
       var gen = fn2.apply(self2, args);
       function _next(value) {
-        asyncGeneratorStep$d(gen, resolve, reject, _next, _throw, "next", value);
+        asyncGeneratorStep$e(gen, resolve, reject, _next, _throw, "next", value);
       }
       function _throw(err) {
-        asyncGeneratorStep$d(gen, resolve, reject, _next, _throw, "throw", err);
+        asyncGeneratorStep$e(gen, resolve, reject, _next, _throw, "throw", err);
       }
       _next(void 0);
     });
   };
 }
-function _extends$p() {
-  _extends$p = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$q() {
+  _extends$q = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -657,7 +657,7 @@ function _extends$p() {
     }
     return target;
   };
-  return _extends$p.apply(this, arguments);
+  return _extends$q.apply(this, arguments);
 }
 function pickProps(props2, propsKey) {
   return Array.isArray(propsKey) ? propsKey.reduce((pickedProps, key) => {
@@ -686,7 +686,7 @@ function mountInstance(component, props2, eventListener) {
   }
   var Host = {
     setup() {
-      return () => vue.h(component, _extends$p({}, props2, eventListener));
+      return () => vue.h(component, _extends$q({}, props2, eventListener));
     }
   };
   var {
@@ -715,7 +715,7 @@ function flatFragment(vNodes) {
 function useValidation() {
   var errorMessage = vue.ref("");
   var validate = /* @__PURE__ */ function() {
-    var _ref = _asyncToGenerator$d(function* (rules, value, apis) {
+    var _ref = _asyncToGenerator$e(function* (rules, value, apis) {
       if (!isArray(rules) || !rules.length) {
         return true;
       }
@@ -736,7 +736,7 @@ function useValidation() {
     errorMessage.value = "";
   };
   var validateWithTrigger = /* @__PURE__ */ function() {
-    var _ref2 = _asyncToGenerator$d(function* (validateTrigger, trigger, rules, value, apis) {
+    var _ref2 = _asyncToGenerator$e(function* (validateTrigger, trigger, rules, value, apis) {
       if (validateTrigger.includes(trigger)) {
         (yield validate(rules, value, apis)) && (errorMessage.value = "");
       }
@@ -854,8 +854,8 @@ function useVModel(props2, key, options) {
   });
   return proxy;
 }
-function _extends$o() {
-  _extends$o = 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) {
@@ -866,10 +866,10 @@ function _extends$o() {
     }
     return target;
   };
-  return _extends$o.apply(this, arguments);
+  return _extends$p.apply(this, arguments);
 }
 var {
-  n: n$1i
+  n: n$1j
 } = createNamespace("ripple");
 var ANIMATION_DURATION$1 = 250;
 function setStyles(element) {
@@ -924,7 +924,7 @@ function createRipple(event) {
       size
     } = computeRippleStyles(this, event);
     var ripple2 = document.createElement("div");
-    ripple2.classList.add(n$1i());
+    ripple2.classList.add(n$1j());
     ripple2.style.opacity = "0";
     ripple2.style.transform = "translate(" + x + "px, " + y + "px) scale3d(.3, .3, .3)";
     ripple2.style.width = size + "px";
@@ -943,7 +943,7 @@ function createRipple(event) {
 function removeRipple() {
   var _ripple = this._ripple;
   var task = () => {
-    var ripples = this.querySelectorAll("." + n$1i());
+    var ripples = this.querySelectorAll("." + n$1j());
     if (!ripples.length) {
       return;
     }
@@ -969,7 +969,7 @@ function forbidRippleTask() {
 }
 function mounted$2(el, binding) {
   var _binding$value;
-  el._ripple = _extends$o({
+  el._ripple = _extends$p({
     tasker: null
   }, (_binding$value = binding.value) != null ? _binding$value : {}, {
     removeRipple: removeRipple.bind(el)
@@ -1006,7 +1006,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$o({
+    el._ripple = _extends$p({
       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);
@@ -1025,7 +1025,7 @@ const Ripple$1 = Ripple;
 function positionValidator$4(position) {
   return ["top", "bottom", "right", "left", "center"].includes(position);
 }
-var props$1a = {
+var props$1b = {
   show: {
     type: Boolean,
     default: false
@@ -1069,7 +1069,7 @@ var props$1a = {
     default: false
   },
   teleport: {
-    type: String,
+    type: [String, Object],
     default: "body"
   },
   onOpen: defineListenerProp(),
@@ -1188,8 +1188,8 @@ function usePopupItems() {
     bindPopupItems: bindChildren
   };
 }
-function _extends$n() {
-  _extends$n = Object.assign ? Object.assign.bind() : function(target) {
+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) {
@@ -1200,19 +1200,19 @@ function _extends$n() {
     }
     return target;
   };
-  return _extends$n.apply(this, arguments);
+  return _extends$o.apply(this, arguments);
 }
 function _isSlot$3(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }
 var {
-  n: n$1h,
-  classes: classes$14
+  n: n$1i,
+  classes: classes$15
 } = createNamespace("popup");
 const Popup = vue.defineComponent({
   name: "VarPopup",
   inheritAttrs: false,
-  props: props$1a,
+  props: props$1b,
   setup(props2, _ref) {
     var {
       slots,
@@ -1245,15 +1245,15 @@ const Popup = vue.defineComponent({
         overlayStyle
       } = props2;
       return vue.createVNode("div", {
-        "class": classes$14(n$1h("overlay"), overlayClass),
-        "style": _extends$n({
+        "class": classes$15(n$1i("overlay"), overlayClass),
+        "style": _extends$o({
           zIndex: zIndex.value - 1
         }, overlayStyle),
         "onClick": hidePopup
       }, null);
     };
     var renderContent = () => vue.withDirectives(vue.createVNode("div", vue.mergeProps({
-      "class": classes$14(n$1h("content"), n$1h("--" + props2.position), [props2.defaultStyle, n$1h("--content-background-color")], [props2.defaultStyle, n$1h("$-elevation--3")], [props2.safeArea, n$1h("--safe-area")], [props2.safeAreaTop, n$1h("--safe-area-top")]),
+      "class": classes$15(n$1i("content"), n$1i("--" + props2.position), [props2.defaultStyle, n$1i("--content-background-color")], [props2.defaultStyle, n$1i("$-elevation--3")], [props2.safeArea, n$1i("--safe-area")], [props2.safeAreaTop, n$1i("--safe-area-top")]),
       "style": {
         zIndex: zIndex.value
       }
@@ -1261,17 +1261,17 @@ const Popup = vue.defineComponent({
     var renderPopup = () => {
       var _slot;
       return vue.createVNode(vue.Transition, {
-        "name": n$1h("$-fade"),
+        "name": n$1i("$-fade"),
         "onAfterEnter": props2.onOpened,
         "onAfterLeave": props2.onClosed
       }, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": classes$14(n$1h("$--box"), n$1h()),
+          "class": classes$15(n$1i("$--box"), n$1i()),
           "style": {
             zIndex: zIndex.value - 2
           }
         }, [props2.overlay && renderOverlay(), vue.createVNode(vue.Transition, {
-          "name": props2.transition || n$1h("$-pop-" + props2.position)
+          "name": props2.transition || n$1i("$-pop-" + props2.position)
         }, _isSlot$3(_slot = renderContent()) ? _slot : {
           default: () => [_slot]
         })]), [[vue.vShow, props2.show]])]
@@ -1306,7 +1306,7 @@ Popup.install = function(app) {
   app.component(Popup.name, Popup);
 };
 var _PopupComponent = Popup;
-var props$19 = {
+var props$1a = {
   name: {
     type: String
   },
@@ -1329,7 +1329,7 @@ var props$19 = {
   },
   onClick: defineListenerProp()
 };
-function asyncGeneratorStep$c(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$d(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
     var value = info.value;
@@ -1343,26 +1343,26 @@ function asyncGeneratorStep$c(gen, resolve, reject, _next, _throw, key, arg) {
     Promise.resolve(value).then(_next, _throw);
   }
 }
-function _asyncToGenerator$c(fn2) {
+function _asyncToGenerator$d(fn2) {
   return function() {
     var self2 = this, args = arguments;
     return new Promise(function(resolve, reject) {
       var gen = fn2.apply(self2, args);
       function _next(value) {
-        asyncGeneratorStep$c(gen, resolve, reject, _next, _throw, "next", value);
+        asyncGeneratorStep$d(gen, resolve, reject, _next, _throw, "next", value);
       }
       function _throw(err) {
-        asyncGeneratorStep$c(gen, resolve, reject, _next, _throw, "throw", err);
+        asyncGeneratorStep$d(gen, resolve, reject, _next, _throw, "throw", err);
       }
       _next(void 0);
     });
   };
 }
 var {
-  n: n$1g,
-  classes: classes$13
+  n: n$1h,
+  classes: classes$14
 } = createNamespace("icon");
-function __render__$1g(_ctx, _cache) {
+function __render__$1h(_ctx, _cache) {
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.isURL(_ctx.name) ? "img" : "i"), {
     class: vue.normalizeClass(_ctx.classes(_ctx.n(), [_ctx.namespace !== _ctx.n(), _ctx.namespace], _ctx.namespace + "--set", [_ctx.isURL(_ctx.name), _ctx.n("image"), _ctx.namespace + "-" + _ctx.nextName], [_ctx.animateInProgress, _ctx.animationClass == null ? _ctx.n("--shrinking") : _ctx.animationClass])),
     style: vue.normalizeStyle({
@@ -1376,14 +1376,14 @@ function __render__$1g(_ctx, _cache) {
     onClick: _ctx.onClick
   }, null, 8, ["class", "style", "src", "onClick"]);
 }
-var __sfc__$1h = vue.defineComponent({
+var __sfc__$1i = vue.defineComponent({
   name: "VarIcon",
-  props: props$19,
+  props: props$1a,
   setup(props2) {
     var nextName = vue.ref("");
     var animateInProgress = vue.ref(false);
     var handleNameChange = /* @__PURE__ */ function() {
-      var _ref = _asyncToGenerator$c(function* (newName, oldName) {
+      var _ref = _asyncToGenerator$d(function* (newName, oldName) {
         var {
           transition
         } = props2;
@@ -1408,8 +1408,8 @@ var __sfc__$1h = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$1g,
-      classes: classes$13,
+      n: n$1h,
+      classes: classes$14,
       nextName,
       animateInProgress,
       isURL,
@@ -1418,14 +1418,14 @@ var __sfc__$1h = vue.defineComponent({
     };
   }
 });
-__sfc__$1h.render = __render__$1g;
-const Icon = __sfc__$1h;
+__sfc__$1i.render = __render__$1h;
+const Icon = __sfc__$1i;
 Icon.install = function(app) {
   app.component(Icon.name, Icon);
 };
 var _IconComponent = Icon;
-function _extends$m() {
-  _extends$m = 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) {
@@ -1436,9 +1436,9 @@ function _extends$m() {
     }
     return target;
   };
-  return _extends$m.apply(this, arguments);
+  return _extends$n.apply(this, arguments);
 }
-var props$18 = _extends$m({
+var props$19 = _extends$n({
   show: {
     type: Boolean,
     default: false
@@ -1456,7 +1456,7 @@ var props$18 = _extends$m({
   },
   onSelect: defineListenerProp(),
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$1a, [
+}, pickProps(props$1b, [
   "overlay",
   "overlayClass",
   "overlayStyle",
@@ -1676,8 +1676,8 @@ const enUS = {
   paginationPage: "page",
   paginationJump: "Go to"
 };
-function _extends$l() {
-  _extends$l = 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) {
@@ -1688,7 +1688,7 @@ function _extends$l() {
     }
     return target;
   };
-  return _extends$l.apply(this, arguments);
+  return _extends$m.apply(this, arguments);
 }
 function useLocale() {
   var packs2 = {};
@@ -1709,7 +1709,7 @@ function useLocale() {
       console.warn("The " + lang + " does not exist. You can mount a language package using the add method");
       return;
     }
-    packs2[lang] = _extends$l({}, packs2[lang], pack3);
+    packs2[lang] = _extends$m({}, packs2[lang], pack3);
     use2(lang);
   };
   return {
@@ -1750,11 +1750,11 @@ const Locale = {
   useLocale
 };
 var {
-  n: n$1f,
-  classes: classes$12
+  n: n$1g,
+  classes: classes$13
 } = createNamespace("action-sheet");
 var _hoisted_1$t = ["onClick"];
-function __render__$1f(_ctx, _cache) {
+function __render__$1g(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_popup = vue.resolveComponent("var-popup");
   var _directive_ripple = vue.resolveDirective("ripple");
@@ -1830,7 +1830,7 @@ function __render__$1f(_ctx, _cache) {
     /* FORWARDED */
   }, 16, ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "safe-area", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
 }
-var __sfc__$1g = vue.defineComponent({
+var __sfc__$1h = vue.defineComponent({
   name: "VarActionSheet",
   directives: {
     Ripple: Ripple$1
@@ -1840,7 +1840,7 @@ var __sfc__$1g = vue.defineComponent({
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$18,
+  props: props$19,
   setup(props2) {
     var popupShow = vue.ref(false);
     var handleSelect = (action) => {
@@ -1861,8 +1861,8 @@ var __sfc__$1g = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$1f,
-      classes: classes$12,
+      n: n$1g,
+      classes: classes$13,
       handlePopupUpdateShow,
       popupShow,
       pack,
@@ -1871,10 +1871,10 @@ var __sfc__$1g = vue.defineComponent({
     };
   }
 });
-__sfc__$1g.render = __render__$1f;
-const VarActionSheet = __sfc__$1g;
-function _extends$k() {
-  _extends$k = Object.assign ? Object.assign.bind() : function(target) {
+__sfc__$1h.render = __render__$1g;
+const VarActionSheet = __sfc__$1h;
+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) {
@@ -1885,7 +1885,7 @@ function _extends$k() {
     }
     return target;
   };
-  return _extends$k.apply(this, arguments);
+  return _extends$l.apply(this, arguments);
 }
 var singletonOptions$3;
 var defaultOptions$3 = {};
@@ -1893,7 +1893,7 @@ function normalizeOptions$3(options) {
   if (options === void 0) {
     options = {};
   }
-  return _extends$k({}, defaultOptions$3, options);
+  return _extends$l({}, defaultOptions$3, options);
 }
 function ActionSheet(options) {
   if (!inBrowser()) {
@@ -1958,7 +1958,7 @@ function positionValidator$3(position) {
   var validPositions = ["left", "center", "right"];
   return validPositions.includes(position);
 }
-var props$17 = {
+var props$18 = {
   color: {
     type: String
   },
@@ -1993,10 +1993,10 @@ var props$17 = {
   }
 };
 var {
-  n: n$1e,
-  classes: classes$11
+  n: n$1f,
+  classes: classes$12
 } = createNamespace("app-bar");
-function __render__$1e(_ctx, _cache) {
+function __render__$1f(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2077,9 +2077,9 @@ function __render__$1e(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$1f = vue.defineComponent({
+var __sfc__$1g = vue.defineComponent({
   name: "VarAppBar",
-  props: props$17,
+  props: props$18,
   setup(props2, _ref) {
     var {
       slots
@@ -2113,8 +2113,8 @@ var __sfc__$1f = vue.defineComponent({
     onSmartMounted(computePadding);
     vue.onUpdated(computePadding);
     return {
-      n: n$1e,
-      classes: classes$11,
+      n: n$1f,
+      classes: classes$12,
       formatElevation,
       rootStyles,
       paddingLeft,
@@ -2122,13 +2122,13 @@ var __sfc__$1f = vue.defineComponent({
     };
   }
 });
-__sfc__$1f.render = __render__$1e;
-const AppBar = __sfc__$1f;
+__sfc__$1g.render = __render__$1f;
+const AppBar = __sfc__$1g;
 AppBar.install = function(app) {
   app.component(AppBar.name, AppBar);
 };
 var _AppBarComponent = AppBar;
-function asyncGeneratorStep$b(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$c(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
     var value = info.value;
@@ -2142,23 +2142,23 @@ function asyncGeneratorStep$b(gen, resolve, reject, _next, _throw, key, arg) {
     Promise.resolve(value).then(_next, _throw);
   }
 }
-function _asyncToGenerator$b(fn2) {
+function _asyncToGenerator$c(fn2) {
   return function() {
     var self2 = this, args = arguments;
     return new Promise(function(resolve, reject) {
       var gen = fn2.apply(self2, args);
       function _next(value) {
-        asyncGeneratorStep$b(gen, resolve, reject, _next, _throw, "next", value);
+        asyncGeneratorStep$c(gen, resolve, reject, _next, _throw, "next", value);
       }
       function _throw(err) {
-        asyncGeneratorStep$b(gen, resolve, reject, _next, _throw, "throw", err);
+        asyncGeneratorStep$c(gen, resolve, reject, _next, _throw, "throw", err);
       }
       _next(void 0);
     });
   };
 }
-function _extends$j() {
-  _extends$j = Object.assign ? Object.assign.bind() : function(target) {
+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) {
@@ -2169,7 +2169,7 @@ function _extends$j() {
     }
     return target;
   };
-  return _extends$j.apply(this, arguments);
+  return _extends$k.apply(this, arguments);
 }
 var BACKGROUND_IMAGE_ARG_NAME = "background-image";
 var LAZY_LOADING = "lazy-loading";
@@ -2239,7 +2239,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$j({
+  el._lazy = _extends$k({
     src: binding.value,
     arg: binding.arg,
     currentAttempt: 0,
@@ -2284,7 +2284,7 @@ function check(_x) {
   return _check.apply(this, arguments);
 }
 function _check() {
-  _check = _asyncToGenerator$b(function* (el) {
+  _check = _asyncToGenerator$c(function* (el) {
     yield doubleRaf();
     if (inViewport(el)) {
       attemptLoad(el);
@@ -2299,7 +2299,7 @@ function add$1(_x2) {
   return _add.apply(this, arguments);
 }
 function _add() {
-  _add = _asyncToGenerator$b(function* (el) {
+  _add = _asyncToGenerator$c(function* (el) {
     !lazyElements.includes(el) && lazyElements.push(el);
     getAllParentScroller(el).forEach(bindEvents);
     yield check(el);
@@ -2321,7 +2321,7 @@ function mounted$1(_x3, _x4) {
   return _mounted.apply(this, arguments);
 }
 function _mounted() {
-  _mounted = _asyncToGenerator$b(function* (el, binding) {
+  _mounted = _asyncToGenerator$c(function* (el, binding) {
     createLazy(el, binding);
     yield add$1(el);
   });
@@ -2331,7 +2331,7 @@ function updated$1(_x5, _x6) {
   return _updated.apply(this, arguments);
 }
 function _updated() {
-  _updated = _asyncToGenerator$b(function* (el, binding) {
+  _updated = _asyncToGenerator$c(function* (el, binding) {
     if (!diff(el, binding)) {
       lazyElements.includes(el) && (yield check(el));
       return;
@@ -2378,7 +2378,7 @@ var internalSizeValidator$1 = (size) => ["mini", "small", "normal", "large"].inc
 function sizeValidator$6(size) {
   return internalSizeValidator$1(size) || isNumber(size) || isString(size);
 }
-var props$16 = {
+var props$17 = {
   round: {
     type: Boolean,
     default: true
@@ -2421,12 +2421,12 @@ var props$16 = {
   onError: defineListenerProp()
 };
 var {
-  n: n$1d,
-  classes: classes$10
+  n: n$1e,
+  classes: classes$11
 } = createNamespace("avatar");
 var _hoisted_1$s = ["src", "lazy-loading", "lazy-error"];
 var _hoisted_2$f = ["src"];
-function __render__$1d(_ctx, _cache) {
+function __render__$1e(_ctx, _cache) {
   var _directive_lazy = vue.resolveDirective("lazy");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -2494,12 +2494,12 @@ function __render__$1d(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$1e = vue.defineComponent({
+var __sfc__$1f = vue.defineComponent({
   name: "VarAvatar",
   directives: {
     Lazy: Lazy$1
   },
-  props: props$16,
+  props: props$17,
   setup(props2) {
     var avatarElement = vue.ref(null);
     var textElement = vue.ref(null);
@@ -2543,8 +2543,8 @@ var __sfc__$1e = vue.defineComponent({
       internalSizeValidator: internalSizeValidator$1,
       sizeValidator: sizeValidator$6,
       toSizeUnit,
-      n: n$1d,
-      classes: classes$10,
+      n: n$1e,
+      classes: classes$11,
       avatarElement,
       textElement,
       scale,
@@ -2554,13 +2554,13 @@ var __sfc__$1e = vue.defineComponent({
     };
   }
 });
-__sfc__$1e.render = __render__$1d;
-const Avatar = __sfc__$1e;
+__sfc__$1f.render = __render__$1e;
+const Avatar = __sfc__$1f;
 Avatar.install = function(app) {
   app.component(Avatar.name, Avatar);
 };
 var _AvatarComponent = Avatar;
-var props$15 = {
+var props$16 = {
   offset: {
     type: [Number, String]
   },
@@ -2570,10 +2570,10 @@ var props$15 = {
   }
 };
 var {
-  n: n$1c,
-  classes: classes$$
+  n: n$1d,
+  classes: classes$10
 } = createNamespace("avatar-group");
-function __render__$1c(_ctx, _cache) {
+function __render__$1d(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2585,9 +2585,9 @@ function __render__$1c(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$1d = vue.defineComponent({
+var __sfc__$1e = vue.defineComponent({
   name: "VarAvatarGroup",
-  props: props$15,
+  props: props$16,
   setup(props2) {
     var rootStyles = vue.computed(() => {
       if (props2.offset == null) {
@@ -2598,15 +2598,15 @@ var __sfc__$1d = vue.defineComponent({
       };
     });
     return {
-      n: n$1c,
-      classes: classes$$,
+      n: n$1d,
+      classes: classes$10,
       toSizeUnit,
       rootStyles
     };
   }
 });
-__sfc__$1d.render = __render__$1c;
-const AvatarGroup = __sfc__$1d;
+__sfc__$1e.render = __render__$1d;
+const AvatarGroup = __sfc__$1e;
 AvatarGroup.install = function(app) {
   app.component(AvatarGroup.name, AvatarGroup);
 };
@@ -2617,7 +2617,7 @@ function typeValidator$b(type) {
 function sizeValidator$5(size) {
   return ["normal", "mini", "small", "large"].includes(size);
 }
-var props$14 = {
+var props$15 = {
   type: {
     type: String,
     default: "circle",
@@ -2643,8 +2643,8 @@ var props$14 = {
   }
 };
 var {
-  n: n$1b,
-  classes: classes$_
+  n: n$1c,
+  classes: classes$$
 } = createNamespace("loading");
 var _withScopeId$7 = (n2) => (vue.pushScopeId(""), n2 = n2(), vue.popScopeId(), n2);
 var _hoisted_1$r = /* @__PURE__ */ _withScopeId$7(() => /* @__PURE__ */ vue.createElementVNode(
@@ -2662,7 +2662,7 @@ var _hoisted_1$r = /* @__PURE__ */ _withScopeId$7(() => /* @__PURE__ */ vue.crea
   /* HOISTED */
 ));
 var _hoisted_2$e = [_hoisted_1$r];
-function __render__$1b(_ctx, _cache) {
+function __render__$1c(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2783,9 +2783,9 @@ function __render__$1b(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$1c = vue.defineComponent({
+var __sfc__$1d = vue.defineComponent({
   name: "VarLoading",
-  props: props$14,
+  props: props$15,
   setup(props2, _ref) {
     var {
       slots
@@ -2802,31 +2802,31 @@ var __sfc__$1c = vue.defineComponent({
       return props2.loading;
     });
     return {
-      n: n$1b,
-      classes: classes$_,
+      n: n$1c,
+      classes: classes$$,
       multiplySizeUnit,
       loadingTypeDict,
       isShow
     };
   }
 });
-__sfc__$1c.render = __render__$1b;
-const Loading = __sfc__$1c;
+__sfc__$1d.render = __render__$1c;
+const Loading = __sfc__$1d;
 Loading.install = function(app) {
   app.component(Loading.name, Loading);
 };
 var _LoadingComponent = Loading;
-var props$13 = {
+var props$14 = {
   hovering: {
     type: Boolean,
     default: true
   }
 };
 var {
-  n: n$1a,
-  classes: classes$Z
+  n: n$1b,
+  classes: classes$_
 } = createNamespace("hover-overlay");
-function __render__$1a(_ctx, _cache) {
+function __render__$1b(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2837,18 +2837,18 @@ function __render__$1a(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$1b = vue.defineComponent({
+var __sfc__$1c = vue.defineComponent({
   name: "VarHoverOverlay",
-  props: props$13,
+  props: props$14,
   setup() {
     return {
-      n: n$1a,
-      classes: classes$Z
+      n: n$1b,
+      classes: classes$_
     };
   }
 });
-__sfc__$1b.render = __render__$1a;
-const HoverOverlay = __sfc__$1b;
+__sfc__$1c.render = __render__$1b;
+const HoverOverlay = __sfc__$1c;
 HoverOverlay.install = function(app) {
   app.component(HoverOverlay.name, HoverOverlay);
 };
@@ -2990,8 +2990,8 @@ var Hover = {
 };
 var _HoverComponent = Hover;
 const Hover$1 = Hover;
-function _extends$i() {
-  _extends$i = 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) {
@@ -3002,7 +3002,7 @@ function _extends$i() {
     }
     return target;
   };
-  return _extends$i.apply(this, arguments);
+  return _extends$j.apply(this, arguments);
 }
 function typeValidator$a(type) {
   return ["default", "primary", "info", "success", "warning", "danger"].includes(type);
@@ -3013,7 +3013,7 @@ function sizeValidator$4(size) {
 function nativeTypeValidator(nativeType) {
   return ["button", "reset", "submit"].includes(nativeType);
 }
-var props$12 = {
+var props$13 = {
   type: {
     type: String,
     validator: typeValidator$a
@@ -3072,9 +3072,9 @@ var props$12 = {
   loadingRadius: {
     type: [Number, String]
   },
-  loadingType: pickProps(props$14, "type"),
-  loadingSize: pickProps(props$14, "size"),
-  loadingColor: _extends$i({}, pickProps(props$14, "color"), {
+  loadingType: pickProps(props$15, "type"),
+  loadingSize: pickProps(props$15, "size"),
+  loadingColor: _extends$j({}, pickProps(props$15, "color"), {
     default: "currentColor"
   }),
   onClick: defineListenerProp(),
@@ -3106,11 +3106,11 @@ function useButtonGroup() {
   };
 }
 var {
-  n: n$19,
-  classes: classes$Y
+  n: n$1a,
+  classes: classes$Z
 } = createNamespace("button");
 var _hoisted_1$q = ["type", "disabled"];
-function __render__$19(_ctx, _cache) {
+function __render__$1a(_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");
@@ -3151,7 +3151,7 @@ function __render__$19(_ctx, _cache) {
     disabled: _ctx.disabled || !_ctx.ripple
   }], [_directive_hover, _ctx.handleHovering, "desktop"]]);
 }
-var __sfc__$1a = vue.defineComponent({
+var __sfc__$1b = vue.defineComponent({
   name: "VarButton",
   components: {
     VarLoading: Loading,
@@ -3161,7 +3161,7 @@ var __sfc__$1a = vue.defineComponent({
     Ripple: Ripple$1,
     Hover: Hover$1
   },
-  props: props$12,
+  props: props$13,
   setup(props2) {
     var pending = vue.ref(false);
     var {
@@ -3234,8 +3234,8 @@ var __sfc__$1a = vue.defineComponent({
       attemptAutoLoading(call(onTouchstart, e));
     };
     return {
-      n: n$19,
-      classes: classes$Y,
+      n: n$1a,
+      classes: classes$Z,
       pending,
       states,
       hovering,
@@ -3245,13 +3245,13 @@ var __sfc__$1a = vue.defineComponent({
     };
   }
 });
-__sfc__$1a.render = __render__$19;
-const Button = __sfc__$1a;
+__sfc__$1b.render = __render__$1a;
+const Button = __sfc__$1b;
 Button.install = function(app) {
   app.component(Button.name, Button);
 };
 var _ButtonComponent = Button;
-var props$11 = {
+var props$12 = {
   visibilityHeight: {
     type: [Number, String],
     default: 200
@@ -3276,10 +3276,10 @@ var props$11 = {
   onClick: defineListenerProp()
 };
 var {
-  n: n$18,
-  classes: classes$X
+  n: n$19,
+  classes: classes$Y
 } = createNamespace("back-top");
-function __render__$18(_ctx, _cache) {
+function __render__$19(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createBlock(vue.Teleport, {
@@ -3315,14 +3315,14 @@ function __render__$18(_ctx, _cache) {
     /* FULL_PROPS */
   )], 8, ["disabled"]);
 }
-var __sfc__$19 = vue.defineComponent({
+var __sfc__$1a = vue.defineComponent({
   name: "VarBackTop",
   components: {
     VarButton: Button,
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$11,
+  props: props$12,
   setup(props2) {
     var show = vue.ref(false);
     var backTopEl = vue.ref(null);
@@ -3361,14 +3361,14 @@ var __sfc__$19 = vue.defineComponent({
       show,
       backTopEl,
       toSizeUnit,
-      n: n$18,
-      classes: classes$X,
+      n: n$19,
+      classes: classes$Y,
       handleClick
     };
   }
 });
-__sfc__$19.render = __render__$18;
-const BackTop = __sfc__$19;
+__sfc__$1a.render = __render__$19;
+const BackTop = __sfc__$1a;
 BackTop.install = function(app) {
   app.component(BackTop.name, BackTop);
 };
@@ -3379,7 +3379,7 @@ function typeValidator$9(type) {
 function positionValidator$2(position) {
   return ["right-top", "right-bottom", "left-top", "left-bottom"].includes(position);
 }
-var props$10 = {
+var props$11 = {
   type: {
     type: String,
     default: "default",
@@ -3413,10 +3413,10 @@ var props$10 = {
   }
 };
 var {
-  n: n$17,
-  classes: classes$W
+  n: n$18,
+  classes: classes$X
 } = createNamespace("badge");
-function __render__$17(_ctx, _cache) {
+function __render__$18(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -3460,13 +3460,13 @@ function __render__$17(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$18 = vue.defineComponent({
+var __sfc__$19 = vue.defineComponent({
   name: "VarBadge",
   components: {
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$10,
+  props: props$11,
   setup(props2) {
     var value = vue.computed(() => {
       var {
@@ -3476,19 +3476,19 @@ var __sfc__$18 = vue.defineComponent({
       return value2 != null && maxValue != null && toNumber(value2) > toNumber(maxValue) ? maxValue + "+" : value2;
     });
     return {
-      n: n$17,
-      classes: classes$W,
+      n: n$18,
+      classes: classes$X,
       value
     };
   }
 });
-__sfc__$18.render = __render__$17;
-const Badge = __sfc__$18;
+__sfc__$19.render = __render__$18;
+const Badge = __sfc__$19;
 Badge.install = function(app) {
   app.component(Badge.name, Badge);
 };
 var _BadgeComponent = Badge;
-var props$$ = {
+var props$10 = {
   active: {
     type: [Number, String],
     default: 0
@@ -3536,8 +3536,8 @@ function useBottomNavigationItems() {
     bindBottomNavigationItem: bindChildren
   };
 }
-function _extends$h() {
-  _extends$h = 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) {
@@ -3548,11 +3548,11 @@ function _extends$h() {
     }
     return target;
   };
-  return _extends$h.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
 var {
-  n: n$16,
-  classes: classes$V
+  n: n$17,
+  classes: classes$W
 } = createNamespace("bottom-navigation");
 var {
   n: nItem
@@ -3563,7 +3563,7 @@ var RIGHT_SPACE_CLASS = nItem("--right-space");
 var defaultFabProps = {
   type: "primary"
 };
-function __render__$16(_ctx, _cache) {
+function __render__$17(_ctx, _cache) {
   var _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -3588,12 +3588,12 @@ function __render__$16(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$17 = vue.defineComponent({
+var __sfc__$18 = vue.defineComponent({
   name: "VarBottomNavigation",
   components: {
     VarButton: Button
   },
-  props: props$$,
+  props: props$10,
   setup(props2, _ref) {
     var {
       slots
@@ -3695,7 +3695,7 @@ var __sfc__$17 = vue.defineComponent({
     bindBottomNavigationItem(bottomNavigationProvider);
     vue.watch(() => length.value, matchBoundary);
     vue.watch(() => props2.fabProps, (newValue) => {
-      fabProps.value = _extends$h({}, defaultFabProps, newValue);
+      fabProps.value = _extends$i({}, defaultFabProps, newValue);
     }, {
       immediate: true,
       deep: true
@@ -3714,8 +3714,8 @@ var __sfc__$17 = vue.defineComponent({
       addMarginClass(length.value);
     });
     return {
-      n: n$16,
-      classes: classes$V,
+      n: n$17,
+      classes: classes$W,
       length,
       bottomNavigationDom,
       handleFabClick,
@@ -3723,13 +3723,13 @@ var __sfc__$17 = vue.defineComponent({
     };
   }
 });
-__sfc__$17.render = __render__$16;
-const BottomNavigation = __sfc__$17;
+__sfc__$18.render = __render__$17;
+const BottomNavigation = __sfc__$18;
 BottomNavigation.install = function(app) {
   app.component(BottomNavigation.name, BottomNavigation);
 };
 var _BottomNavigationComponent = BottomNavigation;
-var props$_ = {
+var props$$ = {
   name: {
     type: String
   },
@@ -3765,14 +3765,14 @@ function useBottomNavigation() {
   };
 }
 var {
-  n: n$15,
-  classes: classes$U
+  n: n$16,
+  classes: classes$V
 } = createNamespace("bottom-navigation-item");
 var defaultBadgeProps = {
   type: "danger",
   dot: true
 };
-function __render__$15(_ctx, _cache) {
+function __render__$16(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_badge = vue.resolveComponent("var-badge");
   var _directive_ripple = vue.resolveDirective("ripple");
@@ -3825,7 +3825,7 @@ function __render__$15(_ctx, _cache) {
     /* CLASS, STYLE */
   )), [[_directive_ripple]]);
 }
-var __sfc__$16 = vue.defineComponent({
+var __sfc__$17 = vue.defineComponent({
   name: "VarBottomNavigationItem",
   components: {
     VarBadge: Badge,
@@ -3834,7 +3834,7 @@ var __sfc__$16 = vue.defineComponent({
   directives: {
     Ripple: Ripple$1
   },
-  props: props$_,
+  props: props$$,
   setup(props2) {
     var name = vue.computed(() => props2.name);
     var badge2 = vue.computed(() => props2.badge);
@@ -3867,8 +3867,8 @@ var __sfc__$16 = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$15,
-      classes: classes$U,
+      n: n$16,
+      classes: classes$V,
       index,
       active,
       badge: badge2,
@@ -3878,13 +3878,13 @@ var __sfc__$16 = vue.defineComponent({
     };
   }
 });
-__sfc__$16.render = __render__$15;
-const BottomNavigationItem = __sfc__$16;
+__sfc__$17.render = __render__$16;
+const BottomNavigationItem = __sfc__$17;
 BottomNavigationItem.install = function(app) {
   app.component(BottomNavigationItem.name, BottomNavigationItem);
 };
 var _BottomNavigationItemComponent = BottomNavigationItem;
-var props$Z = {
+var props$_ = {
   separator: {
     type: String
   },
@@ -3919,10 +3919,10 @@ function useBreadcrumb() {
   };
 }
 var {
-  n: n$14,
-  classes: classes$T
+  n: n$15,
+  classes: classes$U
 } = createNamespace("breadcrumb");
-function __render__$14(_ctx, _cache) {
+function __render__$15(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -3957,9 +3957,9 @@ function __render__$14(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$15 = vue.defineComponent({
+var __sfc__$16 = vue.defineComponent({
   name: "VarBreadcrumb",
-  props: props$Z,
+  props: props$_,
   setup(props2) {
     var {
       index,
@@ -3976,30 +3976,30 @@ var __sfc__$15 = vue.defineComponent({
     };
     bindBreadcrumb(null);
     return {
-      n: n$14,
-      classes: classes$T,
+      n: n$15,
+      classes: classes$U,
       isLast,
       parentSeparator,
       handleClick
     };
   }
 });
-__sfc__$15.render = __render__$14;
-const Breadcrumb = __sfc__$15;
+__sfc__$16.render = __render__$15;
+const Breadcrumb = __sfc__$16;
 Breadcrumb.install = function(app) {
   app.component(Breadcrumb.name, Breadcrumb);
 };
 var _BreadcrumbComponent = Breadcrumb;
-var props$Y = {
+var props$Z = {
   separator: {
     type: String,
     default: "/"
   }
 };
 var {
-  n: n$13
+  n: n$14
 } = createNamespace("breadcrumbs");
-function __render__$13(_ctx, _cache) {
+function __render__$14(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -4010,9 +4010,9 @@ function __render__$13(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$14 = vue.defineComponent({
+var __sfc__$15 = vue.defineComponent({
   name: "VarBreadcrumbs",
-  props: props$Y,
+  props: props$Z,
   setup(props2) {
     var separator = vue.computed(() => props2.separator);
     var {
@@ -4025,12 +4025,12 @@ var __sfc__$14 = vue.defineComponent({
     };
     bindBreadcrumbList(breadcrumbsProvider);
     return {
-      n: n$13
+      n: n$14
     };
   }
 });
-__sfc__$14.render = __render__$13;
-const Breadcrumbs = __sfc__$14;
+__sfc__$15.render = __render__$14;
+const Breadcrumbs = __sfc__$15;
 Breadcrumbs.install = function(app) {
   app.component(Breadcrumbs.name, Breadcrumbs);
 };
@@ -4044,7 +4044,7 @@ function sizeValidator$3(size) {
 function modeValidator$1(mode) {
   return ["normal", "text", "outline"].includes(mode);
 }
-var props$X = {
+var props$Y = {
   type: {
     type: String,
     default: "default",
@@ -4076,10 +4076,10 @@ var props$X = {
   }
 };
 var {
-  n: n$12,
-  classes: classes$S
+  n: n$13,
+  classes: classes$T
 } = createNamespace("button-group");
-function __render__$12(_ctx, _cache) {
+function __render__$13(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -4090,9 +4090,9 @@ function __render__$12(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$13 = vue.defineComponent({
+var __sfc__$14 = vue.defineComponent({
   name: "VarButtonGroup",
-  props: props$X,
+  props: props$Y,
   setup(props2) {
     var {
       bindButtons
@@ -4107,14 +4107,14 @@ var __sfc__$13 = vue.defineComponent({
     };
     bindButtons(buttonGroupProvider);
     return {
-      n: n$12,
-      classes: classes$S,
+      n: n$13,
+      classes: classes$T,
       formatElevation
     };
   }
 });
-__sfc__$13.render = __render__$12;
-const ButtonGroup = __sfc__$13;
+__sfc__$14.render = __render__$13;
+const ButtonGroup = __sfc__$14;
 ButtonGroup.install = function(app) {
   app.component(ButtonGroup.name, ButtonGroup);
 };
@@ -4122,7 +4122,7 @@ var _ButtonGroupComponent = ButtonGroup;
 function fitValidator$1(fit) {
   return ["fill", "contain", "cover", "none", "scale-down"].includes(fit);
 }
-var props$W = {
+var props$X = {
   src: {
     type: String
   },
@@ -4176,7 +4176,7 @@ var props$W = {
   onClick: defineListenerProp(),
   "onUpdate:floating": defineListenerProp()
 };
-function asyncGeneratorStep$a(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$b(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
     var value = info.value;
@@ -4190,28 +4190,28 @@ function asyncGeneratorStep$a(gen, resolve, reject, _next, _throw, key, arg) {
     Promise.resolve(value).then(_next, _throw);
   }
 }
-function _asyncToGenerator$a(fn2) {
+function _asyncToGenerator$b(fn2) {
   return function() {
     var self2 = this, args = arguments;
     return new Promise(function(resolve, reject) {
       var gen = fn2.apply(self2, args);
       function _next(value) {
-        asyncGeneratorStep$a(gen, resolve, reject, _next, _throw, "next", value);
+        asyncGeneratorStep$b(gen, resolve, reject, _next, _throw, "next", value);
       }
       function _throw(err) {
-        asyncGeneratorStep$a(gen, resolve, reject, _next, _throw, "throw", err);
+        asyncGeneratorStep$b(gen, resolve, reject, _next, _throw, "throw", err);
       }
       _next(void 0);
     });
   };
 }
 var {
-  n: n$11,
-  classes: classes$R
+  n: n$12,
+  classes: classes$S
 } = createNamespace("card");
 var RIPPLE_DELAY = 500;
 var _hoisted_1$p = ["src", "alt"];
-function __render__$11(_ctx, _cache) {
+function __render__$12(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_button = vue.resolveComponent("var-button");
   var _directive_ripple = vue.resolveDirective("ripple");
@@ -4359,7 +4359,7 @@ function __render__$11(_ctx, _cache) {
     disabled: !_ctx.ripple || _ctx.floater
   }]]);
 }
-var __sfc__$12 = vue.defineComponent({
+var __sfc__$13 = vue.defineComponent({
   name: "VarCard",
   directives: {
     Ripple: Ripple$1
@@ -4368,7 +4368,7 @@ var __sfc__$12 = vue.defineComponent({
     VarIcon: Icon,
     VarButton: Button
   },
-  props: props$W,
+  props: props$X,
   setup(props2) {
     var card2 = vue.ref(null);
     var cardFloater = vue.ref(null);
@@ -4394,11 +4394,11 @@ var __sfc__$12 = vue.defineComponent({
     var dropper = null;
     var floater = vue.ref(null);
     var floating = /* @__PURE__ */ function() {
-      var _ref = _asyncToGenerator$a(function* () {
+      var _ref = _asyncToGenerator$b(function* () {
         clearTimeout(floater.value);
         clearTimeout(dropper);
         floater.value = null;
-        floater.value = setTimeout(/* @__PURE__ */ _asyncToGenerator$a(function* () {
+        floater.value = setTimeout(/* @__PURE__ */ _asyncToGenerator$b(function* () {
           var {
             width,
             height,
@@ -4471,8 +4471,8 @@ var __sfc__$12 = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$11,
-      classes: classes$R,
+      n: n$12,
+      classes: classes$S,
       toSizeUnit,
       card: card2,
       cardFloater,
@@ -4497,13 +4497,13 @@ var __sfc__$12 = vue.defineComponent({
     };
   }
 });
-__sfc__$12.render = __render__$11;
-const Card = __sfc__$12;
+__sfc__$13.render = __render__$12;
+const Card = __sfc__$13;
 Card.install = function(app) {
   app.component(Card.name, Card);
 };
 var _CardComponent = Card;
-var props$V = {
+var props$W = {
   title: {
     type: [Number, String]
   },
@@ -4539,10 +4539,10 @@ var props$V = {
   onClick: defineListenerProp()
 };
 var {
-  n: n$10,
-  classes: classes$Q
+  n: n$11,
+  classes: classes$R
 } = createNamespace("cell");
-function __render__$10(_ctx, _cache) {
+function __render__$11(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _directive_ripple = vue.resolveDirective("ripple");
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
@@ -4607,7 +4607,7 @@ function __render__$10(_ctx, _cache) {
     disabled: !_ctx.ripple
   }]]);
 }
-var __sfc__$11 = vue.defineComponent({
+var __sfc__$12 = vue.defineComponent({
   name: "VarCell",
   components: {
     VarIcon: Icon
@@ -4615,7 +4615,7 @@ var __sfc__$11 = vue.defineComponent({
   directives: {
     Ripple: Ripple$1
   },
-  props: props$V,
+  props: props$W,
   setup(props2) {
     var borderOffsetStyles = vue.computed(() => {
       if (props2.borderOffset == null) {
@@ -4630,21 +4630,21 @@ var __sfc__$11 = vue.defineComponent({
       call(props2.onClick, e);
     };
     return {
-      n: n$10,
-      classes: classes$Q,
+      n: n$11,
+      classes: classes$R,
       toSizeUnit,
       borderOffsetStyles,
       handleClick
     };
   }
 });
-__sfc__$11.render = __render__$10;
-const Cell = __sfc__$11;
+__sfc__$12.render = __render__$11;
+const Cell = __sfc__$12;
 Cell.install = function(app) {
   app.component(Cell.name, Cell);
 };
 var _CellComponent = Cell;
-var props$U = {
+var props$V = {
   errorMessage: {
     type: String,
     default: ""
@@ -4655,7 +4655,7 @@ var props$U = {
   }
 };
 var {
-  n: n$$
+  n: n$10
 } = createNamespace("form-details");
 var _hoisted_1$o = {
   key: 0
@@ -4663,11 +4663,11 @@ var _hoisted_1$o = {
 var _hoisted_2$d = {
   key: 0
 };
-function __render__$$(_ctx, _cache) {
+function __render__$10(_ctx, _cache) {
   return vue.openBlock(), vue.createBlock(vue.Transition, {
     name: _ctx.n()
   }, {
-    default: vue.withCtx(() => [_ctx.errorMessage || _ctx.extraMessage ? (vue.openBlock(), vue.createElementBlock(
+    default: vue.withCtx(() => [_ctx.errorMessage || _ctx.extraMessage || _ctx.$slots["extra-message"] ? (vue.openBlock(), vue.createElementBlock(
       "div",
       {
         key: 0,
@@ -4701,15 +4701,15 @@ function __render__$$(_ctx, _cache) {
         [vue.createVNode(vue.Transition, {
           name: _ctx.n("message")
         }, {
-          default: vue.withCtx(() => [_ctx.extraMessage ? (vue.openBlock(), vue.createElementBlock(
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "extra-message", {}, () => [_ctx.extraMessage ? (vue.openBlock(), vue.createElementBlock(
             "div",
             _hoisted_2$d,
             vue.toDisplayString(_ctx.extraMessage),
             1
             /* TEXT */
-          )) : vue.createCommentVNode("v-if", true)]),
-          _: 1
-          /* STABLE */
+          )) : vue.createCommentVNode("v-if", true)])]),
+          _: 3
+          /* FORWARDED */
         }, 8, ["name"])],
         2
         /* CLASS */
@@ -4717,24 +4717,24 @@ function __render__$$(_ctx, _cache) {
       2
       /* CLASS */
     )) : vue.createCommentVNode("v-if", true)]),
-    _: 1
-    /* STABLE */
+    _: 3
+    /* FORWARDED */
   }, 8, ["name"]);
 }
-var __sfc__$10 = vue.defineComponent({
+var __sfc__$11 = vue.defineComponent({
   name: "VarFormDetails",
-  props: props$U,
+  props: props$V,
   setup: () => ({
-    n: n$$
+    n: n$10
   })
 });
-__sfc__$10.render = __render__$$;
-const FormDetails = __sfc__$10;
+__sfc__$11.render = __render__$10;
+const FormDetails = __sfc__$11;
 FormDetails.install = function(app) {
   app.component(FormDetails.name, FormDetails);
 };
 var _FormDetailsComponent = FormDetails;
-var props$T = {
+var props$U = {
   modelValue: {
     type: [String, Number, Boolean, Object, Array],
     default: false
@@ -4804,8 +4804,8 @@ function useCheckboxGroup() {
     bindCheckboxGroup: bindParent
   };
 }
-function _extends$g() {
-  _extends$g = 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) {
@@ -4816,7 +4816,7 @@ function _extends$g() {
     }
     return target;
   };
-  return _extends$g.apply(this, arguments);
+  return _extends$h.apply(this, arguments);
 }
 var FORM_BIND_FORM_ITEM_KEY = Symbol("FORM_BIND_FORM_ITEM_KEY");
 function useForm() {
@@ -4827,7 +4827,7 @@ function useForm() {
   } = useParent(FORM_BIND_FORM_ITEM_KEY);
   var instance = vue.getCurrentInstance();
   var bindForm = bindParent ? (formItemProvider) => {
-    bindParent(_extends$g({}, formItemProvider, {
+    bindParent(_extends$h({}, formItemProvider, {
       instance
     }));
   } : null;
@@ -4850,10 +4850,10 @@ function useFormItems() {
   };
 }
 var {
-  n: n$_,
-  classes: classes$P
+  n: n$$,
+  classes: classes$Q
 } = createNamespace("checkbox");
-function __render__$_(_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");
@@ -4919,7 +4919,7 @@ function __render__$_(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$$ = vue.defineComponent({
+var __sfc__$10 = vue.defineComponent({
   name: "VarCheckbox",
   directives: {
     Ripple: Ripple$1,
@@ -4930,7 +4930,7 @@ var __sfc__$$ = vue.defineComponent({
     VarFormDetails: FormDetails,
     VarHoverOverlay: HoverOverlay
   },
-  props: props$T,
+  props: props$U,
   setup(props2) {
     var value = vue.ref(false);
     var checked = vue.computed(() => value.value === props2.checkedValue);
@@ -5049,8 +5049,8 @@ var __sfc__$$ = vue.defineComponent({
       formReadonly: form == null ? void 0 : form.readonly,
       hovering,
       handleHovering,
-      n: n$_,
-      classes: classes$P,
+      n: n$$,
+      classes: classes$Q,
       handleClick,
       toggle,
       reset,
@@ -5059,8 +5059,8 @@ var __sfc__$$ = vue.defineComponent({
     };
   }
 });
-__sfc__$$.render = __render__$_;
-const Checkbox = __sfc__$$;
+__sfc__$10.render = __render__$$;
+const Checkbox = __sfc__$10;
 Checkbox.install = function(app) {
   app.component(Checkbox.name, Checkbox);
 };
@@ -5068,7 +5068,7 @@ var _CheckboxComponent = Checkbox;
 function directionValidator$5(direction) {
   return ["horizontal", "vertical"].includes(direction);
 }
-var props$S = {
+var props$T = {
   modelValue: {
     type: Array,
     default: () => []
@@ -5092,10 +5092,10 @@ var props$S = {
   "onUpdate:modelValue": defineListenerProp()
 };
 var {
-  n: n$Z,
-  classes: classes$O
+  n: n$_,
+  classes: classes$P
 } = createNamespace("checkbox-group");
-function __render__$Z(_ctx, _cache) {
+function __render__$_(_ctx, _cache) {
   var _component_var_form_details = vue.resolveComponent("var-form-details");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -5117,12 +5117,12 @@ function __render__$Z(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$_ = vue.defineComponent({
+var __sfc__$$ = vue.defineComponent({
   name: "VarCheckboxGroup",
   components: {
     VarFormDetails: FormDetails
   },
-  props: props$S,
+  props: props$T,
   setup(props2) {
     var max2 = vue.computed(() => props2.max);
     var checkedCount = vue.computed(() => props2.modelValue.length);
@@ -5235,8 +5235,8 @@ var __sfc__$_ = vue.defineComponent({
     call(bindForm, checkboxGroupProvider);
     return {
       errorMessage,
-      n: n$Z,
-      classes: classes$O,
+      n: n$_,
+      classes: classes$P,
       checkAll: checkAll2,
       inverseAll,
       reset,
@@ -5245,8 +5245,8 @@ var __sfc__$_ = vue.defineComponent({
     };
   }
 });
-__sfc__$_.render = __render__$Z;
-const CheckboxGroup = __sfc__$_;
+__sfc__$$.render = __render__$_;
+const CheckboxGroup = __sfc__$$;
 CheckboxGroup.install = function(app) {
   app.component(CheckboxGroup.name, CheckboxGroup);
 };
@@ -5257,7 +5257,7 @@ function typeValidator$7(type) {
 function sizeValidator$2(size) {
   return ["normal", "mini", "small", "large"].includes(size);
 }
-var props$R = {
+var props$S = {
   type: {
     type: String,
     default: "default",
@@ -5274,7 +5274,7 @@ var props$R = {
   textColor: {
     type: String
   },
-  iconName: pickProps(props$19, "name"),
+  iconName: pickProps(props$1a, "name"),
   plain: {
     type: Boolean,
     default: false
@@ -5294,10 +5294,10 @@ var props$R = {
   onClose: defineListenerProp()
 };
 var {
-  n: n$Y,
-  classes: classes$N
+  n: n$Z,
+  classes: classes$O
 } = createNamespace("chip");
-function __render__$Y(_ctx, _cache) {
+function __render__$Z(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   return vue.openBlock(), vue.createBlock(vue.Transition, {
     name: _ctx.n("$-fade")
@@ -5338,13 +5338,13 @@ function __render__$Y(_ctx, _cache) {
     /* FORWARDED */
   }, 8, ["name"]);
 }
-var __sfc__$Z = vue.defineComponent({
+var __sfc__$_ = vue.defineComponent({
   name: "VarChip",
   components: {
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$R,
+  props: props$S,
   setup(props2) {
     var chipStyles = vue.computed(() => {
       var {
@@ -5371,25 +5371,25 @@ var __sfc__$Z = vue.defineComponent({
         plain,
         round: round2
       } = props2;
-      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 blockClass = block ? n$Z("$--flex") : n$Z("$--inline-flex");
+      var plainTypeClass = plain ? n$Z("plain") + " " + n$Z("plain-" + type) : n$Z("--" + type);
+      var roundClass = round2 ? n$Z("--round") : null;
+      return [n$Z("--" + size), blockClass, plainTypeClass, roundClass];
     });
     var handleClose = (e) => {
       call(props2.onClose, e);
     };
     return {
-      n: n$Y,
-      classes: classes$N,
+      n: n$Z,
+      classes: classes$O,
       chipStyles,
       contentClass,
       handleClose
     };
   }
 });
-__sfc__$Z.render = __render__$Y;
-const Chip = __sfc__$Z;
+__sfc__$_.render = __render__$Z;
+const Chip = __sfc__$_;
 Chip.install = function(app) {
   app.component(Chip.name, Chip);
 };
@@ -5403,7 +5403,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$Q = {
+var props$R = {
   span: {
     type: [String, Number],
     default: 24
@@ -5468,10 +5468,10 @@ function useRow() {
   };
 }
 var {
-  n: n$X,
-  classes: classes$M
+  n: n$Y,
+  classes: classes$N
 } = createNamespace("col");
-function __render__$X(_ctx, _cache) {
+function __render__$Y(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -5492,9 +5492,9 @@ function __render__$X(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$Y = vue.defineComponent({
+var __sfc__$Z = vue.defineComponent({
   name: "VarCol",
-  props: props$Q,
+  props: props$R,
   setup(props2) {
     var padding = vue.ref({
       left: 0,
@@ -5521,10 +5521,10 @@ var __sfc__$Y = vue.defineComponent({
           offset: _offset,
           span: _span
         } = size;
-        Number(_span) >= 0 && classes2.push(n$X("--span-" + mode + "-" + _span));
-        _offset && classes2.push(n$X("--offset-" + mode + "-" + _offset));
+        Number(_span) >= 0 && classes2.push(n$Y("--span-" + mode + "-" + _span));
+        _offset && classes2.push(n$Y("--offset-" + mode + "-" + _offset));
       } else {
-        Number(size) >= 0 && classes2.push(n$X("--span-" + mode + "-" + size));
+        Number(size) >= 0 && classes2.push(n$Y("--span-" + mode + "-" + size));
       }
       return classes2;
     };
@@ -5536,8 +5536,8 @@ var __sfc__$Y = vue.defineComponent({
     });
     call(bindRow, colProvider);
     return {
-      n: n$X,
-      classes: classes$M,
+      n: n$Y,
+      classes: classes$N,
       padding,
       toNumber,
       toSizeUnit,
@@ -5549,8 +5549,8 @@ var __sfc__$Y = vue.defineComponent({
     };
   }
 });
-__sfc__$Y.render = __render__$X;
-const Col = __sfc__$Y;
+__sfc__$Z.render = __render__$Y;
+const Col = __sfc__$Z;
 Col.install = function(app) {
   app.component(Col.name, Col);
 };
@@ -5568,7 +5568,7 @@ function useCollapseItem() {
     bindCollapseItem: bindChildren
   };
 }
-var props$P = {
+var props$Q = {
   modelValue: {
     type: [Array, String, Number]
   },
@@ -5592,9 +5592,9 @@ var props$P = {
   "onUpdate:modelValue": defineListenerProp()
 };
 var {
-  n: n$W
+  n: n$X
 } = createNamespace("collapse");
-function __render__$W(_ctx, _cache) {
+function __render__$X(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -5605,9 +5605,9 @@ function __render__$W(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$X = vue.defineComponent({
+var __sfc__$Y = vue.defineComponent({
   name: "VarCollapse",
-  props: props$P,
+  props: props$Q,
   setup(props2) {
     var {
       length,
@@ -5704,13 +5704,13 @@ var __sfc__$X = vue.defineComponent({
     vue.watch(() => length.value, () => vue.nextTick().then(resize));
     vue.watch(() => props2.modelValue, () => vue.nextTick().then(resize));
     return {
-      n: n$W,
+      n: n$X,
       divider: divider2
     };
   }
 });
-__sfc__$X.render = __render__$W;
-const Collapse = __sfc__$X;
+__sfc__$Y.render = __render__$X;
+const Collapse = __sfc__$Y;
 Collapse.install = function(app) {
   app.component(Collapse.name, Collapse);
 };
@@ -5730,7 +5730,7 @@ function useCollapse() {
     bindCollapse: bindParent
   };
 }
-var props$O = {
+var props$P = {
   name: {
     type: [String, Number]
   },
@@ -5747,10 +5747,10 @@ var props$O = {
   }
 };
 var {
-  n: n$V,
-  classes: classes$L
+  n: n$W,
+  classes: classes$M
 } = createNamespace("collapse-item");
-function __render__$V(_ctx, _cache) {
+function __render__$W(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -5827,12 +5827,12 @@ function __render__$V(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$W = vue.defineComponent({
+var __sfc__$X = vue.defineComponent({
   name: "VarCollapseItem",
   components: {
     VarIcon: Icon
   },
-  props: props$O,
+  props: props$P,
   setup(props2) {
     var {
       index,
@@ -5918,9 +5918,9 @@ var __sfc__$W = vue.defineComponent({
         closePanel();
     });
     return {
-      n: n$V,
+      n: n$W,
       start: start2,
-      classes: classes$L,
+      classes: classes$M,
       showContent,
       isShow,
       offset: offset2,
@@ -5933,13 +5933,13 @@ var __sfc__$W = vue.defineComponent({
     };
   }
 });
-__sfc__$W.render = __render__$V;
-const CollapseItem = __sfc__$W;
+__sfc__$X.render = __render__$W;
+const CollapseItem = __sfc__$X;
 CollapseItem.install = function(app) {
   app.component(CollapseItem.name, CollapseItem);
 };
 var _CollapseItemComponent = CollapseItem;
-var props$N = {
+var props$O = {
   time: {
     type: [String, Number],
     default: 0
@@ -5956,13 +5956,13 @@ var props$N = {
   onChange: defineListenerProp()
 };
 var {
-  n: n$U
+  n: n$V
 } = createNamespace("countdown");
 var SECOND = 1e3;
 var MINUTE = 60 * SECOND;
 var HOUR = 60 * MINUTE;
 var DAY = 24 * HOUR;
-function __render__$U(_ctx, _cache) {
+function __render__$V(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -5977,9 +5977,9 @@ function __render__$U(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$V = vue.defineComponent({
+var __sfc__$W = vue.defineComponent({
   name: "VarCountdown",
-  props: props$N,
+  props: props$O,
   setup(props2) {
     var showTime = vue.ref("");
     var timeData = vue.ref({
@@ -6102,15 +6102,15 @@ var __sfc__$V = vue.defineComponent({
     return {
       showTime,
       timeData,
-      n: n$U,
+      n: n$V,
       start: start2,
       pause,
       reset
     };
   }
 });
-__sfc__$V.render = __render__$U;
-const Countdown = __sfc__$V;
+__sfc__$W.render = __render__$V;
+const Countdown = __sfc__$W;
 Countdown.install = function(app) {
   app.component(Countdown.name, Countdown);
 };
@@ -8443,7 +8443,7 @@ P[Symbol.toStringTag] = "Decimal";
 var Decimal = P.constructor = clone(DEFAULTS);
 LN10 = new Decimal(LN10);
 PI = new Decimal(PI);
-var props$M = {
+var props$N = {
   modelValue: {
     type: [String, Number],
     default: 0
@@ -8531,13 +8531,13 @@ var props$M = {
   "onUpdate:modelValue": defineListenerProp()
 };
 var {
-  n: n$T,
-  classes: classes$K
+  n: n$U,
+  classes: classes$L
 } = createNamespace("counter");
 var SPEED = 100;
 var DELAY = 600;
 var _hoisted_1$n = ["inputmode", "readonly", "disabled"];
-function __render__$T(_ctx, _cache) {
+function __render__$U(_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");
@@ -8615,7 +8615,7 @@ function __render__$T(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$U = vue.defineComponent({
+var __sfc__$V = vue.defineComponent({
   name: "VarCounter",
   components: {
     VarButton: Button,
@@ -8626,7 +8626,7 @@ var __sfc__$U = vue.defineComponent({
     Ripple: Ripple$1
   },
   inheritAttrs: false,
-  props: props$M,
+  props: props$N,
   setup(props2) {
     var inputValue = vue.ref("");
     var {
@@ -8834,8 +8834,8 @@ var __sfc__$U = vue.defineComponent({
     });
     setNormalizedValue(normalizeValue(String(props2.modelValue)));
     return {
-      n: n$T,
-      classes: classes$K,
+      n: n$U,
+      classes: classes$L,
       formatElevation,
       inputValue,
       errorMessage,
@@ -8858,8 +8858,8 @@ var __sfc__$U = vue.defineComponent({
     };
   }
 });
-__sfc__$U.render = __render__$T;
-const Counter = __sfc__$U;
+__sfc__$V.render = __render__$U;
+const Counter = __sfc__$V;
 Counter.install = function(app) {
   app.component(Counter.name, Counter);
 };
@@ -9331,7 +9331,7 @@ var WEEK_HEADER = [{
 }, {
   index: "6"
 }];
-var props$L = {
+var props$M = {
   modelValue: {
     type: [String, Array]
   },
@@ -9392,9 +9392,9 @@ var props$L = {
   "onUpdate:modelValue": defineListenerProp()
 };
 var {
-  n: n$S
+  n: n$T
 } = createNamespace("picker-header");
-function __render__$S(_ctx, _cache) {
+function __render__$T(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createElementBlock(
@@ -9458,7 +9458,7 @@ function __render__$S(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$T = vue.defineComponent({
+var __sfc__$U = vue.defineComponent({
   name: "PanelHeader",
   components: {
     VarButton: Button,
@@ -9511,17 +9511,17 @@ var __sfc__$T = vue.defineComponent({
       forwardOrBackNum.value = 0;
     });
     return {
-      n: n$S,
+      n: n$T,
       reverse,
       showDate,
       checkDate
     };
   }
 });
-__sfc__$T.render = __render__$S;
-const PanelHeader = __sfc__$T;
-function _extends$f() {
-  _extends$f = Object.assign ? Object.assign.bind() : function(target) {
+__sfc__$U.render = __render__$T;
+const PanelHeader = __sfc__$U;
+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) {
@@ -9532,18 +9532,18 @@ function _extends$f() {
     }
     return target;
   };
-  return _extends$f.apply(this, arguments);
+  return _extends$g.apply(this, arguments);
 }
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 var {
-  n: n$R,
-  classes: classes$J
+  n: n$S,
+  classes: classes$K
 } = createNamespace("month-picker");
 var {
   n: nDate$1
 } = createNamespace("date-picker");
-function __render__$R(_ctx, _cache) {
+function __render__$S(_ctx, _cache) {
   var _component_panel_header = vue.resolveComponent("panel-header");
   var _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createElementBlock(
@@ -9579,7 +9579,7 @@ function __render__$R(_ctx, _cache) {
               "var-month-picker-cover": "",
               ripple: false,
               elevation: _ctx.componentProps.buttonElevation
-            }, _extends$f({}, _ctx.buttonProps(month.index)), {
+            }, _extends$g({}, _ctx.buttonProps(month.index)), {
               onClick: (event) => _ctx.chooseMonth(month, event)
             }), {
               default: vue.withCtx(() => [vue.createTextVNode(
@@ -9604,7 +9604,7 @@ function __render__$R(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$S = vue.defineComponent({
+var __sfc__$T = vue.defineComponent({
   name: "MonthPickerPanel",
   components: {
     VarButton: Button,
@@ -9756,13 +9756,13 @@ var __sfc__$S = vue.defineComponent({
         color: !computeText() ? color : "",
         textColor: isCover ? "" : textColorOrCover(),
         [nDate$1() + "-color-cover"]: isCover,
-        class: classes$J(n$R("button"), [disabled, n$R("button--disabled")]),
+        class: classes$K(n$S("button"), [disabled, n$S("button--disabled")]),
         disabled
       };
     };
     var chooseMonth = (month, event) => {
       var buttonEl = event.currentTarget;
-      if (buttonEl.classList.contains(n$R("button--disabled")))
+      if (buttonEl.classList.contains(n$S("button--disabled")))
         return;
       emit("choose-month", month);
     };
@@ -9789,7 +9789,7 @@ var __sfc__$S = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$R,
+      n: n$S,
       nDate: nDate$1,
       pack,
       MONTH_LIST,
@@ -9805,14 +9805,14 @@ var __sfc__$S = vue.defineComponent({
     };
   }
 });
-__sfc__$S.render = __render__$R;
-const MonthPickerPanel = __sfc__$S;
+__sfc__$T.render = __render__$S;
+const MonthPickerPanel = __sfc__$T;
 var {
-  n: n$Q,
-  classes: classes$I
+  n: n$R,
+  classes: classes$J
 } = createNamespace("year-picker");
 var _hoisted_1$m = ["onClick"];
-function __render__$Q(_ctx, _cache) {
+function __render__$R(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "ul",
     {
@@ -9838,7 +9838,7 @@ function __render__$Q(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$R = vue.defineComponent({
+var __sfc__$S = vue.defineComponent({
   name: "YearPickerPanel",
   props: {
     preview: {
@@ -9891,24 +9891,24 @@ var __sfc__$R = vue.defineComponent({
       emit("choose-year", year);
     };
     onSmartMounted(() => {
-      var activeEl = document.querySelector("." + n$Q("item--active"));
+      var activeEl = document.querySelector("." + n$R("item--active"));
       activeEl == null ? void 0 : activeEl.scrollIntoView({
         block: "center"
       });
     });
     return {
-      n: n$Q,
-      classes: classes$I,
+      n: n$R,
+      classes: classes$J,
       yearList,
       chooseYear,
       toNumber
     };
   }
 });
-__sfc__$R.render = __render__$Q;
-const YearPickerPanel = __sfc__$R;
-function _extends$e() {
-  _extends$e = Object.assign ? Object.assign.bind() : function(target) {
+__sfc__$S.render = __render__$R;
+const YearPickerPanel = __sfc__$S;
+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) {
@@ -9919,18 +9919,18 @@ function _extends$e() {
     }
     return target;
   };
-  return _extends$e.apply(this, arguments);
+  return _extends$f.apply(this, arguments);
 }
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 var {
-  n: n$P,
-  classes: classes$H
+  n: n$Q,
+  classes: classes$I
 } = createNamespace("day-picker");
 var {
   n: nDate
 } = createNamespace("date-picker");
-function __render__$P(_ctx, _cache) {
+function __render__$Q(_ctx, _cache) {
   var _component_panel_header = vue.resolveComponent("panel-header");
   var _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createElementBlock(
@@ -9996,7 +9996,7 @@ function __render__$P(_ctx, _cache) {
                 round: "",
                 ripple: false,
                 elevation: _ctx.componentProps.buttonElevation
-              }, _extends$e({}, _ctx.buttonProps(day)), {
+              }, _extends$f({}, _ctx.buttonProps(day)), {
                 onClick: (event) => _ctx.chooseDay(day, event)
               }), {
                 default: vue.withCtx(() => [vue.createTextVNode(
@@ -10024,7 +10024,7 @@ function __render__$P(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$Q = vue.defineComponent({
+var __sfc__$R = vue.defineComponent({
   name: "DayPickerPanel",
   components: {
     VarButton: Button,
@@ -10159,7 +10159,7 @@ var __sfc__$Q = vue.defineComponent({
           text: true,
           outline: false,
           textColor: "",
-          class: n$P("button"),
+          class: n$Q("button"),
           disabled: true
         };
       }
@@ -10225,7 +10225,7 @@ var __sfc__$Q = vue.defineComponent({
         outline: computeOutline(),
         textColor: isCover ? "" : textColorOrCover(),
         [nDate() + "-color-cover"]: isCover,
-        class: classes$H(n$P("button"), n$P("button--usable"), [disabled, n$P("button--disabled")]),
+        class: classes$I(n$Q("button"), n$Q("button--usable"), [disabled, n$Q("button--disabled")]),
         disabled
       };
     };
@@ -10236,7 +10236,7 @@ var __sfc__$Q = vue.defineComponent({
     };
     var chooseDay = (day, event) => {
       var buttonEl = event.currentTarget;
-      if (buttonEl.classList.contains(n$P("button--disabled")))
+      if (buttonEl.classList.contains(n$Q("button--disabled")))
         return;
       emit("choose-day", day);
     };
@@ -10252,7 +10252,7 @@ var __sfc__$Q = vue.defineComponent({
       initHeader();
     });
     return {
-      n: n$P,
+      n: n$Q,
       nDate,
       days,
       reverse,
@@ -10269,13 +10269,13 @@ var __sfc__$Q = vue.defineComponent({
     };
   }
 });
-__sfc__$Q.render = __render__$P;
-const DayPickerPanel = __sfc__$Q;
+__sfc__$R.render = __render__$Q;
+const DayPickerPanel = __sfc__$R;
 var {
-  n: n$O,
-  classes: classes$G
+  n: n$P,
+  classes: classes$H
 } = createNamespace("date-picker");
-function __render__$O(_ctx, _cache) {
+function __render__$P(_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");
@@ -10427,14 +10427,14 @@ function __render__$O(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$P = vue.defineComponent({
+var __sfc__$Q = vue.defineComponent({
   name: "VarDatePicker",
   components: {
     MonthPickerPanel,
     YearPickerPanel,
     DayPickerPanel
   },
-  props: props$L,
+  props: props$M,
   setup(props2) {
     var startX = 0;
     var startY = 0;
@@ -10772,8 +10772,8 @@ var __sfc__$P = vue.defineComponent({
     });
     vue.watch(getPanelType, resetState);
     return {
-      n: n$O,
-      classes: classes$G,
+      n: n$P,
+      classes: classes$H,
       monthPanelEl,
       dayPanelEl,
       reverse,
@@ -10804,14 +10804,14 @@ var __sfc__$P = vue.defineComponent({
     };
   }
 });
-__sfc__$P.render = __render__$O;
-const DatePicker = __sfc__$P;
+__sfc__$Q.render = __render__$P;
+const DatePicker = __sfc__$Q;
 DatePicker.install = function(app) {
   app.component(DatePicker.name, DatePicker);
 };
 var _DatePickerComponent = DatePicker;
-function _extends$d() {
-  _extends$d = Object.assign ? Object.assign.bind() : function(target) {
+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) {
@@ -10822,12 +10822,12 @@ function _extends$d() {
     }
     return target;
   };
-  return _extends$d.apply(this, arguments);
+  return _extends$e.apply(this, arguments);
 }
 function messageAlignValidator(messageAlign) {
   return ["left", "center", "right"].includes(messageAlign);
 }
-var props$K = _extends$d({
+var props$L = _extends$e({
   show: {
     type: Boolean,
     default: false
@@ -10882,7 +10882,7 @@ var props$K = _extends$d({
   onConfirm: defineListenerProp(),
   onCancel: defineListenerProp(),
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$1a, [
+}, pickProps(props$1b, [
   "overlay",
   "overlayClass",
   "overlayStyle",
@@ -10897,8 +10897,8 @@ var props$K = _extends$d({
   // internal for function call closes the dialog
   "onRouteChange"
 ]));
-function _extends$c() {
-  _extends$c = 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) {
@@ -10909,13 +10909,13 @@ function _extends$c() {
     }
     return target;
   };
-  return _extends$c.apply(this, arguments);
+  return _extends$d.apply(this, arguments);
 }
 var {
-  n: n$N,
-  classes: classes$F
+  n: n$O,
+  classes: classes$G
 } = createNamespace("dialog");
-function __render__$N(_ctx, _cache) {
+function __render__$O(_ctx, _cache) {
   var _component_var_button = vue.resolveComponent("var-button");
   var _component_var_popup = vue.resolveComponent("var-popup");
   return vue.openBlock(), vue.createBlock(_component_var_popup, {
@@ -10939,7 +10939,7 @@ function __render__$N(_ctx, _cache) {
       "div",
       vue.mergeProps({
         class: _ctx.classes(_ctx.n("$--box"), _ctx.n(), _ctx.dialogClass),
-        style: _extends$c({
+        style: _extends$d({
           width: _ctx.toSizeUnit(_ctx.width)
         }, _ctx.dialogStyle)
       }, _ctx.$attrs),
@@ -11018,14 +11018,14 @@ function __render__$N(_ctx, _cache) {
     /* FORWARDED */
   }, 8, ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onClickOverlay"]);
 }
-var __sfc__$O = vue.defineComponent({
+var __sfc__$P = vue.defineComponent({
   name: "VarDialog",
   components: {
     VarPopup: Popup,
     VarButton: Button
   },
   inheritAttrs: false,
-  props: props$K,
+  props: props$L,
   setup(props2) {
     var popupShow = vue.ref(false);
     var popupCloseOnClickOverlay = vue.ref(false);
@@ -11085,8 +11085,8 @@ var __sfc__$O = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$N,
-      classes: classes$F,
+      n: n$O,
+      classes: classes$G,
       pack,
       dt,
       popupShow,
@@ -11098,10 +11098,10 @@ var __sfc__$O = vue.defineComponent({
     };
   }
 });
-__sfc__$O.render = __render__$N;
-const VarDialog = __sfc__$O;
-function _extends$b() {
-  _extends$b = Object.assign ? Object.assign.bind() : function(target) {
+__sfc__$P.render = __render__$O;
+const VarDialog = __sfc__$P;
+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) {
@@ -11112,7 +11112,7 @@ function _extends$b() {
     }
     return target;
   };
-  return _extends$b.apply(this, arguments);
+  return _extends$c.apply(this, arguments);
 }
 var singletonOptions$2;
 var defaultOptions$2 = {};
@@ -11121,11 +11121,11 @@ function normalizeOptions$2(options) {
     options = {};
   }
   if (isString(options)) {
-    return _extends$b({}, defaultOptions$2, {
+    return _extends$c({}, defaultOptions$2, {
       message: options
     });
   }
-  return _extends$b({}, defaultOptions$2, options);
+  return _extends$c({}, defaultOptions$2, options);
 }
 function Dialog(options) {
   if (!inBrowser()) {
@@ -11191,7 +11191,7 @@ Dialog.install = function(app) {
 };
 Dialog.Component = VarDialog;
 var _DialogComponent = VarDialog;
-var props$J = {
+var props$K = {
   inset: {
     type: [Boolean, Number, String],
     default: false
@@ -11215,8 +11215,8 @@ var props$J = {
     default: false
   }
 };
-function _extends$a() {
-  _extends$a = Object.assign ? Object.assign.bind() : function(target) {
+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) {
@@ -11227,13 +11227,13 @@ function _extends$a() {
     }
     return target;
   };
-  return _extends$a.apply(this, arguments);
+  return _extends$b.apply(this, arguments);
 }
 var {
-  n: n$M,
-  classes: classes$E
+  n: n$N,
+  classes: classes$F
 } = createNamespace("divider");
-function __render__$M(_ctx, _cache) {
+function __render__$N(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -11254,9 +11254,9 @@ function __render__$M(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$N = vue.defineComponent({
+var __sfc__$O = vue.defineComponent({
   name: "VarDivider",
-  props: props$J,
+  props: props$K,
   setup(props2, _ref) {
     var {
       slots
@@ -11275,13 +11275,13 @@ var __sfc__$N = vue.defineComponent({
         margin
       };
       if (isBoolean(inset) || inset === 0) {
-        return _extends$a({}, baseStyle);
+        return _extends$b({}, baseStyle);
       }
       var _inset = toNumber(inset);
       var absInsetWithUnit = Math.abs(_inset) + (inset + "").replace(_inset + "", "");
-      return vertical ? _extends$a({}, baseStyle, {
+      return vertical ? _extends$b({}, baseStyle, {
         height: "calc(80% - " + toSizeUnit(absInsetWithUnit) + ")"
-      }) : _extends$a({}, baseStyle, {
+      }) : _extends$b({}, baseStyle, {
         width: "calc(100% - " + toSizeUnit(absInsetWithUnit) + ")",
         left: _inset > 0 ? toSizeUnit(absInsetWithUnit) : toSizeUnit(0)
       });
@@ -11295,21 +11295,349 @@ var __sfc__$N = vue.defineComponent({
     vue.onUpdated(() => {
       checkHasText();
     });
-    return _extends$a({
-      n: n$M,
-      classes: classes$E
+    return _extends$b({
+      n: n$N,
+      classes: classes$F
     }, vue.toRefs(state), {
       style,
       isInset
     });
   }
 });
-__sfc__$N.render = __render__$M;
-const Divider = __sfc__$N;
+__sfc__$O.render = __render__$N;
+const Divider = __sfc__$O;
 Divider.install = function(app) {
   app.component(Divider.name, Divider);
 };
 var _DividerComponent = Divider;
+var props$J = {
+  direction: {
+    type: String,
+    default: "xy"
+  },
+  attraction: {
+    type: String
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  boundary: {
+    type: Object,
+    default: () => ({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    })
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 90
+  },
+  teleport: {
+    type: [String, Object],
+    default: "body"
+  }
+};
+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) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$a.apply(this, arguments);
+}
+function asyncGeneratorStep$a(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error2) {
+    reject(error2);
+    return;
+  }
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+function _asyncToGenerator$a(fn2) {
+  return function() {
+    var self2 = this, args = arguments;
+    return new Promise(function(resolve, reject) {
+      var gen = fn2.apply(self2, args);
+      function _next(value) {
+        asyncGeneratorStep$a(gen, resolve, reject, _next, _throw, "next", value);
+      }
+      function _throw(err) {
+        asyncGeneratorStep$a(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+      _next(void 0);
+    });
+  };
+}
+var {
+  n: n$M,
+  classes: classes$E
+} = createNamespace("drag");
+function __render__$M(_ctx, _cache) {
+  return vue.openBlock(), vue.createBlock(vue.Teleport, {
+    to: _ctx.teleport
+  }, [vue.createElementVNode(
+    "div",
+    vue.mergeProps({
+      ref: "drag",
+      class: _ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.enableTransition, _ctx.n("--transition")]),
+      style: {
+        "z-index": _ctx.zIndex
+      },
+      onTouchstart: _cache[0] || (_cache[0] = function() {
+        return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
+      }),
+      onTouchmove: _cache[1] || (_cache[1] = function() {
+        return _ctx.handleTouchmove && _ctx.handleTouchmove(...arguments);
+      }),
+      onTouchend: _cache[2] || (_cache[2] = function() {
+        return _ctx.handleTouchend && _ctx.handleTouchend(...arguments);
+      }),
+      onTouchcancel: _cache[3] || (_cache[3] = function() {
+        return _ctx.handleTouchend && _ctx.handleTouchend(...arguments);
+      })
+    }, _ctx.getAttrs()),
+    [vue.renderSlot(_ctx.$slots, "default")],
+    16
+    /* FULL_PROPS */
+  )], 8, ["to"]);
+}
+var __sfc__$N = vue.defineComponent({
+  name: "VarDrag",
+  inheritAttrs: false,
+  props: props$J,
+  setup(props2, _ref) {
+    var {
+      attrs
+    } = _ref;
+    var drag2 = vue.ref(null);
+    var x = vue.ref(0);
+    var y = vue.ref(0);
+    var boundary = vue.reactive({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    });
+    var mounted2 = vue.ref(false);
+    var enableTransition = vue.ref(false);
+    var touching = false;
+    var prevX = 0;
+    var prevY = 0;
+    var saveXY = () => {
+      var {
+        left: left2,
+        top: top2
+      } = getOffset();
+      x.value = left2;
+      y.value = top2;
+    };
+    var handleTouchstart = (event) => {
+      if (props2.disabled) {
+        return;
+      }
+      var {
+        clientX,
+        clientY
+      } = event.touches[0];
+      saveXY();
+      prevX = clientX;
+      prevY = clientY;
+      touching = true;
+    };
+    var handleTouchmove = /* @__PURE__ */ function() {
+      var _ref2 = _asyncToGenerator$a(function* (event) {
+        if (!touching || props2.disabled) {
+          return;
+        }
+        event.preventDefault();
+        enableTransition.value = false;
+        var {
+          clientX,
+          clientY
+        } = event.touches[0];
+        var deltaX = clientX - prevX;
+        var deltaY = clientY - prevY;
+        prevX = clientX;
+        prevY = clientY;
+        if (props2.direction.includes("x")) {
+          x.value += deltaX;
+        }
+        if (props2.direction.includes("y")) {
+          y.value += deltaY;
+        }
+        clampToBoundary();
+      });
+      return function handleTouchmove2(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    var handleTouchend = () => {
+      if (props2.disabled) {
+        return;
+      }
+      touching = false;
+      attract();
+    };
+    var getOffset = () => {
+      var dragRect = getRect(drag2.value);
+      var windowRect = getRect(window);
+      var top2 = dragRect.top - windowRect.top;
+      var bottom2 = windowRect.bottom - dragRect.bottom;
+      var left2 = dragRect.left - windowRect.left;
+      var right2 = windowRect.right - dragRect.right;
+      var {
+        width,
+        height
+      } = dragRect;
+      var {
+        width: windowWidth,
+        height: windowHeight
+      } = windowRect;
+      return {
+        top: top2,
+        bottom: bottom2,
+        left: left2,
+        right: right2,
+        width,
+        height,
+        halfWidth: width / 2,
+        halfHeight: height / 2,
+        windowWidth,
+        windowHeight
+      };
+    };
+    var getRange = () => {
+      var offset2 = getOffset();
+      var x1 = boundary.left;
+      var x2 = offset2.windowWidth - boundary.right - offset2.width;
+      var y1 = boundary.top;
+      var y2 = offset2.windowHeight - boundary.bottom - offset2.height;
+      return {
+        minX: x1,
+        minY: y1,
+        // fallback the drag element overflows boundary
+        maxX: x1 < x2 ? x2 : x1,
+        maxY: y1 < y2 ? y2 : y1
+      };
+    };
+    var attract = () => {
+      if (props2.attraction == null) {
+        return;
+      }
+      enableTransition.value = true;
+      var {
+        halfWidth,
+        halfHeight,
+        top: top2,
+        bottom: bottom2,
+        left: left2,
+        right: right2
+      } = getOffset();
+      var {
+        minX,
+        minY,
+        maxX,
+        maxY
+      } = getRange();
+      var leftDistance = left2 + halfWidth - boundary.left;
+      var rightDistance = right2 + halfWidth - boundary.right;
+      var topDistance = top2 + halfHeight - boundary.top;
+      var bottomDistance = bottom2 + halfHeight - boundary.bottom;
+      var nearLeft = leftDistance <= rightDistance;
+      var nearTop = topDistance <= bottomDistance;
+      if (props2.attraction.includes("x")) {
+        x.value = nearLeft ? minX : maxX;
+      }
+      if (props2.attraction.includes("y")) {
+        y.value = nearTop ? minY : maxY;
+      }
+    };
+    var clampToBoundary = () => {
+      if (props2.disabled) {
+        return;
+      }
+      var {
+        minX,
+        minY,
+        maxX,
+        maxY
+      } = getRange();
+      x.value = clamp$1(x.value, minX, maxX);
+      y.value = clamp$1(y.value, minY, maxY);
+    };
+    var toPxBoundary = () => {
+      var {
+        top: top2 = 0,
+        bottom: bottom2 = 0,
+        left: left2 = 0,
+        right: right2 = 0
+      } = props2.boundary;
+      boundary.top = toPxNum(top2);
+      boundary.bottom = toPxNum(bottom2);
+      boundary.left = toPxNum(left2);
+      boundary.right = toPxNum(right2);
+    };
+    var getAttrs = () => {
+      var _ref3;
+      var style = (_ref3 = attrs.style) != null ? _ref3 : {};
+      return _extends$a({}, attrs, {
+        style: _extends$a({}, style, {
+          // when the drag element is mounted for the first time, the inset should be cleared to avoid affecting translateX and translateY.
+          top: mounted2.value ? 0 : style.top,
+          left: mounted2.value ? 0 : style.left,
+          right: mounted2.value ? "auto" : style.right,
+          bottom: mounted2.value ? "auto" : style.bottom,
+          transform: mounted2.value ? "translate(" + x.value + "px, " + y.value + "px)" : style.transform
+        })
+      });
+    };
+    var resize = () => {
+      toPxBoundary();
+      saveXY();
+      clampToBoundary();
+    };
+    vue.watch(() => props2.boundary, resize);
+    onWindowResize(resize);
+    onSmartMounted(() => {
+      resize();
+      mounted2.value = true;
+    });
+    return {
+      drag: drag2,
+      x,
+      y,
+      enableTransition,
+      n: n$M,
+      classes: classes$E,
+      getAttrs,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend,
+      resize
+    };
+  }
+});
+__sfc__$N.render = __render__$M;
+const Drag = __sfc__$N;
+Drag.install = function(app) {
+  app.component(Drag.name, Drag);
+};
+var _DragComponent = Drag;
 var hash$1 = {
   left: "right",
   right: "left",
@@ -14324,7 +14652,7 @@ var props$C = _extends$7({
   },
   "onUpdate:show": defineListenerProp(),
   onLongPress: defineListenerProp()
-}, pickProps(props$D, ["loop", "indicator", "onChange"]), pickProps(props$1a, [
+}, pickProps(props$D, ["loop", "indicator", "onChange"]), pickProps(props$1b, [
   "lockScroll",
   "teleport",
   "onOpen",
@@ -15911,7 +16239,14 @@ function __render__$A(_ctx, _cache) {
       "extra-message": _ctx.maxlengthText,
       onMousedown: _cache[14] || (_cache[14] = vue.withModifiers(() => {
       }, ["stop"]))
-    }, null, 8, ["error-message", "extra-message"])],
+    }, vue.createSlots({
+      _: 2
+      /* DYNAMIC */
+    }, [_ctx.$slots["extra-message"] ? {
+      name: "extra-message",
+      fn: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "extra-message")]),
+      key: "0"
+    } : void 0]), 1032, ["error-message", "extra-message"])],
     34
     /* CLASS, HYDRATE_EVENTS */
   );
@@ -17647,7 +17982,7 @@ var props$n = _extends$4({
   onChange: defineListenerProp(),
   onConfirm: defineListenerProp(),
   onCancel: defineListenerProp()
-}, pickProps(props$1a, ["show", "onUpdate:show", "closeOnClickOverlay", "teleport", "safeArea", "onOpen", "onClose", "onOpened", "onClosed", "onClickOverlay", "onRouteChange"]));
+}, pickProps(props$1b, ["show", "onUpdate:show", "closeOnClickOverlay", "teleport", "safeArea", "onOpen", "onClose", "onOpened", "onClosed", "onClickOverlay", "onRouteChange"]));
 var {
   n: n$q,
   classes: classes$l
@@ -20672,7 +21007,7 @@ function __render__$d(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
-      class: vue.normalizeClass(_ctx.n(_ctx.direction))
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(_ctx.direction), _ctx.n("$--box")))
     },
     [vue.createElementVNode(
       "div",
@@ -21190,63 +21525,50 @@ var props$c = {
     type: String,
     validator: typeValidator
   },
-  // snackbar显示的位置
   position: {
     type: String,
     default: "top",
     validator: positionValidator
   },
-  // content内容
   content: {
     type: [String, Function, Object]
   },
-  // 为snackbar content添加自定义类名
   contentClass: {
     type: String
   },
-  // snackbar 持续时间
   duration: {
     type: Number,
     default: 3e3
   },
-  // 是否将消息条内容堆叠在操作（按钮）之上
   vertical: {
     type: Boolean,
     default: false
   },
-  loadingType: pickProps(props$14, "type"),
-  loadingSize: pickProps(props$14, "size"),
-  loadingRadius: pickProps(props$14, "radius"),
-  loadingColor: _extends$2({}, pickProps(props$14, "color"), {
+  loadingType: pickProps(props$15, "type"),
+  loadingSize: pickProps(props$15, "size"),
+  loadingRadius: pickProps(props$15, "radius"),
+  loadingColor: _extends$2({}, pickProps(props$15, "color"), {
     default: "currentColor"
   }),
-  // 是否禁止滚动穿透
   lockScroll: {
     type: Boolean,
     default: false
   },
-  // 控制组件可见还是隐藏
   show: {
     type: Boolean,
     default: false
   },
-  // teleport
   teleport: {
-    type: String,
+    type: [String, Object],
     default: "body"
   },
-  // 是否禁止点击背景
   forbidClick: {
     type: Boolean,
     default: false
   },
-  // 打开时的回调函数
   onOpen: defineListenerProp(),
-  // 打开动画结束时的回调
   onOpened: defineListenerProp(),
-  // 关闭时的回调函数
   onClose: defineListenerProp(),
-  // 关闭动画结束时的回调
   onClosed: defineListenerProp(),
   "onUpdate:show": defineListenerProp(),
   _update: {
@@ -24399,7 +24721,14 @@ function __render__(_ctx, _cache) {
     ), vue.createVNode(_component_var_form_details, {
       "error-message": _ctx.errorMessage,
       "extra-message": _ctx.maxlengthText
-    }, null, 8, ["error-message", "extra-message"]), vue.createVNode(_component_var_popup, {
+    }, vue.createSlots({
+      _: 2
+      /* DYNAMIC */
+    }, [_ctx.$slots["extra-message"] ? {
+      name: "extra-message",
+      fn: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "extra-message")]),
+      key: "0"
+    } : void 0]), 1032, ["error-message", "extra-message"]), vue.createVNode(_component_var_popup, {
       class: vue.normalizeClass(_ctx.n("preview")),
       "var-uploader-cover": "",
       position: "center",
@@ -24784,6 +25113,8 @@ const dialog = "";
 const DialogSfc = "";
 const divider = "";
 const DividerSfc = "";
+const drag = "";
+const DragSfc = "";
 const tooltip = "";
 const ellipsis = "";
 const EllipsisSfc = "";
@@ -24869,7 +25200,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.12.3";
+const version = "2.13.0-alpha.1689346411483";
 function install(app) {
   ActionSheet.install && app.use(ActionSheet);
   AppBar.install && app.use(AppBar);
@@ -24897,6 +25228,7 @@ function install(app) {
   DatePicker.install && app.use(DatePicker);
   Dialog.install && app.use(Dialog);
   Divider.install && app.use(Divider);
+  Drag.install && app.use(Drag);
   Ellipsis.install && app.use(Ellipsis);
   Fab.install && app.use(Fab);
   Form.install && app.use(Form);
@@ -24981,6 +25313,7 @@ const index_bundle = {
   DatePicker,
   Dialog,
   Divider,
+  Drag,
   Ellipsis,
   Fab,
   Form,
@@ -25062,6 +25395,7 @@ exports.Counter = Counter;
 exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.Divider = Divider;
+exports.Drag = Drag;
 exports.Ellipsis = Ellipsis;
 exports.Fab = Fab;
 exports.Form = Form;
@@ -25144,6 +25478,7 @@ exports._CounterComponent = _CounterComponent;
 exports._DatePickerComponent = _DatePickerComponent;
 exports._DialogComponent = _DialogComponent;
 exports._DividerComponent = _DividerComponent;
+exports._DragComponent = _DragComponent;
 exports._EllipsisComponent = _EllipsisComponent;
 exports._FabComponent = _FabComponent;
 exports._FormComponent = _FormComponent;
@@ -25198,37 +25533,38 @@ exports._ThemesComponent = _ThemesComponent;
 exports._TimePickerComponent = _TimePickerComponent;
 exports._TooltipComponent = _TooltipComponent;
 exports._UploaderComponent = _UploaderComponent;
-exports.actionSheetProps = props$18;
+exports.actionSheetProps = props$19;
 exports.add = add$2;
-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.appBarProps = props$18;
+exports.avatarGroupProps = props$16;
+exports.avatarProps = props$17;
+exports.backTopProps = props$12;
+exports.badgeProps = props$11;
+exports.bottomNavigationItemProps = props$$;
+exports.bottomNavigationProps = props$10;
+exports.breadcrumbProps = props$_;
+exports.breadcrumbsProps = props$Z;
+exports.buttonProps = props$13;
+exports.cardProps = props$X;
+exports.cellProps = props$W;
+exports.checkboxGroupProps = props$T;
+exports.checkboxProps = props$U;
+exports.chipProps = props$S;
+exports.colProps = props$R;
+exports.collapseItemProps = props$P;
+exports.collapseProps = props$Q;
+exports.countdownProps = props$O;
+exports.counterProps = props$N;
+exports.datePickerProps = props$M;
 exports.default = index_bundle;
 exports.defaultLazyOptions = defaultLazyOptions;
-exports.dialogProps = props$K;
-exports.dividerProps = props$J;
+exports.dialogProps = props$L;
+exports.dividerProps = props$K;
+exports.dragProps = props$J;
 exports.enUS = enUS;
-exports.formDetailsProps = props$U;
+exports.formDetailsProps = props$V;
 exports.formProps = props$F;
-exports.iconProps = props$19;
+exports.iconProps = props$1a;
 exports.imageCache = imageCache;
 exports.imagePreviewProps = props$C;
 exports.imageProps = props$E;
@@ -25239,7 +25575,7 @@ exports.install = install;
 exports.linkProps = props$w;
 exports.listProps = props$v;
 exports.loadingBarProps = props$u;
-exports.loadingProps = props$14;
+exports.loadingProps = props$15;
 exports.menuProps = props$s;
 exports.merge = merge;
 exports.optionProps = props$r;
@@ -25249,7 +25585,7 @@ exports.packs = packs;
 exports.paginationProps = props$p;
 exports.paperProps = props$o;
 exports.pickerProps = props$n;
-exports.popupProps = props$1a;
+exports.popupProps = props$1b;
 exports.progressProps = props$m;
 exports.pullRefreshProps = props$l;
 exports.radioGroupProps = props$j;