@varlet/ui 1.21.0 → 1.22.0-alpha.15

package/es/action-sheet/ActionSheet.js

@@ -5,22 +5,18 @@ import { defineComponent, ref, watch } from 'vue';
 import { props } from './props';
 import { dt } from '../utils/shared';
 import { pack } from '../locale';
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, resolveComponent as _resolveComponent, createCommentVNode as _createCommentVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, mergeProps as _mergeProps, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, mergeProps as _mergeProps, withCtx as _withCtx, 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-action-sheet__title"
 };
-var _hoisted_2 = {
+var _hoisted_2 = ["onClick"];
+var _hoisted_3 = {
   class: "var-action-sheet__action-name"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   var _component_var_popup = _resolveComponent("var-popup");
@@ -50,17 +46,17 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     onOpened: _ctx.onOpened,
     onRouteChange: _ctx.onRouteChange
   }), {
-    default: _withId(() => [_createVNode("div", _mergeProps({
+    default: _withCtx(() => [_createElementVNode("div", _mergeProps({
       class: "var-action-sheet var--box"
-    }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "title", {}, () => [_createVNode("div", _hoisted_1, _toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.actionSheetTitle)), 1
+    }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "title", {}, () => [_createElementVNode("div", _hoisted_1, _toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.actionSheetTitle)), 1
     /* TEXT */
-    )]), _renderSlot(_ctx.$slots, "actions", {}, () => [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.actions, action => {
-      return _withDirectives((_openBlock(), _createBlock("div", {
-        class: ["var-action-sheet__action-item", [action.className, action.disabled ? 'var-action-sheet--disabled' : null]],
+    )]), _renderSlot(_ctx.$slots, "actions", {}, () => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.actions, action => {
+      return _withDirectives((_openBlock(), _createElementBlock("div", {
+        class: _normalizeClass(["var-action-sheet__action-item", [action.className, action.disabled ? 'var-action-sheet--disabled' : null]]),
         key: action.name,
-        style: {
+        style: _normalizeStyle({
           color: action.color
-        },
+        }),
         onClick: $event => _ctx.handleSelect(action)
       }, [action.icon ? (_openBlock(), _createBlock(_component_var_icon, {
         key: 0,
@@ -70,11 +66,11 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
         size: action.iconSize
       }, null, 8
       /* PROPS */
-      , ["name", "size"])) : _createCommentVNode("v-if", true), _createVNode("div", _hoisted_2, _toDisplayString(action.name), 1
+      , ["name", "size"])) : _createCommentVNode("v-if", true), _createElementVNode("div", _hoisted_3, _toDisplayString(action.name), 1
       /* TEXT */
       )], 14
       /* CLASS, STYLE, PROPS */
-      , ["onClick"])), [[_directive_ripple, {
+      , _hoisted_2)), [[_directive_ripple, {
         disabled: action.disabled
       }]]);
     }), 128
@@ -88,7 +84,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }, 16
   /* FULL_PROPS */
   , ["overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "show", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarActionSheet',

package/es/app-bar/AppBar.js

@@ -1,10 +1,8 @@
 import { defineComponent } from 'vue';
 import { props } from './props';
-import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, 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 = {
   key: 0,
@@ -14,32 +12,29 @@ var _hoisted_2 = {
   key: 1,
   class: "var-app-bar__right"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
-  return _openBlock(), _createBlock("div", {
-    class: ["var-app-bar", {
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(["var-app-bar", {
       'var-elevation--3': _ctx.elevation
-    }],
-    style: {
+    }]),
+    style: _normalizeStyle({
       background: _ctx.color,
       color: _ctx.textColor
-    }
-  }, [_ctx.$slots.left ? (_openBlock(), _createBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "left")])) : _createCommentVNode("v-if", true), _createVNode("div", {
-    class: ["var-app-bar__title", "var-app-bar__title-" + _ctx.titlePosition],
-    style: {
+    })
+  }, [_ctx.$slots.left ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "left")])) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+    class: _normalizeClass(["var-app-bar__title", "var-app-bar__title-" + _ctx.titlePosition]),
+    style: _normalizeStyle({
       paddingLeft: _ctx.$slots.left && _ctx.titlePosition !== 'center' ? '30px' : '10px',
       paddingRight: _ctx.$slots.right && _ctx.titlePosition !== 'center' ? '30px' : '10px'
-    }
+    })
   }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.title), 1
   /* TEXT */
   )])], 6
   /* CLASS, STYLE */
-  ), _ctx.$slots.right ? (_openBlock(), _createBlock("div", _hoisted_2, [_renderSlot(_ctx.$slots, "right")])) : _createCommentVNode("v-if", true)], 6
+  ), _ctx.$slots.right ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_renderSlot(_ctx.$slots, "right")])) : _createCommentVNode("v-if", true)], 6
   /* CLASS, STYLE */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarAppBar',

