realgrid-vue 0.9.0

package/dist/index.es.js

@@ -0,0 +1,1117 @@
+import * as RealGrid from "realgrid";
+import { version, toRaw, defineComponent, h } from "vue";
+const isVue2 = () => {
+  return version.split(".")[0] === "2";
+};
+const toCustomRaw = (props) => {
+  return isVue2() ? props : toRaw(props);
+};
+const camelize = (s) => s.replace(/-./g, (x) => x[1].toUpperCase());
+const pascalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+const kebabToCamel = (obj, prefix = "") => {
+  const ret = {};
+  for (let key in obj) {
+    ret[camelize(prefix ? `${prefix}-${key}` : key)] = toRaw(obj[key]);
+  }
+  return ret;
+};
+const extractDiff = (target, origin = {}, diff = {}) => {
+  target = target || {};
+  const exceptKey = ["children"];
+  for (const [key, value] of Object.entries(origin)) {
+    if (exceptKey.includes(key)) {
+      continue;
+    }
+    if (!diff.hasOwnProperty(key)) {
+      target[key] = null;
+    } else if (Array.isArray(value)) {
+      if (!diff[key] || JSON.stringify(value) != JSON.stringify(diff[key])) {
+        target[key] = diff[key];
+      }
+    } else if (value instanceof Object && !(value instanceof Date || Array.isArray(value) || typeof value === "function")) {
+      if (!(diff[key] instanceof Object)) {
+        target[key] = diff[key];
+      } else {
+        const dif = extractDiff({}, value, diff[key]);
+        if (dif && Object.keys(dif).length > 0) {
+          target[key] = dif;
+        }
+      }
+    } else if (value !== diff[key]) {
+      target[key] = diff[key];
+    }
+  }
+  for (const [key, value] of Object.entries(diff)) {
+    if (exceptKey.includes(key)) {
+      continue;
+    }
+    if (!origin.hasOwnProperty(key)) {
+      target[key] = value;
+    }
+  }
+  return target;
+};
+const $_connectEvents = (grid, provider, props) => {
+  for (const [key, value] of Object.entries(props)) {
+    if (key && typeof value === "function" && key.startsWith("on")) {
+      if (key === "onRowInserting") {
+        grid.onRowInserting = value;
+      } else if (key === "onDataRowInserting") {
+        provider.onRowInserting = value;
+      } else {
+        grid.hasOwnProperty(key) && (grid[key] = value);
+        provider.hasOwnProperty(key) && (provider[key] = value);
+      }
+    }
+  }
+};
+var browser = { exports: {} };
+var process = browser.exports = {};
+var cachedSetTimeout;
+var cachedClearTimeout;
+function defaultSetTimout() {
+  throw new Error("setTimeout has not been defined");
+}
+function defaultClearTimeout() {
+  throw new Error("clearTimeout has not been defined");
+}
+(function() {
+  try {
+    if (typeof setTimeout === "function") {
+      cachedSetTimeout = setTimeout;
+    } else {
+      cachedSetTimeout = defaultSetTimout;
+    }
+  } catch (e) {
+    cachedSetTimeout = defaultSetTimout;
+  }
+  try {
+    if (typeof clearTimeout === "function") {
+      cachedClearTimeout = clearTimeout;
+    } else {
+      cachedClearTimeout = defaultClearTimeout;
+    }
+  } catch (e) {
+    cachedClearTimeout = defaultClearTimeout;
+  }
+})();
+function runTimeout(fun) {
+  if (cachedSetTimeout === setTimeout) {
+    return setTimeout(fun, 0);
+  }
+  if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
+    cachedSetTimeout = setTimeout;
+    return setTimeout(fun, 0);
+  }
+  try {
+    return cachedSetTimeout(fun, 0);
+  } catch (e) {
+    try {
+      return cachedSetTimeout.call(null, fun, 0);
+    } catch (e2) {
+      return cachedSetTimeout.call(this, fun, 0);
+    }
+  }
+}
+function runClearTimeout(marker) {
+  if (cachedClearTimeout === clearTimeout) {
+    return clearTimeout(marker);
+  }
+  if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
+    cachedClearTimeout = clearTimeout;
+    return clearTimeout(marker);
+  }
+  try {
+    return cachedClearTimeout(marker);
+  } catch (e) {
+    try {
+      return cachedClearTimeout.call(null, marker);
+    } catch (e2) {
+      return cachedClearTimeout.call(this, marker);
+    }
+  }
+}
+var queue = [];
+var draining = false;
+var currentQueue;
+var queueIndex = -1;
+function cleanUpNextTick() {
+  if (!draining || !currentQueue) {
+    return;
+  }
+  draining = false;
+  if (currentQueue.length) {
+    queue = currentQueue.concat(queue);
+  } else {
+    queueIndex = -1;
+  }
+  if (queue.length) {
+    drainQueue();
+  }
+}
+function drainQueue() {
+  if (draining) {
+    return;
+  }
+  var timeout = runTimeout(cleanUpNextTick);
+  draining = true;
+  var len = queue.length;
+  while (len) {
+    currentQueue = queue;
+    queue = [];
+    while (++queueIndex < len) {
+      if (currentQueue) {
+        currentQueue[queueIndex].run();
+      }
+    }
+    queueIndex = -1;
+    len = queue.length;
+  }
+  currentQueue = null;
+  draining = false;
+  runClearTimeout(timeout);
+}
+process.nextTick = function(fun) {
+  var args = new Array(arguments.length - 1);
+  if (arguments.length > 1) {
+    for (var i = 1; i < arguments.length; i++) {
+      args[i - 1] = arguments[i];
+    }
+  }
+  queue.push(new Item(fun, args));
+  if (queue.length === 1 && !draining) {
+    runTimeout(drainQueue);
+  }
+};
+function Item(fun, array) {
+  this.fun = fun;
+  this.array = array;
+}
+Item.prototype.run = function() {
+  this.fun.apply(null, this.array);
+};
+process.title = "browser";
+process.browser = true;
+process.env = {};
+process.argv = [];
+process.version = "";
+process.versions = {};
+function noop() {
+}
+process.on = noop;
+process.addListener = noop;
+process.once = noop;
+process.off = noop;
+process.removeListener = noop;
+process.removeAllListeners = noop;
+process.emit = noop;
+process.prependListener = noop;
+process.prependOnceListener = noop;
+process.listeners = function(name) {
+  return [];
+};
+process.binding = function(name) {
+  throw new Error("process.binding is not supported");
+};
+process.cwd = function() {
+  return "/";
+};
+process.chdir = function(dir) {
+  throw new Error("process.chdir is not supported");
+};
+process.umask = function() {
+  return 0;
+};
+const RealGridBase = () => {
+  return defineComponent({
+    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 container = this.$el;
+      const props = kebabToCamel(toCustomRaw(this.$props));
+      if (this.$listeners) {
+        for (const [key, value] of Object.entries(this.$listeners)) {
+          if (key && typeof value === "function") {
+            if (key === "row-inserting") {
+              props.onRowInserting = value;
+            } else if (key === "data-row-inserting") {
+              props.onDataRowInserting = value;
+            } else {
+              const eventName = "on" + pascalize(camelize(key));
+              props.hasOwnProperty(eventName) && (props[eventName] = value);
+            }
+          }
+        }
+      }
+      const { grid, dataProvider } = this._createGrid(container, props);
+      this.dataProvider = dataProvider;
+      this.gridView = grid;
+      this.executeCB();
+      $_connectEvents(grid, dataProvider, props);
+      this._applyOptions(props);
+      if (props.layout) {
+        grid.setColumnLayout(props.layout);
+      }
+      this._doInitProc(grid, props);
+    },
+    computed: {
+      dataProvider: {
+        get() {
+          return toCustomRaw(this.$data.$dataProvider);
+        },
+        set(value) {
+          this.$dataProvider = value;
+        }
+      },
+      gridView: {
+        get() {
+          return toCustomRaw(this.$data.$gridView);
+        },
+        set(value) {
+          this.$gridView = value;
+        }
+      }
+    },
+    unmounted() {
+      const props = kebabToCamel(this.$props);
+      const listener = kebabToCamel(this.$attrs, "on");
+      const destroyProc = props.onDestroy || listener.onDestroy;
+      destroyProc && destroyProc(this.gridView);
+      this.gridView = this.gridView && this.gridView.destroy();
+      this.dataProvider = this.dataProvider && this.dataProvider.destroy();
+    },
+    destroyed() {
+      const props = kebabToCamel(this.$props);
+      const listener = kebabToCamel(this.$attrs, "on");
+      const destroyProc = props.onDestroy || listener.onDestroy;
+      destroyProc && destroyProc(this.gridView);
+      this.gridView = this.gridView && this.gridView.destroy();
+      this.dataProvider = this.dataProvider && this.dataProvider.destroy();
+    },
+    watch: {
+      gridProps: {
+        handler(val, oldVal) {
+          const diff = extractDiff({}, oldVal, val);
+          if (this.gridView && diff && Object.keys(diff).length > 0) {
+            this.gridView.setOptions(diff);
+          }
+        },
+        deep: true
+      },
+      disabled(val, oldVal) {
+        this.gridView && (this.gridView.disabled = val);
+      },
+      dataProps: {
+        handler(val, oldVal) {
+          const diff = extractDiff({}, oldVal, val);
+          if (this.dataProvider && diff && Object.keys(diff).length > 0) {
+            this.dataProvider.setOptions(diff);
+          }
+        },
+        deep: true
+      },
+      locale: {
+        handler(val, oldVal) {
+          val && RealGrid.default.setLocale(val);
+        }
+      },
+      layout: {
+        handler(val, oldVal) {
+          this.gridView && this.gridView.setColumnLayout(val);
+        },
+        deep: true
+      }
+    },
+    methods: {
+      addCallback(fn) {
+        this.$data._mountCBs.push(fn);
+        clearTimeout(this.$data._mountTimer);
+        const self = this;
+        this.$data._mountTimer = window.setTimeout(function() {
+          self.executeCB();
+        }, 20);
+      },
+      removeCallback(fn) {
+        if (this.$data._mountCBs.indexOf(fn) >= 0) {
+          const idx = this.$data._mountCBs.indexOf(fn);
+          this.$data._mountCBs.splice(idx, 1);
+        }
+      },
+      executeCB() {
+        const gridView = isVue2() ? this.$gridView : this.gridView;
+        const dataProvider = isVue2() ? this.$dataProvider : this.dataProvider;
+        if (!gridView) {
+          return;
+        }
+        clearTimeout(this._mountTimer);
+        if (gridView && gridView["_view"]) {
+          gridView.beginUpdate();
+          try {
+            dataProvider == null ? void 0 : dataProvider.beginUpdate();
+            try {
+              const cbs = this.$data._mountCBs.sort((v1, v2) => {
+                return (v1.$mountSeq == null ? -1 : v1.$mountSeq) - (v2.$mountSeq == null ? -1 : v2.$mountSeq);
+              });
+              while (cbs && cbs.length) {
+                const f = cbs.shift();
+                f == null ? void 0 : f.call(this, gridView);
+              }
+            } finally {
+              dataProvider == null ? void 0 : dataProvider.endUpdate();
+            }
+          } finally {
+            gridView.endUpdate(true);
+            this.$data._mountTimer = null;
+            this.$data._mountCBs = [];
+          }
+        }
+      },
+      _applyOptions(options) {
+        const grid = isVue2() ? this.$gridView : this.gridView;
+        const dataProvider = isVue2() ? this.$dataProvider : this.dataProvider;
+        if (grid) {
+          for (let [key, value] of Object.entries(options)) {
+            switch (key) {
+              case "gridProps":
+                value && grid.setOptions(value);
+                break;
+              case "disabled":
+                grid && (grid.disabled = !!value);
+                break;
+              case "dataProps":
+                value && (dataProvider == null ? void 0 : dataProvider.setOptions(value));
+                break;
+              case "layout":
+                value && grid && grid.setColumnLayout(value);
+                break;
+              case "rowStyleCallback":
+                grid.setRowStyleCallback(value);
+                break;
+              case "cellStyleCallback":
+                grid.setCellStyleCallback(value);
+                break;
+              case "locale":
+                value && RealGrid.default.setLocale(value);
+                break;
+            }
+          }
+        }
+        this._doApplyOptions(options);
+      },
+      _createGrid(container, props) {
+        return {
+          grid: null,
+          dataProvider: null
+        };
+      },
+      _doInitProc(grid, props) {
+        const initProc = props.onInitialized;
+        if (initProc) {
+          const fType = initProc.constructor.name;
+          if (fType === "Function") {
+            initProc(grid);
+          } else if (fType === "AsyncFunction") {
+            Promise.resolve(initProc(grid));
+          }
+        }
+      },
+      _doApplyOptions(options) {
+      }
+    },
+    render() {
+      var _a, _b;
+      const parseChild = (vNodes) => {
+        const child = [];
+        if (Array.isArray(vNodes)) {
+          for (let vNode of vNodes) {
+            if (Array.isArray(vNode.children)) {
+              child.push(...parseChild(vNode.children));
+            } else {
+              child.push(vNode);
+            }
+          }
+        }
+        return child;
+      };
+      const children = [];
+      for (let key of Object.keys(this.$slots)) {
+        let vNodes = this.$slots[key];
+        if (typeof vNodes === "function") {
+          vNodes = vNodes();
+        }
+        children.push(...parseChild(vNodes));
+      }
+      let displayIndex = 0;
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (child.type instanceof Object && child.type.hasOwnProperty("name")) {
+          const name = child.type.name;
+          if (name && /^RG.+Column$/.exec(name)) {
+            child.props = child.props || {};
+            child.props && ((_b = (_a = child.props).displayIndex) != null ? _b : _a.displayIndex = displayIndex++);
+          }
+        }
+        child.$mountSeq = i;
+      }
+      const style = this.$attrs.style ? this.$attrs.style : { width: "100%", height: "100%" };
+      const node = h("div", { style }, children);
+      return node;
+    }
+  });
+};
+const RealGridVue = defineComponent({
+  name: "RealGridVue",
+  extends: RealGridBase(),
+  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(val, oldVal) {
+        var _a;
+        if (this.$data._mountTimer != null) {
+          const callback = () => {
+            browser.exports.nextTick(() => {
+              var _a2;
+              (_a2 = this.dataProvider) == null ? void 0 : _a2.setRows(toCustomRaw(val));
+            });
+          };
+          callback.$mountSeq = Infinity;
+          this.addCallback(callback);
+        } else {
+          (_a = this.dataProvider) == null ? void 0 : _a.setRows(toCustomRaw(val));
+        }
+      }
+    }
+  },
+  methods: {
+    _createGrid(container, props) {
+      var _a;
+      const grid = new RealGrid.default.GridView(container, props == null ? void 0 : props.accessibility, props == null ? void 0 : props.waiOptions);
+      const dataProvider = new RealGrid.default.LocalDataProvider((_a = props.dataProps) == null ? void 0 : _a.undoable);
+      grid.setDataSource(dataProvider);
+      return {
+        grid,
+        dataProvider
+      };
+    },
+    _doApplyOptions(options) {
+      for (const [key, value] of Object.entries(options)) {
+        switch (key) {
+          case "rows":
+            const dataProvider = isVue2() ? this.$dataProvider : this.dataProvider;
+            dataProvider == null ? void 0 : dataProvider.setRows(toCustomRaw(value));
+            break;
+        }
+      }
+    }
+  }
+});
+const RealTreeVue = defineComponent({
+  name: "RealTreeVue",
+  extends: RealGridBase(),
+  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 toCustomRaw(this.$data.$gridView);
+      },
+      set(value) {
+        this.$gridView = value;
+      }
+    },
+    dataProvider: {
+      get() {
+        return toCustomRaw(this.$data.$dataProvider);
+      },
+      set(value) {
+        this.$dataProvider = value;
+      }
+    }
+  },
+  methods: {
+    _createGrid(container, props) {
+      var _a;
+      const grid = new RealGrid.TreeView(container);
+      const dataProvider = new RealGrid.LocalTreeDataProvider((_a = props.dataProps) == null ? void 0 : _a.undoable);
+      grid.setDataSource(dataProvider);
+      return {
+        grid,
+        dataProvider
+      };
+    },
+    _doApplyOptions(options) {
+      var _a, _b, _c;
+      for (const [key, value] of Object.entries(options)) {
+        switch (key) {
+          case "treeOptions":
+            value && ((_a = this.gridView) == null ? void 0 : _a.setTreeOptions(toCustomRaw(value)));
+            break;
+          case "rows":
+            (_b = this.dataProvider) == null ? void 0 : _b.setRows(toCustomRaw(value), this.treeField, this.needSorting, this.childrenField, this.iconField);
+            break;
+          case "json":
+            (_c = this.dataProvider) == null ? void 0 : _c.setObjectRows(toCustomRaw(value), this.rowsProp, this.childrenProp, this.iconProp);
+            break;
+        }
+      }
+    }
+  },
+  watch: {
+    rows: {
+      handler(val, oldVal) {
+        var _a;
+        if (this.$data._mountTimer != null) {
+          const callback = () => {
+            browser.exports.nextTick(() => {
+              var _a2;
+              (_a2 = this.dataProvider) == null ? void 0 : _a2.setRows(toCustomRaw(val), this.treeField, this.needSorting, this.childrenField, this.iconField);
+            });
+          };
+          callback.$mountSeq = Infinity;
+          this.addCallback(callback);
+        } else {
+          (_a = this.dataProvider) == null ? void 0 : _a.setRows(toCustomRaw(val), this.treeField, this.needSorting, this.childrenField, this.iconField);
+        }
+      }
+    },
+    json: {
+      handler(val, oldVal) {
+        var _a;
+        if (this.$data._mountTimer != null) {
+          const callback = () => {
+            browser.exports.nextTick(() => {
+              var _a2;
+              (_a2 = this.dataProvider) == null ? void 0 : _a2.setObjectRows(toCustomRaw(val), this.rowsProp, this.childrenProp, this.iconProp);
+            });
+          };
+          callback.$mountSeq = Infinity;
+          this.addCallback(callback);
+        } else {
+          (_a = this.dataProvider) == null ? void 0 : _a.setObjectRows(toCustomRaw(val), this.rowsProp, this.childrenProp, this.iconProp);
+        }
+      }
+    }
+  }
+});
+const ComponentBase = defineComponent({
+  name: "ComponentBase",
+  props: {},
+  data() {
+    return {
+      $model: null,
+      $oldValue: null
+    };
+  },
+  mounted() {
+    const p = toCustomRaw(this.$parent);
+    if (p) {
+      this.$oldValue = kebabToCamel(toCustomRaw(this.$attrs));
+      this.mountCB.$mountSeq = isVue2() ? this._vnode.$mountSeq : this.$.vnode.$mountSeq;
+      p.addCallback(this.mountCB);
+    }
+  },
+  unmounted() {
+    const p = this.$parent;
+    if (p) {
+      p.removeCallback(this.mountCB);
+      p.addCallback(this.unmountCB);
+    }
+  },
+  destroyed() {
+    const p = this.$parent;
+    if (p) {
+      p.removeCallback(this.mountCB);
+      p.addCallback(this.unmountCB);
+    }
+  },
+  watch: {
+    $attrs: {
+      handler(val, oldVal) {
+        var _a;
+        const value = kebabToCamel(toCustomRaw(val));
+        const diff = extractDiff({}, kebabToCamel(toCustomRaw(this.$data.$oldValue)), kebabToCamel(toCustomRaw(val)));
+        if (diff && Object.keys(diff).length > 0) {
+          const model = toCustomRaw((_a = this.$data) == null ? void 0 : _a.$model);
+          model && model.assignFrom(value);
+          this._doWatchAttrs(diff);
+          this.$oldValue = value;
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    mountCB() {
+    },
+    unmountCB() {
+    },
+    _doWatchAttrs(diff) {
+    }
+  },
+  render() {
+  }
+});
+const RGSeriesColumn = defineComponent({
+  name: "RGSeriesColumn",
+  extends: ComponentBase,
+  data() {
+    return {};
+  },
+  props: {},
+  methods: {
+    mountCB(grid) {
+      var _a, _b;
+      const pAttrs = kebabToCamel(toRaw((_a = this.$parent) == null ? void 0 : _a.$attrs));
+      if (pAttrs) {
+        const props = kebabToCamel(toRaw(this.$attrs));
+        if (grid) {
+          this.$model = grid.addColumn({ ...props, type: "series" }, (_b = props.displayIndex) != null ? _b : -1);
+        }
+      }
+    },
+    unmountCB(grid) {
+      if (this.$data.$model) {
+        grid.removeColumn(this.$model.name);
+      }
+    },
+    _doWatchAttrs(diff) {
+      if (diff.hasOwnProperty("width") && !isNaN(diff["width"])) {
+        const column = toRaw(this.$data.$model);
+        const layout = column.layout;
+        if (layout) {
+          layout.cellWidth = diff.width;
+        }
+      }
+    }
+  }
+});
+const RGStateBar = defineComponent({
+  name: "RGStateBar",
+  extends: ComponentBase,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(grid) {
+      grid.setStateBar(kebabToCamel(toRaw(this.$attrs)));
+      this.$model = grid.stateBar;
+    }
+  }
+});
+const RGRowIndicator = defineComponent({
+  name: "RGRowIndicator",
+  extends: ComponentBase,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(grid) {
+      grid.setRowIndicator(kebabToCamel(toRaw(this.$attrs)));
+      this.$model = grid.rowIndicator;
+    }
+  }
+});
+const RGHeaderSummaries = defineComponent({
+  name: "RGHeaderSummaries",
+  extends: ComponentBase,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(grid) {
+      grid.setHeaderSummaries(kebabToCamel(toRaw(this.$attrs)));
+      this.$model = grid.headerSummaries;
+    }
+  }
+});
+const RGHeaderSummary = defineComponent({
+  name: "RGHeaderSummary",
+  extends: ComponentBase,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(grid) {
+      grid.setHeaderSummary(kebabToCamel(toRaw(this.$attrs)));
+      this.$model = grid.headerSummary;
+    }
+  }
+});
+const RGHeader = defineComponent({
+  name: "RGHeader",
+  extends: ComponentBase,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(grid) {
+      grid.setHeader(kebabToCamel(toRaw(this.$attrs)));
+      this.$model = grid.header;
+    }
+  }
+});
+const RGGroupPanel = defineComponent({
+  name: "RGGroupPanel",
+  extends: ComponentBase,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(grid) {
+      grid.setGroupPanel(kebabToCamel(toRaw(this.$attrs)));
+      this.$model = grid.groupPanel;
+    }
+  }
+});
+const RGFooter = defineComponent({
+  name: "RGFooter",
+  extends: ComponentBase,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(grid) {
+      grid.setFooter(kebabToCamel(toRaw(this.$attrs)));
+      this.$model = grid.footer;
+    }
+  }
+});
+const RGFooters = defineComponent({
+  name: "RGFooters",
+  extends: ComponentBase,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(grid) {
+      grid.setFooters(kebabToCamel(toRaw(this.$attrs)));
+      this.$model = grid.footer;
+    }
+  }
+});
+const RGFilterPanel = defineComponent({
+  name: "RGFilterPanel",
+  extends: ComponentBase,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(grid) {
+      grid.setFilterPanel(kebabToCamel(toRaw(this.$attrs)));
+      this.$model = grid.filterPanel;
+    }
+  }
+});
+const RGDataField = defineComponent({
+  name: "RGDataField",
+  extends: ComponentBase,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(grid) {
+      const attrs = kebabToCamel(toRaw(this.$attrs));
+      if (attrs.fieldName) {
+        const dp = grid.getDataSource();
+        const field = dp.fieldByName(attrs.fieldName);
+        if (!field) {
+          this.$model = dp.addField(attrs, true);
+        }
+      }
+    },
+    unmountDB(grid) {
+      if (this.$model) {
+        const dp = grid.getDataSource();
+        dp.removeField(this.$model);
+      }
+    }
+  }
+});
+const RGDataColumn = defineComponent({
+  name: "RGDataColumn",
+  extends: ComponentBase,
+  data() {
+    return {};
+  },
+  props: {},
+  methods: {
+    mountCB(grid) {
+      var _a, _b;
+      const pAttrs = kebabToCamel(toRaw((_a = this.$parent) == null ? void 0 : _a.$props));
+      if (pAttrs) {
+        const generateField = pAttrs.autoGenerateField;
+        const dp = grid == null ? void 0 : grid.getDataSource();
+        const props = kebabToCamel(toRaw(this.$attrs));
+        let fieldName = props.fieldName;
+        if (generateField) {
+          if (!fieldName && props.field) {
+            fieldName = props.field.fieldName;
+          }
+          if (dp && !dp.fieldByName(fieldName)) {
+            dp.addField(props.field || fieldName);
+          }
+        }
+        if (grid) {
+          this.$model = grid.addColumn({ ...props, ...{ fieldName } }, (_b = props.displayIndex) != null ? _b : -1);
+        }
+      }
+    },
+    unmountCB(grid) {
+      var _a;
+      if (this.$data.$model) {
+        grid.removeColumn(this.$data.$model.name);
+      }
+      const pAttrs = kebabToCamel(toRaw((_a = this.$parent) == null ? void 0 : _a.$props));
+      if (pAttrs) {
+        const generateField = pAttrs.autoGenerateField;
+        const dp = grid == null ? void 0 : grid.getDataSource();
+        const props = kebabToCamel(toRaw(this.$attrs));
+        let fieldName = props.fieldName;
+        if (generateField) {
+          if (!fieldName && props.field) {
+            fieldName = props.field.fieldName;
+          }
+          if (!grid.columnByField(fieldName)) {
+            dp.removeField(fieldName);
+          }
+        }
+      }
+    },
+    _doWatchAttrs(diff) {
+      if (diff.hasOwnProperty("width") && !isNaN(diff["width"])) {
+        const column = toRaw(this.$data.$model);
+        const layout = column.layout;
+        if (layout) {
+          layout.cellWidth = diff.width;
+        }
+      }
+    }
+  }
+});
+const RGLiteralColumn = defineComponent({
+  name: "RGLiteralColumn",
+  extends: ComponentBase,
+  data() {
+    return {};
+  },
+  props: {},
+  methods: {
+    mountCB(grid) {
+      var _a, _b;
+      const pAttrs = kebabToCamel(toRaw((_a = this.$parent) == null ? void 0 : _a.$attrs));
+      if (pAttrs) {
+        const props = kebabToCamel(toRaw(this.$attrs));
+        if (grid) {
+          this.$model = grid.addColumn({ ...props, type: "literal" }, (_b = props.displayIndex) != null ? _b : -1);
+        }
+      }
+    },
+    unmountCB(grid) {
+      if (this.$data.$model) {
+        grid.removeColumn(this.$model.name);
+      }
+    },
+    _doWatchAttrs(diff) {
+      if (diff.hasOwnProperty("width") && !isNaN(diff["width"])) {
+        const column = toRaw(this.$data.$model);
+        const layout = column.layout;
+        if (layout) {
+          layout.cellWidth = diff.width;
+        }
+      }
+    }
+  }
+});
+const RGCheckBar = defineComponent({
+  name: "RGCheckBar",
+  extends: ComponentBase,
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    mountCB(grid) {
+      grid.setCheckBar(kebabToCamel(toRaw(this.$attrs)));
+      this.$model = grid.checkBar;
+    }
+  }
+});
+export { RGCheckBar, RGDataColumn, RGDataField, RGFilterPanel, RGFooter, RGFooters, RGGroupPanel, RGHeader, RGHeaderSummaries, RGHeaderSummary, RGLiteralColumn, RGRowIndicator, RGSeriesColumn, RGStateBar, RealGridVue, RealTreeVue };