@oneflowui/ui 0.6.0 → 0.8.0

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

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

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

@@ -1,9 +1,9 @@
-import { defineComponent as S, computed as r, defineAsyncComponent as e, openBlock as n, createBlock as d, resolveDynamicComponent as s, withKeys as p, withModifiers as y, normalizeClass as F, withCtx as u, Suspense as K, createElementVNode as M, createElementBlock as v, Fragment as D, unref as T, toDisplayString as V } from "vue";
+import { defineComponent as F, computed as a, defineAsyncComponent as e, openBlock as o, createBlock as d, resolveDynamicComponent as s, withKeys as p, withModifiers as v, normalizeClass as K, withCtx as u, Suspense as M, createElementVNode as D, createElementBlock as y, Fragment as T, unref as V, toDisplayString as $ } from "vue";
 import { useInlineEdit as j } from "../../composables/useInlineEdit.js";
 const z = {
   key: 1,
   class: "of-field-cell__display"
-}, $ = /* @__PURE__ */ S({
+}, q = /* @__PURE__ */ F({
   __name: "FieldCell",
   props: {
     rowId: {},
@@ -13,14 +13,14 @@ const z = {
   },
   emits: ["commit", "cancel", "tabNext"],
   setup(i, { emit: b }) {
-    const t = i, c = b, { isEditing: h, activate: k, commit: w, cancel: x } = j(), o = r(() => h(t.rowId, t.field.id)), a = r(() => t.readonly || t.field.readonly);
+    const t = i, c = b, { isEditing: h, activate: k, commit: w, cancel: x } = j(), r = a(() => h(t.rowId, t.field.id)), n = a(() => t.readonly || t.field.readonly), C = a(() => !n.value);
     function m() {
-      a.value || k(t.rowId, t.field.id);
+      n.value || k(t.rowId, t.field.id);
     }
-    function C(l) {
+    function g(l) {
       w(t.rowId, t.field.id, l), c("commit", t.rowId, t.field.id, l);
     }
-    function g() {
+    function A() {
       x(), c("cancel");
     }
     function E() {
@@ -47,50 +47,52 @@ const z = {
       phone: e(() => import("../field/FieldPhone.vue.js"))
     }, N = e(
       () => import("../field/FieldMarkdownPreview.vue.js")
-    ), A = r(() => I[t.field.type]), B = r(() => {
+    ), B = a(() => I[t.field.type]), S = a(() => {
       const l = t.value;
       return l == null || l === "" ? "—" : Array.isArray(l) ? l.join(", ") : typeof l == "boolean" ? l ? "✓" : "—" : String(l);
     });
-    return (l, f) => (n(), d(s(a.value || o.value ? "div" : "button"), {
-      class: F(["of-field-cell", {
-        "of-field-cell--editing": o.value,
-        "of-field-cell--readonly": a.value
+    return (l, f) => (o(), d(s(n.value || r.value ? "div" : "button"), {
+      class: K(["of-field-cell", {
+        "of-field-cell--editing": r.value,
+        "of-field-cell--readonly": n.value,
+        "of-field-cell--actionable": C.value
       }]),
-      type: a.value || o.value ? void 0 : "button",
+      type: n.value || r.value ? void 0 : "button",
       "aria-label": `${i.field.label}字段`,
+      title: n.value ? void 0 : `点击编辑 ${i.field.label}`,
       onClick: m,
       onKeydown: [
-        p(y(m, ["prevent"]), ["enter"]),
-        p(y(m, ["prevent"]), ["space"])
+        p(v(m, ["prevent"]), ["enter"]),
+        p(v(m, ["prevent"]), ["space"])
       ]
     }, {
       default: u(() => [
-        o.value ? (n(), d(K, { key: 0 }, {
+        r.value ? (o(), d(M, { key: 0 }, {
           fallback: u(() => [...f[0] || (f[0] = [
-            M("span", { class: "of-field-cell__loading" }, "...", -1)
+            D("span", { class: "of-field-cell__loading" }, "...", -1)
           ])]),
           default: u(() => [
-            (n(), d(s(A.value), {
+            (o(), d(s(B.value), {
               value: i.value,
               field: i.field,
-              onCommit: C,
-              onCancel: g,
+              onCommit: g,
+              onCancel: A,
               onTabNext: E
             }, null, 40, ["value", "field"]))
           ]),
           _: 1
-        })) : (n(), v(D, { key: 1 }, [
-          i.field.type === "richtext" && typeof i.value == "string" && i.value ? (n(), d(T(N), {
+        })) : (o(), y(T, { key: 1 }, [
+          i.field.type === "richtext" && typeof i.value == "string" && i.value ? (o(), d(V(N), {
             key: 0,
             content: i.value,
             "max-lines": 2
-          }, null, 8, ["content"])) : (n(), v("span", z, V(B.value), 1))
+          }, null, 8, ["content"])) : (o(), y("span", z, $(S.value), 1))
         ], 64))
       ]),
       _: 1
-    }, 40, ["class", "type", "aria-label", "onKeydown"]));
+    }, 40, ["class", "type", "aria-label", "title", "onKeydown"]));
   }
 });
 export {
-  $ as default
+  q as default
 };

package/dist/components/table/TableDataRow.vue.d.ts

@@ -1,7 +1,16 @@
+import { Component } from 'vue';
 import { TableColumn, ColorMap, Density } from '../../types';
 type TableRow = Record<string, unknown> & {
     id: string;
 };
+export interface RowActionItem {
+    key: string;
+    label: string;
+    onClick: () => void;
+    variant?: "default" | "danger";
+    icon?: string | Component;
+    disabled?: boolean;
+}
 type __VLS_Props = {
     row: TableRow;
     rowKey?: string;
@@ -17,6 +26,8 @@ type __VLS_Props = {
      * 状态颜色映射，与内置默认映射合并（传入优先）
      */
     statusColorMap?: ColorMap;
+    showRowActions?: boolean;
+    rowActionItems?: RowActionItem[];
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -25,6 +36,12 @@ declare function __VLS_template(): {
             row: TableRow;
             col: TableColumn;
         }): any;
+        'row-actions'?(_: {
+            row: TableRow;
+            rowId: string;
+            items: RowActionItem[];
+            openDetail: () => void;
+        }): any;
     };
     refs: {};
     rootEl: HTMLDivElement;
@@ -43,6 +60,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     selected: boolean;
     priorityColorMap: ColorMap;
     statusColorMap: ColorMap;
+    showRowActions: boolean;
+    rowActionItems: RowActionItem[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -1,7 +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-2e39c1f1"]]);
+import a from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ a(o, [["__scopeId", "data-v-c81e54a5"]]);
 export {
-  f as default
+  m as default
 };

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

@@ -1,24 +1,24 @@
-import { defineComponent as B, computed as d, openBlock as o, createElementBlock as n, normalizeStyle as c, normalizeClass as Y, withModifiers as E, createElementVNode as g, createCommentVNode as R, Fragment as b, renderList as W, renderSlot as _, toDisplayString as r } from "vue";
-import { mergeColorMap as v, DEFAULT_PRIORITY_MAP as H, DEFAULT_STATUS_MAP as N, resolveBadge as x } from "../../composables/useBadge.js";
-const I = ["aria-selected"], K = ["for"], L = ["id", "checked"], U = {
+import { defineComponent as N, computed as c, openBlock as l, createElementBlock as n, normalizeStyle as u, normalizeClass as M, withModifiers as g, createElementVNode as k, createCommentVNode as b, Fragment as m, renderList as A, renderSlot as P, toDisplayString as r, createBlock as L, resolveDynamicComponent as U } from "vue";
+import { mergeColorMap as $, DEFAULT_PRIORITY_MAP as V, DEFAULT_STATUS_MAP as X, resolveBadge as D } from "../../composables/useBadge.js";
+const F = ["aria-selected"], z = ["for"], O = ["id", "checked"], G = {
   key: 0,
   class: "of-badge of-badge--role"
-}, V = {
+}, _ = {
   key: 1,
   class: "of-td-empty"
-}, X = {
+}, j = {
   key: 3,
   class: "of-td-text"
-}, F = {
+}, q = {
   key: 4,
   class: "of-td-id"
-}, z = {
+}, J = {
   key: 5,
   class: "of-td-title"
-}, O = {
+}, Q = {
   key: 6,
   class: "of-td-text"
-}, q = /* @__PURE__ */ B({
+}, Z = ["disabled", "onClick", "onKeydown"], oe = /* @__PURE__ */ N({
   __name: "TableDataRow",
   props: {
     row: {},
@@ -28,11 +28,13 @@ const I = ["aria-selected"], K = ["for"], L = ["id", "checked"], U = {
     columns: {},
     density: { default: "standard" },
     priorityColorMap: { default: void 0 },
-    statusColorMap: { default: void 0 }
+    statusColorMap: { default: void 0 },
+    showRowActions: { type: Boolean, default: !0 },
+    rowActionItems: { default: () => [] }
   },
   emits: ["select", "click"],
-  setup(i, { emit: M }) {
-    const s = i, y = M, C = {
+  setup(i, { emit: S }) {
+    const a = i, f = S, T = {
       compact: {
         rowHeight: 36,
         cellPaddingX: 10,
@@ -51,108 +53,143 @@ const I = ["aria-selected"], K = ["for"], L = ["id", "checked"], U = {
         cellPaddingY: 10,
         fillMinWidth: 240
       }
-    }, u = d(() => C[s.density]), P = d(() => ({
-      minHeight: `${u.value.rowHeight}px`
-    })), k = d(() => ({
-      padding: `${u.value.cellPaddingY}px ${u.value.cellPaddingX}px`
+    }, y = c(() => T[a.density]), B = c(() => ({
+      minHeight: `${y.value.rowHeight}px`
+    })), p = c(() => ({
+      padding: `${y.value.cellPaddingY}px ${y.value.cellPaddingX}px`
     }));
-    function S(e) {
-      const l = k.value;
+    function I(e) {
+      const o = p.value;
       if (e.width === "fill") {
-        const t = `${e.minWidth ?? u.value.fillMinWidth}px`;
-        return { ...l, flex: `1 1 ${t}`, minWidth: t };
+        const t = `${e.minWidth ?? y.value.fillMinWidth}px`;
+        return { ...o, flex: `1 1 ${t}`, minWidth: t };
       }
-      return { ...l, width: `${e.width}px`, flexShrink: "0", flexGrow: "0" };
+      return { ...o, width: `${e.width}px`, flexShrink: "0", flexGrow: "0" };
     }
-    const $ = d(
-      () => v(H, s.priorityColorMap)
-    ), D = d(() => v(N, s.statusColorMap));
-    function p(e) {
-      return x(e, $.value);
+    const R = c(
+      () => $(V, a.priorityColorMap)
+    ), E = c(() => $(X, a.statusColorMap));
+    function h(e) {
+      return D(e, R.value);
     }
-    function m(e) {
-      return x(e, D.value);
+    function C(e) {
+      return D(e, E.value);
     }
-    function T(e) {
+    function K(e) {
       if (!e) return "-";
-      const l = new Date(e);
-      return isNaN(l.getTime()) ? e : `${l.getMonth() + 1}/${l.getDate()}`;
+      const o = new Date(e);
+      return isNaN(o.getTime()) ? e : `${o.getMonth() + 1}/${o.getDate()}`;
     }
-    function w(e) {
-      return s.row[e.key];
+    function v(e) {
+      return a.row[e.key];
     }
-    function h(e) {
-      const l = w(e);
-      return l != null ? String(l) : "-";
+    function x(e) {
+      const o = v(e);
+      return o != null ? String(o) : "-";
     }
-    function a(e) {
-      const l = w(e);
-      return typeof l == "string" ? l : "";
+    function s(e) {
+      const o = v(e);
+      return typeof o == "string" ? o : "";
     }
-    function f() {
-      const e = s.row[s.rowKey];
+    function d() {
+      const e = a.row[a.rowKey];
       return e != null ? String(e) : "";
     }
-    function A(e) {
-      e.target === e.currentTarget && (e.key !== "Enter" && e.key !== " " || (e.preventDefault(), y("click", s.row)));
+    function Y(e) {
+      e.target === e.currentTarget && (e.key !== "Enter" && e.key !== " " || (e.preventDefault(), f("click", a.row)));
+    }
+    function W(e, o) {
+      o.stopPropagation(), !e.disabled && e.onClick();
     }
-    return (e, l) => (o(), n("div", {
-      class: Y(["of-table-row", { "of-table-row--selected": i.selected }]),
+    function H(e, o) {
+      o.stopPropagation(), !e.disabled && (o.key !== "Enter" && o.key !== " " || (o.preventDefault(), e.onClick()));
+    }
+    return (e, o) => (l(), n("div", {
+      class: M(["of-table-row", { "of-table-row--selected": i.selected }]),
       role: "row",
       tabindex: "0",
       "aria-selected": i.selected || void 0,
-      style: c(P.value),
-      onClick: l[2] || (l[2] = (t) => y("click", i.row)),
-      onKeydown: A
+      style: u(B.value),
+      onClick: o[3] || (o[3] = (t) => f("click", i.row)),
+      onKeydown: Y
     }, [
-      i.selectable ? (o(), n("div", {
+      i.selectable ? (l(), n("div", {
         key: 0,
         class: "of-td of-td-checkbox",
         role: "gridcell",
-        style: c(k.value),
-        onClick: l[1] || (l[1] = E(() => {
+        style: u(p.value),
+        onClick: o[1] || (o[1] = g(() => {
         }, ["stop"]))
       }, [
-        g("label", {
+        k("label", {
           class: "of-checkbox-label",
-          for: `of-table-row-checkbox-${f()}`
+          for: `of-table-row-checkbox-${d()}`
         }, [
-          g("input", {
-            id: `of-table-row-checkbox-${f()}`,
+          k("input", {
+            id: `of-table-row-checkbox-${d()}`,
             type: "checkbox",
             class: "of-checkbox",
             checked: i.selected,
-            onChange: l[0] || (l[0] = (t) => y("select", f()))
-          }, null, 40, L),
-          l[3] || (l[3] = g("span", { class: "of-sr-only" }, "选择当前行", -1))
-        ], 8, K)
-      ], 4)) : R("", !0),
-      (o(!0), n(b, null, W(i.columns, (t) => (o(), n("div", {
+            onChange: o[0] || (o[0] = (t) => f("select", d()))
+          }, null, 40, O),
+          o[4] || (o[4] = k("span", { class: "of-sr-only" }, "选择当前行", -1))
+        ], 8, z)
+      ], 4)) : b("", !0),
+      (l(!0), n(m, null, A(i.columns, (t) => (l(), n("div", {
         key: t.key,
         class: "of-td",
         role: "gridcell",
-        style: c(S(t))
+        style: u(I(t))
       }, [
-        _(e.$slots, "cell", {
+        P(e.$slots, "cell", {
           row: i.row,
           col: t
         }, () => [
-          t.key === "status" ? (o(), n("span", {
+          t.key === "status" ? (l(), n("span", {
             key: 0,
             class: "of-badge",
-            style: c(m(a(t)).style)
-          }, r(m(a(t)).label), 5)) : t.key === "priority" ? (o(), n("span", {
+            style: u(C(s(t)).style)
+          }, r(C(s(t)).label), 5)) : t.key === "priority" ? (l(), n("span", {
             key: 1,
             class: "of-badge",
-            style: c(p(a(t)).style)
-          }, r(p(a(t)).label), 5)) : t.key === "role" ? (o(), n(b, { key: 2 }, [
-            a(t) ? (o(), n("span", U, r(a(t)), 1)) : (o(), n("span", V, "-"))
-          ], 64)) : t.key === "updatedAt" ? (o(), n("span", X, r(T(a(t))), 1)) : t.key === "id" ? (o(), n("span", F, r(f()), 1)) : t.key === "title" ? (o(), n("span", z, r(h(t)), 1)) : (o(), n("span", O, r(h(t)), 1))
+            style: u(h(s(t)).style)
+          }, r(h(s(t)).label), 5)) : t.key === "role" ? (l(), n(m, { key: 2 }, [
+            s(t) ? (l(), n("span", G, r(s(t)), 1)) : (l(), n("span", _, "-"))
+          ], 64)) : t.key === "updatedAt" ? (l(), n("span", j, r(K(s(t))), 1)) : t.key === "id" ? (l(), n("span", q, r(d()), 1)) : t.key === "title" ? (l(), n("span", J, r(x(t)), 1)) : (l(), n("span", Q, r(x(t)), 1))
+        ], !0)
+      ], 4))), 128)),
+      i.showRowActions && i.rowActionItems.length ? (l(), n("div", {
+        key: 1,
+        class: "of-table-row__actions",
+        "aria-label": "行快捷操作",
+        onClick: o[2] || (o[2] = g(() => {
+        }, ["stop"]))
+      }, [
+        P(e.$slots, "row-actions", {
+          row: i.row,
+          rowId: d(),
+          items: i.rowActionItems,
+          openDetail: () => f("click", i.row)
+        }, () => [
+          (l(!0), n(m, null, A(i.rowActionItems, (t) => (l(), n("button", {
+            key: t.key,
+            type: "button",
+            class: M(["of-table-row__action-btn", { "of-table-row__action-btn--danger": t.variant === "danger" }]),
+            disabled: t.disabled,
+            onClick: g((w) => W(t, w), ["stop"]),
+            onKeydown: (w) => H(t, w)
+          }, [
+            t.icon ? (l(), L(U(t.icon), {
+              key: 0,
+              class: "of-table-row__action-icon"
+            })) : b("", !0),
+            k("span", null, r(t.label), 1)
+          ], 42, Z))), 128))
         ], !0)
-      ], 4))), 128))
-    ], 46, I));
+      ])) : b("", !0)
+    ], 46, F));
   }
 });
 export {
-  q as default
+  oe as default
 };