@db-ux/react-core-components 4.10.1 → 4.11.0
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/CHANGELOG.md +16 -0
- package/README.md +1 -1
- package/dist/components/accordion-item/accordion-item.js +1 -1
- package/dist/components/badge/badge.js +1 -1
- package/dist/components/brand/brand.js +1 -1
- package/dist/components/button/button.js +4 -4
- package/dist/components/custom-button/custom-button.js +3 -3
- package/dist/components/custom-select/custom-select.js +5 -5
- package/dist/components/custom-select-list-item/custom-select-list-item.js +2 -2
- package/dist/components/drawer/drawer.js +1 -1
- package/dist/components/infotext/infotext.js +2 -2
- package/dist/components/input/input.js +2 -2
- package/dist/components/link/link.js +3 -3
- package/dist/components/navigation-item/navigation-item.js +3 -3
- package/dist/components/notification/notification.js +1 -1
- package/dist/components/page/page.js +2 -2
- package/dist/components/popover/popover.js +3 -3
- package/dist/components/select/select.js +2 -2
- package/dist/components/stack/stack.js +1 -1
- package/dist/components/switch/switch.js +1 -1
- package/dist/components/tab-item/tab-item.js +3 -3
- package/dist/components/table/examples/data.d.ts +9 -0
- package/dist/components/table/index.d.ts +1 -0
- package/dist/components/table/model.d.ts +74 -0
- package/dist/components/table/model.js +28 -0
- package/dist/components/table/table.d.ts +3 -0
- package/dist/components/table/table.js +113 -0
- package/dist/components/table-body/index.d.ts +1 -0
- package/dist/components/table-body/model.d.ts +8 -0
- package/dist/components/table-body/table-body.d.ts +3 -0
- package/dist/components/table-body/table-body.js +66 -0
- package/dist/components/table-caption/index.d.ts +1 -0
- package/dist/components/table-caption/model.d.ts +5 -0
- package/dist/components/table-caption/table-caption.d.ts +3 -0
- package/dist/components/table-caption/table-caption.js +59 -0
- package/dist/components/table-data-cell/index.d.ts +1 -0
- package/dist/components/table-data-cell/model.d.ts +5 -0
- package/dist/components/table-data-cell/table-data-cell.d.ts +3 -0
- package/dist/components/table-data-cell/table-data-cell.js +64 -0
- package/dist/components/table-footer/index.d.ts +1 -0
- package/dist/components/table-footer/model.d.ts +8 -0
- package/dist/components/table-footer/table-footer.d.ts +3 -0
- package/dist/components/table-footer/table-footer.js +66 -0
- package/dist/components/table-head/index.d.ts +1 -0
- package/dist/components/table-head/model.d.ts +10 -0
- package/dist/components/table-head/table-head.d.ts +3 -0
- package/dist/components/table-head/table-head.js +73 -0
- package/dist/components/table-header-cell/index.d.ts +1 -0
- package/dist/components/table-header-cell/model.d.ts +24 -0
- package/dist/components/table-header-cell/model.js +9 -0
- package/dist/components/table-header-cell/table-header-cell.d.ts +3 -0
- package/dist/components/table-header-cell/table-header-cell.js +67 -0
- package/dist/components/table-row/index.d.ts +1 -0
- package/dist/components/table-row/model.d.ts +30 -0
- package/dist/components/table-row/model.js +8 -0
- package/dist/components/table-row/table-row.d.ts +3 -0
- package/dist/components/table-row/table-row.js +129 -0
- package/dist/components/tag/tag.js +4 -4
- package/dist/components/tooltip/tooltip.js +3 -3
- package/dist/index.d.ts +16 -0
- package/dist/index.js +19 -8
- package/dist/shared/figma.d.ts +70 -18
- package/dist/shared/model.d.ts +44 -2
- package/dist/shared/model.js +5 -1
- package/dist/utils/index.d.ts +9 -4
- package/dist/utils/index.js +5 -5
- package/package.json +8 -8
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
|
|
3
|
+
import { cls as n } from "../../utils/index.js";
|
|
4
|
+
import { forwardRef as r, useRef as i } from "react";
|
|
5
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/table-caption/table-caption.tsx
|
|
7
|
+
function o(r, o) {
|
|
8
|
+
return /* @__PURE__ */ a("caption", {
|
|
9
|
+
ref: o || i(void 0),
|
|
10
|
+
...e(r, [
|
|
11
|
+
"data-icon-variant",
|
|
12
|
+
"data-icon-variant-before",
|
|
13
|
+
"data-icon-variant-after",
|
|
14
|
+
"data-icon-weight",
|
|
15
|
+
"data-icon-weight-before",
|
|
16
|
+
"data-icon-weight-after",
|
|
17
|
+
"data-interactive",
|
|
18
|
+
"data-force-mobile",
|
|
19
|
+
"data-color",
|
|
20
|
+
"data-container-color",
|
|
21
|
+
"data-bg-color",
|
|
22
|
+
"data-on-bg-color",
|
|
23
|
+
"data-color-scheme",
|
|
24
|
+
"data-font-size",
|
|
25
|
+
"data-headline-size",
|
|
26
|
+
"data-divider",
|
|
27
|
+
"data-focus",
|
|
28
|
+
"data-font",
|
|
29
|
+
"data-density"
|
|
30
|
+
]),
|
|
31
|
+
id: r.id,
|
|
32
|
+
...t(r, [
|
|
33
|
+
"data-icon-variant",
|
|
34
|
+
"data-icon-variant-before",
|
|
35
|
+
"data-icon-variant-after",
|
|
36
|
+
"data-icon-weight",
|
|
37
|
+
"data-icon-weight-before",
|
|
38
|
+
"data-icon-weight-after",
|
|
39
|
+
"data-interactive",
|
|
40
|
+
"data-force-mobile",
|
|
41
|
+
"data-color",
|
|
42
|
+
"data-container-color",
|
|
43
|
+
"data-bg-color",
|
|
44
|
+
"data-on-bg-color",
|
|
45
|
+
"data-color-scheme",
|
|
46
|
+
"data-font-size",
|
|
47
|
+
"data-headline-size",
|
|
48
|
+
"data-divider",
|
|
49
|
+
"data-focus",
|
|
50
|
+
"data-font",
|
|
51
|
+
"data-density"
|
|
52
|
+
]),
|
|
53
|
+
className: n("db-table-caption", r.className),
|
|
54
|
+
children: r.children
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
var s = r(o);
|
|
58
|
+
//#endregion
|
|
59
|
+
export { s as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBTableDataCell } from './table-data-cell';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { 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;
|
|
@@ -0,0 +1,3 @@
|
|
|
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;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
|
|
3
|
+
import { cls as n, getNumber as r } from "../../utils/index.js";
|
|
4
|
+
import { forwardRef as i, useRef as a } from "react";
|
|
5
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/table-data-cell/table-data-cell.tsx
|
|
7
|
+
function s(i, s) {
|
|
8
|
+
return /* @__PURE__ */ o("td", {
|
|
9
|
+
ref: s || a(void 0),
|
|
10
|
+
...e(i, [
|
|
11
|
+
"data-icon-variant",
|
|
12
|
+
"data-icon-variant-before",
|
|
13
|
+
"data-icon-variant-after",
|
|
14
|
+
"data-icon-weight",
|
|
15
|
+
"data-icon-weight-before",
|
|
16
|
+
"data-icon-weight-after",
|
|
17
|
+
"data-interactive",
|
|
18
|
+
"data-force-mobile",
|
|
19
|
+
"data-color",
|
|
20
|
+
"data-container-color",
|
|
21
|
+
"data-bg-color",
|
|
22
|
+
"data-on-bg-color",
|
|
23
|
+
"data-color-scheme",
|
|
24
|
+
"data-font-size",
|
|
25
|
+
"data-headline-size",
|
|
26
|
+
"data-divider",
|
|
27
|
+
"data-focus",
|
|
28
|
+
"data-font",
|
|
29
|
+
"data-density"
|
|
30
|
+
]),
|
|
31
|
+
id: i.id,
|
|
32
|
+
...t(i, [
|
|
33
|
+
"data-icon-variant",
|
|
34
|
+
"data-icon-variant-before",
|
|
35
|
+
"data-icon-variant-after",
|
|
36
|
+
"data-icon-weight",
|
|
37
|
+
"data-icon-weight-before",
|
|
38
|
+
"data-icon-weight-after",
|
|
39
|
+
"data-interactive",
|
|
40
|
+
"data-force-mobile",
|
|
41
|
+
"data-color",
|
|
42
|
+
"data-container-color",
|
|
43
|
+
"data-bg-color",
|
|
44
|
+
"data-on-bg-color",
|
|
45
|
+
"data-color-scheme",
|
|
46
|
+
"data-font-size",
|
|
47
|
+
"data-headline-size",
|
|
48
|
+
"data-divider",
|
|
49
|
+
"data-focus",
|
|
50
|
+
"data-font",
|
|
51
|
+
"data-density"
|
|
52
|
+
]),
|
|
53
|
+
className: n("db-table-data-cell", i.className),
|
|
54
|
+
"data-horizontal-alignment": i.horizontalAlignment,
|
|
55
|
+
"data-vertical-alignment": i.verticalAlignment,
|
|
56
|
+
colSpan: r(i.colSpan, i.colspan),
|
|
57
|
+
rowSpan: r(i.rowSpan, i.rowspan),
|
|
58
|
+
headers: i.headers,
|
|
59
|
+
children: i.children
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
var c = i(s);
|
|
63
|
+
//#endregion
|
|
64
|
+
export { c as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBTableFooter } from './table-footer';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { GlobalProps, GlobalState } from '../../shared/model';
|
|
2
|
+
import type { 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;
|
|
@@ -0,0 +1,3 @@
|
|
|
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;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
|
|
3
|
+
import { cls as n } from "../../utils/index.js";
|
|
4
|
+
import r from "../table-row/table-row.js";
|
|
5
|
+
import { forwardRef as i, useId as a, useRef as o } from "react";
|
|
6
|
+
import { Fragment as s, jsx as c } from "react/jsx-runtime";
|
|
7
|
+
//#region src/components/table-footer/table-footer.tsx
|
|
8
|
+
function l(i, l) {
|
|
9
|
+
let u = a();
|
|
10
|
+
return /* @__PURE__ */ c("tfoot", {
|
|
11
|
+
ref: l || o(void 0),
|
|
12
|
+
...e(i, [
|
|
13
|
+
"data-icon-variant",
|
|
14
|
+
"data-icon-variant-before",
|
|
15
|
+
"data-icon-variant-after",
|
|
16
|
+
"data-icon-weight",
|
|
17
|
+
"data-icon-weight-before",
|
|
18
|
+
"data-icon-weight-after",
|
|
19
|
+
"data-interactive",
|
|
20
|
+
"data-force-mobile",
|
|
21
|
+
"data-color",
|
|
22
|
+
"data-container-color",
|
|
23
|
+
"data-bg-color",
|
|
24
|
+
"data-on-bg-color",
|
|
25
|
+
"data-color-scheme",
|
|
26
|
+
"data-font-size",
|
|
27
|
+
"data-headline-size",
|
|
28
|
+
"data-divider",
|
|
29
|
+
"data-focus",
|
|
30
|
+
"data-font",
|
|
31
|
+
"data-density"
|
|
32
|
+
]),
|
|
33
|
+
id: i.id,
|
|
34
|
+
...t(i, [
|
|
35
|
+
"data-icon-variant",
|
|
36
|
+
"data-icon-variant-before",
|
|
37
|
+
"data-icon-variant-after",
|
|
38
|
+
"data-icon-weight",
|
|
39
|
+
"data-icon-weight-before",
|
|
40
|
+
"data-icon-weight-after",
|
|
41
|
+
"data-interactive",
|
|
42
|
+
"data-force-mobile",
|
|
43
|
+
"data-color",
|
|
44
|
+
"data-container-color",
|
|
45
|
+
"data-bg-color",
|
|
46
|
+
"data-on-bg-color",
|
|
47
|
+
"data-color-scheme",
|
|
48
|
+
"data-font-size",
|
|
49
|
+
"data-headline-size",
|
|
50
|
+
"data-divider",
|
|
51
|
+
"data-focus",
|
|
52
|
+
"data-font",
|
|
53
|
+
"data-density"
|
|
54
|
+
]),
|
|
55
|
+
className: n("db-table-footer", i.className),
|
|
56
|
+
children: i.rows ? /* @__PURE__ */ c(s, { children: i.rows?.map((e, t) => /* @__PURE__ */ c(r, {
|
|
57
|
+
cells: e.cells,
|
|
58
|
+
className: e.className ?? e.class,
|
|
59
|
+
interactive: e.interactive,
|
|
60
|
+
id: e.id
|
|
61
|
+
}, `${e.id ?? i.id ?? u}-table-footer-row-${t}`)) }) : /* @__PURE__ */ c(s, { children: i.children })
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
var u = i(l);
|
|
65
|
+
//#endregion
|
|
66
|
+
export { u as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBTableHead } from './table-head';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { GlobalProps, GlobalState } from '../../shared/model';
|
|
2
|
+
import type { 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;
|
|
@@ -0,0 +1,3 @@
|
|
|
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;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
|
|
3
|
+
import { cls as n } from "../../utils/index.js";
|
|
4
|
+
import r from "../table-row/table-row.js";
|
|
5
|
+
import { forwardRef as i, useId as a, useRef as o } from "react";
|
|
6
|
+
import { Fragment as s, jsx as c } from "react/jsx-runtime";
|
|
7
|
+
//#region src/components/table-head/table-head.tsx
|
|
8
|
+
function l(i, l) {
|
|
9
|
+
let u = a(), d = l || o(void 0);
|
|
10
|
+
function f(e) {
|
|
11
|
+
return e?.map((e) => ({
|
|
12
|
+
...e,
|
|
13
|
+
headerCell: !0
|
|
14
|
+
}));
|
|
15
|
+
}
|
|
16
|
+
return /* @__PURE__ */ c("thead", {
|
|
17
|
+
ref: d,
|
|
18
|
+
...e(i, [
|
|
19
|
+
"data-icon-variant",
|
|
20
|
+
"data-icon-variant-before",
|
|
21
|
+
"data-icon-variant-after",
|
|
22
|
+
"data-icon-weight",
|
|
23
|
+
"data-icon-weight-before",
|
|
24
|
+
"data-icon-weight-after",
|
|
25
|
+
"data-interactive",
|
|
26
|
+
"data-force-mobile",
|
|
27
|
+
"data-color",
|
|
28
|
+
"data-container-color",
|
|
29
|
+
"data-bg-color",
|
|
30
|
+
"data-on-bg-color",
|
|
31
|
+
"data-color-scheme",
|
|
32
|
+
"data-font-size",
|
|
33
|
+
"data-headline-size",
|
|
34
|
+
"data-divider",
|
|
35
|
+
"data-focus",
|
|
36
|
+
"data-font",
|
|
37
|
+
"data-density"
|
|
38
|
+
]),
|
|
39
|
+
id: i.id,
|
|
40
|
+
...t(i, [
|
|
41
|
+
"data-icon-variant",
|
|
42
|
+
"data-icon-variant-before",
|
|
43
|
+
"data-icon-variant-after",
|
|
44
|
+
"data-icon-weight",
|
|
45
|
+
"data-icon-weight-before",
|
|
46
|
+
"data-icon-weight-after",
|
|
47
|
+
"data-interactive",
|
|
48
|
+
"data-force-mobile",
|
|
49
|
+
"data-color",
|
|
50
|
+
"data-container-color",
|
|
51
|
+
"data-bg-color",
|
|
52
|
+
"data-on-bg-color",
|
|
53
|
+
"data-color-scheme",
|
|
54
|
+
"data-font-size",
|
|
55
|
+
"data-headline-size",
|
|
56
|
+
"data-divider",
|
|
57
|
+
"data-focus",
|
|
58
|
+
"data-font",
|
|
59
|
+
"data-density"
|
|
60
|
+
]),
|
|
61
|
+
className: n("db-table-head", i.className),
|
|
62
|
+
children: i.rows ? /* @__PURE__ */ c(s, { children: i.rows?.map((e, t) => /* @__PURE__ */ c(r, {
|
|
63
|
+
cells: f(e.cells),
|
|
64
|
+
className: e.className ?? e.class,
|
|
65
|
+
subHeaderEmphasis: e.subHeaderEmphasis,
|
|
66
|
+
interactive: e.interactive,
|
|
67
|
+
id: e.id
|
|
68
|
+
}, `${e.id ?? i.id ?? u}-table-head-row-${t}`)) }) : /* @__PURE__ */ c(s, { children: i.children })
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
var u = i(l);
|
|
72
|
+
//#endregion
|
|
73
|
+
export { u as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBTableHeaderCell } from './table-header-cell';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { 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;
|
|
@@ -0,0 +1,3 @@
|
|
|
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;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
|
|
3
|
+
import { cls as n, getBooleanAsString as r, getNumber as i } from "../../utils/index.js";
|
|
4
|
+
import { forwardRef as a, useRef as o } from "react";
|
|
5
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/table-header-cell/table-header-cell.tsx
|
|
7
|
+
function c(a, c) {
|
|
8
|
+
return /* @__PURE__ */ s("th", {
|
|
9
|
+
ref: c || o(void 0),
|
|
10
|
+
...e(a, [
|
|
11
|
+
"data-icon-variant",
|
|
12
|
+
"data-icon-variant-before",
|
|
13
|
+
"data-icon-variant-after",
|
|
14
|
+
"data-icon-weight",
|
|
15
|
+
"data-icon-weight-before",
|
|
16
|
+
"data-icon-weight-after",
|
|
17
|
+
"data-interactive",
|
|
18
|
+
"data-force-mobile",
|
|
19
|
+
"data-color",
|
|
20
|
+
"data-container-color",
|
|
21
|
+
"data-bg-color",
|
|
22
|
+
"data-on-bg-color",
|
|
23
|
+
"data-color-scheme",
|
|
24
|
+
"data-font-size",
|
|
25
|
+
"data-headline-size",
|
|
26
|
+
"data-divider",
|
|
27
|
+
"data-focus",
|
|
28
|
+
"data-font",
|
|
29
|
+
"data-density"
|
|
30
|
+
]),
|
|
31
|
+
id: a.id,
|
|
32
|
+
...t(a, [
|
|
33
|
+
"data-icon-variant",
|
|
34
|
+
"data-icon-variant-before",
|
|
35
|
+
"data-icon-variant-after",
|
|
36
|
+
"data-icon-weight",
|
|
37
|
+
"data-icon-weight-before",
|
|
38
|
+
"data-icon-weight-after",
|
|
39
|
+
"data-interactive",
|
|
40
|
+
"data-force-mobile",
|
|
41
|
+
"data-color",
|
|
42
|
+
"data-container-color",
|
|
43
|
+
"data-bg-color",
|
|
44
|
+
"data-on-bg-color",
|
|
45
|
+
"data-color-scheme",
|
|
46
|
+
"data-font-size",
|
|
47
|
+
"data-headline-size",
|
|
48
|
+
"data-divider",
|
|
49
|
+
"data-focus",
|
|
50
|
+
"data-font",
|
|
51
|
+
"data-density"
|
|
52
|
+
]),
|
|
53
|
+
className: n("db-table-header-cell", a.className),
|
|
54
|
+
"data-horizontal-alignment": a.horizontalAlignment,
|
|
55
|
+
"data-vertical-alignment": a.verticalAlignment,
|
|
56
|
+
"data-no-text": r(a.noText),
|
|
57
|
+
scope: a.scope,
|
|
58
|
+
colSpan: i(a.colSpan, a.colspan),
|
|
59
|
+
rowSpan: i(a.rowSpan, a.rowspan),
|
|
60
|
+
headers: a.headers,
|
|
61
|
+
abbr: a.abbr,
|
|
62
|
+
children: a.children
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
var l = a(c);
|
|
66
|
+
//#endregion
|
|
67
|
+
export { l as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBTableRow } from './table-row';
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { GlobalProps, GlobalState } from '../../shared/model';
|
|
2
|
+
import type { DBLinkProps } from '../link/model';
|
|
3
|
+
import type { DBTableDataCellProps } from '../table-data-cell/model';
|
|
4
|
+
import type { 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-trigger="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;
|
|
@@ -0,0 +1,3 @@
|
|
|
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;
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
|
|
3
|
+
import { cls as n, getBooleanAsString as r } from "../../utils/index.js";
|
|
4
|
+
import i from "../link/link.js";
|
|
5
|
+
import a from "../table-data-cell/table-data-cell.js";
|
|
6
|
+
import o from "../table-header-cell/table-header-cell.js";
|
|
7
|
+
import { forwardRef as s, useId as c, useRef as l } from "react";
|
|
8
|
+
import { Fragment as u, jsx as d } from "react/jsx-runtime";
|
|
9
|
+
//#region src/components/table-row/table-row.tsx
|
|
10
|
+
function f(s, f) {
|
|
11
|
+
let p = c(), m = f || l(void 0);
|
|
12
|
+
function h(e) {
|
|
13
|
+
if (e.headerCell) return e;
|
|
14
|
+
}
|
|
15
|
+
return /* @__PURE__ */ d("tr", {
|
|
16
|
+
ref: m,
|
|
17
|
+
...e(s, [
|
|
18
|
+
"data-icon-variant",
|
|
19
|
+
"data-icon-variant-before",
|
|
20
|
+
"data-icon-variant-after",
|
|
21
|
+
"data-icon-weight",
|
|
22
|
+
"data-icon-weight-before",
|
|
23
|
+
"data-icon-weight-after",
|
|
24
|
+
"data-interactive",
|
|
25
|
+
"data-force-mobile",
|
|
26
|
+
"data-color",
|
|
27
|
+
"data-container-color",
|
|
28
|
+
"data-bg-color",
|
|
29
|
+
"data-on-bg-color",
|
|
30
|
+
"data-color-scheme",
|
|
31
|
+
"data-font-size",
|
|
32
|
+
"data-headline-size",
|
|
33
|
+
"data-divider",
|
|
34
|
+
"data-focus",
|
|
35
|
+
"data-font",
|
|
36
|
+
"data-density"
|
|
37
|
+
]),
|
|
38
|
+
id: s.id,
|
|
39
|
+
...t(s, [
|
|
40
|
+
"data-icon-variant",
|
|
41
|
+
"data-icon-variant-before",
|
|
42
|
+
"data-icon-variant-after",
|
|
43
|
+
"data-icon-weight",
|
|
44
|
+
"data-icon-weight-before",
|
|
45
|
+
"data-icon-weight-after",
|
|
46
|
+
"data-interactive",
|
|
47
|
+
"data-force-mobile",
|
|
48
|
+
"data-color",
|
|
49
|
+
"data-container-color",
|
|
50
|
+
"data-bg-color",
|
|
51
|
+
"data-on-bg-color",
|
|
52
|
+
"data-color-scheme",
|
|
53
|
+
"data-font-size",
|
|
54
|
+
"data-headline-size",
|
|
55
|
+
"data-divider",
|
|
56
|
+
"data-focus",
|
|
57
|
+
"data-font",
|
|
58
|
+
"data-density"
|
|
59
|
+
]),
|
|
60
|
+
className: n("db-table-row", s.className),
|
|
61
|
+
"data-interactive": r(s.interactive),
|
|
62
|
+
"data-sub-header-emphasis": s.subHeaderEmphasis,
|
|
63
|
+
children: s.cells ? /* @__PURE__ */ d(u, { children: s.cells?.map((e, t) => e.headerCell ? /* @__PURE__ */ d(o, {
|
|
64
|
+
id: e.id,
|
|
65
|
+
abbr: h(e)?.abbr,
|
|
66
|
+
scope: h(e)?.scope,
|
|
67
|
+
noText: h(e)?.noText,
|
|
68
|
+
className: e.className ?? e.class,
|
|
69
|
+
horizontalAlignment: e.horizontalAlignment,
|
|
70
|
+
verticalAlignment: e.verticalAlignment,
|
|
71
|
+
headers: e.headers,
|
|
72
|
+
colSpan: e.colSpan,
|
|
73
|
+
colspan: e.colspan,
|
|
74
|
+
rowSpan: e.rowSpan,
|
|
75
|
+
rowspan: e.rowspan,
|
|
76
|
+
children: e.link ? /* @__PURE__ */ d(i, {
|
|
77
|
+
content: e.link?.content,
|
|
78
|
+
size: e.link?.size,
|
|
79
|
+
variant: e.link?.variant,
|
|
80
|
+
className: e.link?.className ?? e.link?.class,
|
|
81
|
+
id: e.link?.id,
|
|
82
|
+
autofocus: e.link?.autofocus,
|
|
83
|
+
disabled: e.link?.disabled,
|
|
84
|
+
href: e.link?.href,
|
|
85
|
+
hreflang: e.link?.hreflang,
|
|
86
|
+
target: e.link?.target,
|
|
87
|
+
rel: e.link?.rel,
|
|
88
|
+
referrerPolicy: e.link?.referrerPolicy,
|
|
89
|
+
role: e.link?.role,
|
|
90
|
+
showIcon: e.link?.showIcon,
|
|
91
|
+
text: e.link?.text,
|
|
92
|
+
wrap: e.link?.wrap,
|
|
93
|
+
children: e.link?.children
|
|
94
|
+
}) : /* @__PURE__ */ d(u, { children: e.content })
|
|
95
|
+
}, `${e.id ?? s.id ?? p}-table-row-header-cell-${t}`) : /* @__PURE__ */ d(a, {
|
|
96
|
+
id: e.id,
|
|
97
|
+
className: e.className ?? e.class,
|
|
98
|
+
horizontalAlignment: e.horizontalAlignment,
|
|
99
|
+
verticalAlignment: e.verticalAlignment,
|
|
100
|
+
headers: e.headers,
|
|
101
|
+
colSpan: e.colSpan,
|
|
102
|
+
colspan: e.colspan,
|
|
103
|
+
rowSpan: e.rowSpan,
|
|
104
|
+
rowspan: e.rowspan,
|
|
105
|
+
children: e.link ? /* @__PURE__ */ d(i, {
|
|
106
|
+
content: e.link?.content,
|
|
107
|
+
size: e.link?.size,
|
|
108
|
+
variant: e.link?.variant,
|
|
109
|
+
className: e.link?.className ?? e.link?.class,
|
|
110
|
+
id: e.link?.id,
|
|
111
|
+
autofocus: e.link?.autofocus,
|
|
112
|
+
disabled: e.link?.disabled,
|
|
113
|
+
href: e.link?.href,
|
|
114
|
+
hreflang: e.link?.hreflang,
|
|
115
|
+
target: e.link?.target,
|
|
116
|
+
rel: e.link?.rel,
|
|
117
|
+
referrerPolicy: e.link?.referrerPolicy,
|
|
118
|
+
role: e.link?.role,
|
|
119
|
+
showIcon: e.link?.showIcon,
|
|
120
|
+
text: e.link?.text,
|
|
121
|
+
wrap: e.link?.wrap,
|
|
122
|
+
children: e.link?.children
|
|
123
|
+
}) : /* @__PURE__ */ d(u, { children: e.content })
|
|
124
|
+
}, `${e.id ?? s.id ?? p}-table-row-data-cell-${t}`)) }) : /* @__PURE__ */ d(u, { children: s.children })
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
var p = s(f);
|
|
128
|
+
//#endregion
|
|
129
|
+
export { p as default };
|
|
@@ -64,10 +64,10 @@ function d(o, d) {
|
|
|
64
64
|
"data-semantic": o.semantic,
|
|
65
65
|
"data-emphasis": o.emphasis,
|
|
66
66
|
"data-icon": o.icon,
|
|
67
|
-
"data-show-check-state": r(o.showCheckState ?? !0),
|
|
68
|
-
"data-show-icon": r(o.showIcon),
|
|
69
|
-
"data-no-text": r(o.noText),
|
|
70
|
-
"data-overflow": r(o.overflow),
|
|
67
|
+
"data-show-check-state": r(o.showCheckState ?? !0, "showCheckState"),
|
|
68
|
+
"data-show-icon": r(o.showIcon, "showIcon"),
|
|
69
|
+
"data-no-text": r(o.noText, "noText"),
|
|
70
|
+
"data-overflow": r(o.overflow, "overflow"),
|
|
71
71
|
children: [
|
|
72
72
|
/* @__PURE__ */ l(c, { children: o.content }),
|
|
73
73
|
o.text ? /* @__PURE__ */ l(c, { children: o.text }) : null,
|
|
@@ -106,11 +106,11 @@ function g(c, g) {
|
|
|
106
106
|
className: n("db-tooltip", c.className),
|
|
107
107
|
id: y,
|
|
108
108
|
"data-emphasis": c.emphasis,
|
|
109
|
-
"data-wrap": i(c.wrap),
|
|
110
|
-
"data-animation": i(c.animation ?? !0),
|
|
109
|
+
"data-wrap": i(c.wrap, "wrap"),
|
|
110
|
+
"data-animation": i(c.animation ?? !0, "animation"),
|
|
111
111
|
"data-delay": c.delay,
|
|
112
112
|
"data-width": c.width,
|
|
113
|
-
"data-show-arrow": i(c.showArrow ?? !0),
|
|
113
|
+
"data-show-arrow": i(c.showArrow ?? !0, "showArrow"),
|
|
114
114
|
"data-placement": c.placement,
|
|
115
115
|
onClick: (e) => D(e),
|
|
116
116
|
children: [c.text ? /* @__PURE__ */ m(p, { children: c.text }) : null, c.children]
|
package/dist/index.d.ts
CHANGED
|
@@ -64,6 +64,22 @@ export * from './components/tab-list';
|
|
|
64
64
|
export * from './components/tab-list/model';
|
|
65
65
|
export * from './components/tab-panel';
|
|
66
66
|
export * from './components/tab-panel/model';
|
|
67
|
+
export * from './components/table';
|
|
68
|
+
export * from './components/table-body';
|
|
69
|
+
export * from './components/table-body/model';
|
|
70
|
+
export * from './components/table-caption';
|
|
71
|
+
export * from './components/table-caption/model';
|
|
72
|
+
export * from './components/table-data-cell';
|
|
73
|
+
export * from './components/table-data-cell/model';
|
|
74
|
+
export * from './components/table-footer';
|
|
75
|
+
export * from './components/table-footer/model';
|
|
76
|
+
export * from './components/table-head';
|
|
77
|
+
export * from './components/table-head/model';
|
|
78
|
+
export * from './components/table-header-cell';
|
|
79
|
+
export * from './components/table-header-cell/model';
|
|
80
|
+
export * from './components/table-row';
|
|
81
|
+
export * from './components/table-row/model';
|
|
82
|
+
export * from './components/table/model';
|
|
67
83
|
export * from './components/tabs';
|
|
68
84
|
export * from './components/tabs/model';
|
|
69
85
|
export * from './components/tag';
|