@tetacom/ng-components 1.6.6 → 1.6.7

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.
Files changed (31) hide show
  1. package/docs/accordionDocs.mdx +17 -85
  2. package/docs/avatarDocs.mdx +28 -100
  3. package/docs/badgeDocs.mdx +2 -2
  4. package/docs/buttonDocs.mdx +8 -80
  5. package/docs/checkboxDocs.mdx +8 -80
  6. package/docs/datePickerDocs.mdx +33 -178
  7. package/docs/dateRangeDocs.mdx +31 -166
  8. package/docs/delimiterDocs.mdx +20 -91
  9. package/docs/dropdownDocs.mdx +41 -157
  10. package/docs/expandCardlDocs.mdx +18 -55
  11. package/docs/expandPanelDocs.mdx +40 -112
  12. package/docs/fileAreaDocs.mdx +16 -74
  13. package/docs/iconDocs.mdx +8 -47
  14. package/docs/inputDocs.mdx +26 -90
  15. package/docs/listDocs.mdx +11 -18
  16. package/docs/messageDocs.mdx +52 -77
  17. package/docs/modalDocs.mdx +0 -1
  18. package/docs/progressBarDocs.mdx +26 -83
  19. package/docs/radioDocs.mdx +36 -113
  20. package/docs/resizePanelDocs.mdx +25 -93
  21. package/docs/selectDocs.mdx +72 -277
  22. package/docs/switchDocs.mdx +42 -111
  23. package/docs/tableDocs.mdx +7 -205
  24. package/docs/tabsDocs.mdx +12 -94
  25. package/docs/tagDocs.mdx +11 -20
  26. package/docs/toggleDocs.mdx +20 -55
  27. package/docs/toolbarDocs.mdx +9 -17
  28. package/docs/treeDocs.mdx +39 -121
  29. package/fesm2022/tetacom-ng-components.mjs +2 -2
  30. package/fesm2022/tetacom-ng-components.mjs.map +1 -1
  31. package/package.json +1 -1
package/docs/datePickerDocs.mdx CHANGED
@@ -3,183 +3,38 @@ import DatePickerStories from '../src/component/date-picker/date-picker.stories'
3
3
 
4
4
  <Meta of={DatePickerStories} />
5
5
 
