@oneflowui/ui 0.4.2 → 0.4.3

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,6 @@
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+export {
+  e as getDefaultExportFromCjs
+};

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};

package/dist/components/ContextMenu/index.vue.js

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

package/dist/components/ContextMenu/index.vue2.js

@@ -0,0 +1,91 @@
+import { defineComponent as x, ref as h, computed as w, watch as g, onBeforeUnmount as E, openBlock as t, createBlock as L, Teleport as C, createElementBlock as o, withModifiers as B, normalizeStyle as D, Fragment as p, renderList as M, normalizeClass as S, toDisplayString as y, createCommentVNode as a, createElementVNode as $ } from "vue";
+const z = {
+  key: 0,
+  class: "of-context-menu__sep"
+}, N = ["disabled", "onClick"], R = {
+  key: 0,
+  class: "of-context-menu__icon"
+}, V = { class: "of-context-menu__label" }, F = {
+  key: 1,
+  class: "of-context-menu__submenu-indicator"
+}, U = /* @__PURE__ */ x({
+  name: "ContextMenu",
+  __name: "index",
+  props: {
+    x: {},
+    y: {},
+    items: {},
+    visible: { type: Boolean, default: !0 }
+  },
+  emits: ["select", "close"],
+  setup(l, { emit: _ }) {
+    const i = l, c = _, r = h(null), k = w(() => ({
+      position: "fixed",
+      left: `${i.x}px`,
+      top: `${i.y}px`
+    }));
+    function b(e) {
+      e.disabled || e.separator || (c("select", e.key), c("close"));
+    }
+    function d(e) {
+      const s = e.target;
+      r.value && s && !r.value.contains(s) && c("close");
+    }
+    function u(e) {
+      e.key === "Escape" && c("close");
+    }
+    function v() {
+      document.addEventListener("mousedown", d), document.addEventListener("keydown", u);
+    }
+    function m() {
+      document.removeEventListener("mousedown", d), document.removeEventListener("keydown", u);
+    }
+    return g(
+      () => i.visible,
+      (e) => {
+        if (e) {
+          v();
+          return;
+        }
+        m();
+      },
+      { immediate: !0 }
+    ), E(() => {
+      m();
+    }), (e, s) => (t(), L(C, { to: "body" }, [
+      l.visible ? (t(), o("div", {
+        key: 0,
+        ref_key: "menuRef",
+        ref: r,
+        class: "of-context-menu",
+        style: D(k.value),
+        role: "menu",
+        onMousedown: s[0] || (s[0] = B(() => {
+        }, ["stop"]))
+      }, [
+        (t(!0), o(p, null, M(l.items, (n) => {
+          var f;
+          return t(), o(p, {
+            key: n.key
+          }, [
+            n.separator ? (t(), o("hr", z)) : (t(), o("button", {
+              key: 1,
+              type: "button",
+              class: S(["of-context-menu__item", { "is-disabled": n.disabled, "is-danger": n.danger }]),
+              disabled: n.disabled,
+              role: "menuitem",
+              onClick: (K) => b(n)
+            }, [
+              n.icon ? (t(), o("span", R, y(n.icon), 1)) : a("", !0),
+              $("span", V, y(n.label), 1),
+              (f = n.children) != null && f.length ? (t(), o("span", F, "›")) : a("", !0)
+            ], 10, N))
+          ], 64);
+        }), 128))
+      ], 36)) : a("", !0)
+    ]));
+  }
+});
+export {
+  U as default
+};

package/dist/components/Dashboard/charts/BarChart.vue.js

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

package/dist/components/Dashboard/charts/BarChart.vue2.js

