@tetacom/ng-components 1.6.5 → 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 +12 -12
  30. package/fesm2022/tetacom-ng-components.mjs.map +1 -1
  31. package/package.json +1 -1
package/docs/accordionDocs.mdx CHANGED
@@ -39,16 +39,16 @@ import AccordionStories from '../src/component/accordion/Accordion.stories';
39
39
  ```
40
40
  <teta-accordion>
41
41
  <teta-accordion-item [viewType]="'rounded'" [divider]="true">
42
- <teta-accordion-head>Heading 1</teta-accordion-head>
43
- <ng-template tetaAccordionContent>
44
- <div class="padding-v-3 padding-h-2">I am the content 1</div>
45
- </ng-template>
42
+ <teta-accordion-head>Heading 1</teta-accordion-head>
43
+ <ng-template tetaAccordionContent>
44
+ <div class="padding-v-3 padding-h-2">I am the content 1</div>
45
+ </ng-template>
46
46
  </teta-accordion-item>
47
47
  <teta-accordion-item [viewType]="'brick'">
48
- <teta-accordion-head>Heading 3</teta-accordion-head>
49
- <ng-template tetaAccordionContent>
50
- <div class="padding-v-3 padding-h-5">I am the content 3</div>
51
- </ng-template>
48
+ <teta-accordion-head>Heading 3</teta-accordion-head>
49
+ <ng-template tetaAccordionContent>
50
+ <div class="padding-v-3 padding-h-5">I am the content 3</div>
51
+ </ng-template>
52
52
  </teta-accordion-item>
53
53
  </teta-accordion>
54
54
  ```
@@ -57,83 +57,15 @@ import AccordionStories from '../src/component/accordion/Accordion.stories';
57
57
 
58
58
  #### teta-accordion-item
59
59
 
60
- <table>
61
- <thead>
62
- <tr>
63
- <th>Свойство</th>
64
- <th>Tип</th>
65
- <th>Описание</th>
66
- </tr>
67
- </thead>
68
- <tbody>
69
- <tr>
70
- <td class="text-align-center">
71
- <p>open</p>
72
- </td>
73
- <td class="text-align-center">
74
- <code>boolean</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>disabled</p>
83
- </td>
84
- <td class="text-align-center">
85
- <code>boolean</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>viewType</p>
94
- </td>
95
- <td class="text-align-center">
96
- <code>'rounded'|'circle'|'brick'</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>divider</p>
105
- </td>
106
- <td class="text-align-center">
107
- <code>boolean</code>
108
- </td>
109
- <td class="text-align-center">
110
- <p>Разделители между айтемами</p>
111
- </td>
112
- </tr>
113
- </tbody>
114
- </table>
60
+ | Свойство | Тип | Описание |
61
+ | ---------- | ---------------------------------- | ------------------------------------------------------ |
62
+ | `open` | `boolean` | Свойство, позволяющее управлять состоянием аккордеона. |
63
+ | `disabled` | `boolean` | Свойство для отключения аккордеона. |
64
+ | `viewType` | `'rounded' \| 'circle' \| 'brick'` | Свойство округления компонента. |
65
+ | `divider` | `boolean` | Разделители между айтемами. |
115
66
 
116
67
  #### teta-accordion-head
117
68
 
118
- <table>
119
- <thead>
120
- <tr>
121
- <th>Свойство</th>
122
- <th>Tип</th>
123
- <th>Описание</th>
124
- </tr>
125
- </thead>
126
- <tbody>
127
- <tr>
128
- <td class="text-align-center">
129
- <p>showToggle</p>
130
- </td>
131
- <td class="text-align-center">
132
- <code>boolean</code>
133
- </td>
134
- <td class="text-align-center">
135
- <p>Свойство для отображения состояния аккордеона</p>
136
- </td>
137
- </tr>
138
- </tbody>
139
- </table>
69
+ | Свойство | Тип | Описание |
70
+ | ---------- | --------- | --------------------------------------------- |
71
+ | showToggle | `boolean` | Свойство для отображения состояния аккордеона |
package/docs/avatarDocs.mdx CHANGED
@@ -3,103 +3,31 @@ import * as AvatarStories from '../src/component/avatar/avatar.stories';
3
3
 
4
4
  <Meta of={AvatarStories} />
5
5
 
