@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.
Files changed (67) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +1 -1
  3. package/dist/components/accordion-item/accordion-item.js +1 -1
  4. package/dist/components/badge/badge.js +1 -1
  5. package/dist/components/brand/brand.js +1 -1
  6. package/dist/components/button/button.js +4 -4
  7. package/dist/components/custom-button/custom-button.js +3 -3
  8. package/dist/components/custom-select/custom-select.js +5 -5
  9. package/dist/components/custom-select-list-item/custom-select-list-item.js +2 -2
  10. package/dist/components/drawer/drawer.js +1 -1
  11. package/dist/components/infotext/infotext.js +2 -2
  12. package/dist/components/input/input.js +2 -2
  13. package/dist/components/link/link.js +3 -3
  14. package/dist/components/navigation-item/navigation-item.js +3 -3
  15. package/dist/components/notification/notification.js +1 -1
  16. package/dist/components/page/page.js +2 -2
  17. package/dist/components/popover/popover.js +3 -3
  18. package/dist/components/select/select.js +2 -2
  19. package/dist/components/stack/stack.js +1 -1
  20. package/dist/components/switch/switch.js +1 -1
  21. package/dist/components/tab-item/tab-item.js +3 -3
  22. package/dist/components/table/examples/data.d.ts +9 -0
  23. package/dist/components/table/index.d.ts +1 -0
  24. package/dist/components/table/model.d.ts +74 -0
  25. package/dist/components/table/model.js +28 -0
  26. package/dist/components/table/table.d.ts +3 -0
  27. package/dist/components/table/table.js +113 -0
  28. package/dist/components/table-body/index.d.ts +1 -0
  29. package/dist/components/table-body/model.d.ts +8 -0
  30. package/dist/components/table-body/table-body.d.ts +3 -0
  31. package/dist/components/table-body/table-body.js +66 -0
  32. package/dist/components/table-caption/index.d.ts +1 -0
  33. package/dist/components/table-caption/model.d.ts +5 -0
  34. package/dist/components/table-caption/table-caption.d.ts +3 -0
  35. package/dist/components/table-caption/table-caption.js +59 -0
  36. package/dist/components/table-data-cell/index.d.ts +1 -0
  37. package/dist/components/table-data-cell/model.d.ts +5 -0
  38. package/dist/components/table-data-cell/table-data-cell.d.ts +3 -0
  39. package/dist/components/table-data-cell/table-data-cell.js +64 -0
  40. package/dist/components/table-footer/index.d.ts +1 -0
  41. package/dist/components/table-footer/model.d.ts +8 -0
  42. package/dist/components/table-footer/table-footer.d.ts +3 -0
  43. package/dist/components/table-footer/table-footer.js +66 -0
  44. package/dist/components/table-head/index.d.ts +1 -0
  45. package/dist/components/table-head/model.d.ts +10 -0
  46. package/dist/components/table-head/table-head.d.ts +3 -0
  47. package/dist/components/table-head/table-head.js +73 -0
  48. package/dist/components/table-header-cell/index.d.ts +1 -0
  49. package/dist/components/table-header-cell/model.d.ts +24 -0
  50. package/dist/components/table-header-cell/model.js +9 -0
  51. package/dist/components/table-header-cell/table-header-cell.d.ts +3 -0
  52. package/dist/components/table-header-cell/table-header-cell.js +67 -0
  53. package/dist/components/table-row/index.d.ts +1 -0
  54. package/dist/components/table-row/model.d.ts +30 -0
  55. package/dist/components/table-row/model.js +8 -0
  56. package/dist/components/table-row/table-row.d.ts +3 -0
  57. package/dist/components/table-row/table-row.js +129 -0
  58. package/dist/components/tag/tag.js +4 -4
  59. package/dist/components/tooltip/tooltip.js +3 -3
  60. package/dist/index.d.ts +16 -0
  61. package/dist/index.js +19 -8
  62. package/dist/shared/figma.d.ts +70 -18
  63. package/dist/shared/model.d.ts +44 -2
  64. package/dist/shared/model.js +5 -1
  65. package/dist/utils/index.d.ts +9 -4
  66. package/dist/utils/index.js +5 -5
  67. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @db-ux/react-core-components
