@varlet/ui 1.21.0 → 1.22.0-alpha.10

package/es/swipe/Swipe.js

@@ -5,50 +5,46 @@ import { props } from './props';
 import { isNumber, toNumber } from '../utils/shared';
 var SWIPE_DELAY = 250;
 var SWIPE_DISTANCE = 20;
-import { renderSlot as _renderSlot, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, 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-swipe",
   ref: "swipeEl"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
-  return _openBlock(), _createBlock("div", _hoisted_1, [_createVNode("div", {
-    class: ["var-swipe__track", [_ctx.vertical ? 'var-swipe--vertical' : null]],
-    style: {
+var _hoisted_2 = ["onClick"];
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", {
+    class: _normalizeClass(["var-swipe__track", [_ctx.vertical ? 'var-swipe--vertical' : null]]),
+    style: _normalizeStyle({
       width: !_ctx.vertical ? _ctx.trackSize + "px" : null,
       height: _ctx.vertical ? _ctx.trackSize + "px" : null,
       transform: "translate" + (_ctx.vertical ? 'Y' : 'X') + "(" + _ctx.translate + "px)",
       transitionDuration: _ctx.lockDuration ? "0ms" : _ctx.toNumber(_ctx.duration) + "ms"
-    },
-    onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
-    onTouchmove: _cache[2] || (_cache[2] = (...args) => _ctx.handleTouchmove && _ctx.handleTouchmove(...args)),
-    onTouchend: _cache[3] || (_cache[3] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args))
+    }),
+    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
+    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchmove && _ctx.handleTouchmove(...args)),
+    onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args))
   }, [_renderSlot(_ctx.$slots, "default")], 38
   /* CLASS, STYLE, HYDRATE_EVENTS */
   ), _renderSlot(_ctx.$slots, "indicator", {
     index: _ctx.index,
     length: _ctx.length
-  }, () => [_ctx.indicator && _ctx.length ? (_openBlock(), _createBlock("div", {
+  }, () => [_ctx.indicator && _ctx.length ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: ["var-swipe__indicators", [_ctx.vertical ? 'var-swipe--indicators-vertical' : null]]
-  }, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.length, (l, idx) => {
-    return _openBlock(), _createBlock("div", {
-      class: ["var-swipe__indicator", [_ctx.index === idx ? 'var-swipe--indicator-active' : null, _ctx.vertical ? 'var-swipe--indicator-vertical' : null]],
-      style: {
+    class: _normalizeClass(["var-swipe__indicators", [_ctx.vertical ? 'var-swipe--indicators-vertical' : null]])
+  }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.length, (l, idx) => {
+    return _openBlock(), _createElementBlock("div", {
+      class: _normalizeClass(["var-swipe__indicator", [_ctx.index === idx ? 'var-swipe--indicator-active' : null, _ctx.vertical ? 'var-swipe--indicator-vertical' : null]]),
+      style: _normalizeStyle({
         background: _ctx.indicatorColor
-      },
+      }),
       key: l,
       onClick: $event => _ctx.to(idx)
     }, null, 14
     /* CLASS, STYLE, PROPS */
-    , ["onClick"]);
+    , _hoisted_2);
   }), 128
   /* KEYED_FRAGMENT */
   ))], 2
@@ -56,7 +52,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   )) : _createCommentVNode("v-if", true)])], 512
   /* NEED_PATCH */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarSwipe',

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',