@varlet/ui 1.21.0 → 1.22.0-alpha.10

package/es/progress/Progress.js

@@ -1,11 +1,9 @@
 import { defineComponent, computed } from 'vue';
 import { props } from './props';
 import { toNumber } from '../utils/shared';
-import { openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createVNode as _createVNode, mergeProps as _mergeProps, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, mergeProps as _mergeProps, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, 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-progress"
@@ -14,54 +12,54 @@ var _hoisted_2 = {
   key: 0,
   class: "var-progress-linear"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
-  return _openBlock(), _createBlock("div", _hoisted_1, [_ctx.mode === 'linear' ? (_openBlock(), _createBlock("div", _hoisted_2, [_createVNode("div", _mergeProps({
+var _hoisted_3 = ["viewBox"];
+var _hoisted_4 = ["cx", "cy", "r", "stroke-width"];
+var _hoisted_5 = ["cx", "cy", "r", "stroke-width"];
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_ctx.mode === 'linear' ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_createElementVNode("div", _mergeProps({
     class: "var-progress-linear__block",
     style: {
       height: _ctx.lineWidth + "px"
     }
-  }, _ctx.$attrs), [_ctx.track ? (_openBlock(), _createBlock("div", {
+  }, _ctx.$attrs), [_ctx.track ? (_openBlock(), _createElementBlock("div", {
     key: 0,
     class: "var-progress-linear__background",
-    style: {
+    style: _normalizeStyle({
       background: _ctx.trackColor
-    }
+    })
   }, null, 4
   /* STYLE */
-  )) : _createCommentVNode("v-if", true), _createVNode("div", {
-    class: "var-progress-linear__certain" + (_ctx.ripple ? ' var-progress-linear__ripple' : ''),
-    style: {
+  )) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+    class: _normalizeClass("var-progress-linear__certain" + (_ctx.ripple ? ' var-progress-linear__ripple' : '')),
+    style: _normalizeStyle({
       background: _ctx.color,
       width: _ctx.linearProps.width
-    }
+    })
   }, null, 6
   /* CLASS, STYLE */
   )], 16
   /* FULL_PROPS */
-  ), _ctx.label ? (_openBlock(), _createBlock("div", _mergeProps({
+  ), _ctx.label ? (_openBlock(), _createElementBlock("div", _mergeProps({
     key: 0,
     class: "var-progress-linear__label"
   }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.linearProps.roundValue), 1
   /* TEXT */
   )])], 16
   /* FULL_PROPS */
-  )) : _createCommentVNode("v-if", true)])) : _createCommentVNode("v-if", true), _ctx.mode === 'circle' ? (_openBlock(), _createBlock("div", {
+  )) : _createCommentVNode("v-if", true)])) : _createCommentVNode("v-if", true), _ctx.mode === 'circle' ? (_openBlock(), _createElementBlock("div", {
     key: 1,
     class: "var-progress-circle",
-    style: {
+    style: _normalizeStyle({
       width: _ctx.size + "px",
       height: _ctx.size + "px"
-    }
-  }, [(_openBlock(), _createBlock("svg", {
+    })
+  }, [(_openBlock(), _createElementBlock("svg", {
     class: "var-progress-circle__svg",
-    style: {
+    style: _normalizeStyle({
       transform: "rotate(" + (_ctx.rotate - 90) + "deg)"
-    },
+    }),
     viewBox: _ctx.circleProps.viewBox
-  }, [_ctx.track ? (_openBlock(), _createBlock("circle", {
+  }, [_ctx.track ? (_openBlock(), _createElementBlock("circle", {
     key: 0,
     class: "var-progress-circle__background",
     cx: _ctx.size / 2,
@@ -69,28 +67,28 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     r: _ctx.circleProps.radius,
     fill: "transparent",
     "stroke-width": _ctx.lineWidth,
-    style: {
+    style: _normalizeStyle({
       strokeDasharray: _ctx.circleProps.perimeter,
       stroke: _ctx.trackColor
-    }
+    })
   }, null, 12
   /* STYLE, PROPS */
-  , ["cx", "cy", "r", "stroke-width"])) : _createCommentVNode("v-if", true), _createVNode("circle", {
+  , _hoisted_4)) : _createCommentVNode("v-if", true), _createElementVNode("circle", {
     class: "var-progress-circle__certain",
     cx: _ctx.size / 2,
     cy: _ctx.size / 2,
     r: _ctx.circleProps.radius,
     fill: "transparent",
     "stroke-width": _ctx.lineWidth,
-    style: {
+    style: _normalizeStyle({
       strokeDasharray: _ctx.circleProps.strokeDasharray,
       stroke: _ctx.color
-    }
+    })
   }, null, 12
   /* STYLE, PROPS */
-  , ["cx", "cy", "r", "stroke-width"])], 12
+  , _hoisted_5)], 12
   /* STYLE, PROPS */
-  , ["viewBox"])), _ctx.label ? (_openBlock(), _createBlock("div", _mergeProps({
+  , _hoisted_3)), _ctx.label ? (_openBlock(), _createElementBlock("div", _mergeProps({
     key: 0,
     class: "var-progress-circle__label"
   }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.circleProps.roundValue), 1
@@ -100,7 +98,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   )) : _createCommentVNode("v-if", true)], 4
   /* STYLE */
   )) : _createCommentVNode("v-if", true)]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarProgress',

package/es/pull-refresh/PullRefresh.js

@@ -6,27 +6,24 @@ import { toNumber } from '../utils/shared';
 var MAX_DISTANCE = 100;
 var CONTROL_POSITION = -50;
 var scroller = window;
-import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from "vue";
-
-var _withId = /*#__PURE__*/_withScopeId("");
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
-  return _openBlock(), _createBlock("div", {
+  return _openBlock(), _createElementBlock("div", {
     ref: "freshNode",
     class: "var-pull-refresh",
-    onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
-    onTouchmove: _cache[2] || (_cache[2] = (...args) => _ctx.touchMove && _ctx.touchMove(...args)),
-    onTouchend: _cache[3] || (_cache[3] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args)),
-    onTouchcancel: _cache[4] || (_cache[4] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
-  }, [_createVNode("div", {
-    class: ["var-pull-refresh__control var-elevation--2", [_ctx.isSuccess ? 'var-pull-refresh__control-success' : null]],
-    style: _ctx.controlStyle
+    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
+    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.touchMove && _ctx.touchMove(...args)),
+    onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args)),
+    onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(["var-pull-refresh__control var-elevation--2", [_ctx.isSuccess ? 'var-pull-refresh__control-success' : null]]),
+    style: _normalizeStyle(_ctx.controlStyle)
   }, [_createVNode(_component_var_icon, {
     name: _ctx.iconName,
     transition: 200,
-    class: _ctx.iconClass,
+    class: _normalizeClass(_ctx.iconClass),
     "var-pull-refresh-cover": ""
   }, null, 8
   /* PROPS */
@@ -35,7 +32,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   ), _renderSlot(_ctx.$slots, "default")], 544
   /* HYDRATE_EVENTS, NEED_PATCH */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarPullRefresh',

package/es/radio/Radio.js

@@ -6,37 +6,32 @@ import { props } from './props';
 import { useValidation } from '../utils/components';
 import { useRadioGroup } from './provide';
 import { useForm } from '../form/provide';
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, mergeProps as _mergeProps, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementVNode as _createElementVNode, withDirectives as _withDirectives, mergeProps as _mergeProps, 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-radio__wrap"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   var _component_var_form_details = _resolveComponent("var-form-details");
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createBlock("div", _hoisted_1, [_createVNode("div", _mergeProps({
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _mergeProps({
     class: "var-radio",
-    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-  }, _ctx.$attrs), [_withDirectives(_createVNode("div", {
-    class: ["var-radio__action", [_ctx.checked ? 'var-radio--checked' : 'var-radio--unchecked', _ctx.errorMessage || _ctx.radioGroupErrorMessage ? 'var-radio--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-radio--disabled' : null]],
-    style: {
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, _ctx.$attrs), [_withDirectives(_createElementVNode("div", {
+    class: _normalizeClass(["var-radio__action", [_ctx.checked ? 'var-radio--checked' : 'var-radio--unchecked', _ctx.errorMessage || _ctx.radioGroupErrorMessage ? 'var-radio--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-radio--disabled' : null]]),
+    style: _normalizeStyle({
       color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor
-    }
+    })
   }, [_ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", {
     key: 0
   }, () => [_createVNode(_component_var_icon, {
-    class: ["var-radio__icon", [_ctx.withAnimation ? 'var-radio--with-animation' : null]],
+    class: _normalizeClass(["var-radio__icon", [_ctx.withAnimation ? 'var-radio--with-animation' : null]]),
     "var-radio-cover": "",
     name: "radio-marked",
     size: _ctx.iconSize
@@ -45,7 +40,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   , ["class", "size"])]) : _renderSlot(_ctx.$slots, "unchecked-icon", {
     key: 1
   }, () => [_createVNode(_component_var_icon, {
-    class: ["var-radio__icon", [_ctx.withAnimation ? 'var-radio--with-animation' : null]],
+    class: _normalizeClass(["var-radio__icon", [_ctx.withAnimation ? 'var-radio--with-animation' : null]]),
     "var-radio-cover": "",
     name: "radio-blank",
     size: _ctx.iconSize
@@ -55,8 +50,8 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   /* CLASS, STYLE */
   ), [[_directive_ripple, {
     disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
-  }]]), _createVNode("div", {
-    class: ["var-radio__text", [_ctx.errorMessage || _ctx.radioGroupErrorMessage ? 'var-radio--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-radio--disabled' : null]]
+  }]]), _createElementVNode("div", {
+    class: _normalizeClass(["var-radio__text", [_ctx.errorMessage || _ctx.radioGroupErrorMessage ? 'var-radio--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-radio--disabled' : null]])
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
   )], 16
@@ -66,7 +61,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }, null, 8
   /* PROPS */
   , ["error-message"])]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarRadio',

package/es/radio-group/RadioGroup.js

@@ -4,23 +4,18 @@ import { props } from './props';
 import { useValidation } from '../utils/components';
 import { useRadios } from './provide';
 import { useForm } from '../form/provide';
-import { renderSlot as _renderSlot, createVNode as _createVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, 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-radio-group__wrap"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _component_var_form_details = _resolveComponent("var-form-details");
 
-  return _openBlock(), _createBlock("div", _hoisted_1, [_createVNode("div", {
-    class: ["var-radio-group", ["var-radio-group--" + _ctx.direction]]
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", {
+    class: _normalizeClass(["var-radio-group", ["var-radio-group--" + _ctx.direction]])
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
   ), _createVNode(_component_var_form_details, {
@@ -28,7 +23,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }, null, 8
   /* PROPS */
   , ["error-message"])]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarRadioGroup',

package/es/rate/Rate.js

@@ -7,11 +7,9 @@ import { useValidation } from '../utils/components';
 import { toSizeUnit } from '../utils/elements';
 import { toNumber } from '../utils/shared';
 import { props } from './props';
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, withDirectives as _withDirectives, createElementVNode as _createElementVNode, 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-rate__warp"
@@ -19,33 +17,31 @@ var _hoisted_1 = {
 var _hoisted_2 = {
   class: "var-rate"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+var _hoisted_3 = ["onClick"];
+export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   var _component_var_form_details = _resolveComponent("var-form-details");
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createBlock("div", _hoisted_1, [_createVNode("div", _hoisted_2, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.toNumber(_ctx.count), val => {
-    return _withDirectives((_openBlock(), _createBlock("div", {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.toNumber(_ctx.count), val => {
+    return _withDirectives((_openBlock(), _createElementBlock("div", {
       key: val,
-      style: _ctx.getStyle(val),
-      class: _ctx.getClass(val),
+      style: _normalizeStyle(_ctx.getStyle(val)),
+      class: _normalizeClass(_ctx.getClass(val)),
       onClick: $event => _ctx.handleClick(val, $event)
     }, [_createVNode(_component_var_icon, {
       transition: 0,
       name: _ctx.getIconName(val),
-      style: {
+      style: _normalizeStyle({
         fontSize: _ctx.toSizeUnit(_ctx.size)
-      }
+      })
     }, null, 8
     /* PROPS */
     , ["name", "style"])], 14
     /* CLASS, STYLE, PROPS */
-    , ["onClick"])), [[_directive_ripple, {
+    , _hoisted_3)), [[_directive_ripple, {
       disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
     }]]);
   }), 128
@@ -55,7 +51,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }, null, 8
   /* PROPS */
   , ["error-message"])]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarRate',

package/es/row/Row.js

@@ -2,22 +2,19 @@ import { defineComponent, watch } from 'vue';
 import { props } from './props';
 import { useCols } from './provide';
 import { toPxNum } from '../utils/elements';
-import { renderSlot as _renderSlot, 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, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
     class: "var-row var--box",
-    style: {
+    style: _normalizeStyle({
       justifyContent: _ctx.justify,
       alignItems: _ctx.align
-    },
-    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+    }),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
   }, [_renderSlot(_ctx.$slots, "default")], 4
   /* STYLE */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarRow',

package/es/select/Select.js

@@ -9,11 +9,9 @@ import { useValidation } from '../utils/components';
 import { useOptions } from './provide';
 import { useForm } from '../form/provide';
 import { toPxNum } from '../utils/elements';
-import { renderSlot as _renderSlot, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, createCommentVNode as _createCommentVNode, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle, 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
@@ -32,10 +30,7 @@ var _hoisted_4 = {
 var _hoisted_5 = {
   class: "var-select__scroller"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _component_var_chip = _resolveComponent("var-chip");
 
   var _component_var_icon = _resolveComponent("var-icon");
@@ -44,16 +39,16 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
 
   var _component_var_form_details = _resolveComponent("var-form-details");
 
-  return _openBlock(), _createBlock("div", {
-    class: ["var-select var--box", [_ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]],
-    onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-  }, [_createVNode("div", {
-    class: ["var-select__controller", [_ctx.isFocus ? 'var-select--focus' : null, _ctx.errorMessage ? 'var-select--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]],
-    style: {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(["var-select var--box", [_ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]]),
+    onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(["var-select__controller", [_ctx.isFocus ? 'var-select--focus' : null, _ctx.errorMessage ? 'var-select--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]]),
+    style: _normalizeStyle({
       color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : null
-    }
-  }, [_createVNode("div", {
-    class: ["var-select__icon", [!_ctx.hint ? 'var-select--non-hint' : null]]
+    })
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(["var-select__icon", [!_ctx.hint ? 'var-select--non-hint' : null]])
   }, [_renderSlot(_ctx.$slots, "prepend-icon")], 2
   /* CLASS */
   ), _createVNode(_component_var_menu, {
@@ -61,31 +56,31 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     "var-select-cover": "",
     "offset-y": _ctx.offsetY,
     show: _ctx.isFocus,
-    "onUpdate:show": _cache[3] || (_cache[3] = $event => _ctx.isFocus = $event),
+    "onUpdate:show": _cache[2] || (_cache[2] = $event => _ctx.isFocus = $event),
     onClose: _ctx.handleBlur
   }, {
-    menu: _withId(() => [_createVNode("div", _hoisted_5, [_renderSlot(_ctx.$slots, "default")])]),
-    default: _withId(() => [_createVNode("div", {
-      class: ["var-select__wrap", [!_ctx.hint ? 'var-select--non-hint' : null]],
+    menu: _withCtx(() => [_createElementVNode("div", _hoisted_5, [_renderSlot(_ctx.$slots, "default")])]),
+    default: _withCtx(() => [_createElementVNode("div", {
+      class: _normalizeClass(["var-select__wrap", [!_ctx.hint ? 'var-select--non-hint' : null]]),
       ref: "wrapEl",
-      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args))
-    }, [_createVNode("div", {
-      class: ["var-select__select", [_ctx.errorMessage ? 'var-select--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]],
-      style: {
+      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args))
+    }, [_createElementVNode("div", {
+      class: _normalizeClass(["var-select__select", [_ctx.errorMessage ? 'var-select--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]]),
+      style: _normalizeStyle({
         textAlign: _ctx.textAlign,
         color: _ctx.textColor
-      }
-    }, [_ctx.multiple ? (_openBlock(), _createBlock("div", _hoisted_1, [_ctx.chip ? (_openBlock(), _createBlock("div", _hoisted_2, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.labels, l => {
+      })
+    }, [_ctx.multiple ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_ctx.chip ? (_openBlock(), _createElementBlock("div", _hoisted_2, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.labels, l => {
       return _openBlock(), _createBlock(_component_var_chip, {
         class: "var-select__chip",
         "var-select-cover": "",
         closable: "",
         type: _ctx.errorMessage ? 'danger' : null,
         key: l,
-        onClick: _cache[1] || (_cache[1] = _withModifiers(() => {}, ["stop"])),
+        onClick: _cache[0] || (_cache[0] = _withModifiers(() => {}, ["stop"])),
         onClose: e => _ctx.handleClose(l)
       }, {
-        default: _withId(() => [_createTextVNode(_toDisplayString(l), 1
+        default: _withCtx(() => [_createTextVNode(_toDisplayString(l), 1
         /* TEXT */
         )]),
         _: 2
@@ -96,12 +91,12 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
       , ["type", "onClose"]);
     }), 128
     /* KEYED_FRAGMENT */
-    ))])) : (_openBlock(), _createBlock("div", _hoisted_3, _toDisplayString(_ctx.labels.join(_ctx.separator)), 1
+    ))])) : (_openBlock(), _createElementBlock("div", _hoisted_3, _toDisplayString(_ctx.labels.join(_ctx.separator)), 1
     /* TEXT */
-    ))])) : (_openBlock(), _createBlock("span", _hoisted_4, _toDisplayString(_ctx.label), 1
+    ))])) : (_openBlock(), _createElementBlock("span", _hoisted_4, _toDisplayString(_ctx.label), 1
     /* TEXT */
     )), _createVNode(_component_var_icon, {
-      class: ["var-select__arrow", [_ctx.isFocus ? 'var-select--arrow-rotate' : null]],
+      class: _normalizeClass(["var-select__arrow", [_ctx.isFocus ? 'var-select--arrow-rotate' : null]]),
       "var-select-cover": "",
       name: "menu-down",
       transition: 300
@@ -109,20 +104,20 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     /* PROPS */
     , ["class"])], 6
     /* CLASS, STYLE */
-    ), _createVNode("label", {
-      class: ["var-select__placeholder", [_ctx.computePlaceholderState(), !_ctx.hint ? 'var-select--placeholder-non-hint' : null]]
+    ), _createElementVNode("label", {
+      class: _normalizeClass(["var-select__placeholder", [_ctx.computePlaceholderState(), !_ctx.hint ? 'var-select--placeholder-non-hint' : null]])
     }, _toDisplayString(_ctx.placeholder), 3
     /* TEXT, CLASS */
     )], 2
     /* CLASS */
     )]),
-    _: 1
-    /* STABLE */
+    _: 3
+    /* FORWARDED */
 
   }, 8
   /* PROPS */
-  , ["offset-y", "show", "onClose"]), _createVNode("div", {
-    class: ["var-select__icon", [!_ctx.hint ? 'var-select--non-hint' : null]]
+  , ["offset-y", "show", "onClose"]), _createElementVNode("div", {
+    class: _normalizeClass(["var-select__icon", [!_ctx.hint ? 'var-select--non-hint' : null]])
   }, [_renderSlot(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable ? (_openBlock(), _createBlock(_component_var_icon, {
     key: 0,
     class: "var-select__clear-icon",
@@ -135,17 +130,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-select__line", [_ctx.formDisabled || _ctx.disabled ? 'var-select--line-disabled' : null, _ctx.errorMessage ? 'var-select--line-error' : null]],
-    style: {
+    class: _normalizeClass(["var-select__line", [_ctx.formDisabled || _ctx.disabled ? 'var-select--line-disabled' : null, _ctx.errorMessage ? 'var-select--line-error' : null]]),
+    style: _normalizeStyle({
       background: !_ctx.errorMessage ? _ctx.blurColor : null
-    }
-  }, [_createVNode("div", {
-    class: ["var-select__dot", [_ctx.isFocus ? 'var-select--spread' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--line-disabled' : null, _ctx.errorMessage ? 'var-select--line-error' : null]],
-    style: {
+    })
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(["var-select__dot", [_ctx.isFocus ? 'var-select--spread' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--line-disabled' : null, _ctx.errorMessage ? 'var-select--line-error' : null]]),
+    style: _normalizeStyle({
       background: !_ctx.errorMessage ? _ctx.focusColor : null
-    }
+    })
   }, null, 6
   /* CLASS, STYLE */
   )], 6
@@ -157,7 +152,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   , ["error-message"])], 2
   /* CLASS */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarSelect',