@oneflowui/ui 0.4.1 → 0.4.3

package/dist/components/field/FieldUrl.vue2.js

@@ -0,0 +1,33 @@
+import { defineComponent as c, ref as i, onMounted as m, nextTick as s, withDirectives as v, openBlock as d, createElementBlock as y, vModelText as k } from "vue";
+const b = /* @__PURE__ */ c({
+  __name: "FieldUrl",
+  props: {
+    value: { type: [String, Number, Boolean, Array, null] },
+    field: {}
+  },
+  emits: ["commit", "cancel", "tabNext"],
+  setup(r, { emit: a }) {
+    const f = r, t = a, o = i(null), n = i(String(f.value ?? ""));
+    m(() => s(() => {
+      var e;
+      return (e = o.value) == null ? void 0 : e.focus();
+    }));
+    function p(e) {
+      e.key === "Enter" && (e.preventDefault(), t("commit", n.value)), e.key === "Escape" && (e.preventDefault(), t("cancel")), e.key === "Tab" && (e.preventDefault(), t("commit", n.value), t("tabNext"));
+    }
+    return (e, l) => v((d(), y("input", {
+      ref_key: "inputRef",
+      ref: o,
+      class: "of-field-input",
+      type: "url",
+      "onUpdate:modelValue": l[0] || (l[0] = (u) => n.value = u),
+      onKeydown: p,
+      onBlur: l[1] || (l[1] = (u) => t("commit", n.value))
+    }, null, 544)), [
+      [k, n.value]
+    ]);
+  }
+});
+export {
+  b as default
+};

package/dist/components/form/FormDesigner.vue.js

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

package/dist/components/form/FormDesigner.vue2.js