6
- <div class='column gap-24'>
7
- <h1>DatePicker</h1>
8
- <div class='column'>
9
- <p>DatePicker (выбор даты) — компонент, который помогает вводить дату с клавиатуры или выбирать её с помощью мыши.</p>
10
- <p>В строке можно вручную ввести дату в формате дд.мм.гггг достаточно лишь воспользоваться клавиатурой. Нажатие на
11
- строку выбора даты/кнопки периода вызывается блок календаря. Блок календаря состоит из специальных элементов
12
- (Calendar_Item).</p>
13
- <p>Также можно добавить выбор времени, при надобности.В этом случае формат даты будет следующим : дд.мм.гггг, чч:мм</p>
14
- </div>
15
- <h3>Как использовать</h3>
16
- <div class='column'>
17
- <ul>
18
- <li>Запись в строке происходит в формате дд.мм.гггг;</li>
19
- <li>Внутри datePicker-a присутствует mothPicker и yearPicker;</li>
20
- <li>В него можно передавать дату в формате string,Date и number(new Date().getTime());</li>
21
- <li>Для отображения времени нужно передать <code>[showTime]="true"</code>;</li>
22
- <li>Если нужно чтобы datePicker не мог быть пустым, то нужно передать <code>[allowNull]="false"</code>;</li>
23
- </ul>
24
- <p>Также можно передать свойста minDate и maxDate для ограничения по выбору дат.</p>
25
- </div>
26
- <div class='column'>
27
- <h3>Свойства</h3>
28
- <table>
29
- <thead>
30
- <tr>
31
- <th>Свойство</th>
32
- <th>Tип</th>
33
- <th>Описание</th>
34
- </tr>
35
- </thead>
36
- <tbody>
37
- <tr>
38
- <td class='text-align-center'>
39
- <p>viewType</p>
40
- </td>
41
- <td class='text-align-center'>
42
- <code>'rounded'|'circle'|'brick'</code>
43
- </td>
44
- <td class='text-align-center'>
45
- <p>Свойство округления компонента.</p>
46
- </td>
47
- </tr>
48
- <tr>
49
- <td class='text-align-center'>
50
- <p>locale</p>
51
- </td>
52
- <td class='text-align-center'>
53
- <code>'en'|'ru'</code>
54
- </td>
55
- <td class='text-align-center'>
56
- <p>Локализация календаря</p>
57
- </td>
58
- </tr>
59
- <tr>
60
- <td class='text-align-center'>
61
- <p>disabled</p>
62
- </td>
63
- <td class='text-align-center'>
64
- <code>boolean</code>
65
- </td>
66
- <td class='text-align-center'>
67
- <p>Отключает реакцию компонента на клик пользователя</p>
68
- </td>
69
- </tr>
70
- <tr>
71
- <td class='text-align-center'>
72
- <p>minDate</p>
73
- </td>
74
- <td class='text-align-center'>
75
- <code>string | Date | number</code>
76
- </td>
77
- <td class='text-align-center'>
78
- <p>Минимальная для выбора дата</p>
79
- </td>
80
- </tr>
81
- <tr>
82
- <td class='text-align-center'>
83
- <p>maxDate</p>
84
- </td>
85
- <td class='text-align-center'>
86
- <code>string | Date | number</code>
87
- </td>
88
- <td class='text-align-center'>
89
- <p>Максимальная для выбора дата</p>
90
- </td>
91
- </tr>
92
- <tr>
93
- <td class='text-align-center'>
94
- <p>showTime</p>
95
- </td>
96
- <td class='text-align-center'>
97
- <code>boolean</code>
98
- </td>
99
- <td class='text-align-center'>
100
- <p>Свойство, которое добавляет выбор времени</p>
101
- </td>
102
- </tr>
103
- <tr>
104
- <td class='text-align-center'>
105
- <p>align</p>
106
- </td>
107
- <td class='text-align-center'>
108
- <code>Align</code>
109
- </td>
110
- <td class='text-align-center'>
111
- <p>Позиционирование содержимого дропдауна по горизонтали</p>
112
- </td>
113
- </tr>
114
- <tr>
115
- <td class='text-align-center'>
116
- <p>verticalAlign</p>
117
- </td>
118
- <td class='text-align-center'>
119
- <code>VerticalAlign</code>
120
- </td>
121
- <td class='text-align-center'>
122
- <p>Позиционирование содержимого дропдауна по вертикали</p>
123
- </td>
124
- </tr>
125
- <tr>
126
- <td class='text-align-center'>
127
- <p>date</p>
128
- </td>
129
- <td class='text-align-center'>
130
- <code>string | Date | number</code>
131
- </td>
132
- <td class='text-align-center'>
133
- <p>Другой способ передачи данных в пикер (помимо ngModel)</p>
134
- </td>
135
- </tr>
136
- <tr>
137
- <td class='text-align-center'>
138
- <p>selectDate</p>
139
- </td>
140
- <td class='text-align-center'>
141
- <code>function</code>
142
- </td>
143
- <td class='text-align-center'>
144
- <p>Применяет функцию при изменении данных.Отдает выбранную дату/рендж</p>
145
- </td>
146
- </tr>
6
+ # DatePicker
147
7
 
