@varlet/ui 2.16.1 → 2.16.3-alpha.1694267513697

package/es/date-picker/DatePicker.mjs

@@ -11,6 +11,7 @@ import { createNamespace, call, formatElevation } from '../utils/components.mjs'
 import { padStart } from '../utils/shared.mjs';
 import { pack } from '../locale/index.mjs';
 var {
+  name,
   n,
   classes
 } = createNamespace('date-picker');
@@ -110,7 +111,7 @@ function __render__(_ctx, _cache) {
 }
 
 var __sfc__ = defineComponent({
-  name: 'VarDatePicker',
+  name,
   components: {
     MonthPickerPanel,
     YearPickerPanel,
@@ -118,10 +119,6 @@ var __sfc__ = defineComponent({
   },
   props,
   setup(props) {
-    var startX = 0;
-    var startY = 0;
-    var checkType = '';
-    var touchDirection;
     var currentDate = dayjs().format('YYYY-MM-D');
     var [currentYear, currentMonth] = currentDate.split('-');
     var monthDes = MONTH_LIST.find(month => month.index === currentMonth);
@@ -224,13 +221,33 @@ var __sfc__ = defineComponent({
       var _chooseMonth$value3;
       return ((_chooseMonth$value3 = chooseMonth.value) == null ? void 0 : _chooseMonth$value3.index) === previewMonth.value.index;
     });
-    var clickEl = type => {
+    var startX = 0;
+    var startY = 0;
+    var checkType = '';
+    var touchDirection;
+    watch(() => props.modelValue, value => {
+      if (!checkValue() || invalidFormatDate(value) || !value) return;
+      if (props.range) {
+        if (!isArray(value)) return;
+        rangeDone.value = value.length !== 1;
+        rangeInit(value, props.type);
+      } else if (props.multiple) {
+        if (!isArray(value)) return;
+        multipleInit(value, props.type);
+      } else {
+        dateInit(value);
+      }
+    }, {
+      immediate: true
+    });
+    watch(getPanelType, resetState);
+    function clickEl(type) {
       if (type === 'year') isYearPanel.value = true;else if (type === 'month') isMonthPanel.value = true;else {
         isYearPanel.value = false;
         isMonthPanel.value = false;
       }
-    };
-    var handleTouchstart = event => {
+    }
+    function handleTouchstart(event) {
       if (isUntouchable.value) return;
       var {
         clientX,
@@ -238,9 +255,11 @@ var __sfc__ = defineComponent({
       } = event.touches[0];
       startX = clientX;
       startY = clientY;
-    };
-    var getDirection = (x, y) => x >= y && x > 20 ? 'x' : 'y';
-    var handleTouchmove = event => {
+    }
+    function getDirection(x, y) {
+      return x >= y && x > 20 ? 'x' : 'y';
+    }
+    function handleTouchmove(event) {
       if (isUntouchable.value) return;
       var {
         clientX,
@@ -250,20 +269,21 @@ var __sfc__ = defineComponent({
       var y = clientY - startY;
       touchDirection = getDirection(Math.abs(x), Math.abs(y));
       checkType = x > 0 ? 'prev' : 'next';
-    };
-    var handleTouchend = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator(function* () {
+    }
+    function handleTouchend() {
+      return _handleTouchend.apply(this, arguments);
+    }
+    function _handleTouchend() {
+      _handleTouchend = _asyncToGenerator(function* () {
         if (isUntouchable.value || touchDirection !== 'x') return;
         var componentRef = getPanelType.value === 'month' ? monthPanelEl : dayPanelEl;
         yield doubleRaf();
         componentRef.value.forwardRef(checkType);
         resetState();
       });
-      return function handleTouchend() {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    var updateRange = (date, type) => {
+      return _handleTouchend.apply(this, arguments);
+    }
+    function updateRange(date, type) {
       var rangeDate = type === 'month' ? chooseRangeMonth : chooseRangeDay;
       rangeDate.value = rangeDone.value ? [date, date] : [rangeDate.value[0], date];
       rangeDone.value = !rangeDone.value;
@@ -273,8 +293,8 @@ var __sfc__ = defineComponent({
         call(props['onUpdate:modelValue'], _date);
         call(props.onChange, _date);
       }
-    };
-    var updateMultiple = (date, type) => {
+    }
+    function updateMultiple(date, type) {
       var multipleDates = type === 'month' ? chooseMonths : chooseDays;
       var formatType = type === 'month' ? 'YYYY-MM' : 'YYYY-MM-DD';
       var formatDates = multipleDates.value.map(date => dayjs(date).format(formatType));
@@ -282,14 +302,14 @@ var __sfc__ = defineComponent({
       if (index === -1) formatDates.push(date);else formatDates.splice(index, 1);
       call(props['onUpdate:modelValue'], formatDates);
       call(props.onChange, formatDates);
-    };
-    var getReverse = (dateType, date) => {
+    }
+    function getReverse(dateType, date) {
       if (!chooseYear.value || !chooseMonth.value) return false;
       if (!isSameYear.value) return chooseYear.value > previewYear.value;
       if (dateType === 'month') return date.index < chooseMonth.value.index;
       return isSameMonth.value ? date < toNumber(chooseDay.value) : chooseMonth.value.index > previewMonth.value.index;
-    };
-    var getChooseDay = day => {
+    }
+    function getChooseDay(day) {
       var {
         readonly,
         range,
@@ -305,8 +325,8 @@ var __sfc__ = defineComponent({
         call(updateModelValue, formatDate);
         call(onChange, formatDate);
       }
-    };
-    var getChooseMonth = month => {
+    }
+    function getChooseMonth(month) {
       var {
         type,
         readonly,
@@ -328,14 +348,14 @@ var __sfc__ = defineComponent({
         call(onPreview, toNumber(previewYear.value), toNumber(previewMonth.value.index));
       }
       isMonthPanel.value = false;
-    };
-    var getChooseYear = year => {
+    }
+    function getChooseYear(year) {
       previewYear.value = "" + year;
       isYearPanel.value = false;
       isMonthPanel.value = true;
       call(props.onPreview, toNumber(previewYear.value), toNumber(previewMonth.value.index));
-    };
-    var checkPreview = (type, checkType) => {
+    }
+    function checkPreview(type, checkType) {
       var changeValue = checkType === 'prev' ? -1 : 1;
       if (type === 'year') {
         previewYear.value = "" + (toNumber(previewYear.value) + changeValue);
@@ -352,8 +372,8 @@ var __sfc__ = defineComponent({
         previewMonth.value = MONTH_LIST.find(month => toNumber(month.index) === checkIndex);
       }
       call(props.onPreview, toNumber(previewYear.value), toNumber(previewMonth.value.index));
-    };
-    var checkValue = () => {
+    }
+    function checkValue() {
       if ((props.multiple || props.range) && !isArray(props.modelValue)) {
         console.error('[Varlet] DatePicker: type of prop "modelValue" should be an Array');
         return false;
@@ -363,16 +383,16 @@ var __sfc__ = defineComponent({
         return false;
       }
       return true;
-    };
-    var invalidFormatDate = date => {
+    }
+    function invalidFormatDate(date) {
       if (isArray(date)) return false;
       if (date === 'Invalid Date') {
         console.error('[Varlet] DatePicker: "modelValue" is an Invalid Date');
         return true;
       }
       return false;
-    };
-    var rangeInit = (value, type) => {
+    }
+    function rangeInit(value, type) {
       var rangeDate = type === 'month' ? chooseRangeMonth : chooseRangeDay;
       var formatType = type === 'month' ? 'YYYY-MM' : 'YYYY-MM-D';
       var formatDateList = value.map(choose => dayjs(choose).format(formatType)).slice(0, 2);
@@ -383,16 +403,16 @@ var __sfc__ = defineComponent({
       if (rangeDate.value.length === 2 && isChangeOrder) {
         rangeDate.value = [rangeDate.value[1], rangeDate.value[0]];
       }
-    };
-    var multipleInit = (value, type) => {
+    }
+    function multipleInit(value, type) {
       var rangeDate = type === 'month' ? chooseMonths : chooseDays;
       var formatType = type === 'month' ? 'YYYY-MM' : 'YYYY-MM-D';
 
-      // 需要去重
+      // need uniq
       var formatDateList = Array.from(new Set(value.map(choose => dayjs(choose).format(formatType))));
       rangeDate.value = formatDateList.filter(date => date !== 'Invalid Date');
-    };
-    var dateInit = value => {
+    }
+    function dateInit(value) {
       var formatDate = dayjs(value).format('YYYY-MM-D');
       if (invalidFormatDate(formatDate)) return;
       var [yearValue, monthValue, dayValue] = formatDate.split('-');
@@ -402,32 +422,14 @@ var __sfc__ = defineComponent({
       chooseDay.value = dayValue;
       previewMonth.value = monthDes;
       previewYear.value = yearValue;
-    };
-    var resetState = () => {
+    }
+    function resetState() {
       startY = 0;
       startX = 0;
       checkType = '';
       touchDirection = undefined;
-    };
-    watch(() => props.modelValue, value => {
-      if (!checkValue() || invalidFormatDate(value) || !value) return;
-      if (props.range) {
-        if (!isArray(value)) return;
-        rangeDone.value = value.length !== 1;
-        rangeInit(value, props.type);
-      } else if (props.multiple) {
-        if (!isArray(value)) return;
-        multipleInit(value, props.type);
-      } else {
-        dateInit(value);
-      }
-    }, {
-      immediate: true
-    });
-    watch(getPanelType, resetState);
+    }
     return {
-      n,
-      classes,
       monthPanelEl,
       dayPanelEl,
       reverse,
@@ -446,6 +448,8 @@ var __sfc__ = defineComponent({
       componentProps,
       slotProps,
       formatRange,
+      n,
+      classes,
       clickEl,
       handleTouchstart,
       handleTouchmove,

package/es/dialog/Dialog.mjs

@@ -3,11 +3,11 @@ import VarPopup from '../popup/index.mjs';
 import VarButton from '../button/index.mjs';
 import { props } from './props.mjs';
 import { defineComponent, ref, watch } from 'vue';
-import { dt } from '../utils/shared.mjs';
 import { pack } from '../locale/index.mjs';
 import { call, createNamespace } from '../utils/components.mjs';
 import { toSizeUnit } from '../utils/elements.mjs';
 var {
+  name,
   n,
   classes
 } = createNamespace('dialog');
@@ -39,7 +39,10 @@ function __render__(_ctx, _cache) {
       }, _ctx.dialogStyle)
     }, _ctx.$attrs), [_createElementVNode("div", {
       class: _normalizeClass(_ctx.n('title'))
-    }, [_renderSlot(_ctx.$slots, "title", {}, () => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.dialogTitle)), 1 /* TEXT */)])], 2 /* CLASS */), _createElementVNode("div", {
+    }, [_renderSlot(_ctx.$slots, "title", {}, () => {
+      var _ctx$title;
+      return [_createTextVNode(_toDisplayString((_ctx$title = _ctx.title) != null ? _ctx$title : _ctx.pack.dialogTitle), 1 /* TEXT */)];
+    })], 2 /* CLASS */), _createElementVNode("div", {
       class: _normalizeClass(_ctx.n('message')),
       style: _normalizeStyle({
         textAlign: _ctx.messageAlign
@@ -55,7 +58,10 @@ function __render__(_ctx, _cache) {
       color: _ctx.cancelButtonColor,
       onClick: _ctx.cancel
     }, {
-      default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.cancelButtonText, _ctx.pack.dialogCancelButtonText)), 1 /* TEXT */)]),
+      default: _withCtx(() => {
+        var _ctx$cancelButtonText;
+        return [_createTextVNode(_toDisplayString((_ctx$cancelButtonText = _ctx.cancelButtonText) != null ? _ctx$cancelButtonText : _ctx.pack.dialogCancelButtonText), 1 /* TEXT */)];
+      }),
 
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["class", "text-color", "color", "onClick"])) : _createCommentVNode("v-if", true), _ctx.confirmButton ? (_openBlock(), _createBlock(_component_var_button, {
@@ -67,7 +73,10 @@ function __render__(_ctx, _cache) {
       color: _ctx.confirmButtonColor,
       onClick: _ctx.confirm
     }, {
-      default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.confirmButtonText, _ctx.pack.dialogConfirmButtonText)), 1 /* TEXT */)]),
+      default: _withCtx(() => {
+        var _ctx$confirmButtonTex;
+        return [_createTextVNode(_toDisplayString((_ctx$confirmButtonTex = _ctx.confirmButtonText) != null ? _ctx$confirmButtonTex : _ctx.pack.dialogConfirmButtonText), 1 /* TEXT */)];
+      }),
 
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["class", "text-color", "color", "onClick"])) : _createCommentVNode("v-if", true)], 2 /* CLASS */)], 16 /* FULL_PROPS */)]),
@@ -76,7 +85,7 @@ function __render__(_ctx, _cache) {
   }, 8 /* PROPS */, ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onClickOverlay"]);
 }
 var __sfc__ = defineComponent({
-  name: 'VarDialog',
+  name,
   components: {
     VarPopup,
     VarButton
@@ -86,8 +95,24 @@ var __sfc__ = defineComponent({
   setup(props) {
     var popupShow = ref(false);
     var popupCloseOnClickOverlay = ref(false);
-    var done = () => call(props['onUpdate:show'], false);
-    var handleClickOverlay = () => {
+    watch(() => props.show, newValue => {
+      popupShow.value = newValue;
+    }, {
+      immediate: true
+    });
+    watch(() => props.closeOnClickOverlay, newValue => {
+      if (props.onBeforeClose != null) {
+        popupCloseOnClickOverlay.value = false;
+        return;
+      }
+      popupCloseOnClickOverlay.value = newValue;
+    }, {
+      immediate: true
+    });
+    function done() {
+      return call(props['onUpdate:show'], false);
+    }
+    function handleClickOverlay() {
       var {
         closeOnClickOverlay,
         onClickOverlay,
@@ -102,8 +127,8 @@ var __sfc__ = defineComponent({
         return;
       }
       call(props['onUpdate:show'], false);
-    };
-    var confirm = () => {
+    }
+    function confirm() {
       var {
         onBeforeClose,
         onConfirm
@@ -114,8 +139,8 @@ var __sfc__ = defineComponent({
         return;
       }
       call(props['onUpdate:show'], false);
-    };
-    var cancel = () => {
+    }
+    function cancel() {
       var {
         onBeforeClose,
         onCancel
@@ -126,28 +151,13 @@ var __sfc__ = defineComponent({
         return;
       }
       call(props['onUpdate:show'], false);
-    };
-    watch(() => props.show, newValue => {
-      popupShow.value = newValue;
-    }, {
-      immediate: true
-    });
-    watch(() => props.closeOnClickOverlay, newValue => {
-      if (props.onBeforeClose != null) {
-        popupCloseOnClickOverlay.value = false;
-        return;
-      }
-      popupCloseOnClickOverlay.value = newValue;
-    }, {
-      immediate: true
-    });
+    }
     return {
-      n,
-      classes,
       pack,
-      dt,
       popupShow,
       popupCloseOnClickOverlay,
+      n,
+      classes,
       handleClickOverlay,
       confirm,
       cancel,

package/es/divider/Divider.mjs

@@ -5,6 +5,7 @@ import { props } from './props.mjs';
 import { createNamespace } from '../utils/components.mjs';
 import { onSmartMounted } from '@varlet/use';
 var {
+  name,
   n,
   classes
 } = createNamespace('divider');
@@ -22,7 +23,7 @@ function __render__(_ctx, _cache) {
 }
 
 var __sfc__ = defineComponent({
-  name: 'VarDivider',
+  name,
   props,
   setup(props, _ref) {
     var {
@@ -56,20 +57,16 @@ var __sfc__ = defineComponent({
         left: _inset > 0 ? toSizeUnit(absInsetWithUnit) : toSizeUnit(0)
       };
     });
-    var checkHasText = () => {
+    onSmartMounted(checkHasText);
+    onUpdated(checkHasText);
+    function checkHasText() {
       // the default slot or description is only effective in horizontal mode
       var {
         description,
         vertical
       } = props;
       withText.value = (slots.default || description != null) && !vertical;
-    };
-    onSmartMounted(() => {
-      checkHasText();
-    });
-    onUpdated(() => {
-      checkHasText();
-    });
+    }
     return {
       n,
       classes,

package/es/drag/Drag.mjs

@@ -8,6 +8,7 @@ import { toPxNum } from '../utils/elements.mjs';
 import { onSmartMounted, onWindowResize, useTouch } from '@varlet/use';
 import { clamp, getRect } from '@varlet/shared';
 var {
+  name,
   n,
   classes
 } = createNamespace('drag');
@@ -40,7 +41,7 @@ function __render__(_ctx, _cache) {
   }, _ctx.getAttrs()), [_renderSlot(_ctx.$slots, "default")], 16 /* FULL_PROPS */)], 8 /* PROPS */, ["to", "disabled"]);
 }
 var __sfc__ = defineComponent({
-  name: 'VarDrag',
+  name,
   inheritAttrs: false,
   props,
   setup(props, _ref) {
@@ -50,12 +51,6 @@ var __sfc__ = defineComponent({
     var drag = ref(null);
     var x = ref(0);
     var y = ref(0);
-    var boundary = reactive({
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0
-    });
     var dragged = ref(false);
     var enableTransition = ref(false);
     var {
@@ -71,15 +66,30 @@ var __sfc__ = defineComponent({
     var {
       disabled: teleportDisabled
     } = useTeleport();
-    var handleTouchstart = event => {
+    var boundary = reactive({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    });
+    watch(() => props.boundary, toPxBoundary);
+    onWindowResize(resize);
+    onSmartMounted(() => {
+      toPxBoundary();
+      resize();
+    });
+    function handleTouchstart(event) {
       if (props.disabled) {
         return;
       }
       startTouch(event);
       saveXY();
-    };
-    var handleTouchmove = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator(function* (event) {
+    }
+    function handleTouchmove(_x) {
+      return _handleTouchmove.apply(this, arguments);
+    }
+    function _handleTouchmove() {
+      _handleTouchmove = _asyncToGenerator(function* (event) {
         if (!touching.value || props.disabled) {
           return;
         }
@@ -95,33 +105,31 @@ var __sfc__ = defineComponent({
         }
         clampToBoundary();
       });
-      return function handleTouchmove(_x) {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    var handleTouchend = () => {
+      return _handleTouchmove.apply(this, arguments);
+    }
+    function handleTouchend() {
       if (props.disabled) {
         return;
       }
       endTouch();
       enableTransition.value = true;
       attract();
-    };
-    var handleClick = event => {
+    }
+    function handleClick(event) {
       if (dragging.value) {
         return;
       }
       call(props.onClick, event);
-    };
-    var saveXY = () => {
+    }
+    function saveXY() {
       var {
         left,
         top
       } = getOffset();
       x.value = left;
       y.value = top;
-    };
-    var getOffset = () => {
+    }
+    function getOffset() {
       var dragRect = getRect(drag.value);
       var windowRect = getRect(window);
       var top = dragRect.top - windowRect.top;
@@ -148,8 +156,8 @@ var __sfc__ = defineComponent({
         windowWidth,
         windowHeight
       };
-    };
-    var getRange = () => {
+    }
+    function getRange() {
       var offset = getOffset();
       var x1 = boundary.left;
       var x2 = offset.windowWidth - boundary.right - offset.width;
@@ -162,8 +170,8 @@ var __sfc__ = defineComponent({
         maxX: x1 < x2 ? x2 : x1,
         maxY: y1 < y2 ? y2 : y1
       };
-    };
-    var attract = () => {
+    }
+    function attract() {
       if (props.attraction == null) {
         return;
       }
@@ -193,8 +201,8 @@ var __sfc__ = defineComponent({
       if (props.attraction.includes('y')) {
         y.value = nearTop ? minY : maxY;
       }
-    };
-    var clampToBoundary = () => {
+    }
+    function clampToBoundary() {
       var {
         minX,
         minY,
@@ -203,8 +211,8 @@ var __sfc__ = defineComponent({
       } = getRange();
       x.value = clamp(x.value, minX, maxX);
       y.value = clamp(y.value, minY, maxY);
-    };
-    var toPxBoundary = () => {
+    }
+    function toPxBoundary() {
       var {
         top = 0,
         bottom = 0,
@@ -215,10 +223,10 @@ var __sfc__ = defineComponent({
       boundary.bottom = toPxNum(bottom);
       boundary.left = toPxNum(left);
       boundary.right = toPxNum(right);
-    };
-    var getAttrs = () => {
-      var _ref3;
-      var style = (_ref3 = attrs.style) != null ? _ref3 : {};
+    }
+    function getAttrs() {
+      var _ref2;
+      var style = (_ref2 = attrs.style) != null ? _ref2 : {};
       return _extends({}, attrs, {
         style: _extends({}, style, {
           // when the drag element is dragged for the first time, the inset should be cleared to avoid affecting translateX and translateY.
@@ -229,31 +237,25 @@ var __sfc__ = defineComponent({
           transform: dragged.value ? "translate(" + x.value + "px, " + y.value + "px)" : style.transform
         })
       });
-    };
+    }
 
     // expose
-    var resize = () => {
+    function resize() {
       if (!dragged.value) {
         return;
       }
       saveXY();
       clampToBoundary();
-    };
+    }
 
     // expose
-    var reset = () => {
+    function reset() {
       resetTouch();
       enableTransition.value = false;
       dragged.value = false;
       x.value = 0;
       y.value = 0;
-    };
-    watch(() => props.boundary, toPxBoundary);
-    onWindowResize(resize);
-    onSmartMounted(() => {
-      toPxBoundary();
-      resize();
-    });
+    }
     return {
       drag,
       x,

package/es/ellipsis/Ellipsis.mjs

@@ -4,6 +4,7 @@ import { computed, defineComponent, ref } from 'vue';
 import { createNamespace } from '../utils/components.mjs';
 import { props } from './props.mjs';
 var {
+  name,
   n,
   classes
 } = createNamespace('ellipsis');
@@ -34,7 +35,7 @@ function __render__(_ctx, _cache) {
 }
 
 var __sfc__ = defineComponent({
-  name: 'VarEllipsis',
+  name,
   components: {
     VarTooltip
   },
@@ -64,18 +65,18 @@ var __sfc__ = defineComponent({
         sameWidth: true
       }, props.tooltip);
     });
-    var handleClick = () => {
+    function handleClick() {
       if (!props.expandTrigger) {
         return;
       }
       expanding.value = !expanding.value;
-    };
+    }
     return {
-      n,
-      classes,
       tooltip,
       expanding,
       rootStyles,
+      n,
+      classes,
       handleClick
     };
   }