@sellmate/design-system-react 1.0.17 → 1.0.18
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/dist/SdTable.d.ts +40 -0
- package/dist/SdTable.js +73 -0
- package/dist/components/components.d.ts +4 -9
- package/dist/components/components.js +1 -14
- package/dist/components/components.server.d.ts +4 -9
- package/dist/components/components.server.js +3 -25
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/lib/SdTable.tsx +183 -0
- package/lib/components/components.server.ts +5 -35
- package/lib/components/components.ts +3 -23
- package/lib/index.ts +2 -0
- package/package.json +2 -2
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { Row as SdTableRow, SdTableColumn } from '@sellmate/design-system';
|
|
3
|
+
import { SdTable as SdTableElement } from '@sellmate/design-system/dist/components/sd-table.js';
|
|
4
|
+
import { type EventName } from '@stencil/react-output-target/runtime';
|
|
5
|
+
type TablePagination = {
|
|
6
|
+
page: number;
|
|
7
|
+
rowsPerPage: number;
|
|
8
|
+
lastPage?: number;
|
|
9
|
+
};
|
|
10
|
+
type HeaderRenderContext = {
|
|
11
|
+
column: SdTableColumn;
|
|
12
|
+
};
|
|
13
|
+
type CellRenderContext<RowType extends SdTableRow> = {
|
|
14
|
+
column: SdTableColumn;
|
|
15
|
+
row: RowType;
|
|
16
|
+
rowIndex: number;
|
|
17
|
+
value: any;
|
|
18
|
+
};
|
|
19
|
+
type HeaderRendererMap = Partial<Record<string, (context: HeaderRenderContext) => React.ReactNode>>;
|
|
20
|
+
type CellRendererMap<RowType extends SdTableRow> = Partial<Record<string, (context: CellRenderContext<RowType>) => React.ReactNode>>;
|
|
21
|
+
type SdTableBaseEvents = {
|
|
22
|
+
onSdSelectChange: EventName<CustomEvent<SdTableRow[]>>;
|
|
23
|
+
onSdPageChange: EventName<CustomEvent<number>>;
|
|
24
|
+
onSdRowsPerPageChange: EventName<CustomEvent<number>>;
|
|
25
|
+
};
|
|
26
|
+
declare const SdTableBase: import("@stencil/react-output-target/runtime").StencilReactComponent<SdTableElement, SdTableBaseEvents>;
|
|
27
|
+
export type SdTableProps<RowType extends SdTableRow = SdTableRow> = Omit<React.ComponentProps<typeof SdTableBase>, 'columns' | 'rows' | 'selected' | 'children'> & {
|
|
28
|
+
columns: SdTableColumn[];
|
|
29
|
+
rows?: RowType[] | null;
|
|
30
|
+
selected?: RowType[];
|
|
31
|
+
pagination?: TablePagination;
|
|
32
|
+
useInternalPagination?: boolean;
|
|
33
|
+
headerRenderers?: HeaderRendererMap;
|
|
34
|
+
cellRenderers?: CellRendererMap<RowType>;
|
|
35
|
+
renderHeader?: (context: HeaderRenderContext) => React.ReactNode;
|
|
36
|
+
renderCell?: (context: CellRenderContext<RowType>) => React.ReactNode;
|
|
37
|
+
noDataContent?: React.ReactNode;
|
|
38
|
+
};
|
|
39
|
+
export declare function SdTable<RowType extends SdTableRow = SdTableRow>({ columns, rows, selected, pagination, useInternalPagination, headerRenderers, cellRenderers, renderHeader, renderCell, noDataContent, onSdPageChange, onSdRowsPerPageChange, ...props }: SdTableProps<RowType>): React.JSX.Element;
|
|
40
|
+
export default SdTable;
|
package/dist/SdTable.js
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
2
|
+
import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from '@sellmate/design-system/dist/components/sd-table.js';
|
|
3
|
+
import { createComponent } from '@stencil/react-output-target/runtime';
|
|
4
|
+
const SLOT_WRAPPER_STYLE = {
|
|
5
|
+
display: 'contents',
|
|
6
|
+
};
|
|
7
|
+
const SdTableBase = /* @__PURE__ */ createComponent({
|
|
8
|
+
tagName: 'sd-table',
|
|
9
|
+
elementClass: SdTableElement,
|
|
10
|
+
react: React,
|
|
11
|
+
events: {
|
|
12
|
+
onSdSelectChange: 'sdSelectChange',
|
|
13
|
+
onSdPageChange: 'sdPageChange',
|
|
14
|
+
onSdRowsPerPageChange: 'sdRowsPerPageChange',
|
|
15
|
+
},
|
|
16
|
+
defineCustomElement: defineSdTable,
|
|
17
|
+
});
|
|
18
|
+
const getCellValue = (column, row) => {
|
|
19
|
+
const { field, format, name } = column;
|
|
20
|
+
const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
|
|
21
|
+
return format ? format(value, row) : value;
|
|
22
|
+
};
|
|
23
|
+
export function SdTable({ columns, rows, selected, pagination, useInternalPagination = false, headerRenderers, cellRenderers, renderHeader, renderCell, noDataContent, onSdPageChange, onSdRowsPerPageChange, ...props }) {
|
|
24
|
+
const normalizedRows = rows ?? [];
|
|
25
|
+
const [currentPage, setCurrentPage] = useState(pagination?.page || 1);
|
|
26
|
+
const [currentRowsPerPage, setCurrentRowsPerPage] = useState(pagination?.rowsPerPage || normalizedRows.length || 0);
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
setCurrentPage(pagination?.page || 1);
|
|
29
|
+
setCurrentRowsPerPage(pagination?.rowsPerPage || normalizedRows.length || 0);
|
|
30
|
+
}, [pagination?.page, pagination?.rowsPerPage, normalizedRows.length]);
|
|
31
|
+
const renderedRows = useInternalPagination && currentRowsPerPage
|
|
32
|
+
? normalizedRows.slice((currentPage - 1) * currentRowsPerPage, currentPage * currentRowsPerPage)
|
|
33
|
+
: normalizedRows;
|
|
34
|
+
const slotChildren = [];
|
|
35
|
+
if (noDataContent !== undefined) {
|
|
36
|
+
slotChildren.push(React.createElement("span", { key: "no-data", slot: "no-data", style: SLOT_WRAPPER_STYLE }, noDataContent));
|
|
37
|
+
}
|
|
38
|
+
columns.forEach(column => {
|
|
39
|
+
const renderer = headerRenderers?.[column.name] || renderHeader;
|
|
40
|
+
if (!renderer)
|
|
41
|
+
return;
|
|
42
|
+
const rendered = renderer({ column });
|
|
43
|
+
if (rendered == null)
|
|
44
|
+
return;
|
|
45
|
+
slotChildren.push(React.createElement("span", { key: `header-${column.name}`, slot: `header-cell-${column.name}`, style: SLOT_WRAPPER_STYLE }, rendered));
|
|
46
|
+
});
|
|
47
|
+
renderedRows.forEach((row, rowIndex) => {
|
|
48
|
+
columns.forEach(column => {
|
|
49
|
+
const renderer = cellRenderers?.[column.name] || renderCell;
|
|
50
|
+
if (!renderer)
|
|
51
|
+
return;
|
|
52
|
+
const rendered = renderer({
|
|
53
|
+
column,
|
|
54
|
+
row,
|
|
55
|
+
rowIndex,
|
|
56
|
+
value: getCellValue(column, row),
|
|
57
|
+
});
|
|
58
|
+
if (rendered == null)
|
|
59
|
+
return;
|
|
60
|
+
slotChildren.push(React.createElement("span", { key: `cell-${column.name}-${rowIndex}`, slot: `body-cell-${column.name}-${rowIndex}`, style: SLOT_WRAPPER_STYLE }, rendered));
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
return (React.createElement(SdTableBase, { ...props, columns: columns, rows: normalizedRows, selected: selected, pagination: pagination, useInternalPagination: useInternalPagination, onSdPageChange: event => {
|
|
64
|
+
setCurrentPage(event.detail);
|
|
65
|
+
onSdPageChange?.(event);
|
|
66
|
+
}, onSdRowsPerPageChange: event => {
|
|
67
|
+
setCurrentRowsPerPage(event.detail);
|
|
68
|
+
const lastPage = Math.max(1, Math.ceil(normalizedRows.length / event.detail));
|
|
69
|
+
setCurrentPage(previousPage => Math.min(previousPage, lastPage));
|
|
70
|
+
onSdRowsPerPageChange?.(event);
|
|
71
|
+
} }, slotChildren));
|
|
72
|
+
}
|
|
73
|
+
export default SdTable;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* This file was automatically generated by the Stencil React Output Target.
|
|
3
3
|
* Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
|
|
4
4
|
*/
|
|
5
|
-
import { type CheckedType, type RadioValue, type
|
|
5
|
+
import { type CheckedType, type RadioValue, type SdButtonCustomEvent, type SdCheckboxCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
|
|
6
6
|
import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
|
|
7
7
|
import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
|
|
8
8
|
import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
|
|
@@ -34,7 +34,6 @@ import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/des
|
|
|
34
34
|
import { SdSelectOption as SdSelectOptionElement } from "@sellmate/design-system/dist/components/sd-select-option.js";
|
|
35
35
|
import { SdSelectSearchInput as SdSelectSearchInputElement } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
|
|
36
36
|
import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
|
|
37
|
-
import { SdTable as SdTableElement } from "@sellmate/design-system/dist/components/sd-table.js";
|
|
38
37
|
import { SdTabs as SdTabsElement } from "@sellmate/design-system/dist/components/sd-tabs.js";
|
|
39
38
|
import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
|
|
40
39
|
import { SdTextarea as SdTextareaElement } from "@sellmate/design-system/dist/components/sd-textarea.js";
|
|
@@ -45,7 +44,9 @@ import { SdTooltip as SdTooltipElement } from "@sellmate/design-system/dist/comp
|
|
|
45
44
|
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
|
|
46
45
|
export type SdBadgeEvents = NonNullable<unknown>;
|
|
47
46
|
export declare const SdBadge: StencilReactComponent<SdBadgeElement, SdBadgeEvents>;
|
|
48
|
-
export type SdButtonEvents =
|
|
47
|
+
export type SdButtonEvents = {
|
|
48
|
+
onSdClick: EventName<SdButtonCustomEvent<MouseEvent>>;
|
|
49
|
+
};
|
|
49
50
|
export declare const SdButton: StencilReactComponent<SdButtonElement, SdButtonEvents>;
|
|
50
51
|
export type SdCardEvents = NonNullable<unknown>;
|
|
51
52
|
export declare const SdCard: StencilReactComponent<SdCardElement, SdCardEvents>;
|
|
@@ -175,12 +176,6 @@ export type SdSelectSearchInputEvents = {
|
|
|
175
176
|
onSdSearchFocus: EventName<CustomEvent<void>>;
|
|
176
177
|
};
|
|
177
178
|
export declare const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>;
|
|
178
|
-
export type SdTableEvents = {
|
|
179
|
-
onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>;
|
|
180
|
-
onSdPageChange: EventName<CustomEvent<number>>;
|
|
181
|
-
onSdRowsPerPageChange: EventName<CustomEvent<number>>;
|
|
182
|
-
};
|
|
183
|
-
export declare const SdTable: StencilReactComponent<SdTableElement, SdTableEvents>;
|
|
184
179
|
export type SdTabsEvents = {
|
|
185
180
|
onSdUpdate: EventName<CustomEvent<string>>;
|
|
186
181
|
};
|
|
@@ -30,7 +30,6 @@ import { SdSelectOptionGroup as SdSelectOptionGroupElement, defineCustomElement
|
|
|
30
30
|
import { SdSelectOption as SdSelectOptionElement, defineCustomElement as defineSdSelectOption } from "@sellmate/design-system/dist/components/sd-select-option.js";
|
|
31
31
|
import { SdSelectSearchInput as SdSelectSearchInputElement, defineCustomElement as defineSdSelectSearchInput } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
|
|
32
32
|
import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } from "@sellmate/design-system/dist/components/sd-select.js";
|
|
33
|
-
import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from "@sellmate/design-system/dist/components/sd-table.js";
|
|
34
33
|
import { SdTabs as SdTabsElement, defineCustomElement as defineSdTabs } from "@sellmate/design-system/dist/components/sd-tabs.js";
|
|
35
34
|
import { SdTag as SdTagElement, defineCustomElement as defineSdTag } from "@sellmate/design-system/dist/components/sd-tag.js";
|
|
36
35
|
import { SdTextarea as SdTextareaElement, defineCustomElement as defineSdTextarea } from "@sellmate/design-system/dist/components/sd-textarea.js";
|
|
@@ -53,7 +52,7 @@ export const SdButton = /*@__PURE__*/ createComponent({
|
|
|
53
52
|
elementClass: SdButtonElement,
|
|
54
53
|
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
55
54
|
react: React,
|
|
56
|
-
events: {},
|
|
55
|
+
events: { onSdClick: 'sdClick' },
|
|
57
56
|
defineCustomElement: defineSdButton
|
|
58
57
|
});
|
|
59
58
|
export const SdCard = /*@__PURE__*/ createComponent({
|
|
@@ -321,18 +320,6 @@ export const SdSelectSearchInput = /*@__PURE__*/ createComponent({
|
|
|
321
320
|
},
|
|
322
321
|
defineCustomElement: defineSdSelectSearchInput
|
|
323
322
|
});
|
|
324
|
-
export const SdTable = /*@__PURE__*/ createComponent({
|
|
325
|
-
tagName: 'sd-table',
|
|
326
|
-
elementClass: SdTableElement,
|
|
327
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
328
|
-
react: React,
|
|
329
|
-
events: {
|
|
330
|
-
onSdSelectChange: 'sdSelectChange',
|
|
331
|
-
onSdPageChange: 'sdPageChange',
|
|
332
|
-
onSdRowsPerPageChange: 'sdRowsPerPageChange'
|
|
333
|
-
},
|
|
334
|
-
defineCustomElement: defineSdTable
|
|
335
|
-
});
|
|
336
323
|
export const SdTabs = /*@__PURE__*/ createComponent({
|
|
337
324
|
tagName: 'sd-tabs',
|
|
338
325
|
elementClass: SdTabsElement,
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* This file was automatically generated by the Stencil React Output Target.
|
|
3
3
|
* Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
|
|
4
4
|
*/
|
|
5
|
-
import { type CheckedType, type RadioValue, type
|
|
5
|
+
import { type CheckedType, type RadioValue, type SdButtonCustomEvent, type SdCheckboxCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
|
|
6
6
|
import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
|
|
7
7
|
import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
|
|
8
8
|
import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
|
|
@@ -34,7 +34,6 @@ import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/des
|
|
|
34
34
|
import { SdSelectOption as SdSelectOptionElement } from "@sellmate/design-system/dist/components/sd-select-option.js";
|
|
35
35
|
import { SdSelectSearchInput as SdSelectSearchInputElement } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
|
|
36
36
|
import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
|
|
37
|
-
import { SdTable as SdTableElement } from "@sellmate/design-system/dist/components/sd-table.js";
|
|
38
37
|
import { SdTabs as SdTabsElement } from "@sellmate/design-system/dist/components/sd-tabs.js";
|
|
39
38
|
import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
|
|
40
39
|
import { SdTextarea as SdTextareaElement } from "@sellmate/design-system/dist/components/sd-textarea.js";
|
|
@@ -47,7 +46,9 @@ import { type SerializeShadowRootOptions } from '@stencil/react-output-target/ss
|
|
|
47
46
|
export declare const serializeShadowRoot: SerializeShadowRootOptions;
|
|
48
47
|
export type SdBadgeEvents = NonNullable<unknown>;
|
|
49
48
|
export declare const SdBadge: StencilReactComponent<SdBadgeElement, SdBadgeEvents>;
|
|
50
|
-
export type SdButtonEvents =
|
|
49
|
+
export type SdButtonEvents = {
|
|
50
|
+
onSdClick: EventName<SdButtonCustomEvent<MouseEvent>>;
|
|
51
|
+
};
|
|
51
52
|
export declare const SdButton: StencilReactComponent<SdButtonElement, SdButtonEvents>;
|
|
52
53
|
export type SdCardEvents = NonNullable<unknown>;
|
|
53
54
|
export declare const SdCard: StencilReactComponent<SdCardElement, SdCardEvents>;
|
|
@@ -177,12 +178,6 @@ export type SdSelectSearchInputEvents = {
|
|
|
177
178
|
onSdSearchFocus: EventName<CustomEvent<void>>;
|
|
178
179
|
};
|
|
179
180
|
export declare const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>;
|
|
180
|
-
export type SdTableEvents = {
|
|
181
|
-
onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>;
|
|
182
|
-
onSdPageChange: EventName<CustomEvent<number>>;
|
|
183
|
-
onSdRowsPerPageChange: EventName<CustomEvent<number>>;
|
|
184
|
-
};
|
|
185
|
-
export declare const SdTable: StencilReactComponent<SdTableElement, SdTableEvents>;
|
|
186
181
|
export type SdTabsEvents = {
|
|
187
182
|
onSdUpdate: EventName<CustomEvent<string>>;
|
|
188
183
|
};
|
|
@@ -32,7 +32,7 @@ export const SdButton = /*@__PURE__*/ createComponent({
|
|
|
32
32
|
iconSize: 'icon-size',
|
|
33
33
|
iconRight: 'icon-right',
|
|
34
34
|
noHover: 'no-hover',
|
|
35
|
-
|
|
35
|
+
sdClass: 'sd-class'
|
|
36
36
|
},
|
|
37
37
|
hydrateModule: import('@sellmate/design-system/hydrate'),
|
|
38
38
|
clientModule: clientComponents.SdButton,
|
|
@@ -42,7 +42,7 @@ export const SdCard = /*@__PURE__*/ createComponent({
|
|
|
42
42
|
tagName: 'sd-card',
|
|
43
43
|
properties: {
|
|
44
44
|
bordered: 'bordered',
|
|
45
|
-
|
|
45
|
+
sdClass: 'sd-class'
|
|
46
46
|
},
|
|
47
47
|
hydrateModule: import('@sellmate/design-system/hydrate'),
|
|
48
48
|
clientModule: clientComponents.SdCard,
|
|
@@ -218,7 +218,7 @@ export const SdModalCard = /*@__PURE__*/ createComponent({
|
|
|
218
218
|
useCloseButton: 'use-close-button',
|
|
219
219
|
modalTitle: 'modal-title',
|
|
220
220
|
buttonFlexDirection: 'button-flex-direction',
|
|
221
|
-
|
|
221
|
+
sdClass: 'sd-class'
|
|
222
222
|
},
|
|
223
223
|
hydrateModule: import('@sellmate/design-system/hydrate'),
|
|
224
224
|
clientModule: clientComponents.SdModalCard,
|
|
@@ -396,7 +396,6 @@ export const SdSelectMultiple = /*@__PURE__*/ createComponent({
|
|
|
396
396
|
label: 'label',
|
|
397
397
|
useLabelRequired: 'use-label-required',
|
|
398
398
|
labelTooltip: 'label-tooltip',
|
|
399
|
-
name: 'name',
|
|
400
399
|
error: 'error'
|
|
401
400
|
},
|
|
402
401
|
hydrateModule: import('@sellmate/design-system/hydrate'),
|
|
@@ -420,7 +419,6 @@ export const SdSelectMultipleGroup = /*@__PURE__*/ createComponent({
|
|
|
420
419
|
label: 'label',
|
|
421
420
|
useLabelRequired: 'use-label-required',
|
|
422
421
|
labelTooltip: 'label-tooltip',
|
|
423
|
-
name: 'name',
|
|
424
422
|
error: 'error'
|
|
425
423
|
},
|
|
426
424
|
hydrateModule: import('@sellmate/design-system/hydrate'),
|
|
@@ -464,26 +462,6 @@ export const SdSelectSearchInput = /*@__PURE__*/ createComponent({
|
|
|
464
462
|
clientModule: clientComponents.SdSelectSearchInput,
|
|
465
463
|
serializeShadowRoot,
|
|
466
464
|
});
|
|
467
|
-
export const SdTable = /*@__PURE__*/ createComponent({
|
|
468
|
-
tagName: 'sd-table',
|
|
469
|
-
properties: {
|
|
470
|
-
rowKey: 'row-key',
|
|
471
|
-
selectable: 'selectable',
|
|
472
|
-
resizable: 'resizable',
|
|
473
|
-
width: 'width',
|
|
474
|
-
height: 'height',
|
|
475
|
-
stickyHeader: 'sticky-header',
|
|
476
|
-
noDataLabel: 'no-data-label',
|
|
477
|
-
isLoading: 'is-loading',
|
|
478
|
-
useInternalPagination: 'use-internal-pagination',
|
|
479
|
-
useRowsPerPageSelect: 'use-rows-per-page-select',
|
|
480
|
-
virtualRowHeight: 'virtual-row-height',
|
|
481
|
-
virtualColumnWidth: 'virtual-column-width'
|
|
482
|
-
},
|
|
483
|
-
hydrateModule: import('@sellmate/design-system/hydrate'),
|
|
484
|
-
clientModule: clientComponents.SdTable,
|
|
485
|
-
serializeShadowRoot,
|
|
486
|
-
});
|
|
487
465
|
export const SdTabs = /*@__PURE__*/ createComponent({
|
|
488
466
|
tagName: 'sd-tabs',
|
|
489
467
|
properties: {
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
export * from './components/components.js';
|
|
2
2
|
export { defineCustomElements } from '@sellmate/design-system/loader';
|
|
3
|
+
export { SdTable } from './SdTable';
|
|
4
|
+
export type { SdTableProps } from './SdTable';
|
|
3
5
|
export type { SdTableSortDir, SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, Rule, ValidatableField, SdModalCardButtonProps, SdTooltipProps, TagColor, TagSize, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';
|
package/dist/index.js
CHANGED
package/lib/SdTable.tsx
ADDED
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
2
|
+
import type { Row as SdTableRow, SdTableColumn } from '@sellmate/design-system';
|
|
3
|
+
import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from '@sellmate/design-system/dist/components/sd-table.js';
|
|
4
|
+
import { createComponent, type EventName } from '@stencil/react-output-target/runtime';
|
|
5
|
+
|
|
6
|
+
type TablePagination = {
|
|
7
|
+
page: number;
|
|
8
|
+
rowsPerPage: number;
|
|
9
|
+
lastPage?: number;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
type HeaderRenderContext = {
|
|
13
|
+
column: SdTableColumn;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
type CellRenderContext<RowType extends SdTableRow> = {
|
|
17
|
+
column: SdTableColumn;
|
|
18
|
+
row: RowType;
|
|
19
|
+
rowIndex: number;
|
|
20
|
+
value: any;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
type HeaderRendererMap = Partial<Record<string, (context: HeaderRenderContext) => React.ReactNode>>;
|
|
24
|
+
type CellRendererMap<RowType extends SdTableRow> = Partial<
|
|
25
|
+
Record<string, (context: CellRenderContext<RowType>) => React.ReactNode>
|
|
26
|
+
>;
|
|
27
|
+
|
|
28
|
+
const SLOT_WRAPPER_STYLE: React.CSSProperties = {
|
|
29
|
+
display: 'contents',
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
type SdTableBaseEvents = {
|
|
33
|
+
onSdSelectChange: EventName<CustomEvent<SdTableRow[]>>;
|
|
34
|
+
onSdPageChange: EventName<CustomEvent<number>>;
|
|
35
|
+
onSdRowsPerPageChange: EventName<CustomEvent<number>>;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
const SdTableBase = /* @__PURE__ */ createComponent<SdTableElement, SdTableBaseEvents>({
|
|
39
|
+
tagName: 'sd-table',
|
|
40
|
+
elementClass: SdTableElement,
|
|
41
|
+
react: React,
|
|
42
|
+
events: {
|
|
43
|
+
onSdSelectChange: 'sdSelectChange',
|
|
44
|
+
onSdPageChange: 'sdPageChange',
|
|
45
|
+
onSdRowsPerPageChange: 'sdRowsPerPageChange',
|
|
46
|
+
} as SdTableBaseEvents,
|
|
47
|
+
defineCustomElement: defineSdTable,
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
const getCellValue = (column: SdTableColumn, row: SdTableRow) => {
|
|
51
|
+
const { field, format, name } = column;
|
|
52
|
+
const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
|
|
53
|
+
return format ? format(value, row) : value;
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export type SdTableProps<RowType extends SdTableRow = SdTableRow> = Omit<
|
|
57
|
+
React.ComponentProps<typeof SdTableBase>,
|
|
58
|
+
'columns' | 'rows' | 'selected' | 'children'
|
|
59
|
+
> & {
|
|
60
|
+
columns: SdTableColumn[];
|
|
61
|
+
rows?: RowType[] | null;
|
|
62
|
+
selected?: RowType[];
|
|
63
|
+
pagination?: TablePagination;
|
|
64
|
+
useInternalPagination?: boolean;
|
|
65
|
+
headerRenderers?: HeaderRendererMap;
|
|
66
|
+
cellRenderers?: CellRendererMap<RowType>;
|
|
67
|
+
renderHeader?: (context: HeaderRenderContext) => React.ReactNode;
|
|
68
|
+
renderCell?: (context: CellRenderContext<RowType>) => React.ReactNode;
|
|
69
|
+
noDataContent?: React.ReactNode;
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
export function SdTable<RowType extends SdTableRow = SdTableRow>({
|
|
73
|
+
columns,
|
|
74
|
+
rows,
|
|
75
|
+
selected,
|
|
76
|
+
pagination,
|
|
77
|
+
useInternalPagination = false,
|
|
78
|
+
headerRenderers,
|
|
79
|
+
cellRenderers,
|
|
80
|
+
renderHeader,
|
|
81
|
+
renderCell,
|
|
82
|
+
noDataContent,
|
|
83
|
+
onSdPageChange,
|
|
84
|
+
onSdRowsPerPageChange,
|
|
85
|
+
...props
|
|
86
|
+
}: SdTableProps<RowType>) {
|
|
87
|
+
const normalizedRows = rows ?? [];
|
|
88
|
+
const [currentPage, setCurrentPage] = useState(pagination?.page || 1);
|
|
89
|
+
const [currentRowsPerPage, setCurrentRowsPerPage] = useState(
|
|
90
|
+
pagination?.rowsPerPage || normalizedRows.length || 0,
|
|
91
|
+
);
|
|
92
|
+
|
|
93
|
+
useEffect(() => {
|
|
94
|
+
setCurrentPage(pagination?.page || 1);
|
|
95
|
+
setCurrentRowsPerPage(pagination?.rowsPerPage || normalizedRows.length || 0);
|
|
96
|
+
}, [pagination?.page, pagination?.rowsPerPage, normalizedRows.length]);
|
|
97
|
+
|
|
98
|
+
const renderedRows =
|
|
99
|
+
useInternalPagination && currentRowsPerPage
|
|
100
|
+
? normalizedRows.slice(
|
|
101
|
+
(currentPage - 1) * currentRowsPerPage,
|
|
102
|
+
currentPage * currentRowsPerPage,
|
|
103
|
+
)
|
|
104
|
+
: normalizedRows;
|
|
105
|
+
|
|
106
|
+
const slotChildren: React.ReactNode[] = [];
|
|
107
|
+
|
|
108
|
+
if (noDataContent !== undefined) {
|
|
109
|
+
slotChildren.push(
|
|
110
|
+
<span key="no-data" slot="no-data" style={SLOT_WRAPPER_STYLE}>
|
|
111
|
+
{noDataContent}
|
|
112
|
+
</span>,
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
columns.forEach(column => {
|
|
117
|
+
const renderer = headerRenderers?.[column.name] || renderHeader;
|
|
118
|
+
if (!renderer) return;
|
|
119
|
+
|
|
120
|
+
const rendered = renderer({ column });
|
|
121
|
+
if (rendered == null) return;
|
|
122
|
+
|
|
123
|
+
slotChildren.push(
|
|
124
|
+
<span
|
|
125
|
+
key={`header-${column.name}`}
|
|
126
|
+
slot={`header-cell-${column.name}`}
|
|
127
|
+
style={SLOT_WRAPPER_STYLE}
|
|
128
|
+
>
|
|
129
|
+
{rendered}
|
|
130
|
+
</span>,
|
|
131
|
+
);
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
renderedRows.forEach((row, rowIndex) => {
|
|
135
|
+
columns.forEach(column => {
|
|
136
|
+
const renderer = cellRenderers?.[column.name] || renderCell;
|
|
137
|
+
if (!renderer) return;
|
|
138
|
+
|
|
139
|
+
const rendered = renderer({
|
|
140
|
+
column,
|
|
141
|
+
row,
|
|
142
|
+
rowIndex,
|
|
143
|
+
value: getCellValue(column, row),
|
|
144
|
+
});
|
|
145
|
+
if (rendered == null) return;
|
|
146
|
+
|
|
147
|
+
slotChildren.push(
|
|
148
|
+
<span
|
|
149
|
+
key={`cell-${column.name}-${rowIndex}`}
|
|
150
|
+
slot={`body-cell-${column.name}-${rowIndex}`}
|
|
151
|
+
style={SLOT_WRAPPER_STYLE}
|
|
152
|
+
>
|
|
153
|
+
{rendered}
|
|
154
|
+
</span>,
|
|
155
|
+
);
|
|
156
|
+
});
|
|
157
|
+
});
|
|
158
|
+
|
|
159
|
+
return (
|
|
160
|
+
<SdTableBase
|
|
161
|
+
{...props}
|
|
162
|
+
columns={columns}
|
|
163
|
+
rows={normalizedRows}
|
|
164
|
+
selected={selected}
|
|
165
|
+
pagination={pagination}
|
|
166
|
+
useInternalPagination={useInternalPagination}
|
|
167
|
+
onSdPageChange={event => {
|
|
168
|
+
setCurrentPage(event.detail);
|
|
169
|
+
onSdPageChange?.(event);
|
|
170
|
+
}}
|
|
171
|
+
onSdRowsPerPageChange={event => {
|
|
172
|
+
setCurrentRowsPerPage(event.detail);
|
|
173
|
+
const lastPage = Math.max(1, Math.ceil(normalizedRows.length / event.detail));
|
|
174
|
+
setCurrentPage(previousPage => Math.min(previousPage, lastPage));
|
|
175
|
+
onSdRowsPerPageChange?.(event);
|
|
176
|
+
}}
|
|
177
|
+
>
|
|
178
|
+
{slotChildren}
|
|
179
|
+
</SdTableBase>
|
|
180
|
+
);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
export default SdTable;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
// @ts-ignore - ignore potential type issues as the project is importing itself
|
|
9
9
|
import * as clientComponents from '@sellmate/design-system-react';
|
|
10
10
|
|
|
11
|
-
import { type CheckedType, type Event, type RadioValue, type
|
|
11
|
+
import { type CheckedType, type Event, type RadioValue, type SdButtonCustomEvent, type SdCheckboxCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
|
|
12
12
|
import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
|
|
13
13
|
import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
|
|
14
14
|
import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
|
|
@@ -40,7 +40,6 @@ import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/des
|
|
|
40
40
|
import { SdSelectOption as SdSelectOptionElement } from "@sellmate/design-system/dist/components/sd-select-option.js";
|
|
41
41
|
import { SdSelectSearchInput as SdSelectSearchInputElement } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
|
|
42
42
|
import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
|
|
43
|
-
import { SdTable as SdTableElement } from "@sellmate/design-system/dist/components/sd-table.js";
|
|
44
43
|
import { SdTabs as SdTabsElement } from "@sellmate/design-system/dist/components/sd-tabs.js";
|
|
45
44
|
import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
|
|
46
45
|
import { SdTextarea as SdTextareaElement } from "@sellmate/design-system/dist/components/sd-textarea.js";
|
|
@@ -67,7 +66,7 @@ export const SdBadge: StencilReactComponent<SdBadgeElement, SdBadgeEvents> = /*@
|
|
|
67
66
|
serializeShadowRoot,
|
|
68
67
|
});
|
|
69
68
|
|
|
70
|
-
export type SdButtonEvents =
|
|
69
|
+
export type SdButtonEvents = { onSdClick: EventName<SdButtonCustomEvent<MouseEvent>> };
|
|
71
70
|
|
|
72
71
|
export const SdButton: StencilReactComponent<SdButtonElement, SdButtonEvents> = /*@__PURE__*/ createComponent<SdButtonElement, SdButtonEvents>({
|
|
73
72
|
tagName: 'sd-button',
|
|
@@ -83,7 +82,7 @@ export const SdButton: StencilReactComponent<SdButtonElement, SdButtonEvents> =
|
|
|
83
82
|
iconSize: 'icon-size',
|
|
84
83
|
iconRight: 'icon-right',
|
|
85
84
|
noHover: 'no-hover',
|
|
86
|
-
|
|
85
|
+
sdClass: 'sd-class'
|
|
87
86
|
},
|
|
88
87
|
hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
|
|
89
88
|
clientModule: clientComponents.SdButton as ReactWebComponent<SdButtonElement, SdButtonEvents>,
|
|
@@ -96,7 +95,7 @@ export const SdCard: StencilReactComponent<SdCardElement, SdCardEvents> = /*@__P
|
|
|
96
95
|
tagName: 'sd-card',
|
|
97
96
|
properties: {
|
|
98
97
|
bordered: 'bordered',
|
|
99
|
-
|
|
98
|
+
sdClass: 'sd-class'
|
|
100
99
|
},
|
|
101
100
|
hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
|
|
102
101
|
clientModule: clientComponents.SdCard as ReactWebComponent<SdCardElement, SdCardEvents>,
|
|
@@ -324,7 +323,7 @@ export const SdModalCard: StencilReactComponent<SdModalCardElement, SdModalCardE
|
|
|
324
323
|
useCloseButton: 'use-close-button',
|
|
325
324
|
modalTitle: 'modal-title',
|
|
326
325
|
buttonFlexDirection: 'button-flex-direction',
|
|
327
|
-
|
|
326
|
+
sdClass: 'sd-class'
|
|
328
327
|
},
|
|
329
328
|
hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
|
|
330
329
|
clientModule: clientComponents.SdModalCard as ReactWebComponent<SdModalCardElement, SdModalCardEvents>,
|
|
@@ -553,7 +552,6 @@ export const SdSelectMultiple: StencilReactComponent<SdSelectMultipleElement, Sd
|
|
|
553
552
|
label: 'label',
|
|
554
553
|
useLabelRequired: 'use-label-required',
|
|
555
554
|
labelTooltip: 'label-tooltip',
|
|
556
|
-
name: 'name',
|
|
557
555
|
error: 'error'
|
|
558
556
|
},
|
|
559
557
|
hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
|
|
@@ -583,7 +581,6 @@ export const SdSelectMultipleGroup: StencilReactComponent<SdSelectMultipleGroupE
|
|
|
583
581
|
label: 'label',
|
|
584
582
|
useLabelRequired: 'use-label-required',
|
|
585
583
|
labelTooltip: 'label-tooltip',
|
|
586
|
-
name: 'name',
|
|
587
584
|
error: 'error'
|
|
588
585
|
},
|
|
589
586
|
hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
|
|
@@ -653,33 +650,6 @@ export const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputEleme
|
|
|
653
650
|
serializeShadowRoot,
|
|
654
651
|
});
|
|
655
652
|
|
|
656
|
-
export type SdTableEvents = {
|
|
657
|
-
onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
|
|
658
|
-
onSdPageChange: EventName<CustomEvent<number>>,
|
|
659
|
-
onSdRowsPerPageChange: EventName<CustomEvent<number>>
|
|
660
|
-
};
|
|
661
|
-
|
|
662
|
-
export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@__PURE__*/ createComponent<SdTableElement, SdTableEvents>({
|
|
663
|
-
tagName: 'sd-table',
|
|
664
|
-
properties: {
|
|
665
|
-
rowKey: 'row-key',
|
|
666
|
-
selectable: 'selectable',
|
|
667
|
-
resizable: 'resizable',
|
|
668
|
-
width: 'width',
|
|
669
|
-
height: 'height',
|
|
670
|
-
stickyHeader: 'sticky-header',
|
|
671
|
-
noDataLabel: 'no-data-label',
|
|
672
|
-
isLoading: 'is-loading',
|
|
673
|
-
useInternalPagination: 'use-internal-pagination',
|
|
674
|
-
useRowsPerPageSelect: 'use-rows-per-page-select',
|
|
675
|
-
virtualRowHeight: 'virtual-row-height',
|
|
676
|
-
virtualColumnWidth: 'virtual-column-width'
|
|
677
|
-
},
|
|
678
|
-
hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
|
|
679
|
-
clientModule: clientComponents.SdTable as ReactWebComponent<SdTableElement, SdTableEvents>,
|
|
680
|
-
serializeShadowRoot,
|
|
681
|
-
});
|
|
682
|
-
|
|
683
653
|
export type SdTabsEvents = { onSdUpdate: EventName<CustomEvent<string>> };
|
|
684
654
|
|
|
685
655
|
export const SdTabs: StencilReactComponent<SdTabsElement, SdTabsEvents> = /*@__PURE__*/ createComponent<SdTabsElement, SdTabsEvents>({
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
/* eslint-disable */
|
|
9
9
|
|
|
10
|
-
import { type CheckedType, type Event, type RadioValue, type
|
|
10
|
+
import { type CheckedType, type Event, type RadioValue, type SdButtonCustomEvent, type SdCheckboxCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
|
|
11
11
|
import { SdBadge as SdBadgeElement, defineCustomElement as defineSdBadge } from "@sellmate/design-system/dist/components/sd-badge.js";
|
|
12
12
|
import { SdButton as SdButtonElement, defineCustomElement as defineSdButton } from "@sellmate/design-system/dist/components/sd-button.js";
|
|
13
13
|
import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@sellmate/design-system/dist/components/sd-card.js";
|
|
@@ -39,7 +39,6 @@ import { SdSelectOptionGroup as SdSelectOptionGroupElement, defineCustomElement
|
|
|
39
39
|
import { SdSelectOption as SdSelectOptionElement, defineCustomElement as defineSdSelectOption } from "@sellmate/design-system/dist/components/sd-select-option.js";
|
|
40
40
|
import { SdSelectSearchInput as SdSelectSearchInputElement, defineCustomElement as defineSdSelectSearchInput } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
|
|
41
41
|
import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } from "@sellmate/design-system/dist/components/sd-select.js";
|
|
42
|
-
import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from "@sellmate/design-system/dist/components/sd-table.js";
|
|
43
42
|
import { SdTabs as SdTabsElement, defineCustomElement as defineSdTabs } from "@sellmate/design-system/dist/components/sd-tabs.js";
|
|
44
43
|
import { SdTag as SdTagElement, defineCustomElement as defineSdTag } from "@sellmate/design-system/dist/components/sd-tag.js";
|
|
45
44
|
import { SdTextarea as SdTextareaElement, defineCustomElement as defineSdTextarea } from "@sellmate/design-system/dist/components/sd-textarea.js";
|
|
@@ -62,14 +61,14 @@ export const SdBadge: StencilReactComponent<SdBadgeElement, SdBadgeEvents> = /*@
|
|
|
62
61
|
defineCustomElement: defineSdBadge
|
|
63
62
|
});
|
|
64
63
|
|
|
65
|
-
export type SdButtonEvents =
|
|
64
|
+
export type SdButtonEvents = { onSdClick: EventName<SdButtonCustomEvent<MouseEvent>> };
|
|
66
65
|
|
|
67
66
|
export const SdButton: StencilReactComponent<SdButtonElement, SdButtonEvents> = /*@__PURE__*/ createComponent<SdButtonElement, SdButtonEvents>({
|
|
68
67
|
tagName: 'sd-button',
|
|
69
68
|
elementClass: SdButtonElement,
|
|
70
69
|
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
71
70
|
react: React,
|
|
72
|
-
events: {} as SdButtonEvents,
|
|
71
|
+
events: { onSdClick: 'sdClick' } as SdButtonEvents,
|
|
73
72
|
defineCustomElement: defineSdButton
|
|
74
73
|
});
|
|
75
74
|
|
|
@@ -475,25 +474,6 @@ export const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputEleme
|
|
|
475
474
|
defineCustomElement: defineSdSelectSearchInput
|
|
476
475
|
});
|
|
477
476
|
|
|
478
|
-
export type SdTableEvents = {
|
|
479
|
-
onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
|
|
480
|
-
onSdPageChange: EventName<CustomEvent<number>>,
|
|
481
|
-
onSdRowsPerPageChange: EventName<CustomEvent<number>>
|
|
482
|
-
};
|
|
483
|
-
|
|
484
|
-
export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@__PURE__*/ createComponent<SdTableElement, SdTableEvents>({
|
|
485
|
-
tagName: 'sd-table',
|
|
486
|
-
elementClass: SdTableElement,
|
|
487
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
488
|
-
react: React,
|
|
489
|
-
events: {
|
|
490
|
-
onSdSelectChange: 'sdSelectChange',
|
|
491
|
-
onSdPageChange: 'sdPageChange',
|
|
492
|
-
onSdRowsPerPageChange: 'sdRowsPerPageChange'
|
|
493
|
-
} as SdTableEvents,
|
|
494
|
-
defineCustomElement: defineSdTable
|
|
495
|
-
});
|
|
496
|
-
|
|
497
477
|
export type SdTabsEvents = { onSdUpdate: EventName<CustomEvent<string>> };
|
|
498
478
|
|
|
499
479
|
export const SdTabs: StencilReactComponent<SdTabsElement, SdTabsEvents> = /*@__PURE__*/ createComponent<SdTabsElement, SdTabsEvents>({
|
package/lib/index.ts
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
export * from './components/components.js';
|
|
4
4
|
export { defineCustomElements } from '@sellmate/design-system/loader';
|
|
5
|
+
export { SdTable } from './SdTable';
|
|
6
|
+
export type { SdTableProps } from './SdTable';
|
|
5
7
|
|
|
6
8
|
// Export commonly used types for React usage
|
|
7
9
|
export type {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sellmate/design-system-react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.18",
|
|
4
4
|
"description": "Design System - React Component Wrappers",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"dev": "tsc --watch"
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"@sellmate/design-system": "^1.0.
|
|
57
|
+
"@sellmate/design-system": "^1.0.17",
|
|
58
58
|
"@stencil/react-output-target": "^1.2.0"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|