From e853dc42f1026a7d8e3f81082162394976034e9a Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Mon, 15 Sep 2025 12:17:39 +0200 Subject: [PATCH 01/32] WIP - testing stacked table --- src/components.d.ts | 6 ++ src/components/table/cell/index.tsx | 3 + src/components/table/cell/style.css | 13 +++- src/components/table/demo/index.tsx | 10 +-- .../table/demo/nested-no-cell/index.tsx | 22 +++--- .../table/demo/nested-no-cell/inner/style.css | 2 +- src/components/table/demo/style.css | 3 +- src/components/table/expandable/row/index.tsx | 31 ++++++-- .../table/expandable/row/style.scss | 74 +++++++++++++++---- src/components/table/index.tsx | 16 +++- src/components/table/style.css | 29 +++++++- 11 files changed, 166 insertions(+), 43 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index 6bd102fac..f7b7542d5 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -631,10 +631,13 @@ export namespace Components { } interface SmoothlyTable { "columns": number; + "stackAt"?: string; } interface SmoothlyTableBody { } interface SmoothlyTableCell { + "header"?: string; + "placement"?: "top-left" | "top-right"; "span"?: number; } interface SmoothlyTableDemo { @@ -2882,10 +2885,13 @@ declare namespace LocalJSX { } interface SmoothlyTable { "columns"?: number; + "stackAt"?: string; } interface SmoothlyTableBody { } interface SmoothlyTableCell { + "header"?: string; + "placement"?: "top-left" | "top-right"; "span"?: number; } interface SmoothlyTableDemo { diff --git a/src/components/table/cell/index.tsx b/src/components/table/cell/index.tsx index 6e534a702..ebd7bad14 100644 --- a/src/components/table/cell/index.tsx +++ b/src/components/table/cell/index.tsx @@ -7,10 +7,13 @@ import { Component, h, Host, Prop, VNode } from "@stencil/core" }) export class SmoothlyTableCell { @Prop({ reflect: true }) span?: number = 1 + @Prop({ reflect: true }) header?: string + @Prop({ reflect: true }) placement?: "top-left" | "top-right" render(): VNode | VNode[] { return ( + {this.header && {this.header}} ) diff --git a/src/components/table/cell/style.css b/src/components/table/cell/style.css index 593d9eaad..6565fff64 100644 --- a/src/components/table/cell/style.css +++ b/src/components/table/cell/style.css @@ -1,7 +1,18 @@ -:host { +smoothly-table:not(.stacked) :host { grid-column: span var(--smoothly-table-cell-span, 1); display: flex; align-items: center; padding: 0.5rem 1.1rem; white-space: nowrap; } + +smoothly-table.stacked :host { + display: flex; + width: 100%; +} + +smoothly-table.stacked :host>.smoothly-cell-header { + font-weight: bold; + min-width: var(--smoothly-table-stacked-header-width, 10ch); + margin-bottom: 0.25rem; +} diff --git a/src/components/table/demo/index.tsx b/src/components/table/demo/index.tsx index 3d29f4a3f..adef08b2c 100644 --- a/src/components/table/demo/index.tsx +++ b/src/components/table/demo/index.tsx @@ -9,12 +9,12 @@ export class SmoothlyTableDemo { render(): VNode | VNode[] { return ( - - - - + {/* */} + {/* */} + {/* */} + {/* */} - + {/* */} ) } diff --git a/src/components/table/demo/nested-no-cell/index.tsx b/src/components/table/demo/nested-no-cell/index.tsx index 94f84de21..ad27eb403 100644 --- a/src/components/table/demo/nested-no-cell/index.tsx +++ b/src/components/table/demo/nested-no-cell/index.tsx @@ -11,7 +11,7 @@ export class SmoothlyTableDemoNestedNoCell { return ( - +
Id
@@ -28,14 +28,18 @@ export class SmoothlyTableDemoNestedNoCell { {data.map(entry => ( -
{entry.id}
-
{entry.registered}
-
{entry.name}
-
{entry.age}
-
{entry.balance}
-
{entry.eyeColor}
-
{entry.gender}
-
{entry.company}
+ {entry.id} + {entry.registered} + + {entry.name} + + {entry.age} + {entry.balance} + {entry.eyeColor} + {entry.gender} + + {entry.company} + ))} diff --git a/src/components/table/demo/nested-no-cell/inner/style.css b/src/components/table/demo/nested-no-cell/inner/style.css index a2ff0df2a..29602573e 100644 --- a/src/components/table/demo/nested-no-cell/inner/style.css +++ b/src/components/table/demo/nested-no-cell/inner/style.css @@ -1,5 +1,5 @@ :host { display: block; margin: 1em auto; - width: 60%; + max-width: min(30rem, 100%); } diff --git a/src/components/table/demo/style.css b/src/components/table/demo/style.css index 86b793981..8a46cb11b 100644 --- a/src/components/table/demo/style.css +++ b/src/components/table/demo/style.css @@ -5,5 +5,6 @@ max-width: 80rem; width: 100%; margin: auto; - padding: 2rem; + padding-block: 2rem; + padding-inline: 0.5rem; } diff --git a/src/components/table/expandable/row/index.tsx b/src/components/table/expandable/row/index.tsx index 8b3b95066..a0ec381e3 100644 --- a/src/components/table/expandable/row/index.tsx +++ b/src/components/table/expandable/row/index.tsx @@ -6,16 +6,34 @@ import { Component, Event, EventEmitter, h, Host, Prop, VNode, Watch } from "@st scoped: true, }) export class SmoothlyTableExpandableRow { - private div?: HTMLDivElement + private detailElement?: HTMLDivElement + private expandButton?: HTMLDivElement @Prop({ mutable: true, reflect: true }) open = false @Event() smoothlyTableExpandableRowChange: EventEmitter + isStacked(eventPath: EventTarget[]): boolean { + for (const el of eventPath) { + if (el instanceof HTMLElement && el.tagName.toLowerCase() == "smoothly-table") { + return el.classList.contains("stacked") + } + } + return false + } + clickHandler(event: MouseEvent): void { - const clickedOnDetail = this.div && event.composedPath().includes(this.div) - if (!clickedOnDetail) { - const selection = window.getSelection()?.toString().trim() - if ((selection?.length ?? 0) == 0) + const isStacked = this.isStacked(event.composedPath()) + if (isStacked) { + const clickedOnExpandButton = this.expandButton && event.composedPath().includes(this.expandButton) + if (clickedOnExpandButton) { this.open = !this.open + } + } else { + const clickedOnDetail = this.detailElement && event.composedPath().includes(this.detailElement) + if (!clickedOnDetail) { + const selection = window.getSelection()?.toString().trim() + if ((selection?.length ?? 0) == 0) + this.open = !this.open + } } } @Watch("open") @@ -27,9 +45,10 @@ export class SmoothlyTableExpandableRow { return ( this.clickHandler(e)}> -
(this.div = e)}> +
(this.detailElement = e)}>
+
(this.expandButton = e)} class="smoothly-expand-button">
) } diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index 2e47cb155..09d34e12a 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -8,14 +8,14 @@ box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)); } -:host>.smoothly-row { +:host>.smoothly-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; } -:host::slotted(:not(.detail)):not(.smoothly-row), -:host>::slotted(.smoothly-row>*) { +smoothly-table:not(.stacked)>smoothly-table-body>:host::slotted(:not(.detail)):not(.smoothly-row), +smoothly-table:not(.stacked)>smoothly-table-body>:host>::slotted(.smoothly-row>*) { grid: subgrid; cursor: pointer; grid-column: span var(--smoothly-table-cell-span, 1); @@ -25,13 +25,17 @@ white-space: nowrap; } -:host:has(>:not(:last-child):hover), -:host>.smoothly-row:has(>:not(:last-child):hover) { +smoothly-table:not(.stacked)>smoothly-table-body>:host>.smoothly-expand-button { + display: none; +} + +smoothly-table:not(.stacked)>smoothly-table-body>:host:has(>:not(.detail):hover), +smoothly-table:not(.stacked)>smoothly-table-body>:host>.smoothly-row:has(>:not(.detail):hover) { background-color: rgb(var(--smoothly-table-hover-background)); color: rgb(var(--smoothly-table-hover-foreground)); } -:host[open] { +smoothly-table:not(.stacked)>smoothly-table-body>:host[open] { background-color: rgb(var(--smoothly-table-expanded-background)); color: rgb(var(--smoothly-table-expanded-foreground)); grid-template-rows: auto 1fr; @@ -44,7 +48,7 @@ display: none; } -:host>div:last-child { +:host>div.detail { grid-column: 1 / -1; cursor: default; position: relative; @@ -53,27 +57,28 @@ color: rgb(var(--smoothly-table-expanded-foreground)); } -:host> :first-child, -:host>.smoothly-row> :first-child { +smoothly-table:not(.stacked)>smoothly-table-body>:host> :first-child, +smoothly-table:not(.stacked)>smoothly-table-body>:host>.smoothly-row> :first-child { @include arrow; } -:host:has(>:hover)> :first-child, -:host>.smoothly-row:has(>:hover)> :first-child { +smoothly-table:not(.stacked)>smoothly-table-body>:host:has(>:hover)> :first-child, +smoothly-table:not(.stacked)>smoothly-table-body>:host>.smoothly-row:has(>:hover)> :first-child { @include arrow-hover; } -:host[open]> :first-child, -:host[open]>.smoothly-row>:first-child { +smoothly-table:not(.stacked)>smoothly-table-body>:host[open]> :first-child, +smoothly-table:not(.stacked)>smoothly-table-body>:host[open]>.smoothly-row>:first-child { @include arrow-open; } -:host[open]>div:last-child { +smoothly-table:not(.stacked)>smoothly-table-body>:host[open]>div.detail { overflow: visible; padding: 0.5rem 1.1rem; + outline: 2px solid red; } -:host>div:last-child::before { +smoothly-table:not(.stacked)>smoothly-table-body>:host>div.detail::before { content: ""; position: absolute; display: flex; @@ -88,7 +93,7 @@ 0px 0px 1px 0px rgb(var(--smoothly-table-border)); } -:host>div:last-child::after { +:host>div.detail::after { content: ""; position: absolute; display: flex; @@ -100,3 +105,40 @@ box-shadow: -2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border)); } + + +/* --- STACKED TABLE --- */ + +smoothly-table.stacked>smoothly-table-body>:host { + box-shadow: 0px 0px 1px 1px rgb(var(--smoothly-table-border)); +} + +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell { + display: flex; + // flex-direction: column; + padding: 0.25rem 1.1rem; + // border-bottom: 1px solid black; +} + + +smoothly-table.stacked>smoothly-table-body>:host>.smoothly-expand-button { + border-top: 1px solid black; + position: relative; + height: 3rem; +} + +smoothly-table.stacked>smoothly-table-body>:host>.smoothly-expand-button::before { + content: ""; + top: 50%; + left: 50%; + position: absolute; + border-left: 3px solid red; + border-bottom: 3px solid red; + transform: translate(-50%, -75%) rotate(-45deg); + width: 1rem; + height: 1rem; +} + +smoothly-table.stacked>smoothly-table-body>:host([open])>.smoothly-expand-button::before { + transform: translate(-50%, -25%) rotate(135deg); +} diff --git a/src/components/table/index.tsx b/src/components/table/index.tsx index db90728a5..0c14bb264 100644 --- a/src/components/table/index.tsx +++ b/src/components/table/index.tsx @@ -1,4 +1,4 @@ -import { Component, h, Host, Listen, Prop, VNode } from "@stencil/core" +import { Component, h, Host, Listen, Prop, State, VNode } from "@stencil/core" import { SmoothlyTableExpandableCellCustomEvent } from "../../components" @Component({ @@ -8,6 +8,8 @@ import { SmoothlyTableExpandableCellCustomEvent } from "../../components" }) export class SmoothlyTable { @Prop() columns = 1 + @Prop() stackAt?: string + @State() mode: "stacked" | "table" = "table" @Listen("smoothlyTableExpandableRowChange") smoothlyTableExpandableRowChange(event: SmoothlyTableExpandableCellCustomEvent): void { @@ -19,9 +21,19 @@ export class SmoothlyTable { event.stopPropagation() } + componentWillLoad() { + if (this.stackAt) { + const mql = window.matchMedia(`(max-width: ${this.stackAt})`) + this.mode = mql.matches ? "stacked" : "table" + mql.addEventListener("change", e => { + this.mode = e.matches ? "stacked" : "table" + }) + } + } + render(): VNode | VNode[] { return ( - + ) diff --git a/src/components/table/style.css b/src/components/table/style.css index 1e22481be..83eba0886 100644 --- a/src/components/table/style.css +++ b/src/components/table/style.css @@ -1,7 +1,32 @@ :host { - display: grid; - grid-template-columns: repeat(var(--columns), auto); color: rgb(var(--smoothly-table-foreground)); stroke: rgb(var(--smoothly-table-foreground)); fill: rgb(var(--smoothly-table-foreground)); } + +:host:not(.stacked) { + display: grid; + grid-template-columns: repeat(var(--columns), auto); +} + +:host:not(.stacked) .smoothly-cell-header { + display: none; +} + + +/* STACKED */ + +:host(.stacked) { + display: grid; +} +:host(.stacked) smoothly-table-head { + display: none; +} +:host(.stacked)>smoothly-table-body { + row-gap: 2rem; +} + +:host(.stacked)>smoothly-table-body>smoothly-table-expandable-row { + /* border: 1px solid orange; */ + border-radius: 0.5rem; +} From 6d7079d7aad27a31b9e01d07a2e5c51f77c66f58 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Mon, 15 Sep 2025 13:05:11 +0200 Subject: [PATCH 02/32] placement work --- src/components/table/cell/style.css | 5 ++- .../table/expandable/row/style.scss | 36 ++++++++++++++++--- 2 files changed, 33 insertions(+), 8 deletions(-) diff --git a/src/components/table/cell/style.css b/src/components/table/cell/style.css index 6565fff64..90d6b0e2f 100644 --- a/src/components/table/cell/style.css +++ b/src/components/table/cell/style.css @@ -8,11 +8,10 @@ smoothly-table:not(.stacked) :host { smoothly-table.stacked :host { display: flex; - width: 100%; } smoothly-table.stacked :host>.smoothly-cell-header { - font-weight: bold; - min-width: var(--smoothly-table-stacked-header-width, 10ch); + min-width: var(--smoothly-table-stacked-header-width, 12ch); + color: rgb(var(--smoothly-default-contrast), 0.7); margin-bottom: 0.25rem; } diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index 09d34e12a..83c3eccd2 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -110,18 +110,44 @@ smoothly-table:not(.stacked)>smoothly-table-body>:host>div.detail::before { /* --- STACKED TABLE --- */ smoothly-table.stacked>smoothly-table-body>:host { + display: grid; + grid-template-columns: 1fr auto; // might change to css variable later box-shadow: 0px 0px 1px 1px rgb(var(--smoothly-table-border)); } +// smoothly-table.stacked>smoothly-table-body>:host smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell { - display: flex; - // flex-direction: column; padding: 0.25rem 1.1rem; - // border-bottom: 1px solid black; + display: flex; +} + +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell:not([placement]) { + grid-column: 1 / -1; } +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement=top-left] { + grid-row: 1; + grid-column: 1; + align-self: start; +} + +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement=top-right] { + grid-row: 1; + grid-column: 2; + align-self: end; +} + +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement]>.smoothly-cell-header { + display: none; +} + +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement] { + border-bottom: 1px solid black; + padding-block: 0.5rem; +} smoothly-table.stacked>smoothly-table-body>:host>.smoothly-expand-button { + grid-column: 1 / -1; border-top: 1px solid black; position: relative; height: 3rem; @@ -132,8 +158,8 @@ smoothly-table.stacked>smoothly-table-body>:host>.smoothly-expand-button::before top: 50%; left: 50%; position: absolute; - border-left: 3px solid red; - border-bottom: 3px solid red; + border-left: 3px solid black; + border-bottom: 3px solid black; transform: translate(-50%, -75%) rotate(-45deg); width: 1rem; height: 1rem; From 2a86670e07e9a954c5fe498062f353983ecd4cd5 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Mon, 15 Sep 2025 13:17:00 +0200 Subject: [PATCH 03/32] smaller chevron --- src/components/table/expandable/row/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index 83c3eccd2..f835d3d9b 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -161,8 +161,8 @@ smoothly-table.stacked>smoothly-table-body>:host>.smoothly-expand-button::before border-left: 3px solid black; border-bottom: 3px solid black; transform: translate(-50%, -75%) rotate(-45deg); - width: 1rem; - height: 1rem; + width: 0.75rem; + height: 0.75rem; } smoothly-table.stacked>smoothly-table-body>:host([open])>.smoothly-expand-button::before { From e4e777b7ee8d873e22734a250c89f2296267620c Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Mon, 15 Sep 2025 13:34:15 +0200 Subject: [PATCH 04/32] add placement top-center --- src/components.d.ts | 4 ++-- src/components/table/cell/index.tsx | 2 +- src/components/table/demo/nested-no-cell/index.tsx | 4 +++- src/components/table/expandable/row/style.scss | 10 ++++++++-- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index f7b7542d5..401c02479 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -637,7 +637,7 @@ export namespace Components { } interface SmoothlyTableCell { "header"?: string; - "placement"?: "top-left" | "top-right"; + "placement"?: "top-left" | "top-center" | "top-right"; "span"?: number; } interface SmoothlyTableDemo { @@ -2891,7 +2891,7 @@ declare namespace LocalJSX { } interface SmoothlyTableCell { "header"?: string; - "placement"?: "top-left" | "top-right"; + "placement"?: "top-left" | "top-center" | "top-right"; "span"?: number; } interface SmoothlyTableDemo { diff --git a/src/components/table/cell/index.tsx b/src/components/table/cell/index.tsx index ebd7bad14..5b688b92c 100644 --- a/src/components/table/cell/index.tsx +++ b/src/components/table/cell/index.tsx @@ -8,7 +8,7 @@ import { Component, h, Host, Prop, VNode } from "@stencil/core" export class SmoothlyTableCell { @Prop({ reflect: true }) span?: number = 1 @Prop({ reflect: true }) header?: string - @Prop({ reflect: true }) placement?: "top-left" | "top-right" + @Prop({ reflect: true }) placement?: "top-left" | "top-center" | "top-right" render(): VNode | VNode[] { return ( diff --git a/src/components/table/demo/nested-no-cell/index.tsx b/src/components/table/demo/nested-no-cell/index.tsx index ad27eb403..f73ea4f54 100644 --- a/src/components/table/demo/nested-no-cell/index.tsx +++ b/src/components/table/demo/nested-no-cell/index.tsx @@ -35,7 +35,9 @@ export class SmoothlyTableDemoNestedNoCell { {entry.age} {entry.balance} - {entry.eyeColor} + + {entry.eyeColor} + {entry.gender} {entry.company} diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index f835d3d9b..1fe6edbd5 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -111,7 +111,7 @@ smoothly-table:not(.stacked)>smoothly-table-body>:host>div.detail::before { smoothly-table.stacked>smoothly-table-body>:host { display: grid; - grid-template-columns: 1fr auto; // might change to css variable later + grid-template-columns: 1fr auto auto; // might change to css variable later box-shadow: 0px 0px 1px 1px rgb(var(--smoothly-table-border)); } @@ -131,12 +131,18 @@ smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement=t align-self: start; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement=top-right] { +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement=top-center] { grid-row: 1; grid-column: 2; align-self: end; } +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement=top-right] { + grid-row: 1; + grid-column: 3; + align-self: end; +} + smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement]>.smoothly-cell-header { display: none; } From c1976d01aeac0490fab732e566c85f241c21ba84 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Mon, 15 Sep 2025 13:54:22 +0200 Subject: [PATCH 05/32] placement -> card-area --- src/components.d.ts | 4 +-- src/components/table/cell/index.tsx | 2 +- .../table/demo/nested-no-cell/index.tsx | 17 +++++++++---- .../table/expandable/row/style.scss | 25 +++++++++---------- 4 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index 401c02479..cc3d5624e 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -636,8 +636,8 @@ export namespace Components { interface SmoothlyTableBody { } interface SmoothlyTableCell { + "cardArea"?: "checkbox" | "primary" | "status" | "actions"; "header"?: string; - "placement"?: "top-left" | "top-center" | "top-right"; "span"?: number; } interface SmoothlyTableDemo { @@ -2890,8 +2890,8 @@ declare namespace LocalJSX { interface SmoothlyTableBody { } interface SmoothlyTableCell { + "cardArea"?: "checkbox" | "primary" | "status" | "actions"; "header"?: string; - "placement"?: "top-left" | "top-center" | "top-right"; "span"?: number; } interface SmoothlyTableDemo { diff --git a/src/components/table/cell/index.tsx b/src/components/table/cell/index.tsx index 5b688b92c..f2c0fe849 100644 --- a/src/components/table/cell/index.tsx +++ b/src/components/table/cell/index.tsx @@ -8,7 +8,7 @@ import { Component, h, Host, Prop, VNode } from "@stencil/core" export class SmoothlyTableCell { @Prop({ reflect: true }) span?: number = 1 @Prop({ reflect: true }) header?: string - @Prop({ reflect: true }) placement?: "top-left" | "top-center" | "top-right" + @Prop({ reflect: true }) cardArea?: "checkbox" | "primary" | "status" | "actions" render(): VNode | VNode[] { return ( diff --git a/src/components/table/demo/nested-no-cell/index.tsx b/src/components/table/demo/nested-no-cell/index.tsx index f73ea4f54..3d28f0381 100644 --- a/src/components/table/demo/nested-no-cell/index.tsx +++ b/src/components/table/demo/nested-no-cell/index.tsx @@ -11,7 +11,7 @@ export class SmoothlyTableDemoNestedNoCell { return ( - +
Id
@@ -22,6 +22,7 @@ export class SmoothlyTableDemoNestedNoCell {
EyeColor
Gender
Company
+
@@ -30,17 +31,23 @@ export class SmoothlyTableDemoNestedNoCell { {entry.id} {entry.registered} - + {entry.name} {entry.age} {entry.balance} - + {entry.eyeColor} {entry.gender} - - {entry.company} + {entry.company} + + console.log("Delete", entry.name)} + /> ))} diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index 1fe6edbd5..411e6f400 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -111,7 +111,7 @@ smoothly-table:not(.stacked)>smoothly-table-body>:host>div.detail::before { smoothly-table.stacked>smoothly-table-body>:host { display: grid; - grid-template-columns: 1fr auto auto; // might change to css variable later + grid-template-columns: auto 1fr auto auto; // might change to css variable later box-shadow: 0px 0px 1px 1px rgb(var(--smoothly-table-border)); } @@ -121,33 +121,32 @@ smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell { display: flex; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell:not([placement]) { +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell:not([card-area]) { grid-column: 1 / -1; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement=top-left] { - grid-row: 1; +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area=checkbox] { grid-column: 1; - align-self: start; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement=top-center] { - grid-row: 1; +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area=primary] { grid-column: 2; - align-self: end; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement=top-right] { - grid-row: 1; +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area=status] { grid-column: 3; - align-self: end; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement]>.smoothly-cell-header { +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area=actions] { + grid-column: 4; +} + +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area]>.smoothly-cell-header { display: none; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[placement] { +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area] { + grid-row: 1; border-bottom: 1px solid black; padding-block: 0.5rem; } From 35cd71490f294dd6a283ff1145be8bbd4257feaf Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Mon, 15 Sep 2025 14:40:29 +0200 Subject: [PATCH 06/32] WIP --- src/components/table/cell/index.tsx | 2 +- .../table/expandable/row/style.scss | 34 ++++++++++++------- src/components/table/style.css | 7 +--- 3 files changed, 23 insertions(+), 20 deletions(-) diff --git a/src/components/table/cell/index.tsx b/src/components/table/cell/index.tsx index f2c0fe849..a3c36e901 100644 --- a/src/components/table/cell/index.tsx +++ b/src/components/table/cell/index.tsx @@ -13,7 +13,7 @@ export class SmoothlyTableCell { render(): VNode | VNode[] { return ( - {this.header && {this.header}} + {typeof this.header == "string" && {this.header}} ) diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index 411e6f400..b1d95abe4 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -35,8 +35,11 @@ smoothly-table:not(.stacked)>smoothly-table-body>:host>.smoothly-row:has(>:not(. color: rgb(var(--smoothly-table-hover-foreground)); } -smoothly-table:not(.stacked)>smoothly-table-body>:host[open] { +:host[open] { background-color: rgb(var(--smoothly-table-expanded-background)); +} + +smoothly-table:not(.stacked)>smoothly-table-body>:host[open] { color: rgb(var(--smoothly-table-expanded-foreground)); grid-template-rows: auto 1fr; box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)), @@ -111,20 +114,30 @@ smoothly-table:not(.stacked)>smoothly-table-body>:host>div.detail::before { smoothly-table.stacked>smoothly-table-body>:host { display: grid; - grid-template-columns: auto 1fr auto auto; // might change to css variable later - box-shadow: 0px 0px 1px 1px rgb(var(--smoothly-table-border)); + grid-template-columns: auto 1fr auto auto; + box-shadow: 0 1px 3px rgba(var(--smoothly-default-contrast), 0.12), + 0 1px 2px rgba(var(--smoothly-default-contrast), 0.24); + border: 1px solid rgb(var(--smoothly-table-border), 0.25); + border-radius: 0.5rem; } // smoothly-table.stacked>smoothly-table-body>:host smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell { - padding: 0.25rem 1.1rem; + padding-inline: 1.1rem; + box-sizing: border-box; + min-height: 3rem; display: flex; + align-items: center; } smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell:not([card-area]) { grid-column: 1 / -1; } +smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area]>.smoothly-cell-header { + display: none; +} + smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area=checkbox] { grid-column: 1; } @@ -141,19 +154,14 @@ smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area=a grid-column: 4; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area]>.smoothly-cell-header { - display: none; -} - smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area] { grid-row: 1; - border-bottom: 1px solid black; - padding-block: 0.5rem; + border-bottom: 1px solid rgb(var(--smoothly-table-border), 0.25); } smoothly-table.stacked>smoothly-table-body>:host>.smoothly-expand-button { grid-column: 1 / -1; - border-top: 1px solid black; + border-top: 1px solid rgb(var(--smoothly-table-border), 0.25); position: relative; height: 3rem; } @@ -163,8 +171,8 @@ smoothly-table.stacked>smoothly-table-body>:host>.smoothly-expand-button::before top: 50%; left: 50%; position: absolute; - border-left: 3px solid black; - border-bottom: 3px solid black; + border-left: 3px solid rgb(var(--smoothly-table-border), 0.5); + border-bottom: 3px solid rgb(var(--smoothly-table-border), 0.5); transform: translate(-50%, -75%) rotate(-45deg); width: 0.75rem; height: 0.75rem; diff --git a/src/components/table/style.css b/src/components/table/style.css index 83eba0886..696713c6d 100644 --- a/src/components/table/style.css +++ b/src/components/table/style.css @@ -23,10 +23,5 @@ display: none; } :host(.stacked)>smoothly-table-body { - row-gap: 2rem; -} - -:host(.stacked)>smoothly-table-body>smoothly-table-expandable-row { - /* border: 1px solid orange; */ - border-radius: 0.5rem; + row-gap: 1.5rem; } From c5c2a02265b4deb1fb07dd36d611c10366771a27 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Mon, 15 Sep 2025 14:57:34 +0200 Subject: [PATCH 07/32] comment where css vars should go --- src/components/table/cell/style.css | 6 ++++-- src/components/table/expandable/row/style.scss | 5 +++++ src/components/table/style.css | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/table/cell/style.css b/src/components/table/cell/style.css index 90d6b0e2f..f1c0a108a 100644 --- a/src/components/table/cell/style.css +++ b/src/components/table/cell/style.css @@ -2,6 +2,7 @@ smoothly-table:not(.stacked) :host { grid-column: span var(--smoothly-table-cell-span, 1); display: flex; align-items: center; + /* replace with min-height css-var row-min-height? */ padding: 0.5rem 1.1rem; white-space: nowrap; } @@ -11,7 +12,8 @@ smoothly-table.stacked :host { } smoothly-table.stacked :host>.smoothly-cell-header { - min-width: var(--smoothly-table-stacked-header-width, 12ch); + /* css-var cell-header-min-width? */ + min-width: var(--smoothly-table-cell-header-width, 12ch); + /* css-var cell-header-color? */ color: rgb(var(--smoothly-default-contrast), 0.7); - margin-bottom: 0.25rem; } diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index b1d95abe4..eceb45550 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -115,6 +115,7 @@ smoothly-table:not(.stacked)>smoothly-table-body>:host>div.detail::before { smoothly-table.stacked>smoothly-table-body>:host { display: grid; grid-template-columns: auto 1fr auto auto; + /* css-var shadow or color? */ box-shadow: 0 1px 3px rgba(var(--smoothly-default-contrast), 0.12), 0 1px 2px rgba(var(--smoothly-default-contrast), 0.24); border: 1px solid rgb(var(--smoothly-table-border), 0.25); @@ -125,6 +126,7 @@ smoothly-table.stacked>smoothly-table-body>:host { smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell { padding-inline: 1.1rem; box-sizing: border-box; + /* css-var card-cell-min-height? */ min-height: 3rem; display: flex; align-items: center; @@ -156,11 +158,13 @@ smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area=a smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area] { grid-row: 1; + /* css-var card-border-color? */ border-bottom: 1px solid rgb(var(--smoothly-table-border), 0.25); } smoothly-table.stacked>smoothly-table-body>:host>.smoothly-expand-button { grid-column: 1 / -1; + /* css-var card-border-color? */ border-top: 1px solid rgb(var(--smoothly-table-border), 0.25); position: relative; height: 3rem; @@ -171,6 +175,7 @@ smoothly-table.stacked>smoothly-table-body>:host>.smoothly-expand-button::before top: 50%; left: 50%; position: absolute; + /* css-var arrow color */ border-left: 3px solid rgb(var(--smoothly-table-border), 0.5); border-bottom: 3px solid rgb(var(--smoothly-table-border), 0.5); transform: translate(-50%, -75%) rotate(-45deg); diff --git a/src/components/table/style.css b/src/components/table/style.css index 696713c6d..868d01790 100644 --- a/src/components/table/style.css +++ b/src/components/table/style.css @@ -23,5 +23,5 @@ display: none; } :host(.stacked)>smoothly-table-body { - row-gap: 1.5rem; + row-gap: 1.5rem; /* css-var */ } From e731fc03e44b95c7e8e52207a5f5af4c7e040733 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Mon, 15 Sep 2025 17:22:29 +0200 Subject: [PATCH 08/32] Change terminology desktop - mobile table - cards row - card cell - field N/A - field-label N/A - field-value N/A - card-area (top of card) --- src/assets/style/smoothly.css | 1 - src/components.d.ts | 8 +- src/components/table/cell/index.tsx | 4 +- src/components/table/cell/style.css | 16 ++-- .../table/demo/nested-no-cell/index.tsx | 18 ++-- src/components/table/expandable/row/index.tsx | 2 +- .../table/expandable/row/style.scss | 88 +++++++++++-------- src/components/table/index.tsx | 16 ++-- src/components/table/style.css | 13 +-- 9 files changed, 88 insertions(+), 78 deletions(-) diff --git a/src/assets/style/smoothly.css b/src/assets/style/smoothly.css index fe2dd9fc9..6e707ccd4 100644 --- a/src/assets/style/smoothly.css +++ b/src/assets/style/smoothly.css @@ -58,5 +58,4 @@ --smoothly-shadow: 0 0 4px 2px rgba(var(--smoothly-color-contrast), 0.25); --smoothly-shadow-strong: 0 0 4px 4px rgba(var(--smoothly-light-color), 0.25); - --table-width: 100%; } diff --git a/src/components.d.ts b/src/components.d.ts index cc3d5624e..52087a8a4 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -630,14 +630,14 @@ export namespace Components { "tooltip": string; } interface SmoothlyTable { + "cardAt"?: string; "columns": number; - "stackAt"?: string; } interface SmoothlyTableBody { } interface SmoothlyTableCell { "cardArea"?: "checkbox" | "primary" | "status" | "actions"; - "header"?: string; + "label"?: string; "span"?: number; } interface SmoothlyTableDemo { @@ -2884,14 +2884,14 @@ declare namespace LocalJSX { "tooltip"?: string; } interface SmoothlyTable { + "cardAt"?: string; "columns"?: number; - "stackAt"?: string; } interface SmoothlyTableBody { } interface SmoothlyTableCell { "cardArea"?: "checkbox" | "primary" | "status" | "actions"; - "header"?: string; + "label"?: string; "span"?: number; } interface SmoothlyTableDemo { diff --git a/src/components/table/cell/index.tsx b/src/components/table/cell/index.tsx index a3c36e901..3ccddd2ba 100644 --- a/src/components/table/cell/index.tsx +++ b/src/components/table/cell/index.tsx @@ -7,13 +7,13 @@ import { Component, h, Host, Prop, VNode } from "@stencil/core" }) export class SmoothlyTableCell { @Prop({ reflect: true }) span?: number = 1 - @Prop({ reflect: true }) header?: string + @Prop({ reflect: true }) label?: string @Prop({ reflect: true }) cardArea?: "checkbox" | "primary" | "status" | "actions" render(): VNode | VNode[] { return ( - {typeof this.header == "string" && {this.header}} + {typeof this.label == "string" && {this.label}} ) diff --git a/src/components/table/cell/style.css b/src/components/table/cell/style.css index f1c0a108a..c94070f1b 100644 --- a/src/components/table/cell/style.css +++ b/src/components/table/cell/style.css @@ -1,19 +1,19 @@ -smoothly-table:not(.stacked) :host { +smoothly-table:not(.cards) :host { grid-column: span var(--smoothly-table-cell-span, 1); display: flex; align-items: center; - /* replace with min-height css-var row-min-height? */ - padding: 0.5rem 1.1rem; + padding-inline: 1.1rem; + min-height: var(--smoothly-table-row-min-height, 3rem); white-space: nowrap; } -smoothly-table.stacked :host { +smoothly-table.cards :host { display: flex; } -smoothly-table.stacked :host>.smoothly-cell-header { - /* css-var cell-header-min-width? */ - min-width: var(--smoothly-table-cell-header-width, 12ch); - /* css-var cell-header-color? */ +smoothly-table.cards :host>.smoothly-cell-label { + /* css-var card-field-label-min-width? */ + min-width: var(--smoothly-card-field-label-min-width, 12ch); + /* css-var card-label-color? */ color: rgb(var(--smoothly-default-contrast), 0.7); } diff --git a/src/components/table/demo/nested-no-cell/index.tsx b/src/components/table/demo/nested-no-cell/index.tsx index 3d28f0381..c920a6f68 100644 --- a/src/components/table/demo/nested-no-cell/index.tsx +++ b/src/components/table/demo/nested-no-cell/index.tsx @@ -11,7 +11,7 @@ export class SmoothlyTableDemoNestedNoCell { return ( - +
Id
@@ -29,18 +29,18 @@ export class SmoothlyTableDemoNestedNoCell { {data.map(entry => ( - {entry.id} - {entry.registered} - + {entry.id} + {entry.registered} + {entry.name} - {entry.age} - {entry.balance} - + {entry.age} + {entry.balance} + {entry.eyeColor} - {entry.gender} - {entry.company} + {entry.gender} + {entry.company} smoothly-table-body>:host::slotted(:not(.detail)):not(.smoothly-row), -smoothly-table:not(.stacked)>smoothly-table-body>:host>::slotted(.smoothly-row>*) { +smoothly-table:not(.cards)>smoothly-table-body>:host::slotted(:not(.detail)):not(.smoothly-row):not(.smoothly-expand-button), +smoothly-table:not(.cards)>smoothly-table-body>:host>::slotted(.smoothly-row>*:not(.smoothly-expand-button)) { grid: subgrid; cursor: pointer; grid-column: span var(--smoothly-table-cell-span, 1); display: flex; align-items: center; - padding: 0.5rem 1.1rem; + padding-inline: 1.1rem; + min-height: var(--smoothly-table-cell-min-height, 3rem); white-space: nowrap; } -smoothly-table:not(.stacked)>smoothly-table-body>:host>.smoothly-expand-button { +smoothly-table:not(.cards)>smoothly-table-body>:host>.smoothly-expand-button { display: none; + visibility: hidden; } -smoothly-table:not(.stacked)>smoothly-table-body>:host:has(>:not(.detail):hover), -smoothly-table:not(.stacked)>smoothly-table-body>:host>.smoothly-row:has(>:not(.detail):hover) { +smoothly-table:not(.cards)>smoothly-table-body>:host:has(>:not(.detail):hover), +smoothly-table:not(.cards)>smoothly-table-body>:host>.smoothly-row:has(>:not(.detail):hover) { background-color: rgb(var(--smoothly-table-hover-background)); color: rgb(var(--smoothly-table-hover-foreground)); } @@ -39,7 +41,7 @@ smoothly-table:not(.stacked)>smoothly-table-body>:host>.smoothly-row:has(>:not(. background-color: rgb(var(--smoothly-table-expanded-background)); } -smoothly-table:not(.stacked)>smoothly-table-body>:host[open] { +smoothly-table:not(.cards)>smoothly-table-body>:host[open] { color: rgb(var(--smoothly-table-expanded-foreground)); grid-template-rows: auto 1fr; box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)), @@ -60,28 +62,28 @@ smoothly-table:not(.stacked)>smoothly-table-body>:host[open] { color: rgb(var(--smoothly-table-expanded-foreground)); } -smoothly-table:not(.stacked)>smoothly-table-body>:host> :first-child, -smoothly-table:not(.stacked)>smoothly-table-body>:host>.smoothly-row> :first-child { +smoothly-table:not(.cards)>smoothly-table-body>:host> :first-child, +smoothly-table:not(.cards)>smoothly-table-body>:host>.smoothly-row> :first-child { @include arrow; } -smoothly-table:not(.stacked)>smoothly-table-body>:host:has(>:hover)> :first-child, -smoothly-table:not(.stacked)>smoothly-table-body>:host>.smoothly-row:has(>:hover)> :first-child { +smoothly-table:not(.cards)>smoothly-table-body>:host:has(>:hover)> :first-child, +smoothly-table:not(.cards)>smoothly-table-body>:host>.smoothly-row:has(>:hover)> :first-child { @include arrow-hover; } -smoothly-table:not(.stacked)>smoothly-table-body>:host[open]> :first-child, -smoothly-table:not(.stacked)>smoothly-table-body>:host[open]>.smoothly-row>:first-child { +smoothly-table:not(.cards)>smoothly-table-body>:host[open]> :first-child, +smoothly-table:not(.cards)>smoothly-table-body>:host[open]>.smoothly-row>:first-child { @include arrow-open; } -smoothly-table:not(.stacked)>smoothly-table-body>:host[open]>div.detail { +smoothly-table:not(.cards)>smoothly-table-body>:host[open]>div.detail { overflow: visible; - padding: 0.5rem 1.1rem; - outline: 2px solid red; + padding-block: var(--smoothly-table-detail-padding-block, 0.5rem); + padding-inline: var(--smoothly-table-detail-padding-inline, 1.1rem); } -smoothly-table:not(.stacked)>smoothly-table-body>:host>div.detail::before { +smoothly-table:not(.cards)>smoothly-table-body>:host>div.detail::before { content: ""; position: absolute; display: flex; @@ -112,57 +114,67 @@ smoothly-table:not(.stacked)>smoothly-table-body>:host>div.detail::before { /* --- STACKED TABLE --- */ -smoothly-table.stacked>smoothly-table-body>:host { +smoothly-table.cards>smoothly-table-body>:host { display: grid; grid-template-columns: auto 1fr auto auto; - /* css-var shadow or color? */ + /* css-var card-shadow-color? */ box-shadow: 0 1px 3px rgba(var(--smoothly-default-contrast), 0.12), 0 1px 2px rgba(var(--smoothly-default-contrast), 0.24); border: 1px solid rgb(var(--smoothly-table-border), 0.25); border-radius: 0.5rem; } -// smoothly-table.stacked>smoothly-table-body>:host -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell { - padding-inline: 1.1rem; +// smoothly-table.cards>smoothly-table-body>:host +smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell { + padding-inline: 0.75rem; box-sizing: border-box; - /* css-var card-cell-min-height? */ - min-height: 3rem; display: flex; align-items: center; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell:not([card-area]) { +smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell:not([card-area]) { grid-column: 1 / -1; + /* css-var card-field-min-height? */ + min-height: var(--smoothly-card-field-min-height, 3rem); } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area]>.smoothly-cell-header { +smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell[card-area] { + grid-row: 1; + /* css-var card-border-color? */ + border-bottom: 1px solid rgb(var(--smoothly-table-border), 0.25); + /* css-var card-header-min-height? */ + min-height: var(--smoothly-card-header-min-height, 3rem); +} + +smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell[card-area]>.smoothly-cell-label { display: none; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area=checkbox] { +smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell[card-area=checkbox] { grid-column: 1; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area=primary] { +smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell[card-area=primary] { grid-column: 2; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area=status] { +smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell[card-area=status] { grid-column: 3; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area=actions] { +smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell[card-area=actions] { grid-column: 4; } -smoothly-table.stacked>smoothly-table-body>:host>smoothly-table-cell[card-area] { - grid-row: 1; - /* css-var card-border-color? */ - border-bottom: 1px solid rgb(var(--smoothly-table-border), 0.25); +smoothly-table.cards>smoothly-table-body>:host[open]>div.detail { + overflow: visible; + /* css-var card-detail-padding-block? */ + padding-block: var(--smoothly-card-detail-block, 0.5rem); + /* css-var card-detail-padding-inline? */ + padding-inline: var(--smoothly-card-detail-inline, 0); } -smoothly-table.stacked>smoothly-table-body>:host>.smoothly-expand-button { +smoothly-table.cards>smoothly-table-body>:host>.smoothly-expand-button { grid-column: 1 / -1; /* css-var card-border-color? */ border-top: 1px solid rgb(var(--smoothly-table-border), 0.25); @@ -170,12 +182,12 @@ smoothly-table.stacked>smoothly-table-body>:host>.smoothly-expand-button { height: 3rem; } -smoothly-table.stacked>smoothly-table-body>:host>.smoothly-expand-button::before { +smoothly-table.cards>smoothly-table-body>:host>.smoothly-expand-button::before { content: ""; top: 50%; left: 50%; position: absolute; - /* css-var arrow color */ + /* css-var --smoothly-card-expand-arrow-color */ border-left: 3px solid rgb(var(--smoothly-table-border), 0.5); border-bottom: 3px solid rgb(var(--smoothly-table-border), 0.5); transform: translate(-50%, -75%) rotate(-45deg); @@ -183,6 +195,6 @@ smoothly-table.stacked>smoothly-table-body>:host>.smoothly-expand-button::before height: 0.75rem; } -smoothly-table.stacked>smoothly-table-body>:host([open])>.smoothly-expand-button::before { +smoothly-table.cards>smoothly-table-body>:host([open])>.smoothly-expand-button::before { transform: translate(-50%, -25%) rotate(135deg); } diff --git a/src/components/table/index.tsx b/src/components/table/index.tsx index 0c14bb264..8df19d90f 100644 --- a/src/components/table/index.tsx +++ b/src/components/table/index.tsx @@ -8,8 +8,8 @@ import { SmoothlyTableExpandableCellCustomEvent } from "../../components" }) export class SmoothlyTable { @Prop() columns = 1 - @Prop() stackAt?: string - @State() mode: "stacked" | "table" = "table" + @Prop({ reflect: true }) cardAt?: string + @State() mode: "cards" | "table" = "table" @Listen("smoothlyTableExpandableRowChange") smoothlyTableExpandableRowChange(event: SmoothlyTableExpandableCellCustomEvent): void { @@ -22,18 +22,16 @@ export class SmoothlyTable { } componentWillLoad() { - if (this.stackAt) { - const mql = window.matchMedia(`(max-width: ${this.stackAt})`) - this.mode = mql.matches ? "stacked" : "table" - mql.addEventListener("change", e => { - this.mode = e.matches ? "stacked" : "table" - }) + if (this.cardAt) { + const mql = window.matchMedia(`(max-width: ${this.cardAt})`) + this.mode = mql.matches ? "cards" : "table" + mql.addEventListener("change", e => (this.mode = e.matches ? "cards" : "table")) } } render(): VNode | VNode[] { return ( - + ) diff --git a/src/components/table/style.css b/src/components/table/style.css index 868d01790..40f999bfb 100644 --- a/src/components/table/style.css +++ b/src/components/table/style.css @@ -4,24 +4,25 @@ fill: rgb(var(--smoothly-table-foreground)); } -:host:not(.stacked) { +:host:not(.cards) { display: grid; grid-template-columns: repeat(var(--columns), auto); } -:host:not(.stacked) .smoothly-cell-header { +:host:not(.cards) .smoothly-cell-label { display: none; } /* STACKED */ -:host(.stacked) { +:host(.cards) { display: grid; } -:host(.stacked) smoothly-table-head { +:host(.cards) smoothly-table-head { display: none; } -:host(.stacked)>smoothly-table-body { - row-gap: 1.5rem; /* css-var */ +:host(.cards)>smoothly-table-body { + /* css-var card-gap */ + row-gap: var(--smoothly-card-row-gap, 1.5rem); } From a64d98fa6de62f894ed6aa15912ffc41f5f13298 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Mon, 15 Sep 2025 18:10:42 +0200 Subject: [PATCH 09/32] comment to move styling --- src/components/table/expandable/row/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index eff7336e5..0078fad2f 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -111,6 +111,7 @@ smoothly-table:not(.cards)>smoothly-table-body>:host>div.detail::before { 0px 0px 1px 0px rgb(var(--smoothly-table-border)); } +/* NOTE: Need To move styling to table! */ /* --- STACKED TABLE --- */ From e6d32e710e98494c3cb22aba86eddbf63dac08f8 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Tue, 16 Sep 2025 08:34:07 +0200 Subject: [PATCH 10/32] Move expandable-row styling to table --- .../table/expandable/row/style.scss | 87 ------------------ src/components/table/style.css | 91 +++++++++++++++++++ 2 files changed, 91 insertions(+), 87 deletions(-) diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index 0078fad2f..91559e2f5 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -112,90 +112,3 @@ smoothly-table:not(.cards)>smoothly-table-body>:host>div.detail::before { } /* NOTE: Need To move styling to table! */ - -/* --- STACKED TABLE --- */ - -smoothly-table.cards>smoothly-table-body>:host { - display: grid; - grid-template-columns: auto 1fr auto auto; - /* css-var card-shadow-color? */ - box-shadow: 0 1px 3px rgba(var(--smoothly-default-contrast), 0.12), - 0 1px 2px rgba(var(--smoothly-default-contrast), 0.24); - border: 1px solid rgb(var(--smoothly-table-border), 0.25); - border-radius: 0.5rem; -} - -// smoothly-table.cards>smoothly-table-body>:host -smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell { - padding-inline: 0.75rem; - box-sizing: border-box; - display: flex; - align-items: center; -} - -smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell:not([card-area]) { - grid-column: 1 / -1; - /* css-var card-field-min-height? */ - min-height: var(--smoothly-card-field-min-height, 3rem); -} - -smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell[card-area] { - grid-row: 1; - /* css-var card-border-color? */ - border-bottom: 1px solid rgb(var(--smoothly-table-border), 0.25); - /* css-var card-header-min-height? */ - min-height: var(--smoothly-card-header-min-height, 3rem); -} - -smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell[card-area]>.smoothly-cell-label { - display: none; -} - -smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell[card-area=checkbox] { - grid-column: 1; -} - -smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell[card-area=primary] { - grid-column: 2; -} - -smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell[card-area=status] { - grid-column: 3; -} - -smoothly-table.cards>smoothly-table-body>:host>smoothly-table-cell[card-area=actions] { - grid-column: 4; -} - -smoothly-table.cards>smoothly-table-body>:host[open]>div.detail { - overflow: visible; - /* css-var card-detail-padding-block? */ - padding-block: var(--smoothly-card-detail-block, 0.5rem); - /* css-var card-detail-padding-inline? */ - padding-inline: var(--smoothly-card-detail-inline, 0); -} - -smoothly-table.cards>smoothly-table-body>:host>.smoothly-expand-button { - grid-column: 1 / -1; - /* css-var card-border-color? */ - border-top: 1px solid rgb(var(--smoothly-table-border), 0.25); - position: relative; - height: 3rem; -} - -smoothly-table.cards>smoothly-table-body>:host>.smoothly-expand-button::before { - content: ""; - top: 50%; - left: 50%; - position: absolute; - /* css-var --smoothly-card-expand-arrow-color */ - border-left: 3px solid rgb(var(--smoothly-table-border), 0.5); - border-bottom: 3px solid rgb(var(--smoothly-table-border), 0.5); - transform: translate(-50%, -75%) rotate(-45deg); - width: 0.75rem; - height: 0.75rem; -} - -smoothly-table.cards>smoothly-table-body>:host([open])>.smoothly-expand-button::before { - transform: translate(-50%, -25%) rotate(135deg); -} diff --git a/src/components/table/style.css b/src/components/table/style.css index 40f999bfb..27dca881a 100644 --- a/src/components/table/style.css +++ b/src/components/table/style.css @@ -26,3 +26,94 @@ /* css-var card-gap */ row-gap: var(--smoothly-card-row-gap, 1.5rem); } + +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row, +:host(.cards)>smoothly-table-body>smoothly-table-expandable-row { + display: grid; + grid-template-columns: auto 1fr auto auto; + /* css-var card-shadow-color? */ + box-shadow: 0 1px 3px rgba(var(--smoothly-default-contrast), 0.12), + 0 1px 2px rgba(var(--smoothly-default-contrast), 0.24); + border: 1px solid rgb(var(--smoothly-table-border), 0.25); + border-radius: 0.5rem; +} +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell, +:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell { + padding-inline: 0.75rem; + box-sizing: border-box; + display: flex; + align-items: center; +} +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell:not([card-area]) , +:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell:not([card-area]) { + grid-column: 1 / -1; + /* css-var card-field-min-height? */ + min-height: var(--smoothly-card-field-min-height, 3rem); +} +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area] , +:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area] { + grid-row: 1; + /* css-var card-border-color? */ + border-bottom: 1px solid rgb(var(--smoothly-table-border), 0.25); + /* css-var card-header-min-height? */ + min-height: var(--smoothly-card-header-min-height, 3rem); +} +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area]>.smoothly-cell-label , +:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area]>.smoothly-cell-label { + display: none; +} +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=checkbox] , +:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area=checkbox] { + grid-column: 1; +} +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=primary] , +:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area=primary] { + grid-column: 2; +} + +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=status] , +:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area=status] { + grid-column: 3; +} + +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=actions] , +:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area=actions] { + grid-column: 4; +} + +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row[open]>div.detail , +:host(.cards)>smoothly-table-body>smoothly-table-expandable-row[open]>div.detail { + overflow: visible; + /* css-var card-detail-padding-block? */ + padding-block: var(--smoothly-card-detail-block, 0.5rem); + /* css-var card-detail-padding-inline? */ + padding-inline: var(--smoothly-card-detail-inline, 0); +} + +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>.smoothly-expand-button , +:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>.smoothly-expand-button { + grid-column: 1 / -1; + /* css-var card-border-color? */ + border-top: 1px solid rgb(var(--smoothly-table-border), 0.25); + position: relative; + height: 3rem; +} + +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>.smoothly-expand-button::before, +:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>.smoothly-expand-button::before { + content: ""; + top: 50%; + left: 50%; + position: absolute; + /* css-var --smoothly-card-expand-arrow-color */ + border-left: 3px solid rgb(var(--smoothly-table-border), 0.5); + border-bottom: 3px solid rgb(var(--smoothly-table-border), 0.5); + transform: translate(-50%, -75%) rotate(-45deg); + width: 0.75rem; + height: 0.75rem; +} + +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row[open]>.smoothly-expand-button::before, +:host(.cards)>smoothly-table-body>smoothly-table-expandable-row[open]>.smoothly-expand-button::before { + transform: translate(-50%, -25%) rotate(135deg); +} From c2a1e88d5bb470da7399546033431d57c60a18bf Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Tue, 16 Sep 2025 08:34:53 +0200 Subject: [PATCH 11/32] , --- src/components/table/style.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/table/style.css b/src/components/table/style.css index 27dca881a..27a65930b 100644 --- a/src/components/table/style.css +++ b/src/components/table/style.css @@ -44,13 +44,13 @@ display: flex; align-items: center; } -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell:not([card-area]) , +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell:not([card-area]), :host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell:not([card-area]) { grid-column: 1 / -1; /* css-var card-field-min-height? */ min-height: var(--smoothly-card-field-min-height, 3rem); } -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area] , +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area], :host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area] { grid-row: 1; /* css-var card-border-color? */ @@ -58,30 +58,30 @@ /* css-var card-header-min-height? */ min-height: var(--smoothly-card-header-min-height, 3rem); } -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area]>.smoothly-cell-label , +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area]>.smoothly-cell-label, :host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area]>.smoothly-cell-label { display: none; } -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=checkbox] , +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=checkbox], :host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area=checkbox] { grid-column: 1; } -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=primary] , +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=primary], :host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area=primary] { grid-column: 2; } -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=status] , +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=status], :host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area=status] { grid-column: 3; } -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=actions] , +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=actions], :host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area=actions] { grid-column: 4; } -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row[open]>div.detail , +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row[open]>div.detail, :host(.cards)>smoothly-table-body>smoothly-table-expandable-row[open]>div.detail { overflow: visible; /* css-var card-detail-padding-block? */ @@ -90,7 +90,7 @@ padding-inline: var(--smoothly-card-detail-inline, 0); } -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>.smoothly-expand-button , +:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>.smoothly-expand-button, :host(.cards)>smoothly-table-body>smoothly-table-expandable-row>.smoothly-expand-button { grid-column: 1 / -1; /* css-var card-border-color? */ From 12119edadcaf002f4952925419e869b175d17464 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Tue, 16 Sep 2025 14:05:11 +0200 Subject: [PATCH 12/32] WIP space between selectors --- .../table/expandable/row/style.scss | 88 ++++++------ src/components/table/index.tsx | 2 +- src/components/table/style.css | 119 ---------------- src/components/table/style.scss | 127 ++++++++++++++++++ 4 files changed, 173 insertions(+), 163 deletions(-) delete mode 100644 src/components/table/style.css create mode 100644 src/components/table/style.scss diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index 91559e2f5..97f07c025 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -8,14 +8,44 @@ box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)); } -:host>.smoothly-row { +:host[open] { + background-color: rgb(var(--smoothly-table-expanded-background)); +} + +:host(:not([open])) > div.detail { + display: none; +} + +:host > .smoothly-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; } -smoothly-table:not(.cards)>smoothly-table-body>:host::slotted(:not(.detail)):not(.smoothly-row):not(.smoothly-expand-button), -smoothly-table:not(.cards)>smoothly-table-body>:host>::slotted(.smoothly-row>*:not(.smoothly-expand-button)) { +:host > div.detail { + grid-column: 1 / -1; + cursor: default; + position: relative; + overflow: hidden; + background-color: rgb(var(--smoothly-table-expanded-background)); + color: rgb(var(--smoothly-table-expanded-foreground)); +} + +:host > div.detail::after { + content: ""; + position: absolute; + display: flex; + top: 0; + bottom: 0; + right: -1em; + width: 1em; + background-color: rgb(var(--smoothly-table-expanded-background)); + box-shadow: -2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), + 0px 0px 1px 0px rgb(var(--smoothly-table-border)); +} + +smoothly-table:not(.cards) > smoothly-table-body > :host::slotted(:not(.detail)):not(.smoothly-row):not(.smoothly-expand-button), +smoothly-table:not(.cards) > smoothly-table-body > :host > ::slotted(.smoothly-row>*:not(.smoothly-expand-button)) { grid: subgrid; cursor: pointer; grid-column: span var(--smoothly-table-cell-span, 1); @@ -26,22 +56,18 @@ smoothly-table:not(.cards)>smoothly-table-body>:host>::slotted(.smoothly-row>*:n white-space: nowrap; } -smoothly-table:not(.cards)>smoothly-table-body>:host>.smoothly-expand-button { +smoothly-table:not(.cards) > smoothly-table-body > :host > .smoothly-expand-button { display: none; visibility: hidden; } -smoothly-table:not(.cards)>smoothly-table-body>:host:has(>:not(.detail):hover), -smoothly-table:not(.cards)>smoothly-table-body>:host>.smoothly-row:has(>:not(.detail):hover) { +smoothly-table:not(.cards) > smoothly-table-body > :host:has(>:not(.detail):hover), +smoothly-table:not(.cards) > smoothly-table-body > :host > .smoothly-row:has(>:not(.detail):hover) { background-color: rgb(var(--smoothly-table-hover-background)); color: rgb(var(--smoothly-table-hover-foreground)); } -:host[open] { - background-color: rgb(var(--smoothly-table-expanded-background)); -} - -smoothly-table:not(.cards)>smoothly-table-body>:host[open] { +smoothly-table:not(.cards) > smoothly-table-body > :host[open] { color: rgb(var(--smoothly-table-expanded-foreground)); grid-template-rows: auto 1fr; box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)), @@ -49,41 +75,30 @@ smoothly-table:not(.cards)>smoothly-table-body>:host[open] { grid-template-rows: 0fr 1fr; } -:host(:not([open]))>div.detail { - display: none; -} -:host>div.detail { - grid-column: 1 / -1; - cursor: default; - position: relative; - overflow: hidden; - background-color: rgb(var(--smoothly-table-expanded-background)); - color: rgb(var(--smoothly-table-expanded-foreground)); -} -smoothly-table:not(.cards)>smoothly-table-body>:host> :first-child, -smoothly-table:not(.cards)>smoothly-table-body>:host>.smoothly-row> :first-child { +smoothly-table:not(.cards) > smoothly-table-body > :host > :first-child, +smoothly-table:not(.cards) > smoothly-table-body > :host > .smoothly-row > :first-child { @include arrow; } -smoothly-table:not(.cards)>smoothly-table-body>:host:has(>:hover)> :first-child, -smoothly-table:not(.cards)>smoothly-table-body>:host>.smoothly-row:has(>:hover)> :first-child { +smoothly-table:not(.cards) > smoothly-table-body > :host:has(>:hover) > :first-child, +smoothly-table:not(.cards) > smoothly-table-body > :host > .smoothly-row:has(>:hover) > :first-child { @include arrow-hover; } -smoothly-table:not(.cards)>smoothly-table-body>:host[open]> :first-child, -smoothly-table:not(.cards)>smoothly-table-body>:host[open]>.smoothly-row>:first-child { +smoothly-table:not(.cards) > smoothly-table-body > :host[open] > :first-child, +smoothly-table:not(.cards) > smoothly-table-body > :host[open] > .smoothly-row > :first-child { @include arrow-open; } -smoothly-table:not(.cards)>smoothly-table-body>:host[open]>div.detail { +smoothly-table:not(.cards) > smoothly-table-body > :host[open] > div.detail { overflow: visible; padding-block: var(--smoothly-table-detail-padding-block, 0.5rem); padding-inline: var(--smoothly-table-detail-padding-inline, 1.1rem); } -smoothly-table:not(.cards)>smoothly-table-body>:host>div.detail::before { +smoothly-table:not(.cards) > smoothly-table-body > :host > div.detail::before { content: ""; position: absolute; display: flex; @@ -98,17 +113,4 @@ smoothly-table:not(.cards)>smoothly-table-body>:host>div.detail::before { 0px 0px 1px 0px rgb(var(--smoothly-table-border)); } -:host>div.detail::after { - content: ""; - position: absolute; - display: flex; - top: 0; - bottom: 0; - right: -1em; - width: 1em; - background-color: rgb(var(--smoothly-table-expanded-background)); - box-shadow: -2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), - 0px 0px 1px 0px rgb(var(--smoothly-table-border)); -} - /* NOTE: Need To move styling to table! */ diff --git a/src/components/table/index.tsx b/src/components/table/index.tsx index 8df19d90f..d9fd99e5d 100644 --- a/src/components/table/index.tsx +++ b/src/components/table/index.tsx @@ -3,7 +3,7 @@ import { SmoothlyTableExpandableCellCustomEvent } from "../../components" @Component({ tag: "smoothly-table", - styleUrl: "style.css", + styleUrl: "style.scss", scoped: true, }) export class SmoothlyTable { diff --git a/src/components/table/style.css b/src/components/table/style.css deleted file mode 100644 index 27a65930b..000000000 --- a/src/components/table/style.css +++ /dev/null @@ -1,119 +0,0 @@ -:host { - color: rgb(var(--smoothly-table-foreground)); - stroke: rgb(var(--smoothly-table-foreground)); - fill: rgb(var(--smoothly-table-foreground)); -} - -:host:not(.cards) { - display: grid; - grid-template-columns: repeat(var(--columns), auto); -} - -:host:not(.cards) .smoothly-cell-label { - display: none; -} - - -/* STACKED */ - -:host(.cards) { - display: grid; -} -:host(.cards) smoothly-table-head { - display: none; -} -:host(.cards)>smoothly-table-body { - /* css-var card-gap */ - row-gap: var(--smoothly-card-row-gap, 1.5rem); -} - -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row, -:host(.cards)>smoothly-table-body>smoothly-table-expandable-row { - display: grid; - grid-template-columns: auto 1fr auto auto; - /* css-var card-shadow-color? */ - box-shadow: 0 1px 3px rgba(var(--smoothly-default-contrast), 0.12), - 0 1px 2px rgba(var(--smoothly-default-contrast), 0.24); - border: 1px solid rgb(var(--smoothly-table-border), 0.25); - border-radius: 0.5rem; -} -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell, -:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell { - padding-inline: 0.75rem; - box-sizing: border-box; - display: flex; - align-items: center; -} -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell:not([card-area]), -:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell:not([card-area]) { - grid-column: 1 / -1; - /* css-var card-field-min-height? */ - min-height: var(--smoothly-card-field-min-height, 3rem); -} -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area], -:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area] { - grid-row: 1; - /* css-var card-border-color? */ - border-bottom: 1px solid rgb(var(--smoothly-table-border), 0.25); - /* css-var card-header-min-height? */ - min-height: var(--smoothly-card-header-min-height, 3rem); -} -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area]>.smoothly-cell-label, -:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area]>.smoothly-cell-label { - display: none; -} -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=checkbox], -:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area=checkbox] { - grid-column: 1; -} -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=primary], -:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area=primary] { - grid-column: 2; -} - -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=status], -:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area=status] { - grid-column: 3; -} - -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>smoothly-table-cell[card-area=actions], -:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>smoothly-table-cell[card-area=actions] { - grid-column: 4; -} - -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row[open]>div.detail, -:host(.cards)>smoothly-table-body>smoothly-table-expandable-row[open]>div.detail { - overflow: visible; - /* css-var card-detail-padding-block? */ - padding-block: var(--smoothly-card-detail-block, 0.5rem); - /* css-var card-detail-padding-inline? */ - padding-inline: var(--smoothly-card-detail-inline, 0); -} - -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>.smoothly-expand-button, -:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>.smoothly-expand-button { - grid-column: 1 / -1; - /* css-var card-border-color? */ - border-top: 1px solid rgb(var(--smoothly-table-border), 0.25); - position: relative; - height: 3rem; -} - -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row>.smoothly-expand-button::before, -:host(.cards)>smoothly-table-body>smoothly-table-expandable-row>.smoothly-expand-button::before { - content: ""; - top: 50%; - left: 50%; - position: absolute; - /* css-var --smoothly-card-expand-arrow-color */ - border-left: 3px solid rgb(var(--smoothly-table-border), 0.5); - border-bottom: 3px solid rgb(var(--smoothly-table-border), 0.5); - transform: translate(-50%, -75%) rotate(-45deg); - width: 0.75rem; - height: 0.75rem; -} - -:host(.cards)>smoothly-table-body>*>smoothly-table-expandable-row[open]>.smoothly-expand-button::before, -:host(.cards)>smoothly-table-body>smoothly-table-expandable-row[open]>.smoothly-expand-button::before { - transform: translate(-50%, -25%) rotate(135deg); -} diff --git a/src/components/table/style.scss b/src/components/table/style.scss new file mode 100644 index 000000000..a4006a474 --- /dev/null +++ b/src/components/table/style.scss @@ -0,0 +1,127 @@ +:host { + color: rgb(var(--smoothly-table-foreground)); + stroke: rgb(var(--smoothly-table-foreground)); + fill: rgb(var(--smoothly-table-foreground)); +} + +:host:not(.cards) { + display: grid; + grid-template-columns: repeat(var(--columns), auto); +} + +:host:not(.cards) .smoothly-cell-label { + display: none; +} + + +/* STACKED */ + +:host(.cards) { + display: grid; +} + +:host(.cards) smoothly-table-head { + display: none; +} + +:host(.cards) > smoothly-table-body { + /* css-var card-gap */ + row-gap: var(--smoothly-card-row-gap, 1.5rem); +} + +:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row, +:host(.cards) > smoothly-table-body > smoothly-table-expandable-row { + display: grid; + grid-template-columns: auto 1fr auto auto; + /* css-var card-shadow-color? */ + box-shadow: 0 1px 3px rgba(var(--smoothly-default-contrast), 0.12), + 0 1px 2px rgba(var(--smoothly-default-contrast), 0.24); + border: 1px solid rgb(var(--smoothly-table-border), 0.25); + border-radius: 0.5rem; +} + +:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell, +:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell { + padding-inline: 0.75rem; + box-sizing: border-box; + display: flex; + align-items: center; +} + +:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell:not([card-area]), +:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell:not([card-area]) { + grid-column: 1 / -1; + /* css-var card-field-min-height? */ + min-height: var(--smoothly-card-field-min-height, 3rem); +} + +:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell[card-area], +:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell[card-area] { + grid-row: 1; + /* css-var card-border-color? */ + border-bottom: 1px solid rgb(var(--smoothly-table-border), 0.25); + /* css-var card-header-min-height? */ + min-height: var(--smoothly-card-header-min-height, 3rem); +} + +:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell[card-area] > .smoothly-cell-label, +:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell[card-area] > .smoothly-cell-label { + display: none; +} + +:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell[card-area=checkbox], +:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell[card-area=checkbox] { + grid-column: 1; +} + +:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell[card-area=primary], +:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell[card-area=primary] { + grid-column: 2; +} + +:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell[card-area=status], +:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell[card-area=status] { + grid-column: 3; +} + +:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell[card-area=actions], +:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell[card-area=actions] { + grid-column: 4; +} + +:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row[open] > div.detail, +:host(.cards) > smoothly-table-body > smoothly-table-expandable-row[open] > div.detail { + overflow: visible; + /* css-var card-detail-padding-block? */ + padding-block: var(--smoothly-card-detail-block, 0.5rem); + /* css-var card-detail-padding-inline? */ + padding-inline: var(--smoothly-card-detail-inline, 0); +} + +:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > .smoothly-expand-button, +:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > .smoothly-expand-button { + grid-column: 1 / -1; + /* css-var card-border-color? */ + border-top: 1px solid rgb(var(--smoothly-table-border), 0.25); + position: relative; + height: 3rem; +} + +:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > .smoothly-expand-button::before, +:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > .smoothly-expand-button::before { + content: ""; + top: 50%; + left: 50%; + position: absolute; + /* css-var --smoothly-card-expand-arrow-color */ + border-left: 3px solid rgb(var(--smoothly-table-border), 0.5); + border-bottom: 3px solid rgb(var(--smoothly-table-border), 0.5); + transform: translate(-50%, -75%) rotate(-45deg); + width: 0.75rem; + height: 0.75rem; +} + +:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row[open] > .smoothly-expand-button::before, +:host(.cards) > smoothly-table-body > smoothly-table-expandable-row[open] > .smoothly-expand-button::before { + transform: translate(-50%, -25%) rotate(135deg); +} From b8cbcc5b55a70ab90c1b5995495184e02b7e962a Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Tue, 16 Sep 2025 14:27:09 +0200 Subject: [PATCH 13/32] make use of nested styling in table for cards --- .../table/expandable/row/style.scss | 23 +++ src/components/table/style.scss | 181 ++++++++---------- 2 files changed, 98 insertions(+), 106 deletions(-) diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index 97f07c025..85a8bfe74 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -114,3 +114,26 @@ smoothly-table:not(.cards) > smoothly-table-body > :host > div.detail::before { } /* NOTE: Need To move styling to table! */ + +/* Stacked Cards */ + +:host > .smoothly-expand-button { + grid-column: 1 / -1; + /* css-var card-border-color? */ + border-top: 1px solid rgb(var(--smoothly-table-border), 0.25); + position: relative; + height: 3rem; + + &::before { + content: ""; + top: 50%; + left: 50%; + position: absolute; + /* css-var --smoothly-card-expand-arrow-color */ + border-left: 3px solid rgb(var(--smoothly-table-border), 0.5); + border-bottom: 3px solid rgb(var(--smoothly-table-border), 0.5); + transform: translate(-50%, -75%) rotate(-45deg); + width: 0.75rem; + height: 0.75rem; + } +} diff --git a/src/components/table/style.scss b/src/components/table/style.scss index a4006a474..f0771c688 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -14,114 +14,83 @@ } -/* STACKED */ +/* Stacked Cards */ :host(.cards) { display: grid; -} - -:host(.cards) smoothly-table-head { - display: none; -} - -:host(.cards) > smoothly-table-body { - /* css-var card-gap */ - row-gap: var(--smoothly-card-row-gap, 1.5rem); -} - -:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row, -:host(.cards) > smoothly-table-body > smoothly-table-expandable-row { - display: grid; - grid-template-columns: auto 1fr auto auto; - /* css-var card-shadow-color? */ - box-shadow: 0 1px 3px rgba(var(--smoothly-default-contrast), 0.12), - 0 1px 2px rgba(var(--smoothly-default-contrast), 0.24); - border: 1px solid rgb(var(--smoothly-table-border), 0.25); - border-radius: 0.5rem; -} - -:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell, -:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell { - padding-inline: 0.75rem; - box-sizing: border-box; - display: flex; - align-items: center; -} - -:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell:not([card-area]), -:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell:not([card-area]) { - grid-column: 1 / -1; - /* css-var card-field-min-height? */ - min-height: var(--smoothly-card-field-min-height, 3rem); -} - -:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell[card-area], -:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell[card-area] { - grid-row: 1; - /* css-var card-border-color? */ - border-bottom: 1px solid rgb(var(--smoothly-table-border), 0.25); - /* css-var card-header-min-height? */ - min-height: var(--smoothly-card-header-min-height, 3rem); -} - -:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell[card-area] > .smoothly-cell-label, -:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell[card-area] > .smoothly-cell-label { - display: none; -} - -:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell[card-area=checkbox], -:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell[card-area=checkbox] { - grid-column: 1; -} - -:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell[card-area=primary], -:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell[card-area=primary] { - grid-column: 2; -} - -:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell[card-area=status], -:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell[card-area=status] { - grid-column: 3; -} - -:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > smoothly-table-cell[card-area=actions], -:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > smoothly-table-cell[card-area=actions] { - grid-column: 4; -} - -:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row[open] > div.detail, -:host(.cards) > smoothly-table-body > smoothly-table-expandable-row[open] > div.detail { - overflow: visible; - /* css-var card-detail-padding-block? */ - padding-block: var(--smoothly-card-detail-block, 0.5rem); - /* css-var card-detail-padding-inline? */ - padding-inline: var(--smoothly-card-detail-inline, 0); -} - -:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > .smoothly-expand-button, -:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > .smoothly-expand-button { - grid-column: 1 / -1; - /* css-var card-border-color? */ - border-top: 1px solid rgb(var(--smoothly-table-border), 0.25); - position: relative; - height: 3rem; -} - -:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row > .smoothly-expand-button::before, -:host(.cards) > smoothly-table-body > smoothly-table-expandable-row > .smoothly-expand-button::before { - content: ""; - top: 50%; - left: 50%; - position: absolute; - /* css-var --smoothly-card-expand-arrow-color */ - border-left: 3px solid rgb(var(--smoothly-table-border), 0.5); - border-bottom: 3px solid rgb(var(--smoothly-table-border), 0.5); - transform: translate(-50%, -75%) rotate(-45deg); - width: 0.75rem; - height: 0.75rem; -} -:host(.cards) > smoothly-table-body > * > smoothly-table-expandable-row[open] > .smoothly-expand-button::before, -:host(.cards) > smoothly-table-body > smoothly-table-expandable-row[open] > .smoothly-expand-button::before { - transform: translate(-50%, -25%) rotate(135deg); + & > smoothly-table-head { + display: none; + /* css-var card-gap */ + row-gap: var(--smoothly-card-row-gap, 1.5rem); + } + + & > smoothly-table-body > *, + & > smoothly-table-body { + & > smoothly-table-expandable-row { + display: grid; + grid-template-columns: auto 1fr auto auto; + /* css-var card-shadow-color? */ + box-shadow: 0 1px 3px rgba(var(--smoothly-default-contrast), 0.12), + 0 1px 2px rgba(var(--smoothly-default-contrast), 0.24); + border: 1px solid rgb(var(--smoothly-table-border), 0.25); + /* css-var card-border-radius? */ + border-radius: var(--smoothly-card-border-radius, 0.5rem); + + & > smoothly-table-cell { + /* css-var card-field-padding-inline? */ + padding-inline: 0.75rem; + box-sizing: border-box; + display: flex; + align-items: center; + } + + & > smoothly-table-cell:not([card-area]) { + grid-column: 1 / -1; + /* css-var card-field-min-height? */ + min-height: var(--smoothly-card-field-min-height, 3rem); + } + + & > smoothly-table-cell[card-area] { + grid-row: 1; + /* css-var card-border-color? */ + border-bottom: 1px solid rgb(var(--smoothly-table-border), 0.25); + /* css-var card-header-min-height? */ + min-height: var(--smoothly-card-header-min-height, 3rem); + + & > .smoothly-cell-label { + display: none; + } + } + + smoothly-table-cell[card-area=checkbox] { + grid-column: 1; + } + + smoothly-table-cell[card-area=primary] { + grid-column: 2; + } + + smoothly-table-cell[card-area=status] { + grid-column: 3; + } + + smoothly-table-cell[card-area=actions] { + grid-column: 4; + } + + } + + & > smoothly-table-expandable-row[open] > div.detail { + overflow: visible; + /* css-var card-detail-padding-block? */ + padding-block: var(--smoothly-card-detail-block, 0.5rem); + /* css-var card-detail-padding-inline? */ + padding-inline: var(--smoothly-card-detail-inline, 0); + } + + & > smoothly-table-expandable-row[open] > .smoothly-expand-button::before { + transform: translate(-50%, -25%) rotate(135deg); + } + } } From 1aed5efff07eefe07502e4a297c823595a2f67ab Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Tue, 16 Sep 2025 15:50:13 +0200 Subject: [PATCH 14/32] Move not(.cards) to table --- .../table/expandable/row/style.scss | 84 +++---------------- src/components/table/style.scss | 68 +++++++++++++++ 2 files changed, 80 insertions(+), 72 deletions(-) diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index 85a8bfe74..1e3b1a938 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -1,5 +1,3 @@ -@import "../arrow.scss"; - :host { grid-column: 1 / -1; display: grid; @@ -31,89 +29,31 @@ color: rgb(var(--smoothly-table-expanded-foreground)); } +/* Regular table (non-cards) */ + +:host > div.detail::before, :host > div.detail::after { - content: ""; position: absolute; display: flex; - top: 0; - bottom: 0; - right: -1em; + box-sizing: border-box; + inset-block: 0; width: 1em; - background-color: rgb(var(--smoothly-table-expanded-background)); - box-shadow: -2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), - 0px 0px 1px 0px rgb(var(--smoothly-table-border)); -} - -smoothly-table:not(.cards) > smoothly-table-body > :host::slotted(:not(.detail)):not(.smoothly-row):not(.smoothly-expand-button), -smoothly-table:not(.cards) > smoothly-table-body > :host > ::slotted(.smoothly-row>*:not(.smoothly-expand-button)) { - grid: subgrid; - cursor: pointer; - grid-column: span var(--smoothly-table-cell-span, 1); - display: flex; - align-items: center; - padding-inline: 1.1rem; - min-height: var(--smoothly-table-cell-min-height, 3rem); - white-space: nowrap; -} - -smoothly-table:not(.cards) > smoothly-table-body > :host > .smoothly-expand-button { - display: none; - visibility: hidden; -} - -smoothly-table:not(.cards) > smoothly-table-body > :host:has(>:not(.detail):hover), -smoothly-table:not(.cards) > smoothly-table-body > :host > .smoothly-row:has(>:not(.detail):hover) { - background-color: rgb(var(--smoothly-table-hover-background)); - color: rgb(var(--smoothly-table-hover-foreground)); -} - -smoothly-table:not(.cards) > smoothly-table-body > :host[open] { - color: rgb(var(--smoothly-table-expanded-foreground)); - grid-template-rows: auto 1fr; - box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)), - 0px 0px 1px rgb(var(--smoothly-table-border)) inset; - grid-template-rows: 0fr 1fr; -} - - - -smoothly-table:not(.cards) > smoothly-table-body > :host > :first-child, -smoothly-table:not(.cards) > smoothly-table-body > :host > .smoothly-row > :first-child { - @include arrow; -} - -smoothly-table:not(.cards) > smoothly-table-body > :host:has(>:hover) > :first-child, -smoothly-table:not(.cards) > smoothly-table-body > :host > .smoothly-row:has(>:hover) > :first-child { - @include arrow-hover; } -smoothly-table:not(.cards) > smoothly-table-body > :host[open] > :first-child, -smoothly-table:not(.cards) > smoothly-table-body > :host[open] > .smoothly-row > :first-child { - @include arrow-open; -} - -smoothly-table:not(.cards) > smoothly-table-body > :host[open] > div.detail { - overflow: visible; - padding-block: var(--smoothly-table-detail-padding-block, 0.5rem); - padding-inline: var(--smoothly-table-detail-padding-inline, 1.1rem); -} - -smoothly-table:not(.cards) > smoothly-table-body > :host > div.detail::before { - content: ""; - position: absolute; - display: flex; - box-sizing: border-box; - top: 0; - bottom: 0; +:host > div.detail::before { left: -1em; - width: 1em; background-color: rgb(var(--smoothly-table-expanded-background)); border-left: 0.3em solid rgb(var(--smoothly-table-detail-border, var(--smoothly-table-border))); box-shadow: 2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), 0px 0px 1px 0px rgb(var(--smoothly-table-border)); } -/* NOTE: Need To move styling to table! */ +:host > div.detail::after { + right: -1em; + background-color: rgb(var(--smoothly-table-expanded-background)); + box-shadow: -2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)), + 0px 0px 1px 0px rgb(var(--smoothly-table-border)); +} /* Stacked Cards */ diff --git a/src/components/table/style.scss b/src/components/table/style.scss index f0771c688..467fbfb70 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -1,3 +1,5 @@ +@import "./expandable/arrow.scss"; + :host { color: rgb(var(--smoothly-table-foreground)); stroke: rgb(var(--smoothly-table-foreground)); @@ -13,6 +15,72 @@ display: none; } +/* Regular table (non-cards) */ + +:host(:not(.cards)) { + + & > smoothly-table-body > *, + & > smoothly-table-body { + & > smoothly-table-expandable-row { + + & > div.detail::before, + & > div.detail::after { + content: ""; + } + + &::slotted(:not(.detail):not(.smoothly-row):not(.smoothly-expand-button)), + & > ::slotted(.smoothly-row>*:not(.smoothly-expand-button)) { + grid: subgrid; + cursor: pointer; + grid-column: span var(--smoothly-table-cell-span, 1); + display: flex; + align-items: center; + padding-inline: 1.1rem; + min-height: var(--smoothly-table-cell-min-height, 3rem); + white-space: nowrap; + } + + & > .smoothly-expand-button { + display: none; + visibility: hidden; + } + + &:has(>:not(.detail):hover), + & > .smoothly-row:has(>:not(.detail):hover) { + background-color: rgb(var(--smoothly-table-hover-background)); + color: rgb(var(--smoothly-table-hover-foreground)); + } + } + + & > smoothly-table-expandable-row[open] { + color: rgb(var(--smoothly-table-expanded-foreground)); + box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)), + 0px 0px 1px rgb(var(--smoothly-table-border)) inset; + } + + & > smoothly-table-expandable-row > :first-child, + & > smoothly-table-expandable-row > .smoothly-row > :first-child { + @include arrow; + } + + & > smoothly-table-expandable-row:has(>:hover) > :first-child, + & > smoothly-table-expandable-row > .smoothly-row:has(>:hover) > :first-child { + @include arrow-hover; + } + + & > smoothly-table-expandable-row[open] > :first-child, + & > smoothly-table-expandable-row[open] > .smoothly-row > :first-child { + @include arrow-open; + } + + & > smoothly-table-expandable-row[open] > div.detail { + overflow: visible; + padding-block: var(--smoothly-table-detail-padding-block, 0.5rem); + padding-inline: var(--smoothly-table-detail-padding-inline, 1.1rem); + } + } +} + /* Stacked Cards */ From 9ab2e5af83f237b3756c0bae0099ac68b4e46eec Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Tue, 16 Sep 2025 15:52:59 +0200 Subject: [PATCH 15/32] Move all not cards to once block --- src/components/table/style.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/table/style.scss b/src/components/table/style.scss index 467fbfb70..0a59d2bff 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -6,23 +6,21 @@ fill: rgb(var(--smoothly-table-foreground)); } -:host:not(.cards) { - display: grid; - grid-template-columns: repeat(var(--columns), auto); -} - -:host:not(.cards) .smoothly-cell-label { - display: none; -} - /* Regular table (non-cards) */ :host(:not(.cards)) { + display: grid; + grid-template-columns: repeat(var(--columns), auto); + & > smoothly-table-body > *, & > smoothly-table-body { & > smoothly-table-expandable-row { + & > smoothly-table-cell > .smoothly-cell-label { + display: none; + } + & > div.detail::before, & > div.detail::after { content: ""; @@ -52,6 +50,8 @@ } } + + & > smoothly-table-expandable-row[open] { color: rgb(var(--smoothly-table-expanded-foreground)); box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)), From 117f2c56292bcda561ab6033e767f69c37c2d347 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Tue, 16 Sep 2025 15:53:23 +0200 Subject: [PATCH 16/32] remove extra lines --- src/components/table/style.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/table/style.scss b/src/components/table/style.scss index 0a59d2bff..269adf6ef 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -50,8 +50,6 @@ } } - - & > smoothly-table-expandable-row[open] { color: rgb(var(--smoothly-table-expanded-foreground)); box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)), From 9d1e8bde5fef55a0c262c7e63c95a3021b063e59 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Tue, 16 Sep 2025 15:54:59 +0200 Subject: [PATCH 17/32] remove empty line --- src/components/table/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/table/style.scss b/src/components/table/style.scss index 269adf6ef..b8d35795c 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -12,7 +12,6 @@ display: grid; grid-template-columns: repeat(var(--columns), auto); - & > smoothly-table-body > *, & > smoothly-table-body { & > smoothly-table-expandable-row { From ac0b7c03ed5ef9235363a2618280be0cfdc3f10a Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Tue, 16 Sep 2025 15:56:57 +0200 Subject: [PATCH 18/32] nesting --- src/components/table/style.scss | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/table/style.scss b/src/components/table/style.scss index b8d35795c..d8adffc88 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -49,12 +49,6 @@ } } - & > smoothly-table-expandable-row[open] { - color: rgb(var(--smoothly-table-expanded-foreground)); - box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)), - 0px 0px 1px rgb(var(--smoothly-table-border)) inset; - } - & > smoothly-table-expandable-row > :first-child, & > smoothly-table-expandable-row > .smoothly-row > :first-child { @include arrow; @@ -65,16 +59,23 @@ @include arrow-hover; } - & > smoothly-table-expandable-row[open] > :first-child, - & > smoothly-table-expandable-row[open] > .smoothly-row > :first-child { - @include arrow-open; - } + &[open] { + color: rgb(var(--smoothly-table-expanded-foreground)); + box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)), + 0px 0px 1px rgb(var(--smoothly-table-border)) inset; - & > smoothly-table-expandable-row[open] > div.detail { - overflow: visible; - padding-block: var(--smoothly-table-detail-padding-block, 0.5rem); - padding-inline: var(--smoothly-table-detail-padding-inline, 1.1rem); + & > :first-child, + & > .smoothly-row > :first-child { + @include arrow-open; + } + + & > div.detail { + overflow: visible; + padding-block: var(--smoothly-table-detail-padding-block, 0.5rem); + padding-inline: var(--smoothly-table-detail-padding-inline, 1.1rem); + } } + } } From a50067b3e1c83daf9ed4385728f226ef180dea44 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Tue, 16 Sep 2025 15:58:21 +0200 Subject: [PATCH 19/32] nesting --- src/components/table/style.scss | 44 +++++++++++++++++---------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/src/components/table/style.scss b/src/components/table/style.scss index d8adffc88..fcfb42a03 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -47,35 +47,37 @@ background-color: rgb(var(--smoothly-table-hover-background)); color: rgb(var(--smoothly-table-hover-foreground)); } - } - - & > smoothly-table-expandable-row > :first-child, - & > smoothly-table-expandable-row > .smoothly-row > :first-child { - @include arrow; - } - - & > smoothly-table-expandable-row:has(>:hover) > :first-child, - & > smoothly-table-expandable-row > .smoothly-row:has(>:hover) > :first-child { - @include arrow-hover; - } - - &[open] { - color: rgb(var(--smoothly-table-expanded-foreground)); - box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)), - 0px 0px 1px rgb(var(--smoothly-table-border)) inset; & > :first-child, & > .smoothly-row > :first-child { - @include arrow-open; + @include arrow; + } + + &:has(>:hover) > :first-child, + & > .smoothly-row:has(>:hover) > :first-child { + @include arrow-hover; } - & > div.detail { - overflow: visible; - padding-block: var(--smoothly-table-detail-padding-block, 0.5rem); - padding-inline: var(--smoothly-table-detail-padding-inline, 1.1rem); + &[open] { + color: rgb(var(--smoothly-table-expanded-foreground)); + box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)), + 0px 0px 1px rgb(var(--smoothly-table-border)) inset; + + & > :first-child, + & > .smoothly-row > :first-child { + @include arrow-open; + } + + & > div.detail { + overflow: visible; + padding-block: var(--smoothly-table-detail-padding-block, 0.5rem); + padding-inline: var(--smoothly-table-detail-padding-inline, 1.1rem); + } } } + + } } From f41d17d225cea03c9697472bbbef23e41a98bb22 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Tue, 16 Sep 2025 16:04:25 +0200 Subject: [PATCH 20/32] fix selector --- src/components/table/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/table/style.scss b/src/components/table/style.scss index fcfb42a03..042376da7 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -25,8 +25,8 @@ content: ""; } - &::slotted(:not(.detail):not(.smoothly-row):not(.smoothly-expand-button)), - & > ::slotted(.smoothly-row>*:not(.smoothly-expand-button)) { + & > *:not(.detail):not(.smoothly-row):not(.smoothly-expand-button), + & > .smoothly-row > *:not(.smoothly-expand-button) { grid: subgrid; cursor: pointer; grid-column: span var(--smoothly-table-cell-span, 1); From 75ca5c485cd51f2e338afed5fb344daea012254d Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Tue, 16 Sep 2025 16:08:11 +0200 Subject: [PATCH 21/32] re nest --- src/components/table/style.scss | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/components/table/style.scss b/src/components/table/style.scss index 042376da7..bf450b687 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -75,9 +75,6 @@ } } } - - - } } @@ -147,18 +144,18 @@ grid-column: 4; } - } + &[open] > div.detail { + overflow: visible; + /* css-var card-detail-padding-block? */ + padding-block: var(--smoothly-card-detail-block, 0.5rem); + /* css-var card-detail-padding-inline? */ + padding-inline: var(--smoothly-card-detail-inline, 0); + } - & > smoothly-table-expandable-row[open] > div.detail { - overflow: visible; - /* css-var card-detail-padding-block? */ - padding-block: var(--smoothly-card-detail-block, 0.5rem); - /* css-var card-detail-padding-inline? */ - padding-inline: var(--smoothly-card-detail-inline, 0); + &[open] > .smoothly-expand-button::before { + transform: translate(-50%, -25%) rotate(135deg); + } } - & > smoothly-table-expandable-row[open] > .smoothly-expand-button::before { - transform: translate(-50%, -25%) rotate(135deg); - } } } From f17309831b82af3a880d41f7d3ad330078813887 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Tue, 16 Sep 2025 16:18:43 +0200 Subject: [PATCH 22/32] add card-hidden prop on cell --- src/components.d.ts | 2 ++ src/components/table/cell/index.tsx | 1 + .../table/demo/nested-no-cell/index.tsx | 4 ++-- src/components/table/style.scss | 17 ++++++++++++----- 4 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index 52087a8a4..fd45b5c0a 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -637,6 +637,7 @@ export namespace Components { } interface SmoothlyTableCell { "cardArea"?: "checkbox" | "primary" | "status" | "actions"; + "cardHidden"?: boolean; "label"?: string; "span"?: number; } @@ -2891,6 +2892,7 @@ declare namespace LocalJSX { } interface SmoothlyTableCell { "cardArea"?: "checkbox" | "primary" | "status" | "actions"; + "cardHidden"?: boolean; "label"?: string; "span"?: number; } diff --git a/src/components/table/cell/index.tsx b/src/components/table/cell/index.tsx index 3ccddd2ba..e7bde4b53 100644 --- a/src/components/table/cell/index.tsx +++ b/src/components/table/cell/index.tsx @@ -9,6 +9,7 @@ export class SmoothlyTableCell { @Prop({ reflect: true }) span?: number = 1 @Prop({ reflect: true }) label?: string @Prop({ reflect: true }) cardArea?: "checkbox" | "primary" | "status" | "actions" + @Prop({ reflect: true }) cardHidden?: boolean render(): VNode | VNode[] { return ( diff --git a/src/components/table/demo/nested-no-cell/index.tsx b/src/components/table/demo/nested-no-cell/index.tsx index c920a6f68..29cfd9bf7 100644 --- a/src/components/table/demo/nested-no-cell/index.tsx +++ b/src/components/table/demo/nested-no-cell/index.tsx @@ -35,11 +35,11 @@ export class SmoothlyTableDemoNestedNoCell { {entry.name} {entry.age} - {entry.balance} + {entry.balance} {entry.eyeColor} - {entry.gender} + {entry.gender} {entry.company} smoothly-table-head { display: none; + } + + & > smoothly-table-body { /* css-var card-gap */ row-gap: var(--smoothly-card-row-gap, 1.5rem); } @@ -119,7 +122,7 @@ & > smoothly-table-cell[card-area] { grid-row: 1; /* css-var card-border-color? */ - border-bottom: 1px solid rgb(var(--smoothly-table-border), 0.25); + border-bottom: 1px solid rgb(var(--smoothly-card-border, var(--smoothly-table-border))); /* css-var card-header-min-height? */ min-height: var(--smoothly-card-header-min-height, 3rem); @@ -128,22 +131,26 @@ } } - smoothly-table-cell[card-area=checkbox] { + & > smoothly-table-cell[card-area=checkbox] { grid-column: 1; } - smoothly-table-cell[card-area=primary] { + & > smoothly-table-cell[card-area=primary] { grid-column: 2; } - smoothly-table-cell[card-area=status] { + & > smoothly-table-cell[card-area=status] { grid-column: 3; } - smoothly-table-cell[card-area=actions] { + & > smoothly-table-cell[card-area=actions] { grid-column: 4; } + & > smoothly-table-cell[card-hidden] { + display: none; + } + &[open] > div.detail { overflow: visible; /* css-var card-detail-padding-block? */ From f0afe5035ebe7883a5aa2f7f9746c15b92391f01 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Wed, 17 Sep 2025 10:19:45 +0200 Subject: [PATCH 23/32] update naming --- src/components.d.ts | 4 ++-- src/components/table/cell/index.tsx | 6 +++--- src/components/table/cell/style.css | 2 +- src/components/table/style.scss | 24 ++++++++++++------------ 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index fd45b5c0a..0ce16ce7b 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -638,7 +638,7 @@ export namespace Components { interface SmoothlyTableCell { "cardArea"?: "checkbox" | "primary" | "status" | "actions"; "cardHidden"?: boolean; - "label"?: string; + "cardLabel"?: string; "span"?: number; } interface SmoothlyTableDemo { @@ -2893,7 +2893,7 @@ declare namespace LocalJSX { interface SmoothlyTableCell { "cardArea"?: "checkbox" | "primary" | "status" | "actions"; "cardHidden"?: boolean; - "label"?: string; + "cardLabel"?: string; "span"?: number; } interface SmoothlyTableDemo { diff --git a/src/components/table/cell/index.tsx b/src/components/table/cell/index.tsx index e7bde4b53..f0b9985cd 100644 --- a/src/components/table/cell/index.tsx +++ b/src/components/table/cell/index.tsx @@ -7,14 +7,14 @@ import { Component, h, Host, Prop, VNode } from "@stencil/core" }) export class SmoothlyTableCell { @Prop({ reflect: true }) span?: number = 1 - @Prop({ reflect: true }) label?: string + @Prop({ reflect: true }) cardLabel?: string @Prop({ reflect: true }) cardArea?: "checkbox" | "primary" | "status" | "actions" @Prop({ reflect: true }) cardHidden?: boolean render(): VNode | VNode[] { return ( - - {typeof this.label == "string" && {this.label}} + + {typeof this.cardLabel == "string" && {this.cardLabel}} ) diff --git a/src/components/table/cell/style.css b/src/components/table/cell/style.css index c94070f1b..1ee722ffb 100644 --- a/src/components/table/cell/style.css +++ b/src/components/table/cell/style.css @@ -11,7 +11,7 @@ smoothly-table.cards :host { display: flex; } -smoothly-table.cards :host>.smoothly-cell-label { +smoothly-table.cards :host>.smoothly-card-field-label { /* css-var card-field-label-min-width? */ min-width: var(--smoothly-card-field-label-min-width, 12ch); /* css-var card-label-color? */ diff --git a/src/components/table/style.scss b/src/components/table/style.scss index bf2de7bf6..dfdf2f510 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -16,7 +16,7 @@ & > smoothly-table-body { & > smoothly-table-expandable-row { - & > smoothly-table-cell > .smoothly-cell-label { + & > smoothly-table-cell > .smoothly-card-field-label { display: none; } @@ -25,8 +25,8 @@ content: ""; } - & > *:not(.detail):not(.smoothly-row):not(.smoothly-expand-button), - & > .smoothly-row > *:not(.smoothly-expand-button) { + & > *.smoothly-table-cell, + & > .smoothly-row > *.smoothly-table-cell { grid: subgrid; cursor: pointer; grid-column: span var(--smoothly-table-cell-span, 1); @@ -42,19 +42,19 @@ visibility: hidden; } - &:has(>:not(.detail):hover), - & > .smoothly-row:has(>:not(.detail):hover) { + &:has(>.smoothly-table-cell:hover), + & > .smoothly-row:has(>.smoothly-table-cell:hover) { background-color: rgb(var(--smoothly-table-hover-background)); color: rgb(var(--smoothly-table-hover-foreground)); } - & > :first-child, - & > .smoothly-row > :first-child { + & > :is(.smoothly-table-cell):first-child, + & > .smoothly-row > :is(.smoothly-table-cell):first-child { @include arrow; } - &:has(>:hover) > :first-child, - & > .smoothly-row:has(>:hover) > :first-child { + &:has(>:hover) > :is(.smoothly-table-cell):first-child, + & > .smoothly-row:has(>:hover) > :is(.smoothly-table-cell):first-child { @include arrow-hover; } @@ -63,8 +63,8 @@ box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)), 0px 0px 1px rgb(var(--smoothly-table-border)) inset; - & > :first-child, - & > .smoothly-row > :first-child { + & > :is(.smoothly-table-cell):first-child, + & > .smoothly-row > :is(.smoothly-table-cell):first-child { @include arrow-open; } @@ -126,7 +126,7 @@ /* css-var card-header-min-height? */ min-height: var(--smoothly-card-header-min-height, 3rem); - & > .smoothly-cell-label { + & > .smoothly-card-field-label { display: none; } } From b7095d6c04d70bb2a50fd47c1001b99aaaf3f798 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Thu, 18 Sep 2025 11:02:06 +0200 Subject: [PATCH 24/32] cardVisibility --- src/components.d.ts | 4 ++-- src/components/table/cell/index.tsx | 2 +- .../table/demo/nested-no-cell/index.tsx | 18 ++++++++++-------- .../table/demo/nested-no-cell/inner/index.tsx | 8 ++++---- src/components/table/style.scss | 10 ++++++---- 5 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index 0ce16ce7b..16c53064e 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -637,8 +637,8 @@ export namespace Components { } interface SmoothlyTableCell { "cardArea"?: "checkbox" | "primary" | "status" | "actions"; - "cardHidden"?: boolean; "cardLabel"?: string; + "cardVisibility": "always" | "opened" | "hidden"; "span"?: number; } interface SmoothlyTableDemo { @@ -2892,8 +2892,8 @@ declare namespace LocalJSX { } interface SmoothlyTableCell { "cardArea"?: "checkbox" | "primary" | "status" | "actions"; - "cardHidden"?: boolean; "cardLabel"?: string; + "cardVisibility"?: "always" | "opened" | "hidden"; "span"?: number; } interface SmoothlyTableDemo { diff --git a/src/components/table/cell/index.tsx b/src/components/table/cell/index.tsx index f0b9985cd..f073ff9fe 100644 --- a/src/components/table/cell/index.tsx +++ b/src/components/table/cell/index.tsx @@ -9,7 +9,7 @@ export class SmoothlyTableCell { @Prop({ reflect: true }) span?: number = 1 @Prop({ reflect: true }) cardLabel?: string @Prop({ reflect: true }) cardArea?: "checkbox" | "primary" | "status" | "actions" - @Prop({ reflect: true }) cardHidden?: boolean + @Prop({ reflect: true }) cardVisibility: "always" | "opened" | "hidden" = "always" render(): VNode | VNode[] { return ( diff --git a/src/components/table/demo/nested-no-cell/index.tsx b/src/components/table/demo/nested-no-cell/index.tsx index 29cfd9bf7..9691040fa 100644 --- a/src/components/table/demo/nested-no-cell/index.tsx +++ b/src/components/table/demo/nested-no-cell/index.tsx @@ -29,18 +29,20 @@ export class SmoothlyTableDemoNestedNoCell { {data.map(entry => ( - {entry.id} - {entry.registered} - + {entry.id} + {entry.registered} + {entry.name} - {entry.age} - {entry.balance} - + {entry.age} + + {entry.balance} + + {entry.eyeColor} - {entry.gender} - {entry.company} + {entry.gender} + {entry.company} {this.data?.map(entry => ( -
{entry.id}
-
{entry.name}
-
{entry.age}
-
{entry.balance}
+
{entry.id}
+
{entry.name}
+
{entry.age}
+
{entry.balance}
 ))} diff --git a/src/components/table/style.scss b/src/components/table/style.scss index dfdf2f510..12bfb7e03 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -116,13 +116,11 @@ & > smoothly-table-cell:not([card-area]) { grid-column: 1 / -1; /* css-var card-field-min-height? */ - min-height: var(--smoothly-card-field-min-height, 3rem); + min-height: var(--smoothly-card-field-min-height, 2rem); } & > smoothly-table-cell[card-area] { grid-row: 1; - /* css-var card-border-color? */ - border-bottom: 1px solid rgb(var(--smoothly-card-border, var(--smoothly-table-border))); /* css-var card-header-min-height? */ min-height: var(--smoothly-card-header-min-height, 3rem); @@ -147,7 +145,11 @@ grid-column: 4; } - & > smoothly-table-cell[card-hidden] { + & > smoothly-table-cell[card-visibility=hidden] { + display: none; + } + + &:not([open]) > smoothly-table-cell[card-visibility=opened] { display: none; } From e2528b6baaf032b874dcb3afbb4fc8d74544471b Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Thu, 18 Sep 2025 11:13:30 +0200 Subject: [PATCH 25/32] less height for expand button --- src/components/table/expandable/row/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index 1e3b1a938..75bf4067b 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -62,7 +62,7 @@ /* css-var card-border-color? */ border-top: 1px solid rgb(var(--smoothly-table-border), 0.25); position: relative; - height: 3rem; + height: 2.5rem; &::before { content: ""; From 816755eea88b28c5f3676b84c866997b6183185b Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Thu, 18 Sep 2025 11:23:56 +0200 Subject: [PATCH 26/32] Remove .smoothly-row class --- src/components/table/demo/simple/simple.tsx | 17 ----------------- src/components/table/expandable/row/style.scss | 6 ------ src/components/table/row/style.css | 5 ++++- src/components/table/style.scss | 17 ++++++----------- 4 files changed, 10 insertions(+), 35 deletions(-) diff --git a/src/components/table/demo/simple/simple.tsx b/src/components/table/demo/simple/simple.tsx index 39e86fe81..eef4c23e9 100644 --- a/src/components/table/demo/simple/simple.tsx +++ b/src/components/table/demo/simple/simple.tsx @@ -34,23 +34,6 @@ export class SmoothlyTableDemoSimple { ))} - - !e.button && e.preventDefault()} target="_blank"> - Cell1 in expandable row - Cell2 in expandable row - -
- Content -
- of -
- the -
- expandable -
- row -
- Cell5 diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index 75bf4067b..679788539 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -14,12 +14,6 @@ display: none; } -:host > .smoothly-row { - display: grid; - grid-template-columns: subgrid; - grid-column: 1 / -1; -} - :host > div.detail { grid-column: 1 / -1; cursor: default; diff --git a/src/components/table/row/style.css b/src/components/table/row/style.css index 8a1749836..8728a9fb7 100644 --- a/src/components/table/row/style.css +++ b/src/components/table/row/style.css @@ -6,9 +6,12 @@ box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)); } :host::slotted(*) { + display: flex; grid-column: span var(--smoothly-table-cell-span, 1); align-items: center; - padding: 0.5rem 1.1rem; + padding-inline: var(--smoothly-table-cell-padding-inline, 1.1rem); + min-height: var(--smoothly-table-cell-min-height, 2.25rem); + box-sizing: border-box; white-space: nowrap; } diff --git a/src/components/table/style.scss b/src/components/table/style.scss index 12bfb7e03..8c43367c2 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -25,15 +25,14 @@ content: ""; } - & > *.smoothly-table-cell, - & > .smoothly-row > *.smoothly-table-cell { + & > *.smoothly-table-cell { grid: subgrid; cursor: pointer; grid-column: span var(--smoothly-table-cell-span, 1); display: flex; align-items: center; padding-inline: 1.1rem; - min-height: var(--smoothly-table-cell-min-height, 3rem); + min-height: var(--smoothly-table-cell-min-height, 2.75rem); white-space: nowrap; } @@ -42,19 +41,16 @@ visibility: hidden; } - &:has(>.smoothly-table-cell:hover), - & > .smoothly-row:has(>.smoothly-table-cell:hover) { + &:has(>.smoothly-table-cell:hover) { background-color: rgb(var(--smoothly-table-hover-background)); color: rgb(var(--smoothly-table-hover-foreground)); } - & > :is(.smoothly-table-cell):first-child, - & > .smoothly-row > :is(.smoothly-table-cell):first-child { + & > :is(.smoothly-table-cell):first-child { @include arrow; } - &:has(>:hover) > :is(.smoothly-table-cell):first-child, - & > .smoothly-row:has(>:hover) > :is(.smoothly-table-cell):first-child { + &:has(>:hover) > :is(.smoothly-table-cell):first-child { @include arrow-hover; } @@ -63,8 +59,7 @@ box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)), 0px 0px 1px rgb(var(--smoothly-table-border)) inset; - & > :is(.smoothly-table-cell):first-child, - & > .smoothly-row > :is(.smoothly-table-cell):first-child { + & > :is(.smoothly-table-cell):first-child { @include arrow-open; } From 0101f1b215326ce5f1b7fb440c812b6efcd5b844 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Thu, 18 Sep 2025 11:38:13 +0200 Subject: [PATCH 27/32] Remove reduntant syling --- src/components/table/cell/style.css | 19 ++----------------- src/components/table/style.scss | 5 +++-- 2 files changed, 5 insertions(+), 19 deletions(-) diff --git a/src/components/table/cell/style.css b/src/components/table/cell/style.css index 1ee722ffb..b03cd76da 100644 --- a/src/components/table/cell/style.css +++ b/src/components/table/cell/style.css @@ -1,19 +1,4 @@ -smoothly-table:not(.cards) :host { - grid-column: span var(--smoothly-table-cell-span, 1); - display: flex; - align-items: center; - padding-inline: 1.1rem; - min-height: var(--smoothly-table-row-min-height, 3rem); - white-space: nowrap; -} - -smoothly-table.cards :host { - display: flex; -} - -smoothly-table.cards :host>.smoothly-card-field-label { - /* css-var card-field-label-min-width? */ +:host>.smoothly-card-field-label { min-width: var(--smoothly-card-field-label-min-width, 12ch); - /* css-var card-label-color? */ - color: rgb(var(--smoothly-default-contrast), 0.7); + color: rgb(var(--smoothly-card-label-color, var(--smoothly-medium-color))); } diff --git a/src/components/table/style.scss b/src/components/table/style.scss index 8c43367c2..91844f58f 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -31,7 +31,7 @@ grid-column: span var(--smoothly-table-cell-span, 1); display: flex; align-items: center; - padding-inline: 1.1rem; + padding-inline: var(--smoothly-table-cell-padding-inline, 1.1rem); min-height: var(--smoothly-table-cell-min-height, 2.75rem); white-space: nowrap; } @@ -97,8 +97,9 @@ box-shadow: 0 1px 3px rgba(var(--smoothly-default-contrast), 0.12), 0 1px 2px rgba(var(--smoothly-default-contrast), 0.24); border: 1px solid rgb(var(--smoothly-table-border), 0.25); - /* css-var card-border-radius? */ border-radius: var(--smoothly-card-border-radius, 0.5rem); + text-overflow: ellipsis; + overflow: hidden; & > smoothly-table-cell { /* css-var card-field-padding-inline? */ From d77d954178b3690ce9ecc1145a3eb75b556bfde7 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Thu, 18 Sep 2025 11:39:52 +0200 Subject: [PATCH 28/32] target .smoothly-table-cell class instead of element --- src/components/table/style.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/table/style.scss b/src/components/table/style.scss index 91844f58f..029775b8f 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -101,7 +101,7 @@ text-overflow: ellipsis; overflow: hidden; - & > smoothly-table-cell { + & > .smoothly-table-cell { /* css-var card-field-padding-inline? */ padding-inline: 0.75rem; box-sizing: border-box; @@ -109,13 +109,13 @@ align-items: center; } - & > smoothly-table-cell:not([card-area]) { + & > .smoothly-table-cell:not([card-area]) { grid-column: 1 / -1; /* css-var card-field-min-height? */ min-height: var(--smoothly-card-field-min-height, 2rem); } - & > smoothly-table-cell[card-area] { + & > .smoothly-table-cell[card-area] { grid-row: 1; /* css-var card-header-min-height? */ min-height: var(--smoothly-card-header-min-height, 3rem); @@ -125,27 +125,27 @@ } } - & > smoothly-table-cell[card-area=checkbox] { + & > .smoothly-table-cell[card-area=checkbox] { grid-column: 1; } - & > smoothly-table-cell[card-area=primary] { + & > .smoothly-table-cell[card-area=primary] { grid-column: 2; } - & > smoothly-table-cell[card-area=status] { + & > .smoothly-table-cell[card-area=status] { grid-column: 3; } - & > smoothly-table-cell[card-area=actions] { + & > .smoothly-table-cell[card-area=actions] { grid-column: 4; } - & > smoothly-table-cell[card-visibility=hidden] { + & > .smoothly-table-cell[card-visibility=hidden] { display: none; } - &:not([open]) > smoothly-table-cell[card-visibility=opened] { + &:not([open]) > .smoothly-table-cell[card-visibility=opened] { display: none; } From b429831bc3d3d02e9718f85f08492b83f51095c8 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Thu, 18 Sep 2025 11:46:23 +0200 Subject: [PATCH 29/32] scrollable detail if vertical overflow --- src/components/table/expandable/row/style.scss | 1 - src/components/table/style.scss | 5 +++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index 679788539..95ba07a06 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -18,7 +18,6 @@ grid-column: 1 / -1; cursor: default; position: relative; - overflow: hidden; background-color: rgb(var(--smoothly-table-expanded-background)); color: rgb(var(--smoothly-table-expanded-foreground)); } diff --git a/src/components/table/style.scss b/src/components/table/style.scss index 029775b8f..b23ab576f 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -74,7 +74,7 @@ } -/* Stacked Cards */ +/* Stacked/Cards */ :host(.cards) { display: grid; @@ -150,7 +150,8 @@ } &[open] > div.detail { - overflow: visible; + max-width: 100%; + overflow-y: auto; /* css-var card-detail-padding-block? */ padding-block: var(--smoothly-card-detail-block, 0.5rem); /* css-var card-detail-padding-inline? */ From b47638fb89e7717a1abb318bf3a0b111a6afb1e2 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Thu, 18 Sep 2025 13:22:42 +0200 Subject: [PATCH 30/32] change class from content to smoothly-table-cell --- src/components/table/demo/index.tsx | 4 ++-- src/components/table/expandable/arrow.css | 2 +- .../table/expandable/cell/index.tsx | 2 +- .../table/expandable/cell/style.scss | 23 ++++++++++--------- src/components/table/row/style.css | 1 - src/components/table/style.scss | 2 ++ 6 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/components/table/demo/index.tsx b/src/components/table/demo/index.tsx index adef08b2c..2d1028f4e 100644 --- a/src/components/table/demo/index.tsx +++ b/src/components/table/demo/index.tsx @@ -9,12 +9,12 @@ export class SmoothlyTableDemo { render(): VNode | VNode[] { return ( - {/* */} + {/* */} {/* */} {/* */} - {/* */} + ) } diff --git a/src/components/table/expandable/arrow.css b/src/components/table/expandable/arrow.css index 588d8c608..21233e28f 100644 --- a/src/components/table/expandable/arrow.css +++ b/src/components/table/expandable/arrow.css @@ -20,7 +20,7 @@ :host::slotted(smoothly-table-cell:first-child:hover)::before, :host::slotted(smoothly-table-cell:first-child:has(~ smoothly-table-cell:hover))::before, -:host>div.content:hover:first-child::before { +:host>div.smoothly-table-cell:hover:first-child::before { opacity: 1; border-bottom: 1px solid rgb(var(--smoothly-color-contrast)); border-right: 1px solid rgb(var(--smoothly-color-contrast)); diff --git a/src/components/table/expandable/cell/index.tsx b/src/components/table/expandable/cell/index.tsx index 201910f2c..5e0d33aa3 100644 --- a/src/components/table/expandable/cell/index.tsx +++ b/src/components/table/expandable/cell/index.tsx @@ -35,7 +35,7 @@ export class SmoothlyTableExpandableCell { this.clickHandler(e)}> -
+
(this.detailElement = el)}> diff --git a/src/components/table/expandable/cell/style.scss b/src/components/table/expandable/cell/style.scss index d59a0c79c..1ab20cba7 100644 --- a/src/components/table/expandable/cell/style.scss +++ b/src/components/table/expandable/cell/style.scss @@ -4,11 +4,12 @@ display: contents; } -:host>div { - padding: 0.5rem 1.1rem; +:host > .smoothly-table-cell { + padding-inline: var(--smoothly-table-cell-padding-inline, 1.1rem); + min-height: var(--smoothly-table-cell-min-height, 2.75rem); } -:host>div.content { +:host > div.smoothly-table-cell { grid-column: span var(--smoothly-table-cell-span, 1); display: flex; box-sizing: border-box; @@ -25,37 +26,37 @@ } } -:host[open]>div.content { +:host[open] > div.smoothly-table-cell { @include arrow-open; } -:host>div:first-child { +:host > div:first-child { cursor: pointer; } -:host>div.detail { +:host > div.detail { grid-column: 1 / -1; grid-row: 2; position: relative; } -:host[open]>div.content { +:host[open] > div.smoothly-table-cell { box-shadow: 1px 1px 1px -1px rgb(var(--smoothly-table-border)) inset, -3px -1px 1px -3px rgb(var(--smoothly-table-border)) inset; } -:host[open]>div { +:host[open] > div { background-color: rgb(var(--smoothly-table-expanded-background)); color: rgb(var(--smoothly-table-expanded-foreground)); stroke: rgb(var(--smoothly-table-expanded-foreground)); fill: rgb(var(--smoothly-table-expanded-foreground)); } -:host:not([open])>div.detail { +:host:not([open]) > div.detail { display: none; } -:host>div.detail::before { +:host > div.detail::before { content: ""; position: absolute; display: flex; @@ -70,7 +71,7 @@ 0px 0px 1px 0px rgb(var(--smoothly-table-border)); } -:host>div.detail::after { +:host > div.detail::after { content: ""; position: absolute; display: flex; diff --git a/src/components/table/row/style.css b/src/components/table/row/style.css index 8728a9fb7..736a49272 100644 --- a/src/components/table/row/style.css +++ b/src/components/table/row/style.css @@ -6,7 +6,6 @@ box-shadow: 0px 1px 1px -1px rgb(var(--smoothly-table-border)); } :host::slotted(*) { - display: flex; grid-column: span var(--smoothly-table-cell-span, 1); align-items: center; padding-inline: var(--smoothly-table-cell-padding-inline, 1.1rem); diff --git a/src/components/table/style.scss b/src/components/table/style.scss index b23ab576f..5c4cc232e 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -90,6 +90,8 @@ & > smoothly-table-body > *, & > smoothly-table-body { + + & > smoothly-table-row, & > smoothly-table-expandable-row { display: grid; grid-template-columns: auto 1fr auto auto; From d7306dcffd49dbbc7853b0c2051a433ca9870bff Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Thu, 18 Sep 2025 16:24:48 +0200 Subject: [PATCH 31/32] fix padding naming detail --- src/components/table/style.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/table/style.scss b/src/components/table/style.scss index 5c4cc232e..5639359dd 100644 --- a/src/components/table/style.scss +++ b/src/components/table/style.scss @@ -154,10 +154,8 @@ &[open] > div.detail { max-width: 100%; overflow-y: auto; - /* css-var card-detail-padding-block? */ - padding-block: var(--smoothly-card-detail-block, 0.5rem); - /* css-var card-detail-padding-inline? */ - padding-inline: var(--smoothly-card-detail-inline, 0); + padding-block: var(--smoothly-card-detail-padding-block, 0); + padding-inline: var(--smoothly-card-detail-padding-inline, 0); } &[open] > .smoothly-expand-button::before { From 414d094193db8095693f7820f95c22e635fdea1b Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Thu, 18 Sep 2025 16:38:47 +0200 Subject: [PATCH 32/32] fix more css variables for card --- src/components/table/expandable/row/style.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/table/expandable/row/style.scss b/src/components/table/expandable/row/style.scss index 95ba07a06..e88537912 100644 --- a/src/components/table/expandable/row/style.scss +++ b/src/components/table/expandable/row/style.scss @@ -52,8 +52,7 @@ :host > .smoothly-expand-button { grid-column: 1 / -1; - /* css-var card-border-color? */ - border-top: 1px solid rgb(var(--smoothly-table-border), 0.25); + border-top: 1px solid rgb(var(--smoothly-card-border-color)); position: relative; height: 2.5rem; @@ -62,9 +61,8 @@ top: 50%; left: 50%; position: absolute; - /* css-var --smoothly-card-expand-arrow-color */ - border-left: 3px solid rgb(var(--smoothly-table-border), 0.5); - border-bottom: 3px solid rgb(var(--smoothly-table-border), 0.5); + border-left: 3px solid rgb(var(--smoothly-expand-arrow-color, var(--smoothly-default-contrast))); + border-bottom: 3px solid rgb(var(--smoothly-expand-arrow-color, var(--smoothly-default-contrast))); transform: translate(-50%, -75%) rotate(-45deg); width: 0.75rem; height: 0.75rem;