@@ -0,0 +1,43 @@
+import { defineComponent as i, ref as l, onMounted as n, onUnmounted as d, watch as c, openBlock as u, createElementBlock as f, createElementVNode as p } from "vue";
+import * as x from "echarts";
+const m = { class: "of-dashboard-chart" }, b = /* @__PURE__ */ i({
+  __name: "BarChart",
+  props: {
+    title: { default: "" },
+    xAxisData: { default: () => ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] },
+    seriesName: { default: "Value" },
+    data: { default: () => [120, 200, 150, 80, 70, 110, 130] },
+    colors: { default: () => ["#3b82f6"] }
+  },
+  setup(s) {
+    const e = s, a = l(null);
+    let t = null, o = null;
+    const r = () => {
+      a.value && (t || (t = x.init(a.value)), t.setOption({
+        color: e.colors,
+        title: e.title ? { text: e.title, left: "center", textStyle: { fontSize: 14, fontWeight: 600 } } : void 0,
+        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+        grid: { left: 12, right: 12, top: e.title ? 42 : 16, bottom: 8, containLabel: !0 },
+        xAxis: { type: "category", data: e.xAxisData },
+        yAxis: { type: "value" },
+        series: [{ name: e.seriesName, type: "bar", barMaxWidth: 36, data: e.data }]
+      }));
+    };
+    return n(() => {
+      r(), a.value && (o = new ResizeObserver(() => t == null ? void 0 : t.resize()), o.observe(a.value));
+    }), d(() => {
+      o == null || o.disconnect(), t == null || t.dispose();
+    }), c(() => [e.title, e.xAxisData, e.seriesName, e.data, e.colors], r, {
+      deep: !0
+    }), (h, _) => (u(), f("div", m, [
+      p("div", {
+        ref_key: "chartRef",
+        ref: a,
+        class: "of-dashboard-chart__canvas"
+      }, null, 512)
+    ]));
+  }
+});
+export {
+  b as default
+};

package/dist/components/Dashboard/charts/DoughnutChart.vue.js

@@ -0,0 +1,23 @@
+import { defineComponent as t, openBlock as o, createBlock as a } from "vue";
+import n from "./PieChart.vue.js";
+const s = /* @__PURE__ */ t({
+  __name: "DoughnutChart",
+  props: {
+    title: {},
+    data: {},
+    colors: {},
+    showLegend: { type: Boolean }
+  },
+  setup(e) {
+    return (l, r) => (o(), a(n, {
+      title: e.title,
+      data: e.data,
+      colors: e.colors,
+      "show-legend": e.showLegend,
+      doughnut: ""
+    }, null, 8, ["title", "data", "colors", "show-legend"]));
+  }
+});
+export {
+  s as default
+};

package/dist/components/Dashboard/charts/DoughnutChart.vue2.js

@@ -0,0 +1,4 @@
+import f from "./DoughnutChart.vue.js";
+export {
+  f as default
+};

package/dist/components/Dashboard/charts/NumberCard.vue.js

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

package/dist/components/Dashboard/charts/NumberCard.vue2.js

@@ -0,0 +1,41 @@
+import { defineComponent as s, computed as i, openBlock as o, createElementBlock as a, createElementVNode as r, toDisplayString as n, normalizeStyle as m, createBlock as c, unref as l, createCommentVNode as u } from "vue";
+import { TrendingUpIcon as f, TrendingDownIcon as _ } from "lucide-vue-next";
+const p = { class: "of-number-card" }, v = { class: "of-number-card__title" }, b = { class: "of-number-card__value-row" }, y = {
+  key: 0,
+  class: "of-number-card__compare"
+}, g = /* @__PURE__ */ s({
+  __name: "NumberCard",
+  props: {
+    title: { default: "Metric" },
+    value: { default: 0 },
+    unit: { default: "" },
+    compare: { default: "" },
+    trend: { default: void 0 },
+    color: { default: "var(--of-color-blue-600)" }
+  },
+  setup(e) {
+    const t = e, d = i(() => t.value >= 1e4 ? `${(t.value / 1e4).toFixed(1)}w${t.unit}` : `${t.value}${t.unit}`);
+    return (k, h) => (o(), a("div", p, [
+      r("p", v, n(e.title), 1),
+      r("div", b, [
+        r("p", {
+          class: "of-number-card__value",
+          style: m({ color: e.color })
+        }, n(d.value), 5),
+        e.trend === "up" ? (o(), c(l(f), {
+          key: 0,
+          class: "of-number-card__trend up",
+          size: 16
+        })) : e.trend === "down" ? (o(), c(l(_), {
+          key: 1,
+          class: "of-number-card__trend down",
+          size: 16
+        })) : u("", !0)
+      ]),
+      e.compare ? (o(), a("p", y, "环比 " + n(e.compare), 1)) : u("", !0)
+    ]));
+  }
+});
+export {
+  g as default
+};

package/dist/components/Dashboard/charts/PieChart.vue.js

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

package/dist/components/Dashboard/charts/PieChart.vue2.js

