@fluid-topics/ft-filterable-table 0.1.2 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/build/ft-filterable-table.d.ts +10 -7
  2. package/build/ft-filterable-table.js +24 -25
  3. package/build/ft-filterable-table.min.js +500 -101
  4. package/package.json +6 -6
package/build/ft-filterable-table.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { PropertyValues, TemplateResult } from "lit";
2
- import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
2
+ import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
3
3
  export declare type Getter<T> = (o: T) => any;
4
4
  export interface ColumnConfiguration<T> {
5
5
  title: string | TemplateResult;
@@ -27,12 +27,15 @@ export interface FtFilterableTableProperties<T extends Record<string, any>> {
27
27
  columns: Array<ColumnConfiguration<T>>;
28
28
  sort?: Sort;
29
29
  }
30
- export interface FtFilterableTableCssVariables {
31
- "--ft-filterable-table-header-background": string;
32
- "--ft-filterable-table-odd-row-background": string;
33
- "--ft-filterable-table-even-row-background": string;
34
- "--ft-filterable-table-row-hover-background": string;
35
- }
30
+ export declare const FtFilterableTableCssVariables: {
31
+ headerBackground: FtCssVariable;
32
+ oddRowBackground: FtCssVariable;
33
+ evenRowBackground: FtCssVariable;
34
+ rowHoverBackground: FtCssVariable;
35
+ colorOnSurfaceHigh: FtCssVariable;
36
+ titleFont: FtCssVariable;
37
+ contentFont: FtCssVariable;
38
+ };
36
39
  export declare class FtFilterableTable<T extends Record<string, any>> extends FtLitElement implements FtFilterableTableProperties<T> {
37
40
  static elementDefinitions: ElementDefinitionsMap;
38
41
  data: Array<T>;
package/build/ft-filterable-table.js CHANGED
@@ -8,15 +8,24 @@ import { css, html } from "lit";
8
8
  import { property, state } from "lit/decorators.js";
9
9
  import { repeat } from "lit/directives/repeat.js";
10
10
  import { unsafeHTML } from "lit/directives/unsafe-html.js";
11
- import { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
11
+ import { customElement, designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
12
12
  import { FtSelect, FtSelectOption } from "@fluid-topics/ft-select";
13
13
  import { FtTextField } from "@fluid-topics/ft-text-field";
14
- import { FtButton } from "@fluid-topics/ft-button";
14
+ import { FtButton, FtButtonCssVariables } from "@fluid-topics/ft-button";
15
15
  export class RowClickEvent extends CustomEvent {
16
16
  constructor(data) {
17
17
  super("row-click", { detail: data });
18
18
  }
19
19
  }
20
+ export const FtFilterableTableCssVariables = {
21
+ headerBackground: FtCssVariable.create("--ft-filterable-table-header-background", "COLOR", "whitesmoke"),
22
+ oddRowBackground: FtCssVariable.create("--ft-filterable-table-odd-row-background", "COLOR", "#FFFFFF"),
23
+ evenRowBackground: FtCssVariable.create("--ft-filterable-table-even-row-background", "COLOR", "#fdfdfd"),
24
+ rowHoverBackground: FtCssVariable.create("--ft-filterable-table-row-hover-background", "COLOR", "#fafafa"),
25
+ colorOnSurfaceHigh: FtCssVariable.external(designSystemVariables.colorOnSurfaceHigh, "Design system"),
26
+ titleFont: FtCssVariable.external(designSystemVariables.titleFont, "Design system"),
27
+ contentFont: FtCssVariable.external(designSystemVariables.contentFont, "Design system"),
28
+ };
20
29
  const DEFAULT_RENDER = (v) => html `${v}`;
21
30
  const DEFAULT_COMPARATOR = (a, b) => a - b;
22
31
  const DEFAULT_STRINGIFY = (v) => "" + v;
@@ -37,6 +46,7 @@ let FtFilterableTable = class FtFilterableTable extends FtLitElement {
37
46
 
38
47
  .table {
39
48
  display: grid;
49
+ grid-template-columns: repeat(${this.columns.length}, minmax(min-content, auto));
40
50
  }
41
51
 
42
52
  .header, .row {
@@ -46,13 +56,10 @@ let FtFilterableTable = class FtFilterableTable extends FtLitElement {
46
56
  .header-cell {
47
57
  display: flex;
48
58
  flex-direction: column;
49
- background: var(--ft-filterable-table-header-background, whitesmoke);
50
- color: var(--ft-color-on-surface-high, rgba(0, 0, 0, 0.87));
59
+ background: ${FtFilterableTableCssVariables.headerBackground};
60
+ color: ${FtFilterableTableCssVariables.colorOnSurfaceHigh};
51
61
  padding: .5rem 1rem;
52
- font-family: var(--ft-title-font, Ubuntu), system-ui, sans-serif;
53
-
54
- --mdc-icon-size: 20px;
55
- --mdc-icon-button-size: 30px;
62
+ font-family: ${FtFilterableTableCssVariables.titleFont};
56
63
  }
57
64
 
58
65
  .header-cell:first-of-type {
@@ -69,8 +76,8 @@ let FtFilterableTable = class FtFilterableTable extends FtLitElement {
69
76
  }
70
77
 
71
78
  .column-title-container ft-button {
72
- --ft-color-surface: var(--ft-filterable-table-header-background, whitesmoke);
73
- --ft-color-primary: var(--ft-color-on-surface-high, rgba(0, 0, 0, 0.87));
79
+ ${setVariable(FtButtonCssVariables.backgroundColor, FtFilterableTableCssVariables.headerBackground)};
80
+ ${setVariable(FtButtonCssVariables.color, FtFilterableTableCssVariables.colorOnSurfaceHigh)};
74
81
  }
75
82
 
76
83
  .column-title {
@@ -92,36 +99,33 @@ let FtFilterableTable = class FtFilterableTable extends FtLitElement {
92
99
  .column-filter ft-select {
93
100
  width: 150px;
94
101
  min-width: 100%;
95
-
96
- --mdc-text-field-fill-color: var(--ft-filterable-table-header-background, whitesmoke);
97
- --mdc-select-fill-color: var(--ft-filterable-table-header-background, whitesmoke);
98
102
  }
99
103
 
100
104
  .cell {
101
105
  padding: 1rem;
102
- border-left: 1px solid var(--ft-filterable-table-header-background, whitesmoke);
103
- border-bottom: 1px solid var(--ft-filterable-table-header-background, whitesmoke);
106
+ border-left: 1px solid ${FtFilterableTableCssVariables.headerBackground};
107
+ border-bottom: 1px solid ${FtFilterableTableCssVariables.headerBackground};
104
108
  overflow-x: auto;
105
109
  display: flex;
106
110
  align-items: center;
107
- font-family: var(--ft-content-font, 'Open Sans'), system-ui, sans-serif;
111
+ font-family: ${FtFilterableTableCssVariables.contentFont};
108
112
  }
109
113
 
110
114
  /* Even is 2n+1 and odd is 2n because of the header */
111
115
  .row:nth-child(2n) > .cell {
112
- background: var(--ft-filterable-table-odd-row-background, white);
116
+ background: ${FtFilterableTableCssVariables.oddRowBackground};
113
117
  }
114
118
 
115
119
  .row:nth-child(2n + 1) > .cell {
116
- background: var(--ft-filterable-table-even-row-background, #fdfdfd);
120
+ background: ${FtFilterableTableCssVariables.evenRowBackground};
117
121
  }
118
122
 
119
123
  .row:hover > .cell {
120
- background: var(--ft-filterable-table-row-hover-background, #fafafa);
124
+ background: ${FtFilterableTableCssVariables.rowHoverBackground};
121
125
  }
122
126
 
123
127
  .cell:last-of-type {
124
- border-right: 1px solid var(--ft-filterable-table-header-background, whitesmoke);
128
+ border-right: 1px solid ${FtFilterableTableCssVariables.headerBackground};
125
129
  }
126
130
 
127
131
  .row:last-of-type .cell:first-of-type {
@@ -145,11 +149,6 @@ let FtFilterableTable = class FtFilterableTable extends FtLitElement {
145
149
  getTemplate() {
146
150
  let data = this.sortData(this.filterData());
147
151
  return html `
148
- <style>
149
- .table {
150
- grid-template-columns: repeat(${this.columns.length}, minmax(min-content, auto));
151
- }
152
- </style>
153
152
  <div class="table">
154
153
  <div class="header">
155
154
  ${repeat(this.columns, (_, index) => "header-cell-" + index, (column, index) => this.renderHeader(column, index))}