realgrid-vue2 0.9.1

package/dist/index.es.js

@@ -0,0 +1,782 @@
+import * as m from "realgrid";
+import { toRaw as $, defineComponent as d, h as y, nextTick as F } from "vue";
+const C = (t) => t.replace(/-./g, (e) => e[1].toUpperCase()), f = (t) => t.charAt(0).toUpperCase() + t.slice(1), a = (t, e = "") => {
+  const n = {};
+  for (let i in t)
+    n[C(e ? `${e}-${i}` : i)] = $(t[i]);
+  return n;
+}, p = (t, e = {}, n = {}) => {
+  t = t || {};
+  const i = ["children"];
+  for (const [o, s] of Object.entries(e))
+    if (!i.includes(o))
+      if (!n.hasOwnProperty(o))
+        t[o] = null;
+      else if (Array.isArray(s))
+        (!n[o] || JSON.stringify(s) != JSON.stringify(n[o])) && (t[o] = n[o]);
+      else if (s instanceof Object && !(s instanceof Date || Array.isArray(s) || typeof s == "function"))
+        if (!(n[o] instanceof Object))
+          t[o] = n[o];
+        else {
+          const r = p({}, s, n[o]);
+          r && Object.keys(r).length > 0 && (t[o] = r);
+        }
+      else
+        s !== n[o] && (t[o] = n[o]);
+  for (const [o, s] of Object.entries(n))
+    i.includes(o) || e.hasOwnProperty(o) || (t[o] = s);
+  return t;
+}, g = (t, e, n) => {
+  for (const [i, o] of Object.entries(n))
+    i && typeof o == "function" && i.startsWith("on") && (i === "onRowInserting" ? t.onRowInserting = o : i === "onDataRowInserting" ? e.onRowInserting = o : (t.hasOwnProperty(i) && (t[i] = o), e.hasOwnProperty(i) && (e[i] = o)));
+}, w = () => d({
+  name: "RealGridBase",
+  props: {
+    disabled: Boolean,
+    gridProps: Object,
+    dataProps: Object,
+    locale: Object,
+    autoGenerateField: Boolean,
+    rows: Array,
+    rowStyleCallback: Function,
+    cellStyleCallback: Function,
+    layout: Array,
+    onInitialized: Function,
+    onDestroy: Function,
+    onCurrentChanging: Function,
+    onCurrentChanged: Function,
+    onCurrentRowChanged: Function,
+    onValidateColumn: Function,
+    onValidateRow: Function,
+    onValidationFail: Function,
+    onColumnCheckedChanged: Function,
+    onMenuItemClicked: Function,
+    onContextMenuPopup: Function,
+    onContextMenuItemClicked: Function,
+    onCellButtonClicked: Function,
+    onScrollToBottom: Function,
+    onTopIndexChanged: Function,
+    onTopIndexChanging: Function,
+    onLeftPosChanged: Function,
+    onRowsDeleting: Function,
+    onRowInserting: Function,
+    onSelectionCleared: Function,
+    onSelectionChanged: Function,
+    onSelectionAdded: Function,
+    onSelectionEnded: Function,
+    onShowEditor: Function,
+    onShowEditCommand: Function,
+    onHideEditor: Function,
+    onEditChange: Function,
+    onGetEditValue: Function,
+    onEditCommit: Function,
+    onEditCanceled: Function,
+    onItemEditCanceled: Function,
+    onItemEditCancel: Function,
+    onEditSearch: Function,
+    onSearchCellButtonClick: Function,
+    onCellEdited: Function,
+    onEditRowChanged: Function,
+    onEditRowPasted: Function,
+    onRowsPasted: Function,
+    onCellPasting: Function,
+    onItemChecked: Function,
+    onItemAllChecked: Function,
+    onErrorClicked: Function,
+    onSorting: Function,
+    onSortingChanged: Function,
+    onFiltering: Function,
+    onFilteringChanged: Function,
+    onWheel: Function,
+    onKeyDown: Function,
+    onKeyPress: Function,
+    onKeyUp: Function,
+    onShowTooltip: Function,
+    onShowHeaderTooltip: Function,
+    onColumnPropertyChanged: Function,
+    onLayoutPropertyChanged: Function,
+    onGridActivated: Function,
+    onCopy: Function,
+    onPaste: Function,
+    onPasted: Function,
+    onItemsChecked: Function,
+    onCellClicked: Function,
+    onCellDblClicked: Function,
+    onCellItemClicked: Function,
+    onCommandStackChanged: Function,
+    onDataLoadComplated: Function,
+    onLayoutExpanding: Function,
+    onLayoutExpanded: Function,
+    onLayoutCollapsing: Function,
+    onLayoutCollapsed: Function
+  },
+  data() {
+    return {
+      $dataProvider: null,
+      $gridView: null,
+      _mountTimer: null,
+      _mountCBs: []
+    };
+  },
+  mounted() {
+    const t = this.$el, e = a(this.$props);
+    if (this.$listeners) {
+      for (const [o, s] of Object.entries(this.$listeners))
+        if (o && typeof s == "function")
+          if (o === "row-inserting")
+            e.onRowInserting = s;
+          else if (o === "data-row-inserting")
+            e.onDataRowInserting = s;
+          else {
+            const r = "on" + f(C(o));
+            e.hasOwnProperty(r) && (e[r] = s);
+          }
+    }
+    const { grid: n, dataProvider: i } = this._createGrid(t, e);
+    this.$dataProvider = i, this.$gridView = n, this.executeCB(), g(n, i, e), this._applyOptions(e), e.layout && n.setColumnLayout(e.layout), this._doInitProc(n, e), this._setData(e);
+  },
+  computed: {
+    dataProvider: {
+      get() {
+        return this.$data.$dataProvider;
+      },
+      set(t) {
+        this.$dataProvider = t;
+      }
+    },
+    gridView: {
+      get() {
+        return this.$data.$gridView;
+      },
+      set(t) {
+        this.$gridView = t;
+      }
+    }
+  },
+  unmounted() {
+    const t = a(this.$props), e = a(this.$attrs, "on"), n = t.onDestroy || e.onDestroy;
+    n && n(this.gridView), this.gridView = this.gridView && this.gridView.destroy(), this.dataProvider = this.dataProvider && this.dataProvider.destroy();
+  },
+  destroyed() {
+    const t = a(this.$props), e = a(this.$attrs, "on"), n = t.onDestroy || e.onDestroy;
+    n && n(this.gridView), this.gridView = this.gridView && this.gridView.destroy(), this.dataProvider = this.dataProvider && this.dataProvider.destroy();
+  },
+  watch: {
+    gridProps: {
+      handler(t, e) {
+        const n = p({}, e, t);
+        this.gridView && n && Object.keys(n).length > 0 && this.gridView.setOptions(n);
+      },
+      deep: !0
+    },
+    disabled(t, e) {
+      this.gridView && (this.gridView.disabled = t);
+    },
+    dataProps: {
+      handler(t, e) {
+        const n = p({}, e, t);
+        this.dataProvider && n && Object.keys(n).length > 0 && this.dataProvider.setOptions(n);
+      },
+      deep: !0
+    },
+    locale: {
+      handler(t, e) {
+        t && m.default.setLocale(t);
+      }
+    },
+    layout: {
+      handler(t, e) {
+        this.gridView && this.gridView.setColumnLayout(t);
+      },
+      deep: !0
+    }
+  },
+  methods: {
+    addCallback(t) {
+      this.$data._mountCBs.push(t), clearTimeout(this.$data._mountTimer);
+      const e = this;
+      this.$data._mountTimer = window.setTimeout(function() {
+        e.executeCB();
+      }, 20);
+    },
+    removeCallback(t) {
+      if (this.$data._mountCBs.indexOf(t) >= 0) {
+        const e = this.$data._mountCBs.indexOf(t);
+        this.$data._mountCBs.splice(e, 1);
+      }
+    },
+    executeCB() {
+      const t = this.$gridView, e = this.$dataProvider;
+      if (!!t && (clearTimeout(this._mountTimer), t && t._view)) {
+        t.beginUpdate();
+        try {
+          e == null || e.beginUpdate();
+          try {
+            const n = this.$data._mountCBs.sort((i, o) => (i.$mountSeq == null ? -1 : i.$mountSeq) - (o.$mountSeq == null ? -1 : o.$mountSeq));
+            for (; n && n.length; ) {
+              const i = n.shift();
+              i == null || i.call(this, t);
+            }
+          } finally {
+            e == null || e.endUpdate();
+          }
+        } finally {
+          t.endUpdate(!0), this.$data._mountTimer = null, this.$data._mountCBs = [];
+        }
+      }
+    },
+    _applyOptions(t) {
+      const e = this.$gridView, n = this.$dataProvider;
+      if (e)
+        for (let [i, o] of Object.entries(t))
+          switch (i) {
+            case "gridProps":
+              o && e.setOptions(o);
+              break;
+            case "disabled":
+              e && (e.disabled = !!o);
+              break;
+            case "dataProps":
+              o && (n == null || n.setOptions(o));
+              break;
+            case "layout":
+              o && e && e.setColumnLayout(o);
+              break;
+            case "rowStyleCallback":
+              e.setRowStyleCallback(o);
+              break;
+            case "cellStyleCallback":
+              e.setCellStyleCallback(o);
+              break;
+            case "locale":
+              o && m.default.setLocale(o);
+              break;
+          }
+      this._doApplyOptions(t);
+    },
+    _createGrid(t, e) {
+      return {
+        grid: null,
+        dataProvider: null
+      };
+    },
+    _doInitProc(t, e) {
+      const n = e.onInitialized;
+      if (n) {
+        const i = n.constructor.name;
+        i === "Function" ? n(t) : i === "AsyncFunction" && Promise.resolve(n(t));
+      }
+    },
+    _doApplyOptions(t) {
+    },
+    _setData(t) {
+    }
+  },
+  render() {
+    var s, r;
+    const t = (c) => {
+      const l = [];
+      if (Array.isArray(c))
+        for (let h of c)
+          Array.isArray(h.children) ? l.push(...t(h.children)) : l.push(h);
+      return l;
+    }, e = [];
+    for (let c of Object.keys(this.$slots)) {
+      let l = this.$slots[c];
+      typeof l == "function" && (l = l()), e.push(...t(l));
+    }
+    let n = 0;
+    for (let c = 0; c < e.length; c++) {
+      const l = e[c];
+      if (l.type instanceof Object && l.type.hasOwnProperty("name")) {
+        const h = l.type.name;
+        h && /^RG.+Column$/.exec(h) && (l.props = l.props || {}, l.props && ((r = (s = l.props).displayIndex) != null || (s.displayIndex = n++)));
+      }
+      l.$mountSeq = c;
+    }
+    const i = this.$attrs.style ? this.$attrs.style : { width: "100%", height: "100%" };
+    return y("div", { style: i }, e);
+  }
+}), P = d({
+  name: "RealGridVue",
+  extends: w(),
+  props: {
+    accessibility: Boolean,
+    waiOptions: Object,
+    onPageChanging: Function,
+    onPageChanged: Function,
+    onPageCountChanged: Function,
+    onGrouping: Function,
+    onGrouped: Function,
+    onExpanding: Function,
+    onExpanded: Function,
+    onCollapsing: Function,
+    onCollapsed: Function,
+    onRowCountChanged: Function,
+    onRowUpdating: Function,
+    onRowUpdated: Function,
+    onRowsUpdated: Function,
+    onRowListUpdated: Function,
+    onDataRowInserting: Function,
+    onRowInserted: Function,
+    onRowsInserted: Function,
+    onRowDeleting: Function,
+    onRowDeleted: Function,
+    onRowsDeleted: Function,
+    onRowMoving: Function,
+    onRowMoved: Function,
+    onRowsMoving: Function,
+    onRowsMoved: Function,
+    onRowListMoving: Function,
+    onRowListMoved: Function,
+    onValueChanged: Function,
+    onDataChanged: Function,
+    onRowStateChanged: Function,
+    onRowStatesChanged: Function,
+    onRowStatesCleared: Function,
+    onRestoreRows: Function
+  },
+  data() {
+    return {
+      $dataProvider: null,
+      $gridView: null
+    };
+  },
+  watch: {
+    rows: {
+      handler(t, e) {
+        var n;
+        if (this.$data._mountTimer != null) {
+          const i = () => {
+            F(() => {
+              var o;
+              (o = this.$dataProvider) == null || o.setRows(t);
+            });
+          };
+          i.$mountSeq = 1 / 0, this.addCallback(i);
+        } else
+          (n = this.$dataProvider) == null || n.setRows(t);
+      }
+    }
+  },
+  methods: {
+    _createGrid(t, e) {
+      var o;
+      const n = new m.default.GridView(t, e == null ? void 0 : e.accessibility, e == null ? void 0 : e.waiOptions), i = new m.default.LocalDataProvider((o = e.dataProps) == null ? void 0 : o.undoable);
+      return n.setDataSource(i), {
+        grid: n,
+        dataProvider: i
+      };
+    },
+    _doApplyOptions(t) {
+    },
+    _setData(t) {
+      var e;
+      t.rows && ((e = this.$dataProvider) == null || e.setRows(t.rows));
+    }
+  }
+}), S = d({
+  name: "RealTreeVue",
+  extends: w(),
+  props: {
+    treeOptions: Object,
+    treeField: String,
+    needSorting: Boolean,
+    childrenField: String,
+    iconField: String,
+    json: Object,
+    rowsProp: String,
+    childrenProp: String,
+    iconProp: String,
+    onTreeItemExpanding: Function,
+    onTreeItemExpanded: Function,
+    onTreeItemCollapsing: Function,
+    onTreeItemCollapsed: Function,
+    onTreeItemChanged: Function,
+    onRowCountChanged: Function,
+    onRowAdding: Function,
+    onRowAdded: Function,
+    onRowsAdded: Function,
+    onRowDeleting: Function,
+    onRowDeleted: Function,
+    onRowsDeleted: Function,
+    onRowUpdating: Function,
+    onRowUpdated: Function,
+    onRowsUpdating: Function,
+    onRowsUpdated: Function,
+    onValueChanged: Function,
+    onDataChanged: Function,
+    onRowStateChanged: Function,
+    onRowStatesChanged: Function,
+    onRowSiblingMoving: Function,
+    onRowSiblingMoved: Function,
+    onRowsSiblingMoving: Function,
+    onRowsSiblingMoved: Function,
+    onRowParentChanging: Function,
+    onRowParentChanged: Function
+  },
+  data() {
+    return {
+      $gridView: null,
+      $dataProvider: null
+    };
+  },
+  computed: {
+    gridView: {
+      get() {
+        return this.$data.$gridView;
+      },
+      set(t) {
+        this.$gridView = t;
+      }
+    },
+    dataProvider: {
+      get() {
+        return this.$data.$dataProvider;
+      },
+      set(t) {
+        this.$dataProvider = t;
+      }
+    }
+  },
+  methods: {
+    _createGrid(t, e) {
+      var o;
+      const n = new m.TreeView(t), i = new m.LocalTreeDataProvider((o = e.dataProps) == null ? void 0 : o.undoable);
+      return n.setDataSource(i), {
+        grid: n,
+        dataProvider: i
+      };
+    },
+    _doApplyOptions(t) {
+      var e;
+      for (const [n, i] of Object.entries(t))
+        switch (n) {
+          case "treeOptions":
+            i && ((e = this.$gridView) == null || e.setTreeOptions(i));
+            break;
+        }
+    },
+    _setData(t) {
+      var e, n;
+      t.rows ? (e = this.$dataProvider) == null || e.setRows(t.rows, this.treeField, this.needSorting, this.childrenField, this.iconField) : t.json && ((n = this.$dataProvider) == null || n.setObjectRows(t.json, this.rowsProp, this.childrenProp, this.iconProp));
+    }
+  },
+  watch: {
+    rows: {
+      handler(t, e) {
+        var n;
+        if (this.$data._mountTimer != null) {
+          const i = () => {
+            F(() => {
+              var o;
+              (o = this.$dataProvider) == null || o.setRows(t, this.treeField, this.needSorting, this.childrenField, this.iconField);
+            });
+          };
+          i.$mountSeq = 1 / 0, this.addCallback(i);
+        } else
+          (n = this.$dataProvider) == null || n.setRows(t, this.treeField, this.needSorting, this.childrenField, this.iconField);
+      }
+    },
+    json: {
+      handler(t, e) {
+        var n;
+        if (this.$data._mountTimer != null) {
+          const i = () => {
+            F(() => {
+              var o;
+              (o = this.$dataProvider) == null || o.setObjectRows(t, this.rowsProp, this.childrenProp, this.iconProp);
+            });
+          };
+          i.$mountSeq = 1 / 0, this.addCallback(i);
+        } else
+          (n = this.$dataProvider) == null || n.setObjectRows(t, this.rowsProp, this.childrenProp, this.iconProp);
+      }
+    }
+  }
+}), u = d({
+  name: "ComponentBase",
+  props: {},
+  data() {
+    return {
+      $model: null,
+      $oldValue: null
+    };
+  },
+  mounted() {
+    const t = this.$parent;
+    t && (this.$oldValue = a(this.$attrs), this.mountCB.$mountSeq = this._vnode.$mountSeq, t.addCallback(this.mountCB));
+  },
+  unmounted() {
+    const t = this.$parent;
+    t && (t.removeCallback(this.mountCB), t.addCallback(this.unmountCB));
+  },
+  destroyed() {
+    const t = this.$parent;
+    t && (t.removeCallback(this.mountCB), t.addCallback(this.unmountCB));
+  },
+  watch: {
+    $attrs: {
+      handler(t, e) {
+        var o;
+        const n = a(t), i = p({}, a(this.$data.$oldValue), a(t));
+        if (i && Object.keys(i).length > 0) {
+          const s = (o = this.$data) == null ? void 0 : o.$model;
+          s && s.assignFrom(n), this._doWatchAttrs(i), this.$oldValue = n;
+        }
+      },
+      deep: !0
+    }
+  },
+  methods: {
+    mountCB() {
+    },
+    unmountCB() {
+    },
+    _doWatchAttrs(t) {
+    }
+  },
+  render() {
+  }
+}), b = d({
+  name: "RGSeriesColumn",
+  extends: u,
+  data() {
+    return {};
+  },
+  props: {},
+  methods: {
+    mountCB(t) {
+      var n, i;
+      if (a((n = this.$parent) == null ? void 0 : n.$attrs)) {
+        const o = a(this.$attrs);
+        t && (this.$model = t.addColumn({ ...o, type: "series" }, (i = o.displayIndex) != null ? i : -1));
+      }
+    },
+    unmountCB(t) {
+      this.$data.$model && t.removeColumn(this.$model.name);
+    },
+    _doWatchAttrs(t) {
+      if (t.hasOwnProperty("width") && !isNaN(t.width)) {
+        const n = this.$data.$model.layout;
+        n && (n.cellWidth = t.width);
+      }
+    }
+  }
+}), k = d({
+  name: "RGStateBar",
+  extends: u,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(t) {
+      t.setStateBar(a(this.$attrs)), this.$model = t.stateBar;
+    }
+  }
+}), B = d({
+  name: "RGRowIndicator",
+  extends: u,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(t) {
+      t.setRowIndicator(a(this.$attrs)), this.$model = t.rowIndicator;
+    }
+  }
+}), v = d({
+  name: "RGHeaderSummaries",
+  extends: u,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(t) {
+      t.setHeaderSummaries(a(this.$attrs)), this.$model = t.headerSummaries;
+    }
+  }
+}), O = d({
+  name: "RGHeaderSummary",
+  extends: u,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(t) {
+      t.setHeaderSummary(a(this.$attrs)), this.$model = t.headerSummary;
+    }
+  }
+}), V = d({
+  name: "RGHeader",
+  extends: u,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(t) {
+      t.setHeader(a(this.$attrs)), this.$model = t.header;
+    }
+  }
+}), G = d({
+  name: "RGGroupPanel",
+  extends: u,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(t) {
+      t.setGroupPanel(a(this.$attrs)), this.$model = t.groupPanel;
+    }
+  }
+}), x = d({
+  name: "RGFooter",
+  extends: u,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(t) {
+      t.setFooter(a(this.$attrs)), this.$model = t.footer;
+    }
+  }
+}), I = d({
+  name: "RGFooters",
+  extends: u,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(t) {
+      t.setFooters(a(this.$attrs)), this.$model = t.footer;
+    }
+  }
+}), D = d({
+  name: "RGFilterPanel",
+  extends: u,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(t) {
+      t.setFilterPanel(a(this.$attrs)), this.$model = t.filterPanel;
+    }
+  }
+}), _ = d({
+  name: "RGDataField",
+  extends: u,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(t) {
+      const e = a(this.$attrs);
+      if (e.fieldName) {
+        const n = t.getDataSource();
+        n.fieldByName(e.fieldName) || (this.$model = n.addField(e, !0));
+      }
+    },
+    unmountDB(t) {
+      this.$model && t.getDataSource().removeField(this.$model);
+    }
+  }
+}), A = d({
+  name: "RGDataColumn",
+  extends: u,
+  data() {
+    return {};
+  },
+  props: {},
+  methods: {
+    mountCB(t) {
+      var n, i;
+      const e = a((n = this.$parent) == null ? void 0 : n.$props);
+      if (e) {
+        const o = e.autoGenerateField, s = t == null ? void 0 : t.getDataSource(), r = a(this.$attrs);
+        let c = r.fieldName;
+        o && (!c && r.field && (c = r.field.fieldName), s && !s.fieldByName(c) && s.addField(r.field || c)), t && (this.$model = t.addColumn({ ...r, fieldName: c }, (i = r.displayIndex) != null ? i : -1));
+      }
+    },
+    unmountCB(t) {
+      var n;
+      this.$data.$model && t.removeColumn(this.$data.$model.name);
+      const e = a((n = this.$parent) == null ? void 0 : n.$props);
+      if (e) {
+        const i = e.autoGenerateField, o = t == null ? void 0 : t.getDataSource(), s = a(this.$attrs);
+        let r = s.fieldName;
+        i && (!r && s.field && (r = s.field.fieldName), t.columnByField(r) || o.removeField(r));
+      }
+    },
+    _doWatchAttrs(t) {
+      if (t.hasOwnProperty("width") && !isNaN(t.width)) {
+        const n = this.$data.$model.layout;
+        n && (n.cellWidth = t.width);
+      }
+    }
+  }
+}), T = d({
+  name: "RGLiteralColumn",
+  extends: u,
+  data() {
+    return {};
+  },
+  props: {},
+  methods: {
+    mountCB(t) {
+      var n, i;
+      if (a((n = this.$parent) == null ? void 0 : n.$attrs)) {
+        const o = a(this.$attrs);
+        t && (this.$model = t.addColumn({ ...o, type: "literal" }, (i = o.displayIndex) != null ? i : -1));
+      }
+    },
+    unmountCB(t) {
+      this.$data.$model && t.removeColumn(this.$model.name);
+    },
+    _doWatchAttrs(t) {
+      if (t.hasOwnProperty("width") && !isNaN(t.width)) {
+        const n = this.$data.$model.layout;
+        n && (n.cellWidth = t.width);
+      }
+    }
+  }
+}), j = d({
+  name: "RGCheckBar",
+  extends: u,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(t) {
+      t.setCheckBar(a(this.$attrs)), this.$model = t.checkBar;
+    }
+  }
+});
+export {
+  j as RGCheckBar,
+  A as RGDataColumn,
+  _ as RGDataField,
+  D as RGFilterPanel,
+  x as RGFooter,
+  I as RGFooters,
+  G as RGGroupPanel,
+  V as RGHeader,
+  v as RGHeaderSummaries,
+  O as RGHeaderSummary,
+  T as RGLiteralColumn,
+  B as RGRowIndicator,
+  b as RGSeriesColumn,
+  k as RGStateBar,
+  P as RealGridVue,
+  S as RealTreeVue
+};