@sellmate/design-system-react 1.0.16 → 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 +8 -26
- 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 +10 -36
- 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,
|
|
@@ -234,13 +234,17 @@ export const SdNumberInput = /*@__PURE__*/ createComponent({
|
|
|
234
234
|
useDecimal: 'use-decimal',
|
|
235
235
|
value: 'value',
|
|
236
236
|
label: 'label',
|
|
237
|
+
insideLabel: 'inside-label',
|
|
237
238
|
placeholder: 'placeholder',
|
|
238
239
|
disabled: 'disabled',
|
|
239
240
|
width: 'width',
|
|
240
241
|
autoFocus: 'auto-focus',
|
|
241
242
|
status: 'status',
|
|
242
243
|
inputClass: 'input-class',
|
|
243
|
-
readonly: 'readonly'
|
|
244
|
+
readonly: 'readonly',
|
|
245
|
+
error: 'error',
|
|
246
|
+
focused: 'focused',
|
|
247
|
+
hovered: 'hovered'
|
|
244
248
|
},
|
|
245
249
|
hydrateModule: import('@sellmate/design-system/hydrate'),
|
|
246
250
|
clientModule: clientComponents.SdNumberInput,
|
|
@@ -392,7 +396,6 @@ export const SdSelectMultiple = /*@__PURE__*/ createComponent({
|
|
|
392
396
|
label: 'label',
|
|
393
397
|
useLabelRequired: 'use-label-required',
|
|
394
398
|
labelTooltip: 'label-tooltip',
|
|
395
|
-
name: 'name',
|
|
396
399
|
error: 'error'
|
|
397
400
|
},
|
|
398
401
|
hydrateModule: import('@sellmate/design-system/hydrate'),
|
|
@@ -416,7 +419,6 @@ export const SdSelectMultipleGroup = /*@__PURE__*/ createComponent({
|
|
|
416
419
|
label: 'label',
|
|
417
420
|
useLabelRequired: 'use-label-required',
|
|
418
421
|
labelTooltip: 'label-tooltip',
|
|
419
|
-
name: 'name',
|
|
420
422
|
error: 'error'
|
|
421
423
|
},
|
|
422
424
|
hydrateModule: import('@sellmate/design-system/hydrate'),
|
|
@@ -460,26 +462,6 @@ export const SdSelectSearchInput = /*@__PURE__*/ createComponent({
|
|
|
460
462
|
clientModule: clientComponents.SdSelectSearchInput,
|
|
461
463
|
serializeShadowRoot,
|
|
462
464
|
});
|
|
463
|
-
export const SdTable = /*@__PURE__*/ createComponent({
|
|
464
|
-
tagName: 'sd-table',
|
|
465
|
-
properties: {
|
|
466
|
-
rowKey: 'row-key',
|
|
467
|
-
selectable: 'selectable',
|
|
468
|
-
resizable: 'resizable',
|
|
469
|
-
width: 'width',
|
|
470
|
-
height: 'height',
|
|
471
|
-
stickyHeader: 'sticky-header',
|
|
472
|
-
noDataLabel: 'no-data-label',
|
|
473
|
-
isLoading: 'is-loading',
|
|
474
|
-
useInternalPagination: 'use-internal-pagination',
|
|
475
|
-
useRowsPerPageSelect: 'use-rows-per-page-select',
|
|
476
|
-
virtualRowHeight: 'virtual-row-height',
|
|
477
|
-
virtualColumnWidth: 'virtual-column-width'
|
|
478
|
-
},
|
|
479
|
-
hydrateModule: import('@sellmate/design-system/hydrate'),
|
|
480
|
-
clientModule: clientComponents.SdTable,
|
|
481
|
-
serializeShadowRoot,
|
|
482
|
-
});
|
|
483
465
|
export const SdTabs = /*@__PURE__*/ createComponent({
|
|
484
466
|
tagName: 'sd-tabs',
|
|
485
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>,
|
|
@@ -347,13 +346,17 @@ export const SdNumberInput: StencilReactComponent<SdNumberInputElement, SdNumber
|
|
|
347
346
|
useDecimal: 'use-decimal',
|
|
348
347
|
value: 'value',
|
|
349
348
|
label: 'label',
|
|
349
|
+
insideLabel: 'inside-label',
|
|
350
350
|
placeholder: 'placeholder',
|
|
351
351
|
disabled: 'disabled',
|
|
352
352
|
width: 'width',
|
|
353
353
|
autoFocus: 'auto-focus',
|
|
354
354
|
status: 'status',
|
|
355
355
|
inputClass: 'input-class',
|
|
356
|
-
readonly: 'readonly'
|
|
356
|
+
readonly: 'readonly',
|
|
357
|
+
error: 'error',
|
|
358
|
+
focused: 'focused',
|
|
359
|
+
hovered: 'hovered'
|
|
357
360
|
},
|
|
358
361
|
hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
|
|
359
362
|
clientModule: clientComponents.SdNumberInput as ReactWebComponent<SdNumberInputElement, SdNumberInputEvents>,
|
|
@@ -549,7 +552,6 @@ export const SdSelectMultiple: StencilReactComponent<SdSelectMultipleElement, Sd
|
|
|
549
552
|
label: 'label',
|
|
550
553
|
useLabelRequired: 'use-label-required',
|
|
551
554
|
labelTooltip: 'label-tooltip',
|
|
552
|
-
name: 'name',
|
|
553
555
|
error: 'error'
|
|
554
556
|
},
|
|
555
557
|
hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
|
|
@@ -579,7 +581,6 @@ export const SdSelectMultipleGroup: StencilReactComponent<SdSelectMultipleGroupE
|
|
|
579
581
|
label: 'label',
|
|
580
582
|
useLabelRequired: 'use-label-required',
|
|
581
583
|
labelTooltip: 'label-tooltip',
|
|
582
|
-
name: 'name',
|
|
583
584
|
error: 'error'
|
|
584
585
|
},
|
|
585
586
|
hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
|
|
@@ -649,33 +650,6 @@ export const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputEleme
|
|
|
649
650
|
serializeShadowRoot,
|
|
650
651
|
});
|
|
651
652
|
|
|
652
|
-
export type SdTableEvents = {
|
|
653
|
-
onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
|
|
654
|
-
onSdPageChange: EventName<CustomEvent<number>>,
|
|
655
|
-
onSdRowsPerPageChange: EventName<CustomEvent<number>>
|
|
656
|
-
};
|
|
657
|
-
|
|
658
|
-
export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@__PURE__*/ createComponent<SdTableElement, SdTableEvents>({
|
|
659
|
-
tagName: 'sd-table',
|
|
660
|
-
properties: {
|
|
661
|
-
rowKey: 'row-key',
|
|
662
|
-
selectable: 'selectable',
|
|
663
|
-
resizable: 'resizable',
|
|
664
|
-
width: 'width',
|
|
665
|
-
height: 'height',
|
|
666
|
-
stickyHeader: 'sticky-header',
|
|
667
|
-
noDataLabel: 'no-data-label',
|
|
668
|
-
isLoading: 'is-loading',
|
|
669
|
-
useInternalPagination: 'use-internal-pagination',
|
|
670
|
-
useRowsPerPageSelect: 'use-rows-per-page-select',
|
|
671
|
-
virtualRowHeight: 'virtual-row-height',
|
|
672
|
-
virtualColumnWidth: 'virtual-column-width'
|
|
673
|
-
},
|
|
674
|
-
hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
|
|
675
|
-
clientModule: clientComponents.SdTable as ReactWebComponent<SdTableElement, SdTableEvents>,
|
|
676
|
-
serializeShadowRoot,
|
|
677
|
-
});
|
|
678
|
-
|
|
679
653
|
export type SdTabsEvents = { onSdUpdate: EventName<CustomEvent<string>> };
|
|
680
654
|
|
|
681
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": {
|