@oneflowui/ui 0.4.1 → 0.4.3

package/dist/components/base/Badge.vue2.js

@@ -0,0 +1,70 @@
+import { defineComponent as n, computed as d, openBlock as u, createElementBlock as f, mergeProps as l, renderSlot as c } from "vue";
+const p = /* @__PURE__ */ n({
+  inheritAttrs: !1,
+  __name: "Badge",
+  props: {
+    color: {},
+    priority: {},
+    size: { default: "md" }
+  },
+  setup(o) {
+    const r = o, a = {
+      default: {
+        background: "var(--of-badge-gray-bg)",
+        text: "var(--of-badge-gray-text)",
+        border: "var(--of-badge-gray-border)"
+      },
+      blue: {
+        background: "var(--of-badge-blue-bg)",
+        text: "var(--of-badge-blue-text)",
+        border: "var(--of-badge-blue-border)"
+      },
+      green: {
+        background: "var(--of-badge-green-bg)",
+        text: "var(--of-badge-green-text)",
+        border: "var(--of-badge-green-border)"
+      },
+      orange: {
+        background: "var(--of-badge-orange-bg)",
+        text: "var(--of-badge-orange-text)",
+        border: "var(--of-badge-orange-border)"
+      },
+      red: {
+        background: "var(--of-badge-red-bg)",
+        text: "var(--of-badge-red-text)",
+        border: "var(--of-badge-red-border)"
+      },
+      purple: {
+        background: "var(--of-badge-purple-bg)",
+        text: "var(--of-badge-purple-text)",
+        border: "var(--of-badge-purple-border)"
+      },
+      gray: {
+        background: "var(--of-badge-gray-bg)",
+        text: "var(--of-badge-gray-text)",
+        border: "var(--of-badge-gray-border)"
+      }
+    }, t = {
+      P0: "red",
+      P1: "orange",
+      P2: "blue",
+      P3: "green"
+    }, b = d(() => r.priority ? t[r.priority] : r.color ? r.color in a ? r.color : "default" : "gray"), g = d(() => {
+      const e = a[b.value];
+      return {
+        "--one-badge-bg": e.background,
+        "--one-badge-color": e.text,
+        "--one-badge-border": e.border
+      };
+    });
+    return (e, v) => (u(), f("span", l({
+      class: ["one-badge", `one-badge--${o.size}`],
+      style: g.value
+    }, e.$attrs), [
+      c(e.$slots, "default", {}, void 0, !0)
+    ], 16));
+  }
+});
+export {
+  p as default
+};

package/dist/components/base/ButtonGroup.vue.js

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

package/dist/components/base/ButtonGroup.vue2.js