package/es/back-top/BackTop.js

@@ -4,24 +4,21 @@ import Icon from '../icon';
 import { props } from './props';
 import { isString, easeInOutCubic, throttle, toNumber } from '../utils/shared';
 import { getScrollTop, getScrollLeft, scrollTo } from '../utils/elements';
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from "vue";
-
-var _withId = /*#__PURE__*/_withScopeId("");
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, withModifiers as _withModifiers, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   var _component_var_button = _resolveComponent("var-button");
 
-  return _openBlock(), _createBlock("div", {
-    class: ["var-back-top", [_ctx.show ? 'var-back-top--active' : null]],
-    onClick: _cache[1] || (_cache[1] = _withModifiers((...args) => _ctx.click && _ctx.click(...args), ["stop"]))
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(["var-back-top", [_ctx.show ? 'var-back-top--active' : null]]),
+    onClick: _cache[0] || (_cache[0] = _withModifiers((...args) => _ctx.click && _ctx.click(...args), ["stop"]))
   }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createVNode(_component_var_button, {
     type: "primary",
     round: "",
     class: "var-back-top__button"
   }, {
-    default: _withId(() => [_createVNode(_component_var_icon, {
+    default: _withCtx(() => [_createVNode(_component_var_icon, {
       name: "chevron-up"
     })]),
     _: 1
@@ -30,7 +27,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   })])], 2
   /* CLASS */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarBackTop',

package/es/badge/Badge.js

@@ -2,11 +2,9 @@ import { computed, defineComponent } from 'vue';
 import { props } from './props';
 import Icon from '../icon';
 import { toNumber } from '../utils/shared';
-import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, toDisplayString as _toDisplayString, vShow as _vShow, mergeProps as _mergeProps, createVNode as _createVNode, withDirectives as _withDirectives, Transition as _Transition, renderSlot as _renderSlot, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, vShow as _vShow, mergeProps as _mergeProps, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, renderSlot as _renderSlot, 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-badge"
@@ -14,16 +12,13 @@ var _hoisted_1 = {
 var _hoisted_2 = {
   key: 1
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
-  return _openBlock(), _createBlock("div", _hoisted_1, [_createVNode(_Transition, {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createVNode(_Transition, {
     name: "var-badge-fade"
   }, {
-    default: _withId(() => [_withDirectives(_createVNode("span", _mergeProps(_ctx.$attrs, {
+    default: _withCtx(() => [_withDirectives(_createElementVNode("span", _mergeProps(_ctx.$attrs, {
       class: ["var-badge__content", _ctx.contentClass],
       style: {
         background: _ctx.color
@@ -34,7 +29,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
       size: "10px"
     }, null, 8
     /* PROPS */
-    , ["name"])) : (_openBlock(), _createBlock("span", _hoisted_2, _toDisplayString(_ctx.values), 1
+    , ["name"])) : (_openBlock(), _createElementBlock("span", _hoisted_2, _toDisplayString(_ctx.values), 1
     /* TEXT */
     ))], 16
     /* FULL_PROPS */
@@ -43,7 +38,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     /* STABLE */
 
   }), _renderSlot(_ctx.$slots, "default")]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarBadge',

package/es/button/Button.js

@@ -2,24 +2,25 @@ import Ripple from '../ripple';
 import Loading from '../loading';
 import { defineComponent } from 'vue';
 import { props } from './props';
-import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createVNode as _createVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, withScopeId as _withScopeId } from "vue";
+import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+var _hoisted_1 = ["disabled"];
+export function render(_ctx, _cache) {
   var _component_var_loading = _resolveComponent("var-loading");
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _withDirectives((_openBlock(), _createBlock("button", {
-    class: ["var-button var--box", ["var-button--" + _ctx.size, _ctx.block ? 'var--flex var-button--block' : 'var--inline-flex', _ctx.disabled ? 'var-button--disabled' : null, _ctx.text ? "var-button--text-" + _ctx.type : "var-button--" + _ctx.type, _ctx.text ? 'var-button--text' : 'var-elevation--1', _ctx.text && _ctx.disabled ? 'var-button--text-disabled' : null, _ctx.round ? 'var-button--round' : null, _ctx.outline ? 'var-button--outline' : null]],
-    style: {
+  return _withDirectives((_openBlock(), _createElementBlock("button", {
+    class: _normalizeClass(["var-button var--box", ["var-button--" + _ctx.size, _ctx.block ? 'var--flex var-button--block' : 'var--inline-flex', _ctx.disabled ? 'var-button--disabled' : null, _ctx.text ? "var-button--text-" + _ctx.type : "var-button--" + _ctx.type, _ctx.text ? 'var-button--text' : 'var-elevation--1', _ctx.text && _ctx.disabled ? 'var-button--text-disabled' : null, _ctx.round ? 'var-button--round' : null, _ctx.outline ? 'var-button--outline' : null]]),
+    style: _normalizeStyle({
       color: _ctx.textColor,
       background: _ctx.color
-    },
+    }),
     disabled: _ctx.disabled,
-    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
-    onTouchstart: _cache[2] || (_cache[2] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args))
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args))
   }, [_ctx.loading ? (_openBlock(), _createBlock(_component_var_loading, {
     key: 0,
     class: "var-button__loading",
@@ -28,16 +29,16 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     radius: _ctx.loadingRadius
   }, null, 8
   /* PROPS */
-  , ["type", "size", "radius"])) : _createCommentVNode("v-if", true), _createVNode("div", {
-    class: ["var-button__content", [_ctx.loading ? 'var-button--hidden' : null]]
+  , ["type", "size", "radius"])) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+    class: _normalizeClass(["var-button__content", [_ctx.loading ? 'var-button--hidden' : null]])
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
   )], 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
-  , ["disabled"])), [[_directive_ripple, {
+  , _hoisted_1)), [[_directive_ripple, {
     disabled: _ctx.disabled || !_ctx.ripple
   }]]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarButton',

package/es/card/Card.js

@@ -2,60 +2,56 @@ import Ripple from '../ripple';
 import { defineComponent } from 'vue';
 import { props } from './props';
 import { toSizeUnit } from '../utils/elements';
-import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, resolveDirective as _resolveDirective, withDirectives as _withDirectives, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-_pushScopeId("");
-
-var _hoisted_1 = {
+var _hoisted_1 = ["src", "alt"];
+var _hoisted_2 = {
   key: 0,
   class: "var-card__title"
 };
-var _hoisted_2 = {
+var _hoisted_3 = {
   key: 0,
   class: "var-card__subtitle"
 };
-var _hoisted_3 = {
+var _hoisted_4 = {
   key: 0,
   class: "var-card__description"
 };
-var _hoisted_4 = {
+var _hoisted_5 = {
   key: 0,
   class: "var-card__footer"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _withDirectives((_openBlock(), _createBlock("div", {
-    class: ["var-card", [_ctx.elevation ? "var-elevation--" + _ctx.elevation : 'var-elevation--2']],
-    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClick && _ctx.onClick(...args))
-  }, [_renderSlot(_ctx.$slots, "image", {}, () => [_ctx.src ? (_openBlock(), _createBlock("img", {
+  return _withDirectives((_openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(["var-card", [_ctx.elevation ? "var-elevation--" + _ctx.elevation : 'var-elevation--2']]),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+  }, [_renderSlot(_ctx.$slots, "image", {}, () => [_ctx.src ? (_openBlock(), _createElementBlock("img", {
     key: 0,
     class: "var-card__image",
-    style: {
+    style: _normalizeStyle({
       objectFit: _ctx.fit,
       height: _ctx.toSizeUnit(_ctx.height)
-    },
+    }),
     src: _ctx.src,
     alt: _ctx.alt
   }, null, 12
   /* STYLE, PROPS */
-  , ["src", "alt"])) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (_openBlock(), _createBlock("div", _hoisted_1, _toDisplayString(_ctx.title), 1
+  , _hoisted_1)) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (_openBlock(), _createElementBlock("div", _hoisted_2, _toDisplayString(_ctx.title), 1
   /* TEXT */
-  )) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "subtitle", {}, () => [_ctx.subtitle ? (_openBlock(), _createBlock("div", _hoisted_2, _toDisplayString(_ctx.subtitle), 1
+  )) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "subtitle", {}, () => [_ctx.subtitle ? (_openBlock(), _createElementBlock("div", _hoisted_3, _toDisplayString(_ctx.subtitle), 1
   /* TEXT */
-  )) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "description", {}, () => [_ctx.description ? (_openBlock(), _createBlock("div", _hoisted_3, _toDisplayString(_ctx.description), 1
+  )) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "description", {}, () => [_ctx.description ? (_openBlock(), _createElementBlock("div", _hoisted_4, _toDisplayString(_ctx.description), 1
   /* TEXT */
-  )) : _createCommentVNode("v-if", true)]), _ctx.$slots.extra ? (_openBlock(), _createBlock("div", _hoisted_4, [_renderSlot(_ctx.$slots, "extra")])) : _createCommentVNode("v-if", true)], 2
+  )) : _createCommentVNode("v-if", true)]), _ctx.$slots.extra ? (_openBlock(), _createElementBlock("div", _hoisted_5, [_renderSlot(_ctx.$slots, "extra")])) : _createCommentVNode("v-if", true)], 2
   /* CLASS */
   )), [[_directive_ripple, {
     disabled: !_ctx.ripple
   }]]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarCard',

package/es/cell/Cell.js

@@ -1,26 +1,21 @@
 import { defineComponent } from 'vue';
 import { props } from './props';
 import Icon from '../icon';
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, 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-cell__content"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
-  return _openBlock(), _createBlock("div", {
-    class: ["var-cell", [_ctx.border ? 'var-cell--border' : null]]
-  }, [_ctx.$slots.icon || _ctx.icon ? (_openBlock(), _createBlock("div", {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(["var-cell", [_ctx.border ? 'var-cell--border' : null]])
+  }, [_ctx.$slots.icon || _ctx.icon ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: ["var-cell__icon", [_ctx.iconClass ? _ctx.iconClass : null]]
+    class: _normalizeClass(["var-cell__icon", [_ctx.iconClass ? _ctx.iconClass : null]])
   }, [_renderSlot(_ctx.$slots, "icon", {}, () => [_createVNode(_component_var_icon, {
     class: "var--flex",
     name: _ctx.icon
@@ -28,28 +23,28 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   /* PROPS */
   , ["name"])])], 2
   /* CLASS */
-  )) : _createCommentVNode("v-if", true), _createVNode("div", _hoisted_1, [_createVNode("div", {
-    class: ["var-cell__title", [_ctx.titleClass ? _ctx.titleClass : null]]
+  )) : _createCommentVNode("v-if", true), _createElementVNode("div", _hoisted_1, [_createElementVNode("div", {
+    class: _normalizeClass(["var-cell__title", [_ctx.titleClass ? _ctx.titleClass : null]])
   }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.title), 1
   /* TEXT */
   )])], 2
   /* CLASS */
-  ), _ctx.$slots.desc || _ctx.desc ? (_openBlock(), _createBlock("div", {
+  ), _ctx.$slots.desc || _ctx.desc ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: ["var-cell__desc", [_ctx.descClass ? _ctx.descClass : null]]
+    class: _normalizeClass(["var-cell__desc", [_ctx.descClass ? _ctx.descClass : null]])
   }, [_renderSlot(_ctx.$slots, "desc", {}, () => [_createTextVNode(_toDisplayString(_ctx.desc), 1
   /* TEXT */
   )])], 2
   /* CLASS */
-  )) : _createCommentVNode("v-if", true)]), _ctx.$slots.extra ? (_openBlock(), _createBlock("div", {
+  )) : _createCommentVNode("v-if", true)]), _ctx.$slots.extra ? (_openBlock(), _createElementBlock("div", {
     key: 1,
-    class: ["var-cell__extra", [_ctx.extraClass ? _ctx.extraClass : null]]
+    class: _normalizeClass(["var-cell__extra", [_ctx.extraClass ? _ctx.extraClass : null]])
   }, [_renderSlot(_ctx.$slots, "extra")], 2
   /* CLASS */
   )) : _createCommentVNode("v-if", true)], 2
   /* CLASS */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarCell',

package/es/checkbox/Checkbox.js

@@ -6,37 +6,32 @@ import { props } from './props';
 import { useValidation } from '../utils/components';
 import { useCheckboxGroup } from './provide';
 import { useForm } from '../form/provide';
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, 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, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementVNode as _createElementVNode, 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-checkbox"
 };
-
-_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", {
+  return _openBlock(), _createElementBlock("div", {
     class: "var-checkbox__wrap",
-    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-  }, [_createVNode("div", _hoisted_1, [_withDirectives(_createVNode("div", {
-    class: ["var-checkbox__action", [_ctx.checked ? 'var-checkbox--checked' : 'var-checkbox--unchecked', _ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? 'var-checkbox--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-checkbox--disabled' : null]],
-    style: {
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [_createElementVNode("div", _hoisted_1, [_withDirectives(_createElementVNode("div", {
+    class: _normalizeClass(["var-checkbox__action", [_ctx.checked ? 'var-checkbox--checked' : 'var-checkbox--unchecked', _ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? 'var-checkbox--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-checkbox--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-checkbox__icon", [_ctx.withAnimation ? 'var-checkbox--with-animation' : null]],
+    class: _normalizeClass(["var-checkbox__icon", [_ctx.withAnimation ? 'var-checkbox--with-animation' : null]]),
     name: "checkbox-marked",
     size: _ctx.iconSize,
     "var-checkbox-cover": ""
@@ -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-checkbox__icon", [_ctx.withAnimation ? 'var-checkbox--with-animation' : null]],
+    class: _normalizeClass(["var-checkbox__icon", [_ctx.withAnimation ? 'var-checkbox--with-animation' : null]]),
     name: "checkbox-blank-outline",
     size: _ctx.iconSize,
     "var-checkbox-cover": ""
@@ -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-checkbox__text", [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? 'var-checkbox--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-checkbox--disabled' : null]]
+  }]]), _createElementVNode("div", {
+    class: _normalizeClass(["var-checkbox__text", [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? 'var-checkbox--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-checkbox--disabled' : null]])
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
   )]), _createVNode(_component_var_form_details, {
@@ -64,7 +59,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }, null, 8
   /* PROPS */
   , ["error-message"])]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarCheckbox',

package/es/checkbox-group/CheckboxGroup.js

@@ -5,23 +5,18 @@ import { useValidation } from '../utils/components';
 import { useCheckboxes } from './provide';
 import { useForm } from '../form/provide';
 import { uniq } from '../utils/shared';
-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-checkbox-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-checkbox-group", ["var-checkbox-group--" + _ctx.direction]]
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", {
+    class: _normalizeClass(["var-checkbox-group", ["var-checkbox-group--" + _ctx.direction]])
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
   ), _createVNode(_component_var_form_details, {
@@ -29,7 +24,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }, null, 8
   /* PROPS */
   , ["error-message"])]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarCheckboxGroup',

package/es/chip/Chip.js

@@ -1,27 +1,24 @@
 import Icon from '../icon';
 import { defineComponent, computed } from 'vue';
 import { props } from './props';
-import { renderSlot as _renderSlot, createVNode as _createVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, Transition as _Transition, withScopeId as _withScopeId } from "vue";
-
-var _withId = /*#__PURE__*/_withScopeId("");
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createBlock as _createBlock } from "vue";
+export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   return _openBlock(), _createBlock(_Transition, {
     name: "var-fade"
   }, {
-    default: _withId(() => [_createVNode("span", _mergeProps({
+    default: _withCtx(() => [_createElementVNode("span", _mergeProps({
       class: ["var-chip var--box", _ctx.contentClass],
       style: _ctx.chipStyles
-    }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "left"), _createVNode("span", {
-      class: ["var-chip--text-" + _ctx.size]
+    }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "left"), _createElementVNode("span", {
+      class: _normalizeClass(["var-chip--text-" + _ctx.size])
     }, [_renderSlot(_ctx.$slots, "default")], 2
     /* CLASS */
-    ), _renderSlot(_ctx.$slots, "right"), _ctx.closable ? (_openBlock(), _createBlock("span", {
+    ), _renderSlot(_ctx.$slots, "right"), _ctx.closable ? (_openBlock(), _createElementBlock("span", {
       key: 0,
       class: "var-chip--close",
-      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClose && _ctx.onClose(...args))
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClose && _ctx.onClose(...args))
     }, [_createVNode(_component_var_icon, {
       name: "" + (_ctx.iconName ? _ctx.iconName : 'close-circle')
     }, null, 8
@@ -33,7 +30,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     /* FORWARDED */
 
   });
-});
+}
 export default defineComponent({
   render,
   name: 'VarChip',

package/es/col/Col.js

@@ -3,22 +3,19 @@ import { toNumber } from '../utils/shared';
 import { props } from './props';
 import { useRow } from './provide';
 import { toSizeUnit } 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", {
-    class: ["var-col var--box", [_ctx.span ? "var-col--span-" + _ctx.toNumber(_ctx.span) : null, _ctx.offset ? "var-col--offset-" + _ctx.toNumber(_ctx.offset) : null]],
-    style: {
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(["var-col var--box", [_ctx.span ? "var-col--span-" + _ctx.toNumber(_ctx.span) : null, _ctx.offset ? "var-col--offset-" + _ctx.toNumber(_ctx.offset) : null]]),
+    style: _normalizeStyle({
       paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),
       paddingRight: _ctx.toSizeUnit(_ctx.padding.right)
-    },
-    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")], 6
   /* CLASS, STYLE */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarCol',