balala-revogrid 1.0.0

package/dist/collection/components/editors/text-editor.js

@@ -0,0 +1,74 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { isEnterKeyValue, isTab } from "../../utils/key.utils";
+import { timeout } from "../../utils";
+export class TextEditor {
+    constructor(data, saveCallback) {
+        this.data = data;
+        this.saveCallback = saveCallback;
+        this.editInput = null;
+        this.element = null;
+        this.editCell = undefined;
+    }
+    /**
+     * Callback triggered on cell editor render
+     */
+    async componentDidRender() {
+        var _a;
+        if (this.editInput) {
+            await timeout();
+            (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    onKeyDown(e) {
+        const isEnter = isEnterKeyValue(e.key);
+        const isKeyTab = isTab(e.key);
+        if ((isKeyTab || isEnter) &&
+            e.target &&
+            this.saveCallback &&
+            !e.isComposing) {
+            // blur is needed to avoid autoscroll
+            this.beforeDisconnect();
+            // request callback which will close cell after all
+            this.saveCallback(this.getValue(), isKeyTab);
+        }
+    }
+    /**
+     * IMPORTANT: Prevent scroll glitches when editor is closed and focus is on current input element.
+     */
+    beforeDisconnect() {
+        var _a;
+        (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    /**
+     * Get value from input
+     */
+    getValue() {
+        var _a;
+        return (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    /**
+     * Render method for Editor plugin.
+     * Renders input element with passed data from cell.
+     * @param {Function} h - h function from stencil render.
+     * @param {Object} _additionalData - additional data from plugin.
+     * @returns {VNode} - input element.
+     */
+    render(h, _additionalData) {
+        var _a, _b;
+        return h('input', {
+            type: 'text',
+            enterKeyHint: 'enter',
+            // set input value from cell data
+            value: (_b = (_a = this.editCell) === null || _a === void 0 ? void 0 : _a.val) !== null && _b !== void 0 ? _b : '',
+            // save input element as ref for further usage
+            ref: (el) => {
+                this.editInput = el;
+            },
+            // listen to keydown event on input element
+            onKeyDown: (e) => this.onKeyDown(e),
+        });
+    }
+}
+//# sourceMappingURL=text-editor.js.map

package/dist/collection/components/editors/text-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/editors/text-editor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAiBtC,MAAM,OAAO,UAAU;IAMrB,YACS,IAA2B,EAC1B,YAA2B;QAD5B,SAAI,GAAJ,IAAI,CAAuB;QAC1B,iBAAY,GAAZ,YAAY,CAAe;QAPrC,cAAS,GAA4B,IAAI,CAAC;QAE1C,YAAO,GAAmB,IAAI,CAAC;QAC/B,aAAQ,GAAc,SAAS,CAAC;IAK7B,CAAC;IAEJ;;OAEG;IACH,KAAK,CAAC,kBAAkB;;QACtB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,MAAM,OAAO,EAAE,CAAC;YAChB,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,SAAS,CAAC,CAAgB;QACxB,MAAM,OAAO,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QACvC,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAE9B,IACE,CAAC,QAAQ,IAAI,OAAO,CAAC;YACrB,CAAC,CAAC,MAAM;YACR,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,CAAC,WAAW,EACd,CAAC;YACD,qCAAqC;YACrC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,mDAAmD;YACnD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED;;OAEG;IACH,gBAAgB;;QACd,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,EAAE,CAAC;IACzB,CAAC;IAED;;OAEG;IACH,QAAQ;;QACN,OAAO,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAC;IAC/B,CAAC;IAED;;;;;;OAMG;IACH,MAAM,CAAC,CAAuB,EAAE,eAAoB;;QAClD,OAAO,CAAC,CAAC,OAAO,EAAE;YAChB,IAAI,EAAE,MAAM;YACZ,YAAY,EAAE,OAAO;YACrB,iCAAiC;YACjC,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,mCAAI,EAAE;YAC/B,8CAA8C;YAC9C,GAAG,EAAE,CAAC,EAA2B,EAAE,EAAE;gBACnC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;YACtB,CAAC;YACD,2CAA2C;YAC3C,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;SACnD,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["import { type VNode, h as createElement } from '@stencil/core';\nimport { isEnterKeyValue, isTab } from '../../utils/key.utils';\nimport { timeout } from '../../utils';\nimport type { EditCell, EditorBase, ColumnDataSchemaModel } from '@type';\n\n/**\n * Represents a cell editor in a grid.\n *\n * It's a good place to start with your own editor.\n * It manages the editing of cells by handling events, saving data, rendering the editor UI, and managing the lifecycle of the editor instance.\n */\n\n/**\n * Callback triggered on cell editor save\n * Closes editor when called\n * @param preventFocus - if true editor will not be closed and next cell will not be focused\n */\nexport type SaveCallback = (value: any, preventFocus: boolean) => void;\n\nexport class TextEditor implements EditorBase {\n  editInput: HTMLInputElement | null = null;\n\n  element: Element | null = null;\n  editCell?: EditCell = undefined;\n\n  constructor(\n    public data: ColumnDataSchemaModel,\n    private saveCallback?: SaveCallback,\n  ) {}\n\n  /**\n   * Callback triggered on cell editor render\n   */\n  async componentDidRender(): Promise<void> {\n    if (this.editInput) {\n      await timeout();\n      this.editInput?.focus();\n    }\n  }\n\n  onKeyDown(e: KeyboardEvent) {\n    const isEnter = isEnterKeyValue(e.key);\n    const isKeyTab = isTab(e.key);\n\n    if (\n      (isKeyTab || isEnter) &&\n      e.target &&\n      this.saveCallback &&\n      !e.isComposing\n    ) {\n      // blur is needed to avoid autoscroll\n      this.beforeDisconnect();\n      // request callback which will close cell after all\n      this.saveCallback(this.getValue(), isKeyTab);\n    }\n  }\n\n  /**\n   * IMPORTANT: Prevent scroll glitches when editor is closed and focus is on current input element.\n   */\n  beforeDisconnect() {\n    this.editInput?.blur();\n  }\n\n  /**\n   * Get value from input\n   */\n  getValue() {\n    return this.editInput?.value;\n  }\n\n  /**\n   * Render method for Editor plugin.\n   * Renders input element with passed data from cell.\n   * @param {Function} h - h function from stencil render.\n   * @param {Object} _additionalData - additional data from plugin.\n   * @returns {VNode} - input element.\n   */\n  render(h: typeof createElement, _additionalData: any): VNode | VNode[] {\n    return h('input', {\n      type: 'text',\n      enterKeyHint: 'enter',\n      // set input value from cell data\n      value: this.editCell?.val ?? '',\n      // save input element as ref for further usage\n      ref: (el: HTMLInputElement | null) => {\n        this.editInput = el;\n      },\n      // listen to keydown event on input element\n      onKeyDown: (e: KeyboardEvent) => this.onKeyDown(e),\n    });\n  }\n}\n"]}

package/dist/collection/components/extra/revogr-extra.js

@@ -0,0 +1,125 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { h } from "@stencil/core";
+/**
+ * Contains extra elements for stencil components.
+ * Performs rendering and updates for external components.
+ *
+ * @example
+ * In Plugins if you want to add extra elements to grid and use stenciljs vnodes reactivity:
+ * function paginationPanel(this: PaginationPlugin, config: { refresh: () => void }) {
+ *    // use `config.refresh()` for component to re-render
+ *    return h('div')
+ * }
+ *
+ * revogrid.registerVNode = [
+ *    ...existingNodes,
+ *     paginationPanel.bind(this)
+ * ];
+
+
+/**
+ * @internal
+ */
+export class RevoGridExtra {
+    constructor() {
+        /**
+         * Nodes to render
+         */
+        this.nodes = [];
+        /**
+         * Force component to re-render
+         */
+        this.update = 1;
+    }
+    /**
+     * Refreshes the extra component. Useful if you want to manually
+     * force the component to re-render.
+     */
+    async refresh() {
+        this.update *= -1;
+    }
+    render() {
+        var _a;
+        return (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.map(node => {
+            // Check if node is a function or a stencil component
+            // If function wrap it in a stencil component with the refresh function
+            if (typeof node === 'function') {
+                const config = {};
+                const getNodes = () => [node({ refresh: () => { var _a; return (_a = config.refresh) === null || _a === void 0 ? void 0 : _a.call(config); } })];
+                return (h("revogr-extra", { nodes: getNodes(), ref: (el) => {
+                        if (el) {
+                            // Update exclusively for current node
+                            config.refresh = () => {
+                                el.nodes = getNodes();
+                            };
+                        }
+                    } }));
+            }
+            return node;
+        });
+    }
+    static get is() { return "revogr-extra"; }
+    static get properties() {
+        return {
+            "nodes": {
+                "type": "unknown",
+                "attribute": "nodes",
+                "mutable": false,
+                "complexType": {
+                    "original": "(\n    | VNode\n    | ((c: ExtraNodeFuncConfig) => VNode)\n  )[]",
+                    "resolved": "(VNode | ((c: ExtraNodeFuncConfig) => VNode))[]",
+                    "references": {
+                        "VNode": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "node_modules::VNode"
+                        },
+                        "ExtraNodeFuncConfig": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ExtraNodeFuncConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nodes to render"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "update": {}
+        };
+    }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Refreshes the extra component. Useful if you want to manually\nforce the component to re-render.",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=revogr-extra.js.map

package/dist/collection/components/extra/revogr-extra.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"revogr-extra.js","sourceRoot":"","sources":["../../../src/components/extra/revogr-extra.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAS,MAAM,eAAe,CAAC;AAGzE;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,MAAM,OAAO,aAAa;IAH1B;QAIE;;WAEG;QACK,UAAK,GAGP,EAAE,CAAC;QACT;;WAEG;QACM,WAAM,GAAG,CAAC,CAAC;KAmCrB;IAjCC;;;OAGG;IACO,KAAK,CAAC,OAAO;QACrB,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC;IACpB,CAAC;IAED,MAAM;;QACJ,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,GAAG,CAAC,IAAI,CAAC,EAAE;YAC5B,qDAAqD;YACrD,uEAAuE;YACvE,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE,CAAC;gBAC/B,MAAM,MAAM,GAAiC,EAAE,CAAC;gBAChD,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,MAAM,CAAC,OAAO,sDAAI,CAAA,EAAA,EAAE,CAAC,CAAC,CAAC;gBAErE,OAAO,CACL,oBACE,KAAK,EAAE,QAAQ,EAAE,EACjB,GAAG,EAAE,CAAC,EAA2B,EAAE,EAAE;wBACnC,IAAI,EAAE,EAAE,CAAC;4BACP,sCAAsC;4BACtC,MAAM,CAAC,OAAO,GAAG,GAAG,EAAE;gCACpB,EAAE,CAAC,KAAK,GAAG,QAAQ,EAAE,CAAC;4BACxB,CAAC,CAAC;wBACJ,CAAC;oBACH,CAAC,GACD,CACH,CAAC;YACJ,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Method, Prop, State, VNode } from '@stencil/core';\nimport type { ExtraNodeFuncConfig } from '@type';\n\n/**\n * Contains extra elements for stencil components.\n * Performs rendering and updates for external components.\n * \n * @example\n * In Plugins if you want to add extra elements to grid and use stenciljs vnodes reactivity:\n * function paginationPanel(this: PaginationPlugin, config: { refresh: () => void }) {\n *    // use `config.refresh()` for component to re-render\n *    return h('div')\n * }\n * \n * revogrid.registerVNode = [\n *    ...existingNodes,\n *     paginationPanel.bind(this)\n * ];\n\n\n/**\n * @internal\n */\n@Component({\n  tag: 'revogr-extra',\n})\nexport class RevoGridExtra {\n  /**\n   * Nodes to render\n   */\n  @Prop() nodes: (\n    | VNode\n    | ((c: ExtraNodeFuncConfig) => VNode)\n  )[] = [];\n  /**\n   * Force component to re-render\n   */\n  @State() update = 1;\n\n  /**\n   * Refreshes the extra component. Useful if you want to manually\n   * force the component to re-render.\n   */\n  @Method() async refresh() {\n    this.update *= -1;\n  }\n\n  render() {\n    return this.nodes?.map(node => {\n      // Check if node is a function or a stencil component\n      // If function wrap it in a stencil component with the refresh function\n      if (typeof node === 'function') {\n        const config: Partial<ExtraNodeFuncConfig> = {};\n        const getNodes = () => [node({ refresh: () => config.refresh?.() })];\n\n        return (\n          <revogr-extra\n            nodes={getNodes()}\n            ref={(el?: HTMLRevogrExtraElement) => {\n              if (el) {\n                // Update exclusively for current node\n                config.refresh = () => {\n                  el.nodes = getNodes();\n                };\n              }\n            }}\n          />\n        );\n      }\n      return node;\n    });\n  }\n}\n"]}

package/dist/collection/components/grouping-overlay/revogr-grouping-overlay.css

@@ -0,0 +1,62 @@
+:host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.grouping-overlay-viewport .header-wrapper > div {
+  box-shadow: 0 -1px 0 var(--rg-cell-border-color, #e0e0e0) inset;
+}
+
+.grouping-rows-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.grouping-rows-container .groupingRow {
+  position: absolute;
+  pointer-events: auto;
+  width: 100%;
+  font-weight: 600;
+  text-align: left;
+  mix-blend-mode: normal;
+  z-index: 1;
+  transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.grouping-rows-container .groupingRow .group-expand {
+  width: 25px;
+  height: 100%;
+  max-height: 25px;
+  margin-right: 2px;
+  background-color: transparent;
+  border-color: transparent;
+  vertical-align: middle;
+  padding-left: 5px;
+  display: inline-flex;
+  cursor: pointer;
+}
+.grouping-rows-container .groupingRow .group-expand svg {
+  width: 7px;
+}
+.grouping-rows-container .rgRow {
+  border-bottom: 1px solid var(--rg-cell-border-color, #e0e0e0);
+}
+.grouping-rows-container .dataRow {
+  position: absolute;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: transparent !important;
+  pointer-events: auto;
+  z-index: 0;
+  transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}