2
2
 
3
+ ## 4.11.0
4
+
5
+ ### Minor Changes
6
+
7
+ - feat: add DBTable, DBTableHead, DBTableBody, DBTableFooter, DBTableRow, DBTableHeaderCell, and DBTableDataCell components - [see commit f64b6e0](https://github.com/db-ux-design-system/core-web/commit/f64b6e0f4b36ea4987c1d9ac7a0328bf317cdcad)
8
+
9
+ ### Patch Changes
10
+
11
+ - fix: Add missing `propertyName` parameter to all `getBooleanAsString` calls across components for consistent string-based boolean parsing. - [see commit 6c11be5](https://github.com/db-ux-design-system/core-web/commit/6c11be54397c425607103f44b987b752efffb6d5)
12
+
13
+ - fix: Remove unwanted whitespace characters from rendered output to prevent layout shifts - [see commit a0f23a4](https://github.com/db-ux-design-system/core-web/commit/a0f23a4a3e715414de3d045b59b88dc3ac28d5e7)
14
+
15
+ ## 4.10.2
16
+
17
+ _version bump_
18
+
3
19
  ## 4.10.1
4
20
 
5
21
  ### Patch Changes
package/README.md CHANGED
@@ -253,7 +253,7 @@ Contributions are very welcome, please refer to the [contribution guide](https:/
253
253
  ## Code of conduct
254
254
 
255
255
  We as members, contributors, and leaders pledge to make participation in our
256
- community a harassment-free experience for everyone – have a look at our [Contributor Covenant Code of Conduct](https://github.com/db-ux-design-system/core-web/blob/main/CODE-OF-CONDUCT.md).
256
+ community a harassment-free experience for everyone – have a look at our [Contributor Covenant Code of Conduct](https://github.com/db-ux-design-system/.github/blob/main/CODE-OF-CONDUCT.md).
257
257
 
258
258
  ## License
259
259
 
@@ -53,7 +53,7 @@ function f(a, f) {
53
53
  ]),
54
54
  className: n("db-accordion-item", a.className),
55
55
  children: /* @__PURE__ */ d("details", {
56
- "aria-disabled": i(a.disabled),
56
+ "aria-disabled": i(a.disabled, "disabled"),
57
57
  ref: p,
58
58
  ...e(a, [
59
59
  "data-icon-variant",
@@ -64,7 +64,7 @@ function d(i, d) {
64
64
  "data-size": i.size,
65
65
  "data-emphasis": i.emphasis,
66
66
  "data-placement": i.placement,
67
- "data-wrap": r(i.wrap),
67
+ "data-wrap": r(i.wrap, "wrap"),
68
68
  "data-label": i.placement?.startsWith("corner") && (i.label ?? "LABEL SHOULD BE SET"),
69
69
  children: [i.text ? /* @__PURE__ */ l(c, { children: i.text }) : null, i.children]
70
70
  });
@@ -30,7 +30,7 @@ function l(i, l) {
30
30
  "data-density"
31
31
  ]),
32
32
  "data-icon": i.hideLogo ? "none" : i.icon ?? "brand",
33
- "data-show-icon": r(i.showIcon),
33
+ "data-show-icon": r(i.showIcon, "showIcon"),
34
34
  id: i.id ?? i.propOverrides?.id,
35
35
  ...t(i, [
36
36
  "data-icon-variant",
@@ -58,14 +58,14 @@ function u(a, u) {
58
58
  type: f(),
59
59
  disabled: r(a.disabled, "disabled"),
60
60
  "data-icon": a.iconLeading ?? a.icon,
61
- "data-show-icon": i(a.showIconLeading ?? a.showIcon),
61
+ "data-show-icon": i(a.showIconLeading, "showIconLeading") || i(a.showIcon, "showIcon"),
62
62
  "data-icon-trailing": a.iconTrailing,
63
- "data-show-icon-trailing": i(a.showIconTrailing),
63
+ "data-show-icon-trailing": i(a.showIconTrailing, "showIconTrailing"),
64
64
  "data-size": a.size,
65
65
  "data-width": a.width,
66
66
  "data-variant": a.variant,
67
- "data-wrap": i(a.wrap),
68
- "data-no-text": i(a.noText),
67
+ "data-wrap": i(a.wrap, "wrap"),
68
+ "data-no-text": i(a.noText, "noText"),
69
69
  name: a.name,
70
70
  form: a.form,
71
71
  value: a.value,
@@ -52,13 +52,13 @@ function s(i, s) {
52
52
  ]),
53
53
  className: n("db-custom-button", i.className),
54
54
  "data-icon": i.iconLeading ?? i.icon,
55
- "data-show-icon": r(i.showIconLeading ?? i.showIcon),
55
+ "data-show-icon": r(i.showIconLeading, "showIconLeading") || r(i.showIcon, "showIcon"),
56
56
  "data-icon-trailing": i.iconTrailing,
57
- "data-show-icon-trailing": r(i.showIconTrailing),
57
+ "data-show-icon-trailing": r(i.showIconTrailing, "showIconTrailing"),
58
58
  "data-size": i.size,
59
59
  "data-width": i.width,
60
60
  "data-variant": i.variant,
61
- "data-no-text": r(i.noText),
61
+ "data-no-text": r(i.noText, "noText"),
62
62
  children: i.children
63
63
  });
64
64
  }
@@ -345,13 +345,13 @@ function v(d, v) {
345
345
  "data-custom-validity": N,
346
346
  "data-width": d.formFieldWidth,
347
347
  "data-variant": d.variant === "floating" && d.selectedType === "tag" && d.multiple ? "above" : d.variant,
348
- "data-required": a(d.required),
348
+ "data-required": a(d.required, "required"),
349
349
  "data-hide-asterisk": ee(d.showRequiredAsterisk),
350
350
  "data-placement": d.placement,
351
351
  "data-selected-type": d.multiple ? d.selectedType : "text",
352
352
  "data-hide-label": ee(d.showLabel),
353
353
  "data-icon": d.icon,
354
- "data-show-icon": a(d.showIcon),
354
+ "data-show-icon": a(d.showIcon, "showIcon"),
355
355
  children: [
356
356
  /* @__PURE__ */ _("label", {
357
357
  id: M,
@@ -383,11 +383,11 @@ function v(d, v) {
383
383
  children: [d.children, d.options ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("summary", {
384
384
  className: "db-custom-select-form-field",
385
385
  id: De,
386
- "aria-disabled": a(d.disabled),
386
+ "aria-disabled": a(d.disabled, "disabled"),
387
387
  tabIndex: d.disabled ? -1 : void 0,
388
388
  "aria-labelledby": M,
389
389
  children: [F?.length ? /* @__PURE__ */ _("span", {
390
- "data-visually-hidden": a(d.selectedType === "tag"),
390
+ "data-visually-hidden": a(d.selectedType === "tag", "selectedType"),
391
391
  id: L,
392
392
  children: [d.selectedPrefix ? /* @__PURE__ */ g("span", {
393
393
  "data-visually-hidden": "true",
@@ -476,7 +476,7 @@ function v(d, v) {
476
476
  }) : null,
477
477
  /* @__PURE__ */ g("span", {
478
478
  className: "db-custom-select-placeholder",
479
- "aria-hidden": a(!0),
479
+ "aria-hidden": "true",
480
480
  id: ke,
481
481
  children: d.placeholder ?? d.label
482
482
  }),
@@ -63,10 +63,10 @@ function f(a, f) {
63
63
  "db-checkbox": a.type === "checkbox" && !a.isGroupTitle,
64
64
  "db-radio": a.type !== "checkbox" && !a.isGroupTitle
65
65
  }),
66
- "data-divider": i(m),
66
+ "data-divider": i(m, "hasDivider"),
67
67
  children: a.isGroupTitle ? /* @__PURE__ */ u("span", { children: a.groupTitle }) : /* @__PURE__ */ d("label", {
68
68
  "data-icon": a.type !== "checkbox" && a.icon ? a.icon : void 0,
69
- "data-show-icon": i(a.showIcon),
69
+ "data-show-icon": i(a.showIcon, "showIcon"),
70
70
  "data-icon-trailing": _(),
71
71
  children: [
72
72
  /* @__PURE__ */ u("input", {
@@ -93,7 +93,7 @@ function h(c, h) {
93
93
  "data-spacing": c.spacing,
94
94
  "data-width": c.width,
95
95
  "data-direction": c.direction,
96
- "data-rounded": a(c.rounded),
96
+ "data-rounded": a(c.rounded, "rounded"),
97
97
  children: [/* @__PURE__ */ m("header", {
98
98
  className: "db-drawer-header",
99
99
  children: [/* @__PURE__ */ p("div", {
@@ -54,8 +54,8 @@ function l(i, l) {
54
54
  "data-icon": i.icon,
55
55
  "data-semantic": i.semantic,
56
56
  "data-size": i.size,
57
- "data-wrap": r(i.wrap),
58
- "data-show-icon-leading": r(i.showIcon ?? !0),
57
+ "data-wrap": r(i.wrap, "wrap"),
58
+ "data-show-icon-leading": r(i.showIcon ?? !0, "showIcon"),
59
59
  children: [i.text ? /* @__PURE__ */ s(o, { children: i.text }) : null, i.children]
60
60
  });
61
61
  }
@@ -88,11 +88,11 @@ function E(y, E) {
88
88
  className: n("db-input", y.className),
89
89
  "data-variant": y.variant,
90
90
  "data-hide-label": o(y.showLabel),
91
- "data-show-icon": a(y.showIconLeading ?? y.showIcon),
91
+ "data-show-icon": a(y.showIconLeading, "showIconLeading") || a(y.showIcon, "showIcon"),
92
92
  "data-icon": y.iconLeading ?? y.icon,
93
93
  "data-icon-trailing": y.iconTrailing,
94
94
  "data-hide-asterisk": o(y.showRequiredAsterisk),
95
- "data-show-icon-trailing": a(y.showIconTrailing),
95
+ "data-show-icon-trailing": a(y.showIconTrailing, "showIconTrailing"),
96
96
  children: [
97
97
  /* @__PURE__ */ w("label", {
98
98
  htmlFor: k,
@@ -57,13 +57,13 @@ function l(i, l) {
57
57
  role: i.role,
58
58
  referrerPolicy: i.referrerpolicy ?? i.referrerPolicy,
59
59
  hrefLang: i.hreflang,
60
- "aria-disabled": r(i.disabled),
60
+ "aria-disabled": r(i.disabled, "disabled"),
61
61
  tabIndex: i.disabled ? -1 : 0,
62
62
  "data-size": i.size,
63
- "data-show-icon-trailing": r(i.showIcon ?? !0),
63
+ "data-show-icon-trailing": r(i.showIcon ?? !0, "showIcon"),
64
64
  "data-variant": i.variant,
65
65
  "data-content": i.content || "internal",
66
- "data-wrap": r(i.wrap),
66
+ "data-wrap": r(i.wrap, "wrap"),
67
67
  children: [i.text ? /* @__PURE__ */ s(o, { children: i.text }) : null, i.children]
68
68
  });
69
69
  }
@@ -82,10 +82,10 @@ function g(c, g) {
82
82
  className: n("db-navigation-item", c.className),
83
83
  "data-width": c.width,
84
84
  "data-icon": c.icon,
85
- "data-show-icon": a(c.showIcon),
85
+ "data-show-icon": a(c.showIcon, "showIcon"),
86
86
  "data-active": c.active,
87
- "data-wrap": a(c.wrap),
88
- "aria-disabled": a(c.disabled),
87
+ "data-wrap": a(c.wrap, "wrap"),
88
+ "aria-disabled": a(c.disabled, "disabled"),
89
89
  children: !i(c.hideSubNavigation, "hideSubNavigation") && C ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
90
90
  className: "db-navigation-item-expand-button",
91
91
  id: N,
@@ -67,7 +67,7 @@ function p(c, p) {
67
67
  "data-semantic": c.semantic,
68
68
  "data-variant": c.variant,
69
69
  "data-icon": r(c.showIcon) === !1 ? void 0 : c.icon,
70
- "data-show-icon": i(c.showIcon),
70
+ "data-show-icon": i(c.showIcon, "showIcon"),
71
71
  "data-link-variant": c.linkVariant,
72
72
  children: [
73
73
  /* @__PURE__ */ d(u, { children: c.image }),
@@ -59,8 +59,8 @@ function d(i, d) {
59
59
  ]),
60
60
  className: n("db-page", i.className),
61
61
  "data-variant": i.variant,
62
- "data-fade-in": r(i.fadeIn),
63
- "data-fonts-loaded": r(p),
62
+ "data-fade-in": r(i.fadeIn, "fadeIn"),
63
+ "data-fonts-loaded": r(p, "fontsLoaded"),
64
64
  children: [
65
65
  /* @__PURE__ */ l(c, { children: i.header }),
66
66
  /* @__PURE__ */ l("main", {
@@ -113,9 +113,9 @@ function m(s, m) {
113
113
  children: [/* @__PURE__ */ f(d, { children: s.trigger }), /* @__PURE__ */ f("article", {
114
114
  className: "db-popover-content",
115
115
  "data-spacing": s.spacing,
116
- "data-gap": i(s.gap),
117
- "data-animation": i(s.animation ?? !0),
118
- "data-open": i(s.open),
116
+ "data-gap": i(s.gap, "gap"),
117
+ "data-animation": i(s.animation ?? !0, "animation"),
118
+ "data-open": i(s.open, "open"),
119
119
  "data-delay": s.delay,
120
120
  "data-width": s.width,
121
121
  "data-placement": s.placement,
@@ -92,7 +92,7 @@ function C(g, C) {
92
92
  "data-hide-label": o(g.showLabel),
93
93
  "data-hide-asterisk": o(g.showRequiredAsterisk),
94
94
  "data-icon": g.icon,
95
- "data-show-icon": a(g.showIcon),
95
+ "data-show-icon": a(g.showIcon, "showIcon"),
96
96
  children: [
97
97
  /* @__PURE__ */ x("label", {
98
98
  htmlFor: E,
@@ -140,7 +140,7 @@ function C(g, C) {
140
140
  children: [g.variant === "floating" || g.placeholder ? /* @__PURE__ */ x("option", {
141
141
  className: "placeholder",
142
142
  value: "",
143
- "data-show-empty-option": a(ie())
143
+ "data-show-empty-option": a(ie(), "showEmptyOption")
144
144
  }) : null, g.options?.length ? /* @__PURE__ */ x(b, { children: g.options?.map((e) => e.options ? /* @__PURE__ */ x("optgroup", {
145
145
  label: Q(e),
146
146
  children: e.options?.map((e) => /* @__PURE__ */ x("option", {
@@ -56,7 +56,7 @@ function s(i, s) {
56
56
  "data-direction": i.direction,
57
57
  "data-alignment": i.alignment,
58
58
  "data-justify-content": i.justifyContent,
59
- "data-wrap": r(i.wrap),
59
+ "data-wrap": r(i.wrap, "wrap"),
60
60
  children: i.children
61
61
  });
62
62
  }
@@ -76,7 +76,7 @@ function S(m, S) {
76
76
  }, [w.current]), h(() => () => {
77
77
  z?.abort();
78
78
  }, []), /* @__PURE__ */ x("div", {
79
- "data-visual-aid": a(m.visualAid),
79
+ "data-visual-aid": a(m.visualAid, "visualAid"),
80
80
  "data-size": m.size,
81
81
  "data-hide-label": o(m.showLabel),
82
82
  "data-variant": m.variant,
@@ -60,9 +60,9 @@ function f(a, f) {
60
60
  htmlFor: a.id ?? a.propOverrides?.id,
61
61
  "data-icon": a.iconLeading ?? a.icon,
62
62
  "data-icon-trailing": a.iconTrailing,
63
- "data-show-icon": i(a.showIconLeading ?? a.showIcon),
64
- "data-show-icon-trailing": i(a.showIconTrailing),
65
- "data-no-text": i(a.noText),
63
+ "data-show-icon": i(a.showIconLeading, "showIconLeading") || i(a.showIcon, "showIcon"),
64
+ "data-show-icon-trailing": i(a.showIconTrailing, "showIconTrailing"),
65
+ "data-no-text": i(a.noText, "noText"),
66
66
  children: [
67
67
  /* @__PURE__ */ u("input", {
68
68
  type: "radio",
@@ -0,0 +1,9 @@
1
+ import type { 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;
@@ -0,0 +1 @@
1
+ export { default as DBTable } from './table';
@@ -0,0 +1,74 @@
1
+ import type { GlobalProps, GlobalState, WidthProps } from '../../shared/model';
2
+ import type { 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 ["flat", "zebra", "spaced"];
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 DBTableStickyHeaderList: readonly ["none", "both", "horizontal", "vertical"];
12
+ export type DBTableStickyHeaderType = (typeof DBTableStickyHeaderList)[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
+ * spaced: card style table
48
+ * flat: 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?: DBTableStickyHeaderType;
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;
@@ -0,0 +1,28 @@
1
+ //#region src/components/table/model.ts
2
+ var e = [
3
+ "x-small",
4
+ "small",
5
+ "medium",
6
+ "large"
7
+ ], t = [
8
+ "flat",
9
+ "zebra",
10
+ "spaced"
11
+ ], n = [
12
+ "none",
13
+ "both",
14
+ "horizontal",
15
+ "vertical"
16
+ ], r = ["table", "list"], i = [
17
+ "none",
18
+ "both",
19
+ "horizontal",
20
+ "vertical"
21
+ ], a = [
22
+ "auto",
23
+ "1fr",
24
+ "min-content",
25
+ "max-content"
26
+ ];
27
+ //#endregion
28
+ export { a as DBTableColumnsSizeList, n as DBTableDividerList, r as DBTableMobileVariantList, e as DBTableRowSizeList, i as DBTableStickyHeaderList, t as DBTableVariantList };
@@ -0,0 +1,3 @@
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;
@@ -0,0 +1,113 @@
1
+ "use client";
2
+ import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
3
+ import { cls as n, delay as r, getBooleanAsString as i } from "../../utils/index.js";
4
+ import a from "../table-body/table-body.js";
5
+ import o from "../table-footer/table-footer.js";
6
+ import s from "../table-head/table-head.js";
7
+ import { forwardRef as c, useEffect as l, useRef as u, useState as d } from "react";
8
+ import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
9
+ //#region src/components/table/table.tsx
10
+ function h(c, h) {
11
+ let g = h || u(void 0), [_, v] = d(() => void 0), [y, b] = d(() => void 0);
12
+ function x() {
13
+ try {
14
+ return typeof c.data == "string" ? JSON.parse(c.data) : c.data;
15
+ } catch (e) {
16
+ console.error(e);
17
+ }
18
+ return {};
19
+ }
20
+ return l(() => {
21
+ c.data ? v(x()) : v(void 0);
22
+ }, [c.data]), l(() => {
23
+ g.current && c.mobileVariant === "list" && r(() => {
24
+ let e = g.current;
25
+ if (!e) return;
26
+ let t = e.querySelectorAll("thead tr th");
27
+ t.length && e.querySelectorAll(":is(tbody,tfoot) tr").forEach((e) => {
28
+ e.querySelectorAll(":is(td,th)").forEach((e, n) => {
29
+ let r = t[n];
30
+ if (r) {
31
+ let t = Array.from(r.childNodes).filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => e.textContent?.trim()).filter(Boolean).join(" ");
32
+ t && (e.dataset.header = t);
33
+ }
34
+ });
35
+ });
36
+ }, 1);
37
+ }, [
38
+ c.mobileVariant,
39
+ g.current,
40
+ _
41
+ ]), l(() => {
42
+ if (c.columnSizes) {
43
+ let e = {};
44
+ Object.entries(c.columnSizes).forEach(([t, n]) => {
45
+ e[`--db-table-column-size-${t}`] = n;
46
+ }), b(e);
47
+ } else b(void 0);
48
+ }, [c.columnSizes]), /* @__PURE__ */ p("div", {
49
+ ...t(c, [
50
+ "data-icon-variant",
51
+ "data-icon-variant-before",
52
+ "data-icon-variant-after",
53
+ "data-icon-weight",
54
+ "data-icon-weight-before",
55
+ "data-icon-weight-after",
56
+ "data-interactive",
57
+ "data-force-mobile",
58
+ "data-color",
59
+ "data-container-color",
60
+ "data-bg-color",
61
+ "data-on-bg-color",
62
+ "data-color-scheme",
63
+ "data-font-size",
64
+ "data-headline-size",
65
+ "data-divider",
66
+ "data-focus",
67
+ "data-font",
68
+ "data-density"
69
+ ]),
70
+ className: n("db-table", c.className),
71
+ style: y,
72
+ "data-width": c.width,
73
+ "data-size": c.size,
74
+ "data-divider": c.divider,
75
+ "data-variant": c.variant,
76
+ "data-mobile-variant": c.mobileVariant,
77
+ "data-show-caption": i(c.showCaption),
78
+ "data-sticky-header": c.stickyHeader,
79
+ children: /* @__PURE__ */ m("table", {
80
+ ref: g,
81
+ ...e(c, [
82
+ "data-icon-variant",
83
+ "data-icon-variant-before",
84
+ "data-icon-variant-after",
85
+ "data-icon-weight",
86
+ "data-icon-weight-before",
87
+ "data-icon-weight-after",
88
+ "data-interactive",
89
+ "data-force-mobile",
90
+ "data-color",
91
+ "data-container-color",
92
+ "data-bg-color",
93
+ "data-on-bg-color",
94
+ "data-color-scheme",
95
+ "data-font-size",
96
+ "data-headline-size",
97
+ "data-divider",
98
+ "data-focus",
99
+ "data-font",
100
+ "data-density"
101
+ ]),
102
+ id: c.id,
103
+ children: [c.captionPlain ? /* @__PURE__ */ p("caption", { children: c.captionPlain }) : /* @__PURE__ */ p(f, { children: /* @__PURE__ */ p(f, { children: c.caption }) }), _ ? /* @__PURE__ */ m(f, { children: [
104
+ _?.header ? /* @__PURE__ */ p(s, { rows: _?.header }) : null,
105
+ _?.body ? /* @__PURE__ */ p(a, { rows: _?.body }) : null,
106
+ _?.footer ? /* @__PURE__ */ p(o, { rows: _?.footer }) : null
107
+ ] }) : /* @__PURE__ */ p(f, { children: c.children })]
108
+ })
109
+ });
110
+ }
111
+ var g = c(h);
112
+ //#endregion
113
+ export { g as default };
@@ -0,0 +1 @@
1
+ export { default as DBTableBody } from './table-body';
@@ -0,0 +1,8 @@
1
+ import type { GlobalProps, GlobalState } from '../../shared/model';
2
+ import type { 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;
@@ -0,0 +1,3 @@
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;
@@ -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-body/table-body.tsx
8
+ function l(i, l) {
9
+ let u = a();
10
+ return /* @__PURE__ */ c("tbody", {
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-body", 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-body-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 DBTableCaption } from './table-caption';
@@ -0,0 +1,5 @@
1
+ import type { 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;
@@ -0,0 +1,3 @@
1
+ import * as React from "react";
2
+ declare const DBTableCaption: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps> & import("../..").GlobalProps & React.RefAttributes<any>>;
3
+ export default DBTableCaption;