@@ -0,0 +1,53 @@
+import { defineComponent as r, ref as s, onMounted as d, onUnmounted as i, watch as u, openBlock as f, createElementBlock as c, createElementVNode as p } from "vue";
+import * as h from "echarts";
+const m = { class: "of-dashboard-chart" }, b = /* @__PURE__ */ r({
+  __name: "PieChart",
+  props: {
+    title: { default: "" },
+    data: { default: () => [
+      { name: "Todo", value: 12 },
+      { name: "In Progress", value: 9 },
+      { name: "Done", value: 18 }
+    ] },
+    colors: { default: () => ["#3b82f6", "#10b981", "#f59e0b", "#8b5cf6", "#ef4444"] },
+    doughnut: { type: Boolean, default: !1 },
+    showLegend: { type: Boolean, default: !0 }
+  },
+  setup(l) {
+    const e = l, o = s(null);
+    let t = null, n = null;
+    const a = () => {
+      o.value && (t || (t = h.init(o.value)), t.setOption({
+        color: e.colors,
+        title: e.title ? { text: e.title, left: "center", textStyle: { fontSize: 14, fontWeight: 600 } } : void 0,
+        tooltip: { trigger: "item" },
+        legend: e.showLegend ? { bottom: 0 } : void 0,
+        series: [
+          {
+            type: "pie",
+            radius: e.doughnut ? ["45%", "70%"] : "65%",
+            center: ["50%", e.showLegend ? "45%" : "50%"],
+            data: e.data,
+            label: { formatter: "{b}: {d}%" }
+          }
+        ]
+      }));
+    };
+    return d(() => {
+      a(), o.value && (n = new ResizeObserver(() => t == null ? void 0 : t.resize()), n.observe(o.value));
+    }), i(() => {
+      n == null || n.disconnect(), t == null || t.dispose();
+    }), u(() => [e.title, e.data, e.colors, e.doughnut, e.showLegend], a, {
+      deep: !0
+    }), (v, g) => (f(), c("div", m, [
+      p("div", {
+        ref_key: "chartRef",
+        ref: o,
+        class: "of-dashboard-chart__canvas"
+      }, null, 512)
+    ]));
+  }
+});
+export {
+  b as default
+};

package/dist/components/Dashboard/charts/TableChart.vue.js

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

package/dist/components/Dashboard/charts/TableChart.vue2.js

@@ -0,0 +1,50 @@
+import { defineComponent as d, openBlock as e, createElementBlock as t, toDisplayString as r, createCommentVNode as m, createElementVNode as n, Fragment as u, renderList as i, normalizeStyle as o } from "vue";
+const y = { class: "of-table-chart" }, h = {
+  key: 0,
+  class: "of-table-chart__title"
+}, f = { class: "of-table-chart__wrapper" }, b = { class: "of-table-chart__table" }, v = /* @__PURE__ */ d({
+  __name: "TableChart",
+  props: {
+    title: { default: "" },
+    columns: { default: () => [
+      { key: "name", label: "Name" },
+      { key: "status", label: "Status", align: "center" },
+      { key: "value", label: "Value", align: "right" }
+    ] },
+    rows: { default: () => [
+      { id: 1, name: "Alpha", status: "In Progress", value: 120 },
+      { id: 2, name: "Beta", status: "Done", value: 86 },
+      { id: 3, name: "Gamma", status: "Todo", value: 42 }
+    ] }
+  },
+  setup(a) {
+    return (k, _) => (e(), t("div", y, [
+      a.title ? (e(), t("p", h, r(a.title), 1)) : m("", !0),
+      n("div", f, [
+        n("table", b, [
+          n("thead", null, [
+            n("tr", null, [
+              (e(!0), t(u, null, i(a.columns, (l) => (e(), t("th", {
+                key: l.key,
+                style: o({ textAlign: l.align ?? "left" })
+              }, r(l.label), 5))), 128))
+            ])
+          ]),
+          n("tbody", null, [
+            (e(!0), t(u, null, i(a.rows, (l, c) => (e(), t("tr", {
+              key: l.id ?? c
+            }, [
+              (e(!0), t(u, null, i(a.columns, (s) => (e(), t("td", {
+                key: s.key,
+                style: o({ textAlign: s.align ?? "left" })
+              }, r(l[s.key] ?? "-"), 5))), 128))
+            ]))), 128))
+          ])
+        ])
+      ])
+    ]));
+  }
+});
+export {
+  v as default
+};

package/dist/components/Dashboard/index.vue.js

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

