@varlet/ui 1.27.20 → 2.0.0-alpha.1663499244572

package/es/menu/Menu.js

@@ -1,52 +1,162 @@
-import { isVNode as _isVNode, withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
+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); }
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 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 { defineComponent, ref, computed, watch, onMounted, onUnmounted, Transition, Teleport, nextTick } from 'vue';
+import flip from '@popperjs/core/lib/modifiers/flip';
+import offset from '@popperjs/core/lib/modifiers/offset';
+import { createPopper } from '@popperjs/core/lib/popper-lite';
+import { call, createNamespace } from '../utils/components';
+import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
 import { props } from './props';
-import { getLeft, getTop, toSizeUnit } from '../utils/elements';
+import { doubleRaf, toPxNum } from '../utils/elements';
 import { useZIndex } from '../context/zIndex';
-import { call, createNamespace, exposeApis, useTeleport } from '../utils/components';
-
-
-
-
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
-}
-
 var {
   n,
   classes
 } = createNamespace('menu');
+import { renderSlot as _renderSlot, vShow as _vShow, withModifiers as _withModifiers, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock, createElementBlock as _createElementBlock } from "vue";
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "host",
+    class: _normalizeClass(_ctx.n()),
+    onClick: _cache[3] || (_cache[3] = function () {
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
+    }),
+    onMouseenter: _cache[4] || (_cache[4] = function () {
+      return _ctx.handleMouseenter && _ctx.handleMouseenter(...arguments);
+    }),
+    onMouseleave: _cache[5] || (_cache[5] = function () {
+      return _ctx.handleMouseleave && _ctx.handleMouseleave(...arguments);
+    })
+  }, [_renderSlot(_ctx.$slots, "default"), (_openBlock(), _createBlock(_Teleport, {
+    to: _ctx.teleport
+  }, [_createVNode(_Transition, {
+    name: _ctx.n(),
+    onAfterEnter: _ctx.onOpened,
+    onAfterLeave: _ctx.onClosed
+  }, {
+    default: _withCtx(() => [_withDirectives(_createElementVNode("div", {
+      ref: "menu",
+      style: _normalizeStyle({
+        zIndex: _ctx.zIndex
+      }),
+      class: _normalizeClass(_ctx.classes(_ctx.n('menu'), [_ctx.defaultStyle, _ctx.n('--menu-background-color') + " var-elevation--3"])),
+      onClick: _cache[0] || (_cache[0] = _withModifiers(() => {}, ["stop"])),
+      onMouseenter: _cache[1] || (_cache[1] = function () {
+        return _ctx.handleMenuMouseenter && _ctx.handleMenuMouseenter(...arguments);
+      }),
+      onMouseleave: _cache[2] || (_cache[2] = function () {
+        return _ctx.handleMenuMouseleave && _ctx.handleMenuMouseleave(...arguments);
+      })
+    }, [_renderSlot(_ctx.$slots, "menu")], 38
+    /* CLASS, STYLE, HYDRATE_EVENTS */
+    ), [[_vShow, _ctx.show]])]),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["name", "onAfterEnter", "onAfterLeave"])], 8
+  /* PROPS */
+  , ["to"]))], 34
+  /* CLASS, HYDRATE_EVENTS */
+  );
+}
 export default defineComponent({
+  render,
   name: 'VarMenu',
   props,
 
-  setup(props, _ref) {
-    var {
-      slots
-    } = _ref;
+  setup(props) {
     var host = ref(null);
     var menu = ref(null);
-    var to = ref();
-    var top = ref(0);
-    var left = ref(0);
+    var show = ref(false);
     var {
       zIndex
-    } = useZIndex(() => props.show, 1);
-    var {
-      disabled
-    } = useTeleport();
+    } = useZIndex(() => show.value, 1);
+    var popover = null;
     var clickSelf = false;
+    var enterMenu = false;
+    var enterHost = false;
+    var hostSize = {
+      width: 0,
+      height: 0
+    };
+
+    var computeHostSize = () => {
+      var {
+        width,
+        height
+      } = getComputedStyle(host.value);
+      hostSize = {
+        width: toPxNum(width),
+        height: toPxNum(height)
+      };
+    };
+
+    var handleMouseenter = () => {
+      if (props.trigger !== 'hover') {
+        return;
+      }
+
+      enterHost = true;
+      open();
+    };
+
+    var handleMouseleave = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(function* () {
+        if (props.trigger !== 'hover') {
+          return;
+        }
+
+        enterHost = false;
+        yield doubleRaf();
 
-    var computeTop = alignment => {
-      return alignment === 'top' ? getTop(host.value) : getTop(host.value) - menu.value.offsetHeight;
+        if (enterMenu) {
+          return;
+        }
+
+        close();
+      });
+
+      return function handleMouseleave() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    var handleMenuMouseenter = () => {
+      if (props.trigger !== 'hover') {
+        return;
+      }
+
+      enterMenu = true;
     };
 
+    var handleMenuMouseleave = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(function* () {
+        if (props.trigger !== 'hover') {
+          return;
+        }
+
+        enterMenu = false;
+        yield doubleRaf();
+
+        if (enterHost) {
+          return;
+        }
+
+        close();
+      });
+
+      return function handleMenuMouseleave() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
     var handleClick = () => {
+      open();
       clickSelf = true;
     };
 
@@ -56,93 +166,207 @@ export default defineComponent({
         return;
       }
 
-      if (!props.show) {
-        return;
+      show.value = false;
+      call(props['onUpdate:show'], false);
+    };
+
+    var getPosition = () => {
+      computeHostSize();
+      var offset = {
+        x: toPxNum(props.offsetX),
+        y: toPxNum(props.offsetY)
+      };
+
+      switch (props.placement) {
+        case 'cover-top':
+          return {
+            placement: 'bottom',
+            skidding: offset.x,
+            distance: offset.y - hostSize.height
+          };
+
+        case 'cover-top-start':
+          return {
+            placement: 'bottom-start',
+            skidding: offset.x,
+            distance: offset.y - hostSize.height
+          };
+
+        case 'cover-top-end':
+          return {
+            placement: 'bottom-end',
+            skidding: offset.x,
+            distance: offset.y - hostSize.height
+          };
+
+        case 'cover-bottom':
+          return {
+            placement: 'top',
+            skidding: offset.x,
+            distance: -offset.y - hostSize.height
+          };
+
+        case 'cover-bottom-start':
+          return {
+            placement: 'top-start',
+            skidding: offset.x,
+            distance: -offset.y - hostSize.height
+          };
+
+        case 'cover-bottom-end':
+          return {
+            placement: 'top-end',
+            skidding: offset.x,
+            distance: -offset.y - hostSize.height
+          };
+
+        case 'cover-left':
+          return {
+            placement: 'right',
+            skidding: offset.y,
+            distance: offset.x - hostSize.width
+          };
+
+        case 'cover-right':
+          return {
+            placement: 'left',
+            skidding: offset.y,
+            distance: -offset.x - hostSize.width
+          };
+
+        case 'left':
+        case 'left-start':
+        case 'left-end':
+          return {
+            placement: props.placement,
+            skidding: offset.y,
+            distance: -offset.x
+          };
+
+        case 'top':
+        case 'top-start':
+        case 'top-end':
+          return {
+            placement: props.placement,
+            skidding: offset.x,
+            distance: -offset.y
+          };
+
+        case 'bottom':
+        case 'bottom-start':
+        case 'bottom-end':
+          return {
+            placement: props.placement,
+            skidding: offset.x,
+            distance: offset.y
+          };
+
+        case 'right':
+        case 'right-start':
+        case 'right-end':
+          return {
+            placement: props.placement,
+            skidding: offset.y,
+            distance: offset.x
+          };
       }
+    };
 
-      call(props['onUpdate:show'], false);
+    var getPopperOptions = () => {
+      var {
+        placement,
+        skidding,
+        distance
+      } = getPosition();
+      return {
+        placement,
+        modifiers: [_extends({}, flip, {
+          enabled: show.value
+        }), _extends({}, offset, {
+          options: {
+            offset: [skidding, distance]
+          }
+        })]
+      };
     }; // expose
 
 
     var resize = () => {
-      top.value = computeTop(props.alignment);
-      left.value = getLeft(host.value);
-    }; // Transition style use computed place here
+      popover.setOptions(getPopperOptions());
+    }; // expose
 
 
-    var transitionStyle = computed(() => {
-      return {
-        top: "calc(" + top.value + "px + " + toSizeUnit(props.offsetY) + ")",
-        left: "calc(" + left.value + "px + " + toSizeUnit(props.offsetX) + ")",
-        zIndex: zIndex.value
-      };
-    });
+    var open = () => {
+      var {
+        disabled
+      } = props;
 
-    var renderTransition = () => _createVNode(Transition, {
-      "name": n(),
-      "onAfterEnter": props.onOpened,
-      "onAfterLeave": props.onClosed
-    }, {
-      default: () => [_withDirectives(_createVNode("div", {
-        "class": classes(n('menu'), 'var-elevation--3'),
-        "ref": menu,
-        "style": transitionStyle.value,
-        "onClick": event => {
-          event.stopPropagation();
-        }
-      }, [call(slots.menu)]), [[_vShow, props.show]])]
-    });
+      if (disabled) {
+        return;
+      }
 
-    watch(() => props.alignment, resize);
-    watch(() => props.show, /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator(function* (newValue) {
-        var {
-          onOpen,
-          onClose
-        } = props;
-
-        if (newValue) {
-          yield nextTick();
-          resize();
-        }
+      show.value = true;
+      call(props['onUpdate:show'], true);
+    }; // expose
 
-        newValue ? call(onOpen) : call(onClose);
-      });
 
-      return function (_x) {
-        return _ref2.apply(this, arguments);
-      };
-    }());
-    watch(() => props.teleport, newValue => {
-      to.value = newValue;
+    var close = () => {
+      show.value = false;
+      call(props['onUpdate:show'], false);
+    };
+
+    watch(() => props.show, newValue => {
+      show.value = newValue != null ? newValue : false;
+    }, {
+      immediate: true
+    });
+    watch(() => props.offsetX, resize);
+    watch(() => props.offsetY, resize);
+    watch(() => props.placement, resize);
+    watch(() => show.value, newValue => {
+      if (newValue) {
+        resize();
+        call(props.onOpen);
+      } else {
+        call(props.onClose);
+      }
     });
+    watch(() => props.trigger, newValue => {
+      if (newValue === 'click') {
+        document.addEventListener('click', handleMenuClose);
+      } else {
+        document.removeEventListener('click', handleMenuClose);
+      }
+    });
+    watch(() => props.disabled, close);
     onMounted(() => {
-      // Synchronously transfer the state to the mount hook to support server-side rendering to prevent hydration errors
-      to.value = props.teleport;
-      resize();
-      document.addEventListener('click', handleMenuClose);
-      window.addEventListener('resize', resize);
+      popover = createPopper(host.value, menu.value, getPopperOptions());
+
+      if (props.trigger === 'click') {
+        document.addEventListener('click', handleMenuClose);
+      }
     });
     onUnmounted(() => {
       document.removeEventListener('click', handleMenuClose);
-      window.removeEventListener('resize', resize);
-    });
-    exposeApis({
-      resize
+      popover.destroy();
     });
-    return () => {
-      var _slot;
-
-      return _createVNode("div", {
-        "class": n(),
-        "ref": host,
-        "onClick": handleClick
-      }, [call(slots.default), to.value ? _createVNode(Teleport, {
-        "to": to.value,
-        "disabled": disabled.value
-      }, _isSlot(_slot = renderTransition()) ? _slot : {
-        default: () => [_slot]
-      }) : renderTransition()]);
+    return {
+      menu,
+      host,
+      hostSize,
+      show,
+      zIndex,
+      n,
+      classes,
+      handleClick,
+      handleMenuClose,
+      handleMouseenter,
+      handleMouseleave,
+      handleMenuMouseenter,
+      handleMenuMouseleave,
+      resize,
+      open,
+      close
     };
   }
 

package/es/menu/index.js

@@ -1,4 +1,4 @@
-import Menu from './Menu';
+import Menu from './Menu.js'
 
 Menu.install = function (app) {
   app.component(Menu.name, Menu);

package/es/menu/menu.css

@@ -1 +1 @@
-.var-menu-enter-from,.var-menu-leave-to { transform: scale(0.8); opacity: 0;}.var-menu-enter-active,.var-menu-leave-active { transition-property: opacity, transform; transition-duration: 0.25s;}.var-menu { display: inline-block; transition: background-color 0.25s;}.var-menu__menu { position: absolute;}
+:root { --menu-background-color: #fff;}.var-menu-enter-from,.var-menu-leave-to { opacity: 0;}.var-menu-enter-active,.var-menu-leave-active { transition-property: opacity; transition-duration: 0.25s;}.var-menu { display: inline-block;}.var-menu--menu-background-color { background: var(--menu-background-color); transition: opacity 0.25s, background-color 0.25s;}

package/es/menu/props.js

@@ -1,5 +1,9 @@
-function alignmentValidator(alignment) {
-  return ['top', 'bottom'].includes(alignment);
+function triggerValidator(trigger) {
+  return ['click', 'hover'].includes(trigger);
+}
+
+function placementValidator(alignment) {
+  return ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'cover-top', 'cover-top-start', 'cover-top-end', 'cover-bottom', 'cover-bottom-start', 'cover-bottom-end', 'cover-left', 'cover-right'].includes(alignment);
 }
 
 export var props = {
@@ -7,10 +11,19 @@ export var props = {
     type: Boolean,
     default: false
   },
-  alignment: {
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  trigger: {
     type: String,
-    default: 'top',
-    validator: alignmentValidator
+    default: 'click',
+    validator: triggerValidator
+  },
+  placement: {
+    type: String,
+    default: 'cover-top-start',
+    validator: placementValidator
   },
   offsetX: {
     type: [Number, String],
@@ -21,9 +34,13 @@ export var props = {
     default: 0
   },
   teleport: {
-    type: String,
+    type: [String, Object],
     default: 'body'
   },
+  defaultStyle: {
+    type: Boolean,
+    default: true
+  },
   onOpen: {
     type: Function
   },

package/es/menu/style/index.js

@@ -1,3 +1,4 @@
-import '../../styles/common.css'
-import '../../styles/elevation.css'
 import '../menu.css'
+import '../../styles/elevation.css'
+import '../../styles/common.css'
+import '../MenuSfc.css'

package/es/pagination/Pagination.js

@@ -12,7 +12,7 @@ var {
   n,
   classes
 } = createNamespace('pagination');
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, withKeys as _withKeys, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, createTextVNode as _createTextVNode, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, withKeys as _withKeys, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -51,9 +51,13 @@ export function render(_ctx, _cache) {
     onKeydown: _cache[3] || (_cache[3] = _withKeys($event => _ctx.setPage('simple', _ctx.simpleValue, $event), ["enter"]))
   }, null, 8
   /* PROPS */
-  , ["modelValue", "disabled"]), _createElementVNode("span", null, "/ " + _toDisplayString(_ctx.pageCount), 1
+  , ["modelValue", "disabled"]), _createElementVNode("span", null, [_createTextVNode(" / " + _toDisplayString(_ctx.pageCount) + " ", 1
   /* TEXT */
-  )], 2
+  ), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('simple-line'))
+  }, null, 2
+  /* CLASS */
+  )])], 2
   /* CLASS */
   )) : (_openBlock(true), _createElementBlock(_Fragment, {
     key: 1

package/es/pagination/pagination.css

@@ -1 +1 @@
-:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; width: 100%; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--disabled { cursor: default; color: var(--pagination-disabled-color); background-color: unset;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--hover:hover { background-color: inherit;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: default;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}
+:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; width: 100%; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--disabled { cursor: default; color: var(--pagination-disabled-color); background-color: unset;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--hover:hover { background-color: inherit;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: default;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly-line,.var-pagination__simple-line { height: 1px; background: transparent;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}

package/es/picker/props.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || 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); }
+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 { pickProps } from '../utils/components';
 import { props as popupProps } from '../popup/props';

package/es/popup/Popup.js

@@ -1,12 +1,12 @@
 import { isVNode as _isVNode, withDirectives as _withDirectives, vShow as _vShow, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 
-function _extends() { _extends = Object.assign || 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); }
+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, watch, Transition, Teleport } from 'vue';
 import { props } from './props';
 import { useLock } from '../context/lock';
 import { useZIndex } from '../context/zIndex';
-import { addRouteListener, useTeleport, createNamespace } from '../utils/components';
+import { useRouteListener, useTeleport, createNamespace } from '../utils/components';
 
 
 
@@ -60,7 +60,7 @@ export default defineComponent({
       newValue ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
     }); // internal for Dialog
 
-    addRouteListener(() => props.onRouteChange == null ? void 0 : props.onRouteChange());
+    useRouteListener(() => props.onRouteChange == null ? void 0 : props.onRouteChange());
 
     var renderOverlay = () => {
       var {