@oneflowui/ui 0.5.4 → 0.5.5

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

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