@oneflowui/ui 0.4.3 → 0.5.0

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

@@ -1,19 +1,49 @@
-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({
+import { defineComponent as Fl, defineAsyncComponent as Ge, ref as S, toRef as h, computed as b, watch as be, unref as t, openBlock as a, createElementBlock as s, Fragment as v, createVNode as T, createBlock as y, createCommentVNode as M, createElementVNode as g, normalizeStyle as k, normalizeClass as z, renderList as m, mergeProps as K, withModifiers as _, renderSlot as Q, toDisplayString as L, createSlots as Pe, withCtx as Ve, Teleport as Hl } from "vue";
+import ke from "./TableHeaderRow.vue.js";
+import Oe from "./TableDataRow.vue.js";
+import Z from "./TableGroupRow.vue.js";
+import Bl from "./NewRowBtn.vue.js";
+import Il from "./MobileListView.vue.js";
+import Kl from "./DetailSheet.vue.js";
+import E from "./FieldCell.vue.js";
+import { useInlineEdit as El } from "../../composables/useInlineEdit.js";
+import { useVirtualList as _l } from "../../composables/useVirtualList.js";
+import { useTable as Ll } from "../../composables/useTable.js";
+import { useTableGroup as Gl } from "../../composables/useTableGroup.js";
+import { useTableData as Pl } from "../../composables/useTableData.js";
+import { useTableColumns as Vl } from "../../composables/useTableColumns.js";
+import { useColumnResize as Ol } from "../../composables/useColumnResize.js";
+import { useKeyboardNavigation as Nl } from "../../composables/useKeyboardNavigation.js";
+import { useBreakpoint as Wl } from "../../composables/useBreakpoint.js";
+import { useFixedColumns as Yl } from "../../composables/useFixedColumns.js";
+import { useRowDrag as jl } from "../../composables/useRowDrag.js";
+import { useDraftRows as Xl } from "../../composables/useDraftRows.js";
+const Ul = ["tabindex"], ql = {
+  key: 0,
+  class: "of-data-table-body",
+  style: { position: "relative" }
+}, Jl = { class: "of-data-table-fixed-body" }, Ql = ["onMouseenter", "onClick"], Zl = ["checked", "onChange"], eo = {
+  key: 1,
+  class: "of-td-text"
+}, lo = ["onMouseenter", "onClick"], oo = ["checked", "onChange"], to = {
+  key: 1,
+  class: "of-td-text"
+}, no = { class: "of-data-table-scroll-body" }, ao = {
+  key: 0,
+  style: { height: "36px" }
+}, ro = ["onMouseenter", "onClick"], so = {
+  key: 1,
+  class: "of-td-text"
+}, io = {
+  key: 0,
+  style: { height: "36px" }
+}, uo = ["onMouseenter", "onClick"], fo = {
+  key: 1,
+  class: "of-td-text"
+}, co = {
+  key: 3,
+  class: "of-data-table-draft-toolbar"
+}, vo = { class: "of-data-table-draft-count" }, yo = { class: "of-add-field-popup" }, go = 36, bo = 44, No = /* @__PURE__ */ Fl({
   __name: "DataTable",
   props: {
     tasks: {},
@@ -31,204 +61,761 @@ const ge = {
     groupColorMap: {},
     virtual: { type: Boolean },
     virtualThreshold: { default: 100 },
-    readonly: { type: Boolean, default: !1 }
+    readonly: { type: Boolean, default: !1 },
+    fixedColumns: {},
+    enableResize: { type: Boolean, default: !1 },
+    enableKeyboard: { type: Boolean, default: !1 },
+    enableRowDrag: { type: Boolean, default: !1 },
+    enableCrossGroupDrag: { type: Boolean, default: !1 },
+    groups: {},
+    aggregations: {},
+    enableFieldManagement: { 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")
+  emits: ["row-click", "row-click-record", "add-row", "selection-change", "cell-edit", "column-resize", "active-cell-change", "row-reorder", "row-group-change", "draft-commit", "draft-discard", "drafts-commit-all", "paste", "schema-add-field", "schema-rename-field", "schema-change-field-type", "schema-hide-field", "schema-delete-field", "schema-duplicate-field"],
+  setup(f, { emit: Ne }) {
+    const We = Ge(() => import("./ColumnHeaderMenu.vue.js")), Ye = Ge(() => import("./FieldTypePicker.vue.js")), i = f, c = Ne, { isMobile: he } = Wl(), G = S(!1), P = S(null), ee = El(), { commit: je, editingCell: Xe } = ee, { rows: me } = Pl({
+      tasks: h(i, "tasks"),
+      records: h(i, "records")
+    }), { columns: le } = Vl({
+      columns: h(i, "columns"),
+      schema: h(i, "schema"),
+      view: h(i, "view")
+    }), { startResize: Ue, columnWidthOverrides: qe, showResizeIndicator: Je, resizeIndicatorX: Qe, autoFitColumn: Ze } = Ol({
+      columns: le,
+      onResize: (l, o) => c("column-resize", { colKey: l, width: o })
+    }), C = b(() => {
+      const l = qe.value;
+      return l.size === 0 ? le.value : le.value.map((o) => {
+        const e = l.get(o.key);
+        return e !== void 0 ? { ...o, width: e } : o;
+      });
     }), {
-      data: k,
-      sort: S,
-      toggleSort: W,
-      selectedRows: w,
-      toggleSelectAll: j,
-      toggleRowSelection: q,
-      isAllSelected: D,
-      setData: J
-    } = me({
-      data: T.value,
+      data: V,
+      sort: A,
+      toggleSort: O,
+      selectedRows: p,
+      toggleSelectAll: el,
+      toggleRowSelection: ll,
+      isAllSelected: oe,
+      setData: ol
+    } = Ll({
+      data: me.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;
+    be(me, (l) => ol(l), { deep: !1 });
+    const { groupedItems: D, collapsedGroups: tl, toggleGroup: N, isGroupHeader: x } = Gl({
+      data: V,
+      groupBy: h(i, "groupBy"),
+      groups: h(i, "groups"),
+      aggregations: h(i, "aggregations")
+    }), W = S(null), te = S(null), pe = S(null), nl = b(() => {
+      var l;
+      return (((l = i.fixedColumns) == null ? void 0 : l.length) ?? 0) > 0;
+    }), we = S(0), al = b(() => we.value > 0), {
+      fixedColumns: ne,
+      scrollableColumns: ae,
+      fixedWidth: Ce,
+      handleScroll: rl,
+      handleFixedScroll: De,
+      scrollLeft: ko,
+      syncHover: R,
+      isRowHovered: Y
+    } = Yl({
+      columns: C,
+      fixedColumnKeys: b(() => i.fixedColumns ?? []),
+      scrollContainerRef: W,
+      fixedContainerRef: pe
+    }), re = b(() => i.virtual !== void 0 ? i.virtual : D.value.length >= i.virtualThreshold), { visibleItems: se, totalHeight: de, offsetY: ie, scrollToIndex: sl, observeRow: j } = _l({
+      items: D,
+      itemHeight: (l) => {
+        const o = D.value[l];
+        return x(o) ? go : bo;
       },
       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);
+      containerRef: W,
+      measureRow: !0
+    }), xe = b(() => D.value.filter((l) => !x(l))), { activeCell: Re, selectedRange: dl, setActiveCell: Se, handleKeyDown: il } = Nl({
+      columns: C,
+      rows: xe,
+      containerRef: te,
+      editingCell: Xe,
+      enabled: b(() => i.enableKeyboard),
+      onActivateEdit: (l, o) => ee.activate(l, o),
+      onCancelEdit: () => ee.cancel(),
+      onScrollToRow: (l) => sl(l),
+      getCellValue: (l, o) => {
+        const e = xe.value.find((r) => r.id === l);
+        if (!e) return "";
+        const n = e[o];
+        return n != null ? String(n) : "";
       },
-      { immediate: !1 }
-    );
-    function h(e) {
-      const l = e[t.rowKey];
-      return l != null ? String(l) : "";
+      onPaste: (l, o, e) => {
+        c("paste", { startRowId: l, startColKey: o, data: e });
+      }
+    });
+    be(Re, (l) => c("active-cell-change", l ?? null));
+    const {
+      isDragging: ul,
+      draggedRowId: fl,
+      dropTargetId: ue,
+      dropPosition: Me,
+      handleDragStart: cl,
+      handleDragOver: vl,
+      handleDrop: yl,
+      handleDragEnd: $e
+    } = jl({
+      processedItems: D,
+      enableCrossGroupDrag: b(() => i.enableCrossGroupDrag),
+      groupFieldId: h(i, "groupBy")
+    });
+    function Te(l, o) {
+      i.enableRowDrag && cl(l, o);
     }
-    function M(e) {
-      var l;
-      return ((l = t.fieldDefs) == null ? void 0 : l.find((o) => o.id === e)) ?? {
-        id: e,
+    function ze(l, o) {
+      i.enableRowDrag && vl(l, o);
+    }
+    function Ae(l, o) {
+      i.enableRowDrag && yl(l, o, {
+        onReorder: (e) => c("row-reorder", e),
+        onGroupChange: (e) => c("row-group-change", e)
+      });
+    }
+    const {
+      drafts: Fe,
+      addDraft: gl,
+      updateDraftField: ho,
+      removeDraft: mo,
+      commitDraft: po,
+      commitAll: bl,
+      discardAll: kl,
+      isDraft: wo,
+      getDraftErrors: Co
+    } = Xl({
+      schema: h(i, "schema"),
+      groupFieldId: h(i, "groupBy")
+    }), hl = b(() => Fe.value.size > 0);
+    function ml() {
+      i.schema ? gl() : c("add-row");
+    }
+    function pl() {
+      const l = bl();
+      l.length > 0 && c("drafts-commit-all", { records: l });
+    }
+    function wl() {
+      kl();
+    }
+    const w = S({ visible: !1, colKey: "", colLabel: "", x: 0, y: 0 }), X = S(!1);
+    function fe(l, o) {
+      var r;
+      const e = C.value.find((d) => d.key === o), n = (r = i.fieldDefs) == null ? void 0 : r.find((d) => d.id === o);
+      w.value = {
+        visible: !0,
+        colKey: o,
+        colLabel: (e == null ? void 0 : e.label) ?? o,
+        fieldType: n == null ? void 0 : n.type,
+        x: l.clientX,
+        y: l.clientY
+      };
+    }
+    function ce(l) {
+      var e, n;
+      const o = C.value.find((r) => r.key === l);
+      w.value = {
+        visible: !0,
+        colKey: l,
+        colLabel: (o == null ? void 0 : o.label) ?? l,
+        fieldType: (n = (e = i.fieldDefs) == null ? void 0 : e.find((r) => r.id === l)) == null ? void 0 : n.type,
+        x: 200,
+        y: 100
+      };
+    }
+    function Cl(l, o) {
+      c("schema-rename-field", { fieldId: l, newName: o });
+    }
+    function Dl(l, o) {
+      c("schema-change-field-type", { fieldId: l, newType: o });
+    }
+    function xl(l) {
+      c("schema-hide-field", l);
+    }
+    function Rl(l) {
+      c("schema-delete-field", l);
+    }
+    function Sl(l) {
+      c("schema-duplicate-field", l);
+    }
+    function ve() {
+      X.value = !0;
+    }
+    function Ml(l) {
+      c("schema-add-field", l), X.value = !1;
+    }
+    const $ = b(() => i.readonly ? !1 : i.selectable), He = b(() => i.readonly ? !1 : i.addable), $l = b(() => Array.from(p.value)), Be = b(() => p.value.size > 0 && !oe.value);
+    function Ie() {
+      el(V.value);
+    }
+    function U(l) {
+      const o = V.value.find((e) => e[i.rowKey] === l);
+      o && ll(o, 0);
+    }
+    be($l, (l) => c("selection-change", l), { immediate: !1 });
+    function u(l) {
+      const o = l[i.rowKey];
+      return o != null ? String(o) : "";
+    }
+    function F(l) {
+      var o;
+      return ((o = i.fieldDefs) == null ? void 0 : o.find((e) => e.id === l)) ?? {
+        id: l,
         type: "text",
-        label: e
+        label: l
       };
     }
-    function E(e, l, o) {
-      U(e, l, o), s("cell-edit", { rowId: e, fieldId: l, value: o });
+    function H(l, o, e) {
+      je(l, o, e), c("cell-edit", { rowId: l, fieldId: o, value: e });
     }
-    function G(e) {
-      const l = e;
-      if (l.__record) {
-        s("row-click-record", l.__record), s("row-click", l.__record);
+    function B(l) {
+      if (he.value) {
+        P.value = l, G.value = !0;
+        return;
+      }
+      const o = l;
+      if (o.__record) {
+        c("row-click-record", o.__record), c("row-click", o.__record);
         return;
       }
-      s("row-click", e);
+      c("row-click", l);
+    }
+    function ye(l, o) {
+      Ue(l, o);
+    }
+    function ge(l) {
+      Ze(l, te.value);
+    }
+    function Tl(l) {
+      rl(l);
+      const o = l.target;
+      we.value = o.scrollLeft;
     }
-    function K(e) {
+    function q(l) {
       return {
-        groupKey: e.__groupKey,
-        count: e.__groupCount,
-        collapsed: Q.value.has(e.__groupKey),
-        colorMap: t.groupColorMap,
-        selectable: C.value
+        groupKey: l.__groupKey,
+        count: l.__groupCount,
+        collapsed: tl.value.has(
+          l.__groupPath ? l.__groupPath.join("/") : l.__groupKey
+        ),
+        colorMap: i.groupColorMap,
+        selectable: $.value,
+        level: l.__groupLevel ?? 0,
+        aggregations: l.__aggregations
       };
     }
-    function x(e) {
+    function J(l) {
+      return l.__groupPath ? l.__groupPath.join("/") : l.__groupKey;
+    }
+    function Ke(l) {
       return {
-        row: e,
-        rowKey: t.rowKey,
-        selected: w.value.has(h(e)),
-        selectable: C.value,
-        columns: R.value,
-        priorityColorMap: t.priorityColorMap,
-        statusColorMap: t.statusColorMap
+        row: l,
+        rowKey: i.rowKey,
+        selected: p.value.has(u(l)),
+        selectable: $.value,
+        columns: C.value,
+        priorityColorMap: i.priorityColorMap,
+        statusColorMap: i.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" })
+    function Ee(l, o) {
+      const e = Re.value;
+      return e !== null && e.rowId === l && e.colKey === o;
+    }
+    function _e(l, o) {
+      return dl.value.some((e) => e.rowId === l && e.colKey === o);
+    }
+    function Le(l) {
+      const o = u(l);
+      return {
+        "of-row-dragging": ul.value && fl.value === o,
+        "of-row-drop-target": ue.value === o,
+        "of-row-drop-before": ue.value === o && Me.value === "before",
+        "of-row-drop-after": ue.value === o && Me.value === "after"
+      };
+    }
+    function zl(l) {
+      P.value = l, G.value = !0;
+    }
+    function Al(l) {
+      for (const [o, e] of Object.entries(l.fields))
+        c("cell-edit", { rowId: l.rowId, fieldId: o, value: e });
+    }
+    return (l, o) => t(he) ? (a(), s(v, { key: 0 }, [
+      T(Il, {
+        rows: t(V),
+        columns: C.value,
+        selectable: $.value,
+        addable: He.value,
+        "status-color-map": f.statusColorMap,
+        readonly: f.readonly,
+        onRowClick: zl,
+        onAddRow: o[0] || (o[0] = (e) => c("add-row"))
+      }, null, 8, ["rows", "columns", "selectable", "addable", "status-color-map", "readonly"]),
+      P.value ? (a(), y(Kl, {
+        key: 0,
+        row: P.value,
+        columns: C.value,
+        "field-defs": f.fieldDefs,
+        visible: G.value,
+        onClose: o[1] || (o[1] = (e) => G.value = !1),
+        onSave: Al,
+        onDelete: o[2] || (o[2] = (e) => c("row-click", { id: e, __action: "delete" })),
+        onCellEdit: o[3] || (o[3] = (e) => c("cell-edit", e))
+      }, null, 8, ["row", "columns", "field-defs", "visible"])) : M("", !0)
+    ], 64)) : (a(), s("div", {
+      key: 1,
+      ref_key: "tableContainerRef",
+      ref: te,
+      class: "of-data-table",
+      role: "grid",
+      tabindex: f.enableKeyboard ? 0 : void 0,
+      onKeydown: o[14] || (o[14] = (e) => f.enableKeyboard ? t(il)(e) : void 0)
+    }, [
+      nl.value ? (a(), s("div", ql, [
+        g("div", {
+          ref_key: "fixedContainerRef",
+          ref: pe,
+          class: z(["of-data-table-fixed-region", { "of-fixed-shadow": al.value }]),
+          style: k({ width: t(Ce) + "px" }),
+          onScroll: o[8] || (o[8] = //@ts-ignore
+          (...e) => t(De) && t(De)(...e))
         }, [
-          $("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
+          T(ke, {
+            columns: t(ne),
+            selectable: $.value,
+            "sort-key": t(A).field ?? "",
+            "sort-order": t(A).order ?? "asc",
+            "all-selected": t(oe),
+            indeterminate: Be.value,
+            "enable-resize": f.enableResize,
+            "enable-field-menu": f.enableFieldManagement,
+            "enable-add-field": f.enableFieldManagement,
+            onSort: t(O),
+            onSelectAll: Ie,
+            onResizeStart: ye,
+            onResizeDblclick: ge,
+            onHeaderContextmenu: fe,
+            onHeaderDblclick: ce,
+            onAddField: ve
+          }, null, 8, ["columns", "selectable", "sort-key", "sort-order", "all-selected", "indeterminate", "enable-resize", "enable-field-menu", "enable-add-field", "onSort"]),
+          g("div", Jl, [
+            re.value ? (a(), s("div", {
+              key: 0,
+              style: k({ height: t(de) + "px", position: "relative" })
+            }, [
+              g("div", {
+                style: k({ transform: `translateY(${t(ie)}px)` })
+              }, [
+                (a(!0), s(v, null, m(t(se), ({ data: e, index: n }) => (a(), s(v, {
+                  key: e.id
+                }, [
+                  t(x)(e) ? (a(), y(Z, K({
+                    key: 0,
+                    ref_for: !0,
+                    ref: (r) => t(j)((r == null ? void 0 : r.$el) ?? r, n)
+                  }, { ref_for: !0 }, q(e), {
+                    onToggle: (r) => t(N)(J(e))
+                  }), null, 16, ["onToggle"])) : (a(), s("div", {
+                    key: 1,
+                    ref_for: !0,
+                    ref: (r) => t(j)(r, n),
+                    class: z(["of-table-row", {
+                      "of-table-row--selected": t(p).has(u(e)),
+                      "of-table-row--hover": t(Y)(u(e))
+                    }]),
+                    onMouseenter: (r) => t(R)(u(e)),
+                    onMouseleave: o[5] || (o[5] = (r) => t(R)(null)),
+                    onClick: (r) => B(e)
+                  }, [
+                    $.value ? (a(), s("div", {
+                      key: 0,
+                      class: "of-td of-td-checkbox",
+                      onClick: o[4] || (o[4] = _(() => {
+                      }, ["stop"]))
+                    }, [
+                      g("input", {
+                        type: "checkbox",
+                        class: "of-checkbox",
+                        checked: t(p).has(u(e)),
+                        onChange: (r) => U(u(e))
+                      }, null, 40, Zl)
+                    ])) : M("", !0),
+                    (a(!0), s(v, null, m(t(ne), (r) => (a(), s("div", {
+                      key: r.key,
+                      class: "of-td",
+                      style: k({
+                        width: (r.width === "fill" ? 200 : r.width) + "px",
+                        flexShrink: "0"
+                      })
+                    }, [
+                      Q(l.$slots, "cell", {
+                        row: e,
+                        col: r
+                      }, () => {
+                        var d;
+                        return [
+                          (d = f.fieldDefs) != null && d.length ? (a(), y(E, {
+                            key: 0,
+                            "row-id": u(e),
+                            field: F(r.key),
+                            value: e[r.key],
+                            onCommit: H
+                          }, null, 8, ["row-id", "field", "value"])) : (a(), s("span", eo, L(e[r.key] ?? "-"), 1))
+                        ];
+                      }, !0)
+                    ], 4))), 128))
+                  ], 42, Ql))
+                ], 64))), 128))
+              ], 4)
+            ], 4)) : (a(!0), s(v, { key: 1 }, m(t(D), (e) => (a(), s(v, {
+              key: e.id
+            }, [
+              t(x)(e) ? (a(), y(Z, K({
+                key: 0,
+                ref_for: !0
+              }, q(e), {
+                onToggle: (n) => t(N)(J(e))
+              }), null, 16, ["onToggle"])) : (a(), s("div", {
+                key: 1,
+                class: z(["of-table-row", {
+                  "of-table-row--selected": t(p).has(u(e)),
+                  "of-table-row--hover": t(Y)(u(e))
+                }]),
+                onMouseenter: (n) => t(R)(u(e)),
+                onMouseleave: o[7] || (o[7] = (n) => t(R)(null)),
+                onClick: (n) => B(e)
               }, [
-                r(_)(o) ? (a(), m(L, y({
+                $.value ? (a(), s("div", {
                   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({
+                  class: "of-td of-td-checkbox",
+                  onClick: o[6] || (o[6] = _(() => {
+                  }, ["stop"]))
+                }, [
+                  g("input", {
+                    type: "checkbox",
+                    class: "of-checkbox",
+                    checked: t(p).has(u(e)),
+                    onChange: (n) => U(u(e))
+                  }, null, 40, oo)
+                ])) : M("", !0),
+                (a(!0), s(v, null, m(t(ne), (n) => (a(), s("div", {
+                  key: n.key,
+                  class: "of-td",
+                  style: k({
+                    width: (n.width === "fill" ? 200 : n.width) + "px",
+                    flexShrink: "0"
+                  })
+                }, [
+                  Q(l.$slots, "cell", {
+                    row: e,
+                    col: n
+                  }, () => {
+                    var r;
+                    return [
+                      (r = f.fieldDefs) != null && r.length ? (a(), y(E, {
+                        key: 0,
+                        "row-id": u(e),
+                        field: F(n.key),
+                        value: e[n.key],
+                        onCommit: H
+                      }, null, 8, ["row-id", "field", "value"])) : (a(), s("span", to, L(e[n.key] ?? "-"), 1))
+                    ];
+                  }, !0)
+                ], 4))), 128))
+              ], 42, lo))
+            ], 64))), 128))
+          ])
+        ], 38),
+        g("div", {
+          ref_key: "scrollContainerRef",
+          ref: W,
+          class: "of-data-table-scroll-region",
+          style: k({ marginLeft: t(Ce) + "px" }),
+          onScroll: Tl
+        }, [
+          T(ke, {
+            columns: t(ae),
+            selectable: !1,
+            "sort-key": t(A).field ?? "",
+            "sort-order": t(A).order ?? "asc",
+            "enable-resize": f.enableResize,
+            "enable-field-menu": f.enableFieldManagement,
+            "enable-add-field": f.enableFieldManagement,
+            onSort: t(O),
+            onResizeStart: ye,
+            onResizeDblclick: ge,
+            onHeaderContextmenu: fe,
+            onHeaderDblclick: ce,
+            onAddField: ve
+          }, null, 8, ["columns", "sort-key", "sort-order", "enable-resize", "enable-field-menu", "enable-add-field", "onSort"]),
+          g("div", no, [
+            re.value ? (a(), s("div", {
               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)
-    ]));
+              style: k({ height: t(de) + "px", position: "relative" })
+            }, [
+              g("div", {
+                style: k({ transform: `translateY(${t(ie)}px)` })
+              }, [
+                (a(!0), s(v, null, m(t(se), ({ data: e }) => (a(), s(v, {
+                  key: e.id
+                }, [
+                  t(x)(e) ? (a(), s("div", ao)) : (a(), s("div", {
+                    key: 1,
+                    class: z(["of-table-row", {
+                      "of-table-row--selected": t(p).has(u(e)),
+                      "of-table-row--hover": t(Y)(u(e))
+                    }]),
+                    onMouseenter: (n) => t(R)(u(e)),
+                    onMouseleave: o[9] || (o[9] = (n) => t(R)(null)),
+                    onClick: (n) => B(e)
+                  }, [
+                    (a(!0), s(v, null, m(t(ae), (n) => (a(), s("div", {
+                      key: n.key,
+                      class: "of-td",
+                      style: k({
+                        width: n.width === "fill" ? void 0 : n.width + "px",
+                        flex: n.width === "fill" ? "1 1 " + (n.minWidth ?? 220) + "px" : "0 0 auto"
+                      })
+                    }, [
+                      Q(l.$slots, "cell", {
+                        row: e,
+                        col: n
+                      }, () => {
+                        var r;
+                        return [
+                          (r = f.fieldDefs) != null && r.length ? (a(), y(E, {
+                            key: 0,
+                            "row-id": u(e),
+                            field: F(n.key),
+                            value: e[n.key],
+                            onCommit: H
+                          }, null, 8, ["row-id", "field", "value"])) : (a(), s("span", so, L(e[n.key] ?? "-"), 1))
+                        ];
+                      }, !0)
+                    ], 4))), 128))
+                  ], 42, ro))
+                ], 64))), 128))
+              ], 4)
+            ], 4)) : (a(!0), s(v, { key: 1 }, m(t(D), (e) => (a(), s(v, {
+              key: e.id
+            }, [
+              t(x)(e) ? (a(), s("div", io)) : (a(), s("div", {
+                key: 1,
+                class: z(["of-table-row", {
+                  "of-table-row--selected": t(p).has(u(e)),
+                  "of-table-row--hover": t(Y)(u(e))
+                }]),
+                onMouseenter: (n) => t(R)(u(e)),
+                onMouseleave: o[10] || (o[10] = (n) => t(R)(null)),
+                onClick: (n) => B(e)
+              }, [
+                (a(!0), s(v, null, m(t(ae), (n) => (a(), s("div", {
+                  key: n.key,
+                  class: "of-td",
+                  style: k({
+                    width: n.width === "fill" ? void 0 : n.width + "px",
+                    flex: n.width === "fill" ? "1 1 " + (n.minWidth ?? 220) + "px" : "0 0 auto"
+                  })
+                }, [
+                  Q(l.$slots, "cell", {
+                    row: e,
+                    col: n
+                  }, () => {
+                    var r;
+                    return [
+                      (r = f.fieldDefs) != null && r.length ? (a(), y(E, {
+                        key: 0,
+                        "row-id": u(e),
+                        field: F(n.key),
+                        value: e[n.key],
+                        onCommit: H
+                      }, null, 8, ["row-id", "field", "value"])) : (a(), s("span", fo, L(e[n.key] ?? "-"), 1))
+                    ];
+                  }, !0)
+                ], 4))), 128))
+              ], 42, uo))
+            ], 64))), 128))
+          ])
+        ], 36)
+      ])) : (a(), s(v, { key: 1 }, [
+        T(ke, {
+          columns: C.value,
+          selectable: $.value,
+          "sort-key": t(A).field ?? "",
+          "sort-order": t(A).order ?? "asc",
+          "all-selected": t(oe),
+          indeterminate: Be.value,
+          "enable-resize": f.enableResize,
+          "enable-field-menu": f.enableFieldManagement,
+          "enable-add-field": f.enableFieldManagement,
+          onSort: t(O),
+          onSelectAll: Ie,
+          onResizeStart: ye,
+          onResizeDblclick: ge,
+          onHeaderContextmenu: fe,
+          onHeaderDblclick: ce,
+          onAddField: ve
+        }, null, 8, ["columns", "selectable", "sort-key", "sort-order", "all-selected", "indeterminate", "enable-resize", "enable-field-menu", "enable-add-field", "onSort"]),
+        g("div", {
+          ref_key: "scrollContainerRef",
+          ref: W,
+          class: "of-data-table-scroll-container"
+        }, [
+          re.value ? (a(), s("div", {
+            key: 0,
+            style: k({ height: t(de) + "px", position: "relative" })
+          }, [
+            g("div", {
+              style: k({ transform: `translateY(${t(ie)}px)` })
+            }, [
+              (a(!0), s(v, null, m(t(se), ({ data: e, index: n }) => {
+                var r;
+                return a(), s(v, {
+                  key: e.id
+                }, [
+                  t(x)(e) ? (a(), y(Z, K({
+                    key: 0,
+                    ref_for: !0,
+                    ref: (d) => t(j)((d == null ? void 0 : d.$el) ?? d, n)
+                  }, { ref_for: !0 }, q(e), {
+                    onToggle: (d) => t(N)(J(e))
+                  }), null, 16, ["onToggle"])) : (a(), y(Oe, K({
+                    key: 1,
+                    ref_for: !0,
+                    ref: (d) => t(j)((d == null ? void 0 : d.$el) ?? d, n)
+                  }, { ref_for: !0 }, Ke(e), {
+                    draggable: f.enableRowDrag,
+                    class: Le(e),
+                    onSelect: U,
+                    onClick: (d) => B(e),
+                    onDragstart: (d) => Te(d, e),
+                    onDragover: (d) => ze(d, e),
+                    onDrop: (d) => Ae(d, e),
+                    onDragend: t($e)
+                  }), Pe({ _: 2 }, [
+                    (r = f.fieldDefs) != null && r.length ? {
+                      name: "cell",
+                      fn: Ve(({ row: d, col: I }) => [
+                        T(E, {
+                          "row-id": u(d),
+                          field: F(I.key),
+                          value: d[I.key],
+                          class: z({
+                            "of-cell--active": Ee(u(d), I.key),
+                            "of-cell--selected": _e(u(d), I.key)
+                          }),
+                          onCommit: H,
+                          onClick: _((Do) => f.enableKeyboard && t(Se)(u(d), I.key), ["stop"])
+                        }, null, 8, ["row-id", "field", "value", "class", "onClick"])
+                      ]),
+                      key: "0"
+                    } : void 0
+                  ]), 1040, ["draggable", "class", "onClick", "onDragstart", "onDragover", "onDrop", "onDragend"]))
+                ], 64);
+              }), 128))
+            ], 4)
+          ], 4)) : (a(!0), s(v, { key: 1 }, m(t(D), (e) => {
+            var n;
+            return a(), s(v, {
+              key: e.id
+            }, [
+              t(x)(e) ? (a(), y(Z, K({
+                key: 0,
+                ref_for: !0
+              }, q(e), {
+                onToggle: (r) => t(N)(J(e))
+              }), null, 16, ["onToggle"])) : (a(), y(Oe, K({
+                key: 1,
+                ref_for: !0
+              }, Ke(e), {
+                draggable: f.enableRowDrag,
+                class: Le(e),
+                onSelect: U,
+                onClick: (r) => B(e),
+                onDragstart: (r) => Te(r, e),
+                onDragover: (r) => ze(r, e),
+                onDrop: (r) => Ae(r, e),
+                onDragend: t($e)
+              }), Pe({ _: 2 }, [
+                (n = f.fieldDefs) != null && n.length ? {
+                  name: "cell",
+                  fn: Ve(({ row: r, col: d }) => [
+                    T(E, {
+                      "row-id": u(r),
+                      field: F(d.key),
+                      value: r[d.key],
+                      class: z({
+                        "of-cell--active": Ee(u(r), d.key),
+                        "of-cell--selected": _e(u(r), d.key)
+                      }),
+                      onCommit: H,
+                      onClick: _((I) => f.enableKeyboard && t(Se)(u(r), d.key), ["stop"])
+                    }, null, 8, ["row-id", "field", "value", "class", "onClick"])
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1040, ["draggable", "class", "onClick", "onDragstart", "onDragover", "onDrop", "onDragend"]))
+            ], 64);
+          }), 128))
+        ], 512)
+      ], 64)),
+      t(Je) ? (a(), s("div", {
+        key: 2,
+        class: "of-resize-indicator",
+        style: k({ left: t(Qe) + "px" })
+      }, null, 4)) : M("", !0),
+      hl.value ? (a(), s("div", co, [
+        g("span", vo, L(t(Fe).size) + " 条草稿", 1),
+        g("button", {
+          class: "of-data-table-draft-btn of-data-table-draft-btn--commit",
+          onClick: pl
+        }, " 全部提交 "),
+        g("button", {
+          class: "of-data-table-draft-btn of-data-table-draft-btn--discard",
+          onClick: wl
+        }, " 全部放弃 ")
+      ])) : M("", !0),
+      He.value ? (a(), y(Bl, {
+        key: 4,
+        onClick: ml
+      })) : M("", !0),
+      f.enableFieldManagement ? (a(), y(t(We), {
+        key: 5,
+        visible: w.value.visible,
+        "col-key": w.value.colKey,
+        "col-label": w.value.colLabel,
+        "field-type": w.value.fieldType,
+        x: w.value.x,
+        y: w.value.y,
+        onClose: o[11] || (o[11] = (e) => w.value.visible = !1),
+        onRename: Cl,
+        onChangeType: Dl,
+        onSort: o[12] || (o[12] = (e, n) => t(O)(e)),
+        onHide: xl,
+        onDelete: Rl,
+        onDuplicate: Sl
+      }, null, 8, ["visible", "col-key", "col-label", "field-type", "x", "y"])) : M("", !0),
+      (a(), y(Hl, { to: "body" }, [
+        X.value ? (a(), s("div", {
+          key: 0,
+          class: "of-add-field-overlay",
+          onClick: o[13] || (o[13] = _((e) => X.value = !1, ["self"]))
+        }, [
+          g("div", yo, [
+            T(t(Ye), { onSelect: Ml })
+          ])
+        ])) : M("", !0)
+      ]))
+    ], 40, Ul));
   }
 });
 export {
-  Ee as default
+  No as default
 };