package/dist/components/Dashboard/index.vue2.js

@@ -0,0 +1,104 @@
+import { defineComponent as m, computed as l, openBlock as t, createElementBlock as r, createElementVNode as o, toDisplayString as p, normalizeStyle as s, Fragment as u, renderList as f, createBlock as b, resolveDynamicComponent as h, mergeProps as _ } from "vue";
+import y from "./charts/BarChart.vue.js";
+import g from "./charts/PieChart.vue.js";
+import S from "./charts/DoughnutChart.vue.js";
+import v from "./charts/NumberCard.vue.js";
+import k from "./charts/TableChart.vue.js";
+const C = { class: "of-dashboard" }, D = { class: "of-dashboard__header" }, x = { class: "of-dashboard__title" }, M = /* @__PURE__ */ m({
+  __name: "index",
+  props: {
+    title: { default: "Dashboard" },
+    widgets: { default: () => [] },
+    columns: { default: 4 },
+    gap: { default: 16 }
+  },
+  setup(n) {
+    const a = n, i = {
+      bar: y,
+      pie: g,
+      doughnut: S,
+      "number-card": v,
+      table: k
+    }, d = l(() => ({
+      gridTemplateColumns: `repeat(${a.columns}, minmax(0, 1fr))`,
+      gap: `${a.gap}px`
+    })), c = l(() => a.widgets.length > 0 ? a.widgets : [
+      {
+        id: "metric-1",
+        type: "number-card",
+        title: "总任务",
+        data: { value: 128, trend: "up", compare: "+12%" },
+        colSpan: 1
+      },
+      {
+        id: "metric-2",
+        type: "number-card",
+        title: "已完成",
+        data: { value: 84, trend: "up", compare: "+8%" },
+        colSpan: 1
+      },
+      {
+        id: "bar-1",
+        type: "bar",
+        title: "周趋势",
+        data: [12, 17, 14, 20, 23, 16, 19],
+        colSpan: 2
+      },
+      {
+        id: "pie-1",
+        type: "pie",
+        title: "状态分布",
+        data: [
+          { name: "Todo", value: 34 },
+          { name: "In Progress", value: 52 },
+          { name: "Done", value: 42 }
+        ],
+        colSpan: 2
+      },
+      {
+        id: "table-1",
+        type: "table",
+        title: "关键任务",
+        data: {
+          columns: [
+            { key: "name", label: "任务" },
+            { key: "owner", label: "负责人" },
+            { key: "status", label: "状态" }
+          ],
+          rows: [
+            { name: "Migrate Dashboard", owner: "FE", status: "In Progress" },
+            { name: "Type Definition", owner: "FE", status: "Done" },
+            { name: "Integrate RichText", owner: "FE", status: "Todo" }
+          ]
+        },
+        colSpan: 4
+      }
+    ]);
+    return (T, E) => (t(), r("section", C, [
+      o("header", D, [
+        o("h3", x, p(n.title), 1)
+      ]),
+      o("div", {
+        class: "of-dashboard__grid",
+        style: s(d.value)
+      }, [
+        (t(!0), r(u, null, f(c.value, (e) => (t(), r("article", {
+          key: e.id,
+          class: "of-dashboard__item",
+          style: s({
+            gridColumn: `span ${e.colSpan ?? 1}`,
+            gridRow: `span ${e.rowSpan ?? 1}`
+          })
+        }, [
+          (t(), b(h(i[e.type]), _({
+            title: e.title,
+            data: e.data
+          }, { ref_for: !0 }, e.config ?? {}), null, 16, ["title", "data"]))
+        ], 4))), 128))
+      ], 4)
+    ]));
+  }
+});
+export {
+  M as default
+};

package/dist/components/ai/AiMessageBubble.vue.js

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

package/dist/components/ai/AiMessageBubble.vue2.js