6
- <div class="column gap-24">
7
- <h1>Аватар</h1>
8
- <div class="column">
9
- <p>
10
- Аватар — графическое изображение пользователя, фотография или рисунок. Он нужен, чтобы быстро узнавать
11
- пользователя (например, в ветке комментариев), а ещё — чтобы пользователь мог узнать сам себя. Например,
12
- проверить, что вошёл в аккаунт под нужным логином.
13
- </p>
14
- <p>
15
- В библиотеке существует два вида аватаров: изображения и цветные буквенные. Также, они различаются по размерам и
16
- скруглениям.
17
- </p>
18
- </div>
19
- <h3>Как использовать</h3>
20
- <div class="column">
21
- <p>
22
- Для создания аватара используется <code>teta-avatar</code>
23
- </p>
24
- <p>Аватар нужен в случаях:</p>
25
- <ul>
26
- <li>Если на странице есть возможность добавить комментарий;</li>
27
- <li>Отображение профиля в хедере или же в других компонентах.</li>
28
- </ul>
29
- </div>
30
- <div class="column">
31
- <h3>Скругления и размеры</h3>
32
- <div>
33
- <p>В основном, в наших продуктах используются круглые аватары (type: round) с размером 28x28.</p>
34
- </div>
35
- </div>
36
- <div class="column">
37
- <h3>Свойства</h3>
38
- <table>
39
- <thead>
40
- <tr>
41
- <th>Свойство</th>
42
- <th>Tип</th>
43
- <th>Описание</th>
44
- </tr>
45
- </thead>
46
- <tbody>
47
- <tr>
48
- <td class="text-align-center">
49
- <p>viewType</p>
50
- </td>
51
- <td class="text-align-center">
52
- <code>'rounded'|'circle'|'brick'</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>size</p>
61
- </td>
62
- <td class="text-align-center">
63
- <code>'24' | '28' | '32' | '44' | '64' | '128' | '200'</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>photo</p>
72
- </td>
73
- <td class="text-align-center">
74
- <code>string | ArrayBuffer</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>id</p>
83
- </td>
84
- <td class="text-align-center">
85
- <code>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>name</p>
94
- </td>
95
- <td class="text-align-center">
96
- <code>string</code>
97
- </td>
98
- <td class="text-align-center">
99
- <p>Отображаемый текст</p>
100
- </td>
101
- </tr>
102
- </tbody>
103
- </table>
104
- </div>
105
- </div>
6
+ # Аватар
7
+
8
+ Аватар — графическое изображение пользователя, фотография или рисунок. Он нужен, чтобы быстро узнавать пользователя (например, в ветке комментариев), а ещё — чтобы пользователь мог узнать сам себя. Например, проверить, что вошёл в аккаунт под нужным логином.
9
+
10
+ В библиотеке существует два вида аватаров: изображения и цветные буквенные. Также, они различаются по размерам и скруглениям.
11
+
12
+ ### Как использовать
13
+
14
+ Для создания аватара используется `teta-avatar`
15
+
16
+ Аватар нужен в случаях:
17
+
18
+ - Если на странице есть возможность добавить комментарий
19
+ - Отображение профиля в хедере или же в других компонентах
20
+
21
+ ### Скругления и размеры
22
+
23
+ В основном, в наших продуктах используются круглые аватары (type: round) с размером 28x28.
24
+
25
+ ### Свойства
26
+
27
+ | Свойство | Тип | Описание |
28
+ | -------- | -------------------------------------------------------- | ------------------------------- |
29
+ | viewType | `'rounded' \| 'circle' \| 'brick'` | Свойство округления компонента |
30
+ | size | `'24' \| '28' \| '32' \| '44' \| '64' \| '128' \| '200'` | Размер компонента |
31
+ | photo | `string \| ArrayBuffer` | Изображение для фона компонента |
32
+ | id | `number` | Определяет цвет фона компонента |
33
+ | name | `string` | Отображаемый текст |
package/docs/badgeDocs.mdx CHANGED
@@ -7,7 +7,7 @@ import BadgeStories from '../src/component/badge/Badge.stories';
7
7
 
8
8
  Badge — показывает статус объекта, например, им можно показать разные этапы какого-то процесса:
9
9
 
10
- - Запланированно
10
+ - Запланировано
11
11
  - В работе
12
12
  - Завершено
13
13
 
@@ -15,5 +15,5 @@ Badge — показывает статус объекта, например, и
15
15
 
16
16
  У Badge есть 2 варианта отображения:
17
17
 
18
- - Обводка- реализуется добавлением класса `badge`
18
+ - Обводка - реализуется добавлением класса `badge`
19
19
  - Заливка - необходимо добавить класс `badge` и `badge-"палитра"_filled` ( Пример: `badge-green_filled` )
package/docs/buttonDocs.mdx CHANGED
@@ -35,83 +35,11 @@ Button (кнопка) — компонент, который призывает
35
35
 
36
36
  ### Свойства
37
37
 
