@farris/ui-vue/designer/data-view/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { computed as R, watch as T, ref as V, createVNode as F, Fragment as z, createTextVNode as G } from "vue";
function K(i, l, u, r, d) {
  const { getGridHeaderCells: h } = d, f = 120, _ = 50, O = R(() => {
    var e;
    return ((e = i.rowNumber) == null ? void 0 : e.enable) || !1;
  }), A = R(() => {
    var e, t;
    return ((e = i.selection) == null ? void 0 : e.multiSelect) || ((t = i.selection) == null ? void 0 : t.showCheckbox) || !1;
  }), D = R(
    () => {
      var e;
      return 0 + (O.value ? ((e = i.rowNumber) == null ? void 0 : e.width) || 32 : 0) + (A.value ? _ : 0);
    }
  ), S = R(() => {
    var e;
    return (e = i.columnOption) == null ? void 0 : e.fitColumns;
  }), M = R(() => {
    var e;
    return S.value && ((e = i.columnOption) == null ? void 0 : e.fitMode) || "none";
  });
  function I(e, t, o) {
    const c = parseInt(e.width, 10) / 100;
    return o * c;
  }
  function W(e, t, o) {
    return typeof e.width == "string" ? I(e, t, o) : e.width || f;
  }
  function N(e, t) {
    const o = [], c = [];
    let m = 0;
    e.value.primaryColumns.forEach((p) => {
      typeof p.width == "string" ? c.push(p) : (p.width = p.width || f, m += p.width, o.push(p));
    });
    const y = t * (o.length / e.value.primaryColumns.length);
    o.forEach((p) => {
      const s = y * (p.width / m);
      p.actualWidth = s, e.value.primaryColumnsWidth += p.actualWidth;
    });
    const w = t - y;
    c.forEach((p) => {
      const s = I(p, e.value, w);
      p.actualWidth = s, e.value.primaryColumnsWidth += p.actualWidth;
    });
  }
  function C(e, t) {
    const o = [], c = [], m = /* @__PURE__ */ new WeakMap();
    let y = 0, w = 0;
    if (e.value.primaryColumns.forEach((s) => {
      if (typeof s.width == "string") {
        const v = I(s, e.value, t);
        m.set(s, v), y += v, c.push(s);
      } else
        s.width = s.width || f, w += s.width, o.push(s);
    }), t - y > w) {
      const s = t - y;
      c.forEach((v) => {
        v.actualWidth = m.get(v) || f, e.value.primaryColumnsWidth += v.actualWidth;
      }), o.forEach((v) => {
        v.actualWidth = s * (v.width / w), e.value.primaryColumnsWidth += v.actualWidth;
      });
    } else
      N(e, t);
  }
  function g(e, t) {
    e.value.primaryColumns.forEach((o) => {
      o.actualWidth = W(o, e.value, t), e.value.primaryColumnsWidth += o.actualWidth;
    });
  }
  const P = {
    expand: C,
    none: g,
    percentage: N
  };
  function E(e) {
    e.value.leftHeaderColumns = Array.from(h(e.value.leftColumns).values()), e.value.primaryHeaderColumns = Array.from(h(e.value.primaryColumns).values()), e.value.rightHeaderColumns = Array.from(h(e.value.rightColumns).values());
  }
  function b(e) {
    e.value.leftColumnsWidth = 0, e.value.primaryColumnsWidth = 0, e.value.rightColumnsWidth = 0, e.value.leftColumns.forEach((t) => {
      e.value.leftColumnsWidth += t.actualWidth || 0;
    }), e.value.primaryColumns.forEach((t) => {
      e.value.primaryColumnsWidth += t.actualWidth || 0;
    }), e.value.rightColumns.forEach((t) => {
      e.value.rightColumnsWidth += t.actualWidth || 0;
    }), e.value = Object.assign({}, e.value);
  }
  function n(e, t, o) {
    var v;
    let c = 0;
    const m = e.value.primaryColumns, y = e.value.rightColumns;
    e.value.rightColumns.forEach((k) => {
      k.actualWidth = W(k, e.value, t), c += k.actualWidth;
    });
    const w = o - c, p = P[M.value];
    if (p && p(e, w), e.value.primaryColumnsWidth + c <= o)
      return e.value.primaryColumns = [...m, ...y], e.value.primaryColumnsWidth += c, e.value.rightColumns = [], e.value.rightColumnsWidth = 0, !0;
    const s = /* @__PURE__ */ new Map();
    return s.set("primary", []), s.set("right", []), e.value.primaryColumns.reduce((k, H) => {
      var $, B;
      return H.fixed === "right" ? ($ = k.get("right")) == null || $.push(H) : (B = k.get("primary")) == null || B.push(H), k;
    }, s), (v = s.get("right")) != null && v.length && (e.value.primaryColumns = [...s.get("primary") || []], e.value.rightColumns = [...s.get("right") || []]), e.value.primaryColumnsWidth = 0, e.value.rightColumnsWidth = 0, !1;
  }
  function a() {
    if (u.value) {
      l.value.leftColumnsWidth = 0, l.value.primaryColumnsWidth = 0, l.value.rightColumnsWidth = 0;
      const e = u.value.clientWidth - D.value;
      l.value.leftColumns.forEach((o) => {
        o.actualWidth = W(o, l.value, e), l.value.leftColumnsWidth += o.actualWidth;
      });
      const t = e - l.value.leftColumnsWidth;
      if (n(l, e, t))
        r.value = t;
      else {
        l.value.rightColumns.forEach((m) => {
          m.actualWidth = W(m, l.value, e), l.value.rightColumnsWidth += m.actualWidth;
        });
        const o = e - l.value.leftColumnsWidth - l.value.rightColumnsWidth, c = P[M.value];
        c && c(l, o), r.value = o;
      }
      E(l), l.value = Object.assign({}, l.value);
    }
  }
  return T(() => {
    var e;
    return (e = i.columnOption) == null ? void 0 : e.fitColumns;
  }, (e, t) => {
    e !== t && e && a();
  }), T(M, (e, t) => {
    e !== t && S.value && a();
  }), { calculateColumnHeaders: E, calculateColumnsSize: a, calculateColumnsWidth: b };
}
const L = "";
function Y(i) {
  const r = V({
    defaultColumnWidth: 120,
    headerDepth: 1,
    leftColumns: [],
    leftColumnsMap: /* @__PURE__ */ new Map(),
    leftColumnsWidth: 0,
    leftHeaderColumns: [],
    primaryColumns: [],
    primaryColumnsMap: /* @__PURE__ */ new Map(),
    primaryColumnsWidth: 0,
    primaryHeaderColumns: [],
    rightColumns: [],
    rightColumnsMap: /* @__PURE__ */ new Map(),
    rightColumnsWidth: 0,
    rightHeaderColumns: [],
    summaryColumns: []
  });
  function d() {
    r.value = {
      defaultColumnWidth: 120,
      headerDepth: 1,
      leftColumns: [],
      leftColumnsMap: /* @__PURE__ */ new Map(),
      leftColumnsWidth: 0,
      leftHeaderColumns: [],
      primaryColumns: [],
      primaryColumnsMap: /* @__PURE__ */ new Map(),
      primaryColumnsWidth: 0,
      primaryHeaderColumns: [],
      rightColumns: [],
      rightColumnsMap: /* @__PURE__ */ new Map(),
      rightColumnsWidth: 0,
      rightHeaderColumns: [],
      summaryColumns: []
    };
  }
  const h = V(i.summary), f = R(() => {
    const n = h.value;
    return (n == null ? void 0 : n.groupFields) || [];
  });
  function _() {
    r.value.rightColumns.forEach((e) => {
      e.showSetting = !1;
    }), r.value.primaryColumns.forEach((e) => {
      e.showSetting = !1;
    });
    const n = r.value.rightColumns, a = r.value.primaryColumns;
    n.length > 0 ? n[n.length - 1].showSetting = !0 : a.length > 0 && (a[a.length - 1].showSetting = !0);
  }
  function O(n) {
    d();
    const a = /* @__PURE__ */ new Map();
    return f.value && f.value.reduce((e, t) => (e.set(t, !0), e), a), n.reduce((e, t) => (t.filter = t.filter || L, t.fixed === "left" ? (r.value.leftColumns.push(t), r.value.leftColumnsMap.set(t.field, t), r.value.leftColumnsWidth += t.actualWidth) : t.fixed === "right" ? (r.value.rightColumns.push(t), r.value.rightColumnsMap.set(t.field, t), r.value.rightColumnsWidth += t.actualWidth) : (r.value.primaryColumns.push(t), r.value.primaryColumnsMap.set(t.field, t), r.value.primaryColumnsWidth += t.actualWidth), a.has(t.field) && r.value.summaryColumns.push(t), e), r), _(), r;
  }
  O(i.columns);
  const A = R(() => r.value.leftColumns.length > 0), D = R(() => r.value.rightColumns.length > 0);
  function S(n, a) {
    return a.sortable && a.sort && a.sort !== "none" && n.push(a), n;
  }
  function M(n, a) {
    return n.sortOrder = n.sortOrder || 0, a.sortOrder = a.sortOrder || 0, n.sortOrder === a.sortOrder ? 0 : n.sortOrder < a.sortOrder ? -1 : 1;
  }
  function I(n, a) {
    return n.sortOrder = n.sortOrder || 0, a.sortOrder = a.sortOrder || 0, n.sortOrder === a.sortOrder ? 0 : n.sortOrder < a.sortOrder ? 1 : -1;
  }
  function W(n, a) {
    return a.filterable && n.push(a), n;
  }
  function N() {
    const n = [];
    return r.value.leftColumns.reduce(W, n), r.value.primaryColumns.reduce(W, n), r.value.rightColumns.reduce(W, n), n;
  }
  function C() {
    const n = [];
    r.value.leftColumns.reduce(S, n), r.value.primaryColumns.reduce(S, n), r.value.rightColumns.reduce(S, n);
    const a = Math.max(...n.map((e) => e.sortOrder || 0));
    return n.sort(I).map((e) => {
      const t = e.sortOrder || a + 1;
      return e.sortOrder = t, e;
    }).sort(M).map((e, t) => {
      const o = t + 1;
      return e.sortOrder = o, e;
    });
  }
  function g(n, a, e) {
    const t = n.map((o) => {
      const c = e.getSorterByColumn(o), m = o.sort === "asc", y = o.sort === "desc", w = m ? c.ascend : y ? c.decend : void 0;
      return { field: o.field, compare: w };
    });
    a.setSorters(t);
  }
  function P(n, a) {
    const e = C();
    g(e, n, a);
  }
  function E(n) {
  }
  function b(n) {
  }
  return {
    applyColumnSorter: P,
    collectionFilterableColumns: N,
    applySortableColumns: g,
    collectionSortableColumns: C,
    columnContext: r,
    hasLeftFixedColumn: A,
    hasRightFixedColumn: D,
    updateColumnRenderContext: O,
    updateColumnSettingIcon: _,
    sortFromServer: E,
    createSortConditions: b
  };
}
function q(i, l, u, r, d, h, f, _) {
  const O = V(r.value - 1 + d), A = V(0), { renderDataRow: D } = h, S = f ? f.renderGroupRow : D, M = _ ? _.renderSummaryRow : D;
  function I(C) {
    let g = D;
    return C.__fv_data_grid_group_row__ && (g = S), C.__fv_data_grid_group_summary__ && (g = M), g;
  }
  function W(C, g, P, E) {
    const { dataView: b } = u, n = [];
    if (b.value.length > 0) {
      const a = E ? Date.now().toString() : "";
      let e = C, t = 0;
      const o = g - C + 1;
      for (; n.length < o && e < b.value.length; ) {
        const c = b.value[e], m = b.value[e - 1] || P, y = n[t - 1], w = m ? (m.__fv_data_position__ || 0) + (m.__fv_data_height__ || 0) : 0, s = I(c)(c, m, y, e, w, l.value, n);
        s.refreshKey = a, n.push(s), t++, e++;
      }
    }
    return A.value = n.length > 0 ? n[0].index : 0, O.value = n.length > 0 ? n[n.length - 1].index : 0, n;
  }
  function N(C, g, P) {
    const E = g.groupField || "", { groupValue: b, raw: n } = g;
    u[C](E, b, n.groupParents || []);
    const { dataView: a } = u, e = P[0].index, t = Math.min(e + r.value + d + 1, a.value.length - 1);
    return W(e, t);
  }
  return { getVisualData: W, maxVisibleRowIndex: O, minVisibleRowIndex: A, toggleGroupRow: N };
}
function J() {
  function i(l) {
    return {
      title: "行配置",
      description: "",
      properties: {
        customRowStyle: {
          title: "行样式",
          type: "string",
          description: "自定义行样式",
          $converter: "/converter/row-option.converter",
          editor: {
            type: "code-editor",
            language: "javascript",
            leftTemplate: () => F(z, null, [F("h5", null, [G("示例代码")]), F("pre", null, [`
(dataItem) => {
    if(dataItem.code === '0001') {
        return {
          class: {
            'text-align': true,
            'text-red': true
          },
          style: {
            'background-color': '#000',
            'font-size': '1rem'
          }
        };
    }
    return {};
}
    
注: dataItem  行数据
                                `])])
          }
        },
        customCellStyle: {
          title: "单元格样式",
          type: "string",
          description: "自定义单元格样式",
          $converter: "/converter/row-option.converter",
          editor: {
            type: "code-editor",
            language: "javascript",
            leftTemplate: () => F(z, null, [F("h5", null, [G("示例代码")]), F("pre", null, [`
(cell) => {
    if(cell.data === '0002' && 
        cell.column.field === 'name') {
        return {
          class: {
            'text-align': true,
            'text-red': true
          },
          style: {
            'background-color': '#000',
            'font-size': '1rem'
          }
        };
    }
    return {};
}
注: cell.data   单元格数据
    cell.column 列数据
                                `])])
          }
        }
      }
    };
  }
  return {
    getRowOptionProperties: i
  };
}
function Q() {
  function i(l) {
    return {
      title: "填充列宽",
      description: "",
      properties: {
        fitColumns: {
          title: "启用",
          type: "boolean",
          description: "启用填充列宽",
          $converter: "/converter/column-option.converter",
          refreshPanelAfterChanged: !0
        }
        // fitMode: {
        //     description: '',
        //     title: '填充模式',
        //     type: 'enum',
        //     visible: !!propertyData.column?.fitColumns,
        //     $converter: '/converter/column-option.converter',
        //     editor: {
        //         data: [
        //             { id: 'average', name: '平分' },
        //             { id: 'expand', name: '等比' }
        //         ]
        //     }
        // },
      },
      setPropertyRelates(u, r) {
        switch (u && u.propertyID) {
          case "fitColumns": {
            r.fit = u.propertyValue, r.columns && (u.propertyValue ? r.columns.forEach((d) => {
              d.resizable = !1;
            }) : r.columns.forEach((d) => {
              d.resizable = !0;
            }));
            break;
          }
        }
      }
    };
  }
  return { getColumnOptionProperties: i };
}
function X() {
  function i(l) {
    return {
      title: "操作列",
      description: "",
      properties: {
        enable: {
          title: "启用",
          type: "boolean",
          $converter: "/converter/column-command.converter",
          description: "启用操作列",
          refreshPanelAfterChanged: !0
        }
        // commands: {
        //     description: '',
        //     title: '命令',
        //     type: 'enum',
        //     editor: {
        //         data: [
        //             { id: 'edit', name: '编辑' },
        //             { id: 'remove', name: '删除' }
        //         ]
        //     }
        // },
        // formatter: {
        //     title: '操作列模板',
        //     type: 'string',
        //     visible: false,
        //     description: '自定义操作列模板',
        //     refreshPanelAfterChanged: true,
        //     editor: {
        //         type: "code-editor",
        //         language: "html",
        //     }
        // }
      }
    };
  }
  return { getCommandColumnProperties: i };
}
function Z() {
  function i(l) {
    return {
      title: "合计行",
      description: "",
      properties: {
        enable: {
          title: "启用",
          type: "boolean",
          description: "启用合计行",
          $converter: "/converter/summary.converter",
          refreshPanelAfterChanged: !0
        }
      }
    };
  }
  return { getSummaryProperties: i };
}
function j() {
  function i(l) {
    var u;
    return {
      title: "分组",
      description: "",
      properties: {
        enable: {
          title: "启用",
          type: "boolean",
          description: "启用分组",
          $converter: "/converter/group.converter",
          refreshPanelAfterChanged: !0
        },
        showSummary: {
          title: "显示分组合计行",
          type: "boolean",
          visible: !!((u = l.group) != null && u.enable),
          $converter: "/converter/group.converter",
          description: "显示分组合计行"
        }
        // groupFields: {
        //     title: '启用',
        //     type: 'boolean',
        //     description: '启用分组',
        //     refreshPanelAfterChanged: true
        // }
      }
    };
  }
  return { getGroupProperties: i };
}
function x() {
  function i(l) {
    var r, d;
    const u = [
      {
        label: "onClickRow",
        name: "行点击事件"
      },
      {
        label: "onSelectionChange",
        name: "行切换事件"
      },
      {
        label: "onDoubleClickRow",
        name: "行双击事件"
      },
      {
        label: "onFilterChanged",
        name: "过滤事件"
      },
      {
        label: "onSortChanged",
        name: "排序事件"
      },
      {
        label: "onSelectItem",
        name: "选中行事件"
      },
      {
        label: "onUnSelectItem",
        name: "取消选中行事件"
      },
      {
        label: "onSelectAll",
        name: "全选事件"
      },
      {
        label: "onUnSelectAll",
        name: "取消全选事件"
      }
    ];
    return ((r = l.pagination) == null ? void 0 : r.enable) !== !1 && l.type !== "tree-grid" && u.push(
      {
        label: "onPageIndexChanged",
        name: "切换页码事件"
      },
      {
        label: "onPageSizeChanged",
        name: "分页条数变化事件"
      }
    ), (d = l.command) != null && d.enable && u.push(
      {
        label: "onClickEditCommand",
        name: "操作列编辑事件"
      },
      {
        label: "onClickDeleteCommand",
        name: "操作列删除事件"
      }
    ), u;
  }
  return { initEvent: i };
}
function ee() {
  function i(l) {
    var u, r, d;
    return {
      title: "多选配置",
      $converter: "/converter/grid-selection.converter",
      parentPropertyID: "editor",
      properties: {
        multiSelect: {
          title: "启用多选",
          type: "boolean",
          refreshPanelAfterChanged: !0
        },
        showCheckbox: {
          visible: !!((u = l.selection) != null && u.multiSelect),
          title: "显示复选框",
          type: "boolean",
          refreshPanelAfterChanged: !0
        },
        showSelectAll: {
          visible: !!((r = l.selection) != null && r.multiSelect) && !!((d = l.selection) != null && d.showCheckbox),
          title: "显示全选",
          type: "boolean"
        },
        keepSelectingOnPaging: {
          title: "启用跨页多选",
          type: "boolean"
        },
        showSelection: {
          title: "显示已选数据数量",
          type: "boolean"
        }
      },
      setPropertyRelates(h, f) {
        switch (h && h.propertyID) {
          case "multiSelect":
            l.selection.showCheckbox = h.propertyValue;
            break;
        }
      }
    };
  }
  return { getSelection: i };
}
function te() {
  function i(l) {
    return {
      title: "行号配置",
      $converter: "/converter/row-number.converter",
      parentPropertyID: "rowNumber",
      properties: {
        enable: {
          title: "显示行号",
          type: "boolean",
          refreshPanelAfterChanged: !0
        },
        width: {
          visible: l.rowNumber == null ? !0 : l.rowNumber.enable,
          title: "宽度",
          type: "number"
        },
        heading: {
          visible: l.rowNumber == null ? !0 : l.rowNumber.enable,
          title: "标题",
          type: "string"
        }
      }
    };
  }
  return { getRowNumber: i };
}
function re() {
  function i(l, u) {
    var r, d;
    return {
      title: "分页",
      $converter: "/converter/pagination.converter",
      parentPropertyID: "pagination",
      properties: {
        enable: {
          title: "启用分页",
          type: "boolean",
          refreshPanelAfterChanged: !0,
          editor: {
            readonly: u
          }
        },
        // mode: {
        //     visible: propertyData.pagination?.enable || false,
        //     title: '分页交互模式',
        //     type: "enum",
        //     editor: {
        //         type: "combo-list",
        //         textField: "value",
        //         valueField: "key",
        //         data: [{ "key": "client", "value": "客户端" }, { "key": "server", "value": "服务器端" }]
        //     }
        // },
        showIndex: {
          visible: ((r = l.pagination) == null ? void 0 : r.enable) || !1,
          title: "显示页码",
          type: "boolean"
        },
        showLimits: {
          visible: ((d = l.pagination) == null ? void 0 : d.enable) || !1,
          title: "显示分页条数",
          type: "boolean"
        }
      }
    };
  }
  return { getPagination: i };
}
function ne() {
  function i() {
    return {
      showStripe: {
        title: "显示条纹",
        type: "boolean",
        description: "是否显示条纹"
      },
      showBorder: {
        title: "显示边框",
        type: "boolean",
        description: "是否显示边框"
      },
      showSetting: {
        title: "显示设置按钮",
        type: "boolean",
        description: "是否显示设置按钮"
      },
      emptyTemplate: {
        title: "空模板",
        type: "string",
        description: "空模板",
        editor: {
          type: "code-editor",
          language: "html"
        }
      }
    };
  }
  function l(r, d) {
    return {
      title: "外观",
      properties: {
        class: {
          title: "class样式",
          type: "string",
          description: "组件的class样式"
        },
        columns: {
          title: "列设置",
          description: "列设置",
          type: "array",
          editor: {
            type: "grid-field-editor",
            viewModelId: d,
            gridData: r,
            getLatestGridData: (h) => r
          },
          // 这个属性，标记当属性变更得时候触发重新更新属性
          refreshPanelAfterChanged: !0
        },
        ...i()
        // useBlankWhenDataIsEmpty: {
        //     title: '空数据表格显示空白行',
        //     description: '表格没有数据时是否显示空白行',
        //     type: 'boolean',
        //     refreshPanelAfterChanged: true
        // },
        // emptyDataHeight: {
        //     title: '空数据高度',
        //     type: 'number',
        //     description: '空数据行高度设置',
        //     min: 1,
        //     max: 1000
        // },
      },
      setPropertyRelates(h, f) {
        switch (h && h.propertyID) {
          case "useBlankWhenDataIsEmpty":
            r.emptyDataHeight = r.useBlankWhenDataIsEmpty ? 36 : 240;
            break;
          case "columns":
            r.columns = h.propertyValue || [];
            break;
        }
      }
    };
  }
  function u(r, d) {
    return {
      title: "外观",
      properties: {
        class: {
          title: "class样式",
          type: "string",
          description: "组件的CSS样式"
        },
        columns: {
          title: "列设置",
          description: "列设置",
          $converter: "/converter/items-count.converter",
          editor: {
            type: "grid-field-editor",
            viewModelId: d,
            gridData: r,
            gridType: "tree-grid-column"
          },
          // 这个属性，标记当属性变更得时候触发重新更新属性
          refreshPanelAfterChanged: !0
        },
        ...i()
        // showTreeNodeIcons: {
        //     title: '显示图标',
        //     type: "boolean",
        //     description: '是否显示图标'
        // },
        // showSetting: {
        //     title: '显示设置按钮',
        //     type: "boolean",
        //     description: '是否显示设置按钮',
        //     visible:false
        // }
      },
      setPropertyRelates(h, f) {
        switch (h && h.propertyID) {
          case "useBlankWhenDataIsEmpty":
            r.emptyDataHeight = r.useBlankWhenDataIsEmpty ? 36 : 240;
            break;
          case "fields":
            r.fields = h.propertyValue || [];
            break;
        }
      }
    };
  }
  return { getDataGrid: l, getTreeGrid: u };
}
function le() {
  function i(l) {
    return {
      title: "排序",
      description: "",
      properties: {
        mode: {
          title: "类型",
          type: "enum",
          description: "排序类型",
          $converter: "/converter/grid-sort.converter",
          editor: {
            data: [
              { id: "client", name: "客户端" },
              { id: "server", name: "服务端" }
            ]
          }
        }
        // multiSort: {
        //     title: '启用多列排序',
        //     type: 'boolean',
        //     description: '启用多列排序',
        //     $converter: '/converter/grid-sort.converter'
        // }
      }
    };
  }
  return { getSort: i };
}
function ae() {
  function i(l) {
    return {
      title: "过滤",
      description: "",
      properties: {
        mode: {
          title: "类型",
          type: "enum",
          description: "过滤类型",
          $converter: "/converter/grid-filter.converter",
          editor: {
            data: [
              { id: "client", name: "客户端" },
              { id: "server", name: "服务端" }
            ]
          }
        }
      }
    };
  }
  return { getFilter: i };
}
export {
  ne as useAppearance,
  Q as useColumnOption,
  X as useCommandOption,
  x as useDataGridEvent,
  Y as useDesignerColumn,
  K as useDesignerFitColumn,
  q as useDesignerVisualData,
  ae as useFilter,
  j as useGroup,
  re as usePagination,
  te as useRowNumber,
  J as useRowOption,
  ee as useSelection,
  le as useSort,
  Z as useSummary
};