xv-webcomponents 2.0.0-beta.2 → 2.0.0-beta.28

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

@@ -1,30 +1,65 @@
-import { Host, h } from "@stencil/core";
-import { forEach, uidGenerator } from "../../../utils/utils";
+import { h, Host } from "@stencil/core";
 import { XV_SORT_DIR } from "../../../types/enum";
+/**
+ * One cell of a table row. It holds arbitrary markup — buttons, links, tags, nested components —
+ * which is why the table stays composed rather than driven only by data.
+ *
+ * In a header row it also carries the column affordances: the sort arrow, the drag grip and the
+ * resize handle. The table renders this same component in both modes, so a header written as
+ * markup can do everything a header built from `columns` can.
+ *
+ * @slot - The cell content.
+ * @part cell - The cell host.
+ * @part content - The wrapper the overflow rules are applied to.
+ * @part tooltip - The tooltip wrapper, present only when `tooltip` is set.
+ * @part grip - The column drag grip, in a header cell.
+ * @part resize - The column resize handle, in a header cell.
+ */
 export class XvTableCell {
-    handleSort() {
-        if (this.sort === undefined)
-            return;
-        let sort = this.sort;
-        if (this.sort === '')
-            sort = XV_SORT_DIR.NONE;
-        this.sort = sort === XV_SORT_DIR.NONE ?
-            XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?
-            XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;
-        forEach(this.el.parentElement.children, (cell) => {
-            if (cell !== this.el && cell.hasAttribute('sort')) {
-                cell.setAttribute('sort', 'none');
-            }
-        });
-        if (!this.name)
-            this.name = uidGenerator();
-        this.sortChange.emit({ name: this.name, value: this.sort });
+    constructor() {
+        /** Column this cell belongs to. Identifies it for sorting, resizing and the stored layout. */
+        this.columnId = '';
+        /** Horizontal alignment of the content. */
+        this.align = 'start';
+        /** How content wider than the column behaves. */
+        this.overflow = 'ellipsis';
+        /** Lines kept before clamping, when `overflow` is `clamp`. */
+        this.clampLines = 2;
+        /** Tooltip shown on hover. Only a cell that sets it pays for the tooltip component. */
+        this.tooltip = '';
+        /** Column width. Read off the header row when the table has no `columns`. Any CSS length. */
+        this.width = '';
+        /** Renders the cell as a column header. Set by the table from the row it sits in. */
+        this.header = false;
+        /** Offers the sort affordance. A header cell only. */
+        this.sortable = false;
+        /** Direction currently sorted by; empty when this column is not the active one. */
+        this.sortDirection = '';
+        /** Lets the column picker hide this column. A header cell only. */
+        this.hideable = false;
+        /** Offers the resize handle. A header cell only. */
+        this.resizable = false;
+        /** Offers the drag grip. A header cell only. */
+        this.reorderable = false;
+        /** Accessible name of the drag grip. */
+        this.reorderLabel = 'Drag to reorder';
+    }
+    get ariaSort() {
+        if (!this.header || !this.sortable)
+            return null;
+        if (this.sortDirection === XV_SORT_DIR.ASC)
+            return 'ascending';
+        if (this.sortDirection === XV_SORT_DIR.DESC)
+            return 'descending';
+        return 'none';
     }
-    ;
     render() {
-        return (h(Host, { key: 'f1ae644f52064308240bda543eb23999a9a6eb8a' }, h("slot", { key: '7ce7b7c7f36cdaa8cf5e31ec5ed028af1c0db625' })));
+        const content = (h("div", { key: 'eefd1609b456cdcc9e802c27e524613b64a9ce39', class: "content", part: "content", style: this.overflow === 'clamp' ? { '--xv-table-cell-clamp': `${this.clampLines}` } : undefined }, h("slot", { key: 'a00460b7e2fbf775c7607af68b078a4fcff70c11' })));
+        return (h(Host, { key: '54976b9c9740d576bb4a81a15af65aa79a2f0888', role: this.header ? 'columnheader' : 'cell', part: "cell", "aria-sort": this.ariaSort, tabindex: this.header && this.sortable ? 0 : null }, this.header && this.reorderable && h("span", { key: 'f443393d1ea62a0c94bfa59b77c377bf5fc04a66', class: "grip", part: "grip", "aria-label": this.reorderLabel }), this.tooltip ? (
+        // Popper puts the panel on document.body, so the scroll container cannot clip it.
+        h("xv-tooltip-v2", { part: "tooltip", dashed: true, position: "top-start", message: this.tooltip }, content)) : (content), this.header && this.sortable && h("span", { key: 'c26fa895c0a9a17cbe6c33c68f9e14b05781554e', class: "sort", "aria-hidden": "true" }), this.header && this.resizable && h("span", { key: '37fa59799c363ed83f2dd0052b3203aa3bf01a6c', class: "resize", part: "resize", "aria-hidden": "true" })));
     }
-    static get is() { return "xv-table-v2-cell"; }
+    static get is() { return "xv-table-cell"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
@@ -38,66 +73,183 @@ export class XvTableCell {
     }
     static get properties() {
         return {
-            "multiline": {
-                "type": "boolean",
+            "columnId": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column this cell belongs to. Identifies it for sorting, resizing and the stored layout."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "column-id",
+                "defaultValue": "''"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XvCellAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "XvCellAlign": {
+                            "location": "import",
+                            "path": "../xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvCellAlign",
+                            "referenceLocation": "XvCellAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Horizontal alignment of the content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "align",
+                "defaultValue": "'start'"
+            },
+            "overflow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XvCellOverflow",
+                    "resolved": "\"clamp\" | \"ellipsis\" | \"wrap\"",
+                    "references": {
+                        "XvCellOverflow": {
+                            "location": "import",
+                            "path": "../xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvCellOverflow",
+                            "referenceLocation": "XvCellOverflow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "How content wider than the column behaves."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "multiline"
+                "attribute": "overflow",
+                "defaultValue": "'ellipsis'"
             },
-            "name": {
+            "clampLines": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lines kept before clamping, when `overflow` is `clamp`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clamp-lines",
+                "defaultValue": "2"
+            },
+            "tooltip": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tooltip shown on hover. Only a cell that sets it pays for the tooltip component."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "name"
+                "reflect": false,
+                "attribute": "tooltip",
+                "defaultValue": "''"
             },
-            "align": {
+            "width": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'left' | 'right' | 'center'",
-                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column width. Read off the header row when the table has no `columns`. Any CSS length."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "''"
+            },
+            "header": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the cell as a column header. Set by the table from the row it sits in."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "header",
+                "defaultValue": "false"
+            },
+            "sortable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Offers the sort affordance. A header cell only."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "align"
+                "attribute": "sortable",
+                "defaultValue": "false"
             },
-            "sort": {
+            "sortDirection": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "XV_SORT_DIR | ''",
                     "resolved": "\"\" | XV_SORT_DIR.ASC | XV_SORT_DIR.DESC | XV_SORT_DIR.NONE",
@@ -111,51 +263,98 @@ export class XvTableCell {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Direction currently sorted by; empty when this column is not the active one."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "sort"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "sortChange",
-                "name": "sortChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
+                "attribute": "sort-direction",
+                "defaultValue": "''"
+            },
+            "hideable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Lets the column picker hide this column. A header cell only."
                 },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hideable",
+                "defaultValue": "false"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
                 "complexType": {
-                    "original": "XVTableSortDto",
-                    "resolved": "XVTableSortDto",
-                    "references": {
-                        "XVTableSortDto": {
-                            "location": "import",
-                            "path": "../_vars",
-                            "id": "src/components/xv-table/_vars.ts::XVTableSortDto",
-                            "referenceLocation": "XVTableSortDto"
-                        }
-                    }
-                }
-            }];
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Offers the resize handle. A header cell only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "resizable",
+                "defaultValue": "false"
+            },
+            "reorderable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Offers the drag grip. A header cell only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "reorderable",
+                "defaultValue": "false"
+            },
+            "reorderLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the drag grip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reorder-label",
+                "defaultValue": "'Drag to reorder'"
+            }
+        };
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "handleSort",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }

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

