fantasia-ui 0.6.11 → 0.6.13

package/dist/fantasia-ui.css

@@ -4196,13 +4196,18 @@
 
 .f-empty {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: var(--f-empty-image-color);
-  flex-direction: column;
   padding: 32px 0;
 }
-.f-empty-img {
+.f-empty__image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--f-empty-image-color);
+}
+.f-empty__image-img {
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -8310,18 +8315,18 @@ to {
   font-size: 14px;
   color: #1e293b;
   line-height: 1;
-}.f-dropdown-trigger-wrapper[data-v-4f7ae74f] {
+}.f-dropdown-trigger-wrapper[data-v-c46e9d1e] {
   display: contents;
 }
-.f-dropdown-item[data-v-4f7ae74f] {
+.f-dropdown-item[data-v-c46e9d1e] {
   position: fixed;
   pointer-events: auto;
 }
-.f-dropdown-bridge[data-v-4f7ae74f] {
+.f-dropdown-bridge[data-v-c46e9d1e] {
   position: absolute;
   background: transparent;
 }
-.f-dropdown-content[data-v-4f7ae74f] {
+.f-dropdown-content[data-v-c46e9d1e] {
   background: rgba(255, 255, 255, 0.96);
   border-radius: 8px;
   border: 1px solid rgba(148, 163, 184, 0.2);
@@ -8331,7 +8336,7 @@ to {
   width: fit-content;
   backdrop-filter: blur(6px);
 }
-.f-dropdown-content .f-dropdown-option[data-v-4f7ae74f] {
+.f-dropdown-content .f-dropdown-option[data-v-c46e9d1e] {
   display: flex;
   align-items: center;
   padding: 7px 10px;
@@ -8342,25 +8347,25 @@ to {
   font-size: 13px;
   transition: background 0.15s ease, color 0.15s ease;
 }
-.f-dropdown-content .f-dropdown-option[data-v-4f7ae74f]:hover:not(.is-disabled) {
+.f-dropdown-content .f-dropdown-option[data-v-c46e9d1e]:hover:not(.is-disabled) {
   background: var(--surface3);
   color: var(--text);
 }
-.f-dropdown-content .f-dropdown-option.is-disabled[data-v-4f7ae74f] {
+.f-dropdown-content .f-dropdown-option.is-disabled[data-v-c46e9d1e] {
   opacity: 0.35;
   cursor: not-allowed;
 }
-.f-dropdown-content .f-dropdown-option.is-selected[data-v-4f7ae74f] {
+.f-dropdown-content .f-dropdown-option.is-selected[data-v-c46e9d1e] {
   color: var(--primary);
 }
-.f-dropdown-content .f-dropdown-option.is-selected .opt-icon[data-v-4f7ae74f] {
+.f-dropdown-content .f-dropdown-option.is-selected .opt-icon[data-v-c46e9d1e] {
   color: var(--primary);
 }
-.f-dropdown-content .f-dropdown-option .opt-checkbox[data-v-4f7ae74f] {
+.f-dropdown-content .f-dropdown-option .opt-checkbox[data-v-c46e9d1e] {
   flex-shrink: 0;
   pointer-events: none;
 }
-.f-dropdown-content .f-dropdown-option .opt-icon[data-v-4f7ae74f] {
+.f-dropdown-content .f-dropdown-option .opt-icon[data-v-c46e9d1e] {
   display: inline-flex;
   align-items: center;
   width: 16px;
@@ -8368,20 +8373,20 @@ to {
   flex-shrink: 0;
   color: var(--text-dim);
 }
-.f-dropdown-content .f-dropdown-option .opt-icon[data-v-4f7ae74f] svg {
+.f-dropdown-content .f-dropdown-option .opt-icon[data-v-c46e9d1e] svg {
   width: 100%;
   height: 100%;
 }
-.f-dropdown-content .f-dropdown-option .opt-label[data-v-4f7ae74f] {
+.f-dropdown-content .f-dropdown-option .opt-label[data-v-c46e9d1e] {
   flex: 1;
   white-space: nowrap;
 }
-.f-dropdown-motion-enter-active[data-v-4f7ae74f],
-.f-dropdown-motion-leave-active[data-v-4f7ae74f] {
+.f-dropdown-motion-enter-active[data-v-c46e9d1e],
+.f-dropdown-motion-leave-active[data-v-c46e9d1e] {
   transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
 }
-.f-dropdown-motion-enter-from[data-v-4f7ae74f],
-.f-dropdown-motion-leave-to[data-v-4f7ae74f] {
+.f-dropdown-motion-enter-from[data-v-c46e9d1e],
+.f-dropdown-motion-leave-to[data-v-c46e9d1e] {
   opacity: 0;
   transform: scale(0.92);
 }.f-tag[data-v-19e20dd3] {
@@ -13422,13 +13427,18 @@ to {
 }
 .f-empty[data-v-af34030d] {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: var(--f-empty-image-color);
-  flex-direction: column;
   padding: 32px 0;
 }
-.f-empty-img[data-v-af34030d] {
+.f-empty__image[data-v-af34030d] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--f-empty-image-color);
+}
+.f-empty__image-img[data-v-af34030d] {
   width: 100%;
   height: 100%;
   object-fit: contain;

package/dist/fantasia-ui.es.js

@@ -39,7 +39,7 @@ var __async = (__this, __arguments, generator) => {
 };
 import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, unref, renderSlot, normalizeClass, createCommentVNode, Fragment, renderList, createElementVNode, toDisplayString, ref, watch, createVNode, withDirectives, Transition, withCtx, vShow, mergeModels, useModel, useSlots, inject, createBlock, resolveDynamicComponent, withModifiers, nextTick, onMounted, onBeforeUnmount, onUnmounted, Teleport, createTextVNode, withKeys, isRef, vModelText, TransitionGroup, Comment as Comment$1, Text, provide, readonly, reactive, toRefs, h, render } from "vue";
 import { CloseCircleOutline, EyeOutline, EyeOffOutline, StarOutline, StarHalf, Star, CloseCircle, Close, ChevronDownOutline, CalendarOutline, ChevronBackOutline, ChevronForwardOutline, EllipsisHorizontal, Person, InformationCircleOutline, WarningOutline, AlertCircleOutline, CheckmarkCircleOutline, CloudUpload, CheckmarkCircle, AlertCircle, DocumentOutline, Reload, FileTrayOutline, RemoveOutline, AddOutline, ChevronUpOutline, InformationCircle, RefreshOutline, PauseOutline, PlayOutline, CloseOutline, Warning } from "@vicons/ionicons5";
-import { useEventListener } from "@vueuse/core";
+import { useResizeObserver, useEventListener } from "@vueuse/core";
 const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "FIcon",
   props: {
@@ -771,63 +771,78 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean, default: false },
     multiple: { type: Boolean, default: false },
     modelValue: { default: () => [] },
-    maxHeight: { default: "300px" }
+    maxHeight: { default: "300px" },
+    show: { type: Boolean, default: void 0 },
+    closeOnClickOutside: { type: Boolean, default: false }
   },
-  emits: ["select", "show", "hide", "update:modelValue"],
-  setup(__props, { emit: __emit }) {
+  emits: ["select", "show", "hide", "update:modelValue", "update:show"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const selectedKeys = computed({
       get: () => props.modelValue || [],
       set: (val) => emit("update:modelValue", val)
     });
-    const show = ref(false);
+    const innerVisible = ref(false);
+    const visible = computed(
+      () => props.show !== void 0 ? !!props.show : innerVisible.value
+    );
+    const setVisible = (v) => {
+      if (v && props.disabled) return;
+      if (v === visible.value) return;
+      innerVisible.value = v;
+      emit("update:show", v);
+    };
     const anchorRect = ref(null);
+    const virtualRect = ref(null);
     const triggerRef = ref(null);
     const dropdownRef = ref(null);
     const dropdownHeight = ref(0);
     const dropdownWidth = ref(0);
     const getAnchorRect = () => {
       var _a;
+      if (virtualRect.value) return virtualRect.value;
       const root = triggerRef.value;
       if (!root) return null;
       const el = (_a = root.firstElementChild) != null ? _a : root;
       return el.getBoundingClientRect();
     };
+    const measure = () => {
+      const el = dropdownRef.value;
+      if (!el) return;
+      dropdownWidth.value = el.offsetWidth;
+      dropdownHeight.value = el.offsetHeight;
+    };
+    const updatePosition = () => {
+      if (!visible.value) return;
+      anchorRect.value = getAnchorRect();
+      measure();
+    };
+    const normalizedOffset = computed(() => {
+      var _a, _b;
+      const o = props.offset;
+      return Array.isArray(o) ? { gap: (_a = o[0]) != null ? _a : 0, skid: (_b = o[1]) != null ? _b : 0 } : { gap: o, skid: 0 };
+    });
     const bridgeStyle = computed(() => {
       const [side] = props.placement.split("-");
-      const gap = Array.isArray(props.offset) ? props.offset[0] : props.offset;
-      const size = gap + 4;
+      const size = normalizedOffset.value.gap + 4;
       const styles = { position: "absolute" };
       if (side === "right") {
-        styles.width = `${size}px`;
-        styles.left = `-${size}px`;
-        styles.top = 0;
-        styles.bottom = 0;
+        Object.assign(styles, { width: `${size}px`, left: `-${size}px`, top: 0, bottom: 0 });
       } else if (side === "left") {
-        styles.width = `${size}px`;
-        styles.right = `-${size}px`;
-        styles.top = 0;
-        styles.bottom = 0;
+        Object.assign(styles, { width: `${size}px`, right: `-${size}px`, top: 0, bottom: 0 });
       } else if (side === "bottom") {
-        styles.height = `${size}px`;
-        styles.top = `-${size}px`;
-        styles.left = 0;
-        styles.right = 0;
+        Object.assign(styles, { height: `${size}px`, top: `-${size}px`, left: 0, right: 0 });
       } else if (side === "top") {
-        styles.height = `${size}px`;
-        styles.bottom = `-${size}px`;
-        styles.left = 0;
-        styles.right = 0;
+        Object.assign(styles, { height: `${size}px`, bottom: `-${size}px`, left: 0, right: 0 });
       }
       return styles;
     });
     const dropdownStyle = computed(() => {
       if (!anchorRect.value) return {};
       const rect = anchorRect.value;
-      const { placement } = props;
-      const gap = Array.isArray(props.offset) ? props.offset[0] : props.offset;
-      const [side, align] = placement.split("-");
+      const { gap, skid } = normalizedOffset.value;
+      const [side, align] = props.placement.split("-");
       const vw = window.innerWidth;
       const vh = window.innerHeight;
       const w = dropdownWidth.value || 160;
@@ -864,19 +879,19 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         if (align === "start") left = rect.left;
         else if (align === "end") left = rect.right - w;
         else left = rect.left + (rect.width - w) / 2;
-        left = Math.max(8, Math.min(left, vw - w - 8));
+        left = Math.max(8, Math.min(left + skid, vw - w - 8));
       } else {
         if (align === "start") top = rect.top;
         else if (align === "end") top = rect.bottom - h2;
         else top = rect.top + (rect.height - h2) / 2;
-        top = Math.max(8, Math.min(top, vh - h2 - 8));
+        top = Math.max(8, Math.min(top + skid, vh - h2 - 8));
       }
       const originX = resolvedSide === "right" ? "left" : resolvedSide === "left" ? "right" : align === "start" ? "left" : align === "end" ? "right" : "center";
       const originY = resolvedSide === "bottom" ? "top" : resolvedSide === "top" ? "bottom" : align === "start" ? "top" : align === "end" ? "bottom" : "center";
       return {
         top: `${top}px`,
         left: `${left}px`,
-        transformOrigin: `${originY} ${originX}`
+        transformOrigin: `${originX} ${originY}`
       };
     });
     let leaveTimer = null;
@@ -887,77 +902,85 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         leaveTimer = null;
       }
     };
-    const handleTriggerClick = (e) => {
-      if (props.trigger !== "click" || props.disabled) return;
-      e.stopPropagation();
-      if (!show.value) {
-        anchorRect.value = getAnchorRect();
-        show.value = true;
-      } else {
-        show.value = false;
+    const clearShowTimer = () => {
+      if (showTimer) {
+        clearTimeout(showTimer);
+        showTimer = null;
       }
     };
+    const handleTriggerClick = () => {
+      if (props.trigger !== "click") return;
+      virtualRect.value = null;
+      setVisible(!visible.value);
+    };
     const handleMouseEnter = () => {
       if (props.trigger !== "hover" || props.disabled) return;
       clearLeaveTimer();
-      showTimer = setTimeout(() => {
-        anchorRect.value = getAnchorRect();
-        show.value = true;
-      }, 400);
+      showTimer = setTimeout(() => setVisible(true), 400);
     };
     const handleMouseLeave = () => {
       if (props.trigger !== "hover") return;
-      if (showTimer) {
-        clearTimeout(showTimer);
-        showTimer = null;
-      }
-      leaveTimer = setTimeout(() => {
-        show.value = false;
-      }, 400);
+      clearShowTimer();
+      leaveTimer = setTimeout(() => setVisible(false), 400);
     };
-    const handleWindowClick = () => {
-      if (props.trigger !== "click" || !show.value) return;
-      show.value = false;
+    const handleDocumentClick = (e) => {
+      var _a, _b;
+      if (!visible.value) return;
+      const canClose = props.trigger === "click" || props.trigger === "manual" && props.closeOnClickOutside;
+      if (!canClose) return;
+      const target = e.target;
+      if (target && (((_a = triggerRef.value) == null ? void 0 : _a.contains(target)) || ((_b = dropdownRef.value) == null ? void 0 : _b.contains(target)))) return;
+      setVisible(false);
     };
     const handleOptionClick = (option) => {
       if (option.disabled) return;
       if (props.multiple) {
         const keys = [...selectedKeys.value];
         const index = keys.indexOf(option.key);
-        if (index > -1) {
-          keys.splice(index, 1);
-        } else {
-          keys.push(option.key);
-        }
+        if (index > -1) keys.splice(index, 1);
+        else keys.push(option.key);
         selectedKeys.value = keys;
       }
       emit("select", option.key, option);
-      if (!props.multiple && !option.children) {
-        show.value = false;
-      }
-    };
-    const isSelected = (key) => {
-      return props.multiple && selectedKeys.value.includes(key);
+      if (!props.multiple && !option.children) setVisible(false);
     };
-    watch(show, (val) => __async(null, null, function* () {
-      var _a, _b;
+    const isSelected = (key) => props.multiple && selectedKeys.value.includes(key);
+    watch(visible, (val) => __async(null, null, function* () {
       if (val) {
         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;
+        measure();
         emit("show");
       } else {
         dropdownHeight.value = 0;
         dropdownWidth.value = 0;
+        virtualRect.value = null;
         emit("hide");
       }
     }));
+    const onEnter = () => measure();
+    useResizeObserver(dropdownRef, () => {
+      if (visible.value) measure();
+    });
+    useEventListener(window, "scroll", updatePosition, { capture: true, passive: true });
+    useEventListener(window, "resize", updatePosition, { passive: true });
+    useEventListener(document, "click", handleDocumentClick);
     onUnmounted(() => {
       clearLeaveTimer();
-      if (showTimer) clearTimeout(showTimer);
+      clearShowTimer();
     });
-    useEventListener(window, "click", handleWindowClick);
+    const open = () => {
+      virtualRect.value = null;
+      setVisible(true);
+    };
+    const close = () => setVisible(false);
+    const toggle = () => setVisible(!visible.value);
+    const showAt = (x, y) => {
+      virtualRect.value = new DOMRect(x, y, 0, 0);
+      if (visible.value) updatePosition();
+      else setVisible(true);
+    };
+    __expose({ open, close, toggle, showAt, updatePosition, visible });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "triggerRef",
@@ -969,18 +992,19 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
-          createVNode(Transition, { name: "f-dropdown-motion" }, {
+          createVNode(Transition, {
+            name: "f-dropdown-motion",
+            onEnter
+          }, {
             default: withCtx(() => [
-              unref(show) ? (openBlock(), createElementBlock("div", {
+              unref(visible) ? (openBlock(), createElementBlock("div", {
                 key: 0,
                 ref_key: "dropdownRef",
                 ref: dropdownRef,
                 class: "f-dropdown-item",
                 style: normalizeStyle([unref(dropdownStyle), { zIndex: _ctx.zIndex }]),
                 onMouseenter: clearLeaveTimer,
-                onMouseleave: handleMouseLeave,
-                onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-                }, ["stop"]))
+                onMouseleave: handleMouseLeave
               }, [
                 _ctx.trigger === "hover" ? (openBlock(), createElementBlock("div", {
                   key: 0,
@@ -1025,7 +1049,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const FDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-4f7ae74f"]]);
+const FDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-c46e9d1e"]]);
 const _hoisted_1$D = {
   key: 0,
   class: "f-tag__dot"

package/dist/fantasia-ui.umd.js

@@ -772,63 +772,78 @@ var __async = (__this, __arguments, generator) => {
       disabled: { type: Boolean, default: false },
       multiple: { type: Boolean, default: false },
       modelValue: { default: () => [] },
-      maxHeight: { default: "300px" }
+      maxHeight: { default: "300px" },
+      show: { type: Boolean, default: void 0 },
+      closeOnClickOutside: { type: Boolean, default: false }
     },
-    emits: ["select", "show", "hide", "update:modelValue"],
-    setup(__props, { emit: __emit }) {
+    emits: ["select", "show", "hide", "update:modelValue", "update:show"],
+    setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
       const selectedKeys = vue.computed({
         get: () => props.modelValue || [],
         set: (val) => emit("update:modelValue", val)
       });
-      const show = vue.ref(false);
+      const innerVisible = vue.ref(false);
+      const visible = vue.computed(
+        () => props.show !== void 0 ? !!props.show : innerVisible.value
+      );
+      const setVisible = (v) => {
+        if (v && props.disabled) return;
+        if (v === visible.value) return;
+        innerVisible.value = v;
+        emit("update:show", v);
+      };
       const anchorRect = vue.ref(null);
+      const virtualRect = vue.ref(null);
       const triggerRef = vue.ref(null);
       const dropdownRef = vue.ref(null);
       const dropdownHeight = vue.ref(0);
       const dropdownWidth = vue.ref(0);
       const getAnchorRect = () => {
         var _a;
+        if (virtualRect.value) return virtualRect.value;
         const root = triggerRef.value;
         if (!root) return null;
         const el = (_a = root.firstElementChild) != null ? _a : root;
         return el.getBoundingClientRect();
       };
+      const measure = () => {
+        const el = dropdownRef.value;
+        if (!el) return;
+        dropdownWidth.value = el.offsetWidth;
+        dropdownHeight.value = el.offsetHeight;
+      };
+      const updatePosition = () => {
+        if (!visible.value) return;
+        anchorRect.value = getAnchorRect();
+        measure();
+      };
+      const normalizedOffset = vue.computed(() => {
+        var _a, _b;
+        const o = props.offset;
+        return Array.isArray(o) ? { gap: (_a = o[0]) != null ? _a : 0, skid: (_b = o[1]) != null ? _b : 0 } : { gap: o, skid: 0 };
+      });
       const bridgeStyle = vue.computed(() => {
         const [side] = props.placement.split("-");
-        const gap = Array.isArray(props.offset) ? props.offset[0] : props.offset;
-        const size = gap + 4;
+        const size = normalizedOffset.value.gap + 4;
         const styles = { position: "absolute" };
         if (side === "right") {
-          styles.width = `${size}px`;
-          styles.left = `-${size}px`;
-          styles.top = 0;
-          styles.bottom = 0;
+          Object.assign(styles, { width: `${size}px`, left: `-${size}px`, top: 0, bottom: 0 });
         } else if (side === "left") {
-          styles.width = `${size}px`;
-          styles.right = `-${size}px`;
-          styles.top = 0;
-          styles.bottom = 0;
+          Object.assign(styles, { width: `${size}px`, right: `-${size}px`, top: 0, bottom: 0 });
         } else if (side === "bottom") {
-          styles.height = `${size}px`;
-          styles.top = `-${size}px`;
-          styles.left = 0;
-          styles.right = 0;
+          Object.assign(styles, { height: `${size}px`, top: `-${size}px`, left: 0, right: 0 });
         } else if (side === "top") {
-          styles.height = `${size}px`;
-          styles.bottom = `-${size}px`;
-          styles.left = 0;
-          styles.right = 0;
+          Object.assign(styles, { height: `${size}px`, bottom: `-${size}px`, left: 0, right: 0 });
         }
         return styles;
       });
       const dropdownStyle = vue.computed(() => {
         if (!anchorRect.value) return {};
         const rect = anchorRect.value;
-        const { placement } = props;
-        const gap = Array.isArray(props.offset) ? props.offset[0] : props.offset;
-        const [side, align] = placement.split("-");
+        const { gap, skid } = normalizedOffset.value;
+        const [side, align] = props.placement.split("-");
         const vw = window.innerWidth;
         const vh = window.innerHeight;
         const w = dropdownWidth.value || 160;
@@ -865,19 +880,19 @@ var __async = (__this, __arguments, generator) => {
           if (align === "start") left = rect.left;
           else if (align === "end") left = rect.right - w;
           else left = rect.left + (rect.width - w) / 2;
-          left = Math.max(8, Math.min(left, vw - w - 8));
+          left = Math.max(8, Math.min(left + skid, vw - w - 8));
         } else {
           if (align === "start") top = rect.top;
           else if (align === "end") top = rect.bottom - h;
           else top = rect.top + (rect.height - h) / 2;
-          top = Math.max(8, Math.min(top, vh - h - 8));
+          top = Math.max(8, Math.min(top + skid, vh - h - 8));
         }
         const originX = resolvedSide === "right" ? "left" : resolvedSide === "left" ? "right" : align === "start" ? "left" : align === "end" ? "right" : "center";
         const originY = resolvedSide === "bottom" ? "top" : resolvedSide === "top" ? "bottom" : align === "start" ? "top" : align === "end" ? "bottom" : "center";
         return {
           top: `${top}px`,
           left: `${left}px`,
-          transformOrigin: `${originY} ${originX}`
+          transformOrigin: `${originX} ${originY}`
         };
       });
       let leaveTimer = null;
@@ -888,77 +903,85 @@ var __async = (__this, __arguments, generator) => {
           leaveTimer = null;
         }
       };
-      const handleTriggerClick = (e) => {
-        if (props.trigger !== "click" || props.disabled) return;
-        e.stopPropagation();
-        if (!show.value) {
-          anchorRect.value = getAnchorRect();
-          show.value = true;
-        } else {
-          show.value = false;
+      const clearShowTimer = () => {
+        if (showTimer) {
+          clearTimeout(showTimer);
+          showTimer = null;
         }
       };
+      const handleTriggerClick = () => {
+        if (props.trigger !== "click") return;
+        virtualRect.value = null;
+        setVisible(!visible.value);
+      };
       const handleMouseEnter = () => {
         if (props.trigger !== "hover" || props.disabled) return;
         clearLeaveTimer();
-        showTimer = setTimeout(() => {
-          anchorRect.value = getAnchorRect();
-          show.value = true;
-        }, 400);
+        showTimer = setTimeout(() => setVisible(true), 400);
       };
       const handleMouseLeave = () => {
         if (props.trigger !== "hover") return;
-        if (showTimer) {
-          clearTimeout(showTimer);
-          showTimer = null;
-        }
-        leaveTimer = setTimeout(() => {
-          show.value = false;
-        }, 400);
+        clearShowTimer();
+        leaveTimer = setTimeout(() => setVisible(false), 400);
       };
-      const handleWindowClick = () => {
-        if (props.trigger !== "click" || !show.value) return;
-        show.value = false;
+      const handleDocumentClick = (e) => {
+        var _a, _b;
+        if (!visible.value) return;
+        const canClose = props.trigger === "click" || props.trigger === "manual" && props.closeOnClickOutside;
+        if (!canClose) return;
+        const target = e.target;
+        if (target && (((_a = triggerRef.value) == null ? void 0 : _a.contains(target)) || ((_b = dropdownRef.value) == null ? void 0 : _b.contains(target)))) return;
+        setVisible(false);
       };
       const handleOptionClick = (option) => {
         if (option.disabled) return;
         if (props.multiple) {
           const keys = [...selectedKeys.value];
           const index = keys.indexOf(option.key);
-          if (index > -1) {
-            keys.splice(index, 1);
-          } else {
-            keys.push(option.key);
-          }
+          if (index > -1) keys.splice(index, 1);
+          else keys.push(option.key);
           selectedKeys.value = keys;
         }
         emit("select", option.key, option);
-        if (!props.multiple && !option.children) {
-          show.value = false;
-        }
-      };
-      const isSelected = (key) => {
-        return props.multiple && selectedKeys.value.includes(key);
+        if (!props.multiple && !option.children) setVisible(false);
       };
-      vue.watch(show, (val) => __async(null, null, function* () {
-        var _a, _b;
+      const isSelected = (key) => props.multiple && selectedKeys.value.includes(key);
+      vue.watch(visible, (val) => __async(null, null, function* () {
         if (val) {
           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;
+          measure();
           emit("show");
         } else {
           dropdownHeight.value = 0;
           dropdownWidth.value = 0;
+          virtualRect.value = null;
           emit("hide");
         }
       }));
+      const onEnter = () => measure();
+      core.useResizeObserver(dropdownRef, () => {
+        if (visible.value) measure();
+      });
+      core.useEventListener(window, "scroll", updatePosition, { capture: true, passive: true });
+      core.useEventListener(window, "resize", updatePosition, { passive: true });
+      core.useEventListener(document, "click", handleDocumentClick);
       vue.onUnmounted(() => {
         clearLeaveTimer();
-        if (showTimer) clearTimeout(showTimer);
+        clearShowTimer();
       });
-      core.useEventListener(window, "click", handleWindowClick);
+      const open = () => {
+        virtualRect.value = null;
+        setVisible(true);
+      };
+      const close = () => setVisible(false);
+      const toggle = () => setVisible(!visible.value);
+      const showAt = (x, y) => {
+        virtualRect.value = new DOMRect(x, y, 0, 0);
+        if (visible.value) updatePosition();
+        else setVisible(true);
+      };
+      __expose({ open, close, toggle, showAt, updatePosition, visible });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           ref_key: "triggerRef",
@@ -970,18 +993,19 @@ var __async = (__this, __arguments, generator) => {
         }, [
           vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-            vue.createVNode(vue.Transition, { name: "f-dropdown-motion" }, {
+            vue.createVNode(vue.Transition, {
+              name: "f-dropdown-motion",
+              onEnter
+            }, {
               default: vue.withCtx(() => [
-                vue.unref(show) ? (vue.openBlock(), vue.createElementBlock("div", {
+                vue.unref(visible) ? (vue.openBlock(), vue.createElementBlock("div", {
                   key: 0,
                   ref_key: "dropdownRef",
                   ref: dropdownRef,
                   class: "f-dropdown-item",
                   style: vue.normalizeStyle([vue.unref(dropdownStyle), { zIndex: _ctx.zIndex }]),
                   onMouseenter: clearLeaveTimer,
-                  onMouseleave: handleMouseLeave,
-                  onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
-                  }, ["stop"]))
+                  onMouseleave: handleMouseLeave
                 }, [
                   _ctx.trigger === "hover" ? (vue.openBlock(), vue.createElementBlock("div", {
                     key: 0,
@@ -1026,7 +1050,7 @@ var __async = (__this, __arguments, generator) => {
       };
     }
   });
-  const FDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-4f7ae74f"]]);
+  const FDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-c46e9d1e"]]);
   const _hoisted_1$D = {
     key: 0,
     class: "f-tag__dot"

package/dist/types/packages/components/modules/FDialog.vue.d.ts

@@ -23,13 +23,13 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     width: string | number;
     type: import("../../types/components").FDialogType;
     title: string;
+    closeOnClickOutside: boolean;
     content: string;
     confirmText: string;
     cancelText: string;
     showCancel: boolean;
     showClose: boolean;
     divider: boolean;
-    closeOnClickOutside: boolean;
     closeOnEsc: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/types/packages/components/modules/FDrawer.vue.d.ts

@@ -19,8 +19,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     onClose?: () => any;
 }>, {
     placement: import("../../types/components").FDrawerPlacement;
-    showClose: boolean;
     closeOnClickOutside: boolean;
+    showClose: boolean;
     lockScroll: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/types/packages/components/modules/FDropdown.vue.d.ts

@@ -1,22 +1,31 @@
 import type { FDropdownProps, FDropdownOption } from '../../types';
-declare var __VLS_1: {}, __VLS_21: {}, __VLS_23: {};
+declare var __VLS_1: {}, __VLS_25: {}, __VLS_27: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    content?: (props: typeof __VLS_21) => any;
+    content?: (props: typeof __VLS_25) => any;
 } & {
-    footer?: (props: typeof __VLS_23) => any;
+    footer?: (props: typeof __VLS_27) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<FDropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<FDropdownProps, {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    showAt: (x: number, y: number) => void;
+    updatePosition: () => void;
+    visible: globalThis.ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (key: string | number, option: FDropdownOption) => any;
     "update:modelValue": (value: (string | number)[]) => any;
     show: () => any;
     hide: () => any;
+    "update:show": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<FDropdownProps> & Readonly<{
     onSelect?: (key: string | number, option: FDropdownOption) => any;
     "onUpdate:modelValue"?: (value: (string | number)[]) => any;
     onShow?: () => any;
     onHide?: () => any;
+    "onUpdate:show"?: (value: boolean) => any;
 }>, {
     disabled: boolean;
     modelValue: (string | number)[];
@@ -24,9 +33,11 @@ declare const __VLS_component: import("vue").DefineComponent<FDropdownProps, {},
     placement: import("../../types").Placement;
     offset: number | [number, number];
     zIndex: number;
-    trigger: "hover" | "click";
+    trigger: "hover" | "click" | "manual";
     options: FDropdownOption[];
     multiple: boolean;
+    show: boolean;
+    closeOnClickOutside: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/types/packages/types/components/modules/f-dropdown.d.ts

@@ -20,7 +20,7 @@ interface FDropdownProps {
     /** 下拉菜单层级 @default 2000 */
     zIndex?: number;
     /** 触发方式 @default 'hover' */
-    trigger?: 'hover' | 'click';
+    trigger?: 'hover' | 'click' | 'manual';
     /** 下拉选项列表 */
     options?: FDropdownOption[];
     /** 是否禁用 @default false */
@@ -31,5 +31,7 @@ interface FDropdownProps {
     modelValue?: (string | number)[];
     /** 下拉菜单最大高度 @default '300px' */
     maxHeight?: string;
+    show?: boolean;
+    closeOnClickOutside?: boolean;
 }
 export type { FDropdownProps, FDropdownOption };

package/package.json

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