148
- <tr>
149
- <td class='text-align-center'>
150
- <p>allowNull</p>
151
- </td>
152
- <td class='text-align-center'>
153
- <code>boolean</code>
154
- </td>
155
- <td class='text-align-center'>
156
- <p>Свойство, которое позволяет/запрещает оставлять пустую строчку в пикере </p>
157
- </td>
158
- </tr>
159
- <tr>
160
- <td class='text-align-center'>
161
- <p>invalid</p>
162
- </td>
163
- <td class='text-align-center'>
164
- <code>boolean</code>
165
- </td>
166
- <td class='text-align-center'>
167
- <p>Свойство для отображения некорректности введенных данных</p>
168
- </td>
169
- </tr>
170
- <tr>
171
- <td class='text-align-center'>
172
- <p>backdrop</p>
173
- </td>
174
- <td class='text-align-center'>
175
- <code>boolean</code>
176
- </td>
177
- <td class='text-align-center'>
178
- <p>При открытии дропдауна создает поверх <code>div</code>, который не позволяет взаимодействовать с элементами вне содержимого дропдауна, пока он открыт</p>
179
- </td>
180
- </tr>
181
- </tbody>
182
- </table>
8
+ DatePicker (выбор даты) — компонент, который помогает вводить дату с клавиатуры или выбирать её с помощью мыши.
183
9
 
184
- </div>
185
- </div>
10
+ В строке можно вручную ввести дату в формате дд.мм.гггг достаточно лишь воспользоваться клавиатурой. Нажатие на строку выбора даты/кнопки периода вызывается блок календаря. Блок календаря состоит из специальных элементов (Calendar_Item).
11
+
12
+ Также можно добавить выбор времени, при надобности. В этом случае формат даты будет следующим: дд.мм.гггг, чч:мм
13
+
14
+ ### Как использовать
15
+
16
+ - Запись в строке происходит в формате дд.мм.гггг
17
+ - Внутри datePicker-a присутствует mothPicker и yearPicker
18
+ - В него можно передавать дату в формате string, Date и number (new Date().getTime())
19
+ - Для отображения времени нужно передать `[showTime]="true"`
20
+ - Если нужно чтобы datePicker не мог быть пустым, то нужно передать `[allowNull]="false"`
21
+
22
+ Также можно передать свойства minDate и maxDate для ограничения по выбору дат.
23
+
24
+ ### Свойства
25
+
26
+ | Свойство | Тип | Описание |
27
+ | ------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
28
+ | viewType | `'rounded'\|'circle'\|'brick'` | Свойство округления компонента |
29
+ | locale | `'en'\|'ru'` | Локализация календаря |
30
+ | disabled | `boolean` | Отключает реакцию компонента на клик пользователя |
31
+ | minDate | `string \| Date \| number` | Минимальная для выбора дата |
32
+ | maxDate | `string \| Date \| number` | Максимальная для выбора дата |
33
+ | showTime | `boolean` | Свойство, которое добавляет выбор времени |
34
+ | align | `Align` | Позиционирование содержимого дропдауна по горизонтали |
35
+ | verticalAlign | `VerticalAlign` | Позиционирование содержимого дропдауна по вертикали |
36
+ | date | `string \| Date \| number` | Другой способ передачи данных в пикер (помимо ngModel) |
37
+ | selectDate | `function` | Применяет функцию при изменении данных. Отдает выбранную дату/рендж |
38
+ | allowNull | `boolean` | Свойство, которое позволяет/запрещает оставлять пустую строчку в пикере |
39
+ | invalid | `boolean` | Свойство для отображения некорректности введенных данных |
40
+ | backdrop | `boolean` | При открытии дропдауна создает поверх `div`, который не позволяет взаимодействовать с элементами вне содержимого дропдауна, пока он открыт |
package/docs/dateRangeDocs.mdx CHANGED
@@ -3,170 +3,35 @@ import DateRangeStories from '../src/component/date-picker/date-range.stories';
3
3
 
4
4
  <Meta of={DateRangeStories} />
5
5
 
