@varlet/ui 1.27.7 → 1.27.9-alpha.1653036733481

package/es/varlet.esm.js

@@ -134,7 +134,7 @@ function kebabCase(str) {
   var ret = str.replace(/([A-Z])/g, " $1").trim();
   return ret.split(" ").join("-").toLowerCase();
 }
-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;
@@ -148,16 +148,16 @@ function asyncGeneratorStep$c(gen, resolve, reject, _next, _throw, key, arg) {
     Promise.resolve(value).then(_next, _throw);
   }
 }
-function _asyncToGenerator$c(fn) {
+function _asyncToGenerator$d(fn) {
   return function() {
     var self = this, args = arguments;
     return new Promise(function(resolve, reject) {
       var gen = fn.apply(self, 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);
     });
@@ -187,7 +187,7 @@ function inViewport(_x) {
   return _inViewport.apply(this, arguments);
 }
 function _inViewport() {
-  _inViewport = _asyncToGenerator$c(function* (element) {
+  _inViewport = _asyncToGenerator$d(function* (element) {
     yield doubleRaf();
     var {
       top,
@@ -278,6 +278,17 @@ var toSizeUnit = (value) => {
   }
   return toPxNum(value) + "px";
 };
+var multiplySizeUnit = function(value, quantity) {
+  if (quantity === void 0) {
+    quantity = 1;
+  }
+  if (value == null) {
+    return void 0;
+  }
+  var legalSize = toSizeUnit(value);
+  var unit = legalSize.match(/(vh|%|rem|px|vw)$/)[0];
+  return "" + parseFloat(legalSize) * quantity + unit;
+};
 function requestAnimationFrame(fn) {
   return globalThis.requestAnimationFrame ? globalThis.requestAnimationFrame(fn) : globalThis.setTimeout(fn, 16);
 }
@@ -335,7 +346,7 @@ function supportTouch() {
   return inBrowser2 && "ontouchstart" in window;
 }
 var _excluded = ["collect", "clear"];
-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;
@@ -349,16 +360,16 @@ function asyncGeneratorStep$b(gen, resolve, reject, _next, _throw, key, arg) {
     Promise.resolve(value).then(_next, _throw);
   }
 }
-function _asyncToGenerator$b(fn) {
+function _asyncToGenerator$c(fn) {
   return function() {
     var self = this, args = arguments;
     return new Promise(function(resolve, reject) {
       var gen = fn.apply(self, 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);
     });
@@ -545,7 +556,7 @@ function keyInProvides(key) {
 function useValidation() {
   var errorMessage = ref("");
   var validate = /* @__PURE__ */ function() {
-    var _ref = _asyncToGenerator$b(function* (rules, value, apis) {
+    var _ref = _asyncToGenerator$c(function* (rules, value, apis) {
       if (!isArray(rules) || !rules.length) {
         return true;
       }
@@ -566,7 +577,7 @@ function useValidation() {
     errorMessage.value = "";
   };
   var validateWithTrigger = /* @__PURE__ */ function() {
-    var _ref2 = _asyncToGenerator$b(function* (validateTrigger, trigger, rules, value, apis) {
+    var _ref2 = _asyncToGenerator$c(function* (validateTrigger, trigger, rules, value, apis) {
       if (validateTrigger.includes(trigger)) {
         (yield validate(rules, value, apis)) && (errorMessage.value = "");
       }
@@ -1090,7 +1101,7 @@ var props$T = {
     type: Function
   }
 };
-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;
@@ -1104,16 +1115,16 @@ function asyncGeneratorStep$a(gen, resolve, reject, _next, _throw, key, arg) {
     Promise.resolve(value).then(_next, _throw);
   }
 }
-function _asyncToGenerator$a(fn) {
+function _asyncToGenerator$b(fn) {
   return function() {
     var self = this, args = arguments;
     return new Promise(function(resolve, reject) {
       var gen = fn.apply(self, 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);
     });
@@ -1145,7 +1156,7 @@ var Icon = defineComponent({
     var nextName = ref("");
     var shrinking = ref(false);
     var handleNameChange = /* @__PURE__ */ function() {
-      var _ref = _asyncToGenerator$a(function* (newName, oldName) {
+      var _ref = _asyncToGenerator$b(function* (newName, oldName) {
         var {
           transition
         } = props2;
@@ -1683,10 +1694,10 @@ function render$W(_ctx, _cache) {
     key: 0,
     class: normalizeClass(_ctx.n("circle"))
   }, [createElementVNode("span", {
-    class: normalizeClass(_ctx.n("circle-block")),
+    class: normalizeClass(_ctx.classes(_ctx.n("circle-block"), _ctx.n("circle-block--" + _ctx.size))),
     style: normalizeStyle({
-      width: _ctx.getRadius * 2 + "px",
-      height: _ctx.getRadius * 2 + "px",
+      width: _ctx.multiplySizeUnit(_ctx.radius, 2),
+      height: _ctx.multiplySizeUnit(_ctx.radius, 2),
       color: _ctx.color
     })
   }, _hoisted_2$7, 6)], 2)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.loadingTypeDict, (nums, key) => {
@@ -1726,15 +1737,6 @@ var Loading = defineComponent({
       rect: 8,
       disappear: 3
     };
-    var sizeDict = {
-      mini: 9,
-      small: 12,
-      normal: 15,
-      large: 18
-    };
-    var getRadius = computed(() => {
-      return props2.radius ? toNumber(props2.radius) : sizeDict[props2.size];
-    });
     var isShow = computed(() => {
       if (!call(slots.default))
         return true;
@@ -1743,8 +1745,8 @@ var Loading = defineComponent({
     return {
       n: n$Z,
       classes: classes$O,
+      multiplySizeUnit,
       loadingTypeDict,
-      getRadius,
       isShow
     };
   }
@@ -2110,7 +2112,7 @@ var Badge = defineComponent({
         icon: icon2
       } = props2;
       var positionBasic = slots.default && n$W("position") + " " + n$W("--" + position);
-      var dotClass = dot && n$W("dot");
+      var dotClass = dot ? n$W("dot") : null;
       var positionClass = getPositionClass();
       var iconClass = icon2 ? n$W("icon") : null;
       return [n$W("--" + type), positionBasic, dotClass, positionClass, iconClass];
@@ -2540,6 +2542,24 @@ var props$K = {
   height: {
     type: [String, Number]
   },
+  width: {
+    type: [String, Number]
+  },
+  layout: {
+    type: String,
+    default: "column"
+  },
+  floating: {
+    type: Boolean,
+    default: false
+  },
+  "onUpdate:floating": {
+    type: Function
+  },
+  floatingDuration: {
+    type: Number,
+    default: 250
+  },
   alt: {
     type: String
   },
@@ -2563,28 +2583,78 @@ var props$K = {
     type: Function
   }
 };
+function asyncGeneratorStep$a(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+function _asyncToGenerator$a(fn) {
+  return function() {
+    var self = this, args = arguments;
+    return new Promise(function(resolve, reject) {
+      var gen = fn.apply(self, 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$T,
   classes: classes$I
 } = createNamespace("card");
+var RIPPLE_DELAY = 500;
 var _hoisted_1$g = ["src", "alt"];
 function render$Q(_ctx, _cache) {
+  var _component_var_icon = resolveComponent("var-icon");
+  var _component_var_button = resolveComponent("var-button");
   var _directive_ripple = resolveDirective("ripple");
-  return withDirectives((openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.classes(_ctx.n(), [_ctx.elevation, "var-elevation--" + _ctx.elevation, "var-elevation--2"])),
+  return openBlock(), createElementBlock("div", {
+    ref: "card",
+    class: normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n("--layout-row")])),
     onClick: _cache[0] || (_cache[0] = function() {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
+  }, [withDirectives((openBlock(), createElementBlock("div", {
+    ref: "cardFloater",
+    class: normalizeClass(_ctx.classes(_ctx.n("floater"), [_ctx.elevation, "var-elevation--" + _ctx.elevation, "var-elevation--1"])),
+    style: normalizeStyle({
+      width: _ctx.floaterWidth,
+      height: _ctx.floaterHeight,
+      top: _ctx.floaterTop,
+      left: _ctx.floaterLeft,
+      overflow: _ctx.floaterOverflow,
+      position: _ctx.floaterPosition,
+      borderRadius: _ctx.floating ? "0px" : void 0,
+      zIndex: _ctx.floated ? _ctx.zIndex : void 0,
+      transition: _ctx.floated ? "background-color " + _ctx.floatingDuration + "ms, border-radius " + _ctx.floatingDuration + "ms, width " + _ctx.floatingDuration + "ms, height " + _ctx.floatingDuration + "ms, top " + _ctx.floatingDuration + "ms, left " + _ctx.floatingDuration + "ms" : void 0
+    })
   }, [renderSlot(_ctx.$slots, "image", {}, () => [_ctx.src ? (openBlock(), createElementBlock("img", {
     key: 0,
     class: normalizeClass(_ctx.n("image")),
     style: normalizeStyle({
       objectFit: _ctx.fit,
-      height: _ctx.toSizeUnit(_ctx.height)
+      height: _ctx.toSizeUnit(_ctx.height),
+      width: _ctx.toSizeUnit(_ctx.width)
     }),
     src: _ctx.src,
     alt: _ctx.alt
-  }, null, 14, _hoisted_1$g)) : createCommentVNode("v-if", true)]), renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (openBlock(), createElementBlock("div", {
+  }, null, 14, _hoisted_1$g)) : createCommentVNode("v-if", true)]), createElementVNode("div", {
+    class: normalizeClass(_ctx.n("container"))
+  }, [renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: normalizeClass(_ctx.n("title"))
   }, toDisplayString(_ctx.title), 3)) : createCommentVNode("v-if", true)]), renderSlot(_ctx.$slots, "subtitle", {}, () => [_ctx.subtitle ? (openBlock(), createElementBlock("div", {
@@ -2596,9 +2666,42 @@ function render$Q(_ctx, _cache) {
   }, toDisplayString(_ctx.description), 3)) : createCommentVNode("v-if", true)]), _ctx.$slots.extra ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: normalizeClass(_ctx.n("footer"))
-  }, [renderSlot(_ctx.$slots, "extra")], 2)) : createCommentVNode("v-if", true)], 2)), [[_directive_ripple, {
-    disabled: !_ctx.ripple
-  }]]);
+  }, [renderSlot(_ctx.$slots, "extra")], 2)) : createCommentVNode("v-if", true), _ctx.$slots.content && !_ctx.isRow ? (openBlock(), createElementBlock("div", {
+    key: 1,
+    class: normalizeClass(_ctx.n("content")),
+    style: normalizeStyle({
+      height: _ctx.contentHeight,
+      opacity: _ctx.opacity,
+      transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
+    })
+  }, [renderSlot(_ctx.$slots, "content")], 6)) : createCommentVNode("v-if", true)], 2), _ctx.showToolBar ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(_ctx.classes(_ctx.n("toolbar"), "var--box")),
+    style: normalizeStyle({
+      zIndex: _ctx.zIndex,
+      opacity: _ctx.opacity,
+      transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
+    })
+  }, [renderSlot(_ctx.$slots, "toolbar-close", {}, () => [createVNode(_component_var_button, {
+    size: "large",
+    round: "",
+    class: normalizeClass(_ctx.classes(_ctx.n("toolbar-close"), "var-elevation--6")),
+    onClick: withModifiers(_ctx.close, ["stop"])
+  }, {
+    default: withCtx(() => [createVNode(_component_var_icon, {
+      name: "window-close",
+      size: "24px"
+    })]),
+    _: 1
+  }, 8, ["class", "onClick"])]), renderSlot(_ctx.$slots, "toolbar-extra")], 6)) : createCommentVNode("v-if", true)], 6)), [[_directive_ripple, {
+    disabled: !_ctx.ripple || _ctx.floater
+  }]]), createElementVNode("div", {
+    class: normalizeClass(_ctx.n("holder")),
+    style: normalizeStyle({
+      width: _ctx.holderWidth,
+      height: _ctx.holderHeight
+    })
+  }, null, 6)], 2);
 }
 var Card = defineComponent({
   render: render$Q,
@@ -2606,12 +2709,131 @@ var Card = defineComponent({
   directives: {
     Ripple
   },
+  components: {
+    VarIcon: Icon,
+    VarButton: Button
+  },
   props: props$K,
-  setup() {
+  setup(props2) {
+    var card2 = ref(null);
+    var cardFloater = ref(null);
+    var holderWidth = ref("auto");
+    var holderHeight = ref("auto");
+    var floaterWidth = ref("100%");
+    var floaterHeight = ref("100%");
+    var floaterTop = ref("auto");
+    var floaterLeft = ref("auto");
+    var floaterPosition = ref("static");
+    var floaterOverflow = ref("hidden");
+    var contentHeight = ref("0px");
+    var opacity = ref("0");
+    var {
+      zIndex
+    } = useZIndex(() => props2.floating, 1);
+    var isRow = computed(() => props2.layout === "row");
+    var showToolBar = ref(false);
+    var floated = ref(false);
+    useLock(() => props2.floating, () => isRow);
+    var dropdownFloaterTop = "auto";
+    var dropdownFloaterLeft = "auto";
+    var dropper = null;
+    var floater = ref(null);
+    var floating = /* @__PURE__ */ function() {
+      var _ref = _asyncToGenerator$a(function* () {
+        clearTimeout(floater.value);
+        clearTimeout(dropper);
+        floater.value = null;
+        floater.value = setTimeout(/* @__PURE__ */ _asyncToGenerator$a(function* () {
+          var {
+            width,
+            height,
+            left,
+            top
+          } = card2.value.getBoundingClientRect();
+          holderWidth.value = toSizeUnit(width);
+          holderHeight.value = toSizeUnit(height);
+          floaterWidth.value = holderWidth.value;
+          floaterHeight.value = holderHeight.value;
+          floaterTop.value = toSizeUnit(top);
+          floaterLeft.value = toSizeUnit(left);
+          floaterPosition.value = "fixed";
+          dropdownFloaterTop = floaterTop.value;
+          dropdownFloaterLeft = floaterLeft.value;
+          showToolBar.value = true;
+          yield doubleRaf();
+          floaterTop.value = "0";
+          floaterLeft.value = "0";
+          floaterWidth.value = "100vw";
+          floaterHeight.value = "100vh";
+          contentHeight.value = "auto";
+          opacity.value = "1";
+          floaterOverflow.value = "auto";
+          floated.value = true;
+        }), props2.ripple ? RIPPLE_DELAY : 0);
+      });
+      return function floating2() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    var dropdown = () => {
+      clearTimeout(dropper);
+      clearTimeout(floater.value);
+      floater.value = null;
+      floaterWidth.value = holderWidth.value;
+      floaterHeight.value = holderHeight.value;
+      floaterTop.value = dropdownFloaterTop;
+      floaterLeft.value = dropdownFloaterLeft;
+      contentHeight.value = "0px";
+      opacity.value = "0";
+      showToolBar.value = false;
+      dropper = setTimeout(() => {
+        holderWidth.value = "auto";
+        holderHeight.value = "auto";
+        floaterWidth.value = "100%";
+        floaterHeight.value = "100%";
+        floaterTop.value = "auto";
+        floaterLeft.value = "auto";
+        dropdownFloaterTop = "auto";
+        dropdownFloaterLeft = "auto";
+        floaterOverflow.value = "hidden";
+        floaterPosition.value = "static";
+        floated.value = false;
+      }, props2.floatingDuration);
+    };
+    var close = () => {
+      call(props2["onUpdate:floating"], false);
+    };
+    watch(() => props2.floating, (value) => {
+      if (isRow.value)
+        return;
+      nextTick(() => {
+        value ? floating() : dropdown();
+      });
+    }, {
+      immediate: true
+    });
     return {
       n: n$T,
       classes: classes$I,
-      toSizeUnit
+      toSizeUnit,
+      card: card2,
+      cardFloater,
+      holderWidth,
+      holderHeight,
+      floater,
+      floaterWidth,
+      floaterHeight,
+      floaterTop,
+      floaterLeft,
+      floaterPosition,
+      floaterOverflow,
+      contentHeight,
+      opacity,
+      zIndex,
+      isRow,
+      close,
+      showToolBar,
+      floated
     };
   }
 });
@@ -3368,7 +3590,7 @@ var {
 } = createNamespace("col");
 function render$K(_ctx, _cache) {
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.classes(_ctx.n(), "var--box", [_ctx.span, _ctx.n("--span-" + _ctx.span)], [_ctx.offset, _ctx.n("--offset-" + _ctx.offset)], ..._ctx.getSize("xs", _ctx.xs), ..._ctx.getSize("sm", _ctx.sm), ..._ctx.getSize("md", _ctx.md), ..._ctx.getSize("lg", _ctx.lg), ..._ctx.getSize("xl", _ctx.xl))),
+    class: normalizeClass(_ctx.classes(_ctx.n(), "var--box", [_ctx.span >= 0, _ctx.n("--span-" + _ctx.span)], [_ctx.offset, _ctx.n("--offset-" + _ctx.offset)], ..._ctx.getSize("xs", _ctx.xs), ..._ctx.getSize("sm", _ctx.sm), ..._ctx.getSize("md", _ctx.md), ..._ctx.getSize("lg", _ctx.lg), ..._ctx.getSize("xl", _ctx.xl))),
     style: normalizeStyle({
       paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),
       paddingRight: _ctx.toSizeUnit(_ctx.padding.right)
@@ -3400,18 +3622,18 @@ var Col = defineComponent({
     };
     var getSize = (mode, size) => {
       var classes2 = [];
-      if (!size) {
+      if (size == null) {
         return classes2;
       }
       if (isPlainObject(size)) {
         var {
-          span: _span,
-          offset: _offset
+          offset: _offset,
+          span: _span
         } = size;
-        _span && classes2.push(n$N("--span-" + mode + "-" + _span));
+        Number(_span) >= 0 && classes2.push(n$N("--span-" + mode + "-" + _span));
         _offset && classes2.push(n$N("--offset-" + mode + "-" + _offset));
       } else {
-        classes2.push(n$N("--span-" + mode + "-" + size));
+        Number(size) >= 0 && classes2.push(n$N("--span-" + mode + "-" + size));
       }
       return classes2;
     };
@@ -10325,7 +10547,7 @@ var props$q = {
     default: true
   },
   stickyOffsetTop: {
-    type: Number,
+    type: [String, Number],
     default: 0
   },
   cssMode: {
@@ -10405,7 +10627,7 @@ function render$r(_ctx, _cache) {
       style: normalizeStyle({
         color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : ""
       }),
-      onClick: ($event) => _ctx.anchorClick(anchorName)
+      onClick: ($event) => _ctx.anchorClick(anchorName, true)
     }, toDisplayString(anchorName), 15, _hoisted_1$a);
   }), 128))], 6)], 2);
 }
@@ -10426,7 +10648,7 @@ var IndexBar = defineComponent({
     var active = ref();
     var sticky2 = computed(() => props2.sticky);
     var cssMode = computed(() => props2.cssMode);
-    var stickyOffsetTop = computed(() => props2.stickyOffsetTop);
+    var stickyOffsetTop = computed(() => toPxNum(props2.stickyOffsetTop));
     var zIndex = computed(() => props2.zIndex);
     var indexBarProvider = {
       active,
@@ -10498,7 +10720,7 @@ var IndexBar = defineComponent({
       };
     }();
     var scrollTo$1 = (index) => {
-      requestAnimationFrame(() => anchorClick(index, true));
+      requestAnimationFrame(() => anchorClick(index));
     };
     watch(() => length.value, /* @__PURE__ */ _asyncToGenerator$5(function* () {
       yield doubleRaf();
@@ -11778,6 +12000,10 @@ var props$k = _extends$2({
   },
   onCancel: {
     type: Function
+  },
+  textFormatter: {
+    type: Function,
+    default: (text) => text
   }
 }, pickProps(props$U, ["show", "onUpdate:show", "closeOnClickOverlay", "teleport", "onOpen", "onClose", "onOpened", "onClosed", "onClickOverlay", "onRouteChange"]));
 var {
@@ -11862,7 +12088,7 @@ function render$m(_ctx, _cache) {
           key: t
         }, [createElementVNode("div", {
           class: normalizeClass(_ctx.n("text"))
-        }, toDisplayString(t), 3)], 6);
+        }, toDisplayString(_ctx.textFormatter(t, c.columnIndex)), 3)], 6);
       }), 128))], 46, _hoisted_2$4)], 42, _hoisted_1$7);
     }), 128)), createElementVNode("div", {
       class: normalizeClass(_ctx.n("picked")),
@@ -11985,7 +12211,7 @@ var VarPicker = defineComponent({
       change(scrollColumn);
     };
     var normalizeNormalColumns = (normalColumns) => {
-      return normalColumns.map((column) => {
+      return normalColumns.map((column, columnIndex) => {
         var _normalColumn$initial;
         var normalColumn = isArray(column) ? {
           texts: column
@@ -11997,6 +12223,7 @@ var VarPicker = defineComponent({
           touching: false,
           translate: center.value,
           index: (_normalColumn$initial = normalColumn.initialIndex) != null ? _normalColumn$initial : 0,
+          columnIndex,
           duration: 0,
           momentumTime: 0,
           column: normalColumn,
@@ -12009,10 +12236,10 @@ var VarPicker = defineComponent({
     };
     var normalizeCascadeColumns = (cascadeColumns) => {
       var scrollColumns2 = [];
-      createChildren(scrollColumns2, cascadeColumns, true);
+      createChildren(scrollColumns2, cascadeColumns, 0, true);
       return scrollColumns2;
     };
-    var createChildren = function(scrollColumns2, children, initial) {
+    var createChildren = function(scrollColumns2, children, columnIndex, initial) {
       if (initial === void 0) {
         initial = false;
       }
@@ -12026,6 +12253,7 @@ var VarPicker = defineComponent({
           touching: false,
           translate: center.value,
           index,
+          columnIndex,
           duration: 0,
           momentumTime: 0,
           column: {
@@ -12037,12 +12265,12 @@ var VarPicker = defineComponent({
         };
         scrollColumns2.push(scrollColumn);
         scrollTo2(scrollColumn, scrollColumn.index, 0, true);
-        createChildren(scrollColumns2, scrollColumn.columns[scrollColumn.index].children, initial);
+        createChildren(scrollColumns2, scrollColumn.columns[scrollColumn.index].children, columnIndex + 1, initial);
       }
     };
     var rebuildChildren = (scrollColumn) => {
       scrollColumns.value.splice(scrollColumns.value.indexOf(scrollColumn) + 1);
-      createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children);
+      createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children, scrollColumn.columnIndex + 1);
     };
     var change = (scrollColumn) => {
       var {
@@ -12108,7 +12336,8 @@ var VarPicker = defineComponent({
       } = getPicked();
       prevIndexes = [...indexes];
     }, {
-      immediate: true
+      immediate: true,
+      deep: true
     });
     return {
       n: n$o,
@@ -12237,7 +12466,7 @@ var props$j = {
     default: false
   },
   size: {
-    type: Number,
+    type: [Number, String],
     default: 40
   },
   rotate: {
@@ -12265,7 +12494,7 @@ function render$l(_ctx, _cache) {
   }, [createElementVNode("div", mergeProps({
     class: _ctx.n("linear-block"),
     style: {
-      height: _ctx.lineWidth + "px"
+      height: _ctx.toSizeUnit(_ctx.lineWidth)
     }
   }, _ctx.$attrs), [_ctx.track ? (openBlock(), createElementBlock("div", {
     key: 0,
@@ -12286,8 +12515,8 @@ function render$l(_ctx, _cache) {
     key: 1,
     class: normalizeClass(_ctx.n("circle")),
     style: normalizeStyle({
-      width: _ctx.size + "px",
-      height: _ctx.size + "px"
+      width: _ctx.toSizeUnit(_ctx.size),
+      height: _ctx.toSizeUnit(_ctx.size)
     })
   }, [(openBlock(), createElementBlock("svg", {
     class: normalizeClass(_ctx.n("circle-svg")),
@@ -12298,22 +12527,22 @@ function render$l(_ctx, _cache) {
   }, [_ctx.track ? (openBlock(), createElementBlock("circle", {
     key: 0,
     class: normalizeClass(_ctx.n("circle-background")),
-    cx: _ctx.size / 2,
-    cy: _ctx.size / 2,
+    cx: _ctx.multiplySizeUnit(_ctx.size, 0.5),
+    cy: _ctx.multiplySizeUnit(_ctx.size, 0.5),
     r: _ctx.circleProps.radius,
     fill: "transparent",
-    "stroke-width": _ctx.lineWidth,
+    "stroke-width": _ctx.toSizeUnit(_ctx.lineWidth),
     style: normalizeStyle({
       strokeDasharray: _ctx.circleProps.perimeter,
       stroke: _ctx.trackColor
     })
   }, null, 14, _hoisted_2$3)) : createCommentVNode("v-if", true), createElementVNode("circle", {
     class: normalizeClass(_ctx.n("circle-certain")),
-    cx: _ctx.size / 2,
-    cy: _ctx.size / 2,
+    cx: _ctx.multiplySizeUnit(_ctx.size, 0.5),
+    cy: _ctx.multiplySizeUnit(_ctx.size, 0.5),
     r: _ctx.circleProps.radius,
     fill: "transparent",
-    "stroke-width": _ctx.lineWidth,
+    "stroke-width": _ctx.toSizeUnit(_ctx.lineWidth),
     style: normalizeStyle({
       strokeDasharray: _ctx.circleProps.strokeDasharray,
       stroke: _ctx.color
@@ -12344,9 +12573,9 @@ var Progress = defineComponent({
         lineWidth,
         value
       } = props2;
-      var viewBox = "0 0 " + size + " " + size;
+      var viewBox = "0 0 " + toPxNum(size) + " " + toPxNum(size);
       var roundValue = toNumber(value) > 100 ? 100 : Math.round(toNumber(value));
-      var radius = (size - toNumber(lineWidth)) / 2;
+      var radius = (toPxNum(size) - toPxNum(lineWidth)) / 2;
       var perimeter = 2 * Math.PI * radius;
       var strokeDasharray = roundValue / 100 * perimeter + ", " + perimeter;
       return {
@@ -12360,6 +12589,8 @@ var Progress = defineComponent({
     return {
       n: n$n,
       classes: classes$i,
+      toSizeUnit,
+      multiplySizeUnit,
       linearProps,
       circleProps
     };
@@ -12975,12 +13206,10 @@ var props$f = {
     default: "star-outline"
   },
   size: {
-    type: [String, Number],
-    default: "24"
+    type: [String, Number]
   },
   gap: {
-    type: [String, Number],
-    default: "2"
+    type: [String, Number]
   },
   namespace: {
     type: String
@@ -13037,13 +13266,15 @@ function render$h(_ctx, _cache) {
       class: normalizeClass(_ctx.getClass(val)),
       onClick: ($event) => _ctx.handleClick(val, $event)
     }, [createVNode(_component_var_icon, {
+      class: normalizeClass(_ctx.n("content-icon")),
+      "var-rate-cover": "",
       transition: 0,
       namespace: _ctx.namespace,
       name: _ctx.getIconName(val),
       style: normalizeStyle({
         fontSize: _ctx.toSizeUnit(_ctx.size)
       })
-    }, null, 8, ["namespace", "name", "style"])], 14, _hoisted_1$5)), [[_directive_ripple, {
+    }, null, 8, ["class", "namespace", "name", "style"])], 14, _hoisted_1$5)), [[_directive_ripple, {
       disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
     }]]);
   }), 128))], 2), createVNode(_component_var_form_details, {
@@ -13544,6 +13775,7 @@ var Select = defineComponent({
       return label2.value;
     };
     var findLabel = (modelValue) => {
+      var _option$label$value, _option;
       var option2 = options.find((_ref2) => {
         var {
           value
@@ -13558,7 +13790,7 @@ var Select = defineComponent({
           return label2.value === modelValue;
         });
       }
-      return option2.label.value;
+      return (_option$label$value = (_option = option2) == null ? void 0 : _option.label.value) != null ? _option$label$value : "";
     };
     var computePlaceholderState = () => {
       var {
@@ -13974,8 +14206,8 @@ function render$d(_ctx, _cache) {
   }, [createElementVNode("div", {
     class: normalizeClass(_ctx.classes(_ctx.n("block"), [_ctx.isDisabled, _ctx.n("--disabled")], [_ctx.errorMessage, _ctx.n("--error")])),
     style: normalizeStyle({
-      height: _ctx.thumbSize === void 0 ? _ctx.thumbSize : 3 * _ctx.toNumber(_ctx.thumbSize) + "px",
-      margin: _ctx.thumbSize === void 0 ? _ctx.thumbSize : "0 " + _ctx.toNumber(_ctx.thumbSize) / 2 + "px"
+      height: _ctx.thumbSize === void 0 ? _ctx.thumbSize : _ctx.multiplySizeUnit(_ctx.thumbSize, 3),
+      margin: _ctx.thumbSize === void 0 ? _ctx.thumbSize : "0 " + _ctx.multiplySizeUnit(_ctx.thumbSize, 0.5)
     }),
     ref: "sliderEl",
     onClick: _cache[0] || (_cache[0] = function() {
@@ -13987,7 +14219,7 @@ function render$d(_ctx, _cache) {
     class: normalizeClass(_ctx.n("track-background")),
     style: normalizeStyle({
       background: _ctx.trackColor,
-      height: _ctx.trackHeight + "px"
+      height: _ctx.multiplySizeUnit(_ctx.trackHeight)
     })
   }, null, 6), createElementVNode("div", {
     class: normalizeClass(_ctx.n("track-fill")),
@@ -14010,8 +14242,8 @@ function render$d(_ctx, _cache) {
       class: normalizeClass(_ctx.n("thumb-block")),
       style: normalizeStyle({
         background: _ctx.thumbColor,
-        height: _ctx.thumbSize + "px",
-        width: _ctx.thumbSize + "px"
+        height: _ctx.multiplySizeUnit(_ctx.thumbSize),
+        width: _ctx.multiplySizeUnit(_ctx.thumbSize)
       })
     }, null, 6), createElementVNode("div", {
       class: normalizeClass(_ctx.classes(_ctx.n("thumb-ripple"), [_ctx.thumbsProps[item.enumValue].active, _ctx.n("thumb-ripple--active")])),
@@ -14023,8 +14255,8 @@ function render$d(_ctx, _cache) {
       style: normalizeStyle({
         background: _ctx.labelColor,
         color: _ctx.labelTextColor,
-        height: _ctx.thumbSize === void 0 ? _ctx.thumbSize : 2 * _ctx.toNumber(_ctx.thumbSize) + "px",
-        width: _ctx.thumbSize === void 0 ? _ctx.thumbSize : 2 * _ctx.toNumber(_ctx.thumbSize) + "px"
+        height: _ctx.thumbSize === void 0 ? _ctx.thumbSize : _ctx.multiplySizeUnit(_ctx.thumbSize, 2),
+        width: _ctx.thumbSize === void 0 ? _ctx.thumbSize : _ctx.multiplySizeUnit(_ctx.thumbSize, 2)
       })
     }, [createElementVNode("span", null, toDisplayString(item.value), 1)], 6)])], 46, _hoisted_1$3);
   }), 128))], 6), createVNode(_component_var_form_details, {
@@ -14086,7 +14318,7 @@ var Slider = defineComponent({
     var getRippleSize = (item) => {
       var size;
       if (props2.thumbSize !== void 0) {
-        size = thumbsProps[item.enumValue].active ? 3 * toNumber(props2.thumbSize) + "px" : "0px";
+        size = thumbsProps[item.enumValue].active ? multiplySizeUnit(props2.thumbSize, 3) : "0px";
       }
       return {
         height: size,
@@ -14280,6 +14512,7 @@ var Slider = defineComponent({
       errorMessage,
       thumbsProps,
       thumbList,
+      multiplySizeUnit,
       toNumber,
       getRippleSize,
       showLabel,
@@ -15135,8 +15368,7 @@ var props$6 = {
     type: String
   },
   size: {
-    type: [String, Number],
-    default: 20
+    type: [String, Number]
   },
   rules: {
     type: Array
@@ -15173,16 +15405,16 @@ function render$8(_ctx, _cache) {
     style: normalizeStyle(_ctx.styleComputed.switch)
   }, [createElementVNode("div", {
     style: normalizeStyle(_ctx.styleComputed.track),
-    class: normalizeClass(_ctx.classes(_ctx.n("track"), [_ctx.modelValue === _ctx.activeValue, _ctx.n("track-active")], [_ctx.errorMessage, _ctx.n("track-error")]))
+    class: normalizeClass(_ctx.classes(_ctx.n("track"), [_ctx.modelValue === _ctx.activeValue, _ctx.n("track--active")], [_ctx.errorMessage, _ctx.n("track--error")]))
   }, null, 6), withDirectives((openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.n("ripple")),
+    class: normalizeClass(_ctx.classes(_ctx.n("ripple"), [_ctx.modelValue === _ctx.activeValue, _ctx.n("ripple--active")])),
     style: normalizeStyle(_ctx.styleComputed.ripple)
   }, [createElementVNode("div", {
     style: normalizeStyle(_ctx.styleComputed.handle),
-    class: normalizeClass(_ctx.classes(_ctx.n("handle"), "var-elevation--2", [_ctx.modelValue === _ctx.activeValue, _ctx.n("handle-active")], [_ctx.errorMessage, _ctx.n("handle-error")]))
+    class: normalizeClass(_ctx.classes(_ctx.n("handle"), "var-elevation--2", [_ctx.modelValue === _ctx.activeValue, _ctx.n("handle--active")], [_ctx.errorMessage, _ctx.n("handle--error")]))
   }, [_ctx.loading ? (openBlock(), createBlock(_component_var_loading, {
     key: 0,
-    radius: _ctx.toNumber(_ctx.size) / 2 - 2
+    radius: _ctx.radius
   }, null, 8, ["radius"])) : createCommentVNode("v-if", true)], 6)], 6)), [[_directive_ripple, {
     disabled: !_ctx.ripple || _ctx.disabled || _ctx.loading || _ctx.formDisabled
   }]])], 6), createVNode(_component_var_form_details, {
@@ -15222,35 +15454,38 @@ var Switch = defineComponent({
         loadingColor,
         activeValue
       } = props2;
-      var sizeNum = toNumber(size);
-      var switchWidth = sizeNum * 2;
-      var switchHeight = sizeNum * 1.2;
       return {
         handle: {
-          width: size + "px",
-          height: size + "px",
+          width: multiplySizeUnit(size),
+          height: multiplySizeUnit(size),
           backgroundColor: modelValue === activeValue ? color || "" : closeColor || "",
           color: loadingColor && loadingColor
         },
         ripple: {
-          left: modelValue === activeValue ? sizeNum / 2 + "px" : "-" + sizeNum / 2 + "px",
+          left: modelValue === activeValue ? multiplySizeUnit(size, 0.5) : "-" + multiplySizeUnit(size, 0.5),
           color: modelValue === activeValue ? color || "" : closeColor || "#999",
-          width: sizeNum * 2 + "px",
-          height: sizeNum * 2 + "px"
+          width: multiplySizeUnit(size, 2),
+          height: multiplySizeUnit(size, 2)
         },
         track: {
-          height: switchHeight * 0.6 + "px",
-          width: switchWidth - 2 + "px",
-          borderRadius: switchWidth / 3 + "px",
+          height: multiplySizeUnit(size, 0.72),
+          width: multiplySizeUnit(size, 1.9),
+          borderRadius: multiplySizeUnit(size, 2 / 3),
           filter: modelValue === activeValue || errorMessage != null && errorMessage.value ? "opacity(.6)" : "brightness(.6)",
           backgroundColor: modelValue === activeValue ? color || "" : closeColor || ""
         },
         switch: {
-          height: switchHeight + "px",
-          width: switchWidth + "px"
+          height: multiplySizeUnit(size, 1.2),
+          width: multiplySizeUnit(size, 2)
         }
       };
     });
+    var radius = computed(() => {
+      var {
+        size = "5.333vw"
+      } = props2;
+      return multiplySizeUnit(size, 0.4);
+    });
     var switchActive = (event) => {
       var {
         onClick,
@@ -15285,7 +15520,7 @@ var Switch = defineComponent({
       n: n$8,
       classes: classes$7,
       switchActive,
-      toNumber,
+      radius,
       styleComputed,
       errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
@@ -17296,9 +17531,9 @@ var skeleton = "";
 var SkeletonSfc = "";
 var slider = "";
 var SliderSfc = "";
+var SnackbarSfc = "";
 var snackbar = "";
 var coreSfc = "";
-var SnackbarSfc = "";
 var space = "";
 var step = "";
 var StepSfc = "";