@@ -1,39 +1,153 @@
 :host {
+  /**
+   * @prop --xv-table-row-bg: Row background. Switched by hover, selected and group.
+   * @prop --xv-table-row-height: Minimum row height. Inherited from the table's size ladder.
+   * @prop --xv-table-row-disabled-opacity: How far a disabled row fades.
+   */
+  --xv-table-row-bg: var(--layer-02);
+  --xv-table-row-height: var(--xv-table-height, 40px);
+  --xv-table-row-disabled-opacity: 0.5;
+  grid-column: 1/-1;
   display: grid;
-  grid-template-columns: var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));
-  border-bottom: 1px solid #E3E3E3;
-  border-right: 1px solid #E3E3E3;
-  border-left: 1px solid #E3E3E3;
-  min-height: var(--xv-table-min-height);
-  align-items: center;
-  align-content: center;
-  transition: 0.25s ease-in-out background-color;
+  grid-template-columns: subgrid;
+  align-items: stretch;
+  min-height: var(--xv-table-row-height);
+  background: var(--xv-table-row-bg);
+  box-shadow: inset 0 -1px 0 0 var(--border-subtle-00);
 }
-:host .cell-control {
-  min-height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+
+@supports not (grid-template-columns: subgrid) {
+  :host {
+    display: contents;
+  }
+}
+:host([hover]:not([disabled]):hover) {
+  --xv-table-row-bg: var(--layer-hover-01);
+}
+
+:host([selected]) {
+  --xv-table-row-bg: var(--layer-selected-01);
+}
+
+:host([selected][hover]:hover) {
+  --xv-table-row-bg: var(--layer-selected-hover-01);
 }
 
-:host([variant]) {
-  grid-template-columns: minmax(47.97px, min-content) var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));
+:host([row-reorderable][draggable=true]) {
+  cursor: grab;
 }
 
