@varlet/ui 3.7.1 → 3.7.2-alpha.1733247317826

package/lib/varlet.cjs.js

@@ -4133,7 +4133,7 @@ const props$1c = {
     type: String,
     default: "click"
   },
-  reference: String,
+  reference: [String, Object],
   placement: {
     type: String,
     default: "cover-top-start"
@@ -5483,7 +5483,7 @@ var __async$h = (__this, __arguments, generator) => {
 function usePopover(options) {
   const host = vue.ref(null);
   const popover = vue.ref(null);
-  const hostSize = vue.ref({ width: 0, height: 0 });
+  const referenceSize = vue.ref({ width: 0, height: 0 });
   const show = useVModel(options, "show", {
     passive: true,
     defaultValue: false,
@@ -5498,11 +5498,10 @@ function usePopover(options) {
   const { zIndex } = useZIndex(() => show.value, 1);
   useStack(() => show.value, zIndex);
   let popoverInstance = null;
+  let reference2;
   let enterPopover = false;
-  let enterHost = false;
+  let enterReference = false;
   useEventListener(() => window, "keydown", handleKeydown);
-  useClickOutside(getReference, "click", handleClickOutside);
-  onWindowResize(resize);
   vue.watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize);
   vue.watch(() => options.disabled, close);
   vue.watch(
@@ -5513,19 +5512,34 @@ function usePopover(options) {
       }
     }
   );
-  vue.onMounted(() => {
-    var _a;
-    popoverInstance = createPopper((_a = getReference()) != null ? _a : host.value, popover.value, getPopperOptions());
-  });
-  vue.onUnmounted(() => {
+  onWindowResize(resize);
+  vue.onMounted(createPopperInstance);
+  vue.onUnmounted(destroyPopperInstance);
+  function createPopperInstance() {
+    const reference22 = getReference();
+    popoverInstance = createPopper(reference22, popover.value, getPopperOptions());
+    reference22.addEventListener("mouseenter", handleReferenceMouseenter);
+    reference22.addEventListener("mouseleave", handleReferenceMouseleave);
+    reference22.addEventListener("click", handleReferenceClick);
+    document.addEventListener("click", handleClickOutside);
+  }
+  function destroyPopperInstance() {
+    const reference22 = getReference();
+    if (reference22) {
+      reference22.removeEventListener("mouseenter", handleReferenceMouseenter);
+      reference22.removeEventListener("mouseleave", handleReferenceMouseleave);
+      reference22.removeEventListener("click", handleReferenceClick);
+    }
     popoverInstance.destroy();
-  });
-  function computeHostSize() {
-    if (!host.value) {
+    document.removeEventListener("click", handleClickOutside);
+  }
+  function computeReferenceSize() {
+    const reference22 = getReference();
+    if (!reference22) {
       return;
     }
-    const { width, height } = getStyle$1(host.value);
-    hostSize.value = {
+    const { width, height } = getStyle$1(reference22);
+    referenceSize.value = {
       width: toPxNum(width),
       height: toPxNum(height)
     };
@@ -5562,19 +5576,19 @@ function usePopover(options) {
         return "left";
     }
   }
-  function handleHostMouseenter() {
+  function handleReferenceMouseenter() {
     if (options.trigger !== "hover") {
       return;
     }
-    enterHost = true;
+    enterReference = true;
     open();
   }
-  function handleHostMouseleave() {
+  function handleReferenceMouseleave() {
     return __async$h(this, null, function* () {
       if (options.trigger !== "hover") {
         return;
       }
-      enterHost = false;
+      enterReference = false;
       yield doubleRaf();
       if (enterPopover) {
         return;
@@ -5595,13 +5609,13 @@ function usePopover(options) {
       }
       enterPopover = false;
       yield doubleRaf();
-      if (enterHost) {
+      if (enterReference) {
         return;
       }
       close();
     });
   }
-  function handleHostClick() {
+  function handleReferenceClick() {
     if (options.trigger !== "click") {
       return;
     }
@@ -5611,15 +5625,18 @@ function usePopover(options) {
     }
     open();
   }
-  function handlePopoverClose() {
-    close();
-  }
   function handleClickOutside(e) {
-    if (options.trigger !== "click") {
-      return;
+    const reference22 = getReference();
+    if (reference22 && !reference22.contains(e.target)) {
+      if (options.trigger !== "click") {
+        return;
+      }
+      handlePopoverClose();
+      call(options.onClickOutside, e);
     }
-    handlePopoverClose();
-    call(options.onClickOutside, e);
+  }
+  function handlePopoverClose() {
+    close();
   }
   function handleClosed() {
     resize();
@@ -5627,7 +5644,7 @@ function usePopover(options) {
   }
   function getPosition() {
     const { offsetX, offsetY, placement } = options;
-    computeHostSize();
+    computeReferenceSize();
     const offset2 = {
       x: toPxNum(offsetX),
       y: toPxNum(offsetY)
@@ -5637,49 +5654,49 @@ function usePopover(options) {
         return {
           placement: "bottom",
           skidding: offset2.x,
-          distance: offset2.y - hostSize.value.height
+          distance: offset2.y - referenceSize.value.height
         };
       case "cover-top-start":
         return {
           placement: "bottom-start",
           skidding: offset2.x,
-          distance: offset2.y - hostSize.value.height
+          distance: offset2.y - referenceSize.value.height
         };
       case "cover-top-end":
         return {
           placement: "bottom-end",
           skidding: offset2.x,
-          distance: offset2.y - hostSize.value.height
+          distance: offset2.y - referenceSize.value.height
         };
       case "cover-bottom":
         return {
           placement: "top",
           skidding: offset2.x,
-          distance: -offset2.y - hostSize.value.height
+          distance: -offset2.y - referenceSize.value.height
         };
       case "cover-bottom-start":
         return {
           placement: "top-start",
           skidding: offset2.x,
-          distance: -offset2.y - hostSize.value.height
+          distance: -offset2.y - referenceSize.value.height
         };
       case "cover-bottom-end":
         return {
           placement: "top-end",
           skidding: offset2.x,
-          distance: -offset2.y - hostSize.value.height
+          distance: -offset2.y - referenceSize.value.height
         };
       case "cover-left":
         return {
           placement: "right",
           skidding: offset2.y,
-          distance: offset2.x - hostSize.value.width
+          distance: offset2.x - referenceSize.value.width
         };
       case "cover-right":
         return {
           placement: "left",
           skidding: offset2.y,
-          distance: -offset2.x - hostSize.value.width
+          distance: -offset2.x - referenceSize.value.width
         };
       case "left":
       case "left-start":
@@ -5749,7 +5766,17 @@ function usePopover(options) {
     };
   }
   function getReference() {
-    return options.reference ? host.value.querySelector(options.reference) : host.value;
+    var _a, _b;
+    const targetReference = (_a = reference2 != null ? reference2 : options.reference) != null ? _a : host.value;
+    if (isString(targetReference)) {
+      return (_b = host.value) == null ? void 0 : _b.querySelector(targetReference);
+    }
+    return targetReference;
+  }
+  function setReference(newReference) {
+    destroyPopperInstance();
+    reference2 = newReference;
+    createPopperInstance();
   }
   function handleKeydown(event) {
     const { closeOnKeyEscape = false } = options;
@@ -5777,14 +5804,12 @@ function usePopover(options) {
     popover,
     zIndex,
     host,
-    hostSize,
-    handleHostClick,
-    handleHostMouseenter,
-    handleHostMouseleave,
+    referenceSize,
     handlePopoverClose,
     handlePopoverMouseenter,
     handlePopoverMouseleave,
     handleClosed,
+    setReference,
     resize,
     open,
     close
@@ -5796,10 +5821,7 @@ function __render__$1i(_ctx, _cache) {
     "div",
     {
       ref: "host",
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
-      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleHostClick && _ctx.handleHostClick(...args)),
-      onMouseenter: _cache[4] || (_cache[4] = (...args) => _ctx.handleHostMouseenter && _ctx.handleHostMouseenter(...args)),
-      onMouseleave: _cache[5] || (_cache[5] = (...args) => _ctx.handleHostMouseleave && _ctx.handleHostMouseleave(...args))
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box")))
     },
     [
       vue.renderSlot(_ctx.$slots, "default"),
@@ -5820,7 +5842,7 @@ function __render__$1i(_ctx, _cache) {
                 ref: "popover",
                 style: vue.normalizeStyle({
                   zIndex: _ctx.zIndex,
-                  width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.hostSize.width)) : void 0
+                  width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.referenceSize.width)) : void 0
                 }),
                 class: vue.normalizeClass(
                   _ctx.classes(
@@ -5850,8 +5872,8 @@ function __render__$1i(_ctx, _cache) {
         }, 8, ["name", "onAfterEnter", "onAfterLeave"])
       ], 8, ["to", "disabled"]))
     ],
-    34
-    /* CLASS, NEED_HYDRATION */
+    2
+    /* CLASS */
   );
 }
 const __sfc__$1l = vue.defineComponent({
@@ -5862,12 +5884,9 @@ const __sfc__$1l = vue.defineComponent({
     const {
       popover,
       host,
-      hostSize,
+      referenceSize,
       show,
       zIndex,
-      handleHostClick,
-      handleHostMouseenter,
-      handleHostMouseleave,
       handlePopoverMouseenter,
       handlePopoverMouseleave,
       handlePopoverClose,
@@ -5877,12 +5896,14 @@ const __sfc__$1l = vue.defineComponent({
       // expose
       close,
       // expose
-      resize
+      resize,
+      // expose
+      setReference
     } = usePopover(props2);
     return {
       popover,
       host,
-      hostSize,
+      referenceSize,
       show,
       zIndex,
       teleportDisabled,
@@ -5890,16 +5911,14 @@ const __sfc__$1l = vue.defineComponent({
       toSizeUnit,
       n: n$1k,
       classes: classes$13,
-      handleHostClick,
-      handleHostMouseenter,
-      handleHostMouseleave,
       handlePopoverMouseenter,
       handlePopoverMouseleave,
       handlePopoverClose,
       handleClosed,
       resize,
       open,
-      close
+      close,
+      setReference
     };
   }
 });
@@ -6661,6 +6680,10 @@ const __sfc__$1i = vue.defineComponent({
       var _a;
       (_a = menu.value) == null ? void 0 : _a.resize();
     }
+    function setReference(reference2) {
+      var _a;
+      (_a = menu.value) == null ? void 0 : _a.setReference(reference2);
+    }
     return {
       show,
       menu,
@@ -6670,7 +6693,8 @@ const __sfc__$1i = vue.defineComponent({
       formatElevation,
       open,
       close,
-      resize
+      resize,
+      setReference
     };
   }
 });
@@ -16172,7 +16196,7 @@ const props$H = {
     type: String,
     default: "hover"
   },
-  reference: String,
+  reference: [String, Object],
   placement: {
     type: String,
     default: "bottom"
@@ -16212,10 +16236,7 @@ function __render__$J(_ctx, _cache) {
     "div",
     {
       ref: "host",
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
-      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleHostClick && _ctx.handleHostClick(...args)),
-      onMouseenter: _cache[4] || (_cache[4] = (...args) => _ctx.handleHostMouseenter && _ctx.handleHostMouseenter(...args)),
-      onMouseleave: _cache[5] || (_cache[5] = (...args) => _ctx.handleHostMouseleave && _ctx.handleHostMouseleave(...args))
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box")))
     },
     [
       vue.renderSlot(_ctx.$slots, "default"),
@@ -16248,7 +16269,7 @@ function __render__$J(_ctx, _cache) {
                     style: vue.normalizeStyle({
                       background: _ctx.color,
                       color: _ctx.textColor,
-                      width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.hostSize.width)) : void 0
+                      width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.referenceSize.width)) : void 0
                     }),
                     class: vue.normalizeClass(_ctx.classes(_ctx.n("content-container"), _ctx.n(`--${_ctx.type}`))),
                     role: "tooltip"
@@ -16277,8 +16298,8 @@ function __render__$J(_ctx, _cache) {
         }, 8, ["name", "onAfterEnter", "onAfterLeave"])
       ], 8, ["to", "disabled"]))
     ],
-    34
-    /* CLASS, NEED_HYDRATION */
+    2
+    /* CLASS */
   );
 }
 const __sfc__$M = vue.defineComponent({
@@ -16289,12 +16310,9 @@ const __sfc__$M = vue.defineComponent({
     const {
       popover,
       host,
-      hostSize,
+      referenceSize,
       show,
       zIndex,
-      handleHostClick,
-      handleHostMouseenter,
-      handleHostMouseleave,
       handlePopoverMouseenter,
       handlePopoverMouseleave,
       handlePopoverClose,
@@ -16304,28 +16322,28 @@ const __sfc__$M = vue.defineComponent({
       // expose
       close,
       // expose
-      resize
+      resize,
+      // expose
+      setReference
     } = usePopover(props2);
     return {
       popover,
       host,
-      hostSize,
+      referenceSize,
       show,
       zIndex,
       teleportDisabled,
       toSizeUnit,
       n: n$L,
       classes: classes$B,
-      handleHostClick,
       handlePopoverClose,
-      handleHostMouseenter,
-      handleHostMouseleave,
       handlePopoverMouseenter,
       handlePopoverMouseleave,
       handleClosed,
       resize,
       open,
-      close
+      close,
+      setReference
     };
   }
 });
@@ -25724,7 +25742,20 @@ var stdin_default$2U = {
   "--switch-variant-handle-background": "rgb(255, 255, 255, .7)",
   "--switch-variant-handle-color": "var(--color-primary)",
   "--switch-variant-handle-active-color": "var(--color-primary)",
-  "--switch-variant-handle-active-background": "var(--color-on-primary)"
+  "--switch-variant-handle-active-background": "var(--color-on-primary)",
+  "--switch-width": "40px",
+  "--switch-height": "24px",
+  "--switch-track-width": "38px",
+  "--switch-track-height": "14.4px",
+  "--switch-track-border-radius": "calc(20px * 2 / 3)",
+  "--switch-handle-width": "20px",
+  "--switch-handle-height": "20px",
+  "--switch-ripple-size": "40px",
+  "--switch-ripple-left": "-10px",
+  "--switch-ripple-active-left": "10px",
+  "--switch-loading-size": "16px",
+  "--switch-variant-ripple-left": "-4px",
+  "--switch-variant-ripple-active-left": "16px"
 };
 var stdin_default$2T = {
   "--tab-inactive-color": "rgba(255, 255, 255, .65)",
@@ -26957,7 +26988,20 @@ var stdin_default$1A = {
   "--switch-variant-handle-color": "var(--color-on-primary)",
   "--switch-variant-handle-active-color": "var(--color-primary)",
   "--switch-variant-handle-background": "#79747E",
-  "--switch-variant-handle-active-background": "var(--color-on-primary)"
+  "--switch-variant-handle-active-background": "var(--color-on-primary)",
+  "--switch-width": "40px",
+  "--switch-height": "24px",
+  "--switch-track-width": "38px",
+  "--switch-track-height": "14.4px",
+  "--switch-track-border-radius": "calc(20px * 2 / 3)",
+  "--switch-handle-width": "20px",
+  "--switch-handle-height": "20px",
+  "--switch-ripple-size": "40px",
+  "--switch-ripple-left": "-10px",
+  "--switch-ripple-active-left": "10px",
+  "--switch-loading-size": "16px",
+  "--switch-variant-ripple-left": "-4px",
+  "--switch-variant-ripple-active-left": "16px"
 };
 var stdin_default$1z = {
   "--rate-color": "var(--color-on-surface-variant)",
@@ -27936,7 +27980,20 @@ var stdin_default$u = {
   "--switch-variant-handle-color": "var(--color-on-primary)",
   "--switch-variant-handle-active-color": "var(--color-primary)",
   "--switch-variant-handle-background": "#938F99",
-  "--switch-variant-handle-active-background": "var(--color-on-primary)"
+  "--switch-variant-handle-active-background": "var(--color-on-primary)",
+  "--switch-width": "40px",
+  "--switch-height": "24px",
+  "--switch-track-width": "38px",
+  "--switch-track-height": "14.4px",
+  "--switch-track-border-radius": "calc(20px * 2 / 3)",
+  "--switch-handle-width": "20px",
+  "--switch-handle-height": "20px",
+  "--switch-ripple-size": "40px",
+  "--switch-ripple-left": "-10px",
+  "--switch-ripple-active-left": "10px",
+  "--switch-loading-size": "16px",
+  "--switch-variant-ripple-left": "-4px",
+  "--switch-variant-ripple-active-left": "16px"
 };
 var stdin_default$t = {
   "--slider-thumb-size": "16px",
@@ -30016,7 +30073,7 @@ withInstall(stdin_default$1);
 withPropsDefaultsSetter(stdin_default$1, props);
 const _WatermarkComponent = stdin_default$1;
 var stdin_default = stdin_default$1;
-const version = "3.7.1";
+const version = "3.7.2-alpha.1733247317826";
 function install(app) {
   stdin_default$5W.install && app.use(stdin_default$5W);
   stdin_default$5U.install && app.use(stdin_default$5U);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.7.1",
+  "version": "3.7.2-alpha.1733247317826",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -48,9 +48,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "3.7.1",
-    "@varlet/use": "3.7.1",
-    "@varlet/shared": "3.7.1"
+    "@varlet/shared": "3.7.2-alpha.1733247317826",
+    "@varlet/icons": "3.7.2-alpha.1733247317826",
+    "@varlet/use": "3.7.2-alpha.1733247317826"
   },
   "devDependencies": {
     "@types/node": "^18.7.18",
@@ -66,9 +66,9 @@
     "vue": "3.4.21",
     "vue-router": "4.2.0",
     "zod": "^3.23.8",
-    "@varlet/cli": "3.7.1",
-    "@varlet/ui": "3.7.1",
-    "@varlet/touch-emulator": "3.7.1"
+    "@varlet/touch-emulator": "3.7.2-alpha.1733247317826",
+    "@varlet/cli": "3.7.2-alpha.1733247317826",
+    "@varlet/ui": "3.7.2-alpha.1733247317826"
   },
   "scripts": {
     "dev": "varlet-cli dev",

package/types/menu.d.ts

@@ -22,11 +22,13 @@ export type MenuTrigger = 'click' | 'hover' | 'manual'
 
 export type MenuStrategy = PositioningStrategy
 
+export type MenuReference = string | HTMLElement
+
 export interface MenuProps extends BasicAttributes {
   show?: boolean
   disabled?: boolean
   trigger?: MenuTrigger
-  reference?: string
+  reference?: MenuReference
   placement?: MenuPlacement
   strategy?: MenuStrategy
   offsetX?: string | number

package/types/menuSelect.d.ts

@@ -24,6 +24,8 @@ export type MenuSelectStrategy = PositioningStrategy
 
 export type MenuSelectSize = 'normal' | 'mini' | 'small' | 'large'
 
+export type MenuSelectReference = string | HTMLElement
+
 export type MenuSelectOptionLabelRender = (option: MenuSelectOption, checked: boolean) => VNodeChild
 
 export interface MenuSelectOption {
@@ -42,7 +44,7 @@ export interface MenuSelectProps extends BasicAttributes {
   show?: boolean
   disabled?: boolean
   trigger?: MenuSelectTrigger
-  reference?: string
+  reference?: MenuSelectReference
   placement?: MenuSelectPlacement
   strategy?: MenuSelectStrategy
   offsetX?: string | number

package/types/styleVars.d.ts

@@ -668,6 +668,19 @@ interface BaseStyleVars {
   '--switch-variant-handle-active-color'?: string
   '--switch-variant-handle-background'?: string
   '--switch-variant-handle-active-background'?: string
+  '--switch-width'?: string
+  '--switch-height'?: string
+  '--switch-track-width'?: string
+  '--switch-track-height'?: string
+  '--switch-track-border-radius'?: string
+  '--switch-handle-width'?: string
+  '--switch-handle-height'?: string
+  '--switch-ripple-size'?: string
+  '--switch-ripple-left'?: string
+  '--switch-ripple-active-left'?: string
+  '--switch-loading-size'?: string
+  '--switch-variant-ripple-left'?: string
+  '--switch-variant-ripple-active-left'?: string
   '--table-background'?: string
   '--table-border-radius'?: string
   '--table-thead-border-bottom'?: string

package/types/tooltip.d.ts

@@ -11,6 +11,8 @@ export type TooltipPlacement = TooltipNeededPopperPlacement
 
 export type TooltipTrigger = 'click' | 'hover' | 'manual'
 
+export type TooltipReference = string | HTMLElement
+
 export type TooltipType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
 
 export type TooltipStrategy = PositioningStrategy
@@ -23,7 +25,7 @@ export interface TooltipProps extends BasicAttributes {
   textColor?: string
   type?: TooltipType
   trigger?: TooltipTrigger
-  reference?: string
+  reference?: TooltipReference
   placement?: TooltipPlacement
   strategy?: TooltipStrategy
   offsetX?: string | number