@varlet/ui 2.8.5 → 2.8.6-alpha.1678026101378

package/es/app-bar/AppBar.mjs

@@ -1,6 +1,7 @@
-import { defineComponent, ref, onMounted, onUpdated, computed } from 'vue';
+import { defineComponent, ref, onUpdated, computed } from 'vue';
 import { props } from './props.mjs';
 import { createNamespace } from '../utils/components.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -93,7 +94,7 @@ var __sfc__ = defineComponent({
         color: textColor
       };
     });
-    onMounted(computePadding);
+    useMounted(computePadding);
     onUpdated(computePadding);
     return {
       n,

package/es/avatar/Avatar.mjs

@@ -1,8 +1,9 @@
 import Lazy from '../lazy/index.mjs';
-import { defineComponent, ref, onMounted, onUpdated } from 'vue';
+import { defineComponent, ref, onUpdated } from 'vue';
 import { props, internalSizeValidator, sizeValidator } from './props.mjs';
 import { toSizeUnit } from '../utils/elements.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -128,7 +129,7 @@ var __sfc__ = defineComponent({
       call(props.onClick, e);
     };
 
-    onMounted(getScale);
+    useMounted(getScale);
     onUpdated(getScale);
     return {
       internalSizeValidator,

package/es/back-top/BackTop.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
 import VarButton from '../button/index.mjs';
 import VarIcon from '../icon/index.mjs';
+import { defineComponent, ref, onBeforeUnmount, onDeactivated, onMounted, onActivated } from 'vue';
 import { props } from './props.mjs';
 import { throttle } from '@varlet/shared';
 import { easeInOutCubic } from '../utils/shared.mjs';
@@ -29,7 +29,7 @@ function __render__(_ctx, _cache) {
     }
   }, _ctx.$attrs, {
     onClick: _cache[0] || (_cache[0] = _withModifiers(function () {
-      return _ctx.click && _ctx.click(...arguments);
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
     }, ["stop"]))
   }), [_renderSlot(_ctx.$slots, "default", {}, () => [_createVNode(_component_var_button, {
     type: "primary",
@@ -62,31 +62,42 @@ var __sfc__ = defineComponent({
     var show = ref(false);
     var backTopEl = ref(null);
     var disabled = ref(true);
-    var target;
+    var scroller;
 
-    var click = event => {
+    var handleClick = event => {
       call(props.onClick, event);
-      var left = getScrollLeft(target);
-      scrollTo(target, {
+      var left = getScrollLeft(scroller);
+      scrollTo(scroller, {
         left,
         duration: props.duration,
         animation: easeInOutCubic
       });
     };
 
-    var scroll = () => {
-      show.value = getScrollTop(target) >= toPxNum(props.visibilityHeight);
+    var handleScroll = throttle(() => {
+      show.value = getScrollTop(scroller) >= toPxNum(props.visibilityHeight);
+    }, 200);
+
+    var setScroller = () => {
+      scroller = props.target ? getTarget(props.target, 'BackTop') : getParentScroller(backTopEl.value);
+    };
+
+    var addScrollerEventListener = () => {
+      scroller.addEventListener('scroll', handleScroll);
+    };
+
+    var removeScrollerEventListener = () => {
+      scroller.removeEventListener('scroll', handleScroll);
     };
 
-    var throttleScroll = throttle(scroll, 200);
     onMounted(() => {
-      target = props.target ? getTarget(props.target, 'BackTop') : getParentScroller(backTopEl.value);
-      target.addEventListener('scroll', throttleScroll);
+      setScroller();
+      addScrollerEventListener();
       disabled.value = false;
     });
-    onBeforeUnmount(() => {
-      target.removeEventListener('scroll', throttleScroll);
-    });
+    onActivated(addScrollerEventListener);
+    onBeforeUnmount(removeScrollerEventListener);
+    onDeactivated(removeScrollerEventListener);
     return {
       disabled,
       show,
@@ -94,7 +105,7 @@ var __sfc__ = defineComponent({
       toSizeUnit,
       n,
       classes,
-      click
+      handleClick
     };
   }
 

package/es/bottom-navigation/BottomNavigation.mjs

@@ -1,11 +1,12 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import VarButton from '../button/index.mjs';
-import { defineComponent, ref, computed, onMounted, onUpdated, watch } from 'vue';
+import { defineComponent, ref, computed, onUpdated, watch } from 'vue';
 import { props } from './props.mjs';
 import { useBottomNavigationItems } from './provide.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
 import { isNumber, isArray } from '@varlet/shared';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -186,7 +187,7 @@ var __sfc__ = defineComponent({
       immediate: true,
       deep: true
     });
-    onMounted(() => {
+    useMounted(() => {
       if (!slots.fab) {
         return;
       }

package/es/countdown/Countdown.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent, onActivated, onDeactivated, onUnmounted, ref, watch } from 'vue';
 import { props } from './props.mjs';
 import { requestAnimationFrame, cancelAnimationFrame } from '../utils/elements.mjs';
 import { call, createNamespace } from '../utils/components.mjs';
@@ -93,9 +93,17 @@ var __sfc__ = defineComponent({
         autoStart
       } = props;
       var now = performance.now();
-      if (!endTime.value) endTime.value = now + toNumber(time);
+
+      if (!endTime.value) {
+        endTime.value = now + toNumber(time);
+      }
+
       var durationTime = endTime.value - now;
-      if (durationTime < 0) durationTime = 0;
+
+      if (durationTime < 0) {
+        durationTime = 0;
+      }
+
       pauseTime.value = durationTime;
       formatTime(durationTime);
 
@@ -104,20 +112,26 @@ var __sfc__ = defineComponent({
         return;
       }
 
-      if (autoStart || isStart.value) handle.value = requestAnimationFrame(countdown);
+      if (autoStart || isStart.value) {
+        handle.value = requestAnimationFrame(countdown);
+      }
     }; // expose
 
 
     var start = () => {
-      if (isStart.value) return;
+      if (isStart.value) {
+        return;
+      }
+
       isStart.value = true;
-      endTime.value = Date.now() + (pauseTime.value || toNumber(props.time));
+      endTime.value = performance.now() + (pauseTime.value || toNumber(props.time));
       countdown();
     }; // expose
 
 
     var pause = () => {
       isStart.value = false;
+      cancelAnimationFrame(handle.value);
     }; // expose
 
 
@@ -128,9 +142,12 @@ var __sfc__ = defineComponent({
       countdown();
     };
 
-    watch(() => props.time, () => reset(), {
+    watch(() => props.time, reset, {
       immediate: true
     });
+    onActivated(start);
+    onDeactivated(pause);
+    onUnmounted(pause);
     return {
       showTime,
       timeData,

package/es/date-picker/src/day-picker-panel.mjs

@@ -5,11 +5,12 @@ import isSameOrBefore from 'dayjs/esm/plugin/isSameOrBefore';
 import isSameOrAfter from 'dayjs/esm/plugin/isSameOrAfter';
 import PanelHeader from './panel-header.mjs';
 import VarButton from '../../button/index.mjs';
-import { defineComponent, ref, computed, watch, onMounted, reactive } from 'vue';
+import { defineComponent, ref, computed, watch, reactive } from 'vue';
 import { WEEK_HEADER } from '../props.mjs';
 import { toNumber } from '@varlet/shared';
 import { createNamespace } from '../../utils/components.mjs';
 import { pack } from '../../locale/index.mjs';
+import { useMounted } from '@varlet/use';
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 var {
@@ -327,7 +328,7 @@ var __sfc__ = defineComponent({
       headerEl.value.checkDate(checkType);
     };
 
-    onMounted(() => {
+    useMounted(() => {
       initDate();
       initHeader();
     });

package/es/date-picker/src/year-picker-panel.mjs

@@ -1,7 +1,8 @@
-import { defineComponent, computed, onMounted } from 'vue';
 import dayjs from 'dayjs/esm';
+import { defineComponent, computed } from 'vue';
 import { toNumber } from '@varlet/shared';
 import { createNamespace } from '../../utils/components.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -89,7 +90,7 @@ var __sfc__ = defineComponent({
       emit('choose-year', year);
     };
 
-    onMounted(() => {
+    useMounted(() => {
       var activeEl = document.querySelector("." + n('item--active'));
       activeEl == null ? void 0 : activeEl.scrollIntoView({
         block: 'center'

package/es/divider/Divider.mjs

@@ -1,10 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import { defineComponent, computed, reactive, onMounted, onUpdated, toRefs } from 'vue';
+import { defineComponent, computed, reactive, onUpdated, toRefs } from 'vue';
 import { toSizeUnit } from '../utils/elements.mjs';
 import { isBoolean, toNumber } from '@varlet/shared';
 import { props } from './props.mjs';
 import { createNamespace } from '../utils/components.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -36,7 +37,9 @@ var __sfc__ = defineComponent({
     var state = reactive({
       withText: false
     });
-    var isInset = computed(() => isBoolean(props.inset) ? props.inset : true);
+    var isInset = computed(() => {
+      return isBoolean(props.inset) ? props.inset : true;
+    });
     var style = computed(() => {
       var {
         inset,
@@ -46,10 +49,12 @@ var __sfc__ = defineComponent({
       var baseStyle = {
         margin
       };
-      if (isBoolean(inset) || inset === 0) return _extends({}, baseStyle); // -18px -> -18
 
-      var _inset = toNumber(inset); // -18px -> 18px
+      if (isBoolean(inset) || inset === 0) {
+        return _extends({}, baseStyle);
+      }
 
+      var _inset = toNumber(inset);
 
       var absInsetWithUnit = Math.abs(_inset) + (inset + '').replace(_inset + '', '');
       return vertical ? _extends({}, baseStyle, {
@@ -64,7 +69,7 @@ var __sfc__ = defineComponent({
       state.withText = Boolean(slots.default) || Boolean(props.description);
     };
 
-    onMounted(() => {
+    useMounted(() => {
       checkHasText();
     });
     onUpdated(() => {

package/es/index-bar/IndexBar.mjs

@@ -2,13 +2,14 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-import { computed, defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { computed, defineComponent, ref, watch, onBeforeUnmount, onDeactivated } from 'vue';
 import { isPlainObject, toNumber } from '@varlet/shared';
 import { easeInOutCubic } from '../utils/shared.mjs';
 import { doubleRaf, getParentScroller, getScrollLeft, getScrollTop, nextTickFrame, requestAnimationFrame, scrollTo as varScrollTo, toPxNum } from '../utils/elements.mjs';
 import { useIndexAnchors } from './provide.mjs';
 import { props } from './props.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -63,7 +64,6 @@ var __sfc__ = defineComponent({
       bindIndexAnchors
     } = useIndexAnchors();
     var clickedName = ref('');
-    var scroller = ref(null);
     var barEl = ref(null);
     var anchorNameList = ref([]);
     var active = ref();
@@ -71,6 +71,7 @@ var __sfc__ = defineComponent({
     var cssMode = computed(() => props.cssMode);
     var stickyOffsetTop = computed(() => toPxNum(props.stickyOffsetTop));
     var zIndex = computed(() => props.zIndex);
+    var scroller = null;
     var indexBarProvider = {
       active,
       sticky,
@@ -91,13 +92,16 @@ var __sfc__ = defineComponent({
     };
 
     var getOffsetTop = () => {
-      if (!('getBoundingClientRect' in scroller.value)) return 0;
+      if (!('getBoundingClientRect' in scroller)) {
+        return 0;
+      }
+
       var {
         top: parentTop
-      } = scroller.value.getBoundingClientRect();
+      } = scroller.getBoundingClientRect();
       var {
         scrollTop
-      } = scroller.value;
+      } = scroller;
       var {
         top: targetTop
       } = barEl.value.getBoundingClientRect();
@@ -105,8 +109,8 @@ var __sfc__ = defineComponent({
     };
 
     var handleScroll = () => {
-      var scrollTop = getScrollTop(scroller.value);
-      var scrollHeight = scroller.value === window ? document.body.scrollHeight : scroller.value.scrollHeight;
+      var scrollTop = getScrollTop(scroller);
+      var scrollHeight = scroller === window ? document.body.scrollHeight : scroller.scrollHeight;
       var offsetTop = getOffsetTop();
       indexAnchors.forEach((anchor, index) => {
         var anchorTop = anchor.ownTop.value;
@@ -131,21 +135,32 @@ var __sfc__ = defineComponent({
           manualCall = false,
           options
         } = _ref;
-        if (manualCall) call(props.onClick, anchorName);
-        if (anchorName === active.value) return;
+
+        if (manualCall) {
+          call(props.onClick, anchorName);
+        }
+
+        if (anchorName === active.value) {
+          return;
+        }
+
         var indexAnchor = indexAnchors.find(_ref3 => {
           var {
             name
           } = _ref3;
           return anchorName === name.value;
         });
-        if (!indexAnchor) return;
+
+        if (!indexAnchor) {
+          return;
+        }
+
         var offsetTop = getOffsetTop();
         var top = indexAnchor.ownTop.value - stickyOffsetTop.value + offsetTop;
-        var left = getScrollLeft(scroller.value);
+        var left = getScrollLeft(scroller);
         clickedName.value = anchorName;
         emitEvent(anchorName, options);
-        yield varScrollTo(scroller.value, {
+        yield varScrollTo(scroller, {
           left,
           top,
           animation: easeInOutCubic,
@@ -159,7 +174,26 @@ var __sfc__ = defineComponent({
       return function anchorClick(_x) {
         return _ref2.apply(this, arguments);
       };
-    }(); // expose
+    }();
+
+    var setScroller = /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator(function* () {
+        yield doubleRaf();
+        scroller = getParentScroller(barEl.value);
+      });
+
+      return function setScroller() {
+        return _ref4.apply(this, arguments);
+      };
+    }();
+
+    var addScrollerListener = () => {
+      scroller.addEventListener('scroll', handleScroll);
+    };
+
+    var removeScrollerListener = () => {
+      scroller.removeEventListener('scroll', handleScroll);
+    }; // expose
 
 
     var scrollTo = (index, options) => {
@@ -171,23 +205,21 @@ var __sfc__ = defineComponent({
 
     watch(() => length.value, /*#__PURE__*/_asyncToGenerator(function* () {
       yield doubleRaf();
-      indexAnchors.forEach(_ref5 => {
+      indexAnchors.forEach(_ref6 => {
         var {
           name,
           setOwnTop
-        } = _ref5;
+        } = _ref6;
         if (name.value) anchorNameList.value.push(name.value);
         setOwnTop();
       });
     }));
-    onMounted( /*#__PURE__*/_asyncToGenerator(function* () {
-      yield doubleRaf();
-      scroller.value = getParentScroller(barEl.value);
-      scroller.value.addEventListener('scroll', handleScroll);
+    useMounted( /*#__PURE__*/_asyncToGenerator(function* () {
+      yield setScroller();
+      addScrollerListener();
     }));
-    onBeforeUnmount(() => {
-      call(scroller.value.removeEventListener, 'scroll', handleScroll);
-    });
+    onBeforeUnmount(removeScrollerListener);
+    onDeactivated(removeScrollerListener);
     return {
       n,
       classes,

package/es/index.bundle.mjs

@@ -235,7 +235,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.8.5'
+const version = '2.8.6-alpha.1678026101378'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -156,7 +156,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.8.5'
+const version = '2.8.6-alpha.1678026101378'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/input/Input.mjs

@@ -1,10 +1,11 @@
 import VarFormDetails from '../form-details/index.mjs';
 import VarIcon from '../icon/index.mjs';
-import { defineComponent, getCurrentInstance, ref, computed, nextTick, onMounted } from 'vue';
+import { defineComponent, getCurrentInstance, ref, computed, nextTick } from 'vue';
 import { props } from './props.mjs';
 import { isEmpty, toNumber } from '@varlet/shared';
 import { useValidation, createNamespace, call } from '../utils/components.mjs';
 import { useForm } from '../form/provide.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -24,7 +25,7 @@ function __render__(_ctx, _cache) {
 
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.disabled, _ctx.n('--disabled')])),
-    onClick: _cache[10] || (_cache[10] = function () {
+    onClick: _cache[14] || (_cache[14] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [_createElementVNode("div", {
@@ -73,6 +74,12 @@ function __render__(_ctx, _cache) {
     }),
     onTouchstart: _cache[4] || (_cache[4] = function () {
       return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
+    }),
+    onCompositionstart: _cache[5] || (_cache[5] = function () {
+      return _ctx.handleCompositionStart && _ctx.handleCompositionStart(...arguments);
+    }),
+    onCompositionend: _cache[6] || (_cache[6] = function () {
+      return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...arguments);
     })
   }, "\n        ", 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
@@ -90,20 +97,26 @@ function __render__(_ctx, _cache) {
       color: _ctx.textColor,
       caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined
     }),
-    onFocus: _cache[5] || (_cache[5] = function () {
+    onFocus: _cache[7] || (_cache[7] = function () {
       return _ctx.handleFocus && _ctx.handleFocus(...arguments);
     }),
-    onBlur: _cache[6] || (_cache[6] = function () {
+    onBlur: _cache[8] || (_cache[8] = function () {
       return _ctx.handleBlur && _ctx.handleBlur(...arguments);
     }),
-    onInput: _cache[7] || (_cache[7] = function () {
+    onInput: _cache[9] || (_cache[9] = function () {
       return _ctx.handleInput && _ctx.handleInput(...arguments);
     }),
-    onChange: _cache[8] || (_cache[8] = function () {
+    onChange: _cache[10] || (_cache[10] = function () {
       return _ctx.handleChange && _ctx.handleChange(...arguments);
     }),
-    onTouchstart: _cache[9] || (_cache[9] = function () {
+    onTouchstart: _cache[11] || (_cache[11] = function () {
       return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
+    }),
+    onCompositionstart: _cache[12] || (_cache[12] = function () {
+      return _ctx.handleCompositionStart && _ctx.handleCompositionStart(...arguments);
+    }),
+    onCompositionend: _cache[13] || (_cache[13] = function () {
+      return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...arguments);
     })
   }, null, 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
@@ -241,7 +254,7 @@ var __sfc__ = defineComponent({
       validateWithTrigger('onBlur');
     };
 
-    var handleInput = e => {
+    var updateValue = e => {
       var target = e.target;
       var {
         value
@@ -253,18 +266,41 @@ var __sfc__ = defineComponent({
 
       value = withMaxlength(withTrim(value));
       target.value = value;
+      return value;
+    };
+
+    var handleCompositionStart = e => {
+      Object.assign(e.target, {
+        composing: true
+      });
+    };
+
+    var handleCompositionEnd = e => {
+      var target = e.target;
+
+      if (target.composing) {
+        target.composing = false;
+        target.dispatchEvent(new Event('input'));
+      }
+    };
+
+    var handleInput = e => {
+      var {
+        composing
+      } = e.target;
+
+      if (composing) {
+        return;
+      }
+
+      var value = updateValue(e);
       call(props['onUpdate:modelValue'], value);
       call(props.onInput, value, e);
       validateWithTrigger('onInput');
     };
 
     var handleChange = e => {
-      var target = e.target;
-      var {
-        value
-      } = target;
-      value = withMaxlength(withTrim(value));
-      target.value = value;
+      var value = updateValue(e);
       call(props.onChange, value, e);
       validateWithTrigger('onChange');
     };
@@ -361,7 +397,7 @@ var __sfc__ = defineComponent({
       resetValidation
     };
     call(bindForm, inputProvider);
-    onMounted(() => {
+    useMounted(() => {
       if (props.autofocus) {
         focus();
       }
@@ -386,6 +422,8 @@ var __sfc__ = defineComponent({
       handleClear,
       handleClick,
       handleTouchstart,
+      handleCompositionStart,
+      handleCompositionEnd,
       validate,
       resetValidation,
       reset,

package/es/list/List.mjs

@@ -4,13 +4,14 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 import VarLoading from '../loading/index.mjs';
 import Ripple from '../ripple/index.mjs';
-import { defineComponent, onMounted, onUnmounted, ref, nextTick } from 'vue';
+import { defineComponent, onUnmounted, ref, nextTick } from 'vue';
 import { getParentScroller, toPxNum } from '../utils/elements.mjs';
 import { props } from './props.mjs';
 import { isNumber } from '@varlet/shared';
 import { dt } from '../utils/shared.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
 import { pack } from '../locale/index.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -116,7 +117,7 @@ var __sfc__ = defineComponent({
       };
     }();
 
-    onMounted(() => {
+    useMounted(() => {
       scroller = getParentScroller(listEl.value);
       props.immediateCheck && check();
       scroller.addEventListener('scroll', check);