@oneflowui/ui 0.5.6 → 0.5.8

package/dist/components/gallery/GalleryCard.vue.d.ts

@@ -6,5 +6,5 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     click: (item: GalleryItem) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((item: GalleryItem) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 export default _default;

package/dist/components/gallery/GalleryCard.vue.js

@@ -1,7 +1,7 @@
 import o from "./GalleryCard.vue2.js";
 /* empty css                 */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-38d1e761"]]);
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-e54afcc3"]]);
 export {
-  m as default
+  e as default
 };

package/dist/components/gallery/GalleryCard.vue2.js

@@ -35,8 +35,9 @@ const V = ["src"], z = { class: "gallery-card__body" }, A = { class: "gallery-ca
       blocked: "var(--of-color-warning)",
       done: "var(--of-color-success)"
     }, h = i(() => b[a.item.status] ?? "var(--of-color-gray-400)");
-    return (s, e) => (r(), l("div", {
+    return (s, e) => (r(), l("button", {
       class: "gallery-card",
+      type: "button",
       onClick: e[0] || (e[0] = (n) => m("click", o.item))
     }, [
       p.value ? (r(), l("img", {

package/dist/components/kanban/KanbanCard.vue.d.ts

@@ -18,6 +18,8 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((task: Task) => any) | undefined;
 }>, {
+    priorityColorMap: ColorMap;
+    statusColorMap: ColorMap;
     dragging: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 export default _default;

package/dist/components/kanban/KanbanCard.vue.js

@@ -1,7 +1,7 @@
 import a from "./KanbanCard.vue2.js";
 /* empty css                */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ o(a, [["__scopeId", "data-v-28da7aba"]]);
+const p = /* @__PURE__ */ o(a, [["__scopeId", "data-v-560dac24"]]);
 export {
   p as default
 };

package/dist/components/kanban/KanbanCard.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as A, computed as e, openBlock as r, createElementBlock as i, normalizeClass as T, createElementVNode as s, toDisplayString as l, createCommentVNode as f, normalizeStyle as m } from "vue";
+import { defineComponent as A, computed as a, openBlock as r, createElementBlock as i, normalizeClass as T, createElementVNode as s, toDisplayString as l, createCommentVNode as f, normalizeStyle as m } from "vue";
 import { resolveBadge as p, mergeColorMap as g, DEFAULT_PRIORITY_MAP as _, DEFAULT_STATUS_MAP as S } from "../../composables/useBadge.js";
 const h = { class: "of-card-title" }, B = { class: "of-card-meta" }, E = { class: "of-card-id" }, L = {
   key: 0,
@@ -11,32 +11,33 @@ const h = { class: "of-card-title" }, B = { class: "of-card-meta" }, E = { class
   props: {
     task: {},
     dragging: { type: Boolean, default: !1 },
-    priorityColorMap: {},
-    statusColorMap: {}
+    priorityColorMap: { default: void 0 },
+    statusColorMap: { default: void 0 }
   },
   emits: ["click"],
-  setup(a, { emit: k }) {
-    const o = a, v = k, c = e(
+  setup(e, { emit: k }) {
+    const o = e, v = k, c = a(
       () => p(o.task.priority, g(_, o.priorityColorMap))
-    ), d = e(
+    ), d = a(
       () => p(o.task.status, g(S, o.statusColorMap))
-    ), y = e(() => c.value.style), b = e(() => d.value.style), C = e(() => d.value.label), D = e(() => c.value.label);
+    ), y = a(() => c.value.style), b = a(() => d.value.style), C = a(() => d.value.label), D = a(() => c.value.label);
     function M(n) {
       if (!n) return "";
       const t = new Date(n);
       return isNaN(t.getTime()) ? n : `${t.getMonth() + 1}/${t.getDate()}`;
     }
-    const u = e(() => M(o.task.updatedAt ?? o.task.endDate));
-    return (n, t) => (r(), i("div", {
-      class: T(["of-kanban-card", { "of-kanban-card--dragging": a.dragging }]),
-      onClick: t[0] || (t[0] = (U) => v("click", a.task))
+    const u = a(() => M(o.task.updatedAt ?? o.task.endDate));
+    return (n, t) => (r(), i("button", {
+      class: T(["of-kanban-card", { "of-kanban-card--dragging": e.dragging }]),
+      type: "button",
+      onClick: t[0] || (t[0] = (U) => v("click", e.task))
     }, [
-      s("div", h, l(a.task.title), 1),
+      s("div", h, l(e.task.title), 1),
       s("div", B, [
-        s("span", E, l(a.task.id), 1),
+        s("span", E, l(e.task.id), 1),
         u.value ? (r(), i("span", L, l(u.value), 1)) : f("", !0),
         t[1] || (t[1] = s("span", { class: "of-card-spacer" }, null, -1)),
-        a.task.role ? (r(), i("span", N, l(a.task.role), 1)) : f("", !0)
+        e.task.role ? (r(), i("span", N, l(e.task.role), 1)) : f("", !0)
       ]),
       s("div", P, [
         s("span", {

package/dist/components/kanban/KanbanColumn.vue.d.ts

@@ -20,6 +20,8 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     "onAdd-card"?: ((columnId: string) => any) | undefined;
     "onUpdate:column"?: ((column: KanbanColumnData) => any) | undefined;
 }>, {
+    priorityColorMap: ColorMap;
+    statusColorMap: ColorMap;
     ghostClass: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     cardContainerRef: HTMLDivElement;

package/dist/components/kanban/KanbanColumn.vue.js

@@ -1,7 +1,7 @@
 import o from "./KanbanColumn.vue2.js";
 /* empty css                  */
 import a from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ a(o, [["__scopeId", "data-v-b930d0ab"]]);
+const f = /* @__PURE__ */ a(o, [["__scopeId", "data-v-f34d289a"]]);
 export {
-  p as default
+  f as default
 };

package/dist/components/kanban/KanbanColumn.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as D, ref as k, watch as v, computed as C, openBlock as r, createElementBlock as d, createElementVNode as n, normalizeStyle as m, toDisplayString as y, createVNode as E, unref as c, createBlock as f, withCtx as H, Fragment as h, renderList as b } from "vue";
+import { defineComponent as D, ref as g, watch as k, computed as C, openBlock as r, createElementBlock as d, createElementVNode as n, normalizeStyle as m, toDisplayString as y, createVNode as E, unref as c, createBlock as f, withCtx as H, Fragment as h, renderList as b } from "vue";
 import { Plus as L } from "lucide-vue-next";
 import { VueDraggable as R } from "vue-draggable-plus";
 import { useVirtualList as U } from "../../composables/useVirtualList.js";
@@ -9,24 +9,24 @@ const z = { class: "of-kanban-column" }, F = { class: "of-col-header" }, I = { c
   props: {
     column: {},
     ghostClass: { default: "of-ghost" },
-    priorityColorMap: {},
-    statusColorMap: {}
+    priorityColorMap: { default: void 0 },
+    statusColorMap: { default: void 0 }
   },
   emits: ["add-card", "card-click", "update:column"],
   setup(i, { emit: x }) {
-    const a = i, u = x, l = k([...a.column.tasks]);
-    v(
+    const a = i, u = x, l = g([...a.column.tasks]);
+    k(
       () => a.column.tasks,
       (s) => {
         s.length === l.value.length && s.every((o, e) => {
-          var g;
-          return o.id === ((g = l.value[e]) == null ? void 0 : g.id);
+          var v;
+          return o.id === ((v = l.value[e]) == null ? void 0 : v.id);
         }) || (l.value = [...s]);
       }
-    ), v(l, (s) => {
+    ), k(l, (s) => {
       u("update:column", { ...a.column, tasks: s });
     });
-    const S = C(() => l.value.length > 50), p = k(null), {
+    const S = C(() => l.value.length > 50), p = g(null), {
       visibleItems: T,
       totalHeight: M,
       offsetY: A

package/dist/components/kanban/QuickAddRow.vue.js

@@ -1,7 +1,7 @@
 import o from "./QuickAddRow.vue2.js";
 /* empty css                 */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-5ebea11d"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-47c0eb81"]]);
 export {
-  e as default
+  p as default
 };

package/dist/components/kanban/QuickAddRow.vue2.js

@@ -1,39 +1,40 @@
-import { defineComponent as v, ref as a, openBlock as c, createElementBlock as i, createVNode as h, unref as y, createElementVNode as _, toDisplayString as x, withDirectives as q, vModelText as w, nextTick as E } from "vue";
-import { Plus as B } from "lucide-vue-next";
-const V = { class: "of-quick-add" }, b = { class: "of-quick-add-placeholder" }, g = ["placeholder"], C = /* @__PURE__ */ v({
+import { defineComponent as v, ref as o, openBlock as c, createElementBlock as i, createVNode as h, unref as y, createElementVNode as _, toDisplayString as x, withDirectives as q, vModelText as w, nextTick as E } from "vue";
+import { Plus as b } from "lucide-vue-next";
+const B = { class: "of-quick-add" }, V = { class: "of-quick-add-placeholder" }, g = ["placeholder"], C = /* @__PURE__ */ v({
   __name: "QuickAddRow",
   props: {
     placeholder: { default: "快速创建任务，按 Enter 提交" }
   },
   emits: ["submit", "cancel"],
   setup(u, { emit: r }) {
-    const s = r, n = a(!1), e = a(""), d = a(null);
+    const s = r, a = o(!1), e = o(""), d = o(null);
     async function f() {
       var t;
-      n.value = !0, await E(), (t = d.value) == null || t.focus();
+      a.value = !0, await E(), (t = d.value) == null || t.focus();
     }
-    function o() {
-      n.value = !1, e.value = "";
+    function n() {
+      a.value = !1, e.value = "";
     }
     function p(t) {
       if (t.key === "Enter") {
         const l = e.value.trim();
-        l && (s("submit", l), e.value = "", o());
-      } else t.key === "Escape" && (s("cancel"), o());
+        l && (s("submit", l), e.value = "", n());
+      } else t.key === "Escape" && (s("cancel"), n());
     }
     function m() {
       setTimeout(() => {
-        e.value.trim() || o();
+        e.value.trim() || n();
       }, 150);
     }
-    return (t, l) => (c(), i("div", V, [
-      n.value ? q((c(), i("input", {
+    return (t, l) => (c(), i("div", B, [
+      a.value ? q((c(), i("input", {
         key: 1,
         ref_key: "inputRef",
         ref: d,
         "onUpdate:modelValue": l[0] || (l[0] = (k) => e.value = k),
         type: "text",
         class: "of-quick-add-input",
+        "aria-label": "快速创建任务",
         placeholder: u.placeholder,
         onKeydown: p,
         onBlur: m
@@ -44,11 +45,11 @@ const V = { class: "of-quick-add" }, b = { class: "of-quick-add-placeholder" },
         class: "of-quick-add-trigger",
         onClick: f
       }, [
-        h(y(B), {
+        h(y(b), {
           size: 14,
           class: "of-quick-add-icon"
         }),
-        _("span", b, x(u.placeholder), 1)
+        _("span", V, x(u.placeholder), 1)
       ]))
     ]));
   }

package/dist/components/layout/Navbar.vue.js

@@ -1,7 +1,7 @@
 import o from "./Navbar.vue2.js";
 /* empty css            */
-import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-7187692f"]]);
+import a from "../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ a(o, [["__scopeId", "data-v-ed7a40bd"]]);
 export {
-  m as default
+  p as default
 };

package/dist/components/layout/Navbar.vue2.js

@@ -12,17 +12,17 @@ const z = { class: "of-navbar__left" }, B = { class: "of-navbar__center" }, U =
   },
   emits: ["search", "notify-click", "avatar-click"],
   setup(t, { emit: v }) {
-    const e = C("density"), _ = l(() => (e == null ? void 0 : e.value) ?? "comfortable"), c = t, n = v, h = l(
+    const c = t, e = v, n = C("density"), _ = l(() => (n == null ? void 0 : n.value) ?? "comfortable"), h = l(
       () => c.username ? c.username.charAt(0).toUpperCase() : "U"
     );
     function m(o) {
-      n("search", o.target.value);
+      e("search", o.target.value);
     }
     function b() {
-      n("notify-click");
+      e("notify-click");
     }
     function y() {
-      n("avatar-click");
+      e("avatar-click");
     }
     return (o, s) => (r(), i("nav", {
       class: k(["of-navbar", { "of-navbar--compact": _.value === "compact" }])
@@ -41,6 +41,7 @@ const z = { class: "of-navbar__left" }, B = { class: "of-navbar__center" }, U =
           a("input", {
             class: "of-navbar__search-input",
             type: "text",
+            "aria-label": "搜索",
             placeholder: t.searchPlaceholder,
             onInput: m
           }, null, 40, V)

package/dist/components/layout/Sidebar.vue.js

@@ -1,7 +1,7 @@
 import o from "./Sidebar.vue2.js";
 /* empty css             */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-9dd6ae54"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-9ea7f9dc"]]);
 export {
-  e as default
+  f as default
 };

package/dist/components/layout/Sidebar.vue2.js

@@ -23,7 +23,7 @@ const N = {
   },
   emits: ["item-click"],
   setup(g, { emit: y }) {
-    const l = E("density"), C = S(() => (l == null ? void 0 : l.value) ?? "comfortable"), v = y, i = B(/* @__PURE__ */ new Set());
+    const v = y, l = E("density"), C = S(() => (l == null ? void 0 : l.value) ?? "comfortable"), i = B(/* @__PURE__ */ new Set());
     function $(e) {
       i.value.has(e.id) ? i.value.delete(e.id) : i.value.add(e.id);
     }

package/dist/components/mermaid/MermaidChart.vue.js

@@ -1,7 +1,7 @@
 import o from "./MermaidChart.vue2.js";
 /* empty css                  */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-2947d038"]]);
+const c = /* @__PURE__ */ r(o, [["__scopeId", "data-v-cc130f1a"]]);
 export {
-  p as default
+  c as default
 };

package/dist/components/mermaid/MermaidChart.vue2.js

@@ -5,7 +5,7 @@ const M = {
 }, C = {
   key: 1,
   class: "of-mermaid__error"
-}, L = { class: "of-mermaid__error-text" }, S = /* @__PURE__ */ p({
+}, L = { class: "of-mermaid__error-text" }, E = /* @__PURE__ */ p({
   __name: "MermaidChart",
   props: {
     code: {},
@@ -13,53 +13,53 @@ const M = {
     width: {}
   },
   setup(c) {
-    const t = c;
+    const r = c;
     let f = 0;
-    const _ = `of-mermaid-${Date.now()}-${f++}`, l = d(null), o = d(!0), a = d("");
+    const _ = `of-mermaid-${Date.now()}-${f++}`, l = d(null), o = d(!0), t = d("");
     async function m() {
-      var r;
-      if (!((r = t.code) != null && r.trim())) {
+      var a;
+      if (!((a = r.code) != null && a.trim())) {
         o.value = !1;
         return;
       }
-      o.value = !0, a.value = "";
+      o.value = !0, t.value = "";
       try {
         let e = window.mermaid;
         e || (e = (await import("mermaid")).default), e.initialize({
           startOnLoad: !1,
-          theme: t.theme || "default",
+          theme: r.theme || "default",
           securityLevel: "loose"
         }), await k();
-        const { svg: v } = await e.render(_, t.code);
+        const { svg: v } = await e.render(_, r.code);
         l.value && (l.value.innerHTML = v);
       } catch (e) {
-        a.value = (e == null ? void 0 : e.message) || "图表渲染失败，请检查 Mermaid 语法";
+        t.value = e instanceof Error ? e.message : "图表渲染失败，请检查 Mermaid 语法";
       } finally {
         o.value = !1;
       }
     }
     return h(() => m()), y(
-      () => [t.code, t.theme],
+      () => [r.code, r.theme],
       () => m()
-    ), (r, e) => (n(), i("div", {
+    ), (a, e) => (n(), i("div", {
       class: "of-mermaid",
-      style: g({ width: t.width || "100%" })
+      style: g({ width: r.width || "100%" })
     }, [
       o.value ? (n(), i("div", M, [
-        u(r.$slots, "loading", {}, () => [
+        u(a.$slots, "loading", {}, () => [
           e[0] || (e[0] = s("span", {
             class: "of-mermaid__spinner",
             "aria-hidden": "true"
           }, null, -1)),
           e[1] || (e[1] = s("span", { class: "of-mermaid__loading-text" }, "图表加载中...", -1))
         ], !0)
-      ])) : a.value ? (n(), i("div", C, [
-        u(r.$slots, "error", { message: a.value }, () => [
+      ])) : t.value ? (n(), i("div", C, [
+        u(a.$slots, "error", { message: t.value }, () => [
           e[2] || (e[2] = s("span", {
             class: "of-mermaid__error-icon",
             "aria-hidden": "true"
           }, "!", -1)),
-          s("span", L, w(a.value), 1)
+          s("span", L, w(t.value), 1)
         ], !0)
       ])) : (n(), i("div", {
         key: 2,
@@ -71,5 +71,5 @@ const M = {
   }
 });
 export {
-  S as default
+  E as default
 };

package/dist/components/overlay/Dialog.vue.d.ts

@@ -55,6 +55,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     title: string;
     type: "info" | "warning" | "danger" | "success";
     width: string;
+    content: string;
     loading: boolean;
     confirmText: string;
     cancelText: string;

package/dist/components/overlay/Dialog.vue.js

@@ -1,7 +1,7 @@
 import o from "./Dialog.vue2.js";
 /* empty css            */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-1b14e831"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-118545d6"]]);
 export {
   p as default
 };

package/dist/components/overlay/Dialog.vue2.js

@@ -1,15 +1,15 @@
-import { defineComponent as p, computed as d, openBlock as t, createBlock as c, withCtx as f, createElementVNode as o, normalizeClass as u, resolveDynamicComponent as v, toDisplayString as n, createElementBlock as r, createCommentVNode as s, renderSlot as x, unref as V, createTextVNode as w } from "vue";
+import { defineComponent as v, computed as i, openBlock as t, createBlock as c, withCtx as f, createElementVNode as o, normalizeClass as u, resolveDynamicComponent as p, toDisplayString as n, createElementBlock as r, createCommentVNode as s, renderSlot as x, unref as V, createTextVNode as w } from "vue";
 import { CheckCircle2 as B, AlertCircle as T, AlertTriangle as z, Info as D, Loader2 as N } from "lucide-vue-next";
 import A from "./Modal.vue.js";
 const E = { class: "of-dialog" }, I = { class: "of-dialog__content" }, M = { class: "of-dialog__title" }, S = {
   key: 0,
   class: "of-dialog__text"
-}, $ = ["disabled"], L = ["disabled"], G = /* @__PURE__ */ p({
+}, $ = ["disabled"], L = ["disabled"], G = /* @__PURE__ */ v({
   __name: "Dialog",
   props: {
     modelValue: { type: Boolean },
     title: { default: "提示" },
-    content: {},
+    content: { default: void 0 },
     confirmText: { default: "确认" },
     cancelText: { default: "取消" },
     type: { default: "info" },
@@ -24,11 +24,11 @@ const E = { class: "of-dialog" }, I = { class: "of-dialog__content" }, M = { cla
       warning: z,
       danger: T,
       success: B
-    }, h = d(() => `of-dialog__icon--${l.type}`), C = d(() => g[l.type]), b = d(
+    }, h = i(() => `of-dialog__icon--${l.type}`), C = i(() => g[l.type]), b = i(
       () => l.type === "danger" ? "of-dialog__btn--danger" : "of-dialog__btn--primary"
     );
-    function y(i) {
-      a("update:modelValue", i);
+    function y(d) {
+      a("update:modelValue", d);
     }
     function _() {
       l.loading || a("confirm");
@@ -36,7 +36,7 @@ const E = { class: "of-dialog" }, I = { class: "of-dialog__content" }, M = { cla
     function k() {
       a("cancel"), a("update:modelValue", !1);
     }
-    return (i, U) => (t(), c(A, {
+    return (d, U) => (t(), c(A, {
       "model-value": e.modelValue,
       width: e.width,
       closable: !1,
@@ -71,12 +71,12 @@ const E = { class: "of-dialog" }, I = { class: "of-dialog__content" }, M = { cla
           o("div", {
             class: u(["of-dialog__icon-wrap", h.value])
           }, [
-            (t(), c(v(C.value), { size: 28 }))
+            (t(), c(p(C.value), { size: 28 }))
           ], 2),
           o("div", I, [
             o("h3", M, n(e.title), 1),
             e.content ? (t(), r("p", S, n(e.content), 1)) : s("", !0),
-            x(i.$slots, "default", {}, void 0, !0)
+            x(d.$slots, "default", {}, void 0, !0)
           ])
         ])
       ]),

package/dist/components/overlay/Drawer.vue.d.ts

@@ -23,9 +23,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
+    title: string;
     width: number;
-    maskClosable: boolean;
     zIndex: number;
+    maskClosable: boolean;
     showClose: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     drawerRef: HTMLElement;

package/dist/components/overlay/Drawer.vue.js

@@ -1,7 +1,7 @@
 import o from "./Drawer.vue2.js";
 /* empty css            */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-cf8560a2"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-10de0e6f"]]);
 export {
-  m as default
+  f as default
 };

package/dist/components/overlay/Drawer.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as p, useSlots as V, computed as _, onMounted as B, watch as x, onBeforeUnmount as z, openBlock as o, createBlock as E, Teleport as S, createVNode as u, Transition as T, withCtx as $, createElementBlock as l, normalizeStyle as f, createElementVNode as d, withModifiers as I, unref as c, renderSlot as m, toDisplayString as N, createCommentVNode as n } from "vue";
-import { X as R } from "lucide-vue-next";
+import { defineComponent as _, useSlots as p, computed as V, onMounted as B, watch as x, onBeforeUnmount as z, openBlock as o, createBlock as E, Teleport as S, createVNode as u, Transition as T, withCtx as I, createElementBlock as a, normalizeStyle as c, createCommentVNode as l, createElementVNode as d, withModifiers as N, unref as f, renderSlot as m, toDisplayString as R } from "vue";
+import { X as $ } from "lucide-vue-next";
 import { useFocusTrap as g } from "../../composables/useFocusTrap.js";
 const D = ["aria-label"], L = { class: "of-drawer__inner" }, M = {
   key: 0,
@@ -7,50 +7,56 @@ const D = ["aria-label"], L = { class: "of-drawer__inner" }, M = {
 }, F = { class: "of-drawer__title" }, K = {
   key: 0,
   class: "of-drawer__title-text"
-}, U = { class: "of-drawer__body" }, G = /* @__PURE__ */ p({
+}, U = { class: "of-drawer__body" }, A = /* @__PURE__ */ _({
   __name: "Drawer",
   props: {
     modelValue: { type: Boolean },
     width: { default: 390 },
-    title: {},
+    title: { default: void 0 },
     showClose: { type: Boolean, default: !0 },
     maskClosable: { type: Boolean, default: !0 },
     zIndex: { default: 1e3 }
   },
   emits: ["update:modelValue"],
   setup(e, { emit: y }) {
-    const r = e, w = y, v = V(), h = _(() => ({
+    const r = e, w = y, h = p(), v = V(() => ({
       width: `${r.width}px`
     })), {
       containerRef: k,
-      activate: C,
-      deactivate: b
+      activate: b,
+      deactivate: C
     } = g();
-    function i() {
+    function n() {
       w("update:modelValue", !1);
     }
-    function s(t) {
-      t.key === "Escape" && r.modelValue && i();
+    function i(t) {
+      t.key === "Escape" && r.modelValue && n();
     }
     return B(() => {
-      typeof document > "u" || document.addEventListener("keydown", s);
+      typeof document > "u" || document.addEventListener("keydown", i);
     }), x(
       () => r.modelValue,
       (t) => {
-        typeof document > "u" || (document.body.style.overflow = t ? "hidden" : "", t ? C() : b());
+        typeof document > "u" || (document.body.style.overflow = t ? "hidden" : "", t ? b() : C());
       },
       { immediate: !0 }
     ), z(() => {
-      typeof document > "u" || (document.removeEventListener("keydown", s), document.body.style.overflow = "");
-    }), (t, a) => (o(), E(S, { to: "body" }, [
+      typeof document > "u" || (document.removeEventListener("keydown", i), document.body.style.overflow = "");
+    }), (t, s) => (o(), E(S, { to: "body" }, [
       u(T, { name: "of-drawer" }, {
-        default: $(() => [
-          e.modelValue ? (o(), l("div", {
+        default: I(() => [
+          e.modelValue ? (o(), a("div", {
             key: 0,
             class: "of-drawer-overlay",
-            style: f({ zIndex: e.zIndex }),
-            onClick: a[1] || (a[1] = (X) => e.maskClosable && i())
+            style: c({ zIndex: e.zIndex })
           }, [
+            e.maskClosable ? (o(), a("button", {
+              key: 0,
+              type: "button",
+              class: "of-drawer-overlay__hitarea",
+              "aria-label": "关闭抽屉",
+              onClick: n
+            })) : l("", !0),
             d("aside", {
               ref_key: "drawerRef",
               ref: k,
@@ -58,33 +64,33 @@ const D = ["aria-label"], L = { class: "of-drawer__inner" }, M = {
               role: "dialog",
               "aria-modal": "true",
               "aria-label": e.title,
-              style: f(h.value),
-              onClick: a[0] || (a[0] = I(() => {
+              style: c(v.value),
+              onClick: s[0] || (s[0] = N(() => {
               }, ["stop"]))
             }, [
               d("div", L, [
-                c(v).title || e.title || e.showClose ? (o(), l("div", M, [
+                f(h).title || e.title || e.showClose ? (o(), a("div", M, [
                   d("div", F, [
                     m(t.$slots, "title", {}, () => [
-                      e.title ? (o(), l("h3", K, N(e.title), 1)) : n("", !0)
+                      e.title ? (o(), a("h3", K, R(e.title), 1)) : l("", !0)
                     ], !0)
                   ]),
-                  e.showClose ? (o(), l("button", {
+                  e.showClose ? (o(), a("button", {
                     key: 0,
                     class: "of-drawer__close",
                     type: "button",
                     "aria-label": "关闭",
-                    onClick: i
+                    onClick: n
                   }, [
-                    u(c(R), { size: 18 })
-                  ])) : n("", !0)
-                ])) : n("", !0),
+                    u(f($), { size: 18 })
+                  ])) : l("", !0)
+                ])) : l("", !0),
                 d("div", U, [
                   m(t.$slots, "default", {}, void 0, !0)
                 ])
               ])
             ], 12, D)
-          ], 4)) : n("", !0)
+          ], 4)) : l("", !0)
         ]),
         _: 3
       })
@@ -92,5 +98,5 @@ const D = ["aria-label"], L = { class: "of-drawer__inner" }, M = {
   }
 });
 export {
-  G as default
+  A as default
 };