@@ -0,0 +1,245 @@
+import { defineComponent as z, ref as T, watch as L, computed as P, openBlock as i, createElementBlock as d, createElementVNode as t, toDisplayString as c, createVNode as m, unref as f, createTextVNode as _, createCommentVNode as b, withCtx as $, Fragment as C, renderList as x, normalizeClass as j } from "vue";
+import { Plus as G, GripVertical as U, Trash2 as Y } from "lucide-vue-next";
+import { VueDraggable as A } from "vue-draggable-plus";
+import { isSelectField as h } from "../../types/index.js";
+const H = { class: "of-form-designer" }, J = { class: "of-form-designer__header" }, K = { class: "of-form-designer__title" }, M = { class: "of-form-designer__meta" }, Q = { class: "of-form-designer__inputs" }, R = ["value", "disabled", "onInput"], W = ["value", "disabled", "onChange"], X = ["value"], Z = { class: "of-form-designer__checkbox-label" }, ee = ["checked", "disabled", "onChange"], ne = { class: "of-form-designer__checkbox-label" }, le = ["checked", "disabled", "onChange"], ae = ["onClick"], te = {
+  key: 1,
+  class: "of-form-designer__options-wrap"
+}, oe = ["value", "disabled", "onChange"], ue = /* @__PURE__ */ z({
+  __name: "FormDesigner",
+  props: {
+    schema: {},
+    title: { default: "Form Designer" },
+    readonly: { type: Boolean, default: !1 }
+  },
+  emits: ["update:schema", "change"],
+  setup(r, { emit: y }) {
+    const F = [
+      { value: "text", label: "文本" },
+      { value: "number", label: "数字" },
+      { value: "select", label: "单选" },
+      { value: "multi_select", label: "多选" },
+      { value: "date", label: "日期" },
+      { value: "datetime", label: "日期时间" },
+      { value: "checkbox", label: "勾选" },
+      { value: "url", label: "链接" },
+      { value: "email", label: "邮箱" },
+      { value: "phone", label: "电话" },
+      { value: "rating", label: "评分" },
+      { value: "user", label: "用户" },
+      { value: "attachment", label: "附件" },
+      { value: "relation", label: "关联" },
+      { value: "formula", label: "公式" }
+    ], u = r, p = y, o = T(v(u.schema));
+    L(
+      () => u.schema,
+      (e) => {
+        o.value = v(e);
+      },
+      { deep: !0 }
+    );
+    const S = P(() => `${o.value.fields.length} 个字段`);
+    function v(e) {
+      return {
+        ...e,
+        fields: e.fields.map(w),
+        views: e.views.map((n) => ({ ...n }))
+      };
+    }
+    function w(e) {
+      return h(e) ? {
+        ...e,
+        options: e.options.map((n) => ({ ...n }))
+      } : { ...e };
+    }
+    function s() {
+      const e = v(o.value);
+      p("update:schema", e), p("change", e);
+    }
+    function V() {
+      return k("text", {
+        id: `field_${Date.now()}`,
+        name: "新字段",
+        required: !1,
+        hidden: !1
+      });
+    }
+    function k(e, n) {
+      switch (e) {
+        case "text":
+          return { ...n, type: e };
+        case "number":
+          return { ...n, type: e };
+        case "select":
+        case "multi_select":
+          return {
+            ...n,
+            type: e,
+            options: D()
+          };
+        case "date":
+        case "datetime":
+          return { ...n, type: e };
+        case "checkbox":
+          return { ...n, type: e };
+        case "url":
+        case "email":
+        case "phone":
+          return { ...n, type: e };
+        case "rating":
+          return { ...n, type: e };
+        case "user":
+          return { ...n, type: e };
+        case "attachment":
+          return { ...n, type: e };
+        case "relation":
+          return { ...n, type: e };
+        case "formula":
+          return { ...n, type: e, formula: "" };
+      }
+    }
+    function D() {
+      return [
+        { value: "option_1", label: "选项 1" },
+        { value: "option_2", label: "选项 2" }
+      ];
+    }
+    function B() {
+      u.readonly || (o.value.fields.push(V()), s());
+    }
+    function E(e) {
+      u.readonly || (o.value.fields = o.value.fields.filter((n) => n.id !== e), s());
+    }
+    function q(e, n) {
+      const a = o.value.fields.findIndex((g) => g.id === e.id);
+      if (a === -1) return;
+      const l = {
+        id: e.id,
+        name: e.name,
+        required: e.required,
+        hidden: e.hidden,
+        width: e.width
+      };
+      o.value.fields[a] = h(e) && (n === "select" || n === "multi_select") ? {
+        ...l,
+        type: n,
+        options: e.options.map(
+          (g) => ({ ...g })
+        )
+      } : k(n, l), s();
+    }
+    function I(e, n) {
+      if (!h(e)) return;
+      const a = n.split(",").map((l) => l.trim()).filter(Boolean);
+      e.options = a.map((l) => ({ value: l, label: l })), s();
+    }
+    function N(e) {
+      return h(e) ? e.options.map((n) => n.label).join(", ") : "";
+    }
+    function O() {
+      s();
+    }
+    return (e, n) => (i(), d("div", H, [
+      t("div", J, [
+        t("div", null, [
+          t("h3", K, c(r.title), 1),
+          t("p", M, c(o.value.name) + " · " + c(S.value), 1)
+        ]),
+        r.readonly ? b("", !0) : (i(), d("button", {
+          key: 0,
+          class: "of-form-designer__add-btn",
+          onClick: B
+        }, [
+          m(f(G), { size: 14 }),
+          n[1] || (n[1] = _(" 添加字段 ", -1))
+        ]))
+      ]),
+      m(f(A), {
+        modelValue: o.value.fields,
+        "onUpdate:modelValue": n[0] || (n[0] = (a) => o.value.fields = a),
+        handle: ".of-form-designer__drag",
+        disabled: r.readonly,
+        animation: 150,
+        onEnd: O
+      }, {
+        default: $(() => [
+          (i(!0), d(C, null, x(o.value.fields, (a) => (i(), d("div", {
+            key: a.id,
+            class: "of-form-designer__row"
+          }, [
+            t("span", {
+              class: j(["of-form-designer__drag", { disabled: r.readonly }])
+            }, [
+              m(f(U), { size: 14 })
+            ], 2),
+            t("div", Q, [
+              t("input", {
+                value: a.name,
+                class: "of-form-designer__input",
+                placeholder: "字段名称",
+                disabled: r.readonly,
+                onInput: (l) => {
+                  a.name = String(l.target.value), s();
+                }
+              }, null, 40, R),
+              t("select", {
+                class: "of-form-designer__select",
+                value: a.type,
+                disabled: r.readonly,
+                onChange: (l) => q(a, l.target.value)
+              }, [
+                (i(), d(C, null, x(F, (l) => t("option", {
+                  key: l.value,
+                  value: l.value
+                }, c(l.label), 9, X)), 64))
+              ], 40, W),
+              t("label", Z, [
+                t("input", {
+                  type: "checkbox",
+                  checked: !!a.required,
+                  disabled: r.readonly,
+                  onChange: (l) => {
+                    a.required = l.target.checked, s();
+                  }
+                }, null, 40, ee),
+                n[2] || (n[2] = _(" 必填 ", -1))
+              ]),
+              t("label", ne, [
+                t("input", {
+                  type: "checkbox",
+                  checked: !!a.hidden,
+                  disabled: r.readonly,
+                  onChange: (l) => {
+                    a.hidden = l.target.checked, s();
+                  }
+                }, null, 40, le),
+                n[3] || (n[3] = _(" 隐藏 ", -1))
+              ])
+            ]),
+            r.readonly ? b("", !0) : (i(), d("button", {
+              key: 0,
+              class: "of-form-designer__remove-btn",
+              onClick: (l) => E(a.id)
+            }, [
+              m(f(Y), { size: 14 })
+            ], 8, ae)),
+            a.type === "select" || a.type === "multi_select" ? (i(), d("div", te, [
+              n[4] || (n[4] = t("label", { class: "of-form-designer__options-label" }, "选项（逗号分隔）", -1)),
+              t("input", {
+                value: N(a),
+                class: "of-form-designer__input",
+                placeholder: "例如：待办, 进行中, 完成",
+                disabled: r.readonly,
+                onChange: (l) => I(a, String(l.target.value))
+              }, null, 40, oe)
+            ])) : b("", !0)
+          ]))), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue", "disabled"])
+    ]));
+  }
+});
+export {
+  ue as default
+};

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

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

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

@@ -0,0 +1,87 @@
+import { defineComponent as D, computed as i, openBlock as r, createElementBlock as l, normalizeStyle as _, createElementVNode as t, toDisplayString as c, createCommentVNode as u, Fragment as I, renderList as S, createBlock as B, resolveDynamicComponent as F, createTextVNode as w } from "vue";
+import { CircleIcon as g, FolderIcon as x, CalendarIcon as $, UserIcon as E, TagIcon as N } from "lucide-vue-next";
+const V = ["src"], z = { class: "gallery-card__body" }, A = { class: "gallery-card__title" }, L = {
+  key: 0,
+  class: "gallery-card__desc"
+}, M = {
+  key: 1,
+  class: "gallery-card__props"
+}, P = { class: "gallery-card__prop-key" }, T = { class: "gallery-card__prop-value" }, G = { class: "gallery-card__footer" }, U = { class: "gallery-card__task-id" }, Y = { class: "gallery-card__date" }, H = /* @__PURE__ */ D({
+  __name: "GalleryCard",
+  props: {
+    item: {}
+  },
+  emits: ["click"],
+  setup(o, { emit: y }) {
+    const a = o, m = y, v = i(() => a.item.bannerColor ?? "#BFDBFE"), p = i(
+      () => typeof a.item.cover == "string" && /^https?:\/\//.test(a.item.cover)
+    ), d = i(() => (a.item.extraProps ?? []).slice(0, 2)), f = {
+      tag: N,
+      user: E,
+      calendar: $,
+      folder: x
+    };
+    function k(s) {
+      return s ? f[s.toLowerCase()] ?? g : g;
+    }
+    const C = i(() => {
+      const s = a.item.updatedAt ?? a.item.createdAt;
+      if (!s) return "";
+      const e = new Date(s);
+      return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+    }), b = {
+      todo: "var(--of-color-gray-400)",
+      in_progress: "var(--of-color-info)",
+      blocked: "var(--of-color-warning)",
+      done: "var(--of-color-success)"
+    }, h = i(() => b[a.item.status] ?? "var(--of-color-gray-400)");
+    return (s, e) => (r(), l("div", {
+      class: "gallery-card",
+      onClick: e[0] || (e[0] = (n) => m("click", o.item))
+    }, [
+      p.value ? (r(), l("img", {
+        key: 0,
+        class: "gallery-card__cover",
+        src: o.item.cover,
+        alt: ""
+      }, null, 8, V)) : (r(), l("div", {
+        key: 1,
+        class: "gallery-card__banner",
+        style: _({ backgroundColor: v.value })
+      }, null, 4)),
+      t("div", z, [
+        t("div", A, c(o.item.title), 1),
+        o.item.description ? (r(), l("div", L, c(o.item.description), 1)) : u("", !0),
+        e[3] || (e[3] = t("div", { class: "gallery-card__divider" }, null, -1)),
+        d.value.length > 0 ? (r(), l("div", M, [
+          (r(!0), l(I, null, S(d.value, (n) => (r(), l("div", {
+            key: n.key,
+            class: "gallery-card__prop-row"
+          }, [
+            (r(), B(F(k(n.icon)), {
+              class: "gallery-card__prop-icon",
+              size: 12
+            })),
+            t("span", P, c(n.key), 1),
+            e[1] || (e[1] = t("span", { class: "gallery-card__prop-spacer" }, null, -1)),
+            t("span", T, c(n.value), 1)
+          ]))), 128))
+        ])) : u("", !0),
+        t("div", G, [
+          t("span", U, [
+            t("span", {
+              class: "gallery-card__status-dot",
+              style: _({ backgroundColor: h.value })
+            }, null, 4),
+            w(" " + c(o.item.id), 1)
+          ]),
+          e[2] || (e[2] = t("span", { class: "gallery-card__footer-spacer" }, null, -1)),
+          t("span", Y, c(C.value), 1)
+        ])
+      ])
+    ]));
+  }
+});
+export {
+  H as default
+};

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

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

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

@@ -0,0 +1,48 @@
+import { defineComponent as u, computed as n, openBlock as t, createElementBlock as d, normalizeStyle as m, Fragment as f, renderList as v, createBlock as p, createVNode as y, unref as k, createElementVNode as I, createCommentVNode as g } from "vue";
+import { PlusIcon as F } from "lucide-vue-next";
+import b from "./GalleryCard.vue.js";
+import { buildGalleryItems as C } from "../../types/index.js";
+const x = /* @__PURE__ */ u({
+  __name: "GalleryView",
+  props: {
+    items: { default: () => [] },
+    records: { default: () => [] },
+    coverFieldId: { default: "" },
+    cardFieldIds: { default: () => [] },
+    columns: { default: 4 },
+    addable: { type: Boolean, default: !0 }
+  },
+  emits: ["card-click", "add"],
+  setup(o, { emit: i }) {
+    const e = o, a = i, s = n(() => ({
+      "--columns": e.columns
+    })), c = n(() => e.items.length > 0 ? e.items : e.records.length > 0 ? C(e.records, {
+      coverFieldId: e.coverFieldId || void 0,
+      cardFieldIds: e.cardFieldIds
+    }) : []);
+    return (_, l) => (t(), d("div", {
+      class: "gallery-view",
+      style: m(s.value)
+    }, [
+      (t(!0), d(f, null, v(c.value, (r) => (t(), p(b, {
+        key: r.id,
+        item: r,
+        onClick: (w) => a("card-click", r)
+      }, null, 8, ["item", "onClick"]))), 128)),
+      o.addable ? (t(), d("button", {
+        key: 0,
+        class: "gallery-view__add-btn",
+        onClick: l[0] || (l[0] = (r) => a("add"))
+      }, [
+        y(k(F), {
+          size: 18,
+          class: "gallery-view__add-icon"
+        }),
+        l[1] || (l[1] = I("span", { class: "gallery-view__add-label" }, "添加", -1))
+      ])) : g("", !0)
+    ], 4));
+  }
+});
+export {
+  x as default
+};

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

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

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

@@ -0,0 +1,86 @@
+import { defineComponent as T, ref as w, watch as A, openBlock as d, createElementBlock as s, createElementVNode as f, Fragment as F, renderList as I, createVNode as u, unref as V, createCommentVNode as x } from "vue";
+import { Plus as y } from "lucide-vue-next";
+import B from "./KanbanColumn.vue.js";
+import K from "./QuickAddRow.vue.js";
+import { buildKanbanColumns as O } from "../../types/index.js";
+const g = { class: "of-kanban-board" }, h = { class: "of-kanban-inner" }, P = /* @__PURE__ */ T({
+  __name: "KanbanBoard",
+  props: {
+    columns: { default: () => [] },
+    records: { default: () => [] },
+    kanbanFieldId: { default: "status" },
+    laneOrder: { default: () => [] },
+    laneTitles: { default: () => ({}) },
+    addColumnVisible: { type: Boolean, default: !1 }
+  },
+  emits: ["update:columns", "add-column", "card-click"],
+  setup(i, { emit: k }) {
+    const n = i, r = k, c = () => n.columns.length > 0 ? structuredClone(n.columns) : n.records.length > 0 ? O(n.records, {
+      kanbanFieldId: n.kanbanFieldId,
+      laneOrder: n.laneOrder,
+      laneTitles: n.laneTitles
+    }) : [], a = w(c());
+    A(
+      () => [n.columns, n.records, n.kanbanFieldId, n.laneOrder, n.laneTitles],
+      () => {
+        a.value = c();
+      }
+    );
+    function m(o) {
+      const l = a.value.findIndex((e) => e.id === o.id);
+      if (l !== -1) {
+        const e = o.tasks.map((t) => ({
+          ...t,
+          status: o.id
+        }));
+        a.value[l] = { ...o, tasks: e }, r("update:columns", structuredClone(a.value));
+      }
+    }
+    function b(o) {
+    }
+    function p(o, l) {
+      const e = a.value.find((v) => v.id === o);
+      if (!e) return;
+      const t = {
+        id: `TASK-${Date.now()}`,
+        title: l,
+        status: o,
+        priority: "P3"
+      }, C = {
+        ...e,
+        tasks: [...e.tasks, t]
+      };
+      m(C);
+    }
+    return (o, l) => (d(), s("div", g, [
+      f("div", h, [
+        (d(!0), s(F, null, I(a.value, (e) => (d(), s("div", {
+          key: e.id,
+          class: "of-kanban-col-wrapper"
+        }, [
+          u(B, {
+            column: e,
+            onAddCard: b,
+            onCardClick: l[0] || (l[0] = (t) => r("card-click", t)),
+            "onUpdate:column": m
+          }, null, 8, ["column"]),
+          u(K, {
+            class: "of-quick-add-below",
+            onSubmit: (t) => p(e.id, t)
+          }, null, 8, ["onSubmit"])
+        ]))), 128)),
+        i.addColumnVisible ? (d(), s("button", {
+          key: 0,
+          class: "of-add-column-btn",
+          onClick: l[1] || (l[1] = (e) => r("add-column"))
+        }, [
+          u(V(y), { size: 16 }),
+          l[2] || (l[2] = f("span", null, "添加列", -1))
+        ])) : x("", !0)
+      ])
+    ]));
+  }
+});
+export {
+  P as default
+};

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

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

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

@@ -0,0 +1,56 @@
+import { defineComponent as A, computed as e, openBlock as r, createElementBlock as i, normalizeClass as T, createElementVNode as s, toDisplayString as l, createCommentVNode as f, normalizeStyle as m } from "vue";
+import { resolveBadge as p, mergeColorMap as g, DEFAULT_PRIORITY_MAP as _, DEFAULT_STATUS_MAP as S } from "../../composables/useBadge.js";
+const h = { class: "of-card-title" }, B = { class: "of-card-meta" }, E = { class: "of-card-id" }, L = {
+  key: 0,
+  class: "of-card-date"
+}, N = {
+  key: 1,
+  class: "of-card-role-badge"
+}, P = { class: "of-card-tags" }, z = /* @__PURE__ */ A({
+  __name: "KanbanCard",
+  props: {
+    task: {},
+    dragging: { type: Boolean, default: !1 },
+    priorityColorMap: {},
+    statusColorMap: {}
+  },
+  emits: ["click"],
+  setup(a, { emit: k }) {
+    const o = a, v = k, c = e(
+      () => p(o.task.priority, g(_, o.priorityColorMap))
+    ), d = e(
+      () => p(o.task.status, g(S, o.statusColorMap))
+    ), y = e(() => c.value.style), b = e(() => d.value.style), C = e(() => d.value.label), D = e(() => c.value.label);
+    function M(n) {
+      if (!n) return "";
+      const t = new Date(n);
+      return isNaN(t.getTime()) ? n : `${t.getMonth() + 1}/${t.getDate()}`;
+    }
+    const u = e(() => M(o.task.updatedAt ?? o.task.endDate));
+    return (n, t) => (r(), i("div", {
+      class: T(["of-kanban-card", { "of-kanban-card--dragging": a.dragging }]),
+      onClick: t[0] || (t[0] = (U) => v("click", a.task))
+    }, [
+      s("div", h, l(a.task.title), 1),
+      s("div", B, [
+        s("span", E, l(a.task.id), 1),
+        u.value ? (r(), i("span", L, l(u.value), 1)) : f("", !0),
+        t[1] || (t[1] = s("span", { class: "of-card-spacer" }, null, -1)),
+        a.task.role ? (r(), i("span", N, l(a.task.role), 1)) : f("", !0)
+      ]),
+      s("div", P, [
+        s("span", {
+          class: "of-badge",
+          style: m(y.value)
+        }, l(D.value), 5),
+        s("span", {
+          class: "of-badge",
+          style: m(b.value)
+        }, l(C.value), 5)
+      ])
+    ], 2));
+  }
+});
+export {
+  z as default
+};

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

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