realgrid-vue2/dist/index.es.js

RealGrid2 wrapping Component for Vue2

import * as m from "realgrid";
import { toRaw as $, defineComponent as d, h as y, nextTick as F } from "vue";
const w = (t) => t.replace(/-./g, (n) => n[1].toUpperCase()), f = (t) => t.charAt(0).toUpperCase() + t.slice(1), a = (t, n = "") => {
  const e = {};
  for (let i in t)
    e[w(n ? `${n}-${i}` : i)] = $(t[i]);
  return e;
}, p = (t, n = {}, e = {}) => {
  t = t || {};
  const i = ["children"];
  for (const [o, s] of Object.entries(n))
    if (!i.includes(o))
      if (!e.hasOwnProperty(o))
        t[o] = null;
      else if (Array.isArray(s))
        (!e[o] || JSON.stringify(s) != JSON.stringify(e[o])) && (t[o] = e[o]);
      else if (s instanceof Object && !(s instanceof Date || Array.isArray(s) || typeof s == "function"))
        if (!(e[o] instanceof Object))
          t[o] = e[o];
        else {
          const r = p({}, s, e[o]);
          r && Object.keys(r).length > 0 && (t[o] = r);
        }
      else
        s !== e[o] && (t[o] = e[o]);
  for (const [o, s] of Object.entries(e))
    i.includes(o) || n.hasOwnProperty(o) || (t[o] = s);
  return t;
}, g = (t, n, e) => {
  for (const [i, o] of Object.entries(e))
    i && typeof o == "function" && i.startsWith("on") && (i === "onRowInserting" ? t.onRowInserting = o : i === "onDataRowInserting" ? n.onRowInserting = o : (t.hasOwnProperty(i) && (t[i] = o), n.hasOwnProperty(i) && (n[i] = o)));
}, C = () => 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,
    onShowRowBarTooltip: 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,
    onGridFocusChanged: Function
  },
  data() {
    return {
      $dataProvider: null,
      $gridView: null,
      _mountTimer: null,
      _mountCBs: []
    };
  },
  mounted() {
    const t = this.$el, n = a(this.$props);
    if (this.$listeners) {
      for (const [o, s] of Object.entries(this.$listeners))
        if (o && typeof s == "function")
          if (o === "row-inserting")
            n.onRowInserting = s;
          else if (o === "data-row-inserting")
            n.onDataRowInserting = s;
          else {
            const r = "on" + f(w(o));
            n.hasOwnProperty(r) && (n[r] = s);
          }
    }
    const { grid: e, dataProvider: i } = this._createGrid(t, n);
    this.$dataProvider = i, this.$gridView = e, this.executeCB(), g(e, i, n), this._applyOptions(n), n.layout && e.setColumnLayout(n.layout), this._setData(n);
  },
  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), n = a(this.$attrs, "on"), e = t.onDestroy || n.onDestroy;
    e && e(this.gridView), this.gridView = this.gridView && this.gridView.destroy(), this.dataProvider = this.dataProvider && this.dataProvider.destroy();
  },
  destroyed() {
    const t = a(this.$props), n = a(this.$attrs, "on"), e = t.onDestroy || n.onDestroy;
    e && e(this.gridView), this.gridView = this.gridView && this.gridView.destroy(), this.dataProvider = this.dataProvider && this.dataProvider.destroy();
  },
  watch: {
    gridProps: {
      handler(t, n) {
        const e = p({}, n, t);
        this.gridView && e && Object.keys(e).length > 0 && this.gridView.setOptions(e);
      },
      deep: !0
    },
    disabled(t, n) {
      this.gridView && (this.gridView.disabled = t);
    },
    dataProps: {
      handler(t, n) {
        const e = p({}, n, t);
        this.dataProvider && e && Object.keys(e).length > 0 && this.dataProvider.setOptions(e);
      },
      deep: !0
    },
    locale: {
      handler(t, n) {
        t && m.default.setLocale(t);
      }
    },
    layout: {
      handler(t, n) {
        this.gridView && this.gridView.setColumnLayout(t);
      },
      deep: !0
    }
  },
  methods: {
    addCallback(t) {
      this.$data._mountCBs.push(t), clearTimeout(this.$data._mountTimer);
      const n = this;
      this.$data._mountTimer = window.setTimeout(function() {
        n.executeCB();
      }, 20);
    },
    removeCallback(t) {
      if (this.$data._mountCBs.indexOf(t) >= 0) {
        const n = this.$data._mountCBs.indexOf(t);
        this.$data._mountCBs.splice(n, 1);
      }
    },
    executeCB() {
      const t = this.$gridView, n = this.$dataProvider;
      if (!!t && (clearTimeout(this._mountTimer), t && t._view)) {
        t.beginUpdate();
        try {
          n == null || n.beginUpdate();
          try {
            const e = this.$data._mountCBs.sort((i, o) => (i.$mountSeq == null ? -1 : i.$mountSeq) - (o.$mountSeq == null ? -1 : o.$mountSeq));
            for (; e && e.length; ) {
              const i = e.shift();
              i == null || i.call(this, t);
            }
          } finally {
            n == null || n.endUpdate();
          }
        } finally {
          t.endUpdate(!0), this.$data._mountTimer = null, this.$data._mountCBs = [];
        }
      }
    },
    _applyOptions(t) {
      const n = this.$gridView, e = this.$dataProvider;
      if (n)
        for (let [i, o] of Object.entries(t))
          switch (i) {
            case "gridProps":
              o && n.setOptions(o);
              break;
            case "disabled":
              n && (n.disabled = !!o);
              break;
            case "dataProps":
              o && (e == null || e.setOptions(o));
              break;
            case "layout":
              o && n && n.setColumnLayout(o);
              break;
            case "rowStyleCallback":
              n.setRowStyleCallback(o);
              break;
            case "cellStyleCallback":
              n.setCellStyleCallback(o);
              break;
            case "locale":
              o && m.default.setLocale(o);
              break;
          }
      this._doApplyOptions(t);
    },
    _createGrid(t, n) {
      return {
        grid: null,
        dataProvider: null
      };
    },
    _doInitProc(t, n) {
      const e = n.onInitialized;
      if (e) {
        const i = e.constructor.name;
        i === "Function" ? e(t) : i === "AsyncFunction" && Promise.resolve(e(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;
    }, n = [];
    for (let c of Object.keys(this.$slots)) {
      let l = this.$slots[c];
      typeof l == "function" && (l = l()), n.push(...t(l));
    }
    let e = 0;
    for (let c = 0; c < n.length; c++) {
      const l = n[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 = e++)));
      }
      l.$mountSeq = c;
    }
    const i = this.$attrs.style ? this.$attrs.style : { width: "100%", height: "100%" };
    return y("div", { style: i }, n);
  }
}), P = d({
  name: "RealGridVue",
  extends: C(),
  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, n) {
        var e;
        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
          (e = this.$dataProvider) == null || e.setRows(t);
      }
    }
  },
  methods: {
    _createGrid(t, n) {
      var o;
      const e = new m.default.GridView(t, n == null ? void 0 : n.accessibility, n == null ? void 0 : n.waiOptions), i = new m.default.LocalDataProvider((o = n.dataProps) == null ? void 0 : o.undoable);
      return e.setDataSource(i), {
        grid: e,
        dataProvider: i
      };
    },
    _doApplyOptions(t) {
    },
    _setData(t) {
      var n;
      t.rows && ((n = this.$dataProvider) == null || n.setRows(t.rows));
    }
  }
}), S = d({
  name: "RealTreeVue",
  extends: C(),
  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, n) {
      var o;
      const e = new m.TreeView(t), i = new m.LocalTreeDataProvider((o = n.dataProps) == null ? void 0 : o.undoable);
      return e.setDataSource(i), {
        grid: e,
        dataProvider: i
      };
    },
    _doApplyOptions(t) {
      var n;
      for (const [e, i] of Object.entries(t))
        switch (e) {
          case "treeOptions":
            i && ((n = this.$gridView) == null || n.setTreeOptions(i));
            break;
        }
    },
    _setData(t) {
      var n, e;
      t.rows ? (n = this.$dataProvider) == null || n.setRows(t.rows, this.treeField, this.needSorting, this.childrenField, this.iconField) : t.json && ((e = this.$dataProvider) == null || e.setObjectRows(t.json, this.rowsProp, this.childrenProp, this.iconProp));
    }
  },
  watch: {
    rows: {
      handler(t, n) {
        var e;
        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
          (e = this.$dataProvider) == null || e.setRows(t, this.treeField, this.needSorting, this.childrenField, this.iconField);
      }
    },
    json: {
      handler(t, n) {
        var e;
        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
          (e = this.$dataProvider) == null || e.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, n) {
        var o;
        const e = 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(e), this._doWatchAttrs(i), this.$oldValue = e;
        }
      },
      deep: !0
    }
  },
  methods: {
    mountCB() {
    },
    unmountCB() {
    },
    _doWatchAttrs(t) {
    }
  },
  render() {
  }
}), b = d({
  name: "RGSeriesColumn",
  extends: u,
  data() {
    return {};
  },
  props: {},
  methods: {
    mountCB(t) {
      var e, i;
      if (a((e = this.$parent) == null ? void 0 : e.$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 e = this.$data.$model.layout;
        e && (e.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 n = a(this.$attrs);
      if (n.fieldName) {
        const e = t.getDataSource();
        e.fieldByName(n.fieldName) || (this.$model = e.addField(n, !0));
      }
    },
    unmountDB(t) {
      this.$model && t.getDataSource().removeField(this.$model);
    }
  }
}), A = d({
  name: "RGDataColumn",
  extends: u,
  data() {
    return {};
  },
  props: {},
  methods: {
    mountCB(t) {
      var e, i;
      const n = a((e = this.$parent) == null ? void 0 : e.$props);
      if (n) {
        const o = n.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 e;
      this.$data.$model && t.removeColumn(this.$data.$model.name);
      const n = a((e = this.$parent) == null ? void 0 : e.$props);
      if (n) {
        const i = n.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 e = this.$data.$model.layout;
        e && (e.cellWidth = t.width);
      }
    }
  }
}), T = d({
  name: "RGLiteralColumn",
  extends: u,
  data() {
    return {};
  },
  props: {},
  methods: {
    mountCB(t) {
      var e, i;
      if (a((e = this.$parent) == null ? void 0 : e.$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 e = this.$data.$model.layout;
        e && (e.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
};