@umbraco-ui/uui-table 0.2.1 → 1.0.0-rc.1

package/custom-elements.json

@@ -58,6 +58,16 @@
           "name": "",
           "description": "slot for table cell content"
         }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-table-cell-padding",
+          "description": "overwrite the table cell padding"
+        },
+        {
+          "name": "--uui-table-cell-height",
+          "description": "overwrite the table cell height"
+        }
       ]
     },
     {
@@ -129,6 +139,16 @@
           "name": "",
           "description": "slot for table cell content"
         }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-table-cell-padding",
+          "description": "overwrite the table cell padding"
+        },
+        {
+          "name": "--uui-table-cell-height",
+          "description": "overwrite the table cell height"
+        }
       ]
     },
     {
@@ -212,6 +232,12 @@
           "name": "",
           "description": "for <uui-table-cell> elements that should be in the row."
         }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-table-row-color-selected",
+          "description": "overwrite the color of the selected row"
+        }
       ]
     },
     {

package/lib/index.js

@@ -29,7 +29,7 @@ UUITableElement.styles = [
         display: table;
         width: 100%;
         border-radius: var(--uui-border-radius,3px);
-        background-color: var(--uui-interface-surface,#fefefe);
+        background-color: var(--uui-color-surface,#fff);
         cursor: default;
       }
     `
@@ -92,13 +92,14 @@ let UUITableCellElement = class extends LitElement {
 UUITableCellElement.styles = [
   css`
       :host {
+        position: relative;
         display: table-cell;
-        height: var(--uui-size-12,36px);
+        height: var(--uui-table-cell-height, var(--uui-size-12,36px));
         padding: var(
           --uui-table-cell-padding,
           var(--uui-size-4,12px) var(--uui-size-5,15px)
         );
-        border-top: 1px solid var(--uui-interface-border,#c4c4c4);
+        border-top: 1px solid var(--uui-color-border,#d8d7d9);
         vertical-align: middle;
       }
 
@@ -119,6 +120,10 @@ UUITableCellElement.styles = [
         position: absolute;
         inset: 0;
       }
+
+      :host([no-padding]) {
+        padding: 0;
+      }
     `
 ];
 __decorateClass$4([
@@ -235,6 +240,23 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let UUITableRowElement = class extends SelectOnlyMixin(SelectableMixin(LitElement)) {
+  constructor() {
+    super();
+    let hadMouseDown = false;
+    this.addEventListener("blur", () => {
+      if (hadMouseDown === false) {
+        this.style.setProperty("--uui-show-focus-outline", "1");
+      }
+      hadMouseDown = false;
+    });
+    this.addEventListener("mousedown", () => {
+      this.style.setProperty("--uui-show-focus-outline", "0");
+      hadMouseDown = true;
+    });
+    this.addEventListener("mouseup", () => {
+      hadMouseDown = false;
+    });
+  }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "row");
@@ -264,15 +286,23 @@ UUITableRowElement.styles = [
       :host {
         display: table-row;
         position: relative;
+        outline-offset: -3px;
       }
 
       :host([selectable]) {
         cursor: pointer;
       }
 
+      :host(:focus) {
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus,#3879ff);
+      }
       :host([selected]) {
-        outline: 2px solid var(--uui-interface-select,#3544b1);
-        outline-offset: -3px;
+        outline: 2px solid
+          var(--uui-table-row-color-selected, var(--uui-color-selected,#3544b1));
+      }
+      :host([selected]:focus) {
+        outline-color: var(--uui-color-focus,#3879ff);
       }
     `
 ];

package/lib/uui-table-cell.element.d.ts

@@ -3,6 +3,8 @@ import { LitElement } from 'lit';
  *  Table cell that detects if it has overflow and if so it'll add a title attribute to itself to display full text. Must be a child of uui-table-row
  *  @element uui-table-cell
  *  @slot - slot for table cell content
+ *  @cssprop --uui-table-cell-padding - overwrite the table cell padding
+ *  @cssprop --uui-table-cell-height - overwrite the table cell height
  */
 export declare class UUITableCellElement extends LitElement {
     static styles: import("lit").CSSResult[];

package/lib/uui-table-row.element.d.ts

@@ -4,9 +4,11 @@ declare const UUITableRowElement_base: (new (...args: any[]) => import("@umbraco
  *  Table row element with option to set is as selectable. Parent for uui-table-cell. Must be a child of uui-table.
  *  @element uui-table-row
  *  @slot for <uui-table-cell> elements that should be in the row.
+ *  @cssprop --uui-table-row-color-selected - overwrite the color of the selected row
  */
 export declare class UUITableRowElement extends UUITableRowElement_base {
     static styles: import("lit").CSSResult[];
+    constructor();
     connectedCallback(): void;
     private slotCellNodes?;
     protected updated(changedProperties: Map<string | number | symbol, unknown>): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-table",
-  "version": "0.2.1",
+  "version": "1.0.0-rc.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,7 +30,7 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.2.1"
+    "@umbraco-ui/uui-base": "1.0.0-rc.1"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -41,5 +41,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-table",
-  "gitHead": "cb61546f85d6c2f122fa8c130409507e8def4bd5"
+  "gitHead": "127e036dbafa18cc37027591d6548a4cb4700d33"
 }