@oneflowui/ui 0.6.0 → 0.8.0

package/dist/components/detail/DetailLayout.vue.d.ts

@@ -1,10 +1,15 @@
 import { Task, CommentData, PropItem } from '../../types';
+type DetailLayoutState = "ready" | "loading" | "empty" | "error";
 type __VLS_Props = {
-    task: Task;
+    task?: Task | null;
+    title?: string;
     comments?: CommentData[];
     propItems?: PropItem[];
     descriptionContent?: string;
     descriptionEditable?: boolean;
+    state?: DetailLayoutState;
+    stateTitle?: string;
+    stateDescription?: string;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -12,6 +17,7 @@ declare function __VLS_template(): {
         meta?(_: {}): any;
         description?(_: {}): any;
         comments?(_: {}): any;
+        footer?(_: {}): any;
         props?(_: {}): any;
     };
     refs: {};
@@ -23,10 +29,15 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:descriptionContent"?: ((value: string) => any) | undefined;
 }>, {
+    title: string;
+    task: Task | null;
     comments: CommentData[];
     propItems: PropItem[];
     descriptionContent: string;
     descriptionEditable: boolean;
+    state: DetailLayoutState;
+    stateTitle: string;
+    stateDescription: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/detail/DetailLayout.vue.js

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

package/dist/components/detail/DetailLayout.vue2.js

@@ -1,34 +1,48 @@
-import { defineComponent as h, computed as d, openBlock as s, createElementBlock as a, createElementVNode as e, toDisplayString as i, Fragment as g, normalizeStyle as v, createCommentVNode as r, renderSlot as c, createVNode as C, unref as B, renderList as P, createBlock as b } from "vue";
-import I from "./PropPanel.vue.js";
-import S from "./CommentItem.vue.js";
-import $ from "../editor/ContentBlock.vue.js";
-const E = { class: "detail-layout" }, D = { class: "detail-layout__main" }, L = { class: "detail-layout__title" }, N = { class: "detail-layout__meta" }, V = {
+import { defineComponent as T, computed as s, openBlock as o, createElementBlock as r, createElementVNode as a, toDisplayString as i, Fragment as c, normalizeStyle as k, createCommentVNode as n, renderSlot as d, createBlock as p, resolveDynamicComponent as E, createVNode as N, unref as V, renderList as z } from "vue";
+import { Loader2 as A, AlertCircle as M, Inbox as R } from "lucide-vue-next";
+import U from "./PropPanel.vue.js";
+import F from "./CommentItem.vue.js";
+import j from "../editor/ContentBlock.vue.js";
+const q = { class: "detail-layout" }, w = { class: "detail-layout__main" }, G = { class: "detail-layout__title" }, H = { class: "detail-layout__meta" }, J = {
   key: 0,
   class: "detail-layout__badge detail-layout__badge--role"
-}, M = {
+}, K = {
   key: 1,
   class: "detail-layout__meta-text"
-}, U = { class: "detail-layout__section" }, z = { class: "detail-layout__description" }, F = {
+}, O = ["data-role"], Q = { class: "detail-layout__state-copy" }, W = { class: "detail-layout__state-title" }, X = { class: "detail-layout__state-description" }, Y = { class: "detail-layout__section" }, Z = { class: "detail-layout__description" }, tt = {
   key: 0,
   class: "detail-layout__desc-placeholder"
-}, T = { class: "detail-layout__section" }, j = { class: "detail-layout__comments" }, q = {
+}, et = { class: "detail-layout__section" }, ot = { class: "detail-layout__comments" }, at = {
   key: 0,
   class: "detail-layout__comment-list"
-}, w = {
+}, st = {
   key: 1,
   class: "detail-layout__empty-hint"
-}, A = { class: "detail-layout__sidebar" }, O = /* @__PURE__ */ h({
+}, rt = {
+  key: 0,
+  class: "detail-layout__footer"
+}, lt = {
+  key: 0,
+  class: "detail-layout__sidebar"
+}, pt = /* @__PURE__ */ T({
   __name: "DetailLayout",
   props: {
-    task: {},
+    task: { default: null },
+    title: { default: "" },
     comments: { default: () => [] },
     propItems: { default: () => [] },
     descriptionContent: { default: "" },
-    descriptionEditable: { type: Boolean, default: !1 }
+    descriptionEditable: { type: Boolean, default: !1 },
+    state: { default: "ready" },
+    stateTitle: { default: "" },
+    stateDescription: { default: "" }
   },
   emits: ["update:descriptionContent"],
-  setup(t, { emit: _ }) {
-    const l = t, f = _, u = d(() => ({
+  setup(l, { emit: x }) {
+    const t = l, h = x, C = s(() => {
+      var e;
+      return t.title || ((e = t.task) == null ? void 0 : e.title) || "未命名工作区";
+    }), y = s(() => t.state === "ready"), D = s(() => t.state === "loading" ? A : t.state === "error" ? M : R), L = s(() => t.stateTitle ? t.stateTitle : t.state === "loading" ? "正在准备工作区" : t.state === "error" ? "工作区加载失败" : t.state === "empty" ? "暂无详情内容" : ""), $ = s(() => t.stateDescription ? t.stateDescription : t.state === "loading" ? "请稍候，当前记录的详情数据正在整理。" : t.state === "error" ? "暂时无法展示当前详情，请稍后重试。" : t.state === "empty" ? "当前记录还没有可展示的描述、属性或活动记录。" : ""), _ = s(() => t.task ? {
       todo: { text: "var(--of-status-todo-text)", bg: "var(--of-status-todo-bg)" },
       in_progress: {
         text: "var(--of-status-in-progress-text)",
@@ -36,83 +50,116 @@ const E = { class: "detail-layout" }, D = { class: "detail-layout__main" }, L =
       },
       blocked: { text: "var(--of-status-blocked-text)", bg: "var(--of-status-blocked-bg)" },
       done: { text: "var(--of-status-done-text)", bg: "var(--of-status-done-bg)" }
-    })[l.task.status] ?? {
+    }[t.task.status] ?? {
+      text: "var(--of-color-text-secondary)",
+      bg: "var(--of-color-gray-100)"
+    } : {
       text: "var(--of-color-text-secondary)",
       bg: "var(--of-color-gray-100)"
-    }), m = d(() => ({
+    }), f = s(() => t.task ? {
       P0: { text: "var(--of-priority-p0-text)", bg: "var(--of-priority-p0-bg)" },
       P1: { text: "var(--of-priority-p1-text)", bg: "var(--of-priority-p1-bg)" },
       P2: { text: "var(--of-priority-p2-text)", bg: "var(--of-priority-p2-bg)" },
       P3: { text: "var(--of-priority-p3-text)", bg: "var(--of-priority-p3-bg)" }
-    })[l.task.priority] ?? {
+    }[t.task.priority] ?? {
       text: "var(--of-color-text-secondary)",
       bg: "var(--of-color-gray-100)"
-    }), k = d(() => ({
+    } : {
+      text: "var(--of-color-text-secondary)",
+      bg: "var(--of-color-gray-100)"
+    }), B = s(() => t.task ? {
       todo: "待处理",
       in_progress: "进行中",
       blocked: "阻塞",
       done: "已完成"
-    })[l.task.status] ?? l.task.status), p = d(() => l.descriptionContent || l.task.description || "");
-    function x(o) {
-      f("update:descriptionContent", o);
+    }[t.task.status] ?? t.task.status : ""), I = s(() => t.task ? B.value : ""), P = s(() => t.task ? t.task.priority : ""), v = s(() => {
+      var e;
+      return ((e = t.task) == null ? void 0 : e.role) ?? "";
+    }), m = s(() => {
+      var e;
+      return ((e = t.task) == null ? void 0 : e.assignee) ?? "";
+    }), g = s(() => {
+      var e;
+      return t.descriptionContent || ((e = t.task) == null ? void 0 : e.description) || "";
+    });
+    function S(e) {
+      h("update:descriptionContent", e);
     }
-    return (o, n) => (s(), a("div", E, [
-      e("div", D, [
-        e("h1", L, i(t.task.title), 1),
-        e("div", N, [
-          o.$slots.meta ? r("", !0) : (s(), a(g, { key: 0 }, [
-            e("span", {
+    return (e, u) => (o(), r("div", q, [
+      a("div", w, [
+        a("h1", G, i(C.value), 1),
+        a("div", H, [
+          t.task && !e.$slots.meta ? (o(), r(c, { key: 0 }, [
+            a("span", {
               class: "detail-layout__badge",
-              style: v({ color: u.value.text, backgroundColor: u.value.bg })
-            }, i(k.value), 5),
-            e("span", {
+              style: k({ color: _.value.text, backgroundColor: _.value.bg })
+            }, i(I.value), 5),
+            a("span", {
               class: "detail-layout__badge",
-              style: v({ color: m.value.text, backgroundColor: m.value.bg })
-            }, i(t.task.priority), 5),
-            t.task.role ? (s(), a("span", V, i(t.task.role), 1)) : r("", !0),
-            t.task.assignee ? (s(), a("span", M, i(t.task.assignee), 1)) : r("", !0)
-          ], 64)),
-          c(o.$slots, "meta", {}, void 0, !0)
-        ]),
-        e("div", U, [
-          n[0] || (n[0] = e("div", { class: "detail-layout__section-title" }, "描述", -1)),
-          e("div", z, [
-            c(o.$slots, "description", {}, () => [
-              C(B($), {
-                content: p.value,
-                editable: t.descriptionEditable,
-                "onUpdate:content": x
-              }, null, 8, ["content", "editable"]),
-              p.value ? r("", !0) : (s(), a("p", F, "暂无描述"))
-            ], !0)
-          ])
+              style: k({ color: f.value.text, backgroundColor: f.value.bg })
+            }, i(P.value), 5),
+            v.value ? (o(), r("span", J, i(v.value), 1)) : n("", !0),
+            m.value ? (o(), r("span", K, i(m.value), 1)) : n("", !0)
+          ], 64)) : n("", !0),
+          d(e.$slots, "meta", {}, void 0, !0)
         ]),
-        e("div", T, [
-          n[1] || (n[1] = e("div", { class: "detail-layout__section-title" }, "活动记录", -1)),
-          e("div", j, [
-            c(o.$slots, "comments", {}, () => [
-              t.comments && t.comments.length > 0 ? (s(), a("div", q, [
-                (s(!0), a(g, null, P(t.comments, (y) => (s(), b(S, {
-                  key: y.id,
-                  comment: y
-                }, null, 8, ["comment"]))), 128))
-              ])) : (s(), a("p", w, "暂无活动记录"))
-            ], !0)
+        y.value ? (o(), r(c, { key: 1 }, [
+          a("div", Y, [
+            u[0] || (u[0] = a("div", { class: "detail-layout__section-title" }, "描述", -1)),
+            a("div", Z, [
+              d(e.$slots, "description", {}, () => [
+                N(V(j), {
+                  content: g.value,
+                  editable: l.descriptionEditable,
+                  "onUpdate:content": S
+                }, null, 8, ["content", "editable"]),
+                g.value ? n("", !0) : (o(), r("p", tt, "暂无描述"))
+              ], !0)
+            ])
+          ]),
+          a("div", et, [
+            u[1] || (u[1] = a("div", { class: "detail-layout__section-title" }, "活动记录", -1)),
+            a("div", ot, [
+              d(e.$slots, "comments", {}, () => [
+                l.comments && l.comments.length > 0 ? (o(), r("div", at, [
+                  (o(!0), r(c, null, z(l.comments, (b) => (o(), p(F, {
+                    key: b.id,
+                    comment: b
+                  }, null, 8, ["comment"]))), 128))
+                ])) : (o(), r("p", st, "暂无活动记录"))
+              ], !0)
+            ])
+          ]),
+          e.$slots.footer ? (o(), r("div", rt, [
+            d(e.$slots, "footer", {}, void 0, !0)
+          ])) : n("", !0)
+        ], 64)) : (o(), r("div", {
+          key: 0,
+          class: "detail-layout__state",
+          "data-role": `detail-state-${t.state}`
+        }, [
+          (o(), p(E(D.value), {
+            class: "detail-layout__state-icon",
+            size: 20
+          })),
+          a("div", Q, [
+            a("div", W, i(L.value), 1),
+            a("p", X, i($.value), 1)
           ])
-        ])
+        ], 8, O))
       ]),
-      e("div", A, [
-        c(o.$slots, "props", {}, () => [
-          t.propItems && t.propItems.length > 0 ? (s(), b(I, {
+      y.value ? (o(), r("div", lt, [
+        d(e.$slots, "props", {}, () => [
+          l.propItems && l.propItems.length > 0 ? (o(), p(U, {
             key: 0,
-            items: t.propItems,
+            items: l.propItems,
             title: "属性"
-          }, null, 8, ["items"])) : r("", !0)
+          }, null, 8, ["items"])) : n("", !0)
         ], !0)
-      ])
+      ])) : n("", !0)
     ]));
   }
 });
 export {
-  O as default
+  pt as default
 };

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

@@ -24,5 +24,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     schema: TableSchema;
     coverFieldId: string;
     cardFieldIds: string[];
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    galleryRef: HTMLDivElement;
+}, HTMLDivElement>;
 export default _default;

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

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

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

@@ -1,8 +1,8 @@
-import { defineComponent as g, computed as t, openBlock as i, createElementBlock as o, normalizeStyle as p, Fragment as I, renderList as w, createBlock as C, createVNode as k, unref as b, createElementVNode as _, createCommentVNode as B } from "vue";
-import { PlusIcon as V } from "lucide-vue-next";
-import h from "./GalleryCard.vue.js";
-import { buildGalleryItems as G } from "../../types/index.js";
-const S = /* @__PURE__ */ g({
+import { defineComponent as k, ref as p, computed as d, onMounted as M, onBeforeUnmount as _, openBlock as a, createElementBlock as s, normalizeStyle as B, Fragment as R, renderList as x, createBlock as G, createVNode as V, unref as z, createElementVNode as N, createCommentVNode as S } from "vue";
+import { PlusIcon as E } from "lucide-vue-next";
+import W from "./GalleryCard.vue.js";
+import { buildGalleryItems as $ } from "../../types/index.js";
+const j = /* @__PURE__ */ k({
   __name: "GalleryView",
   props: {
     items: { default: () => [] },
@@ -15,44 +15,68 @@ const S = /* @__PURE__ */ g({
     addable: { type: Boolean, default: !0 }
   },
   emits: ["card-click", "add"],
-  setup(n, { emit: v }) {
-    const e = n, s = v, m = t(() => ({
-      "--columns": e.columns
-    })), c = t(
+  setup(c, { emit: w }) {
+    const t = c, v = w, i = p(null), o = p(0);
+    let n = null;
+    const h = d(() => Math.max(1, Math.floor(t.columns))), f = d(() => {
+      const e = o.value, l = h.value;
+      return e ? e < 520 ? 1 : e < 820 ? Math.min(l, 2) : e < 1120 ? Math.min(l, 3) : l : l;
+    }), F = d(() => ({
+      "--gallery-columns": String(f.value),
+      "--gallery-card-min-width": f.value <= 1 ? "0px" : "220px"
+    }));
+    function m(e) {
+      var l;
+      if (e) {
+        o.value = Math.round(e.contentRect.width);
+        return;
+      }
+      o.value = Math.round(((l = i.value) == null ? void 0 : l.getBoundingClientRect().width) ?? 0);
+    }
+    M(() => {
+      m(), !(typeof ResizeObserver > "u" || !i.value) && (n = new ResizeObserver((e) => {
+        e[0] && m(e[0]);
+      }), n.observe(i.value));
+    }), _(() => {
+      n == null || n.disconnect(), n = null;
+    });
+    const y = d(
       () => {
-        var d;
-        return e.coverFieldId || ((d = e.view) == null ? void 0 : d.galleryCoverFieldId) || "";
+        var e;
+        return t.coverFieldId || ((e = t.view) == null ? void 0 : e.galleryCoverFieldId) || "";
       }
-    ), f = t(() => {
-      var d, l, r, a, u;
-      return (d = e.cardFieldIds) != null && d.length ? e.cardFieldIds : (r = (l = e.view) == null ? void 0 : l.galleryCardFields) != null && r.length ? e.view.galleryCardFields : (u = (a = e.view) == null ? void 0 : a.visibleFields) != null && u.length ? e.view.visibleFields.filter((F) => F !== c.value) : [];
-    }), y = t(() => e.items.length > 0 ? e.items : e.records.length > 0 ? G(e.records, {
-      coverFieldId: c.value || void 0,
-      cardFieldIds: f.value
+    ), C = d(() => {
+      var e, l, r, u, g;
+      return (e = t.cardFieldIds) != null && e.length ? t.cardFieldIds : (r = (l = t.view) == null ? void 0 : l.galleryCardFields) != null && r.length ? t.view.galleryCardFields : (g = (u = t.view) == null ? void 0 : u.visibleFields) != null && g.length ? t.view.visibleFields.filter((b) => b !== y.value) : [];
+    }), I = d(() => t.items.length > 0 ? t.items : t.records.length > 0 ? $(t.records, {
+      coverFieldId: y.value || void 0,
+      cardFieldIds: C.value
     }) : []);
-    return (d, l) => (i(), o("div", {
+    return (e, l) => (a(), s("div", {
+      ref_key: "galleryRef",
+      ref: i,
       class: "gallery-view",
-      style: p(m.value)
+      style: B(F.value)
     }, [
-      (i(!0), o(I, null, w(y.value, (r) => (i(), C(h, {
+      (a(!0), s(R, null, x(I.value, (r) => (a(), G(W, {
         key: r.id,
         item: r,
-        onClick: (a) => s("card-click", r)
+        onClick: (u) => v("card-click", r)
       }, null, 8, ["item", "onClick"]))), 128)),
-      n.addable ? (i(), o("button", {
+      c.addable ? (a(), s("button", {
         key: 0,
         class: "gallery-view__add-btn",
-        onClick: l[0] || (l[0] = (r) => s("add"))
+        onClick: l[0] || (l[0] = (r) => v("add"))
       }, [
-        k(b(V), {
+        V(z(E), {
           size: 18,
           class: "gallery-view__add-icon"
         }),
-        l[1] || (l[1] = _("span", { class: "gallery-view__add-label" }, "添加", -1))
-      ])) : B("", !0)
+        l[1] || (l[1] = N("span", { class: "gallery-view__add-label" }, "添加", -1))
+      ])) : S("", !0)
     ], 4));
   }
 });
 export {
-  S as default
+  j as default
 };

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

@@ -5,6 +5,10 @@ type __VLS_Props = {
     showClose?: boolean;
     maskClosable?: boolean;
     zIndex?: number;
+    fullscreen?: boolean;
+    resizable?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -20,14 +24,20 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
+    "update:width": (value: number) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onUpdate:width"?: ((value: number) => any) | undefined;
 }>, {
     title: string;
     width: number;
+    fullscreen: boolean;
+    maxWidth: number;
+    minWidth: number;
     zIndex: number;
     maskClosable: boolean;
     showClose: boolean;
+    resizable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     drawerRef: HTMLElement;
 }, any>;

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 p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-9cd908b5"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-c40443d8"]]);
 export {
   p as default
 };

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

@@ -1,13 +1,13 @@
-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 = {
+import { defineComponent as V, useSlots as _, computed as W, onMounted as L, watch as S, onBeforeUnmount as M, openBlock as n, createBlock as T, Teleport as R, createVNode as c, Transition as D, withCtx as I, createElementBlock as a, normalizeStyle as m, createCommentVNode as l, createElementVNode as r, withModifiers as N, normalizeClass as P, unref as w, renderSlot as y, toDisplayString as $ } from "vue";
+import { X as g } from "lucide-vue-next";
+import { useFocusTrap as U } from "../../composables/useFocusTrap.js";
+const X = ["aria-label"], F = { class: "of-drawer__inner" }, K = {
   key: 0,
   class: "of-drawer__header"
-}, F = { class: "of-drawer__title" }, K = {
+}, j = { class: "of-drawer__title" }, q = {
   key: 0,
   class: "of-drawer__title-text"
-}, U = { class: "of-drawer__body" }, A = /* @__PURE__ */ _({
+}, A = { class: "of-drawer__body" }, O = /* @__PURE__ */ V({
   __name: "Drawer",
   props: {
     modelValue: { type: Boolean },
@@ -15,81 +15,107 @@ const D = ["aria-label"], L = { class: "of-drawer__inner" }, M = {
     title: { default: void 0 },
     showClose: { type: Boolean, default: !0 },
     maskClosable: { type: Boolean, default: !0 },
-    zIndex: { default: 1e3 }
+    zIndex: { default: 1e3 },
+    fullscreen: { type: Boolean, default: !1 },
+    resizable: { type: Boolean, default: !1 },
+    minWidth: { default: 360 },
+    maxWidth: { default: 1320 }
   },
-  emits: ["update:modelValue"],
-  setup(e, { emit: y }) {
-    const r = e, w = y, h = p(), v = V(() => ({
-      width: `${r.width}px`
+  emits: ["update:modelValue", "update:width"],
+  setup(e, { emit: h }) {
+    const o = e, s = h, v = _(), b = W(() => ({
+      "--of-drawer-width": `${o.width}px`
     })), {
-      containerRef: k,
-      activate: b,
+      containerRef: p,
+      activate: k,
       deactivate: C
-    } = g();
-    function n() {
-      w("update:modelValue", !1);
+    } = U();
+    function i() {
+      s("update:modelValue", !1);
     }
-    function i(t) {
-      t.key === "Escape" && r.modelValue && n();
+    function z(t) {
+      return Math.max(o.minWidth, Math.min(o.maxWidth, t));
     }
-    return B(() => {
-      typeof document > "u" || document.addEventListener("keydown", i);
-    }), x(
-      () => r.modelValue,
+    function u(t) {
+      t.key === "Escape" && o.modelValue && i();
+    }
+    L(() => {
+      typeof document > "u" || document.addEventListener("keydown", u);
+    }), S(
+      () => o.modelValue,
       (t) => {
-        typeof document > "u" || (document.body.style.overflow = t ? "hidden" : "", t ? b() : C());
+        typeof document > "u" || (document.body.style.overflow = t ? "hidden" : "", t ? k() : C());
       },
       { immediate: !0 }
-    ), z(() => {
-      typeof document > "u" || (document.removeEventListener("keydown", i), document.body.style.overflow = "");
-    }), (t, s) => (o(), E(S, { to: "body" }, [
-      u(T, { name: "of-drawer" }, {
+    ), M(() => {
+      typeof document > "u" || (document.removeEventListener("keydown", u), document.body.style.overflow = "");
+    });
+    function x(t) {
+      if (!o.resizable || o.fullscreen || typeof window > "u") return;
+      t.preventDefault();
+      const d = (B) => {
+        const E = z(window.innerWidth - B.clientX);
+        s("update:width", E);
+      }, f = () => {
+        window.removeEventListener("pointermove", d), window.removeEventListener("pointerup", f);
+      };
+      window.addEventListener("pointermove", d), window.addEventListener("pointerup", f, { once: !0 });
+    }
+    return (t, d) => (n(), T(R, { to: "body" }, [
+      c(D, { name: "of-drawer" }, {
         default: I(() => [
-          e.modelValue ? (o(), a("div", {
+          e.modelValue ? (n(), a("div", {
             key: 0,
             class: "of-drawer-overlay",
-            style: c({ zIndex: e.zIndex })
+            style: m({ zIndex: e.zIndex })
           }, [
-            e.maskClosable ? (o(), a("button", {
+            e.maskClosable ? (n(), a("button", {
               key: 0,
               type: "button",
               class: "of-drawer-overlay__hitarea",
               "aria-label": "关闭抽屉",
-              onClick: n
+              onClick: i
             })) : l("", !0),
-            d("aside", {
+            r("aside", {
               ref_key: "drawerRef",
-              ref: k,
-              class: "of-drawer",
+              ref: p,
+              class: P(["of-drawer", { "of-drawer--fullscreen": e.fullscreen }]),
               role: "dialog",
               "aria-modal": "true",
               "aria-label": e.title,
-              style: c(v.value),
-              onClick: s[0] || (s[0] = N(() => {
+              style: m(b.value),
+              onClick: d[0] || (d[0] = N(() => {
               }, ["stop"]))
             }, [
-              d("div", L, [
-                f(h).title || e.title || e.showClose ? (o(), a("div", M, [
-                  d("div", F, [
-                    m(t.$slots, "title", {}, () => [
-                      e.title ? (o(), a("h3", K, R(e.title), 1)) : l("", !0)
+              e.resizable && !e.fullscreen ? (n(), a("button", {
+                key: 0,
+                type: "button",
+                class: "of-drawer__resize-handle",
+                "aria-label": "调整抽屉宽度",
+                onPointerdown: x
+              }, null, 32)) : l("", !0),
+              r("div", F, [
+                w(v).title || e.title || e.showClose ? (n(), a("div", K, [
+                  r("div", j, [
+                    y(t.$slots, "title", {}, () => [
+                      e.title ? (n(), a("h3", q, $(e.title), 1)) : l("", !0)
                     ], !0)
                   ]),
-                  e.showClose ? (o(), a("button", {
+                  e.showClose ? (n(), a("button", {
                     key: 0,
                     class: "of-drawer__close",
                     type: "button",
                     "aria-label": "关闭",
-                    onClick: n
+                    onClick: i
                   }, [
-                    u(f($), { size: 18 })
+                    c(w(g), { size: 18 })
                   ])) : l("", !0)
                 ])) : l("", !0),
-                d("div", U, [
-                  m(t.$slots, "default", {}, void 0, !0)
+                r("div", A, [
+                  y(t.$slots, "default", {}, void 0, !0)
                 ])
               ])
-            ], 12, D)
+            ], 14, X)
           ], 4)) : l("", !0)
         ]),
         _: 3
@@ -98,5 +124,5 @@ const D = ["aria-label"], L = { class: "of-drawer__inner" }, M = {
   }
 });
 export {
-  A as default
+  O as default
 };