6
- <div class='column gap-24'>
7
- <h1>DateRange</h1>
8
- <div class='column'>
9
- <p>DateRange — компонент,который позволяет выбрать отрезок дат (от и до). В строке также можно вводить отрезок дат в формате дд.мм.гггг - дд.мм.гггг</p>
10
- <p>В строке можно вручную ввести дату в формате дд.мм.гггг достаточно лишь воспользоваться клавиатурой. Нажатие на
11
- строку выбора даты/кнопки периода вызывается блок календаря. Блок календаря состоит из специальных элементов
12
- (Calendar_Item).</p>
13
- </div>
14
- <h3>Как использовать</h3>
15
- <div class='column'>
16
- <ul>
17
- <li>Запись в строке происходит в формате дд.мм.гггг-дд.мм.гггг;</li>
18
- <li>Внутри dateRange-a присутствует yearPicker;</li>
19
- <li>Переключение месяцев происходит посредством стрелочек;</li>
20
- <li>Он принимает в себя данные в формате <code>&#123; from:string | Date | number, to:string | Date | number &#125;</code></li>
21
- <li>Если нужно чтобы dateRange не мог быть пустым, то нужно передать <code>[allowNull]="false"</code></li>
22
- </ul>
23
- <p>Также можно передать свойста minDate и maxDate для ограничения по выбору дат.</p>
24
- </div>
25
- <div class='column'>
26
- <h3>Свойства</h3>
27
- <table>
28
- <thead>
29
- <tr>
30
- <th>Свойство</th>
31
- <th>Tип</th>
32
- <th>Описание</th>
33
- </tr>
34
- </thead>
35
- <tbody>
36
- <tr>
37
- <td class='text-align-center'>
38
- <p>viewType</p>
39
- </td>
40
- <td class='text-align-center'>
41
- <code>'rounded'|'circle'|'brick'</code>
42
- </td>
43
- <td class='text-align-center'>
44
- <p>Свойство округления компонента.</p>
45
- </td>
46
- </tr>
47
- <tr>
48
- <td class='text-align-center'>
49
- <p>locale</p>
50
- </td>
51
- <td class='text-align-center'>
52
- <code>'en'|'ru'</code>
53
- </td>
54
- <td class='text-align-center'>
55
- <p>Локализация календаря</p>
56
- </td>
57
- </tr>
58
- <tr>
59
- <td class='text-align-center'>
60
- <p>disabled</p>
61
- </td>
62
- <td class='text-align-center'>
63
- <code>boolean</code>
64
- </td>
65
- <td class='text-align-center'>
66
- <p>Отключает реакцию компонента на клик пользователя</p>
67
- </td>
68
- </tr>
69
- <tr>
70
- <td class='text-align-center'>
71
- <p>minDate</p>
72
- </td>
73
- <td class='text-align-center'>
74
- <code>string | Date | number</code>
75
- </td>
76
- <td class='text-align-center'>
77
- <p>Минимальная для выбора дата</p>
78
- </td>
79
- </tr>
80
- <tr>
81
- <td class='text-align-center'>
82
- <p>maxDate</p>
83
- </td>
84
- <td class='text-align-center'>
85
- <code>string | Date | number</code>
86
- </td>
87
- <td class='text-align-center'>
88
- <p>Максимальная для выбора дата</p>
89
- </td>
90
- </tr>
91
- <tr>
92
- <td class='text-align-center'>
93
- <p>align</p>
94
- </td>
95
- <td class='text-align-center'>
96
- <code>Align</code>
97
- </td>
98
- <td class='text-align-center'>
99
- <p>Позиционирование содержимого дропдауна по горизонтали</p>
100
- </td>
101
- </tr>
102
- <tr>
103
- <td class='text-align-center'>
104
- <p>verticalAlign</p>
105
- </td>
106
- <td class='text-align-center'>
107
- <code>VerticalAlign</code>
108
- </td>
109
- <td class='text-align-center'>
110
- <p>Позиционирование содержимого дропдауна по вертикали</p>
111
- </td>
112
- </tr>
113
- <tr>
114
- <td class='text-align-center'>
115
- <p>date</p>
116
- </td>
117
- <td class='text-align-center'>
118
- <code>DateFromToModel</code>
119
- </td>
120
- <td class='text-align-center'>
121
- <p>Другой способ передачи данных в пикер (помимо ngModel)</p>
122
- </td>
123
- </tr>
124
- <tr>
125
- <td class='text-align-center'>
126
- <p>selectDate</p>
127
- </td>
128
- <td class='text-align-center'>
129
- <code>function</code>
130
- </td>
131
- <td class='text-align-center'>
132
- <p>Применяет функцию при изменении данных.Отдает выбранную дату/рендж</p>
133
- </td>
134
- </tr>
135
- <tr>
136
- <td class='text-align-center'>
137
- <p>allowNull</p>
138
- </td>
139
- <td class='text-align-center'>
140
- <code>boolean</code>
141
- </td>
142
- <td class='text-align-center'>
143
- <p>Свойство, которое позволяет/запрещает оставлять пустую строчку в пикере </p>
144
- </td>
145
- </tr>
146
- <tr>
147
- <td class='text-align-center'>
148
- <p>invalid</p>
149
- </td>
150
- <td class='text-align-center'>
151
- <code>boolean</code>
152
- </td>
153
- <td class='text-align-center'>
154
- <p>Свойство для отображения некорректности введенных данных</p>
155
- </td>
156
- </tr>
157
- <tr>
158
- <td class='text-align-center'>
159
- <p>backdrop</p>
160
- </td>
161
- <td class='text-align-center'>
162
- <code>boolean</code>
163
- </td>
164
- <td class='text-align-center'>
165
- <p>При открытии дропдауна создает поверх <code>div</code>, который не позволяет взаимодействовать с элементами вне содержимого дропдауна, пока он открыт</p>
166
- </td>
167
- </tr>
168
- </tbody>
169
- </table>
6
+ # DateRange
170
7
 
