@varlet/ui 1.21.0 → 1.22.0-alpha.15

package/es/input/Input.js

@@ -5,40 +5,36 @@ import { props } from './props';
 import { isEmpty, isNumber, toNumber } from '../utils/shared';
 import { useValidation } from '../utils/components';
 import { useForm } from '../form/provide';
-import { renderSlot as _renderSlot, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, toDisplayString as _toDisplayString, resolveComponent as _resolveComponent, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, normalizeStyle as _normalizeStyle, createBlock as _createBlock, toDisplayString as _toDisplayString, resolveComponent as _resolveComponent, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
-
-_pushScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = {
   key: 0,
   class: "var-input__autocomplete"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+var _hoisted_2 = ["for"];
+export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   var _component_var_form_details = _resolveComponent("var-form-details");
 
-  return _openBlock(), _createBlock("div", {
-    class: ["var-input var--box", [_ctx.disabled ? 'var-input--disabled' : null]],
-    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-  }, [_createVNode("div", {
-    class: ["var-input__controller", [_ctx.isFocus ? 'var-input--focus' : null, _ctx.errorMessage ? 'var-input--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null]],
-    style: {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(["var-input var--box", [_ctx.disabled ? 'var-input--disabled' : null]]),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(["var-input__controller", [_ctx.isFocus ? 'var-input--focus' : null, _ctx.errorMessage ? 'var-input--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null]]),
+    style: _normalizeStyle({
       color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : null
-    }
-  }, [_createVNode("div", {
-    class: ["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]]
+    })
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])
   }, [_renderSlot(_ctx.$slots, "prepend-icon")], 2
   /* CLASS */
-  ), _createVNode("div", {
-    class: ["var-input__wrap", [!_ctx.hint ? 'var-input--non-hint' : null]]
-  }, [_ctx.type === 'password' ? (_openBlock(), _createBlock("input", _hoisted_1)) : _createCommentVNode("v-if", true), (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.textarea ? 'textarea' : 'input'), {
-    class: ["var-input__input", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.textarea ? 'var-input--textarea' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]],
+  ), _createElementVNode("div", {
+    class: _normalizeClass(["var-input__wrap", [!_ctx.hint ? 'var-input--non-hint' : null]])
+  }, [_ctx.type === 'password' ? (_openBlock(), _createElementBlock("input", _hoisted_1)) : _createCommentVNode("v-if", true), (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.textarea ? 'textarea' : 'input'), {
+    class: _normalizeClass(["var-input__input", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.textarea ? 'var-input--textarea' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
     ref: "el",
     autocomplete: "new-password",
     id: _ctx.id,
@@ -47,26 +43,26 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     value: _ctx.modelValue,
     maxlength: _ctx.maxlength,
     rows: _ctx.rows,
-    style: {
+    style: _normalizeStyle({
       color: _ctx.textColor,
       caretColor: !_ctx.errorMessage ? _ctx.focusColor : null,
       resize: _ctx.resize ? 'vertical' : 'none'
-    },
+    }),
     onFocus: _ctx.handleFocus,
     onBlur: _ctx.handleBlur,
     onInput: _ctx.handleInput,
     onChange: _ctx.handleChange
   }, null, 8
   /* PROPS */
-  , ["id", "disabled", "type", "value", "maxlength", "rows", "class", "style", "onFocus", "onBlur", "onInput", "onChange"])), _createVNode("label", {
-    class: [_ctx.textarea ? 'var-input__textarea-placeholder' : 'var-input__placeholder', _ctx.computePlaceholderState(), !_ctx.hint ? 'var-input--placeholder-non-hint' : null],
+  , ["id", "disabled", "type", "value", "maxlength", "rows", "class", "style", "onFocus", "onBlur", "onInput", "onChange"])), _createElementVNode("label", {
+    class: _normalizeClass([_ctx.textarea ? 'var-input__textarea-placeholder' : 'var-input__placeholder', _ctx.computePlaceholderState(), !_ctx.hint ? 'var-input--placeholder-non-hint' : null]),
     for: _ctx.id
   }, _toDisplayString(_ctx.placeholder), 11
   /* TEXT, CLASS, PROPS */
-  , ["for"])], 2
+  , _hoisted_2)], 2
   /* CLASS */
-  ), _createVNode("div", {
-    class: ["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]]
+  ), _createElementVNode("div", {
+    class: _normalizeClass(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])
   }, [_renderSlot(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable && !_ctx.isEmpty(_ctx.modelValue) ? (_openBlock(), _createBlock(_component_var_icon, {
     key: 0,
     class: "var-input__clear-icon",
@@ -80,17 +76,17 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   /* CLASS */
   )], 6
   /* CLASS, STYLE */
-  ), _ctx.line ? (_openBlock(), _createBlock("div", {
+  ), _ctx.line ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: ["var-input__line", [_ctx.formDisabled || _ctx.disabled ? 'var-input--line-disabled' : null, _ctx.errorMessage ? 'var-input--line-error' : null]],
-    style: {
+    class: _normalizeClass(["var-input__line", [_ctx.formDisabled || _ctx.disabled ? 'var-input--line-disabled' : null, _ctx.errorMessage ? 'var-input--line-error' : null]]),
+    style: _normalizeStyle({
       background: !_ctx.errorMessage ? _ctx.blurColor : null
-    }
-  }, [_createVNode("div", {
-    class: ["var-input__dot", [_ctx.isFocus ? 'var-input--spread' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--line-disabled' : null, _ctx.errorMessage ? 'var-input--line-error' : null]],
-    style: {
+    })
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(["var-input__dot", [_ctx.isFocus ? 'var-input--spread' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--line-disabled' : null, _ctx.errorMessage ? 'var-input--line-error' : null]]),
+    style: _normalizeStyle({
       background: !_ctx.errorMessage ? _ctx.focusColor : null
-    }
+    })
   }, null, 6
   /* CLASS, STYLE */
   )], 6
@@ -103,7 +99,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   , ["error-message", "maxlength-text"])], 2
   /* CLASS */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarInput',

package/es/list/List.js

@@ -9,11 +9,9 @@ import { getParentScroller, isHidden, toPxNum } from '../utils/elements';
 import { props } from './props';
 import { isNumber, dt } from '../utils/shared';
 import { pack } from '../locale';
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createVNode as _createVNode, resolveComponent as _resolveComponent, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
-
-_pushScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = {
   class: "var-list var--box",
@@ -32,40 +30,37 @@ var _hoisted_5 = {
   class: "var-list__detector",
   ref: "detectorEl"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _component_var_loading = _resolveComponent("var-loading");
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default"), _ctx.loading ? _renderSlot(_ctx.$slots, "loading", {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default"), _ctx.loading ? _renderSlot(_ctx.$slots, "loading", {
     key: 0
-  }, () => [_createVNode("div", _hoisted_2, [_createVNode("div", _hoisted_3, _toDisplayString(_ctx.dt(_ctx.loadingText, _ctx.pack.listLoadingText)), 1
+  }, () => [_createElementVNode("div", _hoisted_2, [_createElementVNode("div", _hoisted_3, _toDisplayString(_ctx.dt(_ctx.loadingText, _ctx.pack.listLoadingText)), 1
   /* TEXT */
   ), _createVNode(_component_var_loading, {
     size: "mini",
     radius: 10
   })])]) : _createCommentVNode("v-if", true), _ctx.finished ? _renderSlot(_ctx.$slots, "finished", {
     key: 1
-  }, () => [_createVNode("div", _hoisted_4, _toDisplayString(_ctx.dt(_ctx.finishedText, _ctx.pack.listFinishedText)), 1
+  }, () => [_createElementVNode("div", _hoisted_4, _toDisplayString(_ctx.dt(_ctx.finishedText, _ctx.pack.listFinishedText)), 1
   /* TEXT */
   )]) : _createCommentVNode("v-if", true), _ctx.error ? _renderSlot(_ctx.$slots, "error", {
     key: 2
-  }, () => [_withDirectives(_createVNode("div", {
+  }, () => [_withDirectives(_createElementVNode("div", {
     class: "var-list__error",
-    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.load && _ctx.load(...args))
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.load && _ctx.load(...args))
   }, [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.errorText, _ctx.pack.listErrorText)), 1
   /* TEXT */
   )], 512
   /* NEED_PATCH */
-  ), [[_directive_ripple]])]) : _createCommentVNode("v-if", true), _createVNode("div", _hoisted_5, null, 512
+  ), [[_directive_ripple]])]) : _createCommentVNode("v-if", true), _createElementVNode("div", _hoisted_5, null, 512
   /* NEED_PATCH */
   )], 512
   /* NEED_PATCH */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarList',

package/es/loading/Loading.js

@@ -1,10 +1,8 @@
 import { defineComponent } from 'vue';
 import { props } from './props';
-import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, normalizeClass as _normalizeClass, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
-
-_pushScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = {
   class: "var--box var-loading"
@@ -14,41 +12,40 @@ var _hoisted_2 = {
   class: "var-loading__circle"
 };
 
-var _hoisted_3 = /*#__PURE__*/_createVNode("svg", {
+var _hoisted_3 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("svg", {
   viewBox: "25 25 50 50"
-}, [/*#__PURE__*/_createVNode("circle", {
+}, [/*#__PURE__*/_createElementVNode("circle", {
   cx: "50",
   cy: "50",
   r: "20",
   fill: "none"
 })], -1
 /* HOISTED */
-);
-
-_popScopeId();
+));
 
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
-  return _openBlock(), _createBlock("div", _hoisted_1, [_ctx.type === 'circle' ? (_openBlock(), _createBlock("div", _hoisted_2, [_createVNode("span", {
+var _hoisted_4 = [_hoisted_3];
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_ctx.type === 'circle' ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_createElementVNode("span", {
     class: "var-loading__circle-block",
-    style: {
+    style: _normalizeStyle({
       width: _ctx.radius * 2 + 'px',
       height: _ctx.radius * 2 + 'px'
-    }
-  }, [_hoisted_3], 4
+    })
+  }, _hoisted_4, 4
   /* STYLE */
-  )])) : _createCommentVNode("v-if", true), (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.loadingTypeDict, (nums, key) => {
-    return _openBlock(), _createBlock(_Fragment, {
+  )])) : _createCommentVNode("v-if", true), (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.loadingTypeDict, (nums, key) => {
+    return _openBlock(), _createElementBlock(_Fragment, {
       key: key
-    }, [_ctx.type === key ? (_openBlock(), _createBlock("div", {
+    }, [_ctx.type === key ? (_openBlock(), _createElementBlock("div", {
       key: 0,
-      class: "var-loading__" + key + " var-loading__" + key + "-" + _ctx.size
-    }, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(nums, num => {
-      return _openBlock(), _createBlock("div", {
+      class: _normalizeClass("var-loading__" + key + " var-loading__" + key + "-" + _ctx.size)
+    }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(nums, num => {
+      return _openBlock(), _createElementBlock("div", {
         key: num + key,
-        style: {
+        style: _normalizeStyle({
           backgroundColor: _ctx.color
-        },
-        class: "var-loading__" + key + "-item var-loading__" + key + "-item-" + _ctx.size
+        }),
+        class: _normalizeClass("var-loading__" + key + "-item var-loading__" + key + "-item-" + _ctx.size)
       }, null, 6
       /* CLASS, STYLE */
       );
@@ -62,7 +59,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }), 128
   /* KEYED_FRAGMENT */
   ))]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarLoading',

package/es/menu/Menu.js

@@ -6,15 +6,12 @@ import { defineComponent, ref, watch, onMounted, onUnmounted, nextTick } from 'v
 import { props } from './props';
 import { getLeft, getTop, toSizeUnit } from '../utils/elements';
 import { useZIndex } from '../context/zIndex';
-import { renderSlot as _renderSlot, vShow as _vShow, withModifiers as _withModifiers, createVNode as _createVNode, withDirectives as _withDirectives, Transition as _Transition, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from "vue";
-
-var _withId = /*#__PURE__*/_withScopeId("");
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
-  return _openBlock(), _createBlock("div", {
+import { renderSlot as _renderSlot, vShow as _vShow, withModifiers as _withModifiers, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock, createElementBlock as _createElementBlock } from "vue";
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
     class: "var-menu",
     ref: "host",
-    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
   }, [_renderSlot(_ctx.$slots, "default"), (_openBlock(), _createBlock(_Teleport, {
     to: _ctx.teleport
   }, [_createVNode(_Transition, {
@@ -22,15 +19,15 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     onAfterEnter: _ctx.onOpened,
     onAfterLeave: _ctx.onClosed
   }, {
-    default: _withId(() => [_withDirectives(_createVNode("div", {
+    default: _withCtx(() => [_withDirectives(_createElementVNode("div", {
       class: "var-menu__menu var-elevation--3",
       ref: "menu",
-      style: {
+      style: _normalizeStyle({
         top: "calc(" + _ctx.top + "px + " + _ctx.toSizeUnit(_ctx.offsetY) + ")",
         left: "calc(" + _ctx.left + "px + " + _ctx.toSizeUnit(_ctx.offsetX) + ")",
         zIndex: _ctx.zIndex
-      },
-      onClick: _cache[1] || (_cache[1] = _withModifiers(() => {}, ["stop"]))
+      }),
+      onClick: _cache[0] || (_cache[0] = _withModifiers(() => {}, ["stop"]))
     }, [_renderSlot(_ctx.$slots, "menu")], 4
     /* STYLE */
     ), [[_vShow, _ctx.show]])]),
@@ -44,7 +41,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   , ["to"]))], 512
   /* NEED_PATCH */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarMenu',

package/es/option/Option.js

@@ -3,35 +3,30 @@ import Ripple from '../ripple';
 import { defineComponent, computed, ref, watch } from 'vue';
 import { useSelect } from './provide';
 import { props } from './props';
-import { createVNode as _createVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
-
-_pushScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = {
   class: "var-option__text"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _component_var_checkbox = _resolveComponent("var-checkbox");
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _withDirectives((_openBlock(), _createBlock("div", {
-    class: ["var-option var--box", [_ctx.optionSelected ? 'var-option--selected-color' : null]],
-    style: {
+  return _withDirectives((_openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(["var-option var--box", [_ctx.optionSelected ? 'var-option--selected-color' : null]]),
+    style: _normalizeStyle({
       width: _ctx.wrapWidth,
       color: _ctx.optionSelected ? _ctx.focusColor : null
-    },
-    onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-  }, [_createVNode("div", {
-    class: ["var-option__cover", [_ctx.optionSelected ? 'var-option--selected-background' : null]],
-    style: {
+    }),
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(["var-option__cover", [_ctx.optionSelected ? 'var-option--selected-background' : null]]),
+    style: _normalizeStyle({
       background: _ctx.optionSelected ? _ctx.focusColor : null
-    }
+    })
   }, null, 6
   /* CLASS, STYLE */
   ), _ctx.multiple ? (_openBlock(), _createBlock(_component_var_checkbox, {
@@ -39,17 +34,17 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     ref: "checkbox",
     "checked-color": _ctx.focusColor,
     modelValue: _ctx.optionSelected,
-    "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.optionSelected = $event),
-    onClick: _cache[2] || (_cache[2] = _withModifiers(() => {}, ["stop"])),
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.optionSelected = $event),
+    onClick: _cache[1] || (_cache[1] = _withModifiers(() => {}, ["stop"])),
     onChange: _ctx.handleSelect
   }, null, 8
   /* PROPS */
-  , ["checked-color", "modelValue", "onChange"])) : _createCommentVNode("v-if", true), _createVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.label), 1
+  , ["checked-color", "modelValue", "onChange"])) : _createCommentVNode("v-if", true), _createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.label), 1
   /* TEXT */
   )])])], 6
   /* CLASS, STYLE */
   )), [[_directive_ripple]]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarOption',

package/es/picker/Picker.js

@@ -7,11 +7,9 @@ import { toPxNum, getTranslate } from '../utils/elements';
 import { pack } from '../locale';
 var MOMENTUM_RECORD_TIME = 300;
 var MOMENTUM_ALLOW_DISTANCE = 15;
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, withModifiers as _withModifiers, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, withModifiers as _withModifiers, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
-
-_pushScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = {
   class: "var-picker__toolbar"
@@ -19,13 +17,12 @@ var _hoisted_1 = {
 var _hoisted_2 = {
   class: "var-picker__title"
 };
-var _hoisted_3 = {
+var _hoisted_3 = ["onTouchstart", "onTouchmove", "onTouchend"];
+var _hoisted_4 = ["onTransitionend"];
+var _hoisted_5 = {
   class: "var-picker__text"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _component_var_button = _resolveComponent("var-button");
 
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.dynamic ? 'var-popup' : _ctx.Transition), _mergeProps(_ctx.dynamic ? {
@@ -48,16 +45,16 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   } : null, {
     "var-picker-cover": ""
   }), {
-    default: _withId(() => [_createVNode("div", _mergeProps({
+    default: _withCtx(() => [_createElementVNode("div", _mergeProps({
       class: "var-picker"
-    }, _ctx.$attrs), [_createVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "cancel", {}, () => [_createVNode(_component_var_button, {
+    }, _ctx.$attrs), [_createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "cancel", {}, () => [_createVNode(_component_var_button, {
       class: "var-picker__cancel-button",
       "var-picker-cover": "",
       text: "",
       "text-color": _ctx.cancelButtonTextColor,
       onClick: _ctx.cancel
     }, {
-      default: _withId(() => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.cancelButtonText, _ctx.pack.pickerCancelButtonText)), 1
+      default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.cancelButtonText, _ctx.pack.pickerCancelButtonText)), 1
       /* TEXT */
       )]),
       _: 1
@@ -65,7 +62,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
 
     }, 8
     /* PROPS */
-    , ["text-color", "onClick"])]), _renderSlot(_ctx.$slots, "title", {}, () => [_createVNode("div", _hoisted_2, _toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.pickerTitle)), 1
+    , ["text-color", "onClick"])]), _renderSlot(_ctx.$slots, "title", {}, () => [_createElementVNode("div", _hoisted_2, _toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.pickerTitle)), 1
     /* TEXT */
     )]), _renderSlot(_ctx.$slots, "confirm", {}, () => [_createVNode(_component_var_button, {
       class: "var-picker__confirm-button",
@@ -74,7 +71,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
       "text-color": _ctx.confirmButtonTextColor,
       onClick: _ctx.confirm
     }, {
-      default: _withId(() => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.confirmButtonText, _ctx.pack.pickerConfirmButtonText)), 1
+      default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.confirmButtonText, _ctx.pack.pickerConfirmButtonText)), 1
       /* TEXT */
       )]),
       _: 1
@@ -82,35 +79,35 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
 
     }, 8
     /* PROPS */
-    , ["text-color", "onClick"])])]), _createVNode("div", {
+    , ["text-color", "onClick"])])]), _createElementVNode("div", {
       class: "var-picker__columns",
-      style: {
+      style: _normalizeStyle({
         height: _ctx.columnHeight + "px"
-      }
-    }, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.scrollColumns, c => {
-      return _openBlock(), _createBlock("div", {
+      })
+    }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.scrollColumns, c => {
+      return _openBlock(), _createElementBlock("div", {
         class: "var-picker__column",
         key: c,
         onTouchstart: $event => _ctx.handleTouchstart($event, c),
         onTouchmove: _withModifiers($event => _ctx.handleTouchmove($event, c), ["prevent"]),
         onTouchend: $event => _ctx.handleTouchend($event, c)
-      }, [_createVNode("div", {
+      }, [_createElementVNode("div", {
         class: "var-picker__scroller",
         ref: el => c.scrollEl = el,
-        style: {
+        style: _normalizeStyle({
           transform: "translateY(" + c.translate + "px)",
           transitionDuration: c.duration + "ms",
           transitionProperty: c.duration ? 'transform' : 'none'
-        },
+        }),
         onTransitionend: $event => _ctx.handleTransitionend(c)
-      }, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(c.column.texts, t => {
-        return _openBlock(), _createBlock("div", {
+      }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(c.column.texts, t => {
+        return _openBlock(), _createElementBlock("div", {
           class: "var-picker__option",
-          style: {
+          style: _normalizeStyle({
             height: _ctx.optionHeight + "px"
-          },
+          }),
           key: t
-        }, [_createVNode("div", _hoisted_3, _toDisplayString(t), 1
+        }, [_createElementVNode("div", _hoisted_5, _toDisplayString(t), 1
         /* TEXT */
         )], 4
         /* STYLE */
@@ -119,24 +116,24 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
       /* KEYED_FRAGMENT */
       ))], 44
       /* STYLE, PROPS, HYDRATE_EVENTS */
-      , ["onTransitionend"])], 40
+      , _hoisted_4)], 40
       /* PROPS, HYDRATE_EVENTS */
-      , ["onTouchstart", "onTouchmove", "onTouchend"]);
+      , _hoisted_3);
     }), 128
     /* KEYED_FRAGMENT */
-    )), _createVNode("div", {
+    )), _createElementVNode("div", {
       class: "var-picker__picked",
-      style: {
+      style: _normalizeStyle({
         top: _ctx.center + "px",
         height: _ctx.optionHeight + "px"
-      }
+      })
     }, null, 4
     /* STYLE */
-    ), _createVNode("div", {
+    ), _createElementVNode("div", {
       class: "var-picker__mask",
-      style: {
+      style: _normalizeStyle({
         backgroundSize: "100% " + (_ctx.columnHeight - _ctx.optionHeight) / 2 + "px"
-      }
+      })
     }, null, 4
     /* STYLE */
     )], 4
@@ -150,7 +147,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }, 16
   /* FULL_PROPS */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarPicker',

package/es/popup/Popup.js

@@ -5,11 +5,8 @@ import { props } from './props';
 import { useLock } from '../context/lock';
 import { useZIndex } from '../context/zIndex';
 import { addRouteListener, useTeleport } from '../utils/components';
-import { openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, mergeProps as _mergeProps, Transition as _Transition, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, Teleport as _Teleport, withScopeId as _withScopeId } from "vue";
-
-var _withId = /*#__PURE__*/_withScopeId("");
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, vShow as _vShow, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Teleport as _Teleport, createBlock as _createBlock } from "vue";
+export function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_Teleport, {
     to: _ctx.teleport,
     disabled: !_ctx.teleport || _ctx.disabled
@@ -18,24 +15,24 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     onAfterEnter: _ctx.onOpened,
     onAfterLeave: _ctx.onClosed
   }, {
-    default: _withId(() => [_withDirectives(_createVNode("div", {
+    default: _withCtx(() => [_withDirectives(_createElementVNode("div", {
       class: "var--box var-popup",
-      style: {
+      style: _normalizeStyle({
         zIndex: _ctx.zIndex - 2
-      }
-    }, [_ctx.overlay ? (_openBlock(), _createBlock("div", {
+      })
+    }, [_ctx.overlay ? (_openBlock(), _createElementBlock("div", {
       key: 0,
-      class: ["var-popup__overlay", [_ctx.overlayClass]],
-      style: _extends({
+      class: _normalizeClass(["var-popup__overlay", [_ctx.overlayClass]]),
+      style: _normalizeStyle(_extends({
         zIndex: _ctx.zIndex - 1
-      }, _ctx.overlayStyle),
-      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.hidePopup && _ctx.hidePopup(...args))
+      }, _ctx.overlayStyle)),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.hidePopup && _ctx.hidePopup(...args))
     }, null, 6
     /* CLASS, STYLE */
     )) : _createCommentVNode("v-if", true), _createVNode(_Transition, {
       name: _ctx.transition ? _ctx.transition : "var-pop-" + _ctx.position
     }, {
-      default: _withId(() => [_ctx.show ? (_openBlock(), _createBlock("div", _mergeProps({
+      default: _withCtx(() => [_ctx.show ? (_openBlock(), _createElementBlock("div", _mergeProps({
         key: 0,
         class: ["var-popup__content var-elevation--3", ["var-popup--" + _ctx.position]],
         style: {
@@ -52,15 +49,15 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     , ["name"])], 4
     /* STYLE */
     ), [[_vShow, _ctx.show]])]),
-    _: 1
-    /* STABLE */
+    _: 3
+    /* FORWARDED */
 
   }, 8
   /* PROPS */
   , ["onAfterEnter", "onAfterLeave"])], 8
   /* PROPS */
   , ["to", "disabled"]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarPopup',