@sellmate/design-system-react 1.0.68 → 1.0.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +303 -24
- package/dist/components/components.d.ts +5 -1
- package/dist/components/components.js +6 -2
- package/dist/components/components.server.d.ts +5 -1
- package/dist/components/components.server.js +14 -3
- package/lib/components/components.server.ts +20 -5
- package/lib/components/components.ts +12 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -8,44 +8,323 @@ React component wrappers for Sellmate Design System built with Stencil web compo
|
|
|
8
8
|
npm install @sellmate/design-system-react
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
---
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
## Project Setup
|
|
14
|
+
|
|
15
|
+
> 커스텀 엘리먼트는 패키지 import 시점에 자동 등록됩니다. `defineCustomElements()` 별도 호출이나 StencilProvider 설정은 불필요합니다.
|
|
16
|
+
|
|
17
|
+
### React (Vite / CRA)
|
|
18
|
+
|
|
19
|
+
**1. CSS 전역 import** — `src/main.tsx`
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import '@sellmate/design-system/styles.css';
|
|
15
23
|
```
|
|
16
24
|
|
|
17
|
-
|
|
25
|
+
**2. SdModalContainer 최상단 배치** — `src/App.tsx`
|
|
18
26
|
|
|
19
|
-
|
|
27
|
+
`sdModal`은 `sd-modal-container`를 자동으로 생성하지만, z-index 제어 및 렌더 위치를 명시적으로 지정하려면 루트에 배치합니다.
|
|
20
28
|
|
|
21
29
|
```tsx
|
|
22
|
-
import {
|
|
30
|
+
import { SdModalContainer } from '@sellmate/design-system-react';
|
|
23
31
|
|
|
24
|
-
export function App() {
|
|
32
|
+
export default function App() {
|
|
25
33
|
return (
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
</SdButton>
|
|
34
|
+
<>
|
|
35
|
+
<SdModalContainer />
|
|
36
|
+
{/* 라우터, 레이아웃 등 */}
|
|
37
|
+
</>
|
|
31
38
|
);
|
|
32
39
|
}
|
|
33
40
|
```
|
|
34
41
|
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
### Next.js (App Router)
|
|
45
|
+
|
|
46
|
+
**1. CSS 전역 import** — `app/layout.tsx`
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import '@sellmate/design-system/styles.css';
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
**2. `'use client'` 필수** — 컴포넌트를 사용하는 모든 파일에 선언 필요
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
'use client';
|
|
56
|
+
|
|
57
|
+
import { SdButton } from '@sellmate/design-system-react/next';
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
**3. SdModalContainer 루트 배치** — `app/layout.tsx`
|
|
61
|
+
|
|
62
|
+
`layout.tsx`는 서버 컴포넌트이므로 클라이언트 전용 Provider를 별도 파일로 분리합니다.
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
// app/providers.tsx
|
|
66
|
+
'use client';
|
|
67
|
+
|
|
68
|
+
import { SdModalContainer } from '@sellmate/design-system-react/next';
|
|
69
|
+
|
|
70
|
+
export default function Providers({ children }: { children: React.ReactNode }) {
|
|
71
|
+
return (
|
|
72
|
+
<>
|
|
73
|
+
<SdModalContainer />
|
|
74
|
+
{children}
|
|
75
|
+
</>
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
// app/layout.tsx
|
|
82
|
+
import '@sellmate/design-system/styles.css';
|
|
83
|
+
import Providers from './providers';
|
|
84
|
+
|
|
85
|
+
export default function RootLayout({
|
|
86
|
+
children,
|
|
87
|
+
}: {
|
|
88
|
+
children: React.ReactNode;
|
|
89
|
+
}) {
|
|
90
|
+
return (
|
|
91
|
+
<html lang='ko'>
|
|
92
|
+
<body>
|
|
93
|
+
<Providers>{children}</Providers>
|
|
94
|
+
</body>
|
|
95
|
+
</html>
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
**4. 컴포넌트 import** — `dynamic({ ssr: false })` 패턴
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
'use client';
|
|
104
|
+
|
|
105
|
+
import dynamic from 'next/dynamic';
|
|
106
|
+
|
|
107
|
+
const SdButton = dynamic(
|
|
108
|
+
() =>
|
|
109
|
+
import('@sellmate/design-system-react').then((mod) => ({
|
|
110
|
+
default: mod.SdButton,
|
|
111
|
+
})),
|
|
112
|
+
{ ssr: false, loading: () => <></> },
|
|
113
|
+
);
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## Utility Functions
|
|
119
|
+
|
|
120
|
+
### `sdModal` — `@sellmate/design-system-react`
|
|
121
|
+
|
|
122
|
+
React 컴포넌트를 모달로 열 수 있는 React-aware 버전입니다.
|
|
123
|
+
|
|
124
|
+
```ts
|
|
125
|
+
import { sdModal } from '@sellmate/design-system-react';
|
|
126
|
+
|
|
127
|
+
// Confirm 모달
|
|
128
|
+
sdModal
|
|
129
|
+
.confirm({
|
|
130
|
+
type: 'positive' | 'negative' | 'default',
|
|
131
|
+
title: '제목',
|
|
132
|
+
topMessage: ['메시지'],
|
|
133
|
+
mainButtonLabel: '확인',
|
|
134
|
+
subButtonLabel: '취소',
|
|
135
|
+
persistent: false, // true 시 ESC/백드롭으로 닫기 불가
|
|
136
|
+
})
|
|
137
|
+
.onOk(() => {})
|
|
138
|
+
.onCancel(() => {})
|
|
139
|
+
.onClose(() => {});
|
|
140
|
+
|
|
141
|
+
// React 컴포넌트를 모달로 열기
|
|
142
|
+
sdModal.create({
|
|
143
|
+
component: MyModalComponent,
|
|
144
|
+
componentProps: { title: '제목' }, // 컴포넌트에 전달할 props
|
|
145
|
+
persistent: true,
|
|
146
|
+
});
|
|
147
|
+
|
|
148
|
+
// Loading 모달
|
|
149
|
+
const dialog = sdModal.loading({ state: 'loading' });
|
|
150
|
+
dialog.update({ state: 'error', message: '오류 발생' });
|
|
151
|
+
dialog.close();
|
|
152
|
+
|
|
153
|
+
// 전역 설정
|
|
154
|
+
sdModal.configure({ zIndex: 1000 });
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
> **주의**: `sdModal.create`에 React 컴포넌트를 전달하면 내부적으로 새로운 React 루트가 생성됩니다. 부모 트리의 Context(Redux, React Router, Theme 등)가 **자동으로 상속되지 않으므로** 모달 컴포넌트 내부에서 필요한 Provider를 직접 감싸야 합니다.
|
|
158
|
+
|
|
159
|
+
---
|
|
160
|
+
|
|
161
|
+
### `sdToast` — `@sellmate/design-system`
|
|
162
|
+
|
|
163
|
+
```ts
|
|
164
|
+
import { sdToast } from '@sellmate/design-system';
|
|
165
|
+
|
|
166
|
+
// 토스트 생성
|
|
167
|
+
await sdToast.create('메시지', 'success' | 'error' | 'warning' | 'info');
|
|
168
|
+
|
|
169
|
+
// 개별/전체 닫기
|
|
170
|
+
await sdToast.dismiss(id);
|
|
171
|
+
await sdToast.dismissAll();
|
|
172
|
+
|
|
173
|
+
// 전역 설정
|
|
174
|
+
sdToast.configure({
|
|
175
|
+
position: 'top-right',
|
|
176
|
+
maxVisible: 5,
|
|
177
|
+
defaultDuration: 3000,
|
|
178
|
+
zIndex: 9999,
|
|
179
|
+
});
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
> `sdToast`는 `sd-toast-container`를 자동으로 생성하므로 별도의 Provider 배치가 불필요합니다.
|
|
183
|
+
|
|
184
|
+
---
|
|
185
|
+
|
|
186
|
+
### `sdLoading` — `@sellmate/design-system`
|
|
187
|
+
|
|
188
|
+
```ts
|
|
189
|
+
import { sdLoading } from '@sellmate/design-system';
|
|
190
|
+
|
|
191
|
+
const hide = sdLoading.show(); // 전체화면 로딩 표시
|
|
192
|
+
hide(); // 로딩 숨김
|
|
193
|
+
|
|
194
|
+
sdLoading.show({ message: '처리 중...' });
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
---
|
|
198
|
+
|
|
35
199
|
## Available Components
|
|
36
200
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
201
|
+
### 입력
|
|
202
|
+
|
|
203
|
+
| 컴포넌트 | 설명 |
|
|
204
|
+
| ----------------------- | -------------------- |
|
|
205
|
+
| `SdInput` | 텍스트 입력 |
|
|
206
|
+
| `SdNumberInput` | 숫자 입력 |
|
|
207
|
+
| `SdTextarea` | 멀티라인 텍스트 입력 |
|
|
208
|
+
| `SdBarcodeInput` | 바코드 스캐너 입력 |
|
|
209
|
+
| `SdCheckbox` | 체크박스 |
|
|
210
|
+
| `SdRadio` | 라디오 버튼 |
|
|
211
|
+
| `SdRadioGroup` | 라디오 그룹 |
|
|
212
|
+
| `SdRadioButton` | 버튼형 라디오 |
|
|
213
|
+
| `SdSwitch` | 스위치 토글 |
|
|
214
|
+
| `SdToggle` | 토글 |
|
|
215
|
+
| `SdSelect` | 단일 선택 드롭다운 |
|
|
216
|
+
| `SdSelectGroup` | 그룹형 단일 선택 |
|
|
217
|
+
| `SdSelectMultiple` | 다중 선택 드롭다운 |
|
|
218
|
+
| `SdSelectMultipleGroup` | 그룹형 다중 선택 |
|
|
219
|
+
| `SdSelectV2` | 단일/다중 선택 V2 |
|
|
220
|
+
| `SdDatePicker` | 날짜 선택 |
|
|
221
|
+
| `SdDateRangePicker` | 날짜 범위 선택 |
|
|
222
|
+
| `SdFilePicker` | 파일 선택 |
|
|
223
|
+
|
|
224
|
+
### 버튼
|
|
225
|
+
|
|
226
|
+
| 컴포넌트 | 설명 |
|
|
227
|
+
| ------------------ | ---------------- |
|
|
228
|
+
| `SdButton` | 기본 버튼 |
|
|
229
|
+
| `SdButtonV2` | 버튼 V2 |
|
|
230
|
+
| `SdGhostButton` | 고스트 버튼 |
|
|
231
|
+
| `SdDropdownButton` | 드롭다운 버튼 |
|
|
232
|
+
| `SdTextLink` | 텍스트 링크 버튼 |
|
|
233
|
+
|
|
234
|
+
### 표시
|
|
235
|
+
|
|
236
|
+
| 컴포넌트 | 설명 |
|
|
237
|
+
| -------------------- | ---------------------- |
|
|
238
|
+
| `SdTag` | 태그 |
|
|
239
|
+
| `SdBadge` | 뱃지 |
|
|
240
|
+
| `SdIcon` | 아이콘 |
|
|
241
|
+
| `SdTooltip` | 툴팁 |
|
|
242
|
+
| `SdPopover` | 팝오버 |
|
|
243
|
+
| `SdProgress` | 진행 바 |
|
|
244
|
+
| `SdCircleProgress` | 원형 진행 바 |
|
|
245
|
+
| `SdLoadingContainer` | 로딩 오버레이 컨테이너 |
|
|
246
|
+
| `SdGuide` | 가이드 텍스트 |
|
|
247
|
+
| `SdCard` | 카드 |
|
|
248
|
+
| `SdCalendar` | 캘린더 표시 |
|
|
249
|
+
|
|
250
|
+
### 레이아웃 / 구조
|
|
251
|
+
|
|
252
|
+
| 컴포넌트 | 설명 |
|
|
253
|
+
| -------------- | ------------------------------------ |
|
|
254
|
+
| `SdField` | 폼 필드 래퍼 (label + input + error) |
|
|
255
|
+
| `SdForm` | 폼 유효성 검사 컨테이너 |
|
|
256
|
+
| `SdTabs` | 탭 네비게이션 |
|
|
257
|
+
| `SdTable` | 데이터 테이블 |
|
|
258
|
+
| `SdPagination` | 페이지네이션 |
|
|
259
|
+
|
|
260
|
+
### 모달 / 알림
|
|
261
|
+
|
|
262
|
+
| 컴포넌트 | 설명 |
|
|
263
|
+
| ------------------ | ------------------------------------ |
|
|
264
|
+
| `SdModalContainer` | sdModal Provider (루트에 1회 배치) |
|
|
265
|
+
| `SdConfirmModal` | Confirm 모달 (직접 렌더) |
|
|
266
|
+
| `SdActionModal` | Action 모달 (직접 렌더) |
|
|
267
|
+
| `SdLoadingModal` | Loading 모달 (직접 렌더) |
|
|
268
|
+
| `SdToastContainer` | Toast 컨테이너 (sdToast가 자동 생성) |
|
|
269
|
+
| `SdToast` | 개별 Toast |
|
|
270
|
+
|
|
271
|
+
---
|
|
272
|
+
|
|
273
|
+
## Available Types
|
|
274
|
+
|
|
275
|
+
```ts
|
|
276
|
+
import type {
|
|
277
|
+
// Table
|
|
278
|
+
SdTableColumn,
|
|
279
|
+
SdTableRow,
|
|
280
|
+
// Select
|
|
281
|
+
SelectOption,
|
|
282
|
+
SelectOptionGroup,
|
|
283
|
+
SelectV2Option,
|
|
284
|
+
SelectV2Value,
|
|
285
|
+
// Radio
|
|
286
|
+
RadioValue,
|
|
287
|
+
RadioOption,
|
|
288
|
+
// Button
|
|
289
|
+
ButtonVariant,
|
|
290
|
+
ButtonSize,
|
|
291
|
+
ButtonV2Name,
|
|
292
|
+
DropdownButtonItem,
|
|
293
|
+
// Form
|
|
294
|
+
Rule,
|
|
295
|
+
ValidatableField,
|
|
296
|
+
// Checkbox
|
|
297
|
+
CheckedType,
|
|
298
|
+
// Tag
|
|
299
|
+
TagName,
|
|
300
|
+
// Toast
|
|
301
|
+
ToastType,
|
|
302
|
+
// DateBox
|
|
303
|
+
DateBoxType,
|
|
304
|
+
// Tabs
|
|
305
|
+
TabOption,
|
|
306
|
+
// sdModal
|
|
307
|
+
SdModalCreateOption,
|
|
308
|
+
} from '@sellmate/design-system-react';
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
---
|
|
312
|
+
|
|
313
|
+
## Hooks
|
|
314
|
+
|
|
315
|
+
### `useSdTableVirtualScroll`
|
|
316
|
+
|
|
317
|
+
```ts
|
|
318
|
+
import { useSdTableVirtualScroll } from '@sellmate/design-system-react';
|
|
319
|
+
|
|
320
|
+
const { virtualRows, totalHeight, scrollToIndex } = useSdTableVirtualScroll({
|
|
321
|
+
rowCount: data.length,
|
|
322
|
+
rowHeight: 48,
|
|
323
|
+
containerHeight: 400,
|
|
324
|
+
});
|
|
325
|
+
```
|
|
326
|
+
|
|
327
|
+
---
|
|
49
328
|
|
|
50
329
|
## Requirements
|
|
51
330
|
|
|
@@ -218,7 +218,9 @@ export type SdPaginationEvents = {
|
|
|
218
218
|
onSdPageChange: EventName<CustomEvent<number>>;
|
|
219
219
|
};
|
|
220
220
|
export declare const SdPagination: StencilReactComponent<SdPaginationElement, SdPaginationEvents>;
|
|
221
|
-
export type SdPopoverEvents =
|
|
221
|
+
export type SdPopoverEvents = {
|
|
222
|
+
onSdShowChange: EventName<CustomEvent<boolean>>;
|
|
223
|
+
};
|
|
222
224
|
export declare const SdPopover: StencilReactComponent<SdPopoverElement, SdPopoverEvents>;
|
|
223
225
|
export type SdPortalEvents = {
|
|
224
226
|
onSdClose: EventName<CustomEvent<void>>;
|
|
@@ -312,6 +314,8 @@ export type SdSelectV2ListboxEvents = {
|
|
|
312
314
|
export declare const SdSelectV2Listbox: StencilReactComponent<SdSelectV2ListboxElement, SdSelectV2ListboxEvents>;
|
|
313
315
|
export type SdSelectV2TriggerEvents = {
|
|
314
316
|
onSdTriggerClick: EventName<CustomEvent<void>>;
|
|
317
|
+
onSdTriggerFocus: EventName<CustomEvent<void>>;
|
|
318
|
+
onSdTriggerBlur: EventName<CustomEvent<void>>;
|
|
315
319
|
};
|
|
316
320
|
export declare const SdSelectV2Trigger: StencilReactComponent<SdSelectV2TriggerElement, SdSelectV2TriggerEvents>;
|
|
317
321
|
export type SdSwitchEvents = {
|
|
@@ -370,7 +370,7 @@ export const SdPopover = /*@__PURE__*/ createComponent({
|
|
|
370
370
|
elementClass: SdPopoverElement,
|
|
371
371
|
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
372
372
|
react: React,
|
|
373
|
-
events: {},
|
|
373
|
+
events: { onSdShowChange: 'sdShowChange' },
|
|
374
374
|
defineCustomElement: defineSdPopover
|
|
375
375
|
});
|
|
376
376
|
export const SdPortal = /*@__PURE__*/ createComponent({
|
|
@@ -539,7 +539,11 @@ export const SdSelectV2Trigger = /*@__PURE__*/ createComponent({
|
|
|
539
539
|
elementClass: SdSelectV2TriggerElement,
|
|
540
540
|
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
541
541
|
react: React,
|
|
542
|
-
events: {
|
|
542
|
+
events: {
|
|
543
|
+
onSdTriggerClick: 'sdTriggerClick',
|
|
544
|
+
onSdTriggerFocus: 'sdTriggerFocus',
|
|
545
|
+
onSdTriggerBlur: 'sdTriggerBlur'
|
|
546
|
+
},
|
|
543
547
|
defineCustomElement: defineSdSelectV2Trigger
|
|
544
548
|
});
|
|
545
549
|
export const SdSwitch = /*@__PURE__*/ createComponent({
|
|
@@ -220,7 +220,9 @@ export type SdPaginationEvents = {
|
|
|
220
220
|
onSdPageChange: EventName<CustomEvent<number>>;
|
|
221
221
|
};
|
|
222
222
|
export declare const SdPagination: StencilReactComponent<SdPaginationElement, SdPaginationEvents>;
|
|
223
|
-
export type SdPopoverEvents =
|
|
223
|
+
export type SdPopoverEvents = {
|
|
224
|
+
onSdShowChange: EventName<CustomEvent<boolean>>;
|
|
225
|
+
};
|
|
224
226
|
export declare const SdPopover: StencilReactComponent<SdPopoverElement, SdPopoverEvents>;
|
|
225
227
|
export type SdPortalEvents = {
|
|
226
228
|
onSdClose: EventName<CustomEvent<void>>;
|
|
@@ -314,6 +316,8 @@ export type SdSelectV2ListboxEvents = {
|
|
|
314
316
|
export declare const SdSelectV2Listbox: StencilReactComponent<SdSelectV2ListboxElement, SdSelectV2ListboxEvents>;
|
|
315
317
|
export type SdSelectV2TriggerEvents = {
|
|
316
318
|
onSdTriggerClick: EventName<CustomEvent<void>>;
|
|
319
|
+
onSdTriggerFocus: EventName<CustomEvent<void>>;
|
|
320
|
+
onSdTriggerBlur: EventName<CustomEvent<void>>;
|
|
317
321
|
};
|
|
318
322
|
export declare const SdSelectV2Trigger: StencilReactComponent<SdSelectV2TriggerElement, SdSelectV2TriggerEvents>;
|
|
319
323
|
export type SdSwitchEvents = {
|
|
@@ -34,6 +34,7 @@ export const SdBarcodeInput = /*@__PURE__*/ createComponent({
|
|
|
34
34
|
value: 'value',
|
|
35
35
|
size: 'size',
|
|
36
36
|
addonLabel: 'addon-label',
|
|
37
|
+
addonAlign: 'addon-align',
|
|
37
38
|
placeholder: 'placeholder',
|
|
38
39
|
disabled: 'disabled',
|
|
39
40
|
clearable: 'clearable',
|
|
@@ -192,6 +193,7 @@ export const SdDatePicker = /*@__PURE__*/ createComponent({
|
|
|
192
193
|
label: 'label',
|
|
193
194
|
labelWidth: 'label-width',
|
|
194
195
|
addonLabel: 'addon-label',
|
|
196
|
+
addonAlign: 'addon-align',
|
|
195
197
|
hint: 'hint',
|
|
196
198
|
errorMessage: 'error-message',
|
|
197
199
|
fieldName: 'field-name',
|
|
@@ -233,6 +235,7 @@ export const SdDateRangePicker = /*@__PURE__*/ createComponent({
|
|
|
233
235
|
label: 'label',
|
|
234
236
|
labelWidth: 'label-width',
|
|
235
237
|
addonLabel: 'addon-label',
|
|
238
|
+
addonAlign: 'addon-align',
|
|
236
239
|
hint: 'hint',
|
|
237
240
|
errorMessage: 'error-message',
|
|
238
241
|
fieldName: 'field-name',
|
|
@@ -279,6 +282,7 @@ export const SdField = /*@__PURE__*/ createComponent({
|
|
|
279
282
|
label: 'label',
|
|
280
283
|
labelWidth: 'label-width',
|
|
281
284
|
addonLabel: 'addon-label',
|
|
285
|
+
addonAlign: 'addon-align',
|
|
282
286
|
labelTooltip: 'label-tooltip',
|
|
283
287
|
rules: 'rules'
|
|
284
288
|
},
|
|
@@ -301,6 +305,7 @@ export const SdFilePicker = /*@__PURE__*/ createComponent({
|
|
|
301
305
|
label: 'label',
|
|
302
306
|
labelWidth: 'label-width',
|
|
303
307
|
addonLabel: 'addon-label',
|
|
308
|
+
addonAlign: 'addon-align',
|
|
304
309
|
hint: 'hint',
|
|
305
310
|
errorMessage: 'error-message',
|
|
306
311
|
width: 'width',
|
|
@@ -382,6 +387,7 @@ export const SdInput = /*@__PURE__*/ createComponent({
|
|
|
382
387
|
type: 'type',
|
|
383
388
|
size: 'size',
|
|
384
389
|
addonLabel: 'addon-label',
|
|
390
|
+
addonAlign: 'addon-align',
|
|
385
391
|
placeholder: 'placeholder',
|
|
386
392
|
disabled: 'disabled',
|
|
387
393
|
clearable: 'clearable',
|
|
@@ -451,6 +457,7 @@ export const SdNumberInput = /*@__PURE__*/ createComponent({
|
|
|
451
457
|
label: 'label',
|
|
452
458
|
labelWidth: 'label-width',
|
|
453
459
|
addonLabel: 'addon-label',
|
|
460
|
+
addonAlign: 'addon-align',
|
|
454
461
|
placeholder: 'placeholder',
|
|
455
462
|
disabled: 'disabled',
|
|
456
463
|
width: 'width',
|
|
@@ -493,11 +500,11 @@ export const SdPopover = /*@__PURE__*/ createComponent({
|
|
|
493
500
|
label: 'label',
|
|
494
501
|
buttonSize: 'button-size',
|
|
495
502
|
buttonVariant: 'button-variant',
|
|
496
|
-
menuTitle: 'title',
|
|
503
|
+
menuTitle: 'menu-title',
|
|
497
504
|
menuClass: 'menu-class',
|
|
498
|
-
noHover: 'no-hover',
|
|
499
505
|
useClose: 'use-close',
|
|
500
|
-
messages: 'messages'
|
|
506
|
+
messages: 'messages',
|
|
507
|
+
buttons: 'buttons'
|
|
501
508
|
},
|
|
502
509
|
hydrateModule: import('@sellmate/design-system/hydrate'),
|
|
503
510
|
clientModule: clientComponents.SdPopover,
|
|
@@ -582,6 +589,7 @@ export const SdSelect = /*@__PURE__*/ createComponent({
|
|
|
582
589
|
label: 'label',
|
|
583
590
|
labelWidth: 'label-width',
|
|
584
591
|
addonLabel: 'addon-label',
|
|
592
|
+
addonAlign: 'addon-align',
|
|
585
593
|
labelTooltip: 'label-tooltip',
|
|
586
594
|
error: 'error',
|
|
587
595
|
options: 'options',
|
|
@@ -623,6 +631,7 @@ export const SdSelectGroup = /*@__PURE__*/ createComponent({
|
|
|
623
631
|
label: 'label',
|
|
624
632
|
labelWidth: 'label-width',
|
|
625
633
|
addonLabel: 'addon-label',
|
|
634
|
+
addonAlign: 'addon-align',
|
|
626
635
|
labelTooltip: 'label-tooltip',
|
|
627
636
|
error: 'error',
|
|
628
637
|
options: 'options',
|
|
@@ -732,6 +741,7 @@ export const SdSelectV2 = /*@__PURE__*/ createComponent({
|
|
|
732
741
|
label: 'label',
|
|
733
742
|
labelWidth: 'label-width',
|
|
734
743
|
addonLabel: 'addon-label',
|
|
744
|
+
addonAlign: 'addon-align',
|
|
735
745
|
error: 'error',
|
|
736
746
|
hint: 'hint',
|
|
737
747
|
errorMessage: 'error-message',
|
|
@@ -905,6 +915,7 @@ export const SdTextarea = /*@__PURE__*/ createComponent({
|
|
|
905
915
|
label: 'label',
|
|
906
916
|
labelWidth: 'label-width',
|
|
907
917
|
addonLabel: 'addon-label',
|
|
918
|
+
addonAlign: 'addon-align',
|
|
908
919
|
hint: 'hint',
|
|
909
920
|
errorMessage: 'error-message',
|
|
910
921
|
labelTooltip: 'label-tooltip',
|
|
@@ -121,6 +121,7 @@ export const SdBarcodeInput: StencilReactComponent<SdBarcodeInputElement, SdBarc
|
|
|
121
121
|
value: 'value',
|
|
122
122
|
size: 'size',
|
|
123
123
|
addonLabel: 'addon-label',
|
|
124
|
+
addonAlign: 'addon-align',
|
|
124
125
|
placeholder: 'placeholder',
|
|
125
126
|
disabled: 'disabled',
|
|
126
127
|
clearable: 'clearable',
|
|
@@ -324,6 +325,7 @@ export const SdDatePicker: StencilReactComponent<SdDatePickerElement, SdDatePick
|
|
|
324
325
|
label: 'label',
|
|
325
326
|
labelWidth: 'label-width',
|
|
326
327
|
addonLabel: 'addon-label',
|
|
328
|
+
addonAlign: 'addon-align',
|
|
327
329
|
hint: 'hint',
|
|
328
330
|
errorMessage: 'error-message',
|
|
329
331
|
fieldName: 'field-name',
|
|
@@ -379,6 +381,7 @@ export const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement,
|
|
|
379
381
|
label: 'label',
|
|
380
382
|
labelWidth: 'label-width',
|
|
381
383
|
addonLabel: 'addon-label',
|
|
384
|
+
addonAlign: 'addon-align',
|
|
382
385
|
hint: 'hint',
|
|
383
386
|
errorMessage: 'error-message',
|
|
384
387
|
fieldName: 'field-name',
|
|
@@ -438,6 +441,7 @@ export const SdField: StencilReactComponent<SdFieldElement, SdFieldEvents> = /*@
|
|
|
438
441
|
label: 'label',
|
|
439
442
|
labelWidth: 'label-width',
|
|
440
443
|
addonLabel: 'addon-label',
|
|
444
|
+
addonAlign: 'addon-align',
|
|
441
445
|
labelTooltip: 'label-tooltip',
|
|
442
446
|
rules: 'rules'},
|
|
443
447
|
hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
|
|
@@ -468,6 +472,7 @@ export const SdFilePicker: StencilReactComponent<SdFilePickerElement, SdFilePick
|
|
|
468
472
|
label: 'label',
|
|
469
473
|
labelWidth: 'label-width',
|
|
470
474
|
addonLabel: 'addon-label',
|
|
475
|
+
addonAlign: 'addon-align',
|
|
471
476
|
hint: 'hint',
|
|
472
477
|
errorMessage: 'error-message',
|
|
473
478
|
width: 'width',
|
|
@@ -572,6 +577,7 @@ export const SdInput: StencilReactComponent<SdInputElement, SdInputEvents> = /*@
|
|
|
572
577
|
type: 'type',
|
|
573
578
|
size: 'size',
|
|
574
579
|
addonLabel: 'addon-label',
|
|
580
|
+
addonAlign: 'addon-align',
|
|
575
581
|
placeholder: 'placeholder',
|
|
576
582
|
disabled: 'disabled',
|
|
577
583
|
clearable: 'clearable',
|
|
@@ -656,6 +662,7 @@ export const SdNumberInput: StencilReactComponent<SdNumberInputElement, SdNumber
|
|
|
656
662
|
label: 'label',
|
|
657
663
|
labelWidth: 'label-width',
|
|
658
664
|
addonLabel: 'addon-label',
|
|
665
|
+
addonAlign: 'addon-align',
|
|
659
666
|
placeholder: 'placeholder',
|
|
660
667
|
disabled: 'disabled',
|
|
661
668
|
width: 'width',
|
|
@@ -690,7 +697,7 @@ export const SdPagination: StencilReactComponent<SdPaginationElement, SdPaginati
|
|
|
690
697
|
serializeShadowRoot,
|
|
691
698
|
});
|
|
692
699
|
|
|
693
|
-
export type SdPopoverEvents =
|
|
700
|
+
export type SdPopoverEvents = { onSdShowChange: EventName<CustomEvent<boolean>> };
|
|
694
701
|
|
|
695
702
|
export const SdPopover: StencilReactComponent<SdPopoverElement, SdPopoverEvents> = /*@__PURE__*/ createComponent<SdPopoverElement, SdPopoverEvents>({
|
|
696
703
|
tagName: 'sd-popover',
|
|
@@ -703,11 +710,11 @@ export const SdPopover: StencilReactComponent<SdPopoverElement, SdPopoverEvents>
|
|
|
703
710
|
label: 'label',
|
|
704
711
|
buttonSize: 'button-size',
|
|
705
712
|
buttonVariant: 'button-variant',
|
|
706
|
-
menuTitle: 'title',
|
|
713
|
+
menuTitle: 'menu-title',
|
|
707
714
|
menuClass: 'menu-class',
|
|
708
|
-
noHover: 'no-hover',
|
|
709
715
|
useClose: 'use-close',
|
|
710
|
-
messages: 'messages'
|
|
716
|
+
messages: 'messages',
|
|
717
|
+
buttons: 'buttons'},
|
|
711
718
|
hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
|
|
712
719
|
clientModule: clientComponents.SdPopover as ReactWebComponent<SdPopoverElement, SdPopoverEvents>,
|
|
713
720
|
serializeShadowRoot,
|
|
@@ -810,6 +817,7 @@ export const SdSelect: StencilReactComponent<SdSelectElement, SdSelectEvents> =
|
|
|
810
817
|
label: 'label',
|
|
811
818
|
labelWidth: 'label-width',
|
|
812
819
|
addonLabel: 'addon-label',
|
|
820
|
+
addonAlign: 'addon-align',
|
|
813
821
|
labelTooltip: 'label-tooltip',
|
|
814
822
|
error: 'error',
|
|
815
823
|
options: 'options',
|
|
@@ -866,6 +874,7 @@ export const SdSelectGroup: StencilReactComponent<SdSelectGroupElement, SdSelect
|
|
|
866
874
|
label: 'label',
|
|
867
875
|
labelWidth: 'label-width',
|
|
868
876
|
addonLabel: 'addon-label',
|
|
877
|
+
addonAlign: 'addon-align',
|
|
869
878
|
labelTooltip: 'label-tooltip',
|
|
870
879
|
error: 'error',
|
|
871
880
|
options: 'options',
|
|
@@ -1015,6 +1024,7 @@ export const SdSelectV2: StencilReactComponent<SdSelectV2Element, SdSelectV2Even
|
|
|
1015
1024
|
label: 'label',
|
|
1016
1025
|
labelWidth: 'label-width',
|
|
1017
1026
|
addonLabel: 'addon-label',
|
|
1027
|
+
addonAlign: 'addon-align',
|
|
1018
1028
|
error: 'error',
|
|
1019
1029
|
hint: 'hint',
|
|
1020
1030
|
errorMessage: 'error-message',
|
|
@@ -1074,7 +1084,11 @@ export const SdSelectV2Listbox: StencilReactComponent<SdSelectV2ListboxElement,
|
|
|
1074
1084
|
serializeShadowRoot,
|
|
1075
1085
|
});
|
|
1076
1086
|
|
|
1077
|
-
export type SdSelectV2TriggerEvents = {
|
|
1087
|
+
export type SdSelectV2TriggerEvents = {
|
|
1088
|
+
onSdTriggerClick: EventName<CustomEvent<void>>,
|
|
1089
|
+
onSdTriggerFocus: EventName<CustomEvent<void>>,
|
|
1090
|
+
onSdTriggerBlur: EventName<CustomEvent<void>>
|
|
1091
|
+
};
|
|
1078
1092
|
|
|
1079
1093
|
export const SdSelectV2Trigger: StencilReactComponent<SdSelectV2TriggerElement, SdSelectV2TriggerEvents> = /*@__PURE__*/ createComponent<SdSelectV2TriggerElement, SdSelectV2TriggerEvents>({
|
|
1080
1094
|
tagName: 'sd-select-v2-trigger',
|
|
@@ -1240,6 +1254,7 @@ export const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEven
|
|
|
1240
1254
|
label: 'label',
|
|
1241
1255
|
labelWidth: 'label-width',
|
|
1242
1256
|
addonLabel: 'addon-label',
|
|
1257
|
+
addonAlign: 'addon-align',
|
|
1243
1258
|
hint: 'hint',
|
|
1244
1259
|
errorMessage: 'error-message',
|
|
1245
1260
|
labelTooltip: 'label-tooltip',
|
|
@@ -523,14 +523,14 @@ export const SdPagination: StencilReactComponent<SdPaginationElement, SdPaginati
|
|
|
523
523
|
defineCustomElement: defineSdPagination
|
|
524
524
|
});
|
|
525
525
|
|
|
526
|
-
export type SdPopoverEvents =
|
|
526
|
+
export type SdPopoverEvents = { onSdShowChange: EventName<CustomEvent<boolean>> };
|
|
527
527
|
|
|
528
528
|
export const SdPopover: StencilReactComponent<SdPopoverElement, SdPopoverEvents> = /*@__PURE__*/ createComponent<SdPopoverElement, SdPopoverEvents>({
|
|
529
529
|
tagName: 'sd-popover',
|
|
530
530
|
elementClass: SdPopoverElement,
|
|
531
531
|
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
532
532
|
react: React,
|
|
533
|
-
events: {} as SdPopoverEvents,
|
|
533
|
+
events: { onSdShowChange: 'sdShowChange' } as SdPopoverEvents,
|
|
534
534
|
defineCustomElement: defineSdPopover
|
|
535
535
|
});
|
|
536
536
|
|
|
@@ -788,14 +788,22 @@ export const SdSelectV2Listbox: StencilReactComponent<SdSelectV2ListboxElement,
|
|
|
788
788
|
defineCustomElement: defineSdSelectV2Listbox
|
|
789
789
|
});
|
|
790
790
|
|
|
791
|
-
export type SdSelectV2TriggerEvents = {
|
|
791
|
+
export type SdSelectV2TriggerEvents = {
|
|
792
|
+
onSdTriggerClick: EventName<CustomEvent<void>>,
|
|
793
|
+
onSdTriggerFocus: EventName<CustomEvent<void>>,
|
|
794
|
+
onSdTriggerBlur: EventName<CustomEvent<void>>
|
|
795
|
+
};
|
|
792
796
|
|
|
793
797
|
export const SdSelectV2Trigger: StencilReactComponent<SdSelectV2TriggerElement, SdSelectV2TriggerEvents> = /*@__PURE__*/ createComponent<SdSelectV2TriggerElement, SdSelectV2TriggerEvents>({
|
|
794
798
|
tagName: 'sd-select-v2-trigger',
|
|
795
799
|
elementClass: SdSelectV2TriggerElement,
|
|
796
800
|
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
797
801
|
react: React,
|
|
798
|
-
events: {
|
|
802
|
+
events: {
|
|
803
|
+
onSdTriggerClick: 'sdTriggerClick',
|
|
804
|
+
onSdTriggerFocus: 'sdTriggerFocus',
|
|
805
|
+
onSdTriggerBlur: 'sdTriggerBlur'
|
|
806
|
+
} as SdSelectV2TriggerEvents,
|
|
799
807
|
defineCustomElement: defineSdSelectV2Trigger
|
|
800
808
|
});
|
|
801
809
|
|
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.70",
|
|
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.70",
|
|
58
58
|
"@stencil/react-output-target": "^1.2.0"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|