fantasia-ui 0.2.61 → 0.2.63

package/dist/fantasia-ui.css

@@ -444,24 +444,18 @@ to {
 }
 .f-rate--readonly .f-rate__item[data-v-3b5c4f14]:hover {
   transform: none;
-}.f-dropdown-wrapper[data-v-ecac3ad8] {
-  display: inline-flex;
-  align-items: center;
-}
-.f-dropdown-trigger-wrapper[data-v-ecac3ad8] {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
+}.f-dropdown-trigger-wrapper[data-v-36eb6d2b] {
+  display: contents;
 }
-.f-dropdown-item[data-v-ecac3ad8] {
+.f-dropdown-item[data-v-36eb6d2b] {
   position: fixed;
   pointer-events: auto;
 }
-.f-dropdown-bridge[data-v-ecac3ad8] {
+.f-dropdown-bridge[data-v-36eb6d2b] {
   position: absolute;
   background: transparent;
 }
-.f-dropdown-content[data-v-ecac3ad8] {
+.f-dropdown-content[data-v-36eb6d2b] {
   background: rgba(255, 255, 255, 0.96);
   border-radius: 8px;
   border: 1px solid rgba(148, 163, 184, 0.2);
@@ -471,7 +465,7 @@ to {
   width: fit-content;
   backdrop-filter: blur(6px);
 }
-.f-dropdown-content .f-dropdown-option[data-v-ecac3ad8] {
+.f-dropdown-content .f-dropdown-option[data-v-36eb6d2b] {
   display: flex;
   align-items: center;
   padding: 7px 10px;
@@ -482,15 +476,15 @@ to {
   font-size: 13px;
   transition: background 0.15s ease, color 0.15s ease;
 }
-.f-dropdown-content .f-dropdown-option[data-v-ecac3ad8]:hover:not(.is-disabled) {
+.f-dropdown-content .f-dropdown-option[data-v-36eb6d2b]:hover:not(.is-disabled) {
   background: var(--surface3);
   color: var(--text);
 }
-.f-dropdown-content .f-dropdown-option.is-disabled[data-v-ecac3ad8] {
+.f-dropdown-content .f-dropdown-option.is-disabled[data-v-36eb6d2b] {
   opacity: 0.35;
   cursor: not-allowed;
 }
-.f-dropdown-content .f-dropdown-option .opt-icon[data-v-ecac3ad8] {
+.f-dropdown-content .f-dropdown-option .opt-icon[data-v-36eb6d2b] {
   display: inline-flex;
   align-items: center;
   width: 16px;
@@ -498,20 +492,20 @@ to {
   flex-shrink: 0;
   color: var(--text-dim);
 }
-.f-dropdown-content .f-dropdown-option .opt-icon[data-v-ecac3ad8] svg {
+.f-dropdown-content .f-dropdown-option .opt-icon[data-v-36eb6d2b] svg {
   width: 100%;
   height: 100%;
 }
-.f-dropdown-content .f-dropdown-option .opt-label[data-v-ecac3ad8] {
+.f-dropdown-content .f-dropdown-option .opt-label[data-v-36eb6d2b] {
   flex: 1;
   white-space: nowrap;
 }
-.f-dropdown-motion-enter-active[data-v-ecac3ad8],
-.f-dropdown-motion-leave-active[data-v-ecac3ad8] {
+.f-dropdown-motion-enter-active[data-v-36eb6d2b],
+.f-dropdown-motion-leave-active[data-v-36eb6d2b] {
   transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
 }
-.f-dropdown-motion-enter-from[data-v-ecac3ad8],
-.f-dropdown-motion-leave-to[data-v-ecac3ad8] {
+.f-dropdown-motion-enter-from[data-v-36eb6d2b],
+.f-dropdown-motion-leave-to[data-v-36eb6d2b] {
   opacity: 0;
   transform: scale(0.92);
 }.f-select[data-v-00ebc113] {

package/dist/fantasia-ui.es.js

@@ -369,14 +369,13 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 const FRate = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-3b5c4f14"]]);
-const _hoisted_1$A = { class: "f-dropdown-wrapper" };
-const _hoisted_2$s = { class: "f-dropdown-content" };
-const _hoisted_3$p = ["onClick"];
-const _hoisted_4$g = {
+const _hoisted_1$A = { class: "f-dropdown-content" };
+const _hoisted_2$s = ["onClick"];
+const _hoisted_3$p = {
   key: 0,
   class: "opt-icon"
 };
-const _hoisted_5$b = { class: "opt-label" };
+const _hoisted_4$g = { class: "opt-label" };
 const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "FDropdown",
   props: {
@@ -397,6 +396,13 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const dropdownRef = ref(null);
     const dropdownHeight = ref(0);
     const dropdownWidth = ref(0);
+    const getAnchorRect = () => {
+      var _a;
+      const root = triggerRef.value;
+      if (!root) return null;
+      const el = (_a = root.firstElementChild) != null ? _a : root;
+      return el.getBoundingClientRect();
+    };
     const bridgeStyle = computed(() => {
       const [side] = props.placement.split("-");
       const gap = Array.isArray(props.offset) ? props.offset[0] : props.offset;
@@ -494,7 +500,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       if (props.trigger !== "click" || props.disabled) return;
       e.stopPropagation();
       if (!show.value) {
-        anchorRect.value = triggerRef.value.getBoundingClientRect();
+        anchorRect.value = getAnchorRect();
         show.value = true;
       } else {
         show.value = false;
@@ -504,9 +510,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       if (props.trigger !== "hover" || props.disabled) return;
       clearLeaveTimer();
       showTimer = setTimeout(() => {
-        if (triggerRef.value) {
-          anchorRect.value = triggerRef.value.getBoundingClientRect();
-        }
+        anchorRect.value = getAnchorRect();
         show.value = true;
       }, 400);
     };
@@ -520,7 +524,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
         show.value = false;
       }, 400);
     };
-    const handleWindowClick = (e) => {
+    const handleWindowClick = () => {
       if (props.trigger !== "click" || !show.value) return;
       show.value = false;
     };
@@ -532,7 +536,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     watch(show, (val) => __async(null, null, function* () {
       var _a, _b;
       if (val) {
-        anchorRect.value = triggerRef.value.getBoundingClientRect();
+        anchorRect.value = getAnchorRect();
         yield nextTick();
         dropdownHeight.value = ((_a = dropdownRef.value) == null ? void 0 : _a.offsetHeight) || 200;
         dropdownWidth.value = ((_b = dropdownRef.value) == null ? void 0 : _b.offsetWidth) || 160;
@@ -549,17 +553,15 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     });
     useEventListener(window, "click", handleWindowClick);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$A, [
-        createElementVNode("div", {
-          ref_key: "triggerRef",
-          ref: triggerRef,
-          class: "f-dropdown-trigger-wrapper",
-          onMouseenter: handleMouseEnter,
-          onMouseleave: handleMouseLeave,
-          onClick: handleTriggerClick
-        }, [
-          renderSlot(_ctx.$slots, "default", {}, void 0, true)
-        ], 544),
+      return openBlock(), createElementBlock("div", {
+        ref_key: "triggerRef",
+        ref: triggerRef,
+        class: "f-dropdown-trigger-wrapper",
+        onMouseenter: handleMouseEnter,
+        onMouseleave: handleMouseLeave,
+        onClick: handleTriggerClick
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           createVNode(Transition, { name: "f-dropdown-motion" }, {
             default: withCtx(() => [
@@ -579,18 +581,18 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                   class: "f-dropdown-bridge",
                   style: normalizeStyle(unref(bridgeStyle))
                 }, null, 4)) : createCommentVNode("", true),
-                createElementVNode("div", _hoisted_2$s, [
+                createElementVNode("div", _hoisted_1$A, [
                   _ctx.options && _ctx.options.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.options, (opt) => {
                     return openBlock(), createElementBlock("div", {
                       key: opt.key,
                       class: normalizeClass(["f-dropdown-option", { "is-disabled": opt.disabled }]),
                       onClick: ($event) => handleOptionClick(opt)
                     }, [
-                      opt.icon ? (openBlock(), createElementBlock("span", _hoisted_4$g, [
+                      opt.icon ? (openBlock(), createElementBlock("span", _hoisted_3$p, [
                         (openBlock(), createBlock(resolveDynamicComponent(opt.icon)))
                       ])) : createCommentVNode("", true),
-                      createElementVNode("span", _hoisted_5$b, toDisplayString(opt.label), 1)
-                    ], 10, _hoisted_3$p);
+                      createElementVNode("span", _hoisted_4$g, toDisplayString(opt.label), 1)
+                    ], 10, _hoisted_2$s);
                   }), 128)) : renderSlot(_ctx.$slots, "content", { key: 1 }, void 0, true)
                 ])
               ], 36)) : createCommentVNode("", true)
@@ -598,11 +600,11 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
             _: 3
           })
         ]))
-      ]);
+      ], 544);
     };
   }
 });
-const FDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-ecac3ad8"]]);
+const FDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-36eb6d2b"]]);
 const _hoisted_1$z = { class: "f-select__suffix" };
 const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "FSelect",

package/dist/fantasia-ui.umd.js

@@ -370,14 +370,13 @@ var __async = (__this, __arguments, generator) => {
     }
   });
   const FRate = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-3b5c4f14"]]);
-  const _hoisted_1$A = { class: "f-dropdown-wrapper" };
-  const _hoisted_2$s = { class: "f-dropdown-content" };
-  const _hoisted_3$p = ["onClick"];
-  const _hoisted_4$g = {
+  const _hoisted_1$A = { class: "f-dropdown-content" };
+  const _hoisted_2$s = ["onClick"];
+  const _hoisted_3$p = {
     key: 0,
     class: "opt-icon"
   };
-  const _hoisted_5$b = { class: "opt-label" };
+  const _hoisted_4$g = { class: "opt-label" };
   const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     __name: "FDropdown",
     props: {
@@ -398,6 +397,13 @@ var __async = (__this, __arguments, generator) => {
       const dropdownRef = vue.ref(null);
       const dropdownHeight = vue.ref(0);
       const dropdownWidth = vue.ref(0);
+      const getAnchorRect = () => {
+        var _a;
+        const root = triggerRef.value;
+        if (!root) return null;
+        const el = (_a = root.firstElementChild) != null ? _a : root;
+        return el.getBoundingClientRect();
+      };
       const bridgeStyle = vue.computed(() => {
         const [side] = props.placement.split("-");
         const gap = Array.isArray(props.offset) ? props.offset[0] : props.offset;
@@ -495,7 +501,7 @@ var __async = (__this, __arguments, generator) => {
         if (props.trigger !== "click" || props.disabled) return;
         e.stopPropagation();
         if (!show.value) {
-          anchorRect.value = triggerRef.value.getBoundingClientRect();
+          anchorRect.value = getAnchorRect();
           show.value = true;
         } else {
           show.value = false;
@@ -505,9 +511,7 @@ var __async = (__this, __arguments, generator) => {
         if (props.trigger !== "hover" || props.disabled) return;
         clearLeaveTimer();
         showTimer = setTimeout(() => {
-          if (triggerRef.value) {
-            anchorRect.value = triggerRef.value.getBoundingClientRect();
-          }
+          anchorRect.value = getAnchorRect();
           show.value = true;
         }, 400);
       };
@@ -521,7 +525,7 @@ var __async = (__this, __arguments, generator) => {
           show.value = false;
         }, 400);
       };
-      const handleWindowClick = (e) => {
+      const handleWindowClick = () => {
         if (props.trigger !== "click" || !show.value) return;
         show.value = false;
       };
@@ -533,7 +537,7 @@ var __async = (__this, __arguments, generator) => {
       vue.watch(show, (val) => __async(null, null, function* () {
         var _a, _b;
         if (val) {
-          anchorRect.value = triggerRef.value.getBoundingClientRect();
+          anchorRect.value = getAnchorRect();
           yield vue.nextTick();
           dropdownHeight.value = ((_a = dropdownRef.value) == null ? void 0 : _a.offsetHeight) || 200;
           dropdownWidth.value = ((_b = dropdownRef.value) == null ? void 0 : _b.offsetWidth) || 160;
@@ -550,17 +554,15 @@ var __async = (__this, __arguments, generator) => {
       });
       core.useEventListener(window, "click", handleWindowClick);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
-          vue.createElementVNode("div", {
-            ref_key: "triggerRef",
-            ref: triggerRef,
-            class: "f-dropdown-trigger-wrapper",
-            onMouseenter: handleMouseEnter,
-            onMouseleave: handleMouseLeave,
-            onClick: handleTriggerClick
-          }, [
-            vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ], 544),
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "triggerRef",
+          ref: triggerRef,
+          class: "f-dropdown-trigger-wrapper",
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave,
+          onClick: handleTriggerClick
+        }, [
+          vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
             vue.createVNode(vue.Transition, { name: "f-dropdown-motion" }, {
               default: vue.withCtx(() => [
@@ -580,18 +582,18 @@ var __async = (__this, __arguments, generator) => {
                     class: "f-dropdown-bridge",
                     style: vue.normalizeStyle(vue.unref(bridgeStyle))
                   }, null, 4)) : vue.createCommentVNode("", true),
-                  vue.createElementVNode("div", _hoisted_2$s, [
+                  vue.createElementVNode("div", _hoisted_1$A, [
                     _ctx.options && _ctx.options.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.options, (opt) => {
                       return vue.openBlock(), vue.createElementBlock("div", {
                         key: opt.key,
                         class: vue.normalizeClass(["f-dropdown-option", { "is-disabled": opt.disabled }]),
                         onClick: ($event) => handleOptionClick(opt)
                       }, [
-                        opt.icon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$g, [
+                        opt.icon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$p, [
                           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(opt.icon)))
                         ])) : vue.createCommentVNode("", true),
-                        vue.createElementVNode("span", _hoisted_5$b, vue.toDisplayString(opt.label), 1)
-                      ], 10, _hoisted_3$p);
+                        vue.createElementVNode("span", _hoisted_4$g, vue.toDisplayString(opt.label), 1)
+                      ], 10, _hoisted_2$s);
                     }), 128)) : vue.renderSlot(_ctx.$slots, "content", { key: 1 }, void 0, true)
                   ])
                 ], 36)) : vue.createCommentVNode("", true)
@@ -599,11 +601,11 @@ var __async = (__this, __arguments, generator) => {
               _: 3
             })
           ]))
-        ]);
+        ], 544);
       };
     }
   });
-  const FDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-ecac3ad8"]]);
+  const FDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-36eb6d2b"]]);
   const _hoisted_1$z = { class: "f-select__suffix" };
   const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     __name: "FSelect",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fantasia-ui",
   "private": false,
-  "version": "0.2.61",
+  "version": "0.2.63",
   "type": "module",
   "main": "dist/fantasia-ui.umd.js",
   "module": "dist/fantasia-ui.es.js",