38
- <table>
39
- <thead>
40
- <tr>
41
- <th>Свойство</th>
42
- <th>Tип</th>
43
- <th>Описание</th>
44
- </tr>
45
- </thead>
46
- <tbody>
47
- <tr>
48
- <td class="text-align-center">
49
- <p>viewType</p>
50
- </td>
51
- <td class="text-align-center">
52
- <code>'rounded'|'circle'|'brick'</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>size</p>
61
- </td>
62
- <td class="text-align-center">
63
- <code>'s' | 'm' |'l'</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>disabled</p>
72
- </td>
73
- <td class="text-align-center">
74
- <code>boolean</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>palette</p>
83
- </td>
84
- <td class="text-align-center">
85
- <code>string</code>
86
- </td>
87
- <td class="text-align-center">
88
- <p>
89
- Отвечает за цвет фона кнопки. Принимает в себя название палитры и указывает 50-й оттенок (Пример: вводим
90
- yellow- цвет будет color-yellow-50). Работает только при view="primary"
91
- </p>
92
- </td>
93
- </tr>
94
- <tr>
95
- <td class="text-align-center">
96
- <p>view</p>
97
- </td>
98
- <td class="text-align-center">
99
- <code>'primary' | 'outline' | 'ghost'</code>
100
- </td>
101
- <td class="text-align-center">
102
- <p>Свойство, которое отвечает за тип кнопки</p>
103
- </td>
104
- </tr>
105
- <tr>
106
- <td class="text-align-center">
107
- <p>square</p>
108
- </td>
109
- <td class="text-align-center">
110
- <code>boolean</code>
111
- </td>
112
- <td class="text-align-center">
113
- <p>Отвечает за форму кнопки</p>
114
- </td>
115
- </tr>
116
- </tbody>
117
- </table>
38
+ | Свойство | Тип | Описание |
39
+ | -------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
40
+ | viewType | `'rounded' \| 'circle' \| 'brick'` | Свойство округления компонента |
41
+ | size | `'s' \| 'm' \| 'l'` | Размер кнопки |
42
+ | disabled | `boolean` | Отключает реакцию компонента на клик пользователя |
43
+ | palette | `string` | Отвечает за цвет фона кнопки. Принимает название палитры (например: yellow → color-yellow-50). Работает только при view="primary" |
44
+ | view | `'primary' \| 'outline' \| 'ghost'` | Свойство, которое отвечает за тип кнопки |
45
+ | square | `boolean` | Отвечает за форму кнопки |
package/docs/checkboxDocs.mdx CHANGED
@@ -28,83 +28,11 @@ Checkbox (чекбокс) — компонент, который позволя
28
28
 
29
29
  ### Свойства
30
30
 
31
- <table>
32
- <thead>
33
- <tr>
34
- <th>Свойство</th>
35
- <th>Tип</th>
36
- <th>Описание</th>
37
- </tr>
38
- </thead>
39
- <tbody>
40
- <tr>
41
- <td class="text-align-center">
42
- <p>viewType</p>
43
- </td>
44
- <td class="text-align-center">
45
- <code>'rounded'|'circle'|'brick'</code>
46
- </td>
47
- <td class="text-align-center">
48
- <p>Свойство округления компонента.</p>
49
- </td>
50
- </tr>
51
- <tr>
52
- <td class="text-align-center">
53
- <p>disabled</p>
54
- </td>
55
- <td class="text-align-center">
56
- <code>boolean</code>
57
- </td>
58
- <td class="text-align-center">
59
- <p>Отключает реакцию компонента на клик пользователя</p>
60
- </td>
61
- </tr>
62
- <tr>
63
- <td class="text-align-center">
64
- <p>noLabel</p>
65
- </td>
66
- <td class="text-align-center">
67
- <code>boolean</code>
68
- </td>
69
- <td class="text-align-center">
70
- <p>Свойство, которое отображает/скрывает блок текста в чекбоксе</p>
71
- </td>
72
- </tr>
73
- <tr>
74
- <td class="text-align-center">
75
- <p>labelPosition</p>
76
- </td>
77
- <td class="text-align-center">
78
- <code>'left' | 'right'</code>
79
- </td>
80
- <td class="text-align-center">
81
- <p>Позиция блока текста относительно чекбокса</p>
82
- </td>
83
- </tr>
84
- <tr>
85
- <td class="text-align-center">
86
- <p>allowNull</p>
87
- </td>
88
- <td class="text-align-center">
89
- <code>boolean</code>
90
- </td>
91
- <td class="text-align-center">
92
- <p>Свойство отвечающее за реагирование на null</p>
93
- </td>
94
- </tr>
95
- <tr>
96
- <td class="text-align-center">
97
- <p>binary</p>
98
- </td>
99
- <td class="text-align-center">
100
- <code>boolean</code>
101
- </td>
102
- <td class="text-align-center">
103
- <p>
104
- Свойство отвечающее за тип вводимых данных. Если <code>boolean</code>, то свойство должно быть
105
- <code>true</code>
106
- </p>
107
- </td>
108
- </tr>
109
- </tbody>
110
- </table>
31
+ | Свойство | Тип | Описание |
32
+ | ------------- | ------------------------------ | ------------------------------------------------------------------------------------------ |
33
+ | viewType | `'rounded'\|'circle'\|'brick'` | Свойство округления компонента |
34
+ | disabled | `boolean` | Отключает реакцию компонента на клик пользователя |
35
+ | noLabel | `boolean` | Свойство, которое отображает/скрывает блок текста в чекбоксе |
36
+ | labelPosition | `'left' \| 'right'` | Позиция блока текста относительно чекбокса |
37
+ | allowNull | `boolean` | Свойство отвечающее за реагирование на null |
38
+ | binary | `boolean` | Свойство отвечающее за тип вводимых данных. Если `true`, то свойство должно быть `boolean` |