@oneflowui/ui 0.4.2 → 0.4.3

package/dist/components/table/DataTable.vue2.js

@@ -0,0 +1,234 @@
+import { defineComponent as ne, toRef as i, watch as I, ref as se, computed as f, openBlock as a, createElementBlock as c, createVNode as b, unref as r, createElementVNode as $, normalizeStyle as V, Fragment as v, renderList as z, createBlock as m, mergeProps as y, createSlots as N, withCtx as P, createCommentVNode as ie } from "vue";
+import ce from "./TableHeaderRow.vue.js";
+import F from "./TableDataRow.vue.js";
+import L from "./TableGroupRow.vue.js";
+import ue from "./NewRowBtn.vue.js";
+import O from "./FieldCell.vue.js";
+import { useInlineEdit as de } from "../../composables/useInlineEdit.js";
+import { useVirtualList as fe } from "../../composables/useVirtualList.js";
+import { useTable as me } from "../../composables/useTable.js";
+import { useTableGroup as pe } from "../../composables/useTableGroup.js";
+import { useTableData as ve } from "../../composables/useTableData.js";
+import { useTableColumns as ye } from "../../composables/useTableColumns.js";
+const ge = {
+  class: "of-data-table",
+  role: "grid"
+}, ke = 36, we = 44, Ee = /* @__PURE__ */ ne({
+  __name: "DataTable",
+  props: {
+    tasks: {},
+    records: {},
+    schema: {},
+    view: {},
+    columns: {},
+    fieldDefs: {},
+    rowKey: { default: "id" },
+    selectable: { type: Boolean, default: !0 },
+    addable: { type: Boolean, default: !0 },
+    priorityColorMap: {},
+    statusColorMap: {},
+    groupBy: {},
+    groupColorMap: {},
+    virtual: { type: Boolean },
+    virtualThreshold: { default: 100 },
+    readonly: { type: Boolean, default: !1 }
+  },
+  emits: ["row-click", "row-click-record", "add-row", "selection-change", "cell-edit"],
+  setup(g, { emit: Y }) {
+    const t = g, s = Y, { commit: U } = de(), { rows: T } = ve({
+      tasks: i(t, "tasks"),
+      records: i(t, "records")
+    }), { columns: R } = ye({
+      columns: i(t, "columns"),
+      schema: i(t, "schema"),
+      view: i(t, "view")
+    }), {
+      data: k,
+      sort: S,
+      toggleSort: W,
+      selectedRows: w,
+      toggleSelectAll: j,
+      toggleRowSelection: q,
+      isAllSelected: D,
+      setData: J
+    } = me({
+      data: T.value,
+      pageSize: 999999
+      // Disable pagination inside DataTable for now or manage it externally
+    });
+    I(
+      T,
+      (e) => {
+        J(e);
+      },
+      { deep: !1 }
+    );
+    const { groupedItems: p, collapsedGroups: Q, toggleGroup: B, isGroupHeader: _ } = pe({
+      data: k,
+      // Consumes sorted data from Brain 1
+      groupBy: i(t, "groupBy")
+    }), A = se(null), X = f(() => t.virtual !== void 0 ? t.virtual : p.value.length >= t.virtualThreshold), { visibleItems: Z, totalHeight: ee, offsetY: oe } = fe({
+      items: p,
+      itemHeight: (e) => {
+        const l = p.value[e];
+        return _(l) ? ke : we;
+      },
+      overscan: 5,
+      containerRef: A
+    }), C = f(() => t.readonly ? !1 : t.selectable), te = f(() => t.readonly ? !1 : t.addable), le = f(() => Array.from(w.value)), re = f(() => w.value.size > 0 && !D.value);
+    function ae() {
+      j(k.value);
+    }
+    function H(e) {
+      const l = k.value.find((o) => o[t.rowKey] === e);
+      l && q(l, 0);
+    }
+    I(
+      le,
+      (e) => {
+        s("selection-change", e);
+      },
+      { immediate: !1 }
+    );
+    function h(e) {
+      const l = e[t.rowKey];
+      return l != null ? String(l) : "";
+    }
+    function M(e) {
+      var l;
+      return ((l = t.fieldDefs) == null ? void 0 : l.find((o) => o.id === e)) ?? {
+        id: e,
+        type: "text",
+        label: e
+      };
+    }
+    function E(e, l, o) {
+      U(e, l, o), s("cell-edit", { rowId: e, fieldId: l, value: o });
+    }
+    function G(e) {
+      const l = e;
+      if (l.__record) {
+        s("row-click-record", l.__record), s("row-click", l.__record);
+        return;
+      }
+      s("row-click", e);
+    }
+    function K(e) {
+      return {
+        groupKey: e.__groupKey,
+        count: e.__groupCount,
+        collapsed: Q.value.has(e.__groupKey),
+        colorMap: t.groupColorMap,
+        selectable: C.value
+      };
+    }
+    function x(e) {
+      return {
+        row: e,
+        rowKey: t.rowKey,
+        selected: w.value.has(h(e)),
+        selectable: C.value,
+        columns: R.value,
+        priorityColorMap: t.priorityColorMap,
+        statusColorMap: t.statusColorMap
+      };
+    }
+    return (e, l) => (a(), c("div", ge, [
+      b(ce, {
+        columns: r(R),
+        selectable: C.value,
+        "sort-key": r(S).field ?? "",
+        "sort-order": r(S).order ?? "asc",
+        "all-selected": r(D),
+        indeterminate: re.value,
+        onSort: r(W),
+        onSelectAll: ae
+      }, null, 8, ["columns", "selectable", "sort-key", "sort-order", "all-selected", "indeterminate", "onSort"]),
+      $("div", {
+        ref_key: "scrollContainerRef",
+        ref: A,
+        class: "of-data-table-scroll-container"
+      }, [
+        X.value ? (a(), c("div", {
+          key: 0,
+          style: V({ height: r(ee) + "px", position: "relative" })
+        }, [
+          $("div", {
+            style: V({ transform: `translateY(${r(oe)}px)` })
+          }, [
+            (a(!0), c(v, null, z(r(Z), ({ data: o }) => {
+              var u;
+              return a(), c(v, {
+                key: o.id
+              }, [
+                r(_)(o) ? (a(), m(L, y({
+                  key: 0,
+                  ref_for: !0
+                }, K(o), {
+                  onToggle: (n) => r(B)(o.__groupKey)
+                }), null, 16, ["onToggle"])) : (a(), m(F, y({
+                  key: 1,
+                  ref_for: !0
+                }, x(o), {
+                  onSelect: H,
+                  onClick: (n) => G(o)
+                }), N({ _: 2 }, [
+                  (u = g.fieldDefs) != null && u.length ? {
+                    name: "cell",
+                    fn: P(({ row: n, col: d }) => [
+                      b(O, {
+                        "row-id": h(n),
+                        field: M(d.key),
+                        value: n[d.key],
+                        onCommit: E
+                      }, null, 8, ["row-id", "field", "value"])
+                    ]),
+                    key: "0"
+                  } : void 0
+                ]), 1040, ["onClick"]))
+              ], 64);
+            }), 128))
+          ], 4)
+        ], 4)) : (a(!0), c(v, { key: 1 }, z(r(p), (o) => {
+          var u;
+          return a(), c(v, {
+            key: o.id
+          }, [
+            r(_)(o) ? (a(), m(L, y({
+              key: 0,
+              ref_for: !0
+            }, K(o), {
+              onToggle: (n) => r(B)(o.__groupKey)
+            }), null, 16, ["onToggle"])) : (a(), m(F, y({
+              key: 1,
+              ref_for: !0
+            }, x(o), {
+              onSelect: H,
+              onClick: (n) => G(o)
+            }), N({ _: 2 }, [
+              (u = g.fieldDefs) != null && u.length ? {
+                name: "cell",
+                fn: P(({ row: n, col: d }) => [
+                  b(O, {
+                    "row-id": h(n),
+                    field: M(d.key),
+                    value: n[d.key],
+                    onCommit: E
+                  }, null, 8, ["row-id", "field", "value"])
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["onClick"]))
+          ], 64);
+        }), 128))
+      ], 512),
+      te.value ? (a(), m(ue, {
+        key: 0,
+        onClick: l[0] || (l[0] = (o) => s("add-row"))
+      })) : ie("", !0)
+    ]));
+  }
+});
+export {
+  Ee as default
+};

package/dist/components/table/FieldCell.vue.js

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

package/dist/components/table/FieldCell.vue2.js

@@ -0,0 +1,71 @@
+import { defineComponent as E, computed as i, defineAsyncComponent as l, openBlock as o, createElementBlock as m, normalizeClass as I, createBlock as s, Suspense as N, withCtx as f, resolveDynamicComponent as B, createElementVNode as A, toDisplayString as S } from "vue";
+import { useInlineEdit as D } from "../../composables/useInlineEdit.js";
+const T = {
+  key: 1,
+  class: "of-field-cell__display"
+}, z = /* @__PURE__ */ E({
+  __name: "FieldCell",
+  props: {
+    rowId: {},
+    field: {},
+    value: { type: [String, Number, Boolean, Array, null] },
+    readonly: { type: Boolean, default: !1 }
+  },
+  emits: ["commit", "cancel", "tabNext"],
+  setup(n, { emit: u }) {
+    const e = n, a = u, { isEditing: p, activate: y, commit: v, cancel: C } = D(), r = i(() => p(e.rowId, e.field.id)), d = i(() => e.readonly || e.field.readonly);
+    function b() {
+      d.value || y(e.rowId, e.field.id);
+    }
+    function k(t) {
+      v(e.rowId, e.field.id, t), a("commit", e.rowId, e.field.id, t);
+    }
+    function x() {
+      C(), a("cancel");
+    }
+    function g() {
+      a("tabNext");
+    }
+    const _ = {
+      text: l(() => import("../field/FieldText.vue.js")),
+      number: l(() => import("../field/FieldNumber.vue.js")),
+      checkbox: l(() => import("../field/FieldCheckbox.vue.js")),
+      select: l(() => import("../field/FieldSelect.vue.js")),
+      multiselect: l(() => import("../field/FieldMultiSelect.vue.js")),
+      date: l(() => import("../field/FieldDate.vue.js")),
+      datetime: l(() => import("../field/FieldDatetime.vue.js")),
+      rating: l(() => import("../field/FieldRating.vue.js")),
+      url: l(() => import("../field/FieldUrl.vue.js")),
+      email: l(() => import("../field/FieldEmail.vue.js"))
+    }, h = i(() => _[e.field.type]), w = i(() => {
+      const t = e.value;
+      return t == null || t === "" ? "—" : Array.isArray(t) ? t.join(", ") : typeof t == "boolean" ? t ? "✓" : "—" : String(t);
+    });
+    return (t, c) => (o(), m("div", {
+      class: I(["of-field-cell", {
+        "of-field-cell--editing": r.value,
+        "of-field-cell--readonly": d.value
+      }]),
+      onClick: b
+    }, [
+      r.value ? (o(), s(N, { key: 0 }, {
+        fallback: f(() => [...c[0] || (c[0] = [
+          A("span", { class: "of-field-cell__loading" }, "...", -1)
+        ])]),
+        default: f(() => [
+          (o(), s(B(h.value), {
+            value: n.value,
+            field: n.field,
+            onCommit: k,
+            onCancel: x,
+            onTabNext: g
+          }, null, 40, ["value", "field"]))
+        ]),
+        _: 1
+      })) : (o(), m("span", T, S(w.value), 1))
+    ], 2));
+  }
+});
+export {
+  z as default
+};

package/dist/components/table/NewRowBtn.vue.js

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

package/dist/components/table/NewRowBtn.vue2.js

@@ -0,0 +1,22 @@
+import { defineComponent as n, openBlock as r, createElementBlock as s, createVNode as l, unref as c, createElementVNode as i } from "vue";
+import { Plus as m } from "lucide-vue-next";
+const k = /* @__PURE__ */ n({
+  __name: "NewRowBtn",
+  emits: ["click"],
+  setup(a, { emit: o }) {
+    const t = o;
+    return (f, e) => (r(), s("button", {
+      class: "of-new-row-btn",
+      onClick: e[0] || (e[0] = (p) => t("click"))
+    }, [
+      l(c(m), {
+        size: 14,
+        class: "of-new-row-icon"
+      }),
+      e[1] || (e[1] = i("span", { class: "of-new-row-label" }, "新建任务", -1))
+    ]));
+  }
+});
+export {
+  k as default
+};

package/dist/components/table/TableColumnManager.vue.js

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

package/dist/components/table/TableColumnManager.vue2.js

@@ -0,0 +1,100 @@
+import { defineComponent as b, ref as k, watch as C, openBlock as r, createElementBlock as d, createElementVNode as n, createVNode as l, unref as s, createTextVNode as u, withCtx as V, Fragment as y, renderList as E, normalizeClass as x, toDisplayString as z, createCommentVNode as w } from "vue";
+import { X as N, Eye as B, EyeOff as D, GripVertical as A } from "lucide-vue-next";
+import { VueDraggable as T } from "vue-draggable-plus";
+const U = {
+  key: 0,
+  class: "of-col-manager"
+}, $ = { class: "of-col-manager__header" }, F = { class: "of-col-manager__actions" }, G = { class: "of-col-manager__drag" }, L = ["checked", "onChange"], j = /* @__PURE__ */ b({
+  __name: "TableColumnManager",
+  props: {
+    columns: {},
+    visible: { type: Boolean, default: !0 }
+  },
+  emits: ["update:columns", "close"],
+  setup(c, { emit: f }) {
+    const _ = c, m = f, t = k([]);
+    C(
+      () => _.columns,
+      (o) => {
+        t.value = o.map((e) => ({ ...e }));
+      },
+      { immediate: !0, deep: !0 }
+    );
+    function i() {
+      m(
+        "update:columns",
+        t.value.map((o) => ({ ...o }))
+      );
+    }
+    function g(o) {
+      o.hidden = !o.hidden, i();
+    }
+    function p() {
+      t.value.forEach((o) => o.hidden = !1), i();
+    }
+    function h() {
+      t.value.forEach((o) => o.hidden = !0), i();
+    }
+    function v() {
+      i();
+    }
+    return (o, e) => c.visible ? (r(), d("div", U, [
+      n("div", $, [
+        e[2] || (e[2] = n("span", { class: "of-col-manager__title" }, "管理列", -1)),
+        n("button", {
+          class: "of-col-manager__close",
+          onClick: e[0] || (e[0] = (a) => m("close"))
+        }, [
+          l(s(N), { size: 14 })
+        ])
+      ]),
+      n("div", F, [
+        n("button", {
+          class: "of-col-manager__action-btn",
+          onClick: p
+        }, [
+          l(s(B), { size: 12 }),
+          e[3] || (e[3] = u(" 显示全部 ", -1))
+        ]),
+        n("button", {
+          class: "of-col-manager__action-btn",
+          onClick: h
+        }, [
+          l(s(D), { size: 12 }),
+          e[4] || (e[4] = u(" 隐藏全部 ", -1))
+        ])
+      ]),
+      l(s(T), {
+        modelValue: t.value,
+        "onUpdate:modelValue": e[1] || (e[1] = (a) => t.value = a),
+        handle: ".of-col-manager__drag",
+        animation: 150,
+        onEnd: v
+      }, {
+        default: V(() => [
+          (r(!0), d(y, null, E(t.value, (a) => (r(), d("div", {
+            key: a.key,
+            class: "of-col-manager__row"
+          }, [
+            n("span", G, [
+              l(s(A), { size: 14 })
+            ]),
+            n("input", {
+              type: "checkbox",
+              class: "of-col-manager__checkbox",
+              checked: !a.hidden,
+              onChange: (M) => g(a)
+            }, null, 40, L),
+            n("span", {
+              class: x(["of-col-manager__label", { dimmed: a.hidden }])
+            }, z(a.label), 3)
+          ]))), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue"])
+    ])) : w("", !0);
+  }
+});
+export {
+  j as default
+};

package/dist/components/table/TableDataRow.vue.js

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

package/dist/components/table/TableDataRow.vue2.js

@@ -0,0 +1,115 @@
+import { defineComponent as S, computed as p, openBlock as o, createElementBlock as s, normalizeClass as $, withModifiers as B, createElementVNode as D, createCommentVNode as T, Fragment as g, renderList as A, normalizeStyle as d, renderSlot as P, toDisplayString as a } from "vue";
+import { mergeColorMap as w, DEFAULT_PRIORITY_MAP as R, DEFAULT_STATUS_MAP as _, resolveBadge as h } from "../../composables/useBadge.js";
+const E = ["checked"], N = {
+  key: 0,
+  class: "of-badge of-badge--role"
+}, V = {
+  key: 1,
+  class: "of-td-empty"
+}, F = {
+  key: 3,
+  class: "of-td-text"
+}, I = {
+  key: 4,
+  class: "of-td-id"
+}, L = {
+  key: 5,
+  class: "of-td-title"
+}, U = {
+  key: 6,
+  class: "of-td-text"
+}, W = /* @__PURE__ */ S({
+  __name: "TableDataRow",
+  props: {
+    row: {},
+    rowKey: { default: "id" },
+    selected: { type: Boolean, default: !1 },
+    selectable: { type: Boolean, default: !0 },
+    columns: {},
+    priorityColorMap: {},
+    statusColorMap: {}
+  },
+  emits: ["select", "click"],
+  setup(r, { emit: b }) {
+    const i = r, u = b;
+    function C(e) {
+      if (e.width === "fill") {
+        const n = `${e.minWidth ?? 220}px`;
+        return { flex: `1 1 ${n}`, minWidth: n };
+      }
+      return { width: `${e.width}px`, flexShrink: "0", flexGrow: "0" };
+    }
+    const v = p(
+      () => w(R, i.priorityColorMap)
+    ), x = p(() => w(_, i.statusColorMap));
+    function c(e) {
+      return h(e, v.value);
+    }
+    function f(e) {
+      return h(e, x.value);
+    }
+    function M(e) {
+      if (!e) return "-";
+      const n = new Date(e);
+      return isNaN(n.getTime()) ? e : `${n.getMonth() + 1}/${n.getDate()}`;
+    }
+    function y(e) {
+      return i.row[e.key];
+    }
+    function k(e) {
+      const n = y(e);
+      return n != null ? String(n) : "-";
+    }
+    function l(e) {
+      const n = y(e);
+      return typeof n == "string" ? n : "";
+    }
+    function m() {
+      const e = i.row[i.rowKey];
+      return e != null ? String(e) : "";
+    }
+    return (e, n) => (o(), s("div", {
+      class: $(["of-table-row", { "of-table-row--selected": r.selected }]),
+      onClick: n[2] || (n[2] = (t) => u("click", r.row))
+    }, [
+      r.selectable ? (o(), s("div", {
+        key: 0,
+        class: "of-td of-td-checkbox",
+        onClick: n[1] || (n[1] = B(() => {
+        }, ["stop"]))
+      }, [
+        D("input", {
+          type: "checkbox",
+          class: "of-checkbox",
+          checked: r.selected,
+          onChange: n[0] || (n[0] = (t) => u("select", m()))
+        }, null, 40, E)
+      ])) : T("", !0),
+      (o(!0), s(g, null, A(r.columns, (t) => (o(), s("div", {
+        key: t.key,
+        class: "of-td",
+        style: d(C(t))
+      }, [
+        P(e.$slots, "cell", {
+          row: r.row,
+          col: t
+        }, () => [
+          t.key === "status" ? (o(), s("span", {
+            key: 0,
+            class: "of-badge",
+            style: d(f(l(t)).style)
+          }, a(f(l(t)).label), 5)) : t.key === "priority" ? (o(), s("span", {
+            key: 1,
+            class: "of-badge",
+            style: d(c(l(t)).style)
+          }, a(c(l(t)).label), 5)) : t.key === "role" ? (o(), s(g, { key: 2 }, [
+            l(t) ? (o(), s("span", N, a(l(t)), 1)) : (o(), s("span", V, "-"))
+          ], 64)) : t.key === "updatedAt" ? (o(), s("span", F, a(M(l(t))), 1)) : t.key === "id" ? (o(), s("span", I, a(m()), 1)) : t.key === "title" ? (o(), s("span", L, a(k(t)), 1)) : (o(), s("span", U, a(k(t)), 1))
+        ], !0)
+      ], 4))), 128))
+    ], 2));
+  }
+});
+export {
+  W as default
+};

package/dist/components/table/TableFilterPanel.vue.js

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