realgrid-vue/dist/index.es.js

RealGrid2 wrapping Component for Vue3

import * as m from "realgrid";
import { toRaw as a, defineComponent as l, h as w, nextTick as F } from "vue";
const $ = (t) => t.replace(/-./g, (n) => n[1].toUpperCase()), r = (t, n = "") => {
  const e = {};
  for (let o in t)
    e[$(n ? `${n}-${o}` : o)] = a(t[o]);
  return e;
}, p = (t, n = {}, e = {}) => {
  t = t || {};
  const o = ["children"];
  for (const [i, s] of Object.entries(n))
    if (!o.includes(i))
      if (!e.hasOwnProperty(i))
        t[i] = null;
      else if (Array.isArray(s))
        (!e[i] || JSON.stringify(s) != JSON.stringify(e[i])) && (t[i] = e[i]);
      else if (s instanceof Object && !(s instanceof Date || Array.isArray(s) || typeof s == "function"))
        if (!(e[i] instanceof Object))
          t[i] = e[i];
        else {
          const d = p({}, s, e[i]);
          d && Object.keys(d).length > 0 && (t[i] = d);
        }
      else s !== e[i] && (t[i] = e[i]);
  for (const [i, s] of Object.entries(e))
    o.includes(i) || n.hasOwnProperty(i) || (t[i] = s);
  return t;
}, y = (t, n, e) => {
  for (const [o, i] of Object.entries(e))
    o && typeof i == "function" && o.startsWith("on") && (o === "onRowInserting" ? t.onRowInserting = i : o === "onDataRowInserting" ? n.onRowInserting = i : (t.hasOwnProperty(o) && (t[o] = i), n.hasOwnProperty(o) && (n[o] = i)));
}, C = () => l({
  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 = r(a(this.$props)), { grid: e, dataProvider: o } = this._createGrid(t, n);
    this.dataProvider = o, this.gridView = e, this.executeCB(), y(e, o, n), this._applyOptions(n), n.layout && e.setColumnLayout(n.layout), this._doInitProc(e, n), this._setData(n);
  },
  computed: {
    dataProvider: {
      get() {
        return a(this.$data.$dataProvider);
      },
      set(t) {
        this.$dataProvider = t;
      }
    },
    gridView: {
      get() {
        return a(this.$data.$gridView);
      },
      set(t) {
        this.$gridView = t;
      }
    }
  },
  unmounted() {
    const t = r(this.$props), n = r(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 = r(this.$props), n = r(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((o, i) => (o.$mountSeq == null ? -1 : o.$mountSeq) - (i.$mountSeq == null ? -1 : i.$mountSeq));
            for (; e && e.length; ) {
              const o = e.shift();
              o == null || o.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 [o, i] of Object.entries(t))
          switch (o) {
            case "gridProps":
              i && n.setOptions(i);
              break;
            case "disabled":
              n && (n.disabled = !!i);
              break;
            case "dataProps":
              i && (e == null || e.setOptions(i));
              break;
            case "layout":
              i && n && n.setColumnLayout(i);
              break;
            case "rowStyleCallback":
              n.setRowStyleCallback(i);
              break;
            case "cellStyleCallback":
              n.setCellStyleCallback(i);
              break;
            case "locale":
              i && m.default.setLocale(i);
              break;
          }
      this._doApplyOptions(t);
    },
    _createGrid(t, n) {
      return {
        grid: null,
        dataProvider: null
      };
    },
    _doInitProc(t, n) {
      const e = n.onInitialized;
      if (e) {
        const o = e.constructor.name;
        o === "Function" ? e(t) : o === "AsyncFunction" && Promise.resolve(e(t));
      }
    },
    _doApplyOptions(t) {
    },
    _setData(t) {
    }
  },
  render() {
    var s;
    const t = (d) => {
      const c = [];
      if (Array.isArray(d))
        for (let h of d)
          Array.isArray(h.children) ? c.push(...t(h.children)) : c.push(h);
      return c;
    }, n = [];
    for (let d of Object.keys(this.$slots)) {
      let c = this.$slots[d];
      typeof c == "function" && (c = c()), n.push(...t(c));
    }
    let e = 0;
    for (let d = 0; d < n.length; d++) {
      const c = n[d];
      if (c.type instanceof Object && c.type.hasOwnProperty("name")) {
        const h = c.type.name;
        h && /^RG.+Column$/.exec(h) && (c.props = c.props || {}, c.props && ((s = c.props).displayIndex ?? (s.displayIndex = e++)));
      }
      c.$mountSeq = d;
    }
    const o = this.$attrs.style ? this.$attrs.style : { width: "100%", height: "100%" };
    return w("div", { style: o }, n);
  }
}), g = l({
  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,
    // dataProvider
    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 o = () => {
            F(() => {
              var i;
              (i = this.dataProvider) == null || i.setRows(a(t));
            });
          };
          o.$mountSeq = 1 / 0, this.addCallback(o);
        } else
          (e = this.dataProvider) == null || e.setRows(a(t));
      }
      // immediate 절대 사용금지.
    }
  },
  methods: {
    _createGrid(t, n) {
      var i;
      const e = new m.default.GridView(t, n == null ? void 0 : n.accessibility, n == null ? void 0 : n.waiOptions), o = new m.default.LocalDataProvider((i = n.dataProps) == null ? void 0 : i.undoable);
      return e.setDataSource(o), {
        grid: e,
        dataProvider: o
      };
    },
    _doApplyOptions(t) {
    },
    _setData(t) {
      var n;
      t.rows && ((n = this.dataProvider) == null || n.setRows(a(t.rows)));
    }
  }
}), R = l({
  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,
    // dataProvider
    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 a(this.$data.$gridView);
      },
      set(t) {
        this.$gridView = t;
      }
    },
    dataProvider: {
      get() {
        return a(this.$data.$dataProvider);
      },
      set(t) {
        this.$dataProvider = t;
      }
    }
  },
  methods: {
    _createGrid(t, n) {
      var i;
      const e = new m.TreeView(t), o = new m.LocalTreeDataProvider((i = n.dataProps) == null ? void 0 : i.undoable);
      return e.setDataSource(o), {
        grid: e,
        dataProvider: o
      };
    },
    _doApplyOptions(t) {
      var n;
      for (const [e, o] of Object.entries(t))
        switch (e) {
          case "treeOptions":
            o && ((n = this.gridView) == null || n.setTreeOptions(a(o)));
            break;
        }
    },
    _setData(t) {
      var n, e;
      t.rows ? (n = this.dataProvider) == null || n.setRows(a(t.rows), this.treeField, this.needSorting, this.childrenField, this.iconField) : t.json && ((e = this.dataProvider) == null || e.setObjectRows(a(t.json), this.rowsProp, this.childrenProp, this.iconProp));
    }
  },
  watch: {
    rows: {
      handler(t, n) {
        var e;
        if (this.$data._mountTimer != null) {
          const o = () => {
            F(() => {
              var i;
              (i = this.dataProvider) == null || i.setRows(a(t), this.treeField, this.needSorting, this.childrenField, this.iconField);
            });
          };
          o.$mountSeq = 1 / 0, this.addCallback(o);
        } else
          (e = this.dataProvider) == null || e.setRows(a(t), this.treeField, this.needSorting, this.childrenField, this.iconField);
      }
    },
    json: {
      handler(t, n) {
        var e;
        if (this.$data._mountTimer != null) {
          const o = () => {
            F(() => {
              var i;
              (i = this.dataProvider) == null || i.setObjectRows(a(t), this.rowsProp, this.childrenProp, this.iconProp);
            });
          };
          o.$mountSeq = 1 / 0, this.addCallback(o);
        } else
          (e = this.dataProvider) == null || e.setObjectRows(a(t), this.rowsProp, this.childrenProp, this.iconProp);
      }
    }
  }
}), u = l({
  name: "ComponentBase",
  props: {},
  data() {
    return {
      $model: null,
      $oldValue: null
    };
  },
  mounted() {
    const t = a(this.$parent);
    t && (this.$oldValue = r(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 i;
        const e = r(a(t)), o = p({}, r(a(this.$data.$oldValue)), r(a(t)));
        if (o && Object.keys(o).length > 0) {
          const s = a((i = this.$data) == null ? void 0 : i.$model);
          s && s.assignFrom && s.assignFrom(e), this._doWatchAttrs(o), this.$oldValue = e;
        }
      },
      deep: !0
    }
  },
  methods: {
    mountCB() {
    },
    unmountCB() {
    },
    _doWatchAttrs(t) {
    }
  },
  render() {
  }
}), P = l({
  name: "RGSeriesColumn",
  extends: u,
  data() {
    return {};
  },
  props: {},
  methods: {
    mountCB(t) {
      var e;
      if (r(a((e = this.$parent) == null ? void 0 : e.$attrs))) {
        const o = r(a(this.$attrs));
        t && (this.$model = t.addColumn({ ...o, type: "series" }, o.displayIndex ?? -1));
      }
    },
    unmountCB(t) {
      this.$data.$model && t.removeColumn(this.$data.$model.name);
    },
    _doWatchAttrs(t) {
      if (t.hasOwnProperty("width") && !isNaN(t.width)) {
        const e = a(this.$data.$model).layout;
        e && (e.cellWidth = t.width);
      }
    }
  }
}), S = l({
  name: "RGStateBar",
  extends: u,
  props: {},
  data() {
    return {};
  },
  methods: {
    mountCB(t) {
      t.setStateBar(r(a(this.$attrs))), this.$model = t.stateBar;
    }
  }
}), b = l({
  name: "RGRowIndicator",
  extends: u,
  props: {},
  data() {
    return {};
  },
  methods: {
    mountCB(t) {
      t.setRowIndicator(r(a(this.$attrs))), this.$model = t.rowIndicator;
    }
  }
}), B = l({
  name: "RGHeaderSummaries",
  extends: u,
  props: {},
  data() {
    return {};
  },
  methods: {
    mountCB(t) {
      t.setHeaderSummaries(r(a(this.$attrs))), this.$model = t.headerSummaries;
    }
  }
}), k = l({
  name: "RGHeaderSummary",
  extends: u,
  props: {},
  data() {
    return {};
  },
  methods: {
    mountCB(t) {
      t.setHeaderSummary(r(a(this.$attrs))), this.$model = t.headerSummary;
    }
  }
}), v = l({
  name: "RGHeader",
  extends: u,
  props: {},
  data() {
    return {};
  },
  methods: {
    mountCB(t) {
      t.setHeader(r(a(this.$attrs))), this.$model = t.header;
    }
  }
}), V = l({
  name: "RGGroupPanel",
  extends: u,
  props: {},
  data() {
    return {};
  },
  methods: {
    mountCB(t) {
      t.setGroupPanel(r(a(this.$attrs))), this.$model = t.groupPanel;
    }
  }
}), G = l({
  name: "RGFooter",
  extends: u,
  props: {},
  data() {
    return {};
  },
  methods: {
    mountCB(t) {
      t.setFooter(r(a(this.$attrs))), this.$model = t.footer;
    }
  }
}), O = l({
  name: "RGFooters",
  extends: u,
  props: {},
  data() {
    return {};
  },
  methods: {
    mountCB(t) {
      t.setFooters(r(a(this.$attrs))), this.$model = t.footer;
    }
  }
}), x = l({
  name: "RGFilterPanel",
  extends: u,
  props: {},
  data() {
    return {};
  },
  methods: {
    mountCB(t) {
      t.setFilterPanel(r(a(this.$attrs))), this.$model = t.filterPanel;
    }
  }
}), I = l({
  name: "RGDataField",
  extends: u,
  props: {},
  data() {
    return {};
  },
  methods: {
    mountCB(t) {
      const n = r(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);
    }
  }
}), D = l({
  name: "RGDataColumn",
  extends: u,
  data() {
    return {};
  },
  props: {},
  methods: {
    mountCB(t) {
      var e;
      const n = r(a((e = this.$parent) == null ? void 0 : e.$props));
      if (n) {
        const o = n.autoGenerateField, i = t == null ? void 0 : t.getDataSource(), s = r(a(this.$attrs));
        let d = s.fieldName;
        o && (!d && s.field && (d = s.field.fieldName), i && !i.fieldByName(d) && i.addField(s.field || d)), t && (this.$model = t.addColumn({ ...s, fieldName: d }, s.displayIndex ?? -1));
      }
    },
    unmountCB(t) {
      var e;
      this.$data.$model && t.removeColumn(this.$data.$model.name);
      const n = r(a((e = this.$parent) == null ? void 0 : e.$props));
      if (n) {
        const o = n.autoGenerateField, i = t == null ? void 0 : t.getDataSource(), s = r(a(this.$attrs));
        let d = s.fieldName;
        o && (!d && s.field && (d = s.field.fieldName), t.columnByField(d) || i.removeField(d));
      }
    },
    _doWatchAttrs(t) {
      if (t.hasOwnProperty("width") && !isNaN(t.width)) {
        const e = a(this.$data.$model).layout;
        e && (e.cellWidth = t.width);
      }
    }
  }
}), _ = l({
  name: "RGLiteralColumn",
  extends: u,
  data() {
    return {};
  },
  props: {},
  methods: {
    mountCB(t) {
      var e;
      if (r(a((e = this.$parent) == null ? void 0 : e.$attrs))) {
        const o = r(a(this.$attrs));
        t && (this.$model = t.addColumn({ ...o, type: "literal" }, o.displayIndex ?? -1));
      }
    },
    unmountCB(t) {
      this.$data.$model && t.removeColumn(this.$data.$model.name);
    },
    _doWatchAttrs(t) {
      if (t.hasOwnProperty("width") && !isNaN(t.width)) {
        const e = a(this.$data.$model).layout;
        e && (e.cellWidth = t.width);
      }
    }
  }
}), A = l({
  name: "RGCheckBar",
  extends: u,
  props: {},
  data() {
    return {};
  },
  methods: {
    mountCB(t) {
      t.setCheckBar(r(a(this.$attrs))), this.$model = t.checkBar;
    }
  }
});
export {
  A as RGCheckBar,
  D as RGDataColumn,
  I as RGDataField,
  x as RGFilterPanel,
  G as RGFooter,
  O as RGFooters,
  V as RGGroupPanel,
  v as RGHeader,
  B as RGHeaderSummaries,
  k as RGHeaderSummary,
  _ as RGLiteralColumn,
  b as RGRowIndicator,
  P as RGSeriesColumn,
  S as RGStateBar,
  g as RealGridVue,
  R as RealTreeVue
};