@oneflowui/ui 0.4.2 → 0.4.3

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

@@ -0,0 +1,103 @@
+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 { Plus as L } from "lucide-vue-next";
+import { VueDraggable as R } from "vue-draggable-plus";
+import { useVirtualList as U } from "../../composables/useVirtualList.js";
+import V from "./KanbanCard.vue.js";
+import { mergeColorMap as Y, DEFAULT_STATUS_MAP as w } from "../../composables/useBadge.js";
+const z = { class: "of-kanban-column" }, F = { class: "of-col-header" }, I = { class: "of-col-title" }, K = { class: "of-col-count" }, q = /* @__PURE__ */ D({
+  __name: "KanbanColumn",
+  props: {
+    column: {},
+    ghostClass: { default: "of-ghost" },
+    priorityColorMap: {},
+    statusColorMap: {}
+  },
+  emits: ["add-card", "card-click", "update:column"],
+  setup(i, { emit: x }) {
+    const a = i, u = x, l = k([...a.column.tasks]);
+    v(
+      () => 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);
+        }) || (l.value = [...s]);
+      }
+    ), v(l, (s) => {
+      u("update:column", { ...a.column, tasks: s });
+    });
+    const S = C(() => l.value.length > 50), p = k(null), {
+      visibleItems: T,
+      totalHeight: M,
+      offsetY: A
+    } = U({
+      items: l,
+      itemHeight: 120,
+      overscan: 3,
+      containerRef: p
+    }), B = C(() => {
+      if (a.column.color) return a.column.color;
+      const s = Y(w, a.statusColorMap), t = s[a.column.id], o = s[a.column.title], e = t ?? o;
+      return (e == null ? void 0 : e.dot) ?? (e == null ? void 0 : e.text) ?? "var(--of-color-gray-400)";
+    });
+    return (s, t) => (r(), d("div", z, [
+      n("div", F, [
+        n("span", {
+          class: "of-col-dot",
+          style: m({ background: B.value })
+        }, null, 4),
+        n("span", I, y(i.column.title), 1),
+        n("span", K, y(l.value.length), 1),
+        t[4] || (t[4] = n("span", { class: "of-col-spacer" }, null, -1)),
+        n("button", {
+          class: "of-col-add-btn",
+          onClick: t[0] || (t[0] = (o) => u("add-card", i.column.id))
+        }, [
+          E(c(L), { size: 14 })
+        ])
+      ]),
+      S.value ? (r(), d("div", {
+        key: 1,
+        ref_key: "cardContainerRef",
+        ref: p,
+        class: "of-col-cards of-col-cards-virtual"
+      }, [
+        n("div", {
+          style: m({ height: c(M) + "px", position: "relative" })
+        }, [
+          n("div", {
+            style: m({ transform: `translateY(${c(A)}px)` })
+          }, [
+            (r(!0), d(h, null, b(c(T), ({ data: o }) => (r(), f(V, {
+              key: o.id,
+              task: o,
+              onClick: t[3] || (t[3] = (e) => u("card-click", e))
+            }, null, 8, ["task"]))), 128))
+          ], 4)
+        ], 4)
+      ], 512)) : (r(), f(c(R), {
+        key: 0,
+        modelValue: l.value,
+        "onUpdate:modelValue": t[2] || (t[2] = (o) => l.value = o),
+        group: { name: "kanban", pull: !0, put: !0 },
+        "item-key": "id",
+        "ghost-class": i.ghostClass,
+        "chosen-class": "of-chosen",
+        animation: 200,
+        class: "of-col-cards"
+      }, {
+        default: H(() => [
+          (r(!0), d(h, null, b(l.value, (o) => (r(), f(V, {
+            key: o.id,
+            task: o,
+            onClick: t[1] || (t[1] = (e) => u("card-click", e))
+          }, null, 8, ["task"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue", "ghost-class"]))
+    ]));
+  }
+});
+export {
+  q as default
+};

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

@@ -0,0 +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"]]);
+export {
+  e as default
+};

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

@@ -0,0 +1,58 @@
+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({
+  __name: "QuickAddRow",
+  props: {
+    placeholder: { default: "快速创建任务，按 Enter 提交" }
+  },
+  emits: ["submit", "cancel"],
+  setup(u, { emit: r }) {
+    const s = r, n = a(!1), e = a(""), d = a(null);
+    async function f() {
+      var t;
+      n.value = !0, await E(), (t = d.value) == null || t.focus();
+    }
+    function o() {
+      n.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());
+    }
+    function m() {
+      setTimeout(() => {
+        e.value.trim() || o();
+      }, 150);
+    }
+    return (t, l) => (c(), i("div", V, [
+      n.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",
+        placeholder: u.placeholder,
+        onKeydown: p,
+        onBlur: m
+      }, null, 40, g)), [
+        [w, e.value]
+      ]) : (c(), i("button", {
+        key: 0,
+        class: "of-quick-add-trigger",
+        onClick: f
+      }, [
+        h(y(B), {
+          size: 14,
+          class: "of-quick-add-icon"
+        }),
+        _("span", b, x(u.placeholder), 1)
+      ]))
+    ]));
+  }
+});
+export {
+  C as default
+};

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

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

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

@@ -0,0 +1,98 @@
+import { defineComponent as N, provide as m, computed as C, ref as h, onBeforeUnmount as T, openBlock as n, createElementBlock as s, normalizeClass as E, createElementVNode as r, unref as p, createCommentVNode as c, renderSlot as l, Fragment as $, nextTick as B } from "vue";
+import { useBreakpoint as S } from "../../composables/useBreakpoint.js";
+const x = { class: "of-app-layout__navbar" }, A = ["aria-expanded"], D = { class: "of-app-layout__body" }, M = {
+  key: 0,
+  class: "of-app-layout__sidebar"
+}, R = { class: "of-app-layout__main" }, V = { class: "of-app-layout__statusbar" }, K = /* @__PURE__ */ N({
+  __name: "AppLayout",
+  props: {
+    density: { default: "comfortable" }
+  },
+  setup(v) {
+    const w = v, { isMobile: i, isTablet: g } = S();
+    m("isMobile", i), m("isTablet", g), m(
+      "density",
+      C(() => w.density)
+    );
+    const a = h(!1), f = h(null);
+    let t = null;
+    function b() {
+      return f.value ? Array.from(
+        f.value.querySelectorAll(
+          'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), a[href]'
+        )
+      ).filter((e) => !e.closest('[aria-hidden="true"]')) : [];
+    }
+    function d(e) {
+      if (e.key !== "Tab") return;
+      const o = b();
+      if (o.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const _ = o[0], k = o[o.length - 1];
+      e.shiftKey ? document.activeElement === _ && (e.preventDefault(), k.focus()) : document.activeElement === k && (e.preventDefault(), _.focus());
+    }
+    function L() {
+      const e = !a.value;
+      a.value = e, e ? (t = document.activeElement, B(() => {
+        const o = b();
+        o.length && o[0].focus(), document.addEventListener("keydown", d), document.addEventListener("keydown", u);
+      })) : (document.removeEventListener("keydown", d), document.removeEventListener("keydown", u), t == null || t.focus(), t = null);
+    }
+    function y() {
+      a.value = !1, document.removeEventListener("keydown", d), document.removeEventListener("keydown", u), t == null || t.focus(), t = null;
+    }
+    function u(e) {
+      e.key === "Escape" && y();
+    }
+    return T(() => {
+      document.removeEventListener("keydown", d), document.removeEventListener("keydown", u);
+    }), (e, o) => (n(), s("div", {
+      class: E(["of-app-layout", { "of-density-compact": v.density === "compact" }])
+    }, [
+      r("header", x, [
+        p(i) ? (n(), s("button", {
+          key: 0,
+          class: "of-app-layout__hamburger",
+          "aria-label": "Toggle sidebar",
+          "aria-expanded": a.value,
+          onClick: L
+        }, " ☰ ", 8, A)) : c("", !0),
+        l(e.$slots, "navbar", {}, void 0, !0)
+      ]),
+      r("div", D, [
+        p(i) ? c("", !0) : (n(), s("aside", M, [
+          l(e.$slots, "sidebar", {}, void 0, !0)
+        ])),
+        p(i) ? (n(), s($, { key: 1 }, [
+          a.value ? (n(), s("div", {
+            key: 0,
+            class: "of-drawer-overlay",
+            "aria-hidden": "true",
+            onClick: y
+          })) : c("", !0),
+          r("aside", {
+            ref_key: "drawerNavRef",
+            ref: f,
+            class: E(["of-drawer-sidebar", { "of-drawer-sidebar--open": a.value }]),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "导航菜单"
+          }, [
+            l(e.$slots, "sidebar", {}, void 0, !0)
+          ], 2)
+        ], 64)) : c("", !0),
+        r("main", R, [
+          l(e.$slots, "default", {}, void 0, !0)
+        ])
+      ]),
+      r("footer", V, [
+        l(e.$slots, "statusbar", {}, void 0, !0)
+      ])
+    ], 2));
+  }
+});
+export {
+  K as default
+};

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

@@ -0,0 +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"]]);
+export {
+  m as default
+};

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

@@ -0,0 +1,70 @@
+import { defineComponent as p, inject as C, computed as l, openBlock as r, createElementBlock as i, normalizeClass as k, createElementVNode as a, renderSlot as g, createVNode as f, unref as u, toDisplayString as d, createCommentVNode as N } from "vue";
+import { SearchIcon as I, BellIcon as S } from "lucide-vue-next";
+const z = { class: "of-navbar__left" }, B = { class: "of-navbar__center" }, U = { class: "of-navbar__search" }, V = ["placeholder"], x = { class: "of-navbar__right" }, A = {
+  key: 0,
+  class: "of-navbar__notify-badge"
+}, j = /* @__PURE__ */ p({
+  __name: "Navbar",
+  props: {
+    username: { default: "U" },
+    searchPlaceholder: { default: "⌘K 搜索..." },
+    notifyCount: { default: 0 }
+  },
+  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(
+      () => c.username ? c.username.charAt(0).toUpperCase() : "U"
+    );
+    function m(o) {
+      n("search", o.target.value);
+    }
+    function b() {
+      n("notify-click");
+    }
+    function y() {
+      n("avatar-click");
+    }
+    return (o, s) => (r(), i("nav", {
+      class: k(["of-navbar", { "of-navbar--compact": _.value === "compact" }])
+    }, [
+      a("div", z, [
+        g(o.$slots, "logo", {}, () => [
+          s[0] || (s[0] = a("span", { class: "of-navbar__logo-default" }, "OneFlow", -1))
+        ], !0)
+      ]),
+      a("div", B, [
+        a("div", U, [
+          f(u(I), {
+            class: "of-navbar__search-icon",
+            size: 14
+          }),
+          a("input", {
+            class: "of-navbar__search-input",
+            type: "text",
+            placeholder: t.searchPlaceholder,
+            onInput: m
+          }, null, 40, V)
+        ])
+      ]),
+      a("div", x, [
+        a("button", {
+          class: "of-navbar__notify-btn",
+          onClick: b
+        }, [
+          f(u(S), {
+            class: "of-navbar__notify-icon",
+            size: 16
+          }),
+          t.notifyCount && t.notifyCount > 0 ? (r(), i("span", A, d(t.notifyCount > 99 ? "99+" : t.notifyCount), 1)) : N("", !0)
+        ]),
+        a("button", {
+          class: "of-navbar__avatar",
+          onClick: y
+        }, d(h.value), 1)
+      ])
+    ], 2));
+  }
+});
+export {
+  j as default
+};

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

@@ -0,0 +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"]]);
+export {
+  e as default
+};

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

@@ -0,0 +1,88 @@
+import { defineComponent as z, inject as E, computed as S, ref as B, openBlock as s, createElementBlock as t, normalizeClass as _, renderSlot as m, createCommentVNode as a, createElementVNode as r, Fragment as f, renderList as k, createBlock as u, resolveDynamicComponent as b, unref as c, toDisplayString as d } from "vue";
+import { ChevronDownIcon as D, ChevronRightIcon as w } from "lucide-vue-next";
+import { resolveIcon as p } from "../../utils/icon.js";
+const N = {
+  key: 0,
+  class: "of-sidebar__header"
+}, V = { class: "of-sidebar__nav" }, j = ["onClick"], x = { class: "of-sidebar__item-label" }, F = {
+  key: 1,
+  class: "of-sidebar__item-badge"
+}, L = {
+  key: 0,
+  class: "of-sidebar__children"
+}, q = ["onClick"], A = { class: "of-sidebar__item-label" }, G = {
+  key: 1,
+  class: "of-sidebar__item-badge"
+}, H = {
+  key: 1,
+  class: "of-sidebar__footer"
+}, Q = /* @__PURE__ */ z({
+  __name: "Sidebar",
+  props: {
+    items: {}
+  },
+  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());
+    function $(e) {
+      i.value.has(e.id) ? i.value.delete(e.id) : i.value.add(e.id);
+    }
+    function I(e) {
+      e.children && e.children.length > 0 && $(e), v("item-click", e);
+    }
+    function h(e) {
+      return i.value.has(e.id);
+    }
+    return (e, J) => (s(), t("div", {
+      class: _(["of-sidebar", { "of-sidebar--compact": C.value === "compact" }])
+    }, [
+      e.$slots.header ? (s(), t("div", N, [
+        m(e.$slots, "header", {}, void 0, !0)
+      ])) : a("", !0),
+      r("nav", V, [
+        (s(!0), t(f, null, k(g.items, (o) => (s(), t(f, {
+          key: o.id
+        }, [
+          r("button", {
+            class: _(["of-sidebar__item", { "of-sidebar__item--active": o.active }]),
+            onClick: (n) => I(o)
+          }, [
+            o.icon ? (s(), u(b(c(p)(o.icon)), {
+              key: 0,
+              class: "of-sidebar__item-icon",
+              size: 15
+            })) : a("", !0),
+            r("span", x, d(o.label), 1),
+            o.badge !== void 0 ? (s(), t("span", F, d(o.badge), 1)) : a("", !0),
+            o.children && o.children.length > 0 ? (s(), u(b(h(o) ? c(D) : c(w)), {
+              key: 2,
+              class: "of-sidebar__item-chevron",
+              size: 13
+            })) : a("", !0)
+          ], 10, j),
+          o.children && o.children.length > 0 && h(o) ? (s(), t("div", L, [
+            (s(!0), t(f, null, k(o.children, (n) => (s(), t("button", {
+              key: n.id,
+              class: _(["of-sidebar__item of-sidebar__item--child", { "of-sidebar__item--active": n.active }]),
+              onClick: (K) => v("item-click", n)
+            }, [
+              n.icon ? (s(), u(b(c(p)(n.icon)), {
+                key: 0,
+                class: "of-sidebar__item-icon",
+                size: 14
+              })) : a("", !0),
+              r("span", A, d(n.label), 1),
+              n.badge !== void 0 ? (s(), t("span", G, d(n.badge), 1)) : a("", !0)
+            ], 10, q))), 128))
+          ])) : a("", !0)
+        ], 64))), 128))
+      ]),
+      e.$slots.footer ? (s(), t("div", H, [
+        m(e.$slots, "footer", {}, void 0, !0)
+      ])) : a("", !0)
+    ], 2));
+  }
+});
+export {
+  Q as default
+};

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

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

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

@@ -0,0 +1,37 @@
+import { defineComponent as i, openBlock as e, createElementBlock as c, createElementVNode as t, createBlock as n, unref as r, toDisplayString as o, createCommentVNode as _ } from "vue";
+import { CircleCheckIcon as u, CircleAlertIcon as l } from "lucide-vue-next";
+const f = { class: "of-statusbar" }, d = { class: "of-statusbar__left" }, y = { class: "of-statusbar__sync-text" }, b = { class: "of-statusbar__right" }, h = {
+  key: 0,
+  class: "of-statusbar__shortcuts"
+}, m = { class: "of-statusbar__version" }, B = /* @__PURE__ */ i({
+  __name: "StatusBar",
+  props: {
+    synced: { type: Boolean, default: !0 },
+    shortcuts: { default: "" },
+    version: { default: "v1.0.0" }
+  },
+  setup(s) {
+    return (k, a) => (e(), c("div", f, [
+      t("div", d, [
+        s.synced ? (e(), n(r(u), {
+          key: 0,
+          class: "of-statusbar__sync-icon of-statusbar__sync-icon--ok",
+          size: 13
+        })) : (e(), n(r(l), {
+          key: 1,
+          class: "of-statusbar__sync-icon of-statusbar__sync-icon--warn",
+          size: 13
+        })),
+        t("span", y, o(s.synced ? "所有更改已同步" : "同步中..."), 1)
+      ]),
+      a[0] || (a[0] = t("div", { class: "of-statusbar__spacer" }, null, -1)),
+      t("div", b, [
+        s.shortcuts ? (e(), c("span", h, o(s.shortcuts), 1)) : _("", !0),
+        t("span", m, o(s.version), 1)
+      ])
+    ]));
+  }
+});
+export {
+  B as default
+};

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

@@ -0,0 +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"]]);
+export {
+  p as default
+};

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

@@ -0,0 +1,75 @@
+import { defineComponent as p, ref as d, onMounted as h, watch as y, openBlock as n, createElementBlock as i, normalizeStyle as g, renderSlot as u, createElementVNode as s, toDisplayString as w, nextTick as k } from "vue";
+const M = {
+  key: 0,
+  class: "of-mermaid__loading"
+}, C = {
+  key: 1,
+  class: "of-mermaid__error"
+}, L = { class: "of-mermaid__error-text" }, S = /* @__PURE__ */ p({
+  __name: "MermaidChart",
+  props: {
+    code: {},
+    theme: {},
+    width: {}
+  },
+  setup(c) {
+    const t = c;
+    let f = 0;
+    const _ = `of-mermaid-${Date.now()}-${f++}`, l = d(null), o = d(!0), a = d("");
+    async function m() {
+      var r;
+      if (!((r = t.code) != null && r.trim())) {
+        o.value = !1;
+        return;
+      }
+      o.value = !0, a.value = "";
+      try {
+        let e = window.mermaid;
+        e || (e = (await import("mermaid")).default), e.initialize({
+          startOnLoad: !1,
+          theme: t.theme || "default",
+          securityLevel: "loose"
+        }), await k();
+        const { svg: v } = await e.render(_, t.code);
+        l.value && (l.value.innerHTML = v);
+      } catch (e) {
+        a.value = (e == null ? void 0 : e.message) || "图表渲染失败，请检查 Mermaid 语法";
+      } finally {
+        o.value = !1;
+      }
+    }
+    return h(() => m()), y(
+      () => [t.code, t.theme],
+      () => m()
+    ), (r, e) => (n(), i("div", {
+      class: "of-mermaid",
+      style: g({ width: t.width || "100%" })
+    }, [
+      o.value ? (n(), i("div", M, [
+        u(r.$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 }, () => [
+          e[2] || (e[2] = s("span", {
+            class: "of-mermaid__error-icon",
+            "aria-hidden": "true"
+          }, "!", -1)),
+          s("span", L, w(a.value), 1)
+        ], !0)
+      ])) : (n(), i("div", {
+        key: 2,
+        ref_key: "containerRef",
+        ref: l,
+        class: "of-mermaid__container"
+      }, null, 512))
+    ], 4));
+  }
+});
+export {
+  S as default
+};

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

@@ -0,0 +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"]]);
+export {
+  p as default
+};