@dss-kit/ui-kit 0.2.16 → 0.2.17
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/components/builders/Modal/Modal.d.ts +2 -2
- package/dist/components/builders/Modal/Modal.d.ts.map +1 -1
- package/dist/components/builders/Modal/ModalFooter/ModalFooter.d.ts +38 -0
- package/dist/components/builders/Modal/ModalFooter/ModalFooter.d.ts.map +1 -1
- package/dist/components/builders/Modal/ModalHeader/ModalHeader.d.ts +16 -3
- package/dist/components/builders/Modal/ModalHeader/ModalHeader.d.ts.map +1 -1
- package/dist/components/builders/Modal/ModalMain/ModalMain.d.ts +67 -6
- package/dist/components/builders/Modal/ModalMain/ModalMain.d.ts.map +1 -1
- package/dist/components/builders/Table/TablePagination/TablePagination.d.ts.map +1 -1
- package/dist/components/builders/Table/TablePagination/TablePagination.utils.d.ts +16 -5
- package/dist/components/builders/Table/TablePagination/TablePagination.utils.d.ts.map +1 -1
- package/dist/components/controls/Input/Input.d.ts +1 -1
- package/dist/components/controls/Input/Input.d.ts.map +1 -1
- package/dist/components/controls/Input/Input.stories.d.ts +1 -0
- package/dist/components/controls/Input/Input.stories.d.ts.map +1 -1
- package/dist/components/controls/Select/Select.d.ts +12 -1
- package/dist/components/controls/Select/Select.d.ts.map +1 -1
- package/dist/components/controls/Select/Select.stories.d.ts.map +1 -1
- package/dist/components/shared/Skeleton/Skeleton.d.ts +296 -0
- package/dist/components/shared/Skeleton/Skeleton.d.ts.map +1 -0
- package/dist/components/shared/Skeleton/Skeleton.stories.d.ts +15 -0
- package/dist/components/shared/Skeleton/Skeleton.stories.d.ts.map +1 -0
- package/dist/components/shared/Skeleton/index.d.ts +3 -0
- package/dist/components/shared/Skeleton/index.d.ts.map +1 -0
- package/dist/components/shared/Tooltip/Tooltip.d.ts +6 -0
- package/dist/components/shared/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/shared/Tooltip/Tooltip.stories.d.ts.map +1 -1
- package/dist/components/shared/Tooltip/constants.d.ts +10 -0
- package/dist/components/shared/Tooltip/constants.d.ts.map +1 -1
- package/dist/components/shared/index.d.ts +1 -0
- package/dist/components/shared/index.d.ts.map +1 -1
- package/dist/ui-kit.cjs.js +8 -8
- package/dist/ui-kit.cjs.js.map +1 -1
- package/dist/ui-kit.es.js +3755 -3530
- package/dist/ui-kit.es.js.map +1 -1
- package/package.json +10 -10
|
@@ -21,10 +21,10 @@ export interface ModalProps extends PropsWithChildren {
|
|
|
21
21
|
/** @default undefined */
|
|
22
22
|
modalClassName?: string;
|
|
23
23
|
/** Отключать прокрутку body при открытии */
|
|
24
|
-
/** @default
|
|
24
|
+
/** @default true */
|
|
25
25
|
disableBodyScroll?: boolean;
|
|
26
26
|
/** Показывать ли кнопку закрытия c абсолютным позиционированием внутри модального окна */
|
|
27
|
-
/** @default
|
|
27
|
+
/** @default undefined */
|
|
28
28
|
showAbsoluteCloseButton?: boolean;
|
|
29
29
|
}
|
|
30
30
|
declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/builders/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAKjD,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACnD,mCAAmC;IACnC,MAAM,EAAE,OAAO,CAAC;IAEhB,4CAA4C;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,6BAA6B;IAC7B,oBAAoB;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;IAEzC,yCAAyC;IACzC,oBAAoB;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,mCAAmC;IACnC,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,kCAAkC;IAClC,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,0CAA0C;IAC1C,yBAAyB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,4CAA4C;IAC5C,
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/builders/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAKjD,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACnD,mCAAmC;IACnC,MAAM,EAAE,OAAO,CAAC;IAEhB,4CAA4C;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,6BAA6B;IAC7B,oBAAoB;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;IAEzC,yCAAyC;IACzC,oBAAoB;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,mCAAmC;IACnC,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,kCAAkC;IAClC,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,0CAA0C;IAC1C,yBAAyB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,4CAA4C;IAC5C,oBAAoB;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,0FAA0F;IAC1F,yBAAyB;IACzB,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,QAAA,MAAM,KAAK,uGA0GV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -1,4 +1,42 @@
|
|
|
1
1
|
import { BoxProps } from '../../Box';
|
|
2
|
+
/**
|
|
3
|
+
* Компонент футера модального окна.
|
|
4
|
+
*
|
|
5
|
+
* `ModalFooter` представляет собой нижнюю часть модального окна, предназначенную
|
|
6
|
+
* для размещения кнопок действий и другого контента управления. Компонент является
|
|
7
|
+
* оберткой над `Box` с предустановленными стилями и настройками.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* // Базовое использование с кнопками
|
|
12
|
+
* <ModalFooter>
|
|
13
|
+
* <Button variant="secondary">Отмена</Button>
|
|
14
|
+
* <Button variant="primary">Сохранить</Button>
|
|
15
|
+
* </ModalFooter>
|
|
16
|
+
*
|
|
17
|
+
* // С настройкой отступов
|
|
18
|
+
* <ModalFooter gap="var(--spacing-md)" p="var(--spacing-xl)">
|
|
19
|
+
* <Button variant="ghost">Назад</Button>
|
|
20
|
+
* <Button variant="primary">Далее</Button>
|
|
21
|
+
* </ModalFooter>
|
|
22
|
+
*
|
|
23
|
+
* // Вертикальное расположение
|
|
24
|
+
* <ModalFooter row={false}>
|
|
25
|
+
* <Button variant="primary" fullWidth>Основное действие</Button>
|
|
26
|
+
* <Button variant="secondary" fullWidth>Дополнительное действие</Button>
|
|
27
|
+
* </ModalFooter>
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
2
30
|
declare const ModalFooter: import('react').ForwardRefExoticComponent<Omit<BoxProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
31
|
+
/**
|
|
32
|
+
* Экспорт компонента ModalFooter.
|
|
33
|
+
*
|
|
34
|
+
* Компонент автоматически применяет следующие стили:
|
|
35
|
+
* - Верхняя граница для визуального разделения с основным контентом
|
|
36
|
+
* - Flexbox layout с горизонтальным расположением по умолчанию
|
|
37
|
+
* - Стандартные отступы и промежутки между элементами
|
|
38
|
+
*
|
|
39
|
+
* Поддерживает все пропсы компонента Box для максимальной гибкости настройки.
|
|
40
|
+
*/
|
|
3
41
|
export { ModalFooter };
|
|
4
42
|
//# sourceMappingURL=ModalFooter.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/builders/Modal/ModalFooter/ModalFooter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI/D,QAAA,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"ModalFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/builders/Modal/ModalFooter/ModalFooter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI/D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,QAAA,MAAM,WAAW,kHAkChB,CAAC;AAIF;;;;;;;;;GASG;AACH,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -1,10 +1,23 @@
|
|
|
1
1
|
import { BoxProps } from '../../Box';
|
|
2
2
|
interface ModalHeaderProps extends Pick<BoxProps, "p" | "px" | "py" | "pt" | "pb" | "row" | "justifyContent" | "w"> {
|
|
3
|
-
/**
|
|
3
|
+
/**
|
|
4
|
+
* Основной заголовок, отображаемый в шапке модального окна.
|
|
5
|
+
* Стилизуется как title-3 с полужирным начертанием.
|
|
6
|
+
*
|
|
7
|
+
* @default undefined */
|
|
4
8
|
title?: string;
|
|
5
|
-
/**
|
|
9
|
+
/**
|
|
10
|
+
*
|
|
11
|
+
* Дополнительный подзаголовок, отображаемый под основным заголовком.
|
|
12
|
+
* Стилизуется как body-1 с цветом tertiary.
|
|
13
|
+
*
|
|
14
|
+
* @default undefined */
|
|
6
15
|
subtitle?: string;
|
|
7
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* Флаг отображения кнопки закрытия модального окна в правой части шапки.
|
|
18
|
+
* При нажатии вызывает колбэк onClose из ModalContext.
|
|
19
|
+
*
|
|
20
|
+
* @default false */
|
|
8
21
|
showCloseButton?: boolean;
|
|
9
22
|
}
|
|
10
23
|
declare const ModalHeader: import('react').ForwardRefExoticComponent<ModalHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/builders/Modal/ModalHeader/ModalHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAO/D,UAAU,gBACR,SAAQ,IAAI,CACV,QAAQ,EACR,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,gBAAgB,GAAG,GAAG,CACjE;IACD
|
|
1
|
+
{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/builders/Modal/ModalHeader/ModalHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAO/D,UAAU,gBACR,SAAQ,IAAI,CACV,QAAQ,EACR,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,gBAAgB,GAAG,GAAG,CACjE;IACD;;;;4BAIwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;4BAKwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;wBAIoB;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,QAAA,MAAM,WAAW,6GAoDhB,CAAC;AAGF,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -18,19 +18,80 @@ interface ModalMainRef {
|
|
|
18
18
|
/** Получить общую высоту контента */
|
|
19
19
|
getTotalSize: () => number;
|
|
20
20
|
}
|
|
21
|
+
/**
|
|
22
|
+
* Пропсы компонента ModalMain
|
|
23
|
+
*
|
|
24
|
+
* @interface ModalMainProps
|
|
25
|
+
* @extends {PropsWithChildren}
|
|
26
|
+
*/
|
|
21
27
|
interface ModalMainProps extends PropsWithChildren {
|
|
22
|
-
/**
|
|
28
|
+
/**
|
|
29
|
+
* Направление расположения элементов
|
|
30
|
+
* Если true, flex-direction будет row, иначе column
|
|
31
|
+
* @default false
|
|
32
|
+
*/
|
|
23
33
|
row?: boolean;
|
|
24
|
-
/**
|
|
34
|
+
/**
|
|
35
|
+
* Кастомный CSS класс для стилизации компонента
|
|
36
|
+
*/
|
|
25
37
|
className?: string;
|
|
26
|
-
/**
|
|
38
|
+
/**
|
|
39
|
+
* Примерная высота элемента для виртуализации в пикселях
|
|
40
|
+
* Используется для оптимизации производительности при скролле
|
|
41
|
+
* @default 100
|
|
42
|
+
*/
|
|
27
43
|
estimatedItemHeight?: number;
|
|
28
|
-
/**
|
|
44
|
+
/**
|
|
45
|
+
* Принудительно включить виртуализацию
|
|
46
|
+
* Если не указано, виртуализация включается автоматически для списков более 50 элементов
|
|
47
|
+
* @default false
|
|
48
|
+
*/
|
|
29
49
|
virtualize?: boolean;
|
|
30
|
-
/**
|
|
31
|
-
|
|
50
|
+
/**
|
|
51
|
+
* Максимальная высота контента в CSS единицах
|
|
52
|
+
* Применяется только при виртуализации
|
|
53
|
+
* @default 448
|
|
54
|
+
*/
|
|
32
55
|
maxHeight?: React.CSSProperties["maxHeight"];
|
|
33
56
|
}
|
|
57
|
+
/**
|
|
58
|
+
* Основной контейнер для содержимого модального окна с поддержкой виртуализации.
|
|
59
|
+
*
|
|
60
|
+
* Компонент автоматически включает виртуализацию для списков более 50 элементов,
|
|
61
|
+
* что значительно улучшает производительность при работе с большими объемами данных.
|
|
62
|
+
* Также поддерживает ручное управление скроллом через ref.
|
|
63
|
+
*
|
|
64
|
+
* @example
|
|
65
|
+
* // Простое использование
|
|
66
|
+
* <ModalMain>
|
|
67
|
+
* <div>Элемент 1</div>
|
|
68
|
+
* <div>Элемент 2</div>
|
|
69
|
+
* </ModalMain>
|
|
70
|
+
*
|
|
71
|
+
* @example
|
|
72
|
+
* // С виртуализацией и управлением скроллом
|
|
73
|
+
* const modalRef = useRef<ModalMainRef>(null);
|
|
74
|
+
*
|
|
75
|
+
* const handleScrollToTop = () => {
|
|
76
|
+
* modalRef.current?.scrollToTop();
|
|
77
|
+
* };
|
|
78
|
+
*
|
|
79
|
+
* <ModalMain
|
|
80
|
+
* ref={modalRef}
|
|
81
|
+
* virtualize
|
|
82
|
+
* estimatedItemHeight={120}
|
|
83
|
+
* maxHeight={600}
|
|
84
|
+
* >
|
|
85
|
+
* {items.map(item => <Item key={item.id} data={item} />)}
|
|
86
|
+
* </ModalMain>
|
|
87
|
+
*
|
|
88
|
+
* @example
|
|
89
|
+
* // Горизонтальное расположение
|
|
90
|
+
* <ModalMain row>
|
|
91
|
+
* <Column>Левая колонка</Column>
|
|
92
|
+
* <Column>Правая колонка</Column>
|
|
93
|
+
* </ModalMain>
|
|
94
|
+
*/
|
|
34
95
|
declare const ModalMain: import('react').ForwardRefExoticComponent<ModalMainProps & import('react').RefAttributes<ModalMainRef>>;
|
|
35
96
|
export { ModalMain };
|
|
36
97
|
export type { ModalMainRef };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalMain.d.ts","sourceRoot":"","sources":["../../../../../src/components/builders/Modal/ModalMain/ModalMain.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAGL,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAMf,UAAU,YAAY;IACpB,6BAA6B;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,4BAA4B;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mCAAmC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAClE,+CAA+C;IAC/C,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACpE,8EAA8E;IAC9E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,2BAA2B;IAC3B,UAAU,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IACxC,uCAAuC;IACvC,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B,qCAAqC;IACrC,YAAY,EAAE,MAAM,MAAM,CAAC;CAC5B;AAED,UAAU,cAAe,SAAQ,iBAAiB;IAChD
|
|
1
|
+
{"version":3,"file":"ModalMain.d.ts","sourceRoot":"","sources":["../../../../../src/components/builders/Modal/ModalMain/ModalMain.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAGL,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAMf,UAAU,YAAY;IACpB,6BAA6B;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,4BAA4B;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mCAAmC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAClE,+CAA+C;IAC/C,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACpE,8EAA8E;IAC9E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,2BAA2B;IAC3B,UAAU,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IACxC,uCAAuC;IACvC,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B,qCAAqC;IACrC,YAAY,EAAE,MAAM,MAAM,CAAC;CAC5B;AAED;;;;;GAKG;AACH,UAAU,cAAe,SAAQ,iBAAiB;IAChD;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;CAC9C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,QAAA,MAAM,SAAS,yGAyGd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/builders/Table/TablePagination/TablePagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/builders/Table/TablePagination/TablePagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAElB,sBAAsB;IACtB,QAAQ,EAAE,MAAM,CAAC;IAEjB,+BAA+B;IAC/B,UAAU,EAAE,MAAM,CAAC;IAEnB,sCAAsC;IACtC,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,8CAA8C;IAC9C,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C,gCAAgC;IAChC,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAE3B,8CAA8C;IAC9C,oBAAoB;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,uEAAuE;IACvE,oCAAoC;IACpC,kCAAkC,CAAC,EAAE,CAAC,IAAI,EAAE;QAC1C,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,MAAM,CAAC;IAEb,8DAA8D;IAC9D,yBAAyB;IACzB,+BAA+B,CAAC,EAAE,CAAC,YAAY,EAAE;QAC/C,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuJ1D,CAAC"}
|
|
@@ -1,8 +1,19 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Получает массив страниц
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
* @
|
|
2
|
+
* Получает массив номеров страниц для отображения в пагинации
|
|
3
|
+
* Адаптивно подстраивается под доступное пространство (maxVisiblePages)
|
|
4
|
+
*
|
|
5
|
+
* @param props.count - Общее количество страниц
|
|
6
|
+
* @param props.page - Текущая страница (начиная с 1)
|
|
7
|
+
* @param props.maxVisiblePages - Максимальное количество видимых элементов
|
|
8
|
+
* @returns Массив номеров страниц и многоточий ('start-dots', 'end-dots')
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* getPageNumbers({ page: 5, count: 10, maxVisiblePages: 7 })
|
|
12
|
+
* // => [1, 'start-dots', 4, 5, 6, 'end-dots', 10]
|
|
6
13
|
*/
|
|
7
|
-
export declare
|
|
14
|
+
export declare function getPageNumbers(props: {
|
|
15
|
+
count?: number;
|
|
16
|
+
page: number;
|
|
17
|
+
maxVisiblePages?: number;
|
|
18
|
+
}): (string | number)[];
|
|
8
19
|
//# sourceMappingURL=TablePagination.utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TablePagination.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/builders/Table/TablePagination/TablePagination.utils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TablePagination.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/builders/Table/TablePagination/TablePagination.utils.ts"],"names":[],"mappings":"AAUA;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,uBAoFA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+B/B;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,oBAAoB;IACpB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,oBAAoB;IACpB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,KAAK,WAAW,GAAG;IACjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+B/B;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,oBAAoB;IACpB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,oBAAoB;IACpB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,KAAK,WAAW,GAAG;IACjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mCAAmC;IACnC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gBAAgB;IAChB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,8BAA8B;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,KAAK,iBAAiB,GAAG,WAAW,GAClC,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAC1D,GAAG;IACF,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;CACrC,CAAC;AAEJ;;GAEG;AACH,KAAK,oBAAoB,GAAG,WAAW,GACrC,IAAI,CACF,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAC1D,GAAG;IACF,SAAS,EAAE,IAAI,CAAC;IAChB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAChE,CAAC;AAEJ,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,oBAAoB,CAAC;AAElE;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,6EAoPhB,CAAC"}
|
|
@@ -7,6 +7,7 @@ export declare const Default: Story;
|
|
|
7
7
|
export declare const ErrorInput: Story;
|
|
8
8
|
export declare const Disabled: Story;
|
|
9
9
|
export declare const Small: Story;
|
|
10
|
+
export declare const WithReactNodeLabel: Story;
|
|
10
11
|
export declare const WithPrefixSuffix: Story;
|
|
11
12
|
export declare const WithClearButton: Story;
|
|
12
13
|
export declare const Multiline: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,KAAK,EAAiB,MAAM,SAAS,CAAC;AAE/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAuD5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAGpC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAGF,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAGF,eAAO,MAAM,sBAAsB,EAAE,KAYpC,CAAC;AAGF,eAAO,MAAM,mBAAmB,EAAE,KAYjC,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAmDxB,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,KAkBlC,CAAC"}
|
|
1
|
+
{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,KAAK,EAAiB,MAAM,SAAS,CAAC;AAE/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAuD5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAGpC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAGF,eAAO,MAAM,kBAAkB,EAAE,KAoBhC,CAAC;AAGF,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAGF,eAAO,MAAM,sBAAsB,EAAE,KAYpC,CAAC;AAGF,eAAO,MAAM,mBAAmB,EAAE,KAYjC,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAmDxB,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,KAkBlC,CAAC"}
|
|
@@ -86,8 +86,15 @@ export type SelectProps<I, V> = {
|
|
|
86
86
|
error?: boolean;
|
|
87
87
|
/** Текст ошибки, отображаемый под полем при `error = true`. */
|
|
88
88
|
errorText?: string;
|
|
89
|
+
/** Ширина селекта */
|
|
90
|
+
width?: React.CSSProperties["width"];
|
|
89
91
|
/** Растягивает селект на всю доступную ширину контейнера. */
|
|
90
92
|
fullWidth?: boolean;
|
|
93
|
+
/** Минимальная ширина селекта
|
|
94
|
+
*
|
|
95
|
+
* @default 120
|
|
96
|
+
*/
|
|
97
|
+
minWidth?: React.CSSProperties["minWidth"];
|
|
91
98
|
/**
|
|
92
99
|
* Показывать ли элемент "сбросить выбор" в начале списка
|
|
93
100
|
* (доступен только в single‑режиме).
|
|
@@ -109,6 +116,10 @@ export type SelectProps<I, V> = {
|
|
|
109
116
|
observer?: ReactNode;
|
|
110
117
|
/** Визуальный размер контрола (`"xs" | "sm" | "md"`). */
|
|
111
118
|
size?: SelectSize;
|
|
119
|
+
/** Максимальная ширина дропдауна в пикселях. */
|
|
120
|
+
dropdownMaxWidth?: number;
|
|
121
|
+
/** Минимальная ширина дропдауна в пикселях. */
|
|
122
|
+
dropdownMinWidth?: number;
|
|
112
123
|
} & (I extends string | number ? {
|
|
113
124
|
/**
|
|
114
125
|
* Функция, которая из элемента `I` возвращает значение `V`.
|
|
@@ -181,6 +192,6 @@ export type SelectProps<I, V> = {
|
|
|
181
192
|
* =========================================================================
|
|
182
193
|
* - useControlled: управляет состоянием значения в controlled/uncontrolled режиме
|
|
183
194
|
*/
|
|
184
|
-
export declare function Select<I, V extends string | number>({ value, onChange, multiple, returnedValue, renderItem, renderInputItem, renderSingleInputItem, renderMultipleInputItem, renderDropdownItem, placeholder, items, fullWidth, size, showDefaultItem, disabled, label, firstItem, lastItem, observer, emptyText, onBlur, prompt, error, errorText, }: SelectProps<I, V>): import("react/jsx-runtime").JSX.Element;
|
|
195
|
+
export declare function Select<I, V extends string | number>({ value, onChange, multiple, returnedValue, renderItem, renderInputItem, renderSingleInputItem, renderMultipleInputItem, renderDropdownItem, placeholder, items, fullWidth, size, showDefaultItem, disabled, label, firstItem, lastItem, observer, emptyText, onBlur, prompt, error, errorText, dropdownMaxWidth, dropdownMinWidth, minWidth, width, }: SelectProps<I, V>): import("react/jsx-runtime").JSX.Element;
|
|
185
196
|
export {};
|
|
186
197
|
//# sourceMappingURL=Select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Select/Select.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAef,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Select/Select.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAef,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAS5C,KAAK,kBAAkB,CAAC,CAAC,IACrB;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,EAAE,CAAC,GAAG,IAAI,CAAC;CACxB,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,aAAa,EAAE,CAAC,EAAE,CAAC;CACpB,CAAC;AAEN,KAAK,qBAAqB,CAAC,CAAC,IAAI;IAC9B,IAAI,EAAE,CAAC,CAAC;IACR,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,EAAE,CAAC,IAAI;IAC9B,wBAAwB;IACxB,KAAK,EAAE,CAAC,EAAE,CAAC;IAEX;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;;;;;OAMG;IACH,kBAAkB,EAAE,CAClB,IAAI,EAAE,CAAC,EACP,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAC/B,SAAS,CAAC;IAEf;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IAEhE;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAE/C;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,CAAC,aAAa,EAAE,CAAC,EAAE,KAAK,SAAS,CAAC;IAE5D;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAEzC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAErC,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAE3C;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/B,2EAA2E;IAC3E,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,yDAAyD;IACzD,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAC1B;IACE;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;CAChC,GACD;IACE;;;OAGG;IACH,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;CAC/B,CAAC,CAAC;AAEP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACnD,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,aAAa,EACb,UAAU,EACV,eAAe,EACf,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,WAAW,EACX,KAAU,EACV,SAAS,EACT,IAAW,EACX,eAAe,EACf,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,MAAM,EACN,KAAK,EACL,SAAS,EACT,gBAAsB,EACtB,gBAAsB,EACtB,QAAc,EACd,KAAK,GACN,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,2CAobnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Select/Select.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;
|
|
1
|
+
{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Select/Select.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAoBD,KAAK,WAAW,GAAG,WAAW,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AAEnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CAwD3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAkBnB,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,KAclC,CAAC;AAGF,eAAO,MAAM,sBAAsB,EAAE,KA8BpC,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,KAgC/B,CAAC;AAkBF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAoFxB,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KAsG1B,CAAC"}
|
|
@@ -0,0 +1,296 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import { CornerRadius, Size } from '../../../types/tokens.types';
|
|
3
|
+
/**
|
|
4
|
+
* Варианты отображения скелетона
|
|
5
|
+
*
|
|
6
|
+
* @typedef {string} SkeletonVariant
|
|
7
|
+
* @description Определяет форму и стилизацию скелетона:
|
|
8
|
+
* - `text` - для имитации текстового содержимого с закругленными краями
|
|
9
|
+
* - `rectangular` - прямоугольная форма с умеренными закруглениями (по умолчанию)
|
|
10
|
+
* - `circular` - круглая форма для аватаров, кнопок и иконок
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* // Круглый скелетон для аватара
|
|
14
|
+
* <Skeleton variant="circular" size="md" />
|
|
15
|
+
*
|
|
16
|
+
* // Текстовый скелетон
|
|
17
|
+
* <Skeleton variant="text" width="200px" height="16px" />
|
|
18
|
+
*/
|
|
19
|
+
export type SkeletonVariant = "text" | "rectangular" | "circular";
|
|
20
|
+
/**
|
|
21
|
+
* Предустановленные размеры скелетона
|
|
22
|
+
*
|
|
23
|
+
* @typedef {string} SkeletonSize
|
|
24
|
+
* @description Размеры из дизайн-системы для быстрого создания скелетонов стандартных размеров:
|
|
25
|
+
* - `xs` - 16x16px - для мелких элементов (иконки, чекбоксы)
|
|
26
|
+
* - `sm` - 24x24px - для небольших кнопок и иконок
|
|
27
|
+
* - `md` - 32x32px - для аватаров среднего размера
|
|
28
|
+
* - `lg` - 40x40px - для крупных элементов интерфейса
|
|
29
|
+
* - `xl` - 48x48px - для больших аватаров и кнопок
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* // Скелетон размера 'md' (32x32px)
|
|
33
|
+
* <Skeleton size="md" variant="circular" />
|
|
34
|
+
*/
|
|
35
|
+
export type SkeletonSize = Extract<Size, "xs" | "sm" | "md" | "lg" | "xl">;
|
|
36
|
+
/**
|
|
37
|
+
* Типы анимации скелетона
|
|
38
|
+
*
|
|
39
|
+
* @typedef {string} SkeletonAnimation
|
|
40
|
+
* @description Варианты анимации для создания эффекта загрузки:
|
|
41
|
+
* - `wave` - волновая анимация, бегущая слева направо (по умолчанию)
|
|
42
|
+
* - `pulse` - пульсация с изменением прозрачности
|
|
43
|
+
* - `none` - без анимации, статичный скелетон
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* // Скелетон с пульсирующей анимацией
|
|
47
|
+
* <Skeleton animation="pulse" />
|
|
48
|
+
*
|
|
49
|
+
* // Статичный скелетон без анимации
|
|
50
|
+
* <Skeleton animation="none" />
|
|
51
|
+
*/
|
|
52
|
+
export type SkeletonAnimation = "pulse" | "wave" | "none";
|
|
53
|
+
/**
|
|
54
|
+
* Размеры закругления углов из дизайн-системы
|
|
55
|
+
*
|
|
56
|
+
* @typedef {string} SkeletonBorderRadius
|
|
57
|
+
* @description Доступные варианты закругления соответствующие CSS переменным --corner-*:
|
|
58
|
+
* - `zero` - 0px (без закругления)
|
|
59
|
+
* - `xs` - 4px (минимальное закругление)
|
|
60
|
+
* - `sm` - 8px (маленькое закругление)
|
|
61
|
+
* - `md` - 12px (среднее закругление)
|
|
62
|
+
* - `lg` - 16px (большое закругление)
|
|
63
|
+
* - `xl` - 20px
|
|
64
|
+
* - `2xl` - 24px
|
|
65
|
+
* - `3xl` - 32px
|
|
66
|
+
* - `4xl` - 40px
|
|
67
|
+
* - `5xl` - 48px
|
|
68
|
+
* - `6xl` - 56px
|
|
69
|
+
* - `full-round` - 1000px (полное скругление)
|
|
70
|
+
* - `circular` - 50% (круг)
|
|
71
|
+
*
|
|
72
|
+
* @example
|
|
73
|
+
* // Минимальное закругление
|
|
74
|
+
* <Skeleton borderRadius="xs" />
|
|
75
|
+
*
|
|
76
|
+
* // Квадратный скелетон
|
|
77
|
+
* <Skeleton borderRadius="zero" />
|
|
78
|
+
*
|
|
79
|
+
* // Круглый скелетон
|
|
80
|
+
* <Skeleton borderRadius="circular" />
|
|
81
|
+
*
|
|
82
|
+
* // Большое закругление
|
|
83
|
+
* <Skeleton borderRadius="2xl" />
|
|
84
|
+
*/
|
|
85
|
+
export type SkeletonBorderRadius = CornerRadius | "circular";
|
|
86
|
+
/**
|
|
87
|
+
* Свойства компонента Skeleton
|
|
88
|
+
*
|
|
89
|
+
* @interface SkeletonProps
|
|
90
|
+
* @description Интерфейс для настройки внешнего вида и поведения компонента скелетона
|
|
91
|
+
*/
|
|
92
|
+
export interface SkeletonProps {
|
|
93
|
+
/**
|
|
94
|
+
* Ширина скелетона
|
|
95
|
+
*
|
|
96
|
+
* @type {string | number | undefined}
|
|
97
|
+
* @description Задает ширину скелетона. Может быть:
|
|
98
|
+
* - Числом (будет преобразовано в пиксели)
|
|
99
|
+
* - Строкой с единицами измерения (px, %, em, rem и т.д.)
|
|
100
|
+
* - Если не указано, будет использована ширина из `size` или 100%
|
|
101
|
+
*
|
|
102
|
+
* @example
|
|
103
|
+
* width={200} // 200px
|
|
104
|
+
* width="50%" // 50% ширины родителя
|
|
105
|
+
* width="10rem" // 10rem
|
|
106
|
+
*/
|
|
107
|
+
width?: string | number;
|
|
108
|
+
/**
|
|
109
|
+
* Высота скелетона
|
|
110
|
+
*
|
|
111
|
+
* @type {string | number | undefined}
|
|
112
|
+
* @description Задает высоту скелетона. Может быть:
|
|
113
|
+
* - Числом (будет преобразовано в пиксели)
|
|
114
|
+
* - Строкой с единицами измерения (px, %, em, rem и т.д.)
|
|
115
|
+
* - Если не указано, будет использована высота из `size` или значение по умолчанию
|
|
116
|
+
*
|
|
117
|
+
* @example
|
|
118
|
+
* height={16} // 16px для текста
|
|
119
|
+
* height="2em" // 2em
|
|
120
|
+
* height="100%" // 100% высоты родителя
|
|
121
|
+
*/
|
|
122
|
+
height?: string | number;
|
|
123
|
+
/**
|
|
124
|
+
* Вариант отображения скелетона
|
|
125
|
+
*
|
|
126
|
+
* @type {SkeletonVariant | undefined}
|
|
127
|
+
* @default "rectangular"
|
|
128
|
+
* @description Определяет форму и стилизацию скелетона:
|
|
129
|
+
* - `rectangular` - прямоугольная форма (по умолчанию)
|
|
130
|
+
* - `circular` - круглая форма для аватаров
|
|
131
|
+
* - `text` - для имитации текста с мягкими закруглениями
|
|
132
|
+
*
|
|
133
|
+
* @example
|
|
134
|
+
* variant="circular" // для аватаров
|
|
135
|
+
* variant="text" // для текстового содержимого
|
|
136
|
+
*/
|
|
137
|
+
variant?: SkeletonVariant;
|
|
138
|
+
/**
|
|
139
|
+
* Предустановленный размер скелетона
|
|
140
|
+
*
|
|
141
|
+
* @type {SkeletonSize | undefined}
|
|
142
|
+
* @default "md"
|
|
143
|
+
* @description Использует предопределенные размеры из дизайн-системы.
|
|
144
|
+
* Игнорируется, если заданы `width` или `height`.
|
|
145
|
+
* Размеры: xs(16px), sm(24px), md(32px), lg(40px), xl(48px)
|
|
146
|
+
*
|
|
147
|
+
* @example
|
|
148
|
+
* size="md" // 32x32px
|
|
149
|
+
* size="lg" // 40x40px - для больших элементов
|
|
150
|
+
*/
|
|
151
|
+
size?: SkeletonSize;
|
|
152
|
+
/**
|
|
153
|
+
* Тип анимации скелетона
|
|
154
|
+
*
|
|
155
|
+
* @type {SkeletonAnimation | undefined}
|
|
156
|
+
* @default "wave"
|
|
157
|
+
* @description Определяет тип анимации:
|
|
158
|
+
* - `wave` - волновая анимация слева направо (по умолчанию)
|
|
159
|
+
* - `pulse` - пульсирующая анимация с изменением прозрачности
|
|
160
|
+
* - `none` - без анимации
|
|
161
|
+
*
|
|
162
|
+
* @example
|
|
163
|
+
* animation="pulse" // пульсация
|
|
164
|
+
* animation="none" // статичный скелетон
|
|
165
|
+
*/
|
|
166
|
+
animation?: SkeletonAnimation;
|
|
167
|
+
/**
|
|
168
|
+
* Количество строк для текстового скелетона
|
|
169
|
+
*
|
|
170
|
+
* @type {number | undefined}
|
|
171
|
+
* @default 1
|
|
172
|
+
* @description Создает несколько строк скелетона для имитации многострочного текста.
|
|
173
|
+
* Работает только с `variant="text"`. Последняя строка автоматически делается короче (70%)
|
|
174
|
+
* для создания естественного вида текста.
|
|
175
|
+
*
|
|
176
|
+
* @example
|
|
177
|
+
* lines={3} // 3 строки текста
|
|
178
|
+
* lines={5} // 5 строк для длинного текста
|
|
179
|
+
*/
|
|
180
|
+
lines?: number;
|
|
181
|
+
/**
|
|
182
|
+
* Дополнительные CSS классы
|
|
183
|
+
*
|
|
184
|
+
* @type {string | undefined}
|
|
185
|
+
* @description Позволяет добавить кастомные стили к скелетону.
|
|
186
|
+
* Классы применяются к корневому элементу компонента.
|
|
187
|
+
*
|
|
188
|
+
* @example
|
|
189
|
+
* className="my-custom-skeleton"
|
|
190
|
+
* className={cx("skeleton-large", isActive && "skeleton-active")}
|
|
191
|
+
*/
|
|
192
|
+
className?: string;
|
|
193
|
+
/**
|
|
194
|
+
* Дочерние элементы
|
|
195
|
+
*
|
|
196
|
+
* @type {ReactNode | undefined}
|
|
197
|
+
* @description Контент, который будет показан когда `loading=false`.
|
|
198
|
+
* Позволяет использовать компонент как обертку для условного рендеринга.
|
|
199
|
+
*
|
|
200
|
+
* @example
|
|
201
|
+
* <Skeleton loading={isLoading}>
|
|
202
|
+
* <div>Загруженный контент</div>
|
|
203
|
+
* </Skeleton>
|
|
204
|
+
*/
|
|
205
|
+
children?: ReactNode;
|
|
206
|
+
/**
|
|
207
|
+
* Закругление углов скелетона
|
|
208
|
+
*
|
|
209
|
+
* @type {SkeletonBorderRadius | undefined}
|
|
210
|
+
* @description Позволяет переопределить стандартные варианты закругления углов из `variant`.
|
|
211
|
+
* Если задан, игнорирует стили из `variant` и применяет выбранное значение.
|
|
212
|
+
* Все значения соответствуют CSS переменным из дизайн-системы.
|
|
213
|
+
*
|
|
214
|
+
* **Доступные значения:**
|
|
215
|
+
* - `zero` - без закругления (0px)
|
|
216
|
+
* - `xs`, `sm`, `md`, `lg`, `xl` - стандартные размеры закругления
|
|
217
|
+
* - `2xl`, `3xl`, `4xl`, `5xl`, `6xl` - большие размеры закругления
|
|
218
|
+
* - `full-round` - максимальное закругление (1000px)
|
|
219
|
+
* - `circular` - полный круг (50%)
|
|
220
|
+
*
|
|
221
|
+
* @example
|
|
222
|
+
* borderRadius="zero" // квадратные углы
|
|
223
|
+
* borderRadius="xs" // минимальное закругление (4px)
|
|
224
|
+
* borderRadius="md" // среднее закругление (12px)
|
|
225
|
+
* borderRadius="circular" // круглый скелетон
|
|
226
|
+
* borderRadius="2xl" // большое закругление (24px)
|
|
227
|
+
*/
|
|
228
|
+
borderRadius?: SkeletonBorderRadius;
|
|
229
|
+
/**
|
|
230
|
+
* Показывать ли скелетон
|
|
231
|
+
*
|
|
232
|
+
* @type {boolean | undefined}
|
|
233
|
+
* @default true
|
|
234
|
+
* @description Управляет отображением скелетона:
|
|
235
|
+
* - `true` - показывает скелетон (по умолчанию)
|
|
236
|
+
* - `false` - показывает `children` если они есть, иначе ничего
|
|
237
|
+
*
|
|
238
|
+
* @example
|
|
239
|
+
* loading={isDataLoading} // связано с состоянием загрузки
|
|
240
|
+
* loading={!data} // показывать пока нет данных
|
|
241
|
+
*/
|
|
242
|
+
loading?: boolean;
|
|
243
|
+
}
|
|
244
|
+
/**
|
|
245
|
+
* Компонент Skeleton для отображения состояния загрузки
|
|
246
|
+
*
|
|
247
|
+
* @component
|
|
248
|
+
* @param {SkeletonProps} props - Свойства компонента
|
|
249
|
+
* @returns {JSX.Element | null} JSX элемент скелетона или null
|
|
250
|
+
*
|
|
251
|
+
* @description
|
|
252
|
+
* Универсальный компонент для создания скелетонов (skeleton screens) -
|
|
253
|
+
* заглушек, которые показываются во время загрузки контента.
|
|
254
|
+
*
|
|
255
|
+
* **Основные возможности:**
|
|
256
|
+
* - 3 варианта отображения: прямоугольный, круглый, текстовый
|
|
257
|
+
* - 3 типа анимации: волновая, пульсирующая, без анимации
|
|
258
|
+
* - Предустановленные размеры или кастомные размеры
|
|
259
|
+
* - Поддержка многострочного текста
|
|
260
|
+
* - Условный рендеринг с возможностью обертки контента
|
|
261
|
+
* - Полная кастомизация через className
|
|
262
|
+
*
|
|
263
|
+
* @example
|
|
264
|
+
* // Простой прямоугольный скелетон
|
|
265
|
+
* <Skeleton width={200} height={20} />
|
|
266
|
+
*
|
|
267
|
+
* @example
|
|
268
|
+
* // Круглый скелетон для аватара
|
|
269
|
+
* <Skeleton variant="circular" size="md" />
|
|
270
|
+
*
|
|
271
|
+
* @example
|
|
272
|
+
* // Многострочный текстовый скелетон
|
|
273
|
+
* <Skeleton variant="text" lines={3} width="100%" />
|
|
274
|
+
*
|
|
275
|
+
* @example
|
|
276
|
+
* // Условный рендеринг с оберткой
|
|
277
|
+
* <Skeleton loading={isLoading}>
|
|
278
|
+
* <UserProfile user={userData} />
|
|
279
|
+
* </Skeleton>
|
|
280
|
+
*
|
|
281
|
+
* @example
|
|
282
|
+
* // Кастомная анимация и стили
|
|
283
|
+
* <Skeleton
|
|
284
|
+
* animation="pulse"
|
|
285
|
+
* className="my-skeleton"
|
|
286
|
+
* width="300px"
|
|
287
|
+
* height="150px"
|
|
288
|
+
* />
|
|
289
|
+
*
|
|
290
|
+
* @since 1.0.0
|
|
291
|
+
* @see {@link SkeletonProps} для полного описания свойств
|
|
292
|
+
* @see {@link SkeletonVariant} для вариантов отображения
|
|
293
|
+
* @see {@link SkeletonAnimation} для типов анимации
|
|
294
|
+
*/
|
|
295
|
+
export declare const Skeleton: FC<SkeletonProps>;
|
|
296
|
+
//# sourceMappingURL=Skeleton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE/D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,aAAa,GAAG,UAAU,CAAC;AAElE;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAE3E;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7D;;;;;GAKG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAE9B;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IAEpC;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAyKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA2DtC,CAAC"}
|