@varlet/ui 1.20.0 → 1.22.0-alpha.2

package/es/sticky/Sticky.js

@@ -1,38 +1,35 @@
-import { defineComponent, ref, onMounted, onUnmounted, onActivated, onDeactivated, computed } from 'vue';
+import { defineComponent, ref, onMounted, onUnmounted, onActivated, onDeactivated, computed, watch } from 'vue';
 import { props } from './props';
 import { getParentScroller, toPxNum } from '../utils/elements';
 import { toNumber } from '../utils/shared';
-import { renderSlot as _renderSlot, createVNode as _createVNode, 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-sticky",
+import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(["var-sticky", [_ctx.enableCSSMode ? 'var-sticky--css-mode' : null]]),
     ref: "stickyEl",
-    style: {
+    style: _normalizeStyle({
       zIndex: _ctx.toNumber(_ctx.zIndex),
-      top: !_ctx.isFixed ? _ctx.offsetTop + "px" : null,
-      width: _ctx.isFixed ? _ctx.fixedWidth : null,
-      height: _ctx.isFixed ? _ctx.fixedHeight : null
-    }
-  }, [_createVNode("div", {
+      top: _ctx.enableCSSMode ? _ctx.offsetTop + "px" : null,
+      width: _ctx.enableFixedMode ? _ctx.fixedWidth : null,
+      height: _ctx.enableFixedMode ? _ctx.fixedHeight : null
+    })
+  }, [_createElementVNode("div", {
     class: "var-sticky__wrapper",
     ref: "wrapperEl",
-    style: {
+    style: _normalizeStyle({
       zIndex: _ctx.toNumber(_ctx.zIndex),
-      position: _ctx.isFixed ? 'fixed' : null,
-      width: _ctx.isFixed ? _ctx.fixedWrapperWidth : null,
-      height: _ctx.isFixed ? _ctx.fixedWrapperHeight : null,
-      left: _ctx.isFixed ? _ctx.fixedLeft : null,
-      top: _ctx.isFixed ? _ctx.fixedTop : null
-    }
+      position: _ctx.enableFixedMode ? 'fixed' : null,
+      width: _ctx.enableFixedMode ? _ctx.fixedWrapperWidth : null,
+      height: _ctx.enableFixedMode ? _ctx.fixedWrapperHeight : null,
+      left: _ctx.enableFixedMode ? _ctx.fixedLeft : null,
+      top: _ctx.enableFixedMode ? _ctx.fixedTop : null
+    })
   }, [_renderSlot(_ctx.$slots, "default")], 4
   /* STYLE */
-  )], 4
-  /* STYLE */
+  )], 6
+  /* CLASS, STYLE */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarSticky',
@@ -41,7 +38,6 @@ export default defineComponent({
   setup(props) {
     var stickyEl = ref(null);
     var wrapperEl = ref(null);
-    var isSupportCSSSticky;
     var isFixed = ref(false);
     var fixedTop = ref('0px');
     var fixedLeft = ref('0px');
@@ -49,10 +45,22 @@ export default defineComponent({
     var fixedHeight = ref('auto');
     var fixedWrapperWidth = ref('auto');
     var fixedWrapperHeight = ref('auto');
+    var enableCSSMode = computed(() => !props.disabled && props.cssMode);
+    var enableFixedMode = computed(() => !props.disabled && isFixed.value);
     var offsetTop = computed(() => toPxNum(props.offsetTop));
     var scroller = window;
 
     var handleScroll = () => {
+      var {
+        onScroll,
+        cssMode,
+        disabled
+      } = props;
+
+      if (disabled) {
+        return;
+      }
+
       var scrollerTop = 0;
 
       if (scroller !== window) {
@@ -69,12 +77,9 @@ export default defineComponent({
         left: stickyLeft
       } = sticky.getBoundingClientRect();
       var currentOffsetTop = stickyTop - scrollerTop;
-      var {
-        onScroll
-      } = props;
 
       if (currentOffsetTop <= offsetTop.value) {
-        if (!isSupportCSSSticky) {
+        if (!cssMode) {
           fixedWidth.value = sticky.offsetWidth + "px";
           fixedHeight.value = sticky.offsetHeight + "px";
           fixedTop.value = scrollerTop + offsetTop.value + "px";
@@ -103,12 +108,10 @@ export default defineComponent({
       window.removeEventListener('scroll', handleScroll);
     };
 
+    watch(() => props.disabled, handleScroll);
     onActivated(addScrollListener);
     onDeactivated(removeScrollListener);
-    onMounted(() => {
-      isSupportCSSSticky = ['sticky', '-webkit-sticky'].includes(window.getComputedStyle(stickyEl.value).position);
-      addScrollListener();
-    });
+    onMounted(addScrollListener);
     onUnmounted(removeScrollListener);
     return {
       stickyEl,
@@ -121,6 +124,8 @@ export default defineComponent({
       fixedHeight,
       fixedWrapperWidth,
       fixedWrapperHeight,
+      enableCSSMode,
+      enableFixedMode,
       toNumber
     };
   }

package/es/sticky/props.js

@@ -7,6 +7,14 @@ export var props = {
     type: [String, Number],
     default: 10
   },
+  cssMode: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
   onScroll: {
     type: Function
   }

package/es/sticky/sticky.css

@@ -1 +1 @@
-.var-sticky { position: sticky; position: -webkit-sticky;}
+.var-sticky { position: relative;}.var-sticky--css-mode { position: sticky; position: -webkit-sticky;}

package/es/sticky/sticky.less

@@ -1,4 +1,8 @@
 .var-sticky {
-  position: sticky;
-  position: -webkit-sticky;
+  position: relative;
+
+  &--css-mode {
+    position: sticky;
+    position: -webkit-sticky;
+  }
 }

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

@@ -4,19 +4,17 @@ 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',