171
- </div>
172
- </div>
8
+ DateRange — компонент, который позволяет выбрать отрезок дат (от и до). В строке также можно вводить отрезок дат в формате дд.мм.гггг - дд.мм.гггг
9
+
10
+ В строке можно вручную ввести дату в формате дд.мм.гггг достаточно лишь воспользоваться клавиатурой. Нажатие на строку выбора даты/кнопки периода вызывается блок календаря. Блок календаря состоит из специальных элементов (Calendar_Item).
11
+
12
+ ### Как использовать
13
+
14
+ - Запись в строке происходит в формате дд.мм.гггг-дд.мм.гггг
15
+ - Внутри dateRange-a присутствует yearPicker
16
+ - Переключение месяцев происходит посредством стрелочек
17
+ - Он принимает в себя данные в формате `{ from:string | Date | number, to:string | Date | number }`
18
+ - Если нужно чтобы dateRange не мог быть пустым, то нужно передать `[allowNull]="false"`
19
+
20
+ Также можно передать свойства minDate и maxDate для ограничения по выбору дат.
21
+
22
+ ### Свойства
23
+
24
+ | Свойство | Тип | Описание |
25
+ | ------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
26
+ | viewType | `'rounded'\|'circle'\|'brick'` | Свойство округления компонента |
27
+ | locale | `'en'\|'ru'` | Локализация календаря |
28
+ | disabled | `boolean` | Отключает реакцию компонента на клик пользователя |
29
+ | minDate | `string \| Date \| number` | Минимальная для выбора дата |
30
+ | maxDate | `string \| Date \| number` | Максимальная для выбора дата |
31
+ | align | `Align` | Позиционирование содержимого дропдауна по горизонтали |
32
+ | verticalAlign | `VerticalAlign` | Позиционирование содержимого дропдауна по вертикали |
33
+ | date | `DateFromToModel` | Другой способ передачи данных в пикер (помимо ngModel) |
34
+ | selectDate | `function` | Применяет функцию при изменении данных. Отдает выбранную дату/рендж |
35
+ | allowNull | `boolean` | Свойство, которое позволяет/запрещает оставлять пустую строчку в пикере |
36
+ | invalid | `boolean` | Свойство для отображения некорректности введенных данных |
37
+ | backdrop | `boolean` | При открытии дропдауна создает поверх `div`, который не позволяет взаимодействовать с элементами вне содержимого дропдауна, пока он открыт |
package/docs/delimiterDocs.mdx CHANGED
@@ -3,94 +3,23 @@ import DelimiterStories from '../src/component/delimiter/Delimiter.stories';
3
3
 