@@ -0,0 +1,40 @@
+import { defineComponent as a, computed as c, openBlock as o, createElementBlock as n, mergeProps as i, Fragment as m, renderList as p, normalizeClass as d, createBlock as f, resolveDynamicComponent as _, unref as g, createElementVNode as b, toDisplayString as u } from "vue";
+import { resolveIcon as v } from "../../utils/icon.js";
+const k = ["onClick"], h = {
+  key: 0,
+  class: "of-button-group__item-content"
+}, C = { key: 1 }, D = /* @__PURE__ */ a({
+  inheritAttrs: !1,
+  __name: "ButtonGroup",
+  props: {
+    options: {},
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(l) {
+    const r = l, s = c(() => {
+      const t = r.options.length;
+      return t <= 2 ? "of-button-group--cols-2" : t <= 3 ? "of-button-group--cols-3" : "of-button-group--cols-4";
+    });
+    return (t, y) => (o(), n("div", i({
+      class: ["of-button-group", s.value]
+    }, t.$attrs), [
+      (o(!0), n(m, null, p(l.options, (e) => (o(), n("button", {
+        key: e.value,
+        onClick: (V) => t.$emit("update:modelValue", e.value),
+        class: d([
+          "of-button-group__item",
+          l.modelValue === e.value ? "of-button-group__item--active" : ""
+        ])
+      }, [
+        e.icon ? (o(), n("div", h, [
+          (o(), f(_(g(v)(e.icon)), { class: "of-button-group__item-icon" })),
+          b("span", null, u(e.label), 1)
+        ])) : (o(), n("div", C, u(e.label), 1))
+      ], 10, k))), 128))
+    ], 16));
+  }
+});
+export {
+  D as default
+};

package/dist/components/base/ChainItem.vue.js

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

package/dist/components/base/ChainItem.vue2.js

@@ -0,0 +1,68 @@
+import { defineComponent as h, computed as e, openBlock as l, createElementBlock as c, mergeProps as y, createElementVNode as s, normalizeStyle as n, toDisplayString as t, createCommentVNode as u } from "vue";
+const F = { class: "one-chain-item__header" }, B = {
+  key: 0,
+  class: "one-chain-item__duration"
+}, A = /* @__PURE__ */ h({
+  inheritAttrs: !1,
+  __name: "ChainItem",
+  props: {
+    type: { default: "source" },
+    title: {},
+    description: {},
+    avatar: {},
+    duration: {},
+    color: {},
+    bg: {},
+    borderColor: {}
+  },
+  setup(o) {
+    const a = o, i = {
+      source: {
+        color: "var(--of-badge-purple-text, #7C3AED)",
+        bg: "var(--of-badge-purple-bg, #F9F0FF)",
+        border: "var(--of-badge-purple-border, #E9D5FF)",
+        avatarBg: "var(--of-badge-purple-border, #E9D5FF)",
+        descColor: "var(--of-badge-purple-text, #6B21A8)",
+        defaultAvatar: "A"
+      },
+      result: {
+        color: "var(--of-color-success, #22C55E)",
+        bg: "var(--of-color-success-light, #F6FFED)",
+        border: "var(--of-color-success-border, #B7EB8F)",
+        avatarBg: "var(--of-color-success-border, #B7EB8F)",
+        descColor: "var(--of-color-success-dark, #165E26)",
+        defaultAvatar: "✓"
+      }
+    }, r = e(() => i[a.type || "source"]), d = e(() => a.color || r.value.color), v = e(() => a.bg || r.value.bg), b = e(() => a.borderColor || r.value.border), p = e(() => r.value.descColor), g = e(() => a.avatar || r.value.defaultAvatar), f = e(() => ({
+      background: v.value,
+      borderColor: b.value
+    })), m = e(() => ({
+      backgroundColor: r.value.avatarBg,
+      color: d.value
+    }));
+    return (C, E) => (l(), c("div", y({
+      class: "one-chain-item",
+      style: f.value
+    }, C.$attrs), [
+      s("div", F, [
+        s("span", {
+          class: "one-chain-item__avatar",
+          style: n(m.value)
+        }, t(g.value), 5),
+        s("span", {
+          class: "one-chain-item__title",
+          style: n({ color: d.value })
+        }, t(o.title), 5),
+        o.duration ? (l(), c("span", B, t(o.duration), 1)) : u("", !0)
+      ]),
+      o.description ? (l(), c("div", {
+        key: 0,
+        class: "one-chain-item__desc",
+        style: n({ color: p.value })
+      }, t(o.description), 5)) : u("", !0)
+    ], 16));
+  }
+});
+export {
+  A as default
+};

package/dist/components/base/DescBlock.vue.js

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

package/dist/components/base/DescBlock.vue2.js

@@ -0,0 +1,13 @@
+import { defineComponent as o, openBlock as t, createElementBlock as c, renderSlot as n } from "vue";
+const s = { class: "one-desc-block" }, _ = /* @__PURE__ */ o({
+  name: "DescBlock",
+  __name: "DescBlock",
+  setup(r) {
+    return (e, l) => (t(), c("div", s, [
+      n(e.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+});
+export {
+  _ as default
+};

package/dist/components/base/DropdownMenu.vue.js

@@ -0,0 +1,7 @@
+import o from "./DropdownMenu.vue2.js";
+/* empty css                  */
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const _ = /* @__PURE__ */ r(o, [["__scopeId", "data-v-876336db"]]);
+export {
+  _ as default
+};

package/dist/components/base/DropdownMenu.vue2.js

@@ -0,0 +1,92 @@
+import { defineComponent as C, ref as l, onMounted as h, onBeforeUnmount as b, openBlock as r, createElementBlock as a, mergeProps as x, createElementVNode as f, createVNode as i, unref as m, Transition as p, withCtx as v, createCommentVNode as s, Fragment as E, renderList as M, normalizeClass as B, createBlock as R, resolveDynamicComponent as z, toDisplayString as D, nextTick as L } from "vue";
+import { MoreHorizontal as N } from "lucide-vue-next";
+import { resolveIcon as V } from "../../utils/icon.js";
+const $ = ["aria-expanded"], S = ["onClick"], H = /* @__PURE__ */ C({
+  inheritAttrs: !1,
+  __name: "DropdownMenu",
+  props: {
+    items: {}
+  },
+  setup(_) {
+    const n = l(!1), u = l(null), d = l(null);
+    function c(e) {
+      var o;
+      e.key === "Escape" && n.value && (n.value = !1, (o = u.value) == null || o.focus());
+    }
+    h(() => {
+      typeof document > "u" || document.addEventListener("keydown", c);
+    }), b(() => {
+      typeof document > "u" || document.removeEventListener("keydown", c);
+    });
+    function k(e) {
+      var o;
+      e.onClick(), n.value = !1, (o = u.value) == null || o.focus();
+    }
+    function y() {
+      var e;
+      n.value = !n.value, n.value ? L(() => {
+        var t;
+        const o = (t = d.value) == null ? void 0 : t.querySelector('[role="menuitem"]');
+        o == null || o.focus();
+      }) : (e = u.value) == null || e.focus();
+    }
+    function w() {
+      var e;
+      n.value = !1, (e = u.value) == null || e.focus();
+    }
+    return (e, o) => (r(), a("div", x({ class: "of-dropdown-menu" }, e.$attrs), [
+      f("button", {
+        ref_key: "triggerRef",
+        ref: u,
+        class: "of-dropdown-menu__trigger",
+        "aria-haspopup": "true",
+        "aria-expanded": n.value,
+        "aria-label": "更多操作",
+        onClick: y
+      }, [
+        i(m(N), { size: 18 })
+      ], 8, $),
+      i(p, { name: "of-dropdown-fade" }, {
+        default: v(() => [
+          n.value ? (r(), a("div", {
+            key: 0,
+            class: "of-dropdown-menu__backdrop",
+            onClick: w
+          })) : s("", !0)
+        ]),
+        _: 1
+      }),
+      i(p, { name: "of-dropdown-slide" }, {
+        default: v(() => [
+          n.value ? (r(), a("div", {
+            key: 0,
+            ref_key: "menuRef",
+            ref: d,
+            class: "of-dropdown-menu__content",
+            role: "menu"
+          }, [
+            (r(!0), a(E, null, M(_.items, (t, g) => (r(), a("button", {
+              key: g,
+              onClick: (T) => k(t),
+              class: B([
+                "of-dropdown-menu__item",
+                `of-dropdown-menu__item--${t.variant || "default"}`
+              ]),
+              role: "menuitem"
+            }, [
+              t.icon ? (r(), R(z(m(V)(t.icon)), {
+                key: 0,
+                class: "of-dropdown-menu__item-icon"
+              })) : s("", !0),
+              f("span", null, D(t.label), 1)
+            ], 10, S))), 128))
+          ], 512)) : s("", !0)
+        ]),
+        _: 1
+      })
+    ], 16));
+  }
+});
+export {
+  H as default
+};

package/dist/components/base/EmptyState.vue.js

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

package/dist/components/base/EmptyState.vue2.js

@@ -0,0 +1,38 @@
+import { defineComponent as r, openBlock as e, createElementBlock as o, mergeProps as m, createElementVNode as s, createBlock as d, resolveDynamicComponent as f, unref as y, createCommentVNode as n, toDisplayString as i } from "vue";
+import { resolveIcon as k } from "../../utils/icon.js";
+const u = { class: "of-empty-state__content" }, p = {
+  key: 0,
+  class: "of-empty-state__icon"
+}, C = { class: "of-empty-state__title" }, h = {
+  key: 1,
+  class: "of-empty-state__description"
+}, B = /* @__PURE__ */ r({
+  inheritAttrs: !1,
+  __name: "EmptyState",
+  props: {
+    icon: {},
+    title: {},
+    description: {},
+    action: {}
+  },
+  setup(t) {
+    return (a, c) => (e(), o("div", m({ class: "of-empty-state" }, a.$attrs), [
+      s("div", u, [
+        t.icon ? (e(), o("div", p, [
+          (e(), d(f(y(k)(t.icon))))
+        ])) : n("", !0),
+        s("h3", C, i(t.title), 1),
+        t.description ? (e(), o("p", h, i(t.description), 1)) : n("", !0),
+        t.action ? (e(), o("button", {
+          key: 2,
+          onClick: c[0] || (c[0] = //@ts-ignore
+          (...l) => t.action.onClick && t.action.onClick(...l)),
+          class: "of-empty-state__action"
+        }, i(t.action.label), 1)) : n("", !0)
+      ])
+    ], 16));
+  }
+});
+export {
+  B as default
+};

package/dist/components/base/InfoCard.vue.js

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

package/dist/components/base/InfoCard.vue2.js

@@ -0,0 +1,167 @@
+import { defineComponent as S, useCssVars as E, computed as b, openBlock as t, createElementBlock as r, mergeProps as L, Fragment as f, renderSlot as s, createCommentVNode as n, createElementVNode as c, toDisplayString as i, normalizeStyle as u, renderList as B } from "vue";
+const P = {
+  key: 0,
+  class: "of-info-card__icon-area"
+}, A = { class: "of-info-card__body" }, T = { class: "of-info-card__title" }, V = { class: "of-info-card__footer" }, I = {
+  key: 1,
+  class: "of-info-card__meta-text"
+}, N = {
+  key: 2,
+  class: "of-info-card__meta-text"
+}, O = { class: "of-info-card__body" }, w = { class: "of-info-card__title" }, z = {
+  key: 1,
+  class: "of-info-card__notify-meta"
+}, D = {
+  key: 0,
+  class: "of-info-card__actions"
+}, F = {
+  key: 0,
+  class: "of-info-card__icon-area"
+}, M = { class: "of-info-card__body" }, R = { class: "of-info-card__title" }, Y = {
+  key: 0,
+  class: "of-info-card__subtitle"
+}, j = {
+  key: 1,
+  class: "of-info-card__actions"
+}, G = /* @__PURE__ */ S({
+  name: "InfoCard",
+  inheritAttrs: !1,
+  __name: "InfoCard",
+  props: {
+    variant: { default: "memo" },
+    title: {},
+    content: {},
+    contentLines: { default: 3 },
+    borderColor: {},
+    tags: {},
+    importance: { default: "normal" },
+    author: {},
+    date: {},
+    unread: { type: Boolean, default: !1 },
+    meta: {},
+    subtitle: {},
+    type: {},
+    typeColor: {}
+  },
+  emits: ["click"],
+  setup(o, { emit: y }) {
+    E((e) => ({
+      v4daa9b0a: e.unread ? "var(--of-color-warning-light)" : "var(--of-color-bg-elevated)"
+    }));
+    const a = o, m = y, g = {
+      模板: "var(--of-color-primary-500)",
+      template: "var(--of-color-primary-500)",
+      会话: "var(--of-color-success)",
+      session: "var(--of-color-success)"
+    }, h = b(() => a.variant === "memo" ? a.importance === "high" ? "var(--of-color-error)" : a.borderColor ?? "var(--of-color-info)" : a.variant === "history" ? a.typeColor ? a.typeColor : a.type && g[a.type] ? g[a.type] : a.borderColor ?? "var(--of-color-primary-500)" : "transparent"), k = b(() => {
+      const e = {
+        "--of-ic-border": h.value
+      };
+      return a.variant === "notify" && (e["--of-ic-unread-dot"] = a.unread ? "var(--of-color-info)" : "var(--of-color-text-tertiary)"), e;
+    }), v = b(
+      () => ({
+        "--of-ic-clamp": String(a.contentLines ?? 3)
+      })
+    );
+    function _(e) {
+      const l = [
+        {
+          bg: "var(--of-badge-blue-bg)",
+          color: "var(--of-badge-blue-text)",
+          border: "var(--of-badge-blue-border)"
+        },
+        {
+          bg: "var(--of-badge-green-bg)",
+          color: "var(--of-badge-green-text)",
+          border: "var(--of-badge-green-border)"
+        },
+        {
+          bg: "var(--of-badge-orange-bg)",
+          color: "var(--of-badge-orange-text)",
+          border: "var(--of-badge-orange-border)"
+        },
+        {
+          bg: "var(--of-badge-purple-bg)",
+          color: "var(--of-badge-purple-text)",
+          border: "var(--of-badge-purple-border)"
+        },
+        {
+          bg: "var(--of-badge-gray-bg)",
+          color: "var(--of-badge-gray-text)",
+          border: "var(--of-badge-gray-border)"
+        }
+      ], d = l[e % l.length];
+      return {
+        "--of-ic-tag-bg": d.bg,
+        "--of-ic-tag-color": d.color,
+        "--of-ic-tag-border": d.border
+      };
+    }
+    function C(e) {
+      m("click", e);
+    }
+    return (e, l) => (t(), r("div", L({
+      class: ["of-info-card", `of-info-card--${o.variant}`],
+      style: k.value
+    }, e.$attrs, { onClick: C }), [
+      o.variant === "memo" ? (t(), r(f, { key: 0 }, [
+        e.$slots.icon ? (t(), r("div", P, [
+          s(e.$slots, "icon", {}, void 0, !0)
+        ])) : n("", !0),
+        c("div", A, [
+          c("div", T, i(o.title), 1),
+          o.content ? (t(), r("div", {
+            key: 0,
+            class: "of-info-card__content of-info-card__content--clamp",
+            style: u(v.value)
+          }, i(o.content), 5)) : n("", !0),
+          c("div", V, [
+            o.tags && o.tags.length ? (t(!0), r(f, { key: 0 }, B(o.tags, (d, $) => (t(), r("span", {
+              key: d,
+              class: "of-info-card__tag",
+              style: u(_($))
+            }, i(d), 5))), 128)) : n("", !0),
+            o.author ? (t(), r("span", I, i(o.author), 1)) : n("", !0),
+            o.date ? (t(), r("span", N, i(o.date), 1)) : n("", !0),
+            s(e.$slots, "footer", {}, void 0, !0)
+          ])
+        ])
+      ], 64)) : o.variant === "notify" ? (t(), r(f, { key: 1 }, [
+        l[0] || (l[0] = c("span", { class: "of-info-card__dot" }, null, -1)),
+        c("div", O, [
+          c("div", w, i(o.title), 1),
+          o.content ? (t(), r("div", {
+            key: 0,
+            class: "of-info-card__content of-info-card__content--clamp",
+            style: u(v.value)
+          }, i(o.content), 5)) : n("", !0),
+          o.meta ? (t(), r("div", z, i(o.meta), 1)) : n("", !0),
+          s(e.$slots, "footer", {}, void 0, !0)
+        ]),
+        e.$slots.actions ? (t(), r("div", D, [
+          s(e.$slots, "actions", {}, void 0, !0)
+        ])) : n("", !0)
+      ], 64)) : o.variant === "history" ? (t(), r(f, { key: 2 }, [
+        e.$slots.icon ? (t(), r("div", F, [
+          s(e.$slots, "icon", {}, void 0, !0)
+        ])) : n("", !0),
+        c("div", M, [
+          c("div", R, i(o.title), 1),
+          o.subtitle ? (t(), r("div", Y, i(o.subtitle), 1)) : n("", !0),
+          o.content ? (t(), r("div", {
+            key: 1,
+            class: "of-info-card__content of-info-card__content--clamp",
+            style: u(v.value)
+          }, i(o.content), 5)) : n("", !0),
+          s(e.$slots, "footer", {}, void 0, !0)
+        ]),
+        e.$slots.actions ? (t(), r("div", j, [
+          s(e.$slots, "actions", {}, void 0, !0)
+        ])) : n("", !0)
+      ], 64)) : n("", !0)
+    ], 16));
+  }
+});
+export {
+  G as default
+};

package/dist/components/base/MonitorItem.vue.js

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

package/dist/components/base/MonitorItem.vue2.js

@@ -0,0 +1,56 @@
+import { defineComponent as b, computed as o, openBlock as a, createElementBlock as n, mergeProps as h, toDisplayString as l, createCommentVNode as s, createElementVNode as e, normalizeStyle as r } from "vue";
+const y = {
+  key: 0,
+  class: "of-monitor-item__subtitle"
+}, g = { class: "of-monitor-item__label" }, p = { class: "of-monitor-item__progress" }, C = { class: "of-monitor-item__percentage" }, M = {
+  key: 1,
+  class: "of-monitor-item__count"
+}, V = /* @__PURE__ */ b({
+  name: "MonitorItem",
+  inheritAttrs: !1,
+  __name: "MonitorItem",
+  props: {
+    label: {},
+    subtitle: { default: void 0 },
+    value: {},
+    count: { default: void 0 },
+    color: { default: void 0 },
+    clickable: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(t, { emit: m }) {
+    const i = t, u = m, c = o(() => Math.min(100, Math.max(0, i.value))), d = o(
+      () => c.value === 100 ? "var(--of-color-success)" : i.color ?? "var(--of-color-primary-500)"
+    ), f = o(() => ({
+      backgroundColor: "var(--of-color-gray-100)"
+    })), v = o(() => ({
+      width: `${c.value}%`,
+      background: d.value
+    }));
+    function _() {
+      i.clickable && u("click");
+    }
+    return (k, S) => (a(), n("div", h({
+      class: ["of-monitor-item", { "of-monitor-item--clickable": t.clickable }]
+    }, k.$attrs, { onClick: _ }), [
+      t.subtitle !== void 0 ? (a(), n("div", y, l(t.subtitle), 1)) : s("", !0),
+      e("div", g, l(t.label), 1),
+      e("div", p, [
+        e("div", {
+          class: "of-monitor-item__track",
+          style: r(f.value)
+        }, [
+          e("div", {
+            class: "of-monitor-item__fill",
+            style: r(v.value)
+          }, null, 4)
+        ], 4)
+      ]),
+      e("div", C, l(c.value) + "%", 1),
+      t.count !== void 0 ? (a(), n("div", M, l(t.count), 1)) : s("", !0)
+    ], 16));
+  }
+});
+export {
+  V as default
+};

package/dist/components/base/PersonaCard.vue.js

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