@db-ux/react-core-components 4.5.4-table-c758ae7 → 4.5.4-tailwind-inline-5d37a00
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.
- package/README.md +62 -1
- package/dist/index.d.ts +0 -16
- package/dist/index.js +0 -16
- package/dist/shared/model.d.ts +2 -42
- package/dist/shared/model.js +1 -1
- package/package.json +3 -3
- package/dist/components/table/examples/data.d.ts +0 -9
- package/dist/components/table/examples/data.js +0 -258
- package/dist/components/table/index.d.ts +0 -1
- package/dist/components/table/index.js +0 -1
- package/dist/components/table/model.d.ts +0 -74
- package/dist/components/table/model.js +0 -6
- package/dist/components/table/table.d.ts +0 -3
- package/dist/components/table/table.js +0 -74
- package/dist/components/table-body/index.d.ts +0 -1
- package/dist/components/table-body/index.js +0 -1
- package/dist/components/table-body/model.d.ts +0 -8
- package/dist/components/table-body/model.js +0 -1
- package/dist/components/table-body/table-body.d.ts +0 -3
- package/dist/components/table-body/table-body.js +0 -18
- package/dist/components/table-caption/index.d.ts +0 -1
- package/dist/components/table-caption/index.js +0 -1
- package/dist/components/table-caption/model.d.ts +0 -5
- package/dist/components/table-caption/model.js +0 -1
- package/dist/components/table-caption/table-caption.d.ts +0 -3
- package/dist/components/table-caption/table-caption.js +0 -11
- package/dist/components/table-data-cell/index.d.ts +0 -1
- package/dist/components/table-data-cell/index.js +0 -1
- package/dist/components/table-data-cell/model.d.ts +0 -5
- package/dist/components/table-data-cell/model.js +0 -1
- package/dist/components/table-data-cell/table-data-cell.d.ts +0 -3
- package/dist/components/table-data-cell/table-data-cell.js +0 -11
- package/dist/components/table-footer/index.d.ts +0 -1
- package/dist/components/table-footer/index.js +0 -1
- package/dist/components/table-footer/model.d.ts +0 -8
- package/dist/components/table-footer/model.js +0 -1
- package/dist/components/table-footer/table-footer.d.ts +0 -3
- package/dist/components/table-footer/table-footer.js +0 -18
- package/dist/components/table-head/index.d.ts +0 -1
- package/dist/components/table-head/index.js +0 -1
- package/dist/components/table-head/model.d.ts +0 -10
- package/dist/components/table-head/model.js +0 -1
- package/dist/components/table-head/table-head.d.ts +0 -3
- package/dist/components/table-head/table-head.js +0 -21
- package/dist/components/table-header-cell/index.d.ts +0 -1
- package/dist/components/table-header-cell/index.js +0 -1
- package/dist/components/table-header-cell/model.d.ts +0 -24
- package/dist/components/table-header-cell/model.js +0 -1
- package/dist/components/table-header-cell/table-header-cell.d.ts +0 -3
- package/dist/components/table-header-cell/table-header-cell.js +0 -11
- package/dist/components/table-row/index.d.ts +0 -1
- package/dist/components/table-row/index.js +0 -1
- package/dist/components/table-row/model.d.ts +0 -30
- package/dist/components/table-row/model.js +0 -1
- package/dist/components/table-row/table-row.d.ts +0 -3
- package/dist/components/table-row/table-row.js +0 -26
package/README.md
CHANGED
|
@@ -44,7 +44,9 @@ import "@db-ux/core-components/build/styles/rollup.css";
|
|
|
44
44
|
|
|
45
45
|
</details>
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
### Vite 8
|
|
48
|
+
|
|
49
|
+
Starting with Vite 8, the default CSS minifier was changed to [LightningCSS](https://lightningcss.dev/), which provides buggy transformations for modern CSS features used by the DB UX Design System (e.g. `light-dark()` CSS function). To keep CSS output stable, configure `vite.config.ts` like this:
|
|
48
50
|
|
|
49
51
|
```ts
|
|
50
52
|
// vite.config.ts
|
|
@@ -76,6 +78,27 @@ export default defineConfig({
|
|
|
76
78
|
|
|
77
79
|
> **Note:** The `@db-ux/core-components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ux/core-components](https://www.npmjs.com/package/@db-ux/core-components) for more information.
|
|
78
80
|
|
|
81
|
+
### Next 16
|
|
82
|
+
|
|
83
|
+
Starting with Next 16, the default CSS minifier was changed to [LightningCSS](https://lightningcss.dev/), which provides buggy transformations for modern CSS features used by the DB UX Design System (e.g. `light-dark()` CSS function). We might provide a specific configuration necessary to mitigate those problems in the near future. To keep CSS output stable in the meantime, configure `next.config.ts` like this:
|
|
84
|
+
|
|
85
|
+
````ts
|
|
86
|
+
// next.config.ts
|
|
87
|
+
|
|
88
|
+
import type { NextConfig } from 'next'
|
|
89
|
+
|
|
90
|
+
const nextConfig: NextConfig = {
|
|
91
|
+
experimental: {
|
|
92
|
+
useLightningcss: true,
|
|
93
|
+
lightningCssFeatures: {
|
|
94
|
+
exclude: ['light-dark'],
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
export default nextConfig
|
|
100
|
+
````
|
|
101
|
+
|
|
79
102
|
### DB Theme
|
|
80
103
|
|
|
81
104
|
In case that you're building a website or application for Deutsche Bahn, you'll additionally have to install the DB Theme via the [`@db-ux/db-theme`](https://www.npmjs.com/package/@db-ux/db-theme) node package (even also available as an inner source node package, as described within that packages README).
|
|
@@ -105,6 +128,44 @@ This will create or update `.github/copilot-instructions.md` with component docu
|
|
|
105
128
|
|
|
106
129
|
📖 **[Learn more about `@db-ux/agent-cli` node package](packages/agent-cli/README.md)**
|
|
107
130
|
|
|
131
|
+
## Code Quality
|
|
132
|
+
|
|
133
|
+
To enforce correct usage of DB UX Design System components in your React project, we provide the [`@db-ux/core-eslint-plugin`](https://www.npmjs.com/package/@db-ux/core-eslint-plugin) ESLint plugin.
|
|
134
|
+
|
|
135
|
+
### Installation
|
|
136
|
+
|
|
137
|
+
```shell
|
|
138
|
+
npm install eslint @db-ux/core-eslint-plugin @typescript-eslint/parser --save-dev
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### Setup
|
|
142
|
+
|
|
143
|
+
```js
|
|
144
|
+
// eslint.config.js
|
|
145
|
+
import dbUx from "@db-ux/core-eslint-plugin";
|
|
146
|
+
import tsParser from "@typescript-eslint/parser";
|
|
147
|
+
|
|
148
|
+
export default [
|
|
149
|
+
{
|
|
150
|
+
files: ["**/*.ts", "**/*.tsx"],
|
|
151
|
+
languageOptions: {
|
|
152
|
+
parser: tsParser,
|
|
153
|
+
parserOptions: {
|
|
154
|
+
ecmaVersion: "latest",
|
|
155
|
+
sourceType: "module",
|
|
156
|
+
ecmaFeatures: { jsx: true }
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
plugins: {
|
|
160
|
+
"db-ux": dbUx
|
|
161
|
+
},
|
|
162
|
+
rules: dbUx.configs.recommended.rules
|
|
163
|
+
}
|
|
164
|
+
];
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
📖 **[Learn more about `@db-ux/core-eslint-plugin` node package](https://www.npmjs.com/package/@db-ux/core-eslint-plugin)**
|
|
168
|
+
|
|
108
169
|
## Deutsche Bahn brand
|
|
109
170
|
|
|
110
171
|
As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
|
package/dist/index.d.ts
CHANGED
|
@@ -79,19 +79,3 @@ export * from './utils/document-scroll-listener';
|
|
|
79
79
|
export * from './utils/floating-components';
|
|
80
80
|
export * from './utils/index';
|
|
81
81
|
export * from './utils/navigation';
|
|
82
|
-
export * from "./components/table";
|
|
83
|
-
export * from "./components/table/model";
|
|
84
|
-
export * from "./components/table-caption";
|
|
85
|
-
export * from "./components/table-caption/model";
|
|
86
|
-
export * from "./components/table-head";
|
|
87
|
-
export * from "./components/table-head/model";
|
|
88
|
-
export * from "./components/table-body";
|
|
89
|
-
export * from "./components/table-body/model";
|
|
90
|
-
export * from "./components/table-footer";
|
|
91
|
-
export * from "./components/table-footer/model";
|
|
92
|
-
export * from "./components/table-row";
|
|
93
|
-
export * from "./components/table-row/model";
|
|
94
|
-
export * from "./components/table-header-cell";
|
|
95
|
-
export * from "./components/table-header-cell/model";
|
|
96
|
-
export * from "./components/table-data-cell";
|
|
97
|
-
export * from "./components/table-data-cell/model";
|
package/dist/index.js
CHANGED
|
@@ -79,19 +79,3 @@ export * from './utils/document-scroll-listener';
|
|
|
79
79
|
export * from './utils/floating-components';
|
|
80
80
|
export * from './utils/index';
|
|
81
81
|
export * from './utils/navigation';
|
|
82
|
-
export * from "./components/table";
|
|
83
|
-
export * from "./components/table/model";
|
|
84
|
-
export * from "./components/table-caption";
|
|
85
|
-
export * from "./components/table-caption/model";
|
|
86
|
-
export * from "./components/table-head";
|
|
87
|
-
export * from "./components/table-head/model";
|
|
88
|
-
export * from "./components/table-body";
|
|
89
|
-
export * from "./components/table-body/model";
|
|
90
|
-
export * from "./components/table-footer";
|
|
91
|
-
export * from "./components/table-footer/model";
|
|
92
|
-
export * from "./components/table-row";
|
|
93
|
-
export * from "./components/table-row/model";
|
|
94
|
-
export * from "./components/table-header-cell";
|
|
95
|
-
export * from "./components/table-header-cell/model";
|
|
96
|
-
export * from "./components/table-data-cell";
|
|
97
|
-
export * from "./components/table-data-cell/model";
|
package/dist/shared/model.d.ts
CHANGED
|
@@ -461,11 +461,11 @@ export type CloseEventProps<T> = {
|
|
|
461
461
|
export type CloseEventState<T> = {
|
|
462
462
|
handleClose: (event?: T | void, forceClose?: boolean) => void;
|
|
463
463
|
};
|
|
464
|
-
export declare const AlignmentList: readonly ["start", "center"
|
|
464
|
+
export declare const AlignmentList: readonly ["start", "center"];
|
|
465
465
|
export type AlignmentType = (typeof AlignmentList)[number];
|
|
466
466
|
export type AlignmentProps = {
|
|
467
467
|
/**
|
|
468
|
-
* Define the content alignment
|
|
468
|
+
* Define the content alignment in full width
|
|
469
469
|
*/
|
|
470
470
|
alignment?: AlignmentType | string;
|
|
471
471
|
};
|
|
@@ -555,43 +555,3 @@ export interface PatternhubProps {
|
|
|
555
555
|
*/
|
|
556
556
|
isPatternhub?: boolean;
|
|
557
557
|
}
|
|
558
|
-
export type DBTableCellProps = {
|
|
559
|
-
/**
|
|
560
|
-
* The **`colSpan`** read-only property of the HTMLTableCellElement interface represents the number of columns this cell must span; this lets the cell occupy space across multiple columns of the table.
|
|
561
|
-
*
|
|
562
|
-
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/colSpan)
|
|
563
|
-
*/
|
|
564
|
-
colSpan?: number | string;
|
|
565
|
-
/**
|
|
566
|
-
* The **`colSpan`** read-only property of the HTMLTableCellElement interface represents the number of columns this cell must span; this lets the cell occupy space across multiple columns of the table.
|
|
567
|
-
*
|
|
568
|
-
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/colSpan)
|
|
569
|
-
*/
|
|
570
|
-
colspan?: number | string;
|
|
571
|
-
/**
|
|
572
|
-
* The **`headers`** property of the HTMLTableCellElement interface contains a list of IDs of th elements that are _headers_ for this specific cell.
|
|
573
|
-
*
|
|
574
|
-
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/headers)
|
|
575
|
-
*/
|
|
576
|
-
headers?: string;
|
|
577
|
-
/**
|
|
578
|
-
* The **`rowSpan`** read-only property of the HTMLTableCellElement interface represents the number of rows this cell must span; this lets the cell occupy space across multiple rows of the table.
|
|
579
|
-
*
|
|
580
|
-
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/rowSpan)
|
|
581
|
-
*/
|
|
582
|
-
rowSpan?: number | string;
|
|
583
|
-
/**
|
|
584
|
-
* The **`rowSpan`** read-only property of the HTMLTableCellElement interface represents the number of rows this cell must span; this lets the cell occupy space across multiple rows of the table.
|
|
585
|
-
*
|
|
586
|
-
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/rowSpan)
|
|
587
|
-
*/
|
|
588
|
-
rowspan?: number | string;
|
|
589
|
-
/**
|
|
590
|
-
* Set the horizontal alignment of the cell content.
|
|
591
|
-
*/
|
|
592
|
-
horizontalAlignment?: AlignmentType;
|
|
593
|
-
/**
|
|
594
|
-
* Set the vertical alignment of the cell content.
|
|
595
|
-
*/
|
|
596
|
-
verticalAlignment?: AlignmentType;
|
|
597
|
-
};
|
package/dist/shared/model.js
CHANGED
|
@@ -19,4 +19,4 @@ export const LabelVariantHorizontalList = ['leading', 'trailing'];
|
|
|
19
19
|
export const AutoCompleteList = ['off', 'on', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'shipping', 'billing', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo', 'webauthn'];
|
|
20
20
|
export const LinkTargetList = ['_self', '_blank', '_parent', '_top'];
|
|
21
21
|
export const LinkReferrerPolicyList = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'];
|
|
22
|
-
export const AlignmentList = ['start', 'center'
|
|
22
|
+
export const AlignmentList = ['start', 'center'];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@db-ux/react-core-components",
|
|
3
|
-
"version": "4.5.4-
|
|
3
|
+
"version": "4.5.4-tailwind-inline-5d37a00",
|
|
4
4
|
"description": "React components for @db-ux/core-components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
},
|
|
42
42
|
"sideEffects": false,
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@db-ux/core-components": "4.5.4-
|
|
45
|
-
"@db-ux/core-foundations": "4.5.4-
|
|
44
|
+
"@db-ux/core-components": "4.5.4-tailwind-inline-5d37a00",
|
|
45
|
+
"@db-ux/core-foundations": "4.5.4-tailwind-inline-5d37a00"
|
|
46
46
|
}
|
|
47
47
|
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { DBTableData } from '../model';
|
|
2
|
-
export declare const defaultTable: DBTableData;
|
|
3
|
-
export declare const horizontalAlignmentStartTable: DBTableData;
|
|
4
|
-
export declare const horizontalAlignmentCenterTable: DBTableData;
|
|
5
|
-
export declare const horizontalAlignmentEndTable: DBTableData;
|
|
6
|
-
export declare const subHeaderEmphasisNoneTable: DBTableData;
|
|
7
|
-
export declare const subHeaderEmphasisWeakTable: DBTableData;
|
|
8
|
-
export declare const subHeaderEmphasisStrongTable: DBTableData;
|
|
9
|
-
export declare const overflowTable: DBTableData;
|
|
@@ -1,258 +0,0 @@
|
|
|
1
|
-
const defaultHeader = [{
|
|
2
|
-
cells: [{
|
|
3
|
-
content: 'A',
|
|
4
|
-
scope: 'col'
|
|
5
|
-
}, {
|
|
6
|
-
content: 'B',
|
|
7
|
-
scope: 'col'
|
|
8
|
-
}, {
|
|
9
|
-
content: 'C',
|
|
10
|
-
scope: 'col'
|
|
11
|
-
}]
|
|
12
|
-
}];
|
|
13
|
-
const defaultBody = [{
|
|
14
|
-
cells: [{
|
|
15
|
-
content: '1',
|
|
16
|
-
headerCell: true,
|
|
17
|
-
scope: 'row'
|
|
18
|
-
}, {
|
|
19
|
-
content: '2'
|
|
20
|
-
}, {
|
|
21
|
-
content: '3'
|
|
22
|
-
}]
|
|
23
|
-
}, {
|
|
24
|
-
cells: [{
|
|
25
|
-
content: '4',
|
|
26
|
-
headerCell: true,
|
|
27
|
-
scope: 'row'
|
|
28
|
-
}, {
|
|
29
|
-
content: '5'
|
|
30
|
-
}, {
|
|
31
|
-
content: '6'
|
|
32
|
-
}]
|
|
33
|
-
}, {
|
|
34
|
-
cells: [{
|
|
35
|
-
content: '7',
|
|
36
|
-
headerCell: true,
|
|
37
|
-
scope: 'row'
|
|
38
|
-
}, {
|
|
39
|
-
content: '8'
|
|
40
|
-
}, {
|
|
41
|
-
content: '9'
|
|
42
|
-
}]
|
|
43
|
-
}];
|
|
44
|
-
const defaultFooter = [{
|
|
45
|
-
cells: [{
|
|
46
|
-
content: 'Footer 1',
|
|
47
|
-
headerCell: true,
|
|
48
|
-
scope: 'row'
|
|
49
|
-
}, {
|
|
50
|
-
content: 'Footer 2',
|
|
51
|
-
colSpan: 2
|
|
52
|
-
}]
|
|
53
|
-
}];
|
|
54
|
-
export const defaultTable = {
|
|
55
|
-
header: defaultHeader,
|
|
56
|
-
body: defaultBody,
|
|
57
|
-
footer: defaultFooter
|
|
58
|
-
};
|
|
59
|
-
export const horizontalAlignmentStartTable = {
|
|
60
|
-
header: [{
|
|
61
|
-
cells: [{
|
|
62
|
-
content: 'A',
|
|
63
|
-
horizontalAlignment: 'start',
|
|
64
|
-
scope: 'col'
|
|
65
|
-
}, {
|
|
66
|
-
content: 'B',
|
|
67
|
-
horizontalAlignment: 'start',
|
|
68
|
-
colSpan: 2,
|
|
69
|
-
scope: 'col'
|
|
70
|
-
}]
|
|
71
|
-
}],
|
|
72
|
-
body: [{
|
|
73
|
-
cells: [{
|
|
74
|
-
content: '1',
|
|
75
|
-
headerCell: true,
|
|
76
|
-
horizontalAlignment: 'start',
|
|
77
|
-
scope: 'row'
|
|
78
|
-
}, {
|
|
79
|
-
content: '2',
|
|
80
|
-
horizontalAlignment: 'start'
|
|
81
|
-
}, {
|
|
82
|
-
content: '3',
|
|
83
|
-
horizontalAlignment: 'start'
|
|
84
|
-
}]
|
|
85
|
-
}]
|
|
86
|
-
};
|
|
87
|
-
export const horizontalAlignmentCenterTable = {
|
|
88
|
-
header: [{
|
|
89
|
-
cells: [{
|
|
90
|
-
content: 'A',
|
|
91
|
-
horizontalAlignment: 'center',
|
|
92
|
-
scope: 'col'
|
|
93
|
-
}, {
|
|
94
|
-
content: 'B',
|
|
95
|
-
horizontalAlignment: 'center',
|
|
96
|
-
colSpan: 2,
|
|
97
|
-
scope: 'col'
|
|
98
|
-
}]
|
|
99
|
-
}],
|
|
100
|
-
body: [{
|
|
101
|
-
cells: [{
|
|
102
|
-
content: '1',
|
|
103
|
-
headerCell: true,
|
|
104
|
-
horizontalAlignment: 'center',
|
|
105
|
-
scope: 'row'
|
|
106
|
-
}, {
|
|
107
|
-
content: '2',
|
|
108
|
-
horizontalAlignment: 'center'
|
|
109
|
-
}, {
|
|
110
|
-
content: '3',
|
|
111
|
-
horizontalAlignment: 'center'
|
|
112
|
-
}]
|
|
113
|
-
}]
|
|
114
|
-
};
|
|
115
|
-
export const horizontalAlignmentEndTable = {
|
|
116
|
-
header: [{
|
|
117
|
-
cells: [{
|
|
118
|
-
content: 'A',
|
|
119
|
-
horizontalAlignment: 'end',
|
|
120
|
-
scope: 'col'
|
|
121
|
-
}, {
|
|
122
|
-
content: 'B',
|
|
123
|
-
horizontalAlignment: 'end',
|
|
124
|
-
colSpan: 2,
|
|
125
|
-
scope: 'col'
|
|
126
|
-
}]
|
|
127
|
-
}],
|
|
128
|
-
body: [{
|
|
129
|
-
cells: [{
|
|
130
|
-
content: '1',
|
|
131
|
-
headerCell: true,
|
|
132
|
-
horizontalAlignment: 'end',
|
|
133
|
-
scope: 'row'
|
|
134
|
-
}, {
|
|
135
|
-
content: '2',
|
|
136
|
-
horizontalAlignment: 'end'
|
|
137
|
-
}, {
|
|
138
|
-
content: '3',
|
|
139
|
-
horizontalAlignment: 'end'
|
|
140
|
-
}]
|
|
141
|
-
}]
|
|
142
|
-
};
|
|
143
|
-
export const subHeaderEmphasisNoneTable = {
|
|
144
|
-
header: [...defaultHeader, {
|
|
145
|
-
cells: [{
|
|
146
|
-
content: 'Sub A',
|
|
147
|
-
scope: 'col'
|
|
148
|
-
}, {
|
|
149
|
-
content: 'Sub B',
|
|
150
|
-
scope: 'col'
|
|
151
|
-
}, {
|
|
152
|
-
content: 'Sub C',
|
|
153
|
-
scope: 'col'
|
|
154
|
-
}]
|
|
155
|
-
}],
|
|
156
|
-
body: defaultBody,
|
|
157
|
-
footer: defaultFooter
|
|
158
|
-
};
|
|
159
|
-
export const subHeaderEmphasisWeakTable = {
|
|
160
|
-
header: [...defaultHeader, {
|
|
161
|
-
subHeaderEmphasis: 'weak',
|
|
162
|
-
cells: [{
|
|
163
|
-
content: 'Sub A',
|
|
164
|
-
scope: 'col'
|
|
165
|
-
}, {
|
|
166
|
-
content: 'Sub B',
|
|
167
|
-
scope: 'col'
|
|
168
|
-
}, {
|
|
169
|
-
content: 'Sub C',
|
|
170
|
-
scope: 'col'
|
|
171
|
-
}]
|
|
172
|
-
}],
|
|
173
|
-
body: defaultBody,
|
|
174
|
-
footer: defaultFooter
|
|
175
|
-
};
|
|
176
|
-
export const subHeaderEmphasisStrongTable = {
|
|
177
|
-
header: [...defaultHeader, {
|
|
178
|
-
subHeaderEmphasis: 'strong',
|
|
179
|
-
cells: [{
|
|
180
|
-
content: 'Sub A',
|
|
181
|
-
scope: 'col'
|
|
182
|
-
}, {
|
|
183
|
-
content: 'Sub B',
|
|
184
|
-
scope: 'col'
|
|
185
|
-
}, {
|
|
186
|
-
content: 'Sub C',
|
|
187
|
-
scope: 'col'
|
|
188
|
-
}]
|
|
189
|
-
}],
|
|
190
|
-
body: defaultBody,
|
|
191
|
-
footer: defaultFooter
|
|
192
|
-
};
|
|
193
|
-
export const overflowTable = {
|
|
194
|
-
header: [{
|
|
195
|
-
cells: [{
|
|
196
|
-
content: 'A',
|
|
197
|
-
scope: 'col'
|
|
198
|
-
}, {
|
|
199
|
-
content: 'B',
|
|
200
|
-
scope: 'col'
|
|
201
|
-
}, {
|
|
202
|
-
content: 'C',
|
|
203
|
-
scope: 'col'
|
|
204
|
-
}, {
|
|
205
|
-
content: 'D',
|
|
206
|
-
scope: 'col'
|
|
207
|
-
}, {
|
|
208
|
-
content: 'E',
|
|
209
|
-
scope: 'col'
|
|
210
|
-
}, {
|
|
211
|
-
content: 'F',
|
|
212
|
-
scope: 'col'
|
|
213
|
-
}, {
|
|
214
|
-
link: {
|
|
215
|
-
text: 'G',
|
|
216
|
-
href: '#'
|
|
217
|
-
},
|
|
218
|
-
scope: 'col'
|
|
219
|
-
}]
|
|
220
|
-
}],
|
|
221
|
-
body: Array.from({
|
|
222
|
-
length: 20
|
|
223
|
-
}, (_, i) => ({
|
|
224
|
-
cells: [{
|
|
225
|
-
content: `Row ${i + 1}`,
|
|
226
|
-
headerCell: true,
|
|
227
|
-
scope: 'row'
|
|
228
|
-
}, {
|
|
229
|
-
content: `Data ${i + 1}-B`
|
|
230
|
-
}, {
|
|
231
|
-
content: `Data ${i + 1}-C`
|
|
232
|
-
}, {
|
|
233
|
-
content: `Data ${i + 1}-D`
|
|
234
|
-
}, {
|
|
235
|
-
content: `Data ${i + 1}-E`
|
|
236
|
-
}, {
|
|
237
|
-
content: `Data ${i + 1}-F`
|
|
238
|
-
}, {
|
|
239
|
-
link: {
|
|
240
|
-
text: `Data ${i + 1}-G`,
|
|
241
|
-
href: '#'
|
|
242
|
-
}
|
|
243
|
-
}]
|
|
244
|
-
})),
|
|
245
|
-
footer: [{
|
|
246
|
-
cells: [{
|
|
247
|
-
content: 'Footer 1',
|
|
248
|
-
headerCell: true,
|
|
249
|
-
scope: 'row'
|
|
250
|
-
}, {
|
|
251
|
-
link: {
|
|
252
|
-
text: 'Footer 2',
|
|
253
|
-
href: '#'
|
|
254
|
-
},
|
|
255
|
-
colSpan: 6
|
|
256
|
-
}]
|
|
257
|
-
}]
|
|
258
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTable } from "./table";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTable } from "./table";
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { GlobalProps, GlobalState, WidthProps } from '../../shared/model';
|
|
2
|
-
import { DBTableRowDefaultProps } from '../table-row/model';
|
|
3
|
-
export declare const DBTableRowSizeList: readonly ["x-small", "small", "medium", "large"];
|
|
4
|
-
export type DBTableRowSizeType = (typeof DBTableRowSizeList)[number];
|
|
5
|
-
export declare const DBTableVariantList: readonly ["joined", "zebra", "floating"];
|
|
6
|
-
export type DBTableVariantType = (typeof DBTableVariantList)[number];
|
|
7
|
-
export declare const DBTableDividerList: readonly ["none", "both", "horizontal", "vertical"];
|
|
8
|
-
export type DBTableDividerType = (typeof DBTableDividerList)[number];
|
|
9
|
-
export declare const DBTableMobileVariantList: readonly ["table", "list"];
|
|
10
|
-
export type DBTableMobileVariantType = (typeof DBTableMobileVariantList)[number];
|
|
11
|
-
export declare const DBTableStickHeaderList: readonly ["none", "both", "horizontal", "vertical"];
|
|
12
|
-
export type DBTableStickHederType = (typeof DBTableStickHeaderList)[number];
|
|
13
|
-
export type DBTableData = {
|
|
14
|
-
header?: DBTableRowDefaultProps[];
|
|
15
|
-
body?: DBTableRowDefaultProps[];
|
|
16
|
-
footer?: DBTableRowDefaultProps[];
|
|
17
|
-
};
|
|
18
|
-
export declare const DBTableColumnsSizeList: readonly ["auto", "1fr", "min-content", "max-content"];
|
|
19
|
-
export type DBTableColumnsSizeType = (typeof DBTableColumnsSizeList)[number];
|
|
20
|
-
export type DBTableDefaultProps = {
|
|
21
|
-
/**
|
|
22
|
-
* Slot for table caption
|
|
23
|
-
*/
|
|
24
|
-
caption?: any;
|
|
25
|
-
/**
|
|
26
|
-
* String alternative for table caption slot
|
|
27
|
-
*/
|
|
28
|
-
captionPlain?: string;
|
|
29
|
-
/**
|
|
30
|
-
* Table data if you don't use default slot/children
|
|
31
|
-
*/
|
|
32
|
-
data?: DBTableData | string;
|
|
33
|
-
/**
|
|
34
|
-
* Show the divider between the rows and cells
|
|
35
|
-
*/
|
|
36
|
-
divider?: DBTableDividerType;
|
|
37
|
-
/**
|
|
38
|
-
* Show caption above table default is hidden
|
|
39
|
-
*/
|
|
40
|
-
showCaption?: boolean | string;
|
|
41
|
-
/**
|
|
42
|
-
* Size of the table rows
|
|
43
|
-
*/
|
|
44
|
-
size?: DBTableRowSizeType;
|
|
45
|
-
/**
|
|
46
|
-
* Change the layout of the table
|
|
47
|
-
* floating: card style table
|
|
48
|
-
* joined: classic table
|
|
49
|
-
*/
|
|
50
|
-
variant?: DBTableVariantType;
|
|
51
|
-
/**
|
|
52
|
-
* Change the layout of the table on mobile
|
|
53
|
-
* list: list style
|
|
54
|
-
* table: classic table
|
|
55
|
-
*/
|
|
56
|
-
mobileVariant?: DBTableMobileVariantType;
|
|
57
|
-
/**
|
|
58
|
-
* Change the header cells to be sticky when scrolling the table
|
|
59
|
-
*/
|
|
60
|
-
stickyHeader?: DBTableStickHederType;
|
|
61
|
-
/**
|
|
62
|
-
* Set the width of the columns based in their index.
|
|
63
|
-
* Alternative: Use `--db-table-column-size-$index` inside CSS to control it.
|
|
64
|
-
* See: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns
|
|
65
|
-
*/
|
|
66
|
-
columnSizes?: Record<number, DBTableColumnsSizeType | string>;
|
|
67
|
-
};
|
|
68
|
-
export type DBTableProps = DBTableDefaultProps & GlobalProps & WidthProps;
|
|
69
|
-
export type DBTableDefaultState = {
|
|
70
|
-
_data?: DBTableData;
|
|
71
|
-
_style?: any;
|
|
72
|
-
convertData: () => DBTableData;
|
|
73
|
-
};
|
|
74
|
-
export type DBTableState = DBTableDefaultState & GlobalState;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export const DBTableRowSizeList = ['x-small', 'small', 'medium', 'large'];
|
|
2
|
-
export const DBTableVariantList = ['joined', 'zebra', 'floating'];
|
|
3
|
-
export const DBTableDividerList = ['none', 'both', 'horizontal', 'vertical'];
|
|
4
|
-
export const DBTableMobileVariantList = ['table', 'list'];
|
|
5
|
-
export const DBTableStickHeaderList = ['none', 'both', 'horizontal', 'vertical'];
|
|
6
|
-
export const DBTableColumnsSizeList = ['auto', '1fr', 'min-content', 'max-content'];
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
declare const DBTable: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "width" | keyof import("./model").DBTableDefaultProps> & import("./model").DBTableDefaultProps & import("../..").GlobalProps & import("../..").WidthProps & React.RefAttributes<any>>;
|
|
3
|
-
export default DBTable;
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
|
-
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
|
-
import { cls, delay, getBooleanAsString } from "../../utils";
|
|
6
|
-
import DBTableBody from "../table-body/table-body";
|
|
7
|
-
import DBTableFooter from "../table-footer/table-footer";
|
|
8
|
-
import DBTableHead from "../table-head/table-head";
|
|
9
|
-
function DBTableFn(props, component) {
|
|
10
|
-
const _ref = component || useRef(undefined);
|
|
11
|
-
const [_data, set_data] = useState(() => undefined);
|
|
12
|
-
const [_style, set_style] = useState(() => undefined);
|
|
13
|
-
function convertData() {
|
|
14
|
-
try {
|
|
15
|
-
if (typeof props.data === "string") {
|
|
16
|
-
return JSON.parse(props.data);
|
|
17
|
-
}
|
|
18
|
-
return props.data;
|
|
19
|
-
}
|
|
20
|
-
catch (error) {
|
|
21
|
-
console.error(error);
|
|
22
|
-
}
|
|
23
|
-
return {};
|
|
24
|
-
}
|
|
25
|
-
useEffect(() => {
|
|
26
|
-
if (props.data) {
|
|
27
|
-
set_data(convertData());
|
|
28
|
-
}
|
|
29
|
-
}, [props.data]);
|
|
30
|
-
useEffect(() => {
|
|
31
|
-
if (_ref.current && props.mobileVariant === "list") {
|
|
32
|
-
// Delay for angular
|
|
33
|
-
void delay(() => {
|
|
34
|
-
const table = _ref.current;
|
|
35
|
-
if (!table)
|
|
36
|
-
return;
|
|
37
|
-
const headerCells = table.querySelectorAll("thead tr th");
|
|
38
|
-
if (headerCells.length) {
|
|
39
|
-
const otherRows = table.querySelectorAll(":is(tbody,tfoot) tr");
|
|
40
|
-
otherRows.forEach((row) => {
|
|
41
|
-
const cells = row.querySelectorAll(":is(td,th)");
|
|
42
|
-
cells.forEach((cell, index) => {
|
|
43
|
-
const headerCell = headerCells[index];
|
|
44
|
-
if (headerCell &&
|
|
45
|
-
headerCell.textContent &&
|
|
46
|
-
!cell.dataset["header"]) {
|
|
47
|
-
cell.dataset["header"] = headerCell.textContent.trim();
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
}, 1);
|
|
53
|
-
}
|
|
54
|
-
}, [props.mobileVariant, _ref.current]);
|
|
55
|
-
useEffect(() => {
|
|
56
|
-
if (props.columnSizes) {
|
|
57
|
-
const columnStyles = {};
|
|
58
|
-
Object.entries(props.columnSizes).forEach(([key, value]) => {
|
|
59
|
-
columnStyles[`--db-table-column-size-${key}`] = value;
|
|
60
|
-
});
|
|
61
|
-
set_style(columnStyles);
|
|
62
|
-
}
|
|
63
|
-
}, [props.columnSizes]);
|
|
64
|
-
return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table", props.className), style: _style, "data-width": props.width, "data-size": props.size, "data-divider": props.divider, "data-variant": props.variant, "data-mobile-variant": props.mobileVariant, "data-show-caption": getBooleanAsString(props.showCaption), "data-sticky-header": props.stickyHeader }),
|
|
65
|
-
React.createElement("table", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }),
|
|
66
|
-
React.createElement("caption", null, props.captionPlain ? (React.createElement(React.Fragment, null, props.captionPlain)) : (React.createElement(React.Fragment, null,
|
|
67
|
-
React.createElement(React.Fragment, null, props.caption)))),
|
|
68
|
-
_data ? (React.createElement(React.Fragment, null,
|
|
69
|
-
(_data === null || _data === void 0 ? void 0 : _data.header) ? React.createElement(DBTableHead, { rows: _data === null || _data === void 0 ? void 0 : _data.header }) : null,
|
|
70
|
-
(_data === null || _data === void 0 ? void 0 : _data.body) ? React.createElement(DBTableBody, { rows: _data === null || _data === void 0 ? void 0 : _data.body }) : null,
|
|
71
|
-
(_data === null || _data === void 0 ? void 0 : _data.footer) ? React.createElement(DBTableFooter, { rows: _data === null || _data === void 0 ? void 0 : _data.footer }) : null)) : (React.createElement(React.Fragment, null, props.children)))));
|
|
72
|
-
}
|
|
73
|
-
const DBTable = forwardRef(DBTableFn);
|
|
74
|
-
export default DBTable;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableBody } from "./table-body";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableBody } from "./table-body";
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { GlobalProps, GlobalState } from '../../shared/model';
|
|
2
|
-
import { DBTableRowProps } from '../table-row/model';
|
|
3
|
-
export type DBTableBodyDefaultProps = {
|
|
4
|
-
rows?: DBTableRowProps[];
|
|
5
|
-
};
|
|
6
|
-
export type DBTableBodyProps = DBTableBodyDefaultProps & GlobalProps;
|
|
7
|
-
export type DBTableBodyDefaultState = {};
|
|
8
|
-
export type DBTableBodyState = DBTableBodyDefaultState & GlobalState;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
declare const DBTableBody: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "rows"> & import("./model").DBTableBodyDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
|
|
3
|
-
export default DBTableBody;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
|
-
import { useRef, forwardRef } from "react";
|
|
5
|
-
import { cls } from "../../utils";
|
|
6
|
-
import DBTableRow from "../table-row/table-row";
|
|
7
|
-
import { useId } from "react";
|
|
8
|
-
function DBTableBodyFn(props, component) {
|
|
9
|
-
var _a;
|
|
10
|
-
const uuid = useId();
|
|
11
|
-
const _ref = component || useRef(undefined);
|
|
12
|
-
return (React.createElement("tbody", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-body", props.className) }), props.rows ? (React.createElement(React.Fragment, null, (_a = props.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
|
|
13
|
-
var _a, _b;
|
|
14
|
-
return (React.createElement(DBTableRow, { key: `${(_a = props.id) !== null && _a !== void 0 ? _a : uuid}-table-body-row-${index}`, cells: row.cells, className: (_b = row.className) !== null && _b !== void 0 ? _b : row.class, id: row.id }));
|
|
15
|
-
}))) : (React.createElement(React.Fragment, null, props.children))));
|
|
16
|
-
}
|
|
17
|
-
const DBTableBody = forwardRef(DBTableBodyFn);
|
|
18
|
-
export default DBTableBody;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableCaption } from "./table-caption";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableCaption } from "./table-caption";
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { GlobalProps, GlobalState } from '../../shared/model';
|
|
2
|
-
export type DBTableCaptionDefaultProps = {};
|
|
3
|
-
export type DBTableCaptionProps = DBTableCaptionDefaultProps & GlobalProps;
|
|
4
|
-
export type DBTableCaptionDefaultState = {};
|
|
5
|
-
export type DBTableCaptionState = DBTableCaptionDefaultState & GlobalState;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
|
-
import { useRef, forwardRef } from "react";
|
|
5
|
-
import { cls } from "../../utils";
|
|
6
|
-
function DBTableCaptionFn(props, component) {
|
|
7
|
-
const _ref = component || useRef(undefined);
|
|
8
|
-
return (React.createElement("caption", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-caption", props.className) }), props.children));
|
|
9
|
-
}
|
|
10
|
-
const DBTableCaption = forwardRef(DBTableCaptionFn);
|
|
11
|
-
export default DBTableCaption;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableDataCell } from "./table-data-cell";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableDataCell } from "./table-data-cell";
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { DBTableCellProps, GlobalProps, GlobalState } from '../../shared/model';
|
|
2
|
-
export type DBTableDataCellDefaultProps = {};
|
|
3
|
-
export type DBTableDataCellProps = DBTableDataCellDefaultProps & GlobalProps & DBTableCellProps;
|
|
4
|
-
export type DBTableDataCellDefaultState = {};
|
|
5
|
-
export type DBTableDataCellState = DBTableDataCellDefaultState & GlobalState;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
declare const DBTableDataCell: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | keyof import("../..").DBTableCellProps> & import("../..").GlobalProps & import("../..").DBTableCellProps & React.RefAttributes<any>>;
|
|
3
|
-
export default DBTableDataCell;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
|
-
import { useRef, forwardRef } from "react";
|
|
5
|
-
import { cls, getNumber } from "../../utils";
|
|
6
|
-
function DBTableDataCellFn(props, component) {
|
|
7
|
-
const _ref = component || useRef(undefined);
|
|
8
|
-
return (React.createElement("td", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-data-cell", props.className), "data-horizontal-alignment": props.horizontalAlignment, "data-vertical-alignment": props.verticalAlignment, colSpan: getNumber(props.colSpan, props.colspan), rowSpan: getNumber(props.rowSpan, props.rowspan), headers: props.headers }), props.children));
|
|
9
|
-
}
|
|
10
|
-
const DBTableDataCell = forwardRef(DBTableDataCellFn);
|
|
11
|
-
export default DBTableDataCell;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableFooter } from "./table-footer";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableFooter } from "./table-footer";
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { GlobalProps, GlobalState } from '../../shared/model';
|
|
2
|
-
import { DBTableRowProps } from '../table-row/model';
|
|
3
|
-
export type DBTableFooterDefaultProps = {
|
|
4
|
-
rows?: DBTableRowProps[];
|
|
5
|
-
};
|
|
6
|
-
export type DBTableFooterProps = DBTableFooterDefaultProps & GlobalProps;
|
|
7
|
-
export type DBTableFooterDefaultState = {};
|
|
8
|
-
export type DBTableFooterState = DBTableFooterDefaultState & GlobalState;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
declare const DBTableFooter: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "rows"> & import("./model").DBTableFooterDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
|
|
3
|
-
export default DBTableFooter;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
|
-
import { useRef, forwardRef } from "react";
|
|
5
|
-
import { cls } from "../../utils";
|
|
6
|
-
import DBTableRow from "../table-row/table-row";
|
|
7
|
-
import { useId } from "react";
|
|
8
|
-
function DBTableFooterFn(props, component) {
|
|
9
|
-
var _a;
|
|
10
|
-
const uuid = useId();
|
|
11
|
-
const _ref = component || useRef(undefined);
|
|
12
|
-
return (React.createElement("tfoot", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-footer", props.className) }), props.rows ? (React.createElement(React.Fragment, null, (_a = props.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
|
|
13
|
-
var _a, _b;
|
|
14
|
-
return (React.createElement(DBTableRow, { key: `${(_a = props.id) !== null && _a !== void 0 ? _a : uuid}-table-footer-row-${index}`, cells: row.cells, className: (_b = row.className) !== null && _b !== void 0 ? _b : row.class, id: row.id }));
|
|
15
|
-
}))) : (React.createElement(React.Fragment, null, props.children))));
|
|
16
|
-
}
|
|
17
|
-
const DBTableFooter = forwardRef(DBTableFooterFn);
|
|
18
|
-
export default DBTableFooter;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableHead } from "./table-head";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableHead } from "./table-head";
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { GlobalProps, GlobalState } from '../../shared/model';
|
|
2
|
-
import { DBTableRowCell, DBTableRowProps } from '../table-row/model';
|
|
3
|
-
export type DBTableHeadDefaultProps = {
|
|
4
|
-
rows?: DBTableRowProps[];
|
|
5
|
-
};
|
|
6
|
-
export type DBTableHeadProps = DBTableHeadDefaultProps & GlobalProps;
|
|
7
|
-
export type DBTableHeadDefaultState = {
|
|
8
|
-
getCells: (cells?: DBTableRowCell[]) => DBTableRowCell[] | undefined;
|
|
9
|
-
};
|
|
10
|
-
export type DBTableHeadState = DBTableHeadDefaultState & GlobalState;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
declare const DBTableHead: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "rows"> & import("./model").DBTableHeadDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
|
|
3
|
-
export default DBTableHead;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
|
-
import { useRef, forwardRef } from "react";
|
|
5
|
-
import { cls } from "../../utils";
|
|
6
|
-
import DBTableRow from "../table-row/table-row";
|
|
7
|
-
import { useId } from "react";
|
|
8
|
-
function DBTableHeadFn(props, component) {
|
|
9
|
-
var _a;
|
|
10
|
-
const uuid = useId();
|
|
11
|
-
const _ref = component || useRef(undefined);
|
|
12
|
-
function getCells(cells) {
|
|
13
|
-
return cells === null || cells === void 0 ? void 0 : cells.map((cell) => (Object.assign(Object.assign({}, cell), { headerCell: true })));
|
|
14
|
-
}
|
|
15
|
-
return (React.createElement("thead", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-head", props.className) }), props.rows ? (React.createElement(React.Fragment, null, (_a = props.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
|
|
16
|
-
var _a, _b;
|
|
17
|
-
return (React.createElement(DBTableRow, { key: `${(_a = props.id) !== null && _a !== void 0 ? _a : uuid}-table-head-row-${index}`, cells: getCells(row.cells), className: (_b = row.className) !== null && _b !== void 0 ? _b : row.class, subHeaderEmphasis: row.subHeaderEmphasis, id: row.id }));
|
|
18
|
-
}))) : (React.createElement(React.Fragment, null, props.children))));
|
|
19
|
-
}
|
|
20
|
-
const DBTableHead = forwardRef(DBTableHeadFn);
|
|
21
|
-
export default DBTableHead;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableHeaderCell } from "./table-header-cell";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableHeaderCell } from "./table-header-cell";
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { DBTableCellProps, GlobalProps, GlobalState } from '../../shared/model';
|
|
2
|
-
export declare const DBTableHeaderCellScopeList: readonly ["row", "col", "rowgroup", "colgroup"];
|
|
3
|
-
export type DBTableHeaderCellScopeType = (typeof DBTableHeaderCellScopeList)[number];
|
|
4
|
-
export type DBTableHeaderCellDefaultProps = {
|
|
5
|
-
/**
|
|
6
|
-
* The **`abbr`** property of the HTMLTableCellElement interface indicates an abbreviation associated with the cell.
|
|
7
|
-
*
|
|
8
|
-
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/abbr)
|
|
9
|
-
*/
|
|
10
|
-
abbr?: string;
|
|
11
|
-
/**
|
|
12
|
-
* The **`scope`** property of the HTMLTableCellElement interface indicates the scope of a th cell.
|
|
13
|
-
*
|
|
14
|
-
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/scope)
|
|
15
|
-
*/
|
|
16
|
-
scope?: DBTableHeaderCellScopeType;
|
|
17
|
-
/**
|
|
18
|
-
* Hide the text content of the cell.
|
|
19
|
-
*/
|
|
20
|
-
noText?: boolean | string;
|
|
21
|
-
};
|
|
22
|
-
export type DBTableHeaderCellProps = DBTableHeaderCellDefaultProps & GlobalProps & DBTableCellProps;
|
|
23
|
-
export type DBTableHeaderCellDefaultState = {};
|
|
24
|
-
export type DBTableHeaderCellState = DBTableHeaderCellDefaultState & GlobalState;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const DBTableHeaderCellScopeList = ['row', 'col', 'rowgroup', 'colgroup'];
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
declare const DBTableHeaderCell: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | keyof import("../..").DBTableCellProps | keyof import("./model").DBTableHeaderCellDefaultProps> & import("./model").DBTableHeaderCellDefaultProps & import("../..").GlobalProps & import("../..").DBTableCellProps & React.RefAttributes<any>>;
|
|
3
|
-
export default DBTableHeaderCell;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
|
-
import { useRef, forwardRef } from "react";
|
|
5
|
-
import { cls, getBooleanAsString, getNumber } from "../../utils";
|
|
6
|
-
function DBTableHeaderCellFn(props, component) {
|
|
7
|
-
const _ref = component || useRef(undefined);
|
|
8
|
-
return (React.createElement("th", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-header-cell", props.className), "data-horizontal-alignment": props.horizontalAlignment, "data-vertical-alignment": props.verticalAlignment, "data-no-text": getBooleanAsString(props.noText), scope: props.scope, colSpan: getNumber(props.colSpan, props.colspan), rowSpan: getNumber(props.rowSpan, props.rowspan), headers: props.headers, abbr: props.abbr }), props.children));
|
|
9
|
-
}
|
|
10
|
-
const DBTableHeaderCell = forwardRef(DBTableHeaderCellFn);
|
|
11
|
-
export default DBTableHeaderCell;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableRow } from "./table-row";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBTableRow } from "./table-row";
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { GlobalProps, GlobalState } from '../../shared/model';
|
|
2
|
-
import { DBLinkProps } from '../link/model';
|
|
3
|
-
import { DBTableDataCellProps } from '../table-data-cell/model';
|
|
4
|
-
import { DBTableHeaderCellProps } from '../table-header-cell/model';
|
|
5
|
-
export declare const DBTableRowSubHeaderEmphasisList: readonly ["none", "weak", "strong"];
|
|
6
|
-
export type DBTableRowSubHeaderEmphasisType = (typeof DBTableRowSubHeaderEmphasisList)[number];
|
|
7
|
-
export type DBTableRowCell = (DBTableHeaderCellProps | DBTableDataCellProps) & {
|
|
8
|
-
headerCell?: boolean;
|
|
9
|
-
content?: any;
|
|
10
|
-
link?: DBLinkProps;
|
|
11
|
-
};
|
|
12
|
-
export type DBTableRowDefaultProps = {
|
|
13
|
-
/**
|
|
14
|
-
* All cells of the row
|
|
15
|
-
*/
|
|
16
|
-
cells?: DBTableRowCell[];
|
|
17
|
-
/**
|
|
18
|
-
* Change styling of row only if it is inside thead
|
|
19
|
-
*/
|
|
20
|
-
subHeaderEmphasis?: DBTableRowSubHeaderEmphasisType;
|
|
21
|
-
/**
|
|
22
|
-
* If true marks the row as interactive, which checks for child with data-table-row-action="true"
|
|
23
|
-
*/
|
|
24
|
-
interactive?: boolean | string;
|
|
25
|
-
};
|
|
26
|
-
export type DBTableRowProps = DBTableRowDefaultProps & GlobalProps;
|
|
27
|
-
export type DBTableRowDefaultState = {
|
|
28
|
-
getHeaderCell: (cell: DBTableRowCell) => DBTableHeaderCellProps | undefined;
|
|
29
|
-
};
|
|
30
|
-
export type DBTableRowState = DBTableRowDefaultState & GlobalState;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const DBTableRowSubHeaderEmphasisList = ['none', 'weak', 'strong'];
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
declare const DBTableRow: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | keyof import("./model").DBTableRowDefaultProps> & import("./model").DBTableRowDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
|
|
3
|
-
export default DBTableRow;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
|
-
import { useRef, forwardRef } from "react";
|
|
5
|
-
import { cls, getBooleanAsString } from "../../utils";
|
|
6
|
-
import DBLink from "../link/link";
|
|
7
|
-
import DBTableDataCell from "../table-data-cell/table-data-cell";
|
|
8
|
-
import DBTableHeaderCell from "../table-header-cell/table-header-cell";
|
|
9
|
-
import { useId } from "react";
|
|
10
|
-
function DBTableRowFn(props, component) {
|
|
11
|
-
var _a;
|
|
12
|
-
const uuid = useId();
|
|
13
|
-
const _ref = component || useRef(undefined);
|
|
14
|
-
function getHeaderCell(cell) {
|
|
15
|
-
if (cell.headerCell) {
|
|
16
|
-
return cell;
|
|
17
|
-
}
|
|
18
|
-
return undefined;
|
|
19
|
-
}
|
|
20
|
-
return (React.createElement("tr", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-row", props.className), "data-interactive": getBooleanAsString(props.interactive), "data-sub-header-emphasis": props.subHeaderEmphasis }), props.cells ? (React.createElement(React.Fragment, null, (_a = props.cells) === null || _a === void 0 ? void 0 : _a.map((cell, index) => {
|
|
21
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20;
|
|
22
|
-
return cell.headerCell ? (React.createElement(DBTableHeaderCell, { key: `${(_a = props.id) !== null && _a !== void 0 ? _a : uuid}-table-row-header-cell-${index}`, id: cell.id, abbr: (_b = getHeaderCell(cell)) === null || _b === void 0 ? void 0 : _b.abbr, scope: (_c = getHeaderCell(cell)) === null || _c === void 0 ? void 0 : _c.scope, noText: (_d = getHeaderCell(cell)) === null || _d === void 0 ? void 0 : _d.noText, className: (_e = cell.className) !== null && _e !== void 0 ? _e : cell.class, horizontalAlignment: cell.horizontalAlignment, verticalAlignment: cell.verticalAlignment, headers: cell.headers, colSpan: cell.colSpan, colspan: cell.colspan, rowSpan: cell.rowSpan, rowspan: cell.rowspan }, cell.link ? (React.createElement(DBLink, { content: (_f = cell.link) === null || _f === void 0 ? void 0 : _f.content, size: (_g = cell.link) === null || _g === void 0 ? void 0 : _g.size, variant: (_h = cell.link) === null || _h === void 0 ? void 0 : _h.variant, className: (_k = (_j = cell.link) === null || _j === void 0 ? void 0 : _j.className) !== null && _k !== void 0 ? _k : (_l = cell.link) === null || _l === void 0 ? void 0 : _l.class, id: (_m = cell.link) === null || _m === void 0 ? void 0 : _m.id, autofocus: (_o = cell.link) === null || _o === void 0 ? void 0 : _o.autofocus, disabled: (_p = cell.link) === null || _p === void 0 ? void 0 : _p.disabled, href: (_q = cell.link) === null || _q === void 0 ? void 0 : _q.href, hreflang: (_r = cell.link) === null || _r === void 0 ? void 0 : _r.hreflang, target: (_s = cell.link) === null || _s === void 0 ? void 0 : _s.target, rel: (_t = cell.link) === null || _t === void 0 ? void 0 : _t.rel, referrerPolicy: (_u = cell.link) === null || _u === void 0 ? void 0 : _u.referrerPolicy, role: (_v = cell.link) === null || _v === void 0 ? void 0 : _v.role, showIcon: (_w = cell.link) === null || _w === void 0 ? void 0 : _w.showIcon, text: (_x = cell.link) === null || _x === void 0 ? void 0 : _x.text, wrap: (_y = cell.link) === null || _y === void 0 ? void 0 : _y.wrap }, (_z = cell.link) === null || _z === void 0 ? void 0 : _z.children)) : (React.createElement(React.Fragment, null, cell.content)))) : (React.createElement(DBTableDataCell, { key: `${(_0 = props.id) !== null && _0 !== void 0 ? _0 : uuid}-table-row-data-cell-${index}`, id: cell.id, className: (_1 = cell.className) !== null && _1 !== void 0 ? _1 : cell.class, horizontalAlignment: cell.horizontalAlignment, verticalAlignment: cell.verticalAlignment, headers: cell.headers, colSpan: cell.colSpan, colspan: cell.colspan, rowSpan: cell.rowSpan, rowspan: cell.rowspan }, cell.link ? (React.createElement(DBLink, { content: (_2 = cell.link) === null || _2 === void 0 ? void 0 : _2.content, size: (_3 = cell.link) === null || _3 === void 0 ? void 0 : _3.size, variant: (_4 = cell.link) === null || _4 === void 0 ? void 0 : _4.variant, className: (_6 = (_5 = cell.link) === null || _5 === void 0 ? void 0 : _5.className) !== null && _6 !== void 0 ? _6 : (_7 = cell.link) === null || _7 === void 0 ? void 0 : _7.class, id: (_8 = cell.link) === null || _8 === void 0 ? void 0 : _8.id, autofocus: (_9 = cell.link) === null || _9 === void 0 ? void 0 : _9.autofocus, disabled: (_10 = cell.link) === null || _10 === void 0 ? void 0 : _10.disabled, href: (_11 = cell.link) === null || _11 === void 0 ? void 0 : _11.href, hreflang: (_12 = cell.link) === null || _12 === void 0 ? void 0 : _12.hreflang, target: (_13 = cell.link) === null || _13 === void 0 ? void 0 : _13.target, rel: (_14 = cell.link) === null || _14 === void 0 ? void 0 : _14.rel, referrerPolicy: (_15 = cell.link) === null || _15 === void 0 ? void 0 : _15.referrerPolicy, role: (_16 = cell.link) === null || _16 === void 0 ? void 0 : _16.role, showIcon: (_17 = cell.link) === null || _17 === void 0 ? void 0 : _17.showIcon, text: (_18 = cell.link) === null || _18 === void 0 ? void 0 : _18.text, wrap: (_19 = cell.link) === null || _19 === void 0 ? void 0 : _19.wrap }, (_20 = cell.link) === null || _20 === void 0 ? void 0 : _20.children)) : (React.createElement(React.Fragment, null, cell.content))));
|
|
23
|
-
}))) : (React.createElement(React.Fragment, null, props.children))));
|
|
24
|
-
}
|
|
25
|
-
const DBTableRow = forwardRef(DBTableRowFn);
|
|
26
|
-
export default DBTableRow;
|