@varlet/ui 1.21.0 → 1.22.0-alpha.15

package/es/swipe-item/SwipeItem.js

@@ -1,21 +1,18 @@
 import { defineComponent, ref } from 'vue';
 import { useSwipe } from './provide';
-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-swipe-item",
-    style: {
+    style: _normalizeStyle({
       width: !_ctx.vertical ? _ctx.size + "px" : null,
       height: _ctx.vertical ? _ctx.size + "px" : null,
       transform: "translate" + (_ctx.vertical ? 'Y' : 'X') + "(" + _ctx.translate + "px)"
-    }
+    })
   }, [_renderSlot(_ctx.$slots, "default")], 4
   /* STYLE */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarSwipeItem',

package/es/switch/Switch.js

@@ -6,40 +6,35 @@ import { props } from './props';
 import FormDetails from '../form-details';
 import Loading from '../loading';
 import Ripple from '../ripple';
-import { createVNode as _createVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, 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, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, createVNode as _createVNode, 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-switch"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _component_var_loading = _resolveComponent("var-loading");
 
   var _component_var_form_details = _resolveComponent("var-form-details");
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createBlock("div", _hoisted_1, [_createVNode("div", {
-    class: ["var-switch-block", [_ctx.disabled || _ctx.formDisabled ? 'var-switch__disable' : null]],
-    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.switchActive && _ctx.switchActive(...args)),
-    style: _ctx.styleComputed.switch
-  }, [_createVNode("div", {
-    style: _ctx.styleComputed.track,
-    class: ["var-switch__track", [_ctx.modelValue === _ctx.activeValue ? 'var-switch__track-active' : null, _ctx.errorMessage ? 'var-switch__track-error' : null]]
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", {
+    class: _normalizeClass(["var-switch-block", [_ctx.disabled || _ctx.formDisabled ? 'var-switch__disable' : null]]),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.switchActive && _ctx.switchActive(...args)),
+    style: _normalizeStyle(_ctx.styleComputed.switch)
+  }, [_createElementVNode("div", {
+    style: _normalizeStyle(_ctx.styleComputed.track),
+    class: _normalizeClass(["var-switch__track", [_ctx.modelValue === _ctx.activeValue ? 'var-switch__track-active' : null, _ctx.errorMessage ? 'var-switch__track-error' : null]])
   }, null, 6
   /* CLASS, STYLE */
-  ), _withDirectives(_createVNode("div", {
+  ), _withDirectives(_createElementVNode("div", {
     class: "var-switch__ripple",
-    style: _ctx.styleComputed.ripple
-  }, [_createVNode("div", {
-    style: _ctx.styleComputed.handle,
-    class: ["var-switch__handle var-elevation--2", [_ctx.modelValue === _ctx.activeValue ? 'var-switch__handle-active' : null, _ctx.errorMessage ? 'var-switch__handle-error' : null]]
+    style: _normalizeStyle(_ctx.styleComputed.ripple)
+  }, [_createElementVNode("div", {
+    style: _normalizeStyle(_ctx.styleComputed.handle),
+    class: _normalizeClass(["var-switch__handle var-elevation--2", [_ctx.modelValue === _ctx.activeValue ? 'var-switch__handle-active' : null, _ctx.errorMessage ? 'var-switch__handle-error' : null]])
   }, [_ctx.loading ? (_openBlock(), _createBlock(_component_var_loading, {
     key: 0,
     radius: _ctx.size / 2 - 2
@@ -58,7 +53,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }, null, 8
   /* PROPS */
   , ["error-message"])]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarSwitch',

package/es/tab/Tab.js

@@ -2,26 +2,23 @@ import { defineComponent, ref, computed, watch } from 'vue';
 import { props } from './props';
 import Ripple from '../ripple';
 import { useTabs } from './provide';
-import { renderSlot as _renderSlot, resolveDirective as _resolveDirective, withDirectives as _withDirectives, 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, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _withDirectives((_openBlock(), _createBlock("div", {
-    class: ["var-tab var--box", [_ctx.computeColorClass(), "var-tab--" + _ctx.itemDirection]],
+  return _withDirectives((_openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(["var-tab var--box", [_ctx.computeColorClass(), "var-tab--" + _ctx.itemDirection]]),
     ref: "tabEl",
-    style: {
+    style: _normalizeStyle({
       color: _ctx.computeColorStyle()
-    },
-    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    }),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
   }, [_renderSlot(_ctx.$slots, "default")], 6
   /* CLASS, STYLE */
   )), [[_directive_ripple, {
     disabled: _ctx.disabled
   }]]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarTab',

package/es/tab-item/TabItem.js

@@ -2,17 +2,14 @@ import SwipeItem from '../swipe-item';
 import { defineComponent, ref, computed } from 'vue';
 import { useTabsItems } from './provide';
 import { props } from './props';
-import { renderSlot as _renderSlot, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, 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, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+export function render(_ctx, _cache) {
   var _component_var_swipe_item = _resolveComponent("var-swipe-item");
 
   return _openBlock(), _createBlock(_component_var_swipe_item, {
-    class: ["var-tab-item", [!_ctx.current && 'var-tab-item--inactive']]
+    class: _normalizeClass(["var-tab-item", [!_ctx.current && 'var-tab-item--inactive']])
   }, {
-    default: _withId(() => [_ctx.initSlot ? _renderSlot(_ctx.$slots, "default", {
+    default: _withCtx(() => [_ctx.initSlot ? _renderSlot(_ctx.$slots, "default", {
       key: 0
     }) : _createCommentVNode("v-if", true)]),
     _: 3
@@ -21,7 +18,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }, 8
   /* PROPS */
   , ["class"]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarTabItem',

package/es/tabs/Tabs.js

@@ -4,30 +4,27 @@ import { props } from './props';
 import { useTabList } from './provide';
 import { isNumber, linear } from '../utils/shared';
 import { toSizeUnit, scrollTo } from '../utils/elements';
-import { renderSlot as _renderSlot, createVNode as _createVNode, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, 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, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+export function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.sticky ? 'var-sticky' : _ctx.Transition), {
     "offset-top": _ctx.sticky ? _ctx.offsetTop : null
   }, {
-    default: _withId(() => [_createVNode("div", _mergeProps({
+    default: _withCtx(() => [_createElementVNode("div", _mergeProps({
       class: ["var-tabs var--box", ["var-tabs--item-" + _ctx.itemDirection, "var-tabs--layout-" + _ctx.layoutDirection + "-padding", _ctx.elevation ? "var-elevation--4" : null, _ctx.fixedBottom ? 'var-tabs--fixed-bottom' : null]],
       style: {
         background: _ctx.color
       }
-    }, _ctx.$attrs), [_createVNode("div", {
-      class: ["var-tabs__tab-wrap", [_ctx.scrollable ? "var-tabs--layout-" + _ctx.layoutDirection + "-scrollable" : null, "var-tabs--layout-" + _ctx.layoutDirection]],
+    }, _ctx.$attrs), [_createElementVNode("div", {
+      class: _normalizeClass(["var-tabs__tab-wrap", [_ctx.scrollable ? "var-tabs--layout-" + _ctx.layoutDirection + "-scrollable" : null, "var-tabs--layout-" + _ctx.layoutDirection]]),
       ref: "scrollerEl"
-    }, [_renderSlot(_ctx.$slots, "default"), _createVNode("div", {
-      class: ["var-tabs__indicator", ["var-tabs--layout-" + _ctx.layoutDirection + "-indicator"]],
-      style: {
+    }, [_renderSlot(_ctx.$slots, "default"), _createElementVNode("div", {
+      class: _normalizeClass(["var-tabs__indicator", ["var-tabs--layout-" + _ctx.layoutDirection + "-indicator"]]),
+      style: _normalizeStyle({
         width: _ctx.layoutDirection === 'horizontal' ? _ctx.indicatorWidth : _ctx.toSizeUnit(_ctx.indicatorSize),
         height: _ctx.layoutDirection === 'horizontal' ? _ctx.toSizeUnit(_ctx.indicatorSize) : _ctx.indicatorHeight,
         transform: _ctx.layoutDirection === 'horizontal' ? "translateX(" + _ctx.indicatorX + ")" : "translateY(" + _ctx.indicatorY + ")",
         background: _ctx.indicatorColor || _ctx.activeColor
-      }
+      })
     }, null, 6
     /* CLASS, STYLE */
     )], 2
@@ -41,7 +38,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }, 8
   /* PROPS */
   , ["offset-top"]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarTabs',

package/es/tabs-items/TabsItems.js

@@ -2,11 +2,8 @@ import Swipe from '../swipe';
 import { defineComponent, watch, ref } from 'vue';
 import { useTabItem } from './provide';
 import { props } from './props';
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, 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, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+export function render(_ctx, _cache) {
   var _component_var_swipe = _resolveComponent("var-swipe");
 
   return _openBlock(), _createBlock(_component_var_swipe, {
@@ -17,14 +14,14 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     indicator: false,
     onChange: _ctx.handleSwipeChange
   }, {
-    default: _withId(() => [_renderSlot(_ctx.$slots, "default")]),
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "default")]),
     _: 3
     /* FORWARDED */
 
   }, 8
   /* PROPS */
   , ["loop", "touchable", "onChange"]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarTabsItems',

package/es/time-picker/TimePicker.js

@@ -1,22 +1,20 @@
 import { computed, defineComponent, reactive, ref, watch } from 'vue';
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm';
 import Clock from './clock.js'
 import { props, hoursAmpm, hours24 } from './props';
 import { toNumber } from '../utils/shared';
 import { getNumberTime, getIsDisableMinute, getIsDisableSecond } from './utils';
-import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, Transition as _Transition, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createVNode as _createVNode, Transition as _Transition, 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-time-picker-title__time"
 };
 
-var _hoisted_2 = /*#__PURE__*/_createVNode("span", null, ":", -1
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("span", null, ":", -1
 /* HOISTED */
-);
+));
 
 var _hoisted_3 = {
   key: 0
@@ -28,58 +26,55 @@ var _hoisted_4 = {
 var _hoisted_5 = {
   class: "var-time-picker-body"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _component_clock = _resolveComponent("clock");
 
-  return _openBlock(), _createBlock("div", {
-    class: ["var-time-picker", [_ctx.shadow ? 'var-elevation--2' : null]],
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(["var-time-picker", [_ctx.shadow ? 'var-elevation--2' : null]]),
     ref: "picker"
-  }, [_createVNode("div", {
+  }, [_createElementVNode("div", {
     class: "var-time-picker-title",
-    style: {
+    style: _normalizeStyle({
       background: _ctx.headerColor || _ctx.color
-    }
-  }, [_createVNode("div", _hoisted_1, [_createVNode("div", {
-    class: ["var-time-picker-title__btn", _ctx.type === 'hour' ? 'var-time-picker-title__btn--active' : null],
-    onClick: _cache[1] || (_cache[1] = $event => _ctx.checkPanel('hour'))
+    })
+  }, [_createElementVNode("div", _hoisted_1, [_createElementVNode("div", {
+    class: _normalizeClass(["var-time-picker-title__btn", _ctx.type === 'hour' ? 'var-time-picker-title__btn--active' : null]),
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.checkPanel('hour'))
   }, _toDisplayString(_ctx.time.hour), 3
   /* TEXT, CLASS */
-  ), _hoisted_2, _createVNode("div", {
-    class: ["var-time-picker-title__btn", _ctx.type === 'minute' ? 'var-time-picker-title__btn--active' : null],
-    onClick: _cache[2] || (_cache[2] = $event => _ctx.checkPanel('minute'))
+  ), _hoisted_2, _createElementVNode("div", {
+    class: _normalizeClass(["var-time-picker-title__btn", _ctx.type === 'minute' ? 'var-time-picker-title__btn--active' : null]),
+    onClick: _cache[1] || (_cache[1] = $event => _ctx.checkPanel('minute'))
   }, _toDisplayString(_ctx.time.minute), 3
   /* TEXT, CLASS */
-  ), _ctx.useSeconds ? (_openBlock(), _createBlock("span", _hoisted_3, ":")) : _createCommentVNode("v-if", true), _ctx.useSeconds ? (_openBlock(), _createBlock("div", {
+  ), _ctx.useSeconds ? (_openBlock(), _createElementBlock("span", _hoisted_3, ":")) : _createCommentVNode("v-if", true), _ctx.useSeconds ? (_openBlock(), _createElementBlock("div", {
     key: 1,
-    class: ["var-time-picker-title__btn", _ctx.type === 'second' ? 'var-time-picker-title__btn--active' : null],
-    onClick: _cache[3] || (_cache[3] = $event => _ctx.checkPanel('second'))
+    class: _normalizeClass(["var-time-picker-title__btn", _ctx.type === 'second' ? 'var-time-picker-title__btn--active' : null]),
+    onClick: _cache[2] || (_cache[2] = $event => _ctx.checkPanel('second'))
   }, _toDisplayString(_ctx.time.second), 3
   /* TEXT, CLASS */
-  )) : _createCommentVNode("v-if", true)]), _ctx.format === 'ampm' ? (_openBlock(), _createBlock("div", _hoisted_4, [_createVNode("div", {
-    class: ["var-time-picker-title__btn", _ctx.ampm === 'am' ? 'var-time-picker-title__btn--active' : null],
-    onClick: _cache[4] || (_cache[4] = $event => _ctx.checkAmpm('am'))
+  )) : _createCommentVNode("v-if", true)]), _ctx.format === 'ampm' ? (_openBlock(), _createElementBlock("div", _hoisted_4, [_createElementVNode("div", {
+    class: _normalizeClass(["var-time-picker-title__btn", _ctx.ampm === 'am' ? 'var-time-picker-title__btn--active' : null]),
+    onClick: _cache[3] || (_cache[3] = $event => _ctx.checkAmpm('am'))
   }, " AM ", 2
   /* CLASS */
-  ), _createVNode("div", {
-    class: ["var-time-picker-title__btn", _ctx.ampm === 'pm' ? 'var-time-picker-title__btn--active' : null],
-    onClick: _cache[5] || (_cache[5] = $event => _ctx.checkAmpm('pm'))
+  ), _createElementVNode("div", {
+    class: _normalizeClass(["var-time-picker-title__btn", _ctx.ampm === 'pm' ? 'var-time-picker-title__btn--active' : null]),
+    onClick: _cache[4] || (_cache[4] = $event => _ctx.checkAmpm('pm'))
   }, " PM ", 2
   /* CLASS */
   )])) : _createCommentVNode("v-if", true)], 4
   /* STYLE */
-  ), _createVNode("div", _hoisted_5, [_createVNode("div", {
+  ), _createElementVNode("div", _hoisted_5, [_createElementVNode("div", {
     class: "var-time-picker-clock__container",
-    onTouchstart: _cache[6] || (_cache[6] = (...args) => _ctx.moveHand && _ctx.moveHand(...args)),
-    onTouchmove: _cache[7] || (_cache[7] = (...args) => _ctx.moveHand && _ctx.moveHand(...args)),
-    onTouchend: _cache[8] || (_cache[8] = (...args) => _ctx.end && _ctx.end(...args)),
+    onTouchstart: _cache[5] || (_cache[5] = (...args) => _ctx.moveHand && _ctx.moveHand(...args)),
+    onTouchmove: _cache[6] || (_cache[6] = (...args) => _ctx.moveHand && _ctx.moveHand(...args)),
+    onTouchend: _cache[7] || (_cache[7] = (...args) => _ctx.end && _ctx.end(...args)),
     ref: "container"
   }, [_createVNode(_Transition, {
     name: "var-time-picker-panel-fade"
   }, {
-    default: _withId(() => [_createVNode(_component_clock, {
+    default: _withCtx(() => [_createVNode(_component_clock, {
       key: _ctx.type,
       ref: "inner",
       type: _ctx.type,
@@ -107,7 +102,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   )])], 2
   /* CLASS */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarTimePicker',

package/es/time-picker/clock.js

@@ -1,13 +1,11 @@
 import { computed, defineComponent, ref, watch } from 'vue';
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm';
 import { hoursAmpm, hours24, minSec } from './props';
 import { notConvert, convertHour, getIsDisableMinute, getIsDisableSecond, getNumberTime } from './utils';
 import { toNumber } from '../utils/shared';
-import { createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createCommentVNode as _createCommentVNode, 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-time-picker-clock"
@@ -17,30 +15,27 @@ var _hoisted_2 = {
   class: "var-time-picker-clock__inner",
   ref: "inner"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
-  return _openBlock(), _createBlock("div", _hoisted_1, [_createVNode("div", {
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", {
     class: "var-time-picker-clock__hand",
-    style: _ctx.handStyle
+    style: _normalizeStyle(_ctx.handStyle)
   }, null, 4
   /* STYLE */
-  ), (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.timeScales, (timeScale, index) => {
-    return _openBlock(), _createBlock("div", {
-      class: ["var-time-picker-clock__item", [_ctx.isActive(index, false) ? 'var-time-picker-clock__item--active' : null, _ctx.isDisable(timeScale) ? 'var-time-picker-clock__item--disable' : null]],
+  ), (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.timeScales, (timeScale, index) => {
+    return _openBlock(), _createElementBlock("div", {
+      class: _normalizeClass(["var-time-picker-clock__item", [_ctx.isActive(index, false) ? 'var-time-picker-clock__item--active' : null, _ctx.isDisable(timeScale) ? 'var-time-picker-clock__item--disable' : null]]),
       key: timeScale,
-      style: _ctx.getStyle(index, timeScale, false)
+      style: _normalizeStyle(_ctx.getStyle(index, timeScale, false))
     }, _toDisplayString(timeScale), 7
     /* TEXT, CLASS, STYLE */
     );
   }), 128
   /* KEYED_FRAGMENT */
-  )), _ctx.format === '24hr' && _ctx.type === 'hour' ? (_openBlock(), _createBlock("div", _hoisted_2, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.hours24, (hour, index) => {
-    return _openBlock(), _createBlock("div", {
-      class: ["var-time-picker-clock__item", [_ctx.isActive(index, true) ? 'var-time-picker-clock__item--active' : null, _ctx.isDisable(hour) ? 'var-time-picker-clock__item--disable' : null]],
+  )), _ctx.format === '24hr' && _ctx.type === 'hour' ? (_openBlock(), _createElementBlock("div", _hoisted_2, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.hours24, (hour, index) => {
+    return _openBlock(), _createElementBlock("div", {
+      class: _normalizeClass(["var-time-picker-clock__item", [_ctx.isActive(index, true) ? 'var-time-picker-clock__item--active' : null, _ctx.isDisable(hour) ? 'var-time-picker-clock__item--disable' : null]]),
       key: hour,
-      style: _ctx.getStyle(index, hour, true)
+      style: _normalizeStyle(_ctx.getStyle(index, hour, true))
     }, _toDisplayString(hour), 7
     /* TEXT, CLASS, STYLE */
     );
@@ -49,7 +44,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   ))], 512
   /* NEED_PATCH */
   )) : _createCommentVNode("v-if", true)]);
-});
+}
 export default defineComponent({
   render,
   name: 'Clock',

package/es/uploader/Uploader.js

@@ -12,11 +12,9 @@ import { props } from './props';
 import { isNumber, isHTMLSupportImage, isHTMLSupportVideo, toNumber, isString } from '../utils/shared';
 import { useValidation } from '../utils/components';
 import { useForm } from '../form/provide';
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, toDisplayString as _toDisplayString, createVNode as _createVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, createCommentVNode as _createCommentVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, renderSlot as _renderSlot, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, withDirectives as _withDirectives, renderSlot as _renderSlot, 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-uploader var--box"
@@ -24,13 +22,15 @@ var _hoisted_1 = {
 var _hoisted_2 = {
   class: "var-uploader__file-list"
 };
-var _hoisted_3 = {
+var _hoisted_3 = ["onClick"];
+var _hoisted_4 = {
   class: "var-uploader__file-name"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+var _hoisted_5 = ["onClick"];
+var _hoisted_6 = ["src", "alt"];
+var _hoisted_7 = ["multiple", "accept", "capture", "disabled"];
+var _hoisted_8 = ["src"];
+export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   var _component_var_form_details = _resolveComponent("var-form-details");
@@ -39,14 +39,14 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createBlock("div", _hoisted_1, [_createVNode("div", _hoisted_2, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.modelValue, f => {
-    return _withDirectives((_openBlock(), _createBlock("div", {
-      class: ["var-uploader__file var-elevation--2", [f.state === 'loading' ? 'var-uploader--loading' : null]],
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.modelValue, f => {
+    return _withDirectives((_openBlock(), _createElementBlock("div", {
+      class: _normalizeClass(["var-uploader__file var-elevation--2", [f.state === 'loading' ? 'var-uploader--loading' : null]]),
       key: f,
       onClick: $event => _ctx.preview(f)
-    }, [_createVNode("div", _hoisted_3, _toDisplayString(f.name || f.url), 1
+    }, [_createElementVNode("div", _hoisted_4, _toDisplayString(f.name || f.url), 1
     /* TEXT */
-    ), _ctx.removable ? (_openBlock(), _createBlock("div", {
+    ), _ctx.removable ? (_openBlock(), _createElementBlock("div", {
       key: 0,
       class: "var-uploader__file-close",
       onClick: _withModifiers($event => _ctx.handleRemove(f), ["stop"])
@@ -56,41 +56,41 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
       name: "delete"
     })], 8
     /* PROPS */
-    , ["onClick"])) : _createCommentVNode("v-if", true), f.cover ? (_openBlock(), _createBlock("img", {
+    , _hoisted_5)) : _createCommentVNode("v-if", true), f.cover ? (_openBlock(), _createElementBlock("img", {
       key: 1,
       class: "var-uploader__file-cover",
-      style: {
+      style: _normalizeStyle({
         objectFit: f.fit
-      },
+      }),
       src: f.cover,
       alt: f.name
     }, null, 12
     /* STYLE, PROPS */
-    , ["src", "alt"])) : _createCommentVNode("v-if", true), _createVNode("div", {
-      class: ["var-uploader__file-indicator", [f.state === 'success' ? 'var-uploader--success' : null, f.state === 'error' ? 'var-uploader--error' : null]]
+    , _hoisted_6)) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+      class: _normalizeClass(["var-uploader__file-indicator", [f.state === 'success' ? 'var-uploader--success' : null, f.state === 'error' ? 'var-uploader--error' : null]])
     }, null, 2
     /* CLASS */
     )], 10
     /* CLASS, PROPS */
-    , ["onClick"])), [[_directive_ripple, {
+    , _hoisted_3)), [[_directive_ripple, {
       disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly || !_ctx.ripple
     }]]);
   }), 128
   /* KEYED_FRAGMENT */
-  )), !_ctx.maxlength || _ctx.modelValue.length < _ctx.maxlength ? _withDirectives((_openBlock(), _createBlock("div", {
+  )), !_ctx.maxlength || _ctx.modelValue.length < _ctx.maxlength ? _withDirectives((_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: ["var--relative", [!_ctx.$slots.default ? 'var-uploader__action var-elevation--2' : null, _ctx.disabled || _ctx.formDisabled ? 'var-uploader--disabled' : null]]
-  }, [_createVNode("input", {
+    class: _normalizeClass(["var--relative", [!_ctx.$slots.default ? 'var-uploader__action var-elevation--2' : null, _ctx.disabled || _ctx.formDisabled ? 'var-uploader--disabled' : null]])
+  }, [_createElementVNode("input", {
     class: "var-uploader__action-input",
     type: "file",
     multiple: _ctx.multiple,
     accept: _ctx.accept,
     capture: _ctx.capture,
     disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly,
-    onChange: _cache[1] || (_cache[1] = (...args) => _ctx.handleChange && _ctx.handleChange(...args))
+    onChange: _cache[0] || (_cache[0] = (...args) => _ctx.handleChange && _ctx.handleChange(...args))
   }, null, 40
   /* PROPS, HYDRATE_EVENTS */
-  , ["multiple", "accept", "capture", "disabled"]), _renderSlot(_ctx.$slots, "default", {}, () => [_createVNode(_component_var_icon, {
+  , _hoisted_7), _renderSlot(_ctx.$slots, "default", {}, () => [_createVNode(_component_var_icon, {
     class: "var-uploader__action-icon",
     "var-uploader-cover": "",
     name: "plus"
@@ -108,13 +108,13 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     "var-uploader-cover": "",
     position: "center",
     show: _ctx.showPreview,
-    "onUpdate:show": _cache[2] || (_cache[2] = $event => _ctx.showPreview = $event),
-    onClosed: _cache[3] || (_cache[3] = $event => _ctx.currentPreview = null)
+    "onUpdate:show": _cache[1] || (_cache[1] = $event => _ctx.showPreview = $event),
+    onClosed: _cache[2] || (_cache[2] = $event => _ctx.currentPreview = null)
   }, {
-    default: _withId(() => {
+    default: _withCtx(() => {
       var _ctx$currentPreview, _ctx$currentPreview2;
 
-      return [_ctx.currentPreview && _ctx.isHTMLSupportVideo((_ctx$currentPreview = _ctx.currentPreview) == null ? void 0 : _ctx$currentPreview.url) ? (_openBlock(), _createBlock("video", {
+      return [_ctx.currentPreview && _ctx.isHTMLSupportVideo((_ctx$currentPreview = _ctx.currentPreview) == null ? void 0 : _ctx$currentPreview.url) ? (_openBlock(), _createElementBlock("video", {
         key: 0,
         class: "var-uploader__preview-video",
         playsinline: "true",
@@ -126,7 +126,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
         src: (_ctx$currentPreview2 = _ctx.currentPreview) == null ? void 0 : _ctx$currentPreview2.url
       }, null, 8
       /* PROPS */
-      , ["src"])) : _createCommentVNode("v-if", true)];
+      , _hoisted_8)) : _createCommentVNode("v-if", true)];
     }),
     _: 1
     /* STABLE */
@@ -134,7 +134,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }, 8
   /* PROPS */
   , ["show"])]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarUploader',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "1.21.0",
+  "version": "1.22.0-alpha.15+97121f37",
   "description": "A material like components library",
   "module": "es/index.js",
   "typings": "types/index.d.ts",
@@ -43,11 +43,11 @@
     "test:watch": "varlet-cli jest -w"
   },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.2.0"
   },
-  "gitHead": "e6dfe7af1e601108222c170b04639d94c3f30ac1",
+  "gitHead": "97121f377fea975b88d2affc156f01d3c7dc43c1",
   "devDependencies": {
-    "@varlet/cli": "^1.21.0"
+    "@varlet/cli": "^1.22.0-alpha.15+97121f37"
   },
   "dependencies": {
     "dayjs": "^1.10.4",