-:host([hover]:not([header]):hover) {
-  background-color: var(--layer-hover-01, #E9E9E9);
+:host(.is-dragging) {
+  opacity: 0.4;
 }
 
-:host([checked]) {
-  background-color: var(--layer-selected-01, #E3E3E3);
+:host(.drop-above) {
+  box-shadow: inset 0 2px 0 0 var(--interactive-01);
 }
 
-:host([checked]:hover) {
-  background-color: var(--layer-selected-hover-01, #DADADA);
+:host(.drop-below) {
+  box-shadow: inset 0 -2px 0 0 var(--interactive-01);
+}
+
+:host([group]) {
+  --xv-table-row-bg: var(--layer-accent-01);
+  font-weight: 600;
+}
+
+:host(.has-children) {
+  --xv-table-row-bg: var(--layer-accent-01);
+}
+
+:host(.has-children[hover]:hover) {
+  --xv-table-row-bg: var(--layer-accent-hover-01);
 }
 
 :host([header]) {
-  background-color: var(--layer-accent-01, #F7F7F7);
-  box-shadow: 0 0 0 1px #E3E3E3 inset;
-  border-bottom: none;
+  --xv-table-row-bg: var(--xv-table-header-bg, var(--layer-accent-01));
+  box-shadow: inset 0 -1px 0 0 var(--border-subtle-01);
+  font-weight: 600;
+}
+
+:host([disabled]:not([header])) {
+  cursor: not-allowed;
+  color: var(--text-disabled);
+  pointer-events: none;
+  opacity: var(--xv-table-row-disabled-opacity);
+}
+
+.control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--spacing-03);
+}
+.control--grip {
+  order: -3;
+}
+.control--expand {
+  order: -2;
+}
+.control--lead {
+  order: -1;
+}
+.control_grip {
+  width: 8px;
+  height: 14px;
+  opacity: 0.4;
+  cursor: grab;
+  background-image: radial-gradient(currentColor 1px, transparent 1px);
+  background-size: 4px 4px;
+}
+.control_grip:active {
+  cursor: grabbing;
+}
+.control_expand {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--icon-primary);
+  cursor: pointer;
+}
+.control_expand::before {
+  content: "";
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin: 0 auto;
+  border-right: 1px solid currentColor;
+  border-bottom: 1px solid currentColor;
+  transform: rotate(45deg) translate(-2px, -2px);
+  transition: transform 0.15s ease;
+}
+.control_expand.open::before {
+  transform: rotate(-135deg) translate(-2px, -2px);
+}
+.control_expand:disabled {
+  color: var(--icon-disabled);
+  cursor: not-allowed;
+}
+.control_expand:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 0;
+}
+.control_expand:focus-visible {
+  outline-offset: -2px;
+}
+
+.expand {
+  order: 10000;
+  grid-column: 1/-1;
+  padding: var(--spacing-05);
+  background: var(--layer-01);
+  box-shadow: inset 0 1px 0 0 var(--border-subtle-00);
+}
+
+.expand[hidden] {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
 }