@openway/ui 1.0.1 → 1.0.2
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/chunk-X4LIYOS5.js +3 -0
- package/dist/chunk-X4LIYOS5.js.map +1 -0
- package/dist/index.d.cts +4 -276
- package/dist/index.d.ts +4 -276
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/query.cjs +1 -1
- package/dist/query.cjs.map +1 -1
- package/dist/query.d.cts +125 -3
- package/dist/query.d.ts +125 -3
- package/dist/query.js +1 -1
- package/dist/query.js.map +1 -1
- package/dist/{useInfiniteScroll-DAlgjUN4.d.cts → useInfiniteScroll-D9AW6cQV.d.cts} +274 -1
- package/dist/{useInfiniteScroll-DAlgjUN4.d.ts → useInfiniteScroll-D9AW6cQV.d.ts} +274 -1
- package/docs/hooks/useMutationApp.md +242 -0
- package/package.json +1 -1
- package/dist/chunk-CJQNI3QX.js +0 -3
- package/dist/chunk-CJQNI3QX.js.map +0 -1
|
@@ -1,6 +1,279 @@
|
|
|
1
1
|
import { HTMLAttributes, Ref, ReactNode, RefObject } from 'react';
|
|
2
|
+
import { ToastT, ToasterProps as ToasterProps$1 } from 'sonner';
|
|
2
3
|
import { Placement } from '@floating-ui/react';
|
|
3
4
|
|
|
5
|
+
/**
|
|
6
|
+
* Các kích cỡ tiêu chuẩn của Alert:
|
|
7
|
+
* - 'xs': Siêu nhỏ (text-xs, padding p-2)
|
|
8
|
+
* - 'sm': Nhỏ (text-xs, title text-sm, padding p-2.5)
|
|
9
|
+
* - 'md': Vừa - mặc định (text-sm, padding p-3.5)
|
|
10
|
+
* - 'lg': Lớn (text-base, padding p-4)
|
|
11
|
+
* - 'xl': Rất lớn (text-lg, padding p-5)
|
|
12
|
+
*/
|
|
13
|
+
type AlertSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
14
|
+
/**
|
|
15
|
+
* Các biến thể giao diện và phong cách hiển thị màu sắc của Alert:
|
|
16
|
+
* - 'soft': Nền nhạt pastel, viền mờ 2px, chữ đậm (mặc định)
|
|
17
|
+
* - 'filled': Nền màu đậm, chữ trắng tương phản cao
|
|
18
|
+
* - 'outline': Nền trắng, viền rõ nét theo màu chủ đề
|
|
19
|
+
* - 'accent-left': Nền pastel kèm viền nhấn dày 4px bên trái
|
|
20
|
+
* - 'ghost': Nền và viền trong suốt
|
|
21
|
+
* - 'other': Bỏ qua màu mặc định, tự do styling qua className
|
|
22
|
+
*/
|
|
23
|
+
type AlertVariant = "soft" | "filled" | "outline" | "accent-left" | "ghost" | "other";
|
|
24
|
+
/**
|
|
25
|
+
* 7 chủ đề màu sắc theo Design System:
|
|
26
|
+
* - 'primary': Màu chủ đạo
|
|
27
|
+
* - 'secondary': Màu phụ
|
|
28
|
+
* - 'neutral': Màu trung tính
|
|
29
|
+
* - 'error': Màu đỏ cảnh báo lỗi nguy cấp
|
|
30
|
+
* - 'success': Màu xanh lá thông báo thành công
|
|
31
|
+
* - 'warning': Màu vàng/cam cảnh báo
|
|
32
|
+
* - 'info': Màu xanh dương thông tin (mặc định)
|
|
33
|
+
*/
|
|
34
|
+
type AlertColor = "primary" | "secondary" | "neutral" | "error" | "success" | "warning" | "info";
|
|
35
|
+
/**
|
|
36
|
+
* Độ bo góc của khung thông báo Alert:
|
|
37
|
+
* - 'none': Góc vuông phẳng (rounded-none)
|
|
38
|
+
* - 'sm': Bo góc nhỏ (rounded-sm)
|
|
39
|
+
* - 'md': Bo góc vừa (rounded-md)
|
|
40
|
+
* - 'lg': Bo góc lớn (rounded-lg - mặc định)
|
|
41
|
+
* - 'xl': Bo góc rất lớn (rounded-xl)
|
|
42
|
+
* - 'full': Bo tròn hoàn toàn (rounded-2xl)
|
|
43
|
+
*/
|
|
44
|
+
type AlertRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
|
|
45
|
+
/**
|
|
46
|
+
* Props cho component `Alert`.
|
|
47
|
+
*/
|
|
48
|
+
interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
49
|
+
/**
|
|
50
|
+
* Ref chuyển tiếp đến phần tử HTML div của Alert
|
|
51
|
+
*/
|
|
52
|
+
ref?: Ref<HTMLDivElement>;
|
|
53
|
+
/**
|
|
54
|
+
* Kích cỡ của Alert (5 sizes: xs, sm, md, lg, xl)
|
|
55
|
+
* @default 'md'
|
|
56
|
+
*/
|
|
57
|
+
size?: AlertSize;
|
|
58
|
+
/**
|
|
59
|
+
* Biến thể giao diện của Alert:
|
|
60
|
+
* - 'soft': nền nhạt pastel, viền mờ, chữ đậm tương ứng (mặc định)
|
|
61
|
+
* - 'filled': nền màu đậm, chữ tương phản cao
|
|
62
|
+
* - 'outline': nền trắng, viền rõ nét theo màu chủ đề
|
|
63
|
+
* - 'accent-left': viền nhấn dày bên trái, nền pastel
|
|
64
|
+
* - 'ghost': nền và viền trong suốt
|
|
65
|
+
* - 'other': không áp dụng style màu mặc định, tự do tùy biến qua className
|
|
66
|
+
* @default 'soft'
|
|
67
|
+
*/
|
|
68
|
+
variant?: AlertVariant;
|
|
69
|
+
/**
|
|
70
|
+
* Chủ đề màu sắc (primary, secondary, neutral, error, success, warning, info)
|
|
71
|
+
* @default 'info'
|
|
72
|
+
*/
|
|
73
|
+
color?: AlertColor;
|
|
74
|
+
/**
|
|
75
|
+
* Tùy chỉnh độ bo góc:
|
|
76
|
+
* - 'none': góc vuông 0px
|
|
77
|
+
* - 'sm': bo góc nhỏ
|
|
78
|
+
* - 'md': bo góc vừa
|
|
79
|
+
* - 'lg': bo góc lớn (mặc định)
|
|
80
|
+
* - 'xl': bo góc rất lớn
|
|
81
|
+
* - 'full': bo tròn hoàn toàn
|
|
82
|
+
* @default 'lg'
|
|
83
|
+
*/
|
|
84
|
+
radius?: AlertRadius;
|
|
85
|
+
/**
|
|
86
|
+
* Tiêu đề của Alert
|
|
87
|
+
*/
|
|
88
|
+
title?: ReactNode;
|
|
89
|
+
/**
|
|
90
|
+
* Nội dung mô tả chi tiết của Alert (có thể truyền qua prop description hoặc children)
|
|
91
|
+
*/
|
|
92
|
+
description?: ReactNode;
|
|
93
|
+
/**
|
|
94
|
+
* Icon hiển thị ở đầu thông báo:
|
|
95
|
+
* - `true` (hoặc không truyền): tự động hiển thị icon theo `color`
|
|
96
|
+
* - `false`: ẩn icon
|
|
97
|
+
* - `ReactNode`: icon tùy chỉnh
|
|
98
|
+
* @default true
|
|
99
|
+
*/
|
|
100
|
+
icon?: ReactNode | boolean;
|
|
101
|
+
/**
|
|
102
|
+
* Phần tử hành động phụ (Action slot, ví dụ: Nút bấm, liên kết thao tác)
|
|
103
|
+
*/
|
|
104
|
+
action?: ReactNode;
|
|
105
|
+
/**
|
|
106
|
+
* Hiển thị nút đóng (Close button x) để người dùng có thể tắt thông báo. Tự động ẩn Alert khi click.
|
|
107
|
+
* @default true
|
|
108
|
+
*/
|
|
109
|
+
closable?: boolean;
|
|
110
|
+
/**
|
|
111
|
+
* Callback khi người dùng bấm nút đóng
|
|
112
|
+
*/
|
|
113
|
+
onClose?: () => void;
|
|
114
|
+
/**
|
|
115
|
+
* Nhãn accessibility cho nút đóng
|
|
116
|
+
* @default 'Close alert'
|
|
117
|
+
*/
|
|
118
|
+
closeAriaLabel?: string;
|
|
119
|
+
/**
|
|
120
|
+
* Chế độ Banner: Full width, không bo góc (`rounded-none`), không viền 2 bên (`border-x-0`), thích hợp gắn cố định trên cùng màn hình
|
|
121
|
+
* @default false
|
|
122
|
+
*/
|
|
123
|
+
banner?: boolean;
|
|
124
|
+
/**
|
|
125
|
+
* Class tùy biến cho phần tiêu đề (title)
|
|
126
|
+
*/
|
|
127
|
+
titleClassName?: string;
|
|
128
|
+
/**
|
|
129
|
+
* Class tùy biến cho phần nội dung mô tả (description / children)
|
|
130
|
+
*/
|
|
131
|
+
descriptionClassName?: string;
|
|
132
|
+
/**
|
|
133
|
+
* Class tùy biến cho vùng action slot
|
|
134
|
+
*/
|
|
135
|
+
actionClassName?: string;
|
|
136
|
+
/**
|
|
137
|
+
* Class tùy biến cho icon wrapper
|
|
138
|
+
*/
|
|
139
|
+
iconClassName?: string;
|
|
140
|
+
/**
|
|
141
|
+
* Class tùy biến cho nút đóng
|
|
142
|
+
*/
|
|
143
|
+
closeButtonClassName?: string;
|
|
144
|
+
/**
|
|
145
|
+
* Class tùy biến cho container bao ngoài
|
|
146
|
+
*/
|
|
147
|
+
className?: string;
|
|
148
|
+
/**
|
|
149
|
+
* Nội dung tùy biến bên trong Alert
|
|
150
|
+
*/
|
|
151
|
+
children?: ReactNode;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* Vị trí hiển thị của danh sách thông báo Toast trên màn hình.
|
|
156
|
+
*/
|
|
157
|
+
type ToastPosition = "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
|
|
158
|
+
/**
|
|
159
|
+
* Cấu hình tùy chọn cho từng thông báo Toast đơn lẻ:
|
|
160
|
+
* - Dạng gọi hàm chuẩn: `toast.success(title, description?, options?)`
|
|
161
|
+
*/
|
|
162
|
+
interface ToastOptions extends Omit<AlertProps, "title" | "description"> {
|
|
163
|
+
/**
|
|
164
|
+
* Thời gian hiển thị thông báo trước khi tự động đóng (miliseconds). Mặc định 4000ms.
|
|
165
|
+
* @default 4000
|
|
166
|
+
*/
|
|
167
|
+
duration?: number;
|
|
168
|
+
/**
|
|
169
|
+
* Vị trí hiển thị riêng cho thông báo này trên màn hình.
|
|
170
|
+
*/
|
|
171
|
+
position?: ToastPosition;
|
|
172
|
+
/**
|
|
173
|
+
* Callback được gọi khi thông báo bị đóng/gỡ bỏ khỏi màn hình.
|
|
174
|
+
*/
|
|
175
|
+
onDismiss?: (toast: ToastT) => void;
|
|
176
|
+
/**
|
|
177
|
+
* Callback được gọi khi thông báo tự động đóng do hết thời gian duration.
|
|
178
|
+
*/
|
|
179
|
+
onAutoClose?: (toast: ToastT) => void;
|
|
180
|
+
}
|
|
181
|
+
/**
|
|
182
|
+
* Cấu trúc thông báo dạng Object chi tiết cho `toast.promise`.
|
|
183
|
+
*/
|
|
184
|
+
interface ToastMessageObject {
|
|
185
|
+
title?: ReactNode;
|
|
186
|
+
description?: ReactNode;
|
|
187
|
+
color?: AlertColor;
|
|
188
|
+
variant?: AlertVariant;
|
|
189
|
+
}
|
|
190
|
+
/**
|
|
191
|
+
* Kiểu dữ liệu linh hoạt cho nội dung thông báo trả về trong `toast.promise`:
|
|
192
|
+
* - `ReactNode`: Chuỗi text hoặc phần tử JSX thông thường.
|
|
193
|
+
* - `ToastMessageObject`: Object chi tiết gồm `{ title, description, color, variant }`.
|
|
194
|
+
*/
|
|
195
|
+
type ToastMessageResult = ReactNode | ToastMessageObject;
|
|
196
|
+
/**
|
|
197
|
+
* Hàm tạo nội dung thông báo thành công động dựa theo dữ liệu `data: T` trả về từ Promise.
|
|
198
|
+
*/
|
|
199
|
+
type ToastPromiseFunction<T> = (data: T) => ToastMessageResult;
|
|
200
|
+
/**
|
|
201
|
+
* Cấu hình các trạng thái cho `toast.promise(promise, options)`.
|
|
202
|
+
*/
|
|
203
|
+
interface ToastPromiseOptions<T = unknown> {
|
|
204
|
+
/**
|
|
205
|
+
* Nội dung hiển thị trong lúc Promise đang thực thi (Loading state).
|
|
206
|
+
*/
|
|
207
|
+
loading: ToastMessageResult;
|
|
208
|
+
/**
|
|
209
|
+
* Nội dung hiển thị khi Promise thực thi thành công (Resolve state).
|
|
210
|
+
* Có thể truyền trực tiếp nội dung hoặc một hàm nhận `data: T`.
|
|
211
|
+
*/
|
|
212
|
+
success: ToastMessageResult | ToastPromiseFunction<T>;
|
|
213
|
+
/**
|
|
214
|
+
* Nội dung hiển thị khi Promise gặp lỗi (Reject state).
|
|
215
|
+
* Có thể truyền trực tiếp nội dung hoặc một hàm nhận `error: unknown`.
|
|
216
|
+
*/
|
|
217
|
+
error: ToastMessageResult | ((error: unknown) => ToastMessageResult);
|
|
218
|
+
/**
|
|
219
|
+
* Callback chạy sau khi Promise hoàn tất (cả khi resolve hoặc reject).
|
|
220
|
+
*/
|
|
221
|
+
finally?: () => void | Promise<void>;
|
|
222
|
+
/**
|
|
223
|
+
* Thời gian hiển thị thông báo kết quả (ms). Mặc định 4000ms.
|
|
224
|
+
* @default 4000
|
|
225
|
+
*/
|
|
226
|
+
duration?: number;
|
|
227
|
+
/**
|
|
228
|
+
* Kích cỡ của Alert hiển thị trong Toast.
|
|
229
|
+
*/
|
|
230
|
+
size?: AlertSize;
|
|
231
|
+
/**
|
|
232
|
+
* Biến thể giao diện của Alert hiển thị trong Toast.
|
|
233
|
+
*/
|
|
234
|
+
variant?: AlertVariant;
|
|
235
|
+
/**
|
|
236
|
+
* Tùy chỉnh độ bo góc của Alert hiển thị trong Toast.
|
|
237
|
+
*/
|
|
238
|
+
radius?: AlertRadius;
|
|
239
|
+
}
|
|
240
|
+
/**
|
|
241
|
+
* Props cho component `<Toaster />` được mount tại root layout của ứng dụng.
|
|
242
|
+
*/
|
|
243
|
+
interface ToasterProps extends ToasterProps$1 {
|
|
244
|
+
/**
|
|
245
|
+
* Vị trí mặc định của toàn bộ danh sách toasts trên màn hình.
|
|
246
|
+
* @default 'top-right'
|
|
247
|
+
*/
|
|
248
|
+
position?: ToastPosition;
|
|
249
|
+
/**
|
|
250
|
+
* Số lượng toast tối đa hiển thị cùng lúc trước khi tự động xếp chồng 3D (stack).
|
|
251
|
+
* @default 3
|
|
252
|
+
*/
|
|
253
|
+
visibleToasts?: number;
|
|
254
|
+
/**
|
|
255
|
+
* Mở rộng toàn bộ danh sách toasts thay vì gộp lại thành 1 stack 3D.
|
|
256
|
+
* - `false` (mặc định): Tự động gộp thẻ 3D, chỉ bung ra khi hover chuột.
|
|
257
|
+
* - `true`: Luôn luôn mở rộng trải dài toàn bộ danh sách.
|
|
258
|
+
* @default false
|
|
259
|
+
*/
|
|
260
|
+
expand?: boolean;
|
|
261
|
+
/**
|
|
262
|
+
* Thời gian hiển thị mặc định của các toasts (miliseconds).
|
|
263
|
+
* @default 4000
|
|
264
|
+
*/
|
|
265
|
+
duration?: number;
|
|
266
|
+
/**
|
|
267
|
+
* Cho phép hiển thị nút đóng `(X)` trên các toasts.
|
|
268
|
+
* @default true
|
|
269
|
+
*/
|
|
270
|
+
closeButton?: boolean;
|
|
271
|
+
/**
|
|
272
|
+
* Tùy biến className bao ngoài container của Toaster.
|
|
273
|
+
*/
|
|
274
|
+
className?: string;
|
|
275
|
+
}
|
|
276
|
+
|
|
4
277
|
type EmptySize = "sm" | "md" | "lg";
|
|
5
278
|
type EmptyPresetImage = "default" | "search" | "error" | "folder" | "simple";
|
|
6
279
|
type EmptyLayout = "vertical" | "horizontal";
|
|
@@ -322,4 +595,4 @@ interface UseInfiniteScrollReturn {
|
|
|
322
595
|
*/
|
|
323
596
|
declare function useInfiniteScroll({ onLoadMore, hasMore, isLoading, disabled, rootMargin, threshold, root, }: UseInfiniteScrollOptions): UseInfiniteScrollReturn;
|
|
324
597
|
|
|
325
|
-
export { type BaseSelectProps as B, type EmptyProps as E, type MultiSelectProps as M, type SelectProps as S, type UseInfiniteScrollOptions as U, type
|
|
598
|
+
export { type AlertProps as A, type BaseSelectProps as B, type EmptyProps as E, type MultiSelectProps as M, type SelectProps as S, type ToasterProps as T, type UseInfiniteScrollOptions as U, type ToastOptions as a, type ToastPromiseOptions as b, type EmptyPresetImage as c, type SelectOptionItem as d, type SelectSize as e, type SelectVariant as f, type SelectColor as g, type SelectRadius as h, type SelectSearchPlacement as i, type SelectFilterField as j, type SelectFilterLayout as k, type AlertColor as l, type AlertRadius as m, type AlertSize as n, type AlertVariant as o, type EmptyLayout as p, type EmptySize as q, type SelectFilterType as r, type SelectSearchMode as s, type SingleSelectProps as t, type ToastMessageObject as u, type ToastMessageResult as v, type ToastPosition as w, type ToastPromiseFunction as x, type UseInfiniteScrollReturn as y, useInfiniteScroll as z };
|
|
@@ -1,6 +1,279 @@
|
|
|
1
1
|
import { HTMLAttributes, Ref, ReactNode, RefObject } from 'react';
|
|
2
|
+
import { ToastT, ToasterProps as ToasterProps$1 } from 'sonner';
|
|
2
3
|
import { Placement } from '@floating-ui/react';
|
|
3
4
|
|
|
5
|
+
/**
|
|
6
|
+
* Các kích cỡ tiêu chuẩn của Alert:
|
|
7
|
+
* - 'xs': Siêu nhỏ (text-xs, padding p-2)
|
|
8
|
+
* - 'sm': Nhỏ (text-xs, title text-sm, padding p-2.5)
|
|
9
|
+
* - 'md': Vừa - mặc định (text-sm, padding p-3.5)
|
|
10
|
+
* - 'lg': Lớn (text-base, padding p-4)
|
|
11
|
+
* - 'xl': Rất lớn (text-lg, padding p-5)
|
|
12
|
+
*/
|
|
13
|
+
type AlertSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
14
|
+
/**
|
|
15
|
+
* Các biến thể giao diện và phong cách hiển thị màu sắc của Alert:
|
|
16
|
+
* - 'soft': Nền nhạt pastel, viền mờ 2px, chữ đậm (mặc định)
|
|
17
|
+
* - 'filled': Nền màu đậm, chữ trắng tương phản cao
|
|
18
|
+
* - 'outline': Nền trắng, viền rõ nét theo màu chủ đề
|
|
19
|
+
* - 'accent-left': Nền pastel kèm viền nhấn dày 4px bên trái
|
|
20
|
+
* - 'ghost': Nền và viền trong suốt
|
|
21
|
+
* - 'other': Bỏ qua màu mặc định, tự do styling qua className
|
|
22
|
+
*/
|
|
23
|
+
type AlertVariant = "soft" | "filled" | "outline" | "accent-left" | "ghost" | "other";
|
|
24
|
+
/**
|
|
25
|
+
* 7 chủ đề màu sắc theo Design System:
|
|
26
|
+
* - 'primary': Màu chủ đạo
|
|
27
|
+
* - 'secondary': Màu phụ
|
|
28
|
+
* - 'neutral': Màu trung tính
|
|
29
|
+
* - 'error': Màu đỏ cảnh báo lỗi nguy cấp
|
|
30
|
+
* - 'success': Màu xanh lá thông báo thành công
|
|
31
|
+
* - 'warning': Màu vàng/cam cảnh báo
|
|
32
|
+
* - 'info': Màu xanh dương thông tin (mặc định)
|
|
33
|
+
*/
|
|
34
|
+
type AlertColor = "primary" | "secondary" | "neutral" | "error" | "success" | "warning" | "info";
|
|
35
|
+
/**
|
|
36
|
+
* Độ bo góc của khung thông báo Alert:
|
|
37
|
+
* - 'none': Góc vuông phẳng (rounded-none)
|
|
38
|
+
* - 'sm': Bo góc nhỏ (rounded-sm)
|
|
39
|
+
* - 'md': Bo góc vừa (rounded-md)
|
|
40
|
+
* - 'lg': Bo góc lớn (rounded-lg - mặc định)
|
|
41
|
+
* - 'xl': Bo góc rất lớn (rounded-xl)
|
|
42
|
+
* - 'full': Bo tròn hoàn toàn (rounded-2xl)
|
|
43
|
+
*/
|
|
44
|
+
type AlertRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
|
|
45
|
+
/**
|
|
46
|
+
* Props cho component `Alert`.
|
|
47
|
+
*/
|
|
48
|
+
interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
49
|
+
/**
|
|
50
|
+
* Ref chuyển tiếp đến phần tử HTML div của Alert
|
|
51
|
+
*/
|
|
52
|
+
ref?: Ref<HTMLDivElement>;
|
|
53
|
+
/**
|
|
54
|
+
* Kích cỡ của Alert (5 sizes: xs, sm, md, lg, xl)
|
|
55
|
+
* @default 'md'
|
|
56
|
+
*/
|
|
57
|
+
size?: AlertSize;
|
|
58
|
+
/**
|
|
59
|
+
* Biến thể giao diện của Alert:
|
|
60
|
+
* - 'soft': nền nhạt pastel, viền mờ, chữ đậm tương ứng (mặc định)
|
|
61
|
+
* - 'filled': nền màu đậm, chữ tương phản cao
|
|
62
|
+
* - 'outline': nền trắng, viền rõ nét theo màu chủ đề
|
|
63
|
+
* - 'accent-left': viền nhấn dày bên trái, nền pastel
|
|
64
|
+
* - 'ghost': nền và viền trong suốt
|
|
65
|
+
* - 'other': không áp dụng style màu mặc định, tự do tùy biến qua className
|
|
66
|
+
* @default 'soft'
|
|
67
|
+
*/
|
|
68
|
+
variant?: AlertVariant;
|
|
69
|
+
/**
|
|
70
|
+
* Chủ đề màu sắc (primary, secondary, neutral, error, success, warning, info)
|
|
71
|
+
* @default 'info'
|
|
72
|
+
*/
|
|
73
|
+
color?: AlertColor;
|
|
74
|
+
/**
|
|
75
|
+
* Tùy chỉnh độ bo góc:
|
|
76
|
+
* - 'none': góc vuông 0px
|
|
77
|
+
* - 'sm': bo góc nhỏ
|
|
78
|
+
* - 'md': bo góc vừa
|
|
79
|
+
* - 'lg': bo góc lớn (mặc định)
|
|
80
|
+
* - 'xl': bo góc rất lớn
|
|
81
|
+
* - 'full': bo tròn hoàn toàn
|
|
82
|
+
* @default 'lg'
|
|
83
|
+
*/
|
|
84
|
+
radius?: AlertRadius;
|
|
85
|
+
/**
|
|
86
|
+
* Tiêu đề của Alert
|
|
87
|
+
*/
|
|
88
|
+
title?: ReactNode;
|
|
89
|
+
/**
|
|
90
|
+
* Nội dung mô tả chi tiết của Alert (có thể truyền qua prop description hoặc children)
|
|
91
|
+
*/
|
|
92
|
+
description?: ReactNode;
|
|
93
|
+
/**
|
|
94
|
+
* Icon hiển thị ở đầu thông báo:
|
|
95
|
+
* - `true` (hoặc không truyền): tự động hiển thị icon theo `color`
|
|
96
|
+
* - `false`: ẩn icon
|
|
97
|
+
* - `ReactNode`: icon tùy chỉnh
|
|
98
|
+
* @default true
|
|
99
|
+
*/
|
|
100
|
+
icon?: ReactNode | boolean;
|
|
101
|
+
/**
|
|
102
|
+
* Phần tử hành động phụ (Action slot, ví dụ: Nút bấm, liên kết thao tác)
|
|
103
|
+
*/
|
|
104
|
+
action?: ReactNode;
|
|
105
|
+
/**
|
|
106
|
+
* Hiển thị nút đóng (Close button x) để người dùng có thể tắt thông báo. Tự động ẩn Alert khi click.
|
|
107
|
+
* @default true
|
|
108
|
+
*/
|
|
109
|
+
closable?: boolean;
|
|
110
|
+
/**
|
|
111
|
+
* Callback khi người dùng bấm nút đóng
|
|
112
|
+
*/
|
|
113
|
+
onClose?: () => void;
|
|
114
|
+
/**
|
|
115
|
+
* Nhãn accessibility cho nút đóng
|
|
116
|
+
* @default 'Close alert'
|
|
117
|
+
*/
|
|
118
|
+
closeAriaLabel?: string;
|
|
119
|
+
/**
|
|
120
|
+
* Chế độ Banner: Full width, không bo góc (`rounded-none`), không viền 2 bên (`border-x-0`), thích hợp gắn cố định trên cùng màn hình
|
|
121
|
+
* @default false
|
|
122
|
+
*/
|
|
123
|
+
banner?: boolean;
|
|
124
|
+
/**
|
|
125
|
+
* Class tùy biến cho phần tiêu đề (title)
|
|
126
|
+
*/
|
|
127
|
+
titleClassName?: string;
|
|
128
|
+
/**
|
|
129
|
+
* Class tùy biến cho phần nội dung mô tả (description / children)
|
|
130
|
+
*/
|
|
131
|
+
descriptionClassName?: string;
|
|
132
|
+
/**
|
|
133
|
+
* Class tùy biến cho vùng action slot
|
|
134
|
+
*/
|
|
135
|
+
actionClassName?: string;
|
|
136
|
+
/**
|
|
137
|
+
* Class tùy biến cho icon wrapper
|
|
138
|
+
*/
|
|
139
|
+
iconClassName?: string;
|
|
140
|
+
/**
|
|
141
|
+
* Class tùy biến cho nút đóng
|
|
142
|
+
*/
|
|
143
|
+
closeButtonClassName?: string;
|
|
144
|
+
/**
|
|
145
|
+
* Class tùy biến cho container bao ngoài
|
|
146
|
+
*/
|
|
147
|
+
className?: string;
|
|
148
|
+
/**
|
|
149
|
+
* Nội dung tùy biến bên trong Alert
|
|
150
|
+
*/
|
|
151
|
+
children?: ReactNode;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* Vị trí hiển thị của danh sách thông báo Toast trên màn hình.
|
|
156
|
+
*/
|
|
157
|
+
type ToastPosition = "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
|
|
158
|
+
/**
|
|
159
|
+
* Cấu hình tùy chọn cho từng thông báo Toast đơn lẻ:
|
|
160
|
+
* - Dạng gọi hàm chuẩn: `toast.success(title, description?, options?)`
|
|
161
|
+
*/
|
|
162
|
+
interface ToastOptions extends Omit<AlertProps, "title" | "description"> {
|
|
163
|
+
/**
|
|
164
|
+
* Thời gian hiển thị thông báo trước khi tự động đóng (miliseconds). Mặc định 4000ms.
|
|
165
|
+
* @default 4000
|
|
166
|
+
*/
|
|
167
|
+
duration?: number;
|
|
168
|
+
/**
|
|
169
|
+
* Vị trí hiển thị riêng cho thông báo này trên màn hình.
|
|
170
|
+
*/
|
|
171
|
+
position?: ToastPosition;
|
|
172
|
+
/**
|
|
173
|
+
* Callback được gọi khi thông báo bị đóng/gỡ bỏ khỏi màn hình.
|
|
174
|
+
*/
|
|
175
|
+
onDismiss?: (toast: ToastT) => void;
|
|
176
|
+
/**
|
|
177
|
+
* Callback được gọi khi thông báo tự động đóng do hết thời gian duration.
|
|
178
|
+
*/
|
|
179
|
+
onAutoClose?: (toast: ToastT) => void;
|
|
180
|
+
}
|
|
181
|
+
/**
|
|
182
|
+
* Cấu trúc thông báo dạng Object chi tiết cho `toast.promise`.
|
|
183
|
+
*/
|
|
184
|
+
interface ToastMessageObject {
|
|
185
|
+
title?: ReactNode;
|
|
186
|
+
description?: ReactNode;
|
|
187
|
+
color?: AlertColor;
|
|
188
|
+
variant?: AlertVariant;
|
|
189
|
+
}
|
|
190
|
+
/**
|
|
191
|
+
* Kiểu dữ liệu linh hoạt cho nội dung thông báo trả về trong `toast.promise`:
|
|
192
|
+
* - `ReactNode`: Chuỗi text hoặc phần tử JSX thông thường.
|
|
193
|
+
* - `ToastMessageObject`: Object chi tiết gồm `{ title, description, color, variant }`.
|
|
194
|
+
*/
|
|
195
|
+
type ToastMessageResult = ReactNode | ToastMessageObject;
|
|
196
|
+
/**
|
|
197
|
+
* Hàm tạo nội dung thông báo thành công động dựa theo dữ liệu `data: T` trả về từ Promise.
|
|
198
|
+
*/
|
|
199
|
+
type ToastPromiseFunction<T> = (data: T) => ToastMessageResult;
|
|
200
|
+
/**
|
|
201
|
+
* Cấu hình các trạng thái cho `toast.promise(promise, options)`.
|
|
202
|
+
*/
|
|
203
|
+
interface ToastPromiseOptions<T = unknown> {
|
|
204
|
+
/**
|
|
205
|
+
* Nội dung hiển thị trong lúc Promise đang thực thi (Loading state).
|
|
206
|
+
*/
|
|
207
|
+
loading: ToastMessageResult;
|
|
208
|
+
/**
|
|
209
|
+
* Nội dung hiển thị khi Promise thực thi thành công (Resolve state).
|
|
210
|
+
* Có thể truyền trực tiếp nội dung hoặc một hàm nhận `data: T`.
|
|
211
|
+
*/
|
|
212
|
+
success: ToastMessageResult | ToastPromiseFunction<T>;
|
|
213
|
+
/**
|
|
214
|
+
* Nội dung hiển thị khi Promise gặp lỗi (Reject state).
|
|
215
|
+
* Có thể truyền trực tiếp nội dung hoặc một hàm nhận `error: unknown`.
|
|
216
|
+
*/
|
|
217
|
+
error: ToastMessageResult | ((error: unknown) => ToastMessageResult);
|
|
218
|
+
/**
|
|
219
|
+
* Callback chạy sau khi Promise hoàn tất (cả khi resolve hoặc reject).
|
|
220
|
+
*/
|
|
221
|
+
finally?: () => void | Promise<void>;
|
|
222
|
+
/**
|
|
223
|
+
* Thời gian hiển thị thông báo kết quả (ms). Mặc định 4000ms.
|
|
224
|
+
* @default 4000
|
|
225
|
+
*/
|
|
226
|
+
duration?: number;
|
|
227
|
+
/**
|
|
228
|
+
* Kích cỡ của Alert hiển thị trong Toast.
|
|
229
|
+
*/
|
|
230
|
+
size?: AlertSize;
|
|
231
|
+
/**
|
|
232
|
+
* Biến thể giao diện của Alert hiển thị trong Toast.
|
|
233
|
+
*/
|
|
234
|
+
variant?: AlertVariant;
|
|
235
|
+
/**
|
|
236
|
+
* Tùy chỉnh độ bo góc của Alert hiển thị trong Toast.
|
|
237
|
+
*/
|
|
238
|
+
radius?: AlertRadius;
|
|
239
|
+
}
|
|
240
|
+
/**
|
|
241
|
+
* Props cho component `<Toaster />` được mount tại root layout của ứng dụng.
|
|
242
|
+
*/
|
|
243
|
+
interface ToasterProps extends ToasterProps$1 {
|
|
244
|
+
/**
|
|
245
|
+
* Vị trí mặc định của toàn bộ danh sách toasts trên màn hình.
|
|
246
|
+
* @default 'top-right'
|
|
247
|
+
*/
|
|
248
|
+
position?: ToastPosition;
|
|
249
|
+
/**
|
|
250
|
+
* Số lượng toast tối đa hiển thị cùng lúc trước khi tự động xếp chồng 3D (stack).
|
|
251
|
+
* @default 3
|
|
252
|
+
*/
|
|
253
|
+
visibleToasts?: number;
|
|
254
|
+
/**
|
|
255
|
+
* Mở rộng toàn bộ danh sách toasts thay vì gộp lại thành 1 stack 3D.
|
|
256
|
+
* - `false` (mặc định): Tự động gộp thẻ 3D, chỉ bung ra khi hover chuột.
|
|
257
|
+
* - `true`: Luôn luôn mở rộng trải dài toàn bộ danh sách.
|
|
258
|
+
* @default false
|
|
259
|
+
*/
|
|
260
|
+
expand?: boolean;
|
|
261
|
+
/**
|
|
262
|
+
* Thời gian hiển thị mặc định của các toasts (miliseconds).
|
|
263
|
+
* @default 4000
|
|
264
|
+
*/
|
|
265
|
+
duration?: number;
|
|
266
|
+
/**
|
|
267
|
+
* Cho phép hiển thị nút đóng `(X)` trên các toasts.
|
|
268
|
+
* @default true
|
|
269
|
+
*/
|
|
270
|
+
closeButton?: boolean;
|
|
271
|
+
/**
|
|
272
|
+
* Tùy biến className bao ngoài container của Toaster.
|
|
273
|
+
*/
|
|
274
|
+
className?: string;
|
|
275
|
+
}
|
|
276
|
+
|
|
4
277
|
type EmptySize = "sm" | "md" | "lg";
|
|
5
278
|
type EmptyPresetImage = "default" | "search" | "error" | "folder" | "simple";
|
|
6
279
|
type EmptyLayout = "vertical" | "horizontal";
|
|
@@ -322,4 +595,4 @@ interface UseInfiniteScrollReturn {
|
|
|
322
595
|
*/
|
|
323
596
|
declare function useInfiniteScroll({ onLoadMore, hasMore, isLoading, disabled, rootMargin, threshold, root, }: UseInfiniteScrollOptions): UseInfiniteScrollReturn;
|
|
324
597
|
|
|
325
|
-
export { type BaseSelectProps as B, type EmptyProps as E, type MultiSelectProps as M, type SelectProps as S, type UseInfiniteScrollOptions as U, type
|
|
598
|
+
export { type AlertProps as A, type BaseSelectProps as B, type EmptyProps as E, type MultiSelectProps as M, type SelectProps as S, type ToasterProps as T, type UseInfiniteScrollOptions as U, type ToastOptions as a, type ToastPromiseOptions as b, type EmptyPresetImage as c, type SelectOptionItem as d, type SelectSize as e, type SelectVariant as f, type SelectColor as g, type SelectRadius as h, type SelectSearchPlacement as i, type SelectFilterField as j, type SelectFilterLayout as k, type AlertColor as l, type AlertRadius as m, type AlertSize as n, type AlertVariant as o, type EmptyLayout as p, type EmptySize as q, type SelectFilterType as r, type SelectSearchMode as s, type SingleSelectProps as t, type ToastMessageObject as u, type ToastMessageResult as v, type ToastPosition as w, type ToastPromiseFunction as x, type UseInfiniteScrollReturn as y, useInfiniteScroll as z };
|