@varlet/ui 2.4.3-alpha.1672163803050 → 2.5.0-alpha.1672507748593

package/es/index.js

@@ -68,6 +68,7 @@ import Tabs, * as TabsModule from './tabs'
 import TabsItems, * as TabsItemsModule from './tabs-items'
 import Themes, * as ThemesModule from './themes'
 import TimePicker, * as TimePickerModule from './time-picker'
+import Tooltip, * as TooltipModule from './tooltip'
 import Uploader, * as UploaderModule from './uploader'
 
 export const _ActionSheetComponent = ActionSheetModule._ActionSheetComponent || {}
@@ -140,6 +141,7 @@ export const _TabsComponent = TabsModule._TabsComponent || {}
 export const _TabsItemsComponent = TabsItemsModule._TabsItemsComponent || {}
 export const _ThemesComponent = ThemesModule._ThemesComponent || {}
 export const _TimePickerComponent = TimePickerModule._TimePickerComponent || {}
+export const _TooltipComponent = TooltipModule._TooltipComponent || {}
 export const _UploaderComponent = UploaderModule._UploaderComponent || {}
 
 
@@ -214,6 +216,7 @@ function install(app) {
   TabsItems.install && app.use(TabsItems)
   Themes.install && app.use(Themes)
   TimePicker.install && app.use(TimePicker)
+  Tooltip.install && app.use(Tooltip)
   Uploader.install && app.use(Uploader)
 }
 
@@ -289,6 +292,7 @@ export {
   TabsItems,
   Themes,
   TimePicker,
+  Tooltip,
   Uploader
 }
 
@@ -364,5 +368,6 @@ export default {
   TabsItems,
   Themes,
   TimePicker,
+  Tooltip,
   Uploader
 }

package/es/menu/Menu.js

@@ -1,17 +1,7 @@
-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 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 { createNamespace } from '../utils/components';
+import { defineComponent } from 'vue';
 import { props } from './props';
-import { doubleRaf, toPxNum } from '../utils/elements';
-import { useZIndex } from '../context/zIndex';
+import { usePopover } from './usePopover';
 var {
   n,
   classes
@@ -22,13 +12,13 @@ export function render(_ctx, _cache) {
     ref: "host",
     class: _normalizeClass(_ctx.n()),
     onClick: _cache[3] || (_cache[3] = function () {
-      return _ctx.handleClick && _ctx.handleClick(...arguments);
+      return _ctx.handleHostClick && _ctx.handleHostClick(...arguments);
     }),
     onMouseenter: _cache[4] || (_cache[4] = function () {
-      return _ctx.handleMouseenter && _ctx.handleMouseenter(...arguments);
+      return _ctx.handleHostMouseenter && _ctx.handleHostMouseenter(...arguments);
     }),
     onMouseleave: _cache[5] || (_cache[5] = function () {
-      return _ctx.handleMouseleave && _ctx.handleMouseleave(...arguments);
+      return _ctx.handleHostMouseleave && _ctx.handleHostMouseleave(...arguments);
     })
   }, [_renderSlot(_ctx.$slots, "default"), (_openBlock(), _createBlock(_Teleport, {
     to: _ctx.teleport
@@ -38,17 +28,17 @@ export function render(_ctx, _cache) {
     onAfterLeave: _ctx.onClosed
   }, {
     default: _withCtx(() => [_withDirectives(_createElementVNode("div", {
-      ref: "menu",
+      ref: "popover",
       style: _normalizeStyle({
         zIndex: _ctx.zIndex
       }),
       class: _normalizeClass(_ctx.classes(_ctx.n('menu'), [_ctx.defaultStyle, _ctx.n('--menu-background-color') + " " + _ctx.n('$-elevation--3')])),
       onClick: _cache[0] || (_cache[0] = _withModifiers(() => {}, ["stop"])),
       onMouseenter: _cache[1] || (_cache[1] = function () {
-        return _ctx.handleMenuMouseenter && _ctx.handleMenuMouseenter(...arguments);
+        return _ctx.handlePopoverMouseenter && _ctx.handlePopoverMouseenter(...arguments);
       }),
       onMouseleave: _cache[2] || (_cache[2] = function () {
-        return _ctx.handleMenuMouseleave && _ctx.handleMenuMouseleave(...arguments);
+        return _ctx.handlePopoverMouseleave && _ctx.handlePopoverMouseleave(...arguments);
       })
     }, [_renderSlot(_ctx.$slots, "menu")], 38
     /* CLASS, STYLE, HYDRATE_EVENTS */
@@ -70,300 +60,39 @@ export default defineComponent({
   props,
 
   setup(props) {
-    var host = ref(null);
-    var menu = ref(null);
-    var show = ref(false);
     var {
-      zIndex
-    } = 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
-      } = window.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();
-
-        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;
-    };
-
-    var handleMenuClose = () => {
-      if (clickSelf) {
-        clickSelf = false;
-        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
-          };
-      }
-    };
-
-    var getPopperOptions = () => {
-      var {
-        placement,
-        skidding,
-        distance
-      } = getPosition();
-      return {
-        placement,
-        modifiers: [_extends({}, flip, {
-          enabled: show.value
-        }), _extends({}, offset, {
-          options: {
-            offset: [skidding, distance]
-          }
-        })]
-      };
-    }; // expose
-
-
-    var resize = () => {
-      popover.setOptions(getPopperOptions());
-    }; // expose
-
-
-    var open = () => {
-      var {
-        disabled
-      } = props;
-
-      if (disabled) {
-        return;
-      }
-
-      show.value = true;
-      call(props['onUpdate:show'], true);
-    }; // expose
-
-
-    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(() => {
-      popover = createPopper(host.value, menu.value, getPopperOptions());
-
-      if (props.trigger === 'click') {
-        document.addEventListener('click', handleMenuClose);
-      }
-    });
-    onUnmounted(() => {
-      document.removeEventListener('click', handleMenuClose);
-      popover.destroy();
-    });
+      popover,
+      host,
+      hostSize,
+      show,
+      zIndex,
+      handleHostClick,
+      handleHostMouseenter,
+      handleHostMouseleave,
+      handlePopoverMouseenter,
+      handlePopoverMouseleave,
+      handlePopoverClose,
+      // expose
+      open,
+      // expose
+      close,
+      // expose
+      resize
+    } = usePopover(props);
     return {
-      menu,
+      popover,
       host,
       hostSize,
       show,
       zIndex,
       n,
       classes,
-      handleClick,
-      handleMenuClose,
-      handleMouseenter,
-      handleMouseleave,
-      handleMenuMouseenter,
-      handleMenuMouseleave,
+      handleHostClick,
+      handleHostMouseenter,
+      handleHostMouseleave,
+      handlePopoverMouseenter,
+      handlePopoverMouseleave,
+      handlePopoverClose,
       resize,
       open,
       close