@@ -0,0 +1,47 @@
+import { defineComponent as m, openBlock as a, createElementBlock as s, createElementVNode as t, toDisplayString as o, createCommentVNode as i, normalizeClass as n, createBlock as c } from "vue";
+import r from "./AiStreamingCursor.vue.js";
+const l = { class: "of-ai-message" }, _ = { class: "of-ai-message__avatar" }, d = ["src", "alt"], g = {
+  key: 1,
+  class: "of-ai-message__avatar-emoji"
+}, f = { class: "of-ai-message__body" }, u = {
+  key: 0,
+  class: "of-ai-message__name"
+}, v = { class: "of-ai-message__content" }, b = {
+  key: 1,
+  class: "of-ai-message__timestamp"
+}, C = /* @__PURE__ */ m({
+  __name: "AiMessageBubble",
+  props: {
+    content: {},
+    isStreaming: { type: Boolean },
+    isError: { type: Boolean },
+    avatar: {},
+    name: {},
+    timestamp: {}
+  },
+  setup(e) {
+    return (h, y) => (a(), s("div", l, [
+      t("div", _, [
+        e.avatar ? (a(), s("img", {
+          key: 0,
+          src: e.avatar,
+          alt: e.name || "AI",
+          class: "of-ai-message__avatar-img"
+        }, null, 8, d)) : (a(), s("span", g, "🤖"))
+      ]),
+      t("div", f, [
+        e.name ? (a(), s("div", u, o(e.name), 1)) : i("", !0),
+        t("div", {
+          class: n(["of-ai-message__bubble", { "of-ai-message__bubble--error": e.isError }])
+        }, [
+          t("span", v, o(e.content), 1),
+          e.isStreaming ? (a(), c(r, { key: 0 })) : i("", !0)
+        ], 2),
+        e.timestamp ? (a(), s("div", b, o(e.timestamp), 1)) : i("", !0)
+      ])
+    ]));
+  }
+});
+export {
+  C as default
+};

package/dist/components/ai/AiMessageList.vue.js

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

package/dist/components/ai/AiMessageList.vue2.js

@@ -0,0 +1,78 @@
+import { defineComponent as B, ref as T, computed as b, watch as x, nextTick as M, openBlock as t, createElementBlock as n, createElementVNode as u, normalizeStyle as f, unref as s, Fragment as p, renderList as _, createBlock as r, createCommentVNode as L } from "vue";
+import { useVirtualList as A } from "../../composables/useVirtualList.js";
+import E from "./AiMessageBubble.vue.js";
+import H from "./UserMessageBubble.vue.js";
+import R from "./AiThinking.vue.js";
+const Y = /* @__PURE__ */ B({
+  __name: "AiMessageList",
+  props: {
+    messages: {},
+    isThinking: { type: Boolean }
+  },
+  setup(o) {
+    const i = o, m = T(null), g = (l) => {
+      var c;
+      const a = i.messages[l];
+      if (!a) return 80;
+      if (a.role === "user") return 60;
+      const e = Math.ceil((((c = a.content) == null ? void 0 : c.length) ?? 0) / 60);
+      return Math.max(80, 48 + e * 24);
+    }, {
+      visibleItems: h,
+      totalHeight: v,
+      offsetY: k,
+      scrollToBottom: d
+    } = A({
+      items: b(() => i.messages),
+      itemHeight: g,
+      overscan: 3,
+      containerRef: m
+    });
+    function y() {
+      d();
+    }
+    return x(
+      () => [i.messages.length, i.isThinking],
+      async () => {
+        await M(), y();
+      },
+      { immediate: !0 }
+    ), (l, a) => (t(), n("div", {
+      ref_key: "listRef",
+      ref: m,
+      class: "of-ai-message-list"
+    }, [
+      u("div", {
+        style: f({ height: s(v) + "px", position: "relative" })
+      }, [
+        u("div", {
+          class: "of-ai-message-list-inner",
+          style: f({ transform: `translateY(${s(k)}px)` })
+        }, [
+          (t(!0), n(p, null, _(s(h), ({ data: e }) => (t(), n(p, {
+            key: e.id
+          }, [
+            e.role === "ai" ? (t(), r(E, {
+              key: 0,
+              content: e.content,
+              "is-streaming": e.isStreaming,
+              "is-error": e.isError,
+              avatar: e.avatar,
+              name: e.name,
+              timestamp: e.timestamp
+            }, null, 8, ["content", "is-streaming", "is-error", "avatar", "name", "timestamp"])) : (t(), r(H, {
+              key: 1,
+              content: e.content,
+              avatar: e.avatar,
+              timestamp: e.timestamp
+            }, null, 8, ["content", "avatar", "timestamp"]))
+          ], 64))), 128))
+        ], 4)
+      ], 4),
+      o.isThinking ? (t(), r(R, { key: 0 })) : L("", !0)
+    ], 512));
+  }
+});
+export {
+  Y as default
+};

package/dist/components/ai/AiSender.vue.js

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