4
4
  <Meta of={DelimiterStories} />
5
5
 
6
- <div class="column gap-24">
7
- <h1>Разделитель</h1>
8
- <div class="column">
9
- <p>Delimiter (разделитель) — компонент, который позволяет разделять элементы между друг другом.</p>
10
- <p>Компонент применяется как в горизонтальном, так и в вертикальном вариантах. </p>
11
- </div>
12
- <h3>Как использовать</h3>
13
- <div class="column">
14
- <p>Необходим для разграничения групп кнопок, в большинстве случаев им разделяются кнопки только с иконками.</p>
15
- </div>
16
- <div class="column">
17
- <h3>Свойства</h3>
18
- <table>
19
- <thead>
20
- <tr>
21
- <th>Свойство</th>
22
- <th>Tип</th>
23
- <th>Описание</th>
24
- </tr>
25
- </thead>
26
- <tbody>
27
- <tr>
28
- <td class="text-align-center">
29
- <p>direction</p>
30
- </td>
31
- <td class="text-align-center">
32
- <code>'vertical' | 'horizontal'</code>
33
- </td>
34
- <td class="text-align-center">
35
- <p>Направление разделителя</p>
36
- </td>
37
- </tr>
38
- <tr>
39
- <td class="text-align-center">
40
- <p>height</p>
41
- </td>
42
- <td class="text-align-center">
43
- <code>number</code>
44
- </td>
45
- <td class="text-align-center">
46
- <p>Высота разделителя</p>
47
- </td>
48
- </tr>
49
- <tr>
50
- <td class="text-align-center">
51
- <p>width</p>
52
- </td>
53
- <td class="text-align-center">
54
- <code>number</code>
55
- </td>
56
- <td class="text-align-center">
57
- <p>Ширина разделителя</p>
58
- </td>
59
- </tr>
60
- <tr>
61
- <td class="text-align-center">
62
- <p>verticalMargin</p>
63
- </td>
64
- <td class="text-align-center">
65
- <code>number</code>
66
- </td>
67
- <td class="text-align-center">
68
- <p>Отступ от компонента по вертикали</p>
69
- </td>
70
- </tr>
71
- <tr>
72
- <td class="text-align-center">
73
- <p>horizontalMargin</p>
74
- </td>
75
- <td class="text-align-center">
76
- <code>number</code>
77
- </td>
78
- <td class="text-align-center">
79
- <p>Отступ от компонента по горизонтали</p>
80
- </td>
81
- </tr>
82
- <tr>
83
- <td class="text-align-center">
84
- <p>palette</p>
85
- </td>
86
- <td class="text-align-center">
87
- <code>string</code>
88
- </td>
89
- <td class="text-align-center">
90
- <p>Цвет разделителя</p>
91
- </td>
92
- </tr>
93
- </tbody>
94
- </table>
95
- </div>
96
- </div>
6
+ # Разделитель
7
+
8
+ Delimiter (разделитель) — компонент, который позволяет разделять элементы между друг другом.
9
+
10
+ Компонент применяется как в горизонтальном, так и в вертикальном вариантах.
11
+
12
+ ### Как использовать
13
+
14
+ Необходим для разграничения групп кнопок, в большинстве случаев им разделяются кнопки только с иконками.
15
+
16
+ ### Свойства
17
+
18
+ | Свойство | Тип | Описание |
19
+ | ---------------- | ---------------------------- | ----------------------------------- |
20
+ | direction | `'vertical' \| 'horizontal'` | Направление разделителя |
21
+ | height | `number` | Высота разделителя |
22
+ | width | `number` | Ширина разделителя |
23
+ | verticalMargin | `number` | Отступ от компонента по вертикали |
24
+ | horizontalMargin | `number` | Отступ от компонента по горизонтали |
25
+ | palette | `string` | Цвет разделителя |