diff --git a/src/components.d.ts b/src/components.d.ts index 23bdb1910..23bbf9773 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -649,6 +649,19 @@ export namespace Components { } interface SmoothlyTableFoot { } + interface SmoothlyTableFunctional { + "columns": number; + } + interface SmoothlyTableFunctionalDemo { + } + interface SmoothlyTableFunctionalDemoNestedInner { + "data"?: { + id: number + name: string + age: number + balance: number + }[]; + } interface SmoothlyTableHead { } interface SmoothlyTableRow { @@ -657,6 +670,46 @@ export namespace Components { "align": boolean; "open": boolean; } + interface SmoothlyTableShadow { + "columns": number; + } + interface SmoothlyTableShadowBody { + } + interface SmoothlyTableShadowCell { + "span"?: number; + } + interface SmoothlyTableShadowDemo { + } + interface SmoothlyTableShadowDemoNested { + } + interface SmoothlyTableShadowDemoNestedInner { + "data"?: { + id: number + name: string + age: number + balance: number + }[]; + } + interface SmoothlyTableShadowExpandableCell { + "close": () => Promise; + "open": boolean; + "span"?: number; + } + interface SmoothlyTableShadowExpandableRow { + "open": boolean; + } + interface SmoothlyTableShadowFillerRow { + } + interface SmoothlyTableShadowFoot { + } + interface SmoothlyTableShadowHead { + } + interface SmoothlyTableShadowRow { + } + interface SmoothlyTableShadowRowGroup { + "align": boolean; + "open": boolean; + } interface SmoothlyTabs { "tabs": "always" | "multiple"; } @@ -873,6 +926,18 @@ export interface SmoothlyTableRowGroupCustomEvent extends CustomEvent { detail: T; target: HTMLSmoothlyTableRowGroupElement; } +export interface SmoothlyTableShadowExpandableCellCustomEvent extends CustomEvent { + detail: T; + target: HTMLSmoothlyTableShadowExpandableCellElement; +} +export interface SmoothlyTableShadowExpandableRowCustomEvent extends CustomEvent { + detail: T; + target: HTMLSmoothlyTableShadowExpandableRowElement; +} +export interface SmoothlyTableShadowRowGroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLSmoothlyTableShadowRowGroupElement; +} export interface SmoothlyTabsCustomEvent extends CustomEvent { detail: T; target: HTMLSmoothlyTabsElement; @@ -1942,6 +2007,24 @@ declare global { prototype: HTMLSmoothlyTableFootElement; new (): HTMLSmoothlyTableFootElement; }; + interface HTMLSmoothlyTableFunctionalElement extends Components.SmoothlyTableFunctional, HTMLStencilElement { + } + var HTMLSmoothlyTableFunctionalElement: { + prototype: HTMLSmoothlyTableFunctionalElement; + new (): HTMLSmoothlyTableFunctionalElement; + }; + interface HTMLSmoothlyTableFunctionalDemoElement extends Components.SmoothlyTableFunctionalDemo, HTMLStencilElement { + } + var HTMLSmoothlyTableFunctionalDemoElement: { + prototype: HTMLSmoothlyTableFunctionalDemoElement; + new (): HTMLSmoothlyTableFunctionalDemoElement; + }; + interface HTMLSmoothlyTableFunctionalDemoNestedInnerElement extends Components.SmoothlyTableFunctionalDemoNestedInner, HTMLStencilElement { + } + var HTMLSmoothlyTableFunctionalDemoNestedInnerElement: { + prototype: HTMLSmoothlyTableFunctionalDemoNestedInnerElement; + new (): HTMLSmoothlyTableFunctionalDemoNestedInnerElement; + }; interface HTMLSmoothlyTableHeadElement extends Components.SmoothlyTableHead, HTMLStencilElement { } var HTMLSmoothlyTableHeadElement: { @@ -1971,6 +2054,118 @@ declare global { prototype: HTMLSmoothlyTableRowGroupElement; new (): HTMLSmoothlyTableRowGroupElement; }; + interface HTMLSmoothlyTableShadowElement extends Components.SmoothlyTableShadow, HTMLStencilElement { + } + var HTMLSmoothlyTableShadowElement: { + prototype: HTMLSmoothlyTableShadowElement; + new (): HTMLSmoothlyTableShadowElement; + }; + interface HTMLSmoothlyTableShadowBodyElement extends Components.SmoothlyTableShadowBody, HTMLStencilElement { + } + var HTMLSmoothlyTableShadowBodyElement: { + prototype: HTMLSmoothlyTableShadowBodyElement; + new (): HTMLSmoothlyTableShadowBodyElement; + }; + interface HTMLSmoothlyTableShadowCellElement extends Components.SmoothlyTableShadowCell, HTMLStencilElement { + } + var HTMLSmoothlyTableShadowCellElement: { + prototype: HTMLSmoothlyTableShadowCellElement; + new (): HTMLSmoothlyTableShadowCellElement; + }; + interface HTMLSmoothlyTableShadowDemoElement extends Components.SmoothlyTableShadowDemo, HTMLStencilElement { + } + var HTMLSmoothlyTableShadowDemoElement: { + prototype: HTMLSmoothlyTableShadowDemoElement; + new (): HTMLSmoothlyTableShadowDemoElement; + }; + interface HTMLSmoothlyTableShadowDemoNestedElement extends Components.SmoothlyTableShadowDemoNested, HTMLStencilElement { + } + var HTMLSmoothlyTableShadowDemoNestedElement: { + prototype: HTMLSmoothlyTableShadowDemoNestedElement; + new (): HTMLSmoothlyTableShadowDemoNestedElement; + }; + interface HTMLSmoothlyTableShadowDemoNestedInnerElement extends Components.SmoothlyTableShadowDemoNestedInner, HTMLStencilElement { + } + var HTMLSmoothlyTableShadowDemoNestedInnerElement: { + prototype: HTMLSmoothlyTableShadowDemoNestedInnerElement; + new (): HTMLSmoothlyTableShadowDemoNestedInnerElement; + }; + interface HTMLSmoothlyTableShadowExpandableCellElementEventMap { + "smoothlyTableExpandableCellChange": boolean; + "smoothlyTableExpandableCellRegister": void; + } + interface HTMLSmoothlyTableShadowExpandableCellElement extends Components.SmoothlyTableShadowExpandableCell, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLSmoothlyTableShadowExpandableCellElement, ev: SmoothlyTableShadowExpandableCellCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLSmoothlyTableShadowExpandableCellElement, ev: SmoothlyTableShadowExpandableCellCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLSmoothlyTableShadowExpandableCellElement: { + prototype: HTMLSmoothlyTableShadowExpandableCellElement; + new (): HTMLSmoothlyTableShadowExpandableCellElement; + }; + interface HTMLSmoothlyTableShadowExpandableRowElementEventMap { + "smoothlyTableExpandableRowChange": boolean; + } + interface HTMLSmoothlyTableShadowExpandableRowElement extends Components.SmoothlyTableShadowExpandableRow, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLSmoothlyTableShadowExpandableRowElement, ev: SmoothlyTableShadowExpandableRowCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLSmoothlyTableShadowExpandableRowElement, ev: SmoothlyTableShadowExpandableRowCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLSmoothlyTableShadowExpandableRowElement: { + prototype: HTMLSmoothlyTableShadowExpandableRowElement; + new (): HTMLSmoothlyTableShadowExpandableRowElement; + }; + interface HTMLSmoothlyTableShadowFillerRowElement extends Components.SmoothlyTableShadowFillerRow, HTMLStencilElement { + } + var HTMLSmoothlyTableShadowFillerRowElement: { + prototype: HTMLSmoothlyTableShadowFillerRowElement; + new (): HTMLSmoothlyTableShadowFillerRowElement; + }; + interface HTMLSmoothlyTableShadowFootElement extends Components.SmoothlyTableShadowFoot, HTMLStencilElement { + } + var HTMLSmoothlyTableShadowFootElement: { + prototype: HTMLSmoothlyTableShadowFootElement; + new (): HTMLSmoothlyTableShadowFootElement; + }; + interface HTMLSmoothlyTableShadowHeadElement extends Components.SmoothlyTableShadowHead, HTMLStencilElement { + } + var HTMLSmoothlyTableShadowHeadElement: { + prototype: HTMLSmoothlyTableShadowHeadElement; + new (): HTMLSmoothlyTableShadowHeadElement; + }; + interface HTMLSmoothlyTableShadowRowElement extends Components.SmoothlyTableShadowRow, HTMLStencilElement { + } + var HTMLSmoothlyTableShadowRowElement: { + prototype: HTMLSmoothlyTableShadowRowElement; + new (): HTMLSmoothlyTableShadowRowElement; + }; + interface HTMLSmoothlyTableShadowRowGroupElementEventMap { + "smoothlyTableRowGroupChange": boolean; + } + interface HTMLSmoothlyTableShadowRowGroupElement extends Components.SmoothlyTableShadowRowGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLSmoothlyTableShadowRowGroupElement, ev: SmoothlyTableShadowRowGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLSmoothlyTableShadowRowGroupElement, ev: SmoothlyTableShadowRowGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLSmoothlyTableShadowRowGroupElement: { + prototype: HTMLSmoothlyTableShadowRowGroupElement; + new (): HTMLSmoothlyTableShadowRowGroupElement; + }; interface HTMLSmoothlyTabsElementEventMap { "smoothlyTabOpen": string; } @@ -2185,9 +2380,25 @@ declare global { "smoothly-table-expandable-row": HTMLSmoothlyTableExpandableRowElement; "smoothly-table-filler-row": HTMLSmoothlyTableFillerRowElement; "smoothly-table-foot": HTMLSmoothlyTableFootElement; + "smoothly-table-functional": HTMLSmoothlyTableFunctionalElement; + "smoothly-table-functional-demo": HTMLSmoothlyTableFunctionalDemoElement; + "smoothly-table-functional-demo-nested-inner": HTMLSmoothlyTableFunctionalDemoNestedInnerElement; "smoothly-table-head": HTMLSmoothlyTableHeadElement; "smoothly-table-row": HTMLSmoothlyTableRowElement; "smoothly-table-row-group": HTMLSmoothlyTableRowGroupElement; + "smoothly-table-shadow": HTMLSmoothlyTableShadowElement; + "smoothly-table-shadow-body": HTMLSmoothlyTableShadowBodyElement; + "smoothly-table-shadow-cell": HTMLSmoothlyTableShadowCellElement; + "smoothly-table-shadow-demo": HTMLSmoothlyTableShadowDemoElement; + "smoothly-table-shadow-demo-nested": HTMLSmoothlyTableShadowDemoNestedElement; + "smoothly-table-shadow-demo-nested-inner": HTMLSmoothlyTableShadowDemoNestedInnerElement; + "smoothly-table-shadow-expandable-cell": HTMLSmoothlyTableShadowExpandableCellElement; + "smoothly-table-shadow-expandable-row": HTMLSmoothlyTableShadowExpandableRowElement; + "smoothly-table-shadow-filler-row": HTMLSmoothlyTableShadowFillerRowElement; + "smoothly-table-shadow-foot": HTMLSmoothlyTableShadowFootElement; + "smoothly-table-shadow-head": HTMLSmoothlyTableShadowHeadElement; + "smoothly-table-shadow-row": HTMLSmoothlyTableShadowRowElement; + "smoothly-table-shadow-row-group": HTMLSmoothlyTableShadowRowGroupElement; "smoothly-tabs": HTMLSmoothlyTabsElement; "smoothly-tabs-demo": HTMLSmoothlyTabsDemoElement; "smoothly-theme-color": HTMLSmoothlyThemeColorElement; @@ -2813,6 +3024,19 @@ declare namespace LocalJSX { } interface SmoothlyTableFoot { } + interface SmoothlyTableFunctional { + "columns"?: number; + } + interface SmoothlyTableFunctionalDemo { + } + interface SmoothlyTableFunctionalDemoNestedInner { + "data"?: { + id: number + name: string + age: number + balance: number + }[]; + } interface SmoothlyTableHead { } interface SmoothlyTableRow { @@ -2822,6 +3046,49 @@ declare namespace LocalJSX { "onSmoothlyTableRowGroupChange"?: (event: SmoothlyTableRowGroupCustomEvent) => void; "open"?: boolean; } + interface SmoothlyTableShadow { + "columns"?: number; + } + interface SmoothlyTableShadowBody { + } + interface SmoothlyTableShadowCell { + "span"?: number; + } + interface SmoothlyTableShadowDemo { + } + interface SmoothlyTableShadowDemoNested { + } + interface SmoothlyTableShadowDemoNestedInner { + "data"?: { + id: number + name: string + age: number + balance: number + }[]; + } + interface SmoothlyTableShadowExpandableCell { + "onSmoothlyTableExpandableCellChange"?: (event: SmoothlyTableShadowExpandableCellCustomEvent) => void; + "onSmoothlyTableExpandableCellRegister"?: (event: SmoothlyTableShadowExpandableCellCustomEvent) => void; + "open"?: boolean; + "span"?: number; + } + interface SmoothlyTableShadowExpandableRow { + "onSmoothlyTableExpandableRowChange"?: (event: SmoothlyTableShadowExpandableRowCustomEvent) => void; + "open"?: boolean; + } + interface SmoothlyTableShadowFillerRow { + } + interface SmoothlyTableShadowFoot { + } + interface SmoothlyTableShadowHead { + } + interface SmoothlyTableShadowRow { + } + interface SmoothlyTableShadowRowGroup { + "align"?: boolean; + "onSmoothlyTableRowGroupChange"?: (event: SmoothlyTableShadowRowGroupCustomEvent) => void; + "open"?: boolean; + } interface SmoothlyTabs { "onSmoothlyTabOpen"?: (event: SmoothlyTabsCustomEvent) => void; "tabs"?: "always" | "multiple"; @@ -2965,9 +3232,25 @@ declare namespace LocalJSX { "smoothly-table-expandable-row": SmoothlyTableExpandableRow; "smoothly-table-filler-row": SmoothlyTableFillerRow; "smoothly-table-foot": SmoothlyTableFoot; + "smoothly-table-functional": SmoothlyTableFunctional; + "smoothly-table-functional-demo": SmoothlyTableFunctionalDemo; + "smoothly-table-functional-demo-nested-inner": SmoothlyTableFunctionalDemoNestedInner; "smoothly-table-head": SmoothlyTableHead; "smoothly-table-row": SmoothlyTableRow; "smoothly-table-row-group": SmoothlyTableRowGroup; + "smoothly-table-shadow": SmoothlyTableShadow; + "smoothly-table-shadow-body": SmoothlyTableShadowBody; + "smoothly-table-shadow-cell": SmoothlyTableShadowCell; + "smoothly-table-shadow-demo": SmoothlyTableShadowDemo; + "smoothly-table-shadow-demo-nested": SmoothlyTableShadowDemoNested; + "smoothly-table-shadow-demo-nested-inner": SmoothlyTableShadowDemoNestedInner; + "smoothly-table-shadow-expandable-cell": SmoothlyTableShadowExpandableCell; + "smoothly-table-shadow-expandable-row": SmoothlyTableShadowExpandableRow; + "smoothly-table-shadow-filler-row": SmoothlyTableShadowFillerRow; + "smoothly-table-shadow-foot": SmoothlyTableShadowFoot; + "smoothly-table-shadow-head": SmoothlyTableShadowHead; + "smoothly-table-shadow-row": SmoothlyTableShadowRow; + "smoothly-table-shadow-row-group": SmoothlyTableShadowRowGroup; "smoothly-tabs": SmoothlyTabs; "smoothly-tabs-demo": SmoothlyTabsDemo; "smoothly-theme-color": SmoothlyThemeColor; @@ -3077,9 +3360,25 @@ declare module "@stencil/core" { "smoothly-table-expandable-row": LocalJSX.SmoothlyTableExpandableRow & JSXBase.HTMLAttributes; "smoothly-table-filler-row": LocalJSX.SmoothlyTableFillerRow & JSXBase.HTMLAttributes; "smoothly-table-foot": LocalJSX.SmoothlyTableFoot & JSXBase.HTMLAttributes; + "smoothly-table-functional": LocalJSX.SmoothlyTableFunctional & JSXBase.HTMLAttributes; + "smoothly-table-functional-demo": LocalJSX.SmoothlyTableFunctionalDemo & JSXBase.HTMLAttributes; + "smoothly-table-functional-demo-nested-inner": LocalJSX.SmoothlyTableFunctionalDemoNestedInner & JSXBase.HTMLAttributes; "smoothly-table-head": LocalJSX.SmoothlyTableHead & JSXBase.HTMLAttributes; "smoothly-table-row": LocalJSX.SmoothlyTableRow & JSXBase.HTMLAttributes; "smoothly-table-row-group": LocalJSX.SmoothlyTableRowGroup & JSXBase.HTMLAttributes; + "smoothly-table-shadow": LocalJSX.SmoothlyTableShadow & JSXBase.HTMLAttributes; + "smoothly-table-shadow-body": LocalJSX.SmoothlyTableShadowBody & JSXBase.HTMLAttributes; + "smoothly-table-shadow-cell": LocalJSX.SmoothlyTableShadowCell & JSXBase.HTMLAttributes; + "smoothly-table-shadow-demo": LocalJSX.SmoothlyTableShadowDemo & JSXBase.HTMLAttributes; + "smoothly-table-shadow-demo-nested": LocalJSX.SmoothlyTableShadowDemoNested & JSXBase.HTMLAttributes; + "smoothly-table-shadow-demo-nested-inner": LocalJSX.SmoothlyTableShadowDemoNestedInner & JSXBase.HTMLAttributes; + "smoothly-table-shadow-expandable-cell": LocalJSX.SmoothlyTableShadowExpandableCell & JSXBase.HTMLAttributes; + "smoothly-table-shadow-expandable-row": LocalJSX.SmoothlyTableShadowExpandableRow & JSXBase.HTMLAttributes; + "smoothly-table-shadow-filler-row": LocalJSX.SmoothlyTableShadowFillerRow & JSXBase.HTMLAttributes; + "smoothly-table-shadow-foot": LocalJSX.SmoothlyTableShadowFoot & JSXBase.HTMLAttributes; + "smoothly-table-shadow-head": LocalJSX.SmoothlyTableShadowHead & JSXBase.HTMLAttributes; + "smoothly-table-shadow-row": LocalJSX.SmoothlyTableShadowRow & JSXBase.HTMLAttributes; + "smoothly-table-shadow-row-group": LocalJSX.SmoothlyTableShadowRowGroup & JSXBase.HTMLAttributes; "smoothly-tabs": LocalJSX.SmoothlyTabs & JSXBase.HTMLAttributes; "smoothly-tabs-demo": LocalJSX.SmoothlyTabsDemo & JSXBase.HTMLAttributes; "smoothly-theme-color": LocalJSX.SmoothlyThemeColor & JSXBase.HTMLAttributes; diff --git a/src/components/app/demo/index.tsx b/src/components/app/demo/index.tsx index 6f23c74fb..514a87f96 100644 --- a/src/components/app/demo/index.tsx +++ b/src/components/app/demo/index.tsx @@ -28,6 +28,7 @@ export class SmoothlyAppDemo { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/components/table-functional/cell/smoothlyTableCell.tsx b/src/components/table-functional/cell/smoothlyTableCell.tsx new file mode 100644 index 000000000..de75f2e48 --- /dev/null +++ b/src/components/table-functional/cell/smoothlyTableCell.tsx @@ -0,0 +1,13 @@ +import { FunctionalComponent, h } from "@stencil/core" + +interface SmoothlyTableFunctionalProps { + title?: string +} + +export const SmoothlyTableFunctionalCell: FunctionalComponent = ({ title }, children) => { + return ( +
+ {children} +
+ ) +} diff --git a/src/components/table-functional/demo/data.ts b/src/components/table-functional/demo/data.ts new file mode 100644 index 000000000..06f5932e2 --- /dev/null +++ b/src/components/table-functional/demo/data.ts @@ -0,0 +1,932 @@ +export const data = [ + { + id: "667d329f9f4934ecdc4bf9eb", + balance: 1450.03, + age: 35, + eyeColor: "blue", + name: "Glenda Ballard", + gender: "female", + company: "ZENTIA", + registered: "2022-06-13T12:39:15.908", + friends: [ + { + id: 0, + name: "Manning Hunter", + age: 30, + balance: 1922.25, + }, + { + id: 1, + name: "Mcmillan Oliver", + age: 32, + balance: 2440.53, + }, + { + id: 2, + name: "Graham Garza", + age: 33, + balance: 3712.59, + }, + { + id: 3, + name: "Gabrielle Neal", + age: 36, + balance: 2519.25, + }, + { + id: 4, + name: "Dotson Duncan", + age: 29, + balance: 3274.11, + }, + ], + }, + { + id: "667d329f4e07097167ef92a2", + balance: 2488.91, + age: 21, + eyeColor: "blue", + name: "Delaney Haley", + gender: "male", + company: "COMTOURS", + registered: "2018-05-11T08:58:36.197", + friends: [ + { + id: 0, + name: "Elsa Cochran", + age: 28, + balance: 2009.45, + }, + { + id: 1, + name: "Willis Acevedo", + age: 33, + balance: 2198.01, + }, + { + id: 2, + name: "Slater Fowler", + age: 34, + balance: 2888.16, + }, + { + id: 3, + name: "Ashley Wilkerson", + age: 22, + balance: 1863.65, + }, + { + id: 4, + name: "Ola Lynch", + age: 23, + balance: 3649.29, + }, + ], + }, + { + id: "667d329f14a0aeea0d70d5e7", + balance: 1660.91, + age: 36, + eyeColor: "brown", + name: "Riddle Reilly", + gender: "male", + company: "OPTIQUE", + registered: "2016-09-15T09:46:07.962", + friends: [ + { + id: 0, + name: "Hazel Steele", + age: 33, + balance: 3129.64, + }, + { + id: 1, + name: "Golden Chapman", + age: 40, + balance: 2491, + }, + { + id: 2, + name: "Solomon Lopez", + age: 26, + balance: 1382.71, + }, + { + id: 3, + name: "Castro Booth", + age: 23, + balance: 1991.6, + }, + { + id: 4, + name: "Hernandez Bartlett", + age: 25, + balance: 2842.85, + }, + { + id: 5, + name: "Lindsay Wagner", + age: 20, + balance: 3636.6, + }, + ], + }, + { + id: "667d329f953aaaba19bea98b", + balance: 1381.34, + age: 24, + eyeColor: "brown", + name: "Diana Burns", + gender: "female", + company: "CODACT", + registered: "2023-06-02T09:07:46.478", + friends: [ + { + id: 0, + name: "Tamika Merritt", + age: 25, + balance: 2401.06, + }, + { + id: 1, + name: "Ballard Buckner", + age: 36, + balance: 1986.13, + }, + { + id: 2, + name: "Stokes Ramirez", + age: 25, + balance: 3521.75, + }, + { + id: 3, + name: "Wood Aguirre", + age: 36, + balance: 1186.13, + }, + { + id: 4, + name: "Sophia Bowen", + age: 25, + balance: 2750.95, + }, + { + id: 5, + name: "Wilkinson Gordon", + age: 34, + balance: 3864.91, + }, + ], + }, + { + id: "667d329f6a753976e21e23b5", + balance: 3054.74, + age: 22, + eyeColor: "brown", + name: "Jackson Burnett", + gender: "male", + company: "COMCUR", + registered: "2019-06-05T09:17:31.312", + friends: [ + { + id: 0, + name: "Atkinson Alston", + age: 37, + balance: 1025.72, + }, + { + id: 1, + name: "Delia Ford", + age: 34, + balance: 3061.87, + }, + { + id: 2, + name: "Marylou Hanson", + age: 33, + balance: 3255.77, + }, + { + id: 3, + name: "Kelly Ray", + age: 32, + balance: 3671.73, + }, + { + id: 4, + name: "Valdez Weeks", + age: 38, + balance: 3911.29, + }, + { + id: 5, + name: "Hayes Crawford", + age: 20, + balance: 3194.97, + }, + ], + }, + { + id: "667d329fc4805cafac37861e", + balance: 1173.94, + age: 20, + eyeColor: "green", + name: "Stephenson Mcleod", + gender: "male", + company: "POLARAX", + registered: "2015-12-10T07:36:10.267", + friends: [ + { + id: 0, + name: "Kristine Newton", + age: 26, + balance: 2713.9, + }, + { + id: 1, + name: "Craft Patel", + age: 40, + balance: 3822.36, + }, + { + id: 2, + name: "Cochran French", + age: 30, + balance: 1535.91, + }, + { + id: 3, + name: "Bowen Vinson", + age: 29, + balance: 2787.01, + }, + { + id: 4, + name: "Adrian Ewing", + age: 21, + balance: 2319.14, + }, + { + id: 5, + name: "Jimmie Mathews", + age: 31, + balance: 2869.09, + }, + { + id: 6, + name: "Dixon Daugherty", + age: 24, + balance: 1496.25, + }, + ], + }, + { + id: "667d329f76318162fe27b208", + balance: 2977.01, + age: 24, + eyeColor: "blue", + name: "Claudette Christensen", + gender: "female", + company: "PIVITOL", + registered: "2021-08-08T07:08:00.936", + friends: [ + { + id: 0, + name: "Parker Lamb", + age: 36, + balance: 3409.27, + }, + { + id: 1, + name: "Kennedy Bryan", + age: 34, + balance: 3904.27, + }, + { + id: 2, + name: "Johanna Barton", + age: 20, + balance: 3613.79, + }, + { + id: 3, + name: "Vazquez Melendez", + age: 26, + balance: 3692.31, + }, + { + id: 4, + name: "Mendoza Wooten", + age: 31, + balance: 2175.64, + }, + { + id: 5, + name: "Kelli Hicks", + age: 21, + balance: 1326.46, + }, + { + id: 6, + name: "Jill Sanchez", + age: 36, + balance: 3214.36, + }, + ], + }, + { + id: "667d329ff80a953b7f0a73d2", + balance: 1993.09, + age: 20, + eyeColor: "green", + name: "Buckley Gutierrez", + gender: "male", + company: "HOUSEDOWN", + registered: "2015-04-02T04:53:42.985", + friends: [ + { + id: 0, + name: "Leanne Pennington", + age: 37, + balance: 3111.48, + }, + { + id: 1, + name: "Juarez Hoover", + age: 29, + balance: 2000.62, + }, + { + id: 2, + name: "Navarro Mccormick", + age: 22, + balance: 3083.93, + }, + { + id: 3, + name: "Berry Curry", + age: 31, + balance: 3181.41, + }, + { + id: 4, + name: "Josefa Howard", + age: 30, + balance: 3744.56, + }, + ], + }, + { + id: "667d329f4f53eb59f0512361", + balance: 2374.56, + age: 34, + eyeColor: "brown", + name: "Sallie Mccoy", + gender: "female", + company: "REALYSIS", + registered: "2018-05-11T05:26:36.604", + friends: [ + { + id: 0, + name: "Martina Kirby", + age: 22, + balance: 1278.07, + }, + { + id: 1, + name: "Macias Lyons", + age: 20, + balance: 2991.44, + }, + { + id: 2, + name: "Alta Chaney", + age: 26, + balance: 1032.71, + }, + { + id: 3, + name: "White Manning", + age: 39, + balance: 3103.16, + }, + { + id: 4, + name: "Mason Rosa", + age: 31, + balance: 1384.77, + }, + { + id: 5, + name: "Meghan Martin", + age: 27, + balance: 1982.09, + }, + ], + }, + { + id: "667d329f8a6cf9319bfdbd30", + balance: 3220.94, + age: 23, + eyeColor: "blue", + name: "Huff Hull", + gender: "male", + company: "GADTRON", + registered: "2023-02-14T01:58:56.938", + friends: [ + { + id: 0, + name: "Rochelle Maldonado", + age: 28, + balance: 1548.77, + }, + { + id: 1, + name: "Diann Conrad", + age: 32, + balance: 1721.33, + }, + { + id: 2, + name: "Hope Jarvis", + age: 38, + balance: 1265.24, + }, + { + id: 3, + name: "Dixie Huffman", + age: 31, + balance: 3764.23, + }, + { + id: 4, + name: "Erickson Porter", + age: 27, + balance: 2958.59, + }, + { + id: 5, + name: "Christensen Thomas", + age: 21, + balance: 1233.2, + }, + ], + }, + { + id: "667d329f1415ecb1efb216cc", + balance: 2907.83, + age: 26, + eyeColor: "brown", + name: "Hancock Eaton", + gender: "male", + company: "POLARIUM", + registered: "2018-02-25T01:03:11.860", + friends: [ + { + id: 0, + name: "Flynn Gilmore", + age: 27, + balance: 2582.57, + }, + { + id: 1, + name: "Kline Hickman", + age: 31, + balance: 3853.99, + }, + { + id: 2, + name: "Hatfield Owens", + age: 40, + balance: 2016.57, + }, + { + id: 3, + name: "Michael Carson", + age: 31, + balance: 1293.03, + }, + { + id: 4, + name: "Strickland Lowery", + age: 23, + balance: 1367.06, + }, + { + id: 5, + name: "Georgia Chavez", + age: 37, + balance: 2957.48, + }, + { + id: 6, + name: "Alma Berry", + age: 26, + balance: 2357.01, + }, + ], + }, + { + id: "667d329f722eb89c82b56dec", + balance: 1602.02, + age: 35, + eyeColor: "brown", + name: "Lorrie Mcpherson", + gender: "female", + company: "PYRAMIA", + registered: "2018-12-07T05:18:34.223", + friends: [ + { + id: 0, + name: "Bridgett Everett", + age: 37, + balance: 1438.53, + }, + { + id: 1, + name: "Carlene Farley", + age: 25, + balance: 1410.54, + }, + { + id: 2, + name: "Phoebe Mendez", + age: 24, + balance: 1979.36, + }, + { + id: 3, + name: "Louella Cox", + age: 36, + balance: 3430.55, + }, + { + id: 4, + name: "Velez Pugh", + age: 30, + balance: 3436.5, + }, + ], + }, + { + id: "667d329ff853efe8c4e0a454", + balance: 2654.19, + age: 36, + eyeColor: "brown", + name: "Luann Jennings", + gender: "female", + company: "NAXDIS", + registered: "2014-02-18T04:25:50.302", + friends: [ + { + id: 0, + name: "Walton Gentry", + age: 26, + balance: 1328.43, + }, + { + id: 1, + name: "Lucy Koch", + age: 23, + balance: 2134.54, + }, + { + id: 2, + name: "Toni Meyers", + age: 31, + balance: 2572.29, + }, + { + id: 3, + name: "Vicki Frost", + age: 39, + balance: 3299.36, + }, + { + id: 4, + name: "Meadows Baker", + age: 21, + balance: 2323.75, + }, + ], + }, + { + id: "667d329f84f3bfbfcc763674", + balance: 2528.48, + age: 28, + eyeColor: "brown", + name: "Michelle Carey", + gender: "female", + company: "IDEGO", + registered: "2016-10-01T04:25:07.187", + friends: [ + { + id: 0, + name: "Roman Sanders", + age: 40, + balance: 3551.16, + }, + { + id: 1, + name: "Amanda Herman", + age: 22, + balance: 3928.02, + }, + { + id: 2, + name: "Kay Montgomery", + age: 26, + balance: 3241.16, + }, + { + id: 3, + name: "Valentine Wilder", + age: 23, + balance: 1413.31, + }, + { + id: 4, + name: "Brigitte Nixon", + age: 32, + balance: 3113.39, + }, + ], + }, + { + id: "667d329f4359ec766055a765", + balance: 3732.65, + age: 30, + eyeColor: "brown", + name: "Beach Maddox", + gender: "male", + company: "GEEKETRON", + registered: "2021-03-24T11:55:31.135", + friends: [ + { + id: 0, + name: "Candy Gibbs", + age: 20, + balance: 2602.28, + }, + { + id: 1, + name: "Alissa Rosario", + age: 36, + balance: 1958.84, + }, + { + id: 2, + name: "Imelda Harmon", + age: 23, + balance: 3817.79, + }, + { + id: 3, + name: "Addie Serrano", + age: 35, + balance: 3154.77, + }, + { + id: 4, + name: "Jordan Shields", + age: 26, + balance: 3566.08, + }, + ], + }, + { + id: "667d329f9ef3817d307e2583", + balance: 2151.52, + age: 32, + eyeColor: "brown", + name: "Whitney Hood", + gender: "male", + company: "EVENTAGE", + registered: "2021-06-17T12:11:56.473", + friends: [ + { + id: 0, + name: "Noel Walsh", + age: 29, + balance: 2790.49, + }, + { + id: 1, + name: "Barlow Rodriquez", + age: 35, + balance: 1664.23, + }, + { + id: 2, + name: "Nash Keith", + age: 23, + balance: 2285.17, + }, + { + id: 3, + name: "Chavez Webster", + age: 23, + balance: 3381.55, + }, + { + id: 4, + name: "Herminia Chen", + age: 24, + balance: 1064.96, + }, + { + id: 5, + name: "Susana Glass", + age: 22, + balance: 2749.35, + }, + ], + }, + { + id: "667d329f9bd581700cac2dbc", + balance: 2209.77, + age: 40, + eyeColor: "blue", + name: "Tasha Mosley", + gender: "female", + company: "QUIZKA", + registered: "2014-05-11T11:44:55.071", + friends: [ + { + id: 0, + name: "Larsen Wall", + age: 22, + balance: 1523.28, + }, + { + id: 1, + name: "Holmes Hopkins", + age: 35, + balance: 1112.68, + }, + { + id: 2, + name: "Giles Espinoza", + age: 21, + balance: 2550.95, + }, + { + id: 3, + name: "Aimee Rosales", + age: 26, + balance: 2195.06, + }, + { + id: 4, + name: "Karin Little", + age: 28, + balance: 2896.23, + }, + { + id: 5, + name: "Angelita Mcfadden", + age: 25, + balance: 1051.15, + }, + ], + }, + { + id: "667d329f6e2dbb2002be4b9e", + balance: 3298.23, + age: 31, + eyeColor: "brown", + name: "Schneider Walker", + gender: "male", + company: "BLEENDOT", + registered: "2020-02-11T08:57:29.025", + friends: [ + { + id: 0, + name: "Helena William", + age: 34, + balance: 2579.69, + }, + { + id: 1, + name: "Silva Ware", + age: 30, + balance: 2683.79, + }, + { + id: 2, + name: "Enid Oconnor", + age: 22, + balance: 1816.46, + }, + { + id: 3, + name: "Knowles Goff", + age: 24, + balance: 1675.75, + }, + { + id: 4, + name: "Carolina Greer", + age: 29, + balance: 3337.27, + }, + ], + }, + { + id: "667d329f8c548510c5d4f5ce", + balance: 2823.51, + age: 35, + eyeColor: "green", + name: "Mayo Shepard", + gender: "male", + company: "KIOSK", + registered: "2024-02-24T12:45:57.463", + friends: [ + { + id: 0, + name: "Olga Hester", + age: 21, + balance: 3878.21, + }, + { + id: 1, + name: "Rogers Sampson", + age: 23, + balance: 2669.62, + }, + { + id: 2, + name: "Myra Johnson", + age: 27, + balance: 3489.32, + }, + { + id: 3, + name: "Mcfadden Phillips", + age: 20, + balance: 2758.8, + }, + { + id: 4, + name: "Park Moody", + age: 23, + balance: 3519.08, + }, + ], + }, + { + id: "667d329f6574ada6f090fd54", + balance: 2631.69, + age: 40, + eyeColor: "blue", + name: "Avis Carlson", + gender: "female", + company: "LINGOAGE", + registered: "2016-08-08T08:59:54.752", + friends: [ + { + id: 0, + name: "Mcdonald Dyer", + age: 25, + balance: 2262.39, + }, + { + id: 1, + name: "Irene Baldwin", + age: 29, + balance: 1291.1, + }, + { + id: 2, + name: "Rollins Anderson", + age: 26, + balance: 1437.04, + }, + { + id: 3, + name: "Juliana Larson", + age: 29, + balance: 3492.22, + }, + { + id: 4, + name: "Michele Gardner", + age: 20, + balance: 2003.15, + }, + { + id: 5, + name: "Vang Cardenas", + age: 31, + balance: 1855.52, + }, + { + id: 6, + name: "Puckett Hubbard", + age: 21, + balance: 1659.92, + }, + ], + }, +] diff --git a/src/components/table-functional/demo/index.tsx b/src/components/table-functional/demo/index.tsx new file mode 100644 index 000000000..23c682bca --- /dev/null +++ b/src/components/table-functional/demo/index.tsx @@ -0,0 +1,53 @@ +import { Component, h, Host, VNode } from "@stencil/core" +import { SmoothlyTableFunctionalCell } from "../cell/smoothlyTableCell" +import { SmoothlyTableFunctionalExpandableRow } from "../expandable/row/smoothlyTableExpandableRow" +import { SmoothlyTableFunctionalRow } from "../row/smoothlyTableRow" +import { data } from "./data" + +@Component({ + tag: "smoothly-table-functional-demo", + scoped: true, +}) +export class SmoothlyTableFunctionalDemo { + render(): VNode | VNode[] { + return ( + + + + Id + Registered + Name + Age + Balance + Eye color + Gender + Company + + {Array.from({ length: Math.floor(20 / data.length) }).flatMap(() => + data.map(entry => ( + + {entry.id} + {entry.registered} + {entry.name} + {entry.age} + {entry.balance} + {entry.eyeColor} + {entry.gender} + {entry.company} + + + )) + )} + + + Id + + + This is an id + + + + + ) + } +} diff --git a/src/components/table-functional/demo/inner/index.tsx b/src/components/table-functional/demo/inner/index.tsx new file mode 100644 index 000000000..77b2af64d --- /dev/null +++ b/src/components/table-functional/demo/inner/index.tsx @@ -0,0 +1,40 @@ +import { Component, h, Host, Prop, VNode } from "@stencil/core" +import { SmoothlyTableFunctionalCell } from "../../cell/smoothlyTableCell" +import { SmoothlyTableFunctionalExpandableRow } from "../../expandable/row/smoothlyTableExpandableRow" +import { SmoothlyTableFunctionalRow } from "../../row/smoothlyTableRow" + +@Component({ + tag: "smoothly-table-functional-demo-nested-inner", + styleUrl: "style.css", + scoped: true, +}) +export class SmoothlyTableDemoNestedInner { + @Prop() data?: { + id: number + name: string + age: number + balance: number + }[] + render(): VNode | VNode[] { + return ( + + + + Id + Name + Age + Balance + + {this.data?.map(entry => ( + + {entry.id} + {entry.name} + {entry.age} + {entry.balance} + + ))} + + + ) + } +} diff --git a/src/components/table-functional/demo/inner/style.css b/src/components/table-functional/demo/inner/style.css new file mode 100644 index 000000000..a2ff0df2a --- /dev/null +++ b/src/components/table-functional/demo/inner/style.css @@ -0,0 +1,5 @@ +:host { + display: block; + margin: 1em auto; + width: 60%; +} diff --git a/src/components/table-functional/expandable/cell/smoothlyTableExpandableCell.tsx b/src/components/table-functional/expandable/cell/smoothlyTableExpandableCell.tsx new file mode 100644 index 000000000..467fe7032 --- /dev/null +++ b/src/components/table-functional/expandable/cell/smoothlyTableExpandableCell.tsx @@ -0,0 +1,36 @@ +import { FunctionalComponent, h } from "@stencil/core" + +interface SmoothlyTableFunctionalExpandableProps { + title?: string + onSmoothlyTableFunctionalExpandableCellOpen?: (event: CustomEvent) => void +} + +export const SmoothlyTableFunctionalExpandableCell: FunctionalComponent = ( + { title, onSmoothlyTableFunctionalExpandableCellOpen }, + children +) => { + let detailElement: HTMLElement | undefined + + const toggleOpen = (e: MouseEvent) => { + if (e.composedPath().every(el => el != detailElement)) { + const isOpen = !!detailElement?.classList.contains("smoothly-open") + detailElement?.classList.toggle("smoothly-open") + + const newEvent = new CustomEvent("smoothlyRowOpen", { + detail: isOpen, + bubbles: true, + composed: true, + }) + e.target?.dispatchEvent(newEvent) + onSmoothlyTableFunctionalExpandableCellOpen?.(newEvent) + } + } + return ( +
toggleOpen(e)}> + {children.slice(0, children.length - 1)} +
(detailElement = el)}> + {children.at(-1)} {/* assumes last element is details since functional components cant have slots */} +
+
+ ) +} diff --git a/src/components/table-functional/expandable/row/smoothlyTableExpandableRow.tsx b/src/components/table-functional/expandable/row/smoothlyTableExpandableRow.tsx new file mode 100644 index 000000000..920b0ea89 --- /dev/null +++ b/src/components/table-functional/expandable/row/smoothlyTableExpandableRow.tsx @@ -0,0 +1,36 @@ +import { FunctionalComponent, h, VNode } from "@stencil/core" + +interface SmoothlyTableProps { + onSmoothlyTableFunctionalExpandableRowOpen?: (event: CustomEvent) => void +} + +export const SmoothlyTableFunctionalExpandableRow: FunctionalComponent = ( + { onSmoothlyTableFunctionalExpandableRowOpen }, + children: VNode[] +) => { + let detailElement: HTMLElement | undefined + + const toggleOpen = (e: MouseEvent) => { + if (e.composedPath().every(el => el != detailElement)) { + const isOpen = !!detailElement?.classList.contains("smoothly-open") + detailElement?.classList.toggle("smoothly-open") + + const newEvent = new CustomEvent("smoothlyRowOpen", { + detail: isOpen, + bubbles: true, + composed: true, + }) + e.target?.dispatchEvent(newEvent) + onSmoothlyTableFunctionalExpandableRowOpen?.(newEvent) + } + } + + return ( +
toggleOpen(e)}> + {children.slice(0, children.length - 1)} +
(detailElement = el)}> + {children.at(-1)} {/* assumes last element is details since functional components cant have slots */} +
+
+ ) +} diff --git a/src/components/table-functional/index.tsx b/src/components/table-functional/index.tsx new file mode 100644 index 000000000..98de3f10e --- /dev/null +++ b/src/components/table-functional/index.tsx @@ -0,0 +1,14 @@ +import { Component, h, Host, Prop } from "@stencil/core" + +@Component({ tag: "smoothly-table-functional", styleUrl: "style.css", scoped: true }) +export class SmoothlyTableFunctional { + @Prop() columns = 1 + + render() { + return ( + + + + ) + } +} diff --git a/src/components/table-functional/row/smoothlyTableRow.tsx b/src/components/table-functional/row/smoothlyTableRow.tsx new file mode 100644 index 000000000..6745a6e16 --- /dev/null +++ b/src/components/table-functional/row/smoothlyTableRow.tsx @@ -0,0 +1,4 @@ +import { FunctionalComponent, h } from "@stencil/core" +export const SmoothlyTableFunctionalRow: FunctionalComponent = (props, children) => { + return
{children}
+} diff --git a/src/components/table-functional/style.css b/src/components/table-functional/style.css new file mode 100644 index 000000000..a6aaecf8d --- /dev/null +++ b/src/components/table-functional/style.css @@ -0,0 +1,97 @@ +: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)); + box-sizing: border-box; + max-width: 80rem; + width: 100%; + margin: auto; + padding: 2rem; +} + +:host .smoothly-table-functional-row { + grid-column: 1 / -1; + display: grid; + grid-template-columns: subgrid; + box-sizing: border-box; + border-bottom: 1px solid rgb(var(--smoothly-table-foreground)) + /* border-style: solid; + border-color: rgb(var(--smoothly-table-foreground)) transparent transparent transparent; + border-width: 1px 1px 0 1px; */ +} +:host .smoothly-table-functional-row:has(.smoothly-table-functional-row-detail.smoothly-open) { + background-color: rgb(var(--smoothly-table-expanded-background)); + border-color: rgb(var(--smoothly-table-foreground)); +} +:host .smoothly-table-functional-row:has(>:not(.smoothly-table-functional-row-detail):hover)>:not(.smoothly-table-functional-row-detail) { + background-color: rgb(var(--smoothly-table-hover-background)); +} + +:host .smoothly-table-functional-row .smoothly-table-functional-cell { + display: flex; + align-items: center; + padding: 0.3rem 1.1rem; + white-space: nowrap; + cursor: pointer; +} + +:host .smoothly-table-functional-row .smoothly-table-functional-row-detail { + background-color: rgb(var(--smoothly-table-expanded-background)); + grid-column: 1 / -1; + display: none; + grid-template-rows: auto 0fr 0fr; + position: relative; +} + +:host .smoothly-table-functional-row .smoothly-table-functional-row-detail.smoothly-open { + display: block; + grid-template-rows: auto 1fr 0fr; +} + +:host .smoothly-table-functional-row.smoothly-open { + border: solid 1px rgb(var(--smoothly-table-foreground)), transparent, transparent,solid 1px rgb(var(--smoothly-table-foreground)); +} + +:host .smoothly-open { + background-color: pink; +} + +:host .smoothly-table-functional-row-detail.smoothly-open::before { + content: ""; + position: absolute; + display: flex; + box-sizing: border-box; + top: 0; + bottom: -1px; + 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))); + border-top: solid 1px rgb(var(--smoothly-table-foreground)); + border-bottom: solid 1px rgb(var(--smoothly-table-foreground)); + + /* border-color: rgb(var(--smoothly-table-foreground)); + border-width: 1px 0 1px 1px; + 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)); +} +:host .smoothly-table-functional-row-detail.smoothly-open::after { + content: ""; + position: absolute; + display: flex; + top: 0; + bottom: -1px; + right: -1em; + width: 1em; + background-color: rgb(var(--smoothly-table-expanded-background)); + border-style: solid; + border-color: rgb(var(--smoothly-table-foreground)); + border-width: 1px 1px 1px 0; +} + + + + diff --git a/src/components/table/demo/index.tsx b/src/components/table/demo/index.tsx index 2c7e3dc33..a99ad0817 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 ( - - - + {/* */} + {/* */} + {/* */} - + {/* */} ) }