@varlet/ui 2.16.2 → 2.16.3-alpha.1694267513697

package/es/tabs/Tabs.mjs

@@ -10,6 +10,7 @@ import { toSizeUnit, scrollTo } from '../utils/elements.mjs';
 import { createNamespace, call, formatElevation } from '../utils/components.mjs';
 import { onWindowResize } from '@varlet/use';
 var {
+  name,
   n,
   classes
 } = createNamespace('tabs');
@@ -47,7 +48,7 @@ function __render__(_ctx, _cache) {
   }, 8 /* PROPS */, ["css-mode", "offset-top", "z-index"]);
 }
 var __sfc__ = defineComponent({
-  name: 'VarTabs',
+  name,
   components: {
     VarSticky
   },
@@ -61,18 +62,35 @@ var __sfc__ = defineComponent({
     var localScrollable = ref(false);
     var scrollerEl = ref(null);
     var active = computed(() => props.active);
-    var indicatorPosition = computed(() => props.indicatorPosition === 'reverse' ? '-reverse' : '');
     var activeColor = computed(() => props.activeColor);
     var inactiveColor = computed(() => props.inactiveColor);
     var disabledColor = computed(() => props.disabledColor);
     var itemDirection = computed(() => props.itemDirection);
     var stickyComponent = ref(null);
+    var indicatorPosition = computed(() => props.indicatorPosition === 'reverse' ? '-reverse' : '');
     var {
       tabList,
       bindTabList,
       length
     } = useTabList();
-    var onTabClick = tab => {
+    var tabsProvider = {
+      active,
+      activeColor,
+      inactiveColor,
+      disabledColor,
+      itemDirection,
+      resize,
+      onTabClick
+    };
+    bindTabList(tabsProvider);
+    watch(() => length.value, /*#__PURE__*/_asyncToGenerator(function* () {
+      yield doubleRaf();
+      resize();
+    }));
+    watch(() => [props.active, props.scrollable], resize);
+    onActivated(resize);
+    onWindowResize(resize);
+    function onTabClick(tab) {
       var _tab$name$value;
       var currentActive = (_tab$name$value = tab.name.value) != null ? _tab$name$value : tab.index.value;
       var {
@@ -83,20 +101,24 @@ var __sfc__ = defineComponent({
       call(props['onUpdate:active'], currentActive);
       call(onClick, currentActive);
       currentActive !== active && call(onChange, currentActive);
-    };
-    var matchName = () => tabList.find(_ref => {
-      var {
-        name
-      } = _ref;
-      return props.active === name.value;
-    });
-    var matchIndex = activeIndex => tabList.find(_ref2 => {
-      var {
-        index
-      } = _ref2;
-      return (activeIndex != null ? activeIndex : props.active) === index.value;
-    });
-    var matchBoundary = () => {
+    }
+    function matchName() {
+      return tabList.find(_ref2 => {
+        var {
+          name
+        } = _ref2;
+        return props.active === name.value;
+      });
+    }
+    function matchIndex(activeIndex) {
+      return tabList.find(_ref3 => {
+        var {
+          index
+        } = _ref3;
+        return (activeIndex != null ? activeIndex : props.active) === index.value;
+      });
+    }
+    function matchBoundary() {
       if (length.value === 0) {
         return;
       }
@@ -108,14 +130,14 @@ var __sfc__ = defineComponent({
         call(props['onUpdate:active'], activeIndex);
         return matchIndex(activeIndex);
       }
-    };
-    var watchScrollable = () => {
+    }
+    function watchScrollable() {
       localScrollable.value = props.scrollable === 'always' || tabList.length >= 5;
-    };
-    var moveIndicator = _ref3 => {
+    }
+    function moveIndicator(_ref4) {
       var {
         element
-      } = _ref3;
+      } = _ref4;
       var el = element.value;
       if (!el) return;
       if (props.layoutDirection === 'horizontal') {
@@ -125,11 +147,11 @@ var __sfc__ = defineComponent({
         indicatorHeight.value = el.offsetHeight + "px";
         indicatorY.value = el.offsetTop + "px";
       }
-    };
-    var scrollToCenter = _ref4 => {
+    }
+    function scrollToCenter(_ref5) {
       var {
         element
-      } = _ref4;
+      } = _ref5;
       if (!localScrollable.value) {
         return;
       }
@@ -148,10 +170,10 @@ var __sfc__ = defineComponent({
           animation: linear
         });
       }
-    };
+    }
 
     // expose
-    var resize = () => {
+    function resize() {
       var tab = matchName() || matchIndex() || matchBoundary();
       if (!tab || tab.disabled.value) {
         return;
@@ -159,37 +181,20 @@ var __sfc__ = defineComponent({
       watchScrollable();
       moveIndicator(tab);
       scrollToCenter(tab);
-    };
+    }
 
     // expose
-    var resizeSticky = /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator(function* () {
+    function resizeSticky() {
+      return _resizeSticky.apply(this, arguments);
+    }
+    function _resizeSticky() {
+      _resizeSticky = _asyncToGenerator(function* () {
         if (props.sticky && stickyComponent.value) {
           yield stickyComponent.value.resize();
         }
       });
-      return function resizeSticky() {
-        return _ref5.apply(this, arguments);
-      };
-    }();
-    var tabsProvider = {
-      active,
-      activeColor,
-      inactiveColor,
-      disabledColor,
-      itemDirection,
-      resize,
-      onTabClick
-    };
-    bindTabList(tabsProvider);
-    watch(() => length.value, /*#__PURE__*/_asyncToGenerator(function* () {
-      yield doubleRaf();
-      resize();
-    }));
-    watch(() => props.active, resize);
-    watch(() => props.scrollable, resize);
-    onActivated(resize);
-    onWindowResize(resize);
+      return _resizeSticky.apply(this, arguments);
+    }
     return {
       stickyComponent,
       indicatorWidth,

package/es/tabs-items/TabsItems.mjs

@@ -7,6 +7,7 @@ import { call, createNamespace } from '../utils/components.mjs';
 import { props } from './props.mjs';
 import { doubleRaf } from '@varlet/shared';
 var {
+  name,
   n
 } = createNamespace('tabs-items');
 import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
@@ -25,7 +26,7 @@ function __render__(_ctx, _cache) {
   }, 8 /* PROPS */, ["class", "loop", "touchable", "onChange"]);
 }
 var __sfc__ = defineComponent({
-  name: 'VarTabsItems',
+  name,
   components: {
     VarSwipe
   },
@@ -37,54 +38,62 @@ var __sfc__ = defineComponent({
       bindTabItem,
       length
     } = useTabItem();
-    var matchName = active => tabItemList.find(_ref => {
-      var {
-        name
-      } = _ref;
-      return active === name.value;
-    });
-    var matchIndex = active => tabItemList.find(_ref2 => {
-      var {
-        index
-      } = _ref2;
-      return active === index.value;
-    });
-    var matchActive = active => matchName(active) || matchIndex(active);
-    var handleActiveChange = newValue => {
+    bindTabItem({});
+    watch(() => props.active, handleActiveChange);
+    watch(() => length.value, /*#__PURE__*/_asyncToGenerator(function* () {
+      yield doubleRaf();
+      handleActiveChange(props.active);
+    }));
+    function matchName(active) {
+      return tabItemList.find(_ref2 => {
+        var {
+          name
+        } = _ref2;
+        return active === name.value;
+      });
+    }
+    function matchIndex(active) {
+      return tabItemList.find(_ref3 => {
+        var {
+          index
+        } = _ref3;
+        return active === index.value;
+      });
+    }
+    function matchActive(active) {
+      return matchName(active) || matchIndex(active);
+    }
+    function handleActiveChange(newValue) {
       var _swipe$value;
       var newActiveTabItemProvider = matchActive(newValue);
       if (!newActiveTabItemProvider) {
         return;
       }
-      tabItemList.forEach(_ref3 => {
+      tabItemList.forEach(_ref4 => {
         var {
           setCurrent
-        } = _ref3;
+        } = _ref4;
         return setCurrent(false);
       });
       newActiveTabItemProvider.setCurrent(true);
       (_swipe$value = swipe.value) == null ? void 0 : _swipe$value.to(newActiveTabItemProvider.index.value);
-    };
-    var handleSwipeChange = currentIndex => {
+    }
+    function handleSwipeChange(currentIndex) {
       var _tabItem$name$value;
-      var tabItem = tabItemList.find(_ref4 => {
+      var tabItem = tabItemList.find(_ref5 => {
         var {
           index
-        } = _ref4;
+        } = _ref5;
         return index.value === currentIndex;
       });
       var active = (_tabItem$name$value = tabItem.name.value) != null ? _tabItem$name$value : tabItem.index.value;
       call(props['onUpdate:active'], active);
-    };
+    }
 
     // expose
-    var getSwipe = () => swipe.value;
-    bindTabItem({});
-    watch(() => props.active, handleActiveChange);
-    watch(() => length.value, /*#__PURE__*/_asyncToGenerator(function* () {
-      yield doubleRaf();
-      handleActiveChange(props.active);
-    }));
+    function getSwipe() {
+      return swipe.value;
+    }
     return {
       swipe,
       n,

package/es/time-picker/TimePicker.mjs

@@ -7,6 +7,7 @@ import { createNamespace, call, formatElevation } from '../utils/components.mjs'
 import { padStart } from '../utils/shared.mjs';
 import { getNumberTime, getIsDisableMinute, getIsDisableSecond } from './utils.mjs';
 var {
+  name,
   n,
   classes
 } = createNamespace('time-picker');
@@ -87,7 +88,7 @@ function __render__(_ctx, _cache) {
 }
 
 var __sfc__ = defineComponent({
-  name: 'VarTimePicker',
+  name,
   components: {
     Clock
   },
@@ -101,13 +102,13 @@ var __sfc__ = defineComponent({
     var isActualInner = ref(false);
     var isChosenUsableHour = ref(false);
     var isChosenUsableMinute = ref(false);
-    var hourRad = ref(undefined);
+    var isDisableHour = ref(false);
+    var isDisableMinute = ref(false);
     var minuteRad = ref(0);
     var secondRad = ref(0);
+    var hourRad = ref();
     var type = ref('hour');
     var ampm = ref('am');
-    var isDisableHour = ref(false);
-    var isDisableMinute = ref(false);
     var time = ref({
       hour: '00',
       minute: '00',
@@ -126,17 +127,42 @@ var __sfc__ = defineComponent({
       if (type.value === 'minute') return minuteRad.value;
       return secondRad.value;
     });
-    var update = newTime => {
+    watch(() => props.modelValue, value => {
+      if (value) {
+        var {
+          hour,
+          minute,
+          second
+        } = getNumberTime(value);
+        var formatHour12 = dayjs().hour(hour).format('hh');
+        var formatHour24 = dayjs().hour(hour).format('HH');
+        var formatMinute = dayjs().minute(minute).format('mm');
+        var formatSecond = dayjs().second(second).format('ss');
+        hourRad.value = (formatHour12 === '12' ? 0 : toNumber(formatHour12)) * 30;
+        minuteRad.value = toNumber(formatMinute) * 6;
+        secondRad.value = toNumber(formatSecond) * 6;
+        time.value = getTime(value);
+        if (props.format !== '24hr') {
+          ampm.value = padStart("" + hour, 2, '0') === formatHour24 && hours24.includes(formatHour24) ? 'pm' : 'am';
+        }
+        isInner.value = props.format === '24hr' && hours24.includes(formatHour24);
+      }
+    }, {
+      immediate: true
+    });
+    function update(newTime) {
       call(props['onUpdate:modelValue'], newTime);
       call(props.onChange, newTime);
-    };
-    var rad2deg = rad => rad * 57.29577951308232;
-    var checkPanel = panelType => {
+    }
+    function rad2deg(rad) {
+      return rad * 57.29577951308232;
+    }
+    function checkPanel(panelType) {
       isChosenUsableHour.value = false;
       isDisableMinute.value = false;
       type.value = panelType;
-    };
-    var findAvailableHour = ampm => {
+    }
+    function findAvailableHour(ampm) {
       var {
         disableHour
       } = inner.value;
@@ -147,8 +173,8 @@ var __sfc__ = defineComponent({
         isPreventNextUpdate.value = index !== 0;
         return !disableHour.includes(hour);
       });
-    };
-    var checkAmpm = ampmType => {
+    }
+    function checkAmpm(ampmType) {
       if (props.readonly) return;
       ampm.value = ampmType;
       var newHour = findAvailableHour(ampmType);
@@ -156,13 +182,13 @@ var __sfc__ = defineComponent({
       var second = props.useSeconds ? ":" + time.value.second : '';
       var newTime = padStart(newHour, 2, '0') + ":" + time.value.minute + second;
       update(newTime);
-    };
-    var getInner = (clientX, clientY) => {
+    }
+    function getInner(clientX, clientY) {
       var xIsInRange = clientX >= innerRange.x[0] && clientX <= innerRange.x[1];
       var yIsInRange = clientY >= innerRange.y[0] && clientY <= innerRange.y[1];
       return xIsInRange && yIsInRange;
-    };
-    var getTime = value => {
+    }
+    function getTime(value) {
       var hourFormat = props.format === '24hr' ? 'HH' : 'hh';
       var {
         hour,
@@ -174,12 +200,12 @@ var __sfc__ = defineComponent({
         minute: dayjs().minute(minute).format('mm'),
         second: dayjs().second(second).format('ss')
       };
-    };
-    var getHourIndex = rad => {
+    }
+    function getHourIndex(rad) {
       var value = rad / 30;
       return value >= 0 ? value : value + 12;
-    };
-    var getRangeSize = () => {
+    }
+    function getRangeSize() {
       var {
         width: innerWidth,
         height: innerHeight
@@ -194,8 +220,8 @@ var __sfc__ = defineComponent({
         rangeYMin,
         rangeYMax
       };
-    };
-    var setHourRad = (clientX, clientY, roundDeg) => {
+    }
+    function setHourRad(clientX, clientY, roundDeg) {
       var {
         disableHour
       } = inner.value;
@@ -212,8 +238,8 @@ var __sfc__ = defineComponent({
       if (isDisableHour.value) return;
       hourRad.value = rad;
       isChosenUsableHour.value = true;
-    };
-    var setMinuteRad = roundDeg => {
+    }
+    function setMinuteRad(roundDeg) {
       var {
         disableHour
       } = inner.value;
@@ -233,8 +259,8 @@ var __sfc__ = defineComponent({
       if (isDisableMinute.value) return;
       minuteRad.value = rad;
       isChosenUsableMinute.value = true;
-    };
-    var setSecondRad = roundDeg => {
+    }
+    function setSecondRad(roundDeg) {
       var {
         disableHour
       } = inner.value;
@@ -252,8 +278,8 @@ var __sfc__ = defineComponent({
         allowedTime: props.allowedTime
       };
       if (!getIsDisableSecond(values)) secondRad.value = rad;
-    };
-    var setCenterAndRange = () => {
+    }
+    function setCenterAndRange() {
       var {
         left,
         top,
@@ -272,8 +298,8 @@ var __sfc__ = defineComponent({
         innerRange.x = [rangeXMin, rangeXMax];
         innerRange.y = [rangeYMin, rangeYMax];
       }
-    };
-    var moveHand = event => {
+    }
+    function moveHand(event) {
       event.preventDefault();
       if (props.readonly) return;
       setCenterAndRange();
@@ -285,8 +311,8 @@ var __sfc__ = defineComponent({
       var y = clientY - center.y;
       var roundDeg = Math.round(rad2deg(Math.atan2(y, x)));
       if (type.value === 'hour') setHourRad(clientX, clientY, roundDeg);else if (type.value === 'minute') setMinuteRad(roundDeg);else setSecondRad(roundDeg);
-    };
-    var end = () => {
+    }
+    function end() {
       if (props.readonly) return;
       if (type.value === 'hour' && isChosenUsableHour.value) {
         type.value = 'minute';
@@ -295,36 +321,11 @@ var __sfc__ = defineComponent({
       if (type.value === 'minute' && props.useSeconds && isChosenUsableMinute.value) {
         type.value = 'second';
       }
-    };
-    var changePreventUpdate = () => {
+    }
+    function changePreventUpdate() {
       isPreventNextUpdate.value = false;
-    };
-    watch(() => props.modelValue, value => {
-      if (value) {
-        var {
-          hour,
-          minute,
-          second
-        } = getNumberTime(value);
-        var formatHour12 = dayjs().hour(hour).format('hh');
-        var formatHour24 = dayjs().hour(hour).format('HH');
-        var formatMinute = dayjs().minute(minute).format('mm');
-        var formatSecond = dayjs().second(second).format('ss');
-        hourRad.value = (formatHour12 === '12' ? 0 : toNumber(formatHour12)) * 30;
-        minuteRad.value = toNumber(formatMinute) * 6;
-        secondRad.value = toNumber(formatSecond) * 6;
-        time.value = getTime(value);
-        if (props.format !== '24hr') {
-          ampm.value = padStart("" + hour, 2, '0') === formatHour24 && hours24.includes(formatHour24) ? 'pm' : 'am';
-        }
-        isInner.value = props.format === '24hr' && hours24.includes(formatHour24);
-      }
-    }, {
-      immediate: true
-    });
+    }
     return {
-      n,
-      classes,
       getRad,
       time,
       container,
@@ -334,6 +335,8 @@ var __sfc__ = defineComponent({
       type,
       ampm,
       isPreventNextUpdate,
+      n,
+      classes,
       moveHand,
       checkPanel,
       checkAmpm,

package/es/tooltip/Tooltip.mjs

@@ -4,6 +4,7 @@ import { toSizeUnit } from '../utils/elements.mjs';
 import { usePopover } from '../menu/usePopover.mjs';
 import { props } from './props.mjs';
 var {
+  name,
   n,
   classes
 } = createNamespace('tooltip');
@@ -55,7 +56,7 @@ function __render__(_ctx, _cache) {
 }
 
 var __sfc__ = defineComponent({
-  name: 'VarTooltip',
+  name,
   props,
   setup(props) {
     var {
@@ -82,13 +83,13 @@ var __sfc__ = defineComponent({
       resize
     } = usePopover(props);
     return {
-      toSizeUnit,
       popover,
       host,
       hostSize,
       show,
       zIndex,
       teleportDisabled,
+      toSizeUnit,
       n,
       classes,
       handleHostClick,