@varlet/ui 2.16.1 → 2.16.3-alpha.1694267513697

package/es/picker/Picker.mjs

@@ -4,11 +4,11 @@ import { defineComponent, watch, ref, computed, Transition, toRaw } from 'vue';
 import { props } from './props.mjs';
 import { useTouch } from '@varlet/use';
 import { clamp, clampArrayRange, isArray } from '@varlet/shared';
-import { dt } from '../utils/shared.mjs';
 import { toPxNum, getTranslateY } from '../utils/elements.mjs';
 import { pack } from '../locale/index.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
 var {
+  name,
   n,
   classes
 } = createNamespace('picker');
@@ -53,19 +53,28 @@ function __render__(_ctx, _cache) {
       "text-color": _ctx.cancelButtonTextColor,
       onClick: _ctx.cancel
     }, {
-      default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.cancelButtonText, _ctx.pack.pickerCancelButtonText)), 1 /* TEXT */)]),
+      default: _withCtx(() => {
+        var _ctx$cancelButtonText;
+        return [_createTextVNode(_toDisplayString((_ctx$cancelButtonText = _ctx.cancelButtonText) != null ? _ctx$cancelButtonText : _ctx.pack.pickerCancelButtonText), 1 /* TEXT */)];
+      }),
 
       _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["class", "text-color", "onClick"])]), _renderSlot(_ctx.$slots, "title", {}, () => [_createElementVNode("div", {
-      class: _normalizeClass(_ctx.n('title'))
-    }, _toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.pickerTitle)), 3 /* TEXT, CLASS */)]), _renderSlot(_ctx.$slots, "confirm", {}, () => [_createVNode(_component_var_button, {
+    }, 8 /* PROPS */, ["class", "text-color", "onClick"])]), _renderSlot(_ctx.$slots, "title", {}, () => {
+      var _ctx$title;
+      return [_createElementVNode("div", {
+        class: _normalizeClass(_ctx.n('title'))
+      }, _toDisplayString((_ctx$title = _ctx.title) != null ? _ctx$title : _ctx.pack.pickerTitle), 3 /* TEXT, CLASS */)];
+    }), _renderSlot(_ctx.$slots, "confirm", {}, () => [_createVNode(_component_var_button, {
       class: _normalizeClass(_ctx.n('confirm-button')),
       text: "",
       "var-picker-cover": "",
       "text-color": _ctx.confirmButtonTextColor,
       onClick: _ctx.confirm
     }, {
-      default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.confirmButtonText, _ctx.pack.pickerConfirmButtonText)), 1 /* TEXT */)]),
+      default: _withCtx(() => {
+        var _ctx$confirmButtonTex;
+        return [_createTextVNode(_toDisplayString((_ctx$confirmButtonTex = _ctx.confirmButtonText) != null ? _ctx$confirmButtonTex : _ctx.pack.pickerConfirmButtonText), 1 /* TEXT */)];
+      }),
 
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["class", "text-color", "onClick"])])], 2 /* CLASS */)) : _createCommentVNode("v-if", true), _createElementVNode("div", {
@@ -120,7 +129,7 @@ function __render__(_ctx, _cache) {
 }
 
 var __sfc__ = defineComponent({
-  name: 'VarPicker',
+  name,
   components: {
     VarButton,
     VarPopup
@@ -133,7 +142,6 @@ var __sfc__ = defineComponent({
     var optionCount = computed(() => toPxNum(props.optionCount));
     var center = computed(() => optionCount.value * optionHeight.value / 2 - optionHeight.value / 2);
     var columnHeight = computed(() => optionCount.value * optionHeight.value);
-    var prevIndexes = [];
     var {
       prevY,
       moveY,
@@ -142,57 +150,68 @@ var __sfc__ = defineComponent({
       moveTouch,
       endTouch
     } = useTouch();
-    var setScrollEl = (el, scrollColumn) => {
+    var prevIndexes = [];
+    watch(() => props.columns, newValue => {
+      scrollColumns.value = props.cascade ? normalizeCascadeColumns(toRaw(newValue)) : normalizeNormalColumns(toRaw(newValue));
+      var {
+        indexes
+      } = getPicked();
+      prevIndexes = [...indexes];
+    }, {
+      immediate: true,
+      deep: true
+    });
+    function setScrollEl(el, scrollColumn) {
       scrollColumn.scrollEl = el;
-    };
-    var handlePopupUpdateShow = value => {
+    }
+    function handlePopupUpdateShow(value) {
       call(props['onUpdate:show'], value);
-    };
-    var clampTranslate = scrollColumn => {
+    }
+    function clampTranslate(scrollColumn) {
       var minTranslate = center.value - scrollColumn.column.texts.length * optionHeight.value;
       var maxTranslate = optionHeight.value + center.value;
       scrollColumn.translate = clamp(scrollColumn.translate, minTranslate, maxTranslate);
-    };
-    var getTargetIndex = (scrollColumn, viewTranslate) => {
+    }
+    function getTargetIndex(scrollColumn, viewTranslate) {
       var index = Math.round((center.value - viewTranslate) / optionHeight.value);
       return clampArrayRange(index, scrollColumn.column.texts);
-    };
-    var updateTranslate = scrollColumn => {
+    }
+    function updateTranslate(scrollColumn) {
       scrollColumn.translate = center.value - scrollColumn.index * optionHeight.value;
       return scrollColumn.translate;
-    };
-    var getPicked = () => {
+    }
+    function getPicked() {
       var texts = scrollColumns.value.map(scrollColumn => scrollColumn.column.texts[scrollColumn.index]);
       var indexes = scrollColumns.value.map(scrollColumn => scrollColumn.index);
       return {
         texts,
         indexes
       };
-    };
-    var scrollTo = function (scrollColumn, duration) {
+    }
+    function scrollTo(scrollColumn, duration) {
       if (duration === void 0) {
         duration = 0;
       }
       updateTranslate(scrollColumn);
       scrollColumn.duration = duration;
-    };
-    var momentum = (scrollColumn, distance, duration) => {
+    }
+    function momentum(scrollColumn, distance, duration) {
       scrollColumn.translate += Math.abs(distance / duration) / 0.003 * (distance < 0 ? -1 : 1);
-    };
-    var handleClick = (scrollColumn, index) => {
+    }
+    function handleClick(scrollColumn, index) {
       if (dragging.value) {
         return;
       }
       scrollColumn.index = index;
       scrollColumn.scrolling = true;
       scrollTo(scrollColumn, TRANSITION_DURATION);
-    };
-    var handleTouchstart = (event, scrollColumn) => {
+    }
+    function handleTouchstart(event, scrollColumn) {
       scrollColumn.touching = true;
       scrollColumn.translate = getTranslateY(scrollColumn.scrollEl);
       startTouch(event);
-    };
-    var handleTouchmove = (event, scrollColumn) => {
+    }
+    function handleTouchmove(event, scrollColumn) {
       if (!scrollColumn.touching) {
         return;
       }
@@ -207,8 +226,8 @@ var __sfc__ = defineComponent({
         scrollColumn.momentumTime = now;
         scrollColumn.momentumPrevY = scrollColumn.translate;
       }
-    };
-    var handleTouchend = scrollColumn => {
+    }
+    function handleTouchend(scrollColumn) {
       endTouch();
       scrollColumn.touching = false;
       scrollColumn.prevY = 0;
@@ -228,39 +247,41 @@ var __sfc__ = defineComponent({
       if (!scrollColumn.scrolling) {
         change(scrollColumn);
       }
-    };
-    var handleTransitionend = scrollColumn => {
+    }
+    function handleTransitionend(scrollColumn) {
       scrollColumn.scrolling = false;
       change(scrollColumn);
-    };
-    var normalizeNormalColumns = normalColumns => normalColumns.map((column, columnIndex) => {
-      var _normalColumn$initial;
-      var normalColumn = isArray(column) ? {
-        texts: column
-      } : column;
-      var scrollColumn = {
-        id: sid++,
-        prevY: 0,
-        momentumPrevY: 0,
-        touching: false,
-        translate: center.value,
-        index: (_normalColumn$initial = normalColumn.initialIndex) != null ? _normalColumn$initial : 0,
-        columnIndex,
-        duration: 0,
-        momentumTime: 0,
-        column: normalColumn,
-        scrollEl: null,
-        scrolling: false
-      };
-      scrollTo(scrollColumn);
-      return scrollColumn;
-    });
-    var normalizeCascadeColumns = cascadeColumns => {
+    }
+    function normalizeNormalColumns(normalColumns) {
+      return normalColumns.map((column, columnIndex) => {
+        var _normalColumn$initial;
+        var normalColumn = isArray(column) ? {
+          texts: column
+        } : column;
+        var scrollColumn = {
+          id: sid++,
+          prevY: 0,
+          momentumPrevY: 0,
+          touching: false,
+          translate: center.value,
+          index: (_normalColumn$initial = normalColumn.initialIndex) != null ? _normalColumn$initial : 0,
+          columnIndex,
+          duration: 0,
+          momentumTime: 0,
+          column: normalColumn,
+          scrollEl: null,
+          scrolling: false
+        };
+        scrollTo(scrollColumn);
+        return scrollColumn;
+      });
+    }
+    function normalizeCascadeColumns(cascadeColumns) {
       var scrollColumns = [];
       createChildren(scrollColumns, cascadeColumns, 0, true);
       return scrollColumns;
-    };
-    var createChildren = function (scrollColumns, children, columnIndex, initial) {
+    }
+    function createChildren(scrollColumns, children, columnIndex, initial) {
       if (initial === void 0) {
         initial = false;
       }
@@ -288,18 +309,18 @@ var __sfc__ = defineComponent({
         scrollTo(scrollColumn);
         createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children, columnIndex + 1, initial);
       }
-    };
-    var rebuildChildren = scrollColumn => {
+    }
+    function rebuildChildren(scrollColumn) {
       scrollColumns.value.splice(scrollColumns.value.indexOf(scrollColumn) + 1);
       createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children, scrollColumn.columnIndex + 1);
-    };
-    var isSamePicked = () => {
+    }
+    function isSamePicked() {
       var {
         indexes
       } = getPicked();
       return indexes.every((index, idx) => index === prevIndexes[idx]);
-    };
-    var change = scrollColumn => {
+    }
+    function change(scrollColumn) {
       var {
         cascade,
         onChange
@@ -322,8 +343,8 @@ var __sfc__ = defineComponent({
       } = getPicked();
       prevIndexes = [...indexes];
       call(onChange, texts, indexes);
-    };
-    var stopScroll = () => {
+    }
+    function stopScroll() {
       if (props.cascade) {
         var currentScrollColumn = scrollColumns.value.find(scrollColumn => scrollColumn.scrolling);
         if (currentScrollColumn) {
@@ -338,10 +359,10 @@ var __sfc__ = defineComponent({
           scrollTo(scrollColumn);
         });
       }
-    };
+    }
 
     // expose
-    var confirm = () => {
+    function confirm() {
       stopScroll();
       var {
         texts,
@@ -349,10 +370,10 @@ var __sfc__ = defineComponent({
       } = getPicked();
       prevIndexes = [...indexes];
       call(props.onConfirm, texts, indexes);
-    };
+    }
 
     // expose
-    var cancel = () => {
+    function cancel() {
       stopScroll();
       var {
         texts,
@@ -360,20 +381,8 @@ var __sfc__ = defineComponent({
       } = getPicked();
       prevIndexes = [...indexes];
       call(props.onCancel, texts, indexes);
-    };
-    watch(() => props.columns, newValue => {
-      scrollColumns.value = props.cascade ? normalizeCascadeColumns(toRaw(newValue)) : normalizeNormalColumns(toRaw(newValue));
-      var {
-        indexes
-      } = getPicked();
-      prevIndexes = [...indexes];
-    }, {
-      immediate: true,
-      deep: true
-    });
+    }
     return {
-      n,
-      classes,
       pack,
       optionHeight,
       optionCount,
@@ -381,6 +390,8 @@ var __sfc__ = defineComponent({
       columnHeight,
       center,
       Transition,
+      n,
+      classes,
       setScrollEl,
       handlePopupUpdateShow,
       handleTouchstart,
@@ -389,7 +400,6 @@ var __sfc__ = defineComponent({
       handleTransitionend,
       confirm,
       cancel,
-      dt,
       handleClick
     };
   }

package/es/popup/Popup.mjs

@@ -13,11 +13,12 @@ function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
 }
 var {
+  name,
   n,
   classes
 } = createNamespace('popup');
 export default defineComponent({
-  name: 'VarPopup',
+  name,
   inheritAttrs: false,
   props,
   setup(props, _ref) {
@@ -35,7 +36,17 @@ export default defineComponent({
     var {
       bindPopupItems
     } = usePopupItems();
-    var hidePopup = () => {
+    useLock(() => props.show, () => props.lockScroll);
+    watch(() => props.show, newValue => {
+      newValue ? call(props.onOpen) : call(props.onClose);
+    });
+    bindPopupItems({
+      show: computed(() => props.show)
+    });
+
+    // internal for Dialog
+    useRouteListener(() => call(props.onRouteChange));
+    function hidePopup() {
       var {
         closeOnClickOverlay,
         onClickOverlay
@@ -45,8 +56,8 @@ export default defineComponent({
         return;
       }
       call(props['onUpdate:show'], false);
-    };
-    var renderOverlay = () => {
+    }
+    function renderOverlay() {
       var {
         overlayClass = '',
         overlayStyle
@@ -58,14 +69,16 @@ export default defineComponent({
         }, overlayStyle),
         "onClick": hidePopup
       }, null);
-    };
-    var renderContent = () => _withDirectives(_createVNode("div", _mergeProps({
-      "class": classes(n('content'), n("--" + props.position), [props.defaultStyle, n('--content-background-color')], [props.defaultStyle, n('$-elevation--3')], [props.safeArea, n('--safe-area')], [props.safeAreaTop, n('--safe-area-top')]),
-      "style": {
-        zIndex: zIndex.value
-      }
-    }, attrs), [rendered.value && call(slots.default)]), [[_vShow, props.show]]);
-    var renderPopup = () => {
+    }
+    function renderContent() {
+      return _withDirectives(_createVNode("div", _mergeProps({
+        "class": classes(n('content'), n("--" + props.position), [props.defaultStyle, n('--content-background-color')], [props.defaultStyle, n('$-elevation--3')], [props.safeArea, n('--safe-area')], [props.safeAreaTop, n('--safe-area-top')]),
+        "style": {
+          zIndex: zIndex.value
+        }
+      }, attrs), [rendered.value && call(slots.default)]), [[_vShow, props.show]]);
+    }
+    function renderPopup() {
       var _slot;
       return _createVNode(Transition, {
         "name": n('$-fade'),
@@ -83,17 +96,7 @@ export default defineComponent({
           default: () => [_slot]
         })]), [[_vShow, props.show]])]
       });
-    };
-    useLock(() => props.show, () => props.lockScroll);
-    watch(() => props.show, newValue => {
-      newValue ? call(props.onOpen) : call(props.onClose);
-    });
-    bindPopupItems({
-      show: computed(() => props.show)
-    });
-
-    // internal for Dialog
-    useRouteListener(() => call(props.onRouteChange));
+    }
     return () => {
       var {
         teleport

package/es/progress/Progress.mjs

@@ -3,7 +3,11 @@ import { props } from './props.mjs';
 import { toNumber } from '@varlet/shared';
 import { toSizeUnit, toPxNum } from '../utils/elements.mjs';
 import { createNamespace } from '../utils/components.mjs';
+var ONE_HUNDRED = 100;
+var RADIUS = 20;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 var {
+  name,
   n,
   classes
 } = createNamespace('progress');
@@ -91,12 +95,9 @@ function __render__(_ctx, _cache) {
 }
 
 var __sfc__ = defineComponent({
-  name: 'VarProgress',
+  name,
   props,
   setup(props) {
-    var ONE_HUNDRED = 100;
-    var RADIUS = 20;
-    var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
     var linearProps = computed(() => {
       var value = toNumber(props.value);
       var width = value > ONE_HUNDRED ? ONE_HUNDRED : value;
@@ -125,13 +126,13 @@ var __sfc__ = defineComponent({
       };
     });
     return {
-      n,
-      classes,
-      toSizeUnit,
       linearProps,
       CIRCUMFERENCE,
       RADIUS,
-      circleProps
+      circleProps,
+      n,
+      classes,
+      toSizeUnit
     };
   }
 });

package/es/pull-refresh/PullRefresh.mjs

@@ -8,6 +8,7 @@ import { isNumber, isString, toNumber, getRect } from '@varlet/shared';
 import { call, createNamespace } from '../utils/components.mjs';
 import { useEventListener, onSmartMounted } from '@varlet/use';
 var {
+  name,
   n,
   classes
 } = createNamespace('pull-refresh');
@@ -40,7 +41,7 @@ function __render__(_ctx, _cache) {
 }
 
 var __sfc__ = defineComponent({
-  name: 'VarPullRefresh',
+  name,
   components: {
     VarIcon
   },
@@ -54,12 +55,37 @@ var __sfc__ = defineComponent({
     var iconName = ref('arrow-down');
     var refreshStatus = ref('default');
     var isEnd = ref(false);
+    var maxDistance = computed(() => Math.abs(2 * controlPosition.value));
+    var isSuccess = computed(() => refreshStatus.value === 'success');
+    var isTouchable = computed(() => refreshStatus.value !== 'loading' && refreshStatus.value !== 'success' && !props.disabled);
+    var controlStyle = computed(() => ({
+      transform: "translate3d(0px, " + (isString(distance.value) ? distance.value : distance.value + "px") + ", 0px) translate(-50%, 0)",
+      transition: isEnd.value ? "transform " + props.animationDuration + "ms" : undefined,
+      background: isSuccess.value ? props.successBgColor : props.bgColor,
+      color: isSuccess.value ? props.successColor : props.color
+    }));
     var scroller;
     var eventTargetScroller;
     var startY = 0;
     var deltaY = 0;
-    var startIconTransition = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator(function* (name) {
+    watch(() => props.modelValue, newValue => {
+      if (newValue === false) {
+        isEnd.value = true;
+        refreshStatus.value = 'success';
+        iconName.value = 'checkbox-marked-circle';
+        setTimeout(() => {
+          distance.value = controlPosition.value;
+          reset();
+        }, toNumber(props.successDuration));
+      }
+    });
+    onSmartMounted(setScroller);
+    useEventListener(freshNode, 'touchmove', touchMove);
+    function startIconTransition(_x) {
+      return _startIconTransition.apply(this, arguments);
+    }
+    function _startIconTransition() {
+      _startIconTransition = _asyncToGenerator(function* (name) {
         if (iconName.value === name) {
           return;
         }
@@ -68,24 +94,13 @@ var __sfc__ = defineComponent({
           window.setTimeout(resolve, ICON_TRANSITION);
         });
       });
-      return function startIconTransition(_x) {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    var isTouchable = computed(() => refreshStatus.value !== 'loading' && refreshStatus.value !== 'success' && !props.disabled);
-    var controlStyle = computed(() => ({
-      transform: "translate3d(0px, " + (isString(distance.value) ? distance.value : distance.value + "px") + ", 0px) translate(-50%, 0)",
-      transition: isEnd.value ? "transform " + props.animationDuration + "ms" : undefined,
-      background: isSuccess.value ? props.successBgColor : props.bgColor,
-      color: isSuccess.value ? props.successColor : props.color
-    }));
-    var maxDistance = computed(() => Math.abs(2 * controlPosition.value));
-    var isSuccess = computed(() => refreshStatus.value === 'success');
-    var lockEvent = action => {
+      return _startIconTransition.apply(this, arguments);
+    }
+    function lockEvent(action) {
       var el = 'classList' in scroller ? scroller : document.body;
       el.classList[action](n() + "--lock");
-    };
-    var touchStart = event => {
+    }
+    function touchStart(event) {
       if (controlPosition.value === 0) {
         var {
           width
@@ -95,8 +110,8 @@ var __sfc__ = defineComponent({
       startY = event.touches[0].clientY;
       deltaY = 0;
       eventTargetScroller = getParentScroller(event.target);
-    };
-    var touchMove = event => {
+    }
+    function touchMove(event) {
       if (!isTouchable.value || !eventTargetScroller) {
         return;
       }
@@ -123,9 +138,12 @@ var __sfc__ = defineComponent({
       var moveDistance = (event.touches[0].clientY - startPosition.value) / 2 + controlPosition.value;
       distance.value = moveDistance >= maxDistance.value ? maxDistance.value : moveDistance;
       startIconTransition(distance.value >= maxDistance.value * 0.2 ? 'refresh' : 'arrow-down');
-    };
-    var touchEnd = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator(function* () {
+    }
+    function touchEnd() {
+      return _touchEnd.apply(this, arguments);
+    }
+    function _touchEnd() {
+      _touchEnd = _asyncToGenerator(function* () {
         if (!isTouchable.value) {
           return;
         }
@@ -150,46 +168,31 @@ var __sfc__ = defineComponent({
         }
         eventTargetScroller = null;
       });
-      return function touchEnd() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    var setScroller = () => {
+      return _touchEnd.apply(this, arguments);
+    }
+    function setScroller() {
       scroller = props.target ? getTarget(props.target, 'PullRefresh') : getParentScroller(freshNode.value);
-    };
-    var reset = () => {
+    }
+    function reset() {
       setTimeout(() => {
         refreshStatus.value = 'default';
         iconName.value = 'arrow-down';
         isEnd.value = false;
       }, toNumber(props.animationDuration));
-    };
-    watch(() => props.modelValue, newValue => {
-      if (newValue === false) {
-        isEnd.value = true;
-        refreshStatus.value = 'success';
-        iconName.value = 'checkbox-marked-circle';
-        setTimeout(() => {
-          distance.value = controlPosition.value;
-          reset();
-        }, toNumber(props.successDuration));
-      }
-    });
-    onSmartMounted(setScroller);
-    useEventListener(freshNode, 'touchmove', touchMove);
+    }
     return {
-      n,
-      classes,
       ICON_TRANSITION,
       refreshStatus,
       freshNode,
       controlNode,
-      touchStart,
-      touchMove,
-      touchEnd,
       iconName,
       controlStyle,
-      isSuccess
+      isSuccess,
+      n,
+      classes,
+      touchStart,
+      touchMove,
+      touchEnd
     };
   }
 });