xv-webcomponents 1.25.1 → 2.0.0-beta.28

package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js

@@ -1,53 +1,89 @@
-import { Host, h } from "@stencil/core";
-import { XV_EXPANDABLE_KEY, XV_TABLE_TAG } from "../_vars";
-import { setAttr, uidGenerator } from "../../../utils/utils";
+import { h, Host } from "@stencil/core";
+import { SIZE_VAR } from "../../../types/enum";
+/**
+ * One row of a table. Everything it needs is pushed down by `xv-table`, so it never reads the
+ * table's attributes itself — the old row did that on `slotchange` only and went stale.
+ *
+ * @slot - The row's `xv-table-cell` children.
+ * @slot expand - Content revealed when the row is expanded. Spans the full row width.
+ * @part row - The row host.
+ * @part control - A leading or trailing control cell (selection, expand).
+ * @part expand-button - The expand toggle.
+ * @part expand-panel - The revealed panel.
+ * @part grip - The drag handle shown when the table reorders rows by icon.
+ */
 export class XvTableRow {
     constructor() {
-        this.checkHandle = ({ detail: checked }) => {
-            if (!checked && this.partial)
-                this.partial = checked;
-            if (!this.name)
-                this.name = uidGenerator();
-            this.selectRow.emit({
-                name: this.name,
-                value: this.value,
-                checked: checked,
-                partial: this.partial,
-                header: this.header,
-                expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
-            });
-        };
+        /** Identifies the row in selection and expansion payloads. */
+        this.value = '';
+        /** Selection control rendered in the leading cell. Set by the table. */
+        this.selectionMode = 'none';
+        /** Whether the row can be expanded. Set by the table. */
+        this.expandMode = 'none';
+        /** Whether the row offers its selection control. A header with no rows under it has nothing to pick. */
+        this.selectable = true;
+        /** Row height ladder. Set by the table. */
+        this.size = SIZE_VAR.MD;
+        /** Whether the row is selected. */
+        this.selected = false;
+        /** Indeterminate state of the header row's select-all checkbox. */
+        this.partial = false;
+        /** Whether the row's expand panel is open. */
+        this.expanded = false;
+        /**
+         * Value of the row this one belongs to. Child rows are siblings in the same grid, so they keep
+         * the table's columns instead of living in a panel of their own.
+         */
+        // Not reflected: an empty default would put parent="" on every row and break [parent] selectors.
+        this.parent = '';
+        /** Whether this row has anything to expand. Set by the table. */
+        this.expandable = false;
+        /** Whether the row carries `slot="expand"` content. Set by the table. */
+        this.hasPanel = false;
+        /** Renders the row as a subtotal or grouping row: no controls, accented background. */
+        this.group = false;
+        /** Marks the row as the table's header. Its cells supply the column labels. */
+        this.header = false;
+        /** Highlights the row on pointer hover. Set by the table. */
+        this.hover = false;
+        /** Blocks selection and expansion. */
+        this.disabled = false;
+        /** Whether this row can be dragged into a new position. Set by the table. */
+        this.rowReorderable = false;
+        /** Whether the whole row drags, or only its grip. Set by the table. */
+        this.rowReorderHandle = 'icon';
+        /** Accessible name of the expand toggle. Set by the table. */
+        this.expandLabel = 'Toggle row';
+        /** Accessible name of the drag grip. Set by the table. */
+        this.reorderLabel = 'Drag to reorder';
     }
-    checkedChangeHandle() {
-        if (!this.name)
-            this.name = uidGenerator();
-        this.checkedChange.emit({
-            name: this.name,
-            value: this.value,
-            checked: this.checked,
-            partial: this.partial,
-            header: this.header,
-            expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
-        });
+    // `draggable` is an enumerated attribute, not a boolean one: rendered as `draggable=""` it reads
+    // as `auto`, which never drags. The property reflects the string the browser expects.
+    componentDidRender() {
+        this.el.draggable = this.dragsWholeRow;
     }
-    setInitialAttrs() {
-        if (this.variant || !this.hover) {
-            const tableEl = this.el.closest(XV_TABLE_TAG);
-            if (!this.hover) {
-                this.hover = tableEl.hasAttribute('hover');
-            }
-            if (this.variant) {
-                setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);
-            }
-        }
+    get dragsWholeRow() {
+        return (this.rowReorderable &&
+            this.rowReorderHandle === 'row' &&
+            !this.group &&
+            !this.header &&
+            !this.disabled &&
+            this.el.slot !== 'footer');
     }
     render() {
-        return (h(Host, { key: '96836583a7db08fbbe974a6ece55d5a909a7e415' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '0783aad6e26302d3430333cad806fc1747e26e39', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'bd4e052458eeda60f79e22507ac25d5914f39c0c', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: '1cda8e32f1e8d6ad47fc93e63ee3c879651faa2a', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '2a74a7a6ab1c5d997bf71fe99b6cd98b61a70219' })));
+        // Empty spacers, or a group row's cells slide into the control tracks.
+        const hasSelect = this.selectionMode !== 'none';
+        const hasExpand = this.expandMode !== 'none';
+        // A header keeps the control cells as spacers, like a group row: it has nothing to expand or drag.
+        const expandable = hasExpand && !this.group && !this.header && this.expandable;
+        const draggable = this.rowReorderable && !this.group && !this.header && !this.disabled && this.el.slot !== 'footer';
+        // An empty panel would still paint its padding and background, so it is not rendered at all.
+        const panel = expandable && this.hasPanel;
+        return (h(Host, { key: 'ff2940779a1781b9a953629e4c8bf9a7431105fb', role: "row", part: "row" }, this.rowReorderable && (h("div", { key: 'd37b95aa6e56d073f1a9183be0475835b991f9d9', class: "control control--grip", part: "control", role: "cell" }, draggable && this.rowReorderHandle === 'icon' && (h("span", { key: '806316bd3cfb4340069418b3a43791073800d8fd', class: "control_grip", part: "grip", ref: element => element && (element.draggable = true), "aria-label": this.reorderLabel })))), hasExpand && (h("div", { key: 'e8455932d6147a965a27fbe2543ceeece4a65be8', class: "control control--expand", part: "control", role: "cell" }, expandable && (h("button", { key: 'eff064a985e9e6e44f122a42658f36ebd4f8d443', type: "button", class: { control_expand: true, open: this.expanded }, part: "expand-button", disabled: this.disabled, "aria-expanded": String(this.expanded), "aria-label": this.expandLabel })))), hasSelect && (h("div", { key: '97ffdebfe4ef650aa45020ff54449db83f252f68', class: "control control--lead", part: "control", role: "cell" }, !this.group &&
+            this.selectable &&
+            (this.selectionMode === 'multiple' ? (h("xv-checkbox-v2", { class: "control_input", checked: this.selected || this.partial, partial: this.partial, disabled: this.disabled, size: this.size })) : (h("xv-radio-v2", { class: "control_input", checked: this.selected, disabled: this.disabled, size: this.size }))))), h("slot", { key: '77414059aab52c6b11fe4b3571742eb9f4781fa8' }), panel && (h("div", { key: 'df45265616deac76f9bdb571def33be0a917bb01', class: "expand", part: "expand-panel", role: "cell", hidden: !this.expanded }, h("slot", { key: '986cbf15abb19462e98b4650ac707d0c79be54f4', name: "expand" })))));
     }
-    componentWillLoad() {
-        this.setInitialAttrs();
-    }
-    static get is() { return "xv-table-v2-row"; }
+    static get is() { return "xv-table-row"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
@@ -61,126 +97,168 @@ export class XvTableRow {
     }
     static get properties() {
         return {
-            "checked": {
-                "type": "boolean",
-                "mutable": true,
+            "value": {
+                "type": "any",
+                "mutable": false,
                 "complexType": {
-                    "original": "SelectRowDto['checked']",
-                    "resolved": "boolean",
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies the row in selection and expansion payloads."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "selectionMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XvTableSelectionMode",
+                    "resolved": "\"multiple\" | \"none\" | \"single\"",
                     "references": {
-                        "SelectRowDto": {
+                        "XvTableSelectionMode": {
                             "location": "import",
-                            "path": "../_vars",
-                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                            "path": "../xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableSelectionMode",
+                            "referenceLocation": "XvTableSelectionMode"
                         }
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Selection control rendered in the leading cell. Set by the table."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "checked"
+                "attribute": "selection-mode",
+                "defaultValue": "'none'"
             },
-            "partial": {
-                "type": "boolean",
-                "mutable": true,
+            "expandMode": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "SelectRowDto['partial']",
-                    "resolved": "boolean",
+                    "original": "XvTableExpandMode",
+                    "resolved": "\"multiple\" | \"none\" | \"single\"",
                     "references": {
-                        "SelectRowDto": {
+                        "XvTableExpandMode": {
                             "location": "import",
-                            "path": "../_vars",
-                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                            "path": "../xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableExpandMode",
+                            "referenceLocation": "XvTableExpandMode"
                         }
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Whether the row can be expanded. Set by the table."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "partial"
+                "attribute": "expand-mode",
+                "defaultValue": "'none'"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the row offers its selection control. A header with no rows under it has nothing to pick."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "true"
             },
-            "name": {
+            "size": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
-                    "original": "SelectRowDto['name']",
-                    "resolved": "string",
+                    "original": "SIZE_VAR_STR",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
                     "references": {
-                        "SelectRowDto": {
+                        "SIZE_VAR_STR": {
                             "location": "import",
-                            "path": "../_vars",
-                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                            "path": "../../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR_STR",
+                            "referenceLocation": "SIZE_VAR_STR"
                         }
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Row height ladder. Set by the table."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "name"
+                "attribute": "size",
+                "defaultValue": "SIZE_VAR.MD"
             },
-            "value": {
-                "type": "any",
+            "selected": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "SelectRowDto['value']",
-                    "resolved": "number | object | string",
-                    "references": {
-                        "SelectRowDto": {
-                            "location": "import",
-                            "path": "../_vars",
-                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Whether the row is selected."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "value"
+                "attribute": "selected",
+                "defaultValue": "false"
             },
-            "hover": {
+            "partial": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Indeterminate state of the header row's select-all checkbox."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "hover"
+                "attribute": "partial",
+                "defaultValue": "false"
             },
-            "readonly": {
+            "expanded": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -189,17 +267,38 @@ export class XvTableRow {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Whether the row's expand panel is open."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "readonly"
+                "attribute": "expanded",
+                "defaultValue": "false"
             },
-            "required": {
+            "parent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the row this one belongs to. Child rows are siblings in the same grid, so they keep\r\nthe table's columns instead of living in a panel of their own."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "parent",
+                "defaultValue": "''"
+            },
+            "expandable": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -208,17 +307,38 @@ export class XvTableRow {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Whether this row has anything to expand. Set by the table."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "required"
+                "attribute": "expandable",
+                "defaultValue": "false"
             },
-            "disabled": {
+            "hasPanel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the row carries `slot=\"expand\"` content. Set by the table."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-panel",
+                "defaultValue": "false"
+            },
+            "group": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -227,15 +347,16 @@ export class XvTableRow {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Renders the row as a subtotal or grouping row: no controls, accented background."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "disabled"
+                "attribute": "group",
+                "defaultValue": "false"
             },
             "header": {
                 "type": "boolean",
@@ -246,87 +367,138 @@ export class XvTableRow {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Marks the row as the table's header. Its cells supply the column labels."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "header"
+                "attribute": "header",
+                "defaultValue": "false"
             },
-            "variant": {
-                "type": "string",
-                "mutable": true,
+            "hover": {
+                "type": "boolean",
+                "mutable": false,
                 "complexType": {
-                    "original": "'checkbox' | 'radio' | ''",
-                    "resolved": "\"\" | \"checkbox\" | \"radio\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Highlights the row on pointer hover. Set by the table."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "variant"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "checkedChange",
-                "name": "checkedChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
+                "attribute": "hover",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Blocks selection and expansion."
                 },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "rowReorderable": {
+                "type": "boolean",
+                "mutable": false,
                 "complexType": {
-                    "original": "SelectRowDto",
-                    "resolved": "SelectRowDto",
-                    "references": {
-                        "SelectRowDto": {
-                            "location": "import",
-                            "path": "../_vars",
-                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
-                        }
-                    }
-                }
-            }, {
-                "method": "selectRow",
-                "name": "selectRow",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this row can be dragged into a new position. Set by the table."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "row-reorderable",
+                "defaultValue": "false"
+            },
+            "rowReorderHandle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'icon' | 'row'",
+                    "resolved": "\"icon\" | \"row\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Whether the whole row drags, or only its grip. Set by the table."
                 },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-reorder-handle",
+                "defaultValue": "'icon'"
+            },
+            "expandLabel": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "SelectRowDto",
-                    "resolved": "SelectRowDto",
-                    "references": {
-                        "SelectRowDto": {
-                            "location": "import",
-                            "path": "../_vars",
-                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
-                        }
-                    }
-                }
-            }];
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the expand toggle. Set by the table."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-label",
+                "defaultValue": "'Toggle row'"
+            },
+            "reorderLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the drag grip. Set by the table."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reorder-label",
+                "defaultValue": "'Drag to reorder'"
+            }
+        };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "checked",
-                "methodName": "checkedChangeHandle"
-            }];
-    }
 }