@tetacom/ng-components 1.1.30 → 1.1.31
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/component/date-picker/base-calendar.d.ts +1 -0
- package/docs/accordionDocs.mdx +118 -0
- package/docs/avatarDocs.mdx +99 -0
- package/docs/badgeDocs.mdx +24 -0
- package/docs/buttonDocs.mdx +120 -0
- package/docs/chartDocs.mdx +153 -0
- package/docs/checkboxDocs.mdx +108 -0
- package/docs/chipDocs.mdx +17 -0
- package/docs/datePickerDocs.mdx +230 -0
- package/docs/delimiterDocs.mdx +96 -0
- package/docs/dropdownDocs.mdx +143 -0
- package/docs/expandCardlDocs.mdx +56 -0
- package/docs/expandPanelDocs.mdx +105 -0
- package/docs/fileAreaDocs.mdx +74 -0
- package/docs/iconDocs.mdx +89 -0
- package/docs/inputDocs.mdx +92 -0
- package/docs/listDocs.mdx +17 -0
- package/docs/messageDocs.mdx +69 -0
- package/docs/modalDocs.mdx +63 -0
- package/docs/progressBarDocs.mdx +74 -0
- package/docs/propertyGridDocs.mdx +135 -0
- package/docs/radioDocs.mdx +106 -0
- package/docs/resizePanelDocs.mdx +86 -0
- package/docs/selectDocs.mdx +240 -0
- package/docs/switchDocs.mdx +103 -0
- package/docs/tableDocs.mdx +266 -0
- package/docs/tabsDocs.mdx +145 -0
- package/docs/tagDocs.mdx +19 -0
- package/docs/threeDocs.mdx +65 -0
- package/docs/toggleDocs.mdx +54 -0
- package/docs/toolbarDocs.mdx +16 -0
- package/docs/treeDocs.mdx +107 -0
- package/esm2022/common/model/view-type.model.mjs +1 -1
- package/esm2022/component/avatar/avatar/avatar.component.mjs +2 -2
- package/esm2022/component/date-picker/base-calendar.mjs +13 -1
- package/esm2022/component/date-picker/date-picker/date-calendar/date-calendar.component.mjs +3 -3
- package/esm2022/component/date-picker/date-range/range-calendar/range-calendar.component.mjs +3 -3
- package/fesm2022/tetacom-ng-components.mjs +18 -6
- package/fesm2022/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,266 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import TableStories from "../src/component/table/Table.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={TableStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>Таблица</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>Table (таблица) — компонент, который отображает данные. Создает на основе двух элементов: Table Header (шапка таблицы) и Cell (ячейка).</p>
|
|
10
|
+
</div>
|
|
11
|
+
<h3>Правила применения</h3>
|
|
12
|
+
<div class='column'>
|
|
13
|
+
<p>Основные правила применения элементов таблицы:</p>
|
|
14
|
+
<ul>
|
|
15
|
+
<li>в ячейке могут быть иконки, текстовые составляющие, выпадающие таблицы, тоглы, чекбоксы и др.;</li>
|
|
16
|
+
<li>Table Header используется только в шапке таблице.</li>
|
|
17
|
+
</ul>
|
|
18
|
+
<p>Для упрощения дизайн-процесса лучше всего создать строку из необходимого количества Table Header и объединить в компонент. Затем то же самое повторить со строками с Cell и из полученных строк создать компонент таблицы.</p>
|
|
19
|
+
</div>
|
|
20
|
+
<h3>Как использовать</h3>
|
|
21
|
+
<div class='column'>
|
|
22
|
+
<p>Для начала нужно создать <code> <teta-table></code>.</p>
|
|
23
|
+
<p>Для создания таблицы в компонент необходимо передать свойства:</p>
|
|
24
|
+
<ul>
|
|
25
|
+
<li><code>data</code> - данные для формирования таблицы.</li>
|
|
26
|
+
<li><code>columns</code> - каркас данных для таблицы.</li>
|
|
27
|
+
</ul>
|
|
28
|
+
<p><code>columns</code> принимает в себя массив объектов типа <code>TableColumn</code>. Он состоит из:</p>
|
|
29
|
+
<ul>
|
|
30
|
+
<li><code>width</code> - ширина поля</li>
|
|
31
|
+
<li><code>flex</code> - коэффициент растяжения ячейки </li>
|
|
32
|
+
<li><code>headCellClass</code> - применяет указанный класс к шапке столбца</li>
|
|
33
|
+
<li><code>cellClass</code> - применяет указанный класс к каждой ячейке столбца</li>
|
|
34
|
+
<li><code>filterType</code> - тип поля в ячейке (select,datepicker,string и т.д.)</li>
|
|
35
|
+
<li><code>locked</code> - закрепляет столбец</li>
|
|
36
|
+
<li><code>parentName</code> - название столбца родителя </li>
|
|
37
|
+
<li><code>unit</code> - единицы измерения</li>
|
|
38
|
+
<li><code>unitMeasureParameterId</code> - id измеряемого параметра </li>
|
|
39
|
+
<li><code>unitId</code> - id единицы измерения </li>
|
|
40
|
+
<li><code>data</code> - дополнительные данные, свободное описание, доступны внутри компонета ячейки, можно прокинуть callback например</li>
|
|
41
|
+
<li><code>editable</code> - флаг включения/отключения редактирования ячейки</li>
|
|
42
|
+
<li><code>headCellComponent</code> - компонент кастомной ячейки шапки стобца</li>
|
|
43
|
+
<li><code>headDropdownConfig</code> - кастомный дропдаун заголовка для столбца </li>
|
|
44
|
+
<li><code>cellComponent</code> - компонент кастомной ячейки</li>
|
|
45
|
+
<li><code>aggregate</code> - аггрегирует данные по указанному методу и выводит в последней строчке таблицы.</li>
|
|
46
|
+
<li><code>defaultValue</code> - данные которые будут выводится при отсутствии данных в ячейке</li>
|
|
47
|
+
<li><code>maxValue</code> - максимальное значение в ячейке</li>
|
|
48
|
+
<li><code>minValue</code> - минимальное значение в ячейке</li>
|
|
49
|
+
<li><code>required</code> - флаг обязательности ввода данных в ячейки</li>
|
|
50
|
+
<li><code>columns</code> - дочерние колонки</li>
|
|
51
|
+
<li><code>validators</code> - валидаторы для ячеек таблицы</li>
|
|
52
|
+
<li><code>sortOrder</code> - порядковый номер</li>
|
|
53
|
+
<li><code>name</code> - название столбца в строке результатов</li>
|
|
54
|
+
<li><code>caption</code> - название столбца для заголовка таблицы </li>
|
|
55
|
+
<li><code>hint</code> - указанный текст появляется при наведении на ячейку.</li>
|
|
56
|
+
<li><code>sortable</code> - возможность сортировать поле</li>
|
|
57
|
+
<li><code>sortField</code> - поле для сортировки</li>
|
|
58
|
+
<li><code>filterable</code> - возможность фильтровать поле</li>
|
|
59
|
+
<li><code>filterField</code> - поле для фильтрации</li>
|
|
60
|
+
<li><code>stringFilterType</code> - тип сравнения строкового фильтра</li>
|
|
61
|
+
<li><code>listFilterType</code> - тип сравнения строкового фильтра</li>
|
|
62
|
+
<li><code>strict</code> - строгое сравнение </li>
|
|
63
|
+
<li><code>filterComponent</code> - компонент для рендера фильтра </li>
|
|
64
|
+
</ul>
|
|
65
|
+
<p>При выборе листа в качестве типа ячейки, то необходимо добавить свойство <code>dict</code>, которое отвечает за отображаемые элементы списка.</p>
|
|
66
|
+
</div>
|
|
67
|
+
<h3>Свойства</h3>
|
|
68
|
+
<table>
|
|
69
|
+
<thead>
|
|
70
|
+
<tr>
|
|
71
|
+
<th>Свойство</th>
|
|
72
|
+
<th>Tип</th>
|
|
73
|
+
<th>Описание</th>
|
|
74
|
+
</tr>
|
|
75
|
+
</thead>
|
|
76
|
+
<tbody>
|
|
77
|
+
<tr>
|
|
78
|
+
<td class='text-align-center'>
|
|
79
|
+
<p>data</p>
|
|
80
|
+
</td>
|
|
81
|
+
<td class='text-align-center'>
|
|
82
|
+
<code>any[]</code>
|
|
83
|
+
</td>
|
|
84
|
+
<td class='text-align-center'>
|
|
85
|
+
<p>Данные для формирования таблицы</p>
|
|
86
|
+
</td>
|
|
87
|
+
</tr>
|
|
88
|
+
<tr>
|
|
89
|
+
<td class='text-align-center'>
|
|
90
|
+
<p>cookieName</p>
|
|
91
|
+
</td>
|
|
92
|
+
<td class='text-align-center'>
|
|
93
|
+
<code>string</code>
|
|
94
|
+
</td>
|
|
95
|
+
<td class='text-align-center'>
|
|
96
|
+
<p>Будут формироваться куки данных таблицы с указанным именем</p>
|
|
97
|
+
</td>
|
|
98
|
+
</tr>
|
|
99
|
+
<tr>
|
|
100
|
+
<td class='text-align-center'>
|
|
101
|
+
<p>columns</p>
|
|
102
|
+
</td>
|
|
103
|
+
<td class='text-align-center'>
|
|
104
|
+
<code>TableColumns[]</code>
|
|
105
|
+
</td>
|
|
106
|
+
<td class='text-align-center'>
|
|
107
|
+
<p>Шаблон столбцов таблицы</p>
|
|
108
|
+
</td>
|
|
109
|
+
</tr>
|
|
110
|
+
<tr>
|
|
111
|
+
<td class='text-align-center'>
|
|
112
|
+
<p>virtual</p>
|
|
113
|
+
</td>
|
|
114
|
+
<td class='text-align-center'>
|
|
115
|
+
<code>boolean</code>
|
|
116
|
+
</td>
|
|
117
|
+
<td class='text-align-center'>
|
|
118
|
+
<p>Флаг для добавления виртульного скролла</p>
|
|
119
|
+
</td>
|
|
120
|
+
</tr>
|
|
121
|
+
<tr>
|
|
122
|
+
<td class='text-align-center'>
|
|
123
|
+
<p>dict</p>
|
|
124
|
+
</td>
|
|
125
|
+
<td class='text-align-center'>
|
|
126
|
+
<code>any[]</code>
|
|
127
|
+
</td>
|
|
128
|
+
<td class='text-align-center'>
|
|
129
|
+
<p>Массив выбираемых элементов. Каждое свойство имеет название, которое должно совпадать с соответствующим свойством в <code>data</code>. В качестве значения принимает массив объектов id,name.Требуется если вы добавляете ячейку типа лист.</p>
|
|
130
|
+
</td>
|
|
131
|
+
</tr>
|
|
132
|
+
<tr>
|
|
133
|
+
<td class='text-align-center'>
|
|
134
|
+
<p>contextMenu</p>
|
|
135
|
+
</td>
|
|
136
|
+
<td class='text-align-center'>
|
|
137
|
+
<code>template</code>
|
|
138
|
+
</td>
|
|
139
|
+
<td class='text-align-center'>
|
|
140
|
+
<p>Шаблон контекстного меню </p>
|
|
141
|
+
</td>
|
|
142
|
+
</tr>
|
|
143
|
+
<tr>
|
|
144
|
+
<td class='text-align-center'>
|
|
145
|
+
<p>filterOptions</p>
|
|
146
|
+
</td>
|
|
147
|
+
<td class='text-align-center'>
|
|
148
|
+
<code>IDictionary<IIdName<any>[]></code>
|
|
149
|
+
</td>
|
|
150
|
+
<td class='text-align-center'>
|
|
151
|
+
<p>Список опций для фильтрации, если не задано - берет Dict</p>
|
|
152
|
+
</td>
|
|
153
|
+
</tr>
|
|
154
|
+
<tr>
|
|
155
|
+
<td class='text-align-center'>
|
|
156
|
+
<p>editType</p>
|
|
157
|
+
</td>
|
|
158
|
+
<td class='text-align-center'>
|
|
159
|
+
<code>EditType</code>
|
|
160
|
+
</td>
|
|
161
|
+
<td class='text-align-center'>
|
|
162
|
+
<p> Тип редактирования - построчно или по ячейкам. При построчном - активируется вся строка для редактирования, иначе - по одной ячейке </p>
|
|
163
|
+
</td>
|
|
164
|
+
</tr>
|
|
165
|
+
<tr>
|
|
166
|
+
<td class='text-align-center'>
|
|
167
|
+
<p>editEvent</p>
|
|
168
|
+
</td>
|
|
169
|
+
<td class='text-align-center'>
|
|
170
|
+
<code>EditEvent</code>
|
|
171
|
+
</td>
|
|
172
|
+
<td class='text-align-center'>
|
|
173
|
+
<p>Выбор события при котором начинается редактирование ячейки таблицы</p>
|
|
174
|
+
</td>
|
|
175
|
+
</tr>
|
|
176
|
+
<tr>
|
|
177
|
+
<td class='text-align-center'>
|
|
178
|
+
<p>selectType</p>
|
|
179
|
+
</td>
|
|
180
|
+
<td class='text-align-center'>
|
|
181
|
+
<code>SelectType</code>
|
|
182
|
+
</td>
|
|
183
|
+
<td class='text-align-center'>
|
|
184
|
+
<p>Тип выбора строк. Никак, чекбоксами (появляется доп столбец с чеком), или просто мышью.</p>
|
|
185
|
+
</td>
|
|
186
|
+
</tr>
|
|
187
|
+
<tr>
|
|
188
|
+
<td class='text-align-center'>
|
|
189
|
+
<p>selectedRows</p>
|
|
190
|
+
</td>
|
|
191
|
+
<td class='text-align-center'>
|
|
192
|
+
<code>any[]</code>
|
|
193
|
+
</td>
|
|
194
|
+
<td class='text-align-center'>
|
|
195
|
+
<p>Свойство отвечающее за выбранные ячейки</p>
|
|
196
|
+
</td>
|
|
197
|
+
</tr>
|
|
198
|
+
<tr>
|
|
199
|
+
<td class='text-align-center'>
|
|
200
|
+
<p>tableService</p>
|
|
201
|
+
</td>
|
|
202
|
+
<td class='text-align-center'>
|
|
203
|
+
<code>function</code>
|
|
204
|
+
</td>
|
|
205
|
+
<td class='text-align-center'>
|
|
206
|
+
<p>Срабатывает при создании сервиса и отдает его.</p>
|
|
207
|
+
</td>
|
|
208
|
+
</tr>
|
|
209
|
+
<tr>
|
|
210
|
+
<td class='text-align-center'>
|
|
211
|
+
<p>cellEditEnd</p>
|
|
212
|
+
</td>
|
|
213
|
+
<td class='text-align-center'>
|
|
214
|
+
<code>function</code>
|
|
215
|
+
</td>
|
|
216
|
+
<td class='text-align-center'>
|
|
217
|
+
<p>Указанная функция применяется при окончании редактирования ячейки </p>
|
|
218
|
+
</td>
|
|
219
|
+
</tr>
|
|
220
|
+
<tr>
|
|
221
|
+
<td class='text-align-center'>
|
|
222
|
+
<p>cellEditStart</p>
|
|
223
|
+
</td>
|
|
224
|
+
<td class='text-align-center'>
|
|
225
|
+
<code>function</code>
|
|
226
|
+
</td>
|
|
227
|
+
<td class='text-align-center'>
|
|
228
|
+
<p>Указанная функция применяется при начале редактирования ячейки </p>
|
|
229
|
+
</td>
|
|
230
|
+
</tr>
|
|
231
|
+
<tr>
|
|
232
|
+
<td class='text-align-center'>
|
|
233
|
+
<p>rowEditEnd</p>
|
|
234
|
+
</td>
|
|
235
|
+
<td class='text-align-center'>
|
|
236
|
+
<code>function</code>
|
|
237
|
+
</td>
|
|
238
|
+
<td class='text-align-center'>
|
|
239
|
+
<p>Указанная функция применяется при окончании редактирования строчки.</p>
|
|
240
|
+
</td>
|
|
241
|
+
</tr>
|
|
242
|
+
<tr>
|
|
243
|
+
<td class='text-align-center'>
|
|
244
|
+
<p>rowEditStart</p>
|
|
245
|
+
</td>
|
|
246
|
+
<td class='text-align-center'>
|
|
247
|
+
<code>function</code>
|
|
248
|
+
</td>
|
|
249
|
+
<td class='text-align-center'>
|
|
250
|
+
<p>Указанная функция применяется при начале редактирования строчки.</p>
|
|
251
|
+
</td>
|
|
252
|
+
</tr>
|
|
253
|
+
<tr>
|
|
254
|
+
<td class='text-align-center'>
|
|
255
|
+
<p>activeRowChange</p>
|
|
256
|
+
</td>
|
|
257
|
+
<td class='text-align-center'>
|
|
258
|
+
<code>function</code>
|
|
259
|
+
</td>
|
|
260
|
+
<td class='text-align-center'>
|
|
261
|
+
<p>Указанная функция применяется при изменении выбранной строчки.</p>
|
|
262
|
+
</td>
|
|
263
|
+
</tr>
|
|
264
|
+
</tbody>
|
|
265
|
+
</table>
|
|
266
|
+
</div>
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import TabsStories from "../src/component/tabs/Tabs.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={TabsStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>Таб</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>Tab (таб) — компонент, который переключают вкладки на странице. Активный таб выделен цветом и помечен специальным
|
|
10
|
+
маркером — горизонтальной или вертикальной линией.</p>
|
|
11
|
+
<p>Табы группируют контент и помогают в навигации.</p>
|
|
12
|
+
</div>
|
|
13
|
+
<h3>Правила применения</h3>
|
|
14
|
+
<div class='column'>
|
|
15
|
+
<p>Основные правила применения табов:</p>
|
|
16
|
+
<ul>
|
|
17
|
+
<li>Не использовать табы для переключения состояний. Для таких моментов лучше использовать радиокнопки</li>
|
|
18
|
+
<li>Лучше всего подойдет для второстепенной навигации</li>
|
|
19
|
+
<li>Разделяйте табы и контент, чтобы информация лучше читалась.</li>
|
|
20
|
+
</ul>
|
|
21
|
+
</div>
|
|
22
|
+
<h3>Виды табов</h3>
|
|
23
|
+
<p>Существует 2 вида табов:</p>
|
|
24
|
+
<ul>
|
|
25
|
+
<li>Вертикальный(vertical)</li>
|
|
26
|
+
<li>Горизонтальный(horizontal)</li>
|
|
27
|
+
</ul>
|
|
28
|
+
<p>Для изменения вида таба, нужно передать свойство <code>direction</code></p>
|
|
29
|
+
<h3>Как использовать</h3>
|
|
30
|
+
<div class='column'>
|
|
31
|
+
<p>Для начала нужно создать <code> <teta-tabs></code>- обертку для табов и служит для их объединения, т.е. среди них может быть выбран только один.</p>
|
|
32
|
+
<p>Таб создается при помощи тега <code> <teta-tab></code>.</p>
|
|
33
|
+
<p>Внутрь необходимо передать контент для шапки и наполнение таба. Это делается при помощи <code>ng-template</code> с директивами <code><tetaTabTitle></code> и <code>tetaTabContent</code></p>
|
|
34
|
+
</div>
|
|
35
|
+
<h3>Пример кода</h3>
|
|
36
|
+
<p><pre><code><teta-tabs>
|
|
37
|
+
<teta-tab>
|
|
38
|
+
<ng-template tetaTabTitle>
|
|
39
|
+
<p>1</p>
|
|
40
|
+
</ng-template>
|
|
41
|
+
<ng-template tetaTabContent>
|
|
42
|
+
<div class="padding-v-3 padding-h-2">conteeeeeeeeeeeent 1</div>
|
|
43
|
+
</ng-template>
|
|
44
|
+
</teta-tab>
|
|
45
|
+
<teta-tab>
|
|
46
|
+
<ng-template tetaTabTitle>
|
|
47
|
+
<p>2</p>
|
|
48
|
+
</ng-template>
|
|
49
|
+
<ng-template tetaTabContent>
|
|
50
|
+
<div class="padding-v-3 padding-h-2">conteeeeeent 2</div>
|
|
51
|
+
</ng-template>
|
|
52
|
+
</teta-tab>
|
|
53
|
+
</teta-tabs></code></pre></p>
|
|
54
|
+
<h3>Свойства</h3>
|
|
55
|
+
<h4>teta-tabs</h4>
|
|
56
|
+
<table>
|
|
57
|
+
<thead>
|
|
58
|
+
<tr>
|
|
59
|
+
<th>Свойство</th>
|
|
60
|
+
<th>Tип</th>
|
|
61
|
+
<th>Описание</th>
|
|
62
|
+
</tr>
|
|
63
|
+
</thead>
|
|
64
|
+
<tbody>
|
|
65
|
+
<tr>
|
|
66
|
+
<td class='text-align-center'>
|
|
67
|
+
<p>activeId</p>
|
|
68
|
+
</td>
|
|
69
|
+
<td class='text-align-center'>
|
|
70
|
+
<code>string</code>
|
|
71
|
+
</td>
|
|
72
|
+
<td class='text-align-center'>
|
|
73
|
+
<p>Используется для указания выбранного таба (аттрибут не обязателен, т.к. компонент сам умеет управлять своим состоянием)</p>
|
|
74
|
+
</td>
|
|
75
|
+
</tr>
|
|
76
|
+
<tr>
|
|
77
|
+
<td class='text-align-center'>
|
|
78
|
+
<p>tabChange</p>
|
|
79
|
+
</td>
|
|
80
|
+
<td class='text-align-center'>
|
|
81
|
+
<code>function</code>
|
|
82
|
+
</td>
|
|
83
|
+
<td class='text-align-center'>
|
|
84
|
+
<p>Принимает функцию, которая применяется при изменении активного таба.Отдает текущее состояния.</p>
|
|
85
|
+
</td>
|
|
86
|
+
</tr>
|
|
87
|
+
<tr>
|
|
88
|
+
<td class='text-align-center'>
|
|
89
|
+
<p>destroyOnHide</p>
|
|
90
|
+
</td>
|
|
91
|
+
<td class='text-align-center'>
|
|
92
|
+
<code>boolean</code>
|
|
93
|
+
</td>
|
|
94
|
+
<td class='text-align-center'>
|
|
95
|
+
<p>Свойство, отвечающее за уничтожение и пересоздание содержимого таба.</p>
|
|
96
|
+
</td>
|
|
97
|
+
</tr>
|
|
98
|
+
</tbody>
|
|
99
|
+
</table>
|
|
100
|
+
<h4>teta-tab</h4>
|
|
101
|
+
<table>
|
|
102
|
+
<thead>
|
|
103
|
+
<tr>
|
|
104
|
+
<th>Свойство</th>
|
|
105
|
+
<th>Tип</th>
|
|
106
|
+
<th>Описание</th>
|
|
107
|
+
</tr>
|
|
108
|
+
</thead>
|
|
109
|
+
<tbody>
|
|
110
|
+
<tr>
|
|
111
|
+
<td class='text-align-center'>
|
|
112
|
+
<p>id</p>
|
|
113
|
+
</td>
|
|
114
|
+
<td class='text-align-center'>
|
|
115
|
+
<code>string</code>
|
|
116
|
+
</td>
|
|
117
|
+
<td class='text-align-center'>
|
|
118
|
+
<p>Идентификатор,который используется при выборе активного таба</p>
|
|
119
|
+
</td>
|
|
120
|
+
</tr>
|
|
121
|
+
<tr>
|
|
122
|
+
<td class='text-align-center'>
|
|
123
|
+
<p>disabled</p>
|
|
124
|
+
</td>
|
|
125
|
+
<td class='text-align-center'>
|
|
126
|
+
<code>boolean</code>
|
|
127
|
+
</td>
|
|
128
|
+
<td class='text-align-center'>
|
|
129
|
+
<p>Отключает взаимодействие с табом</p>
|
|
130
|
+
</td>
|
|
131
|
+
</tr>
|
|
132
|
+
<tr>
|
|
133
|
+
<td class='text-align-center'>
|
|
134
|
+
<p>title</p>
|
|
135
|
+
</td>
|
|
136
|
+
<td class='text-align-center'>
|
|
137
|
+
<code>string</code>
|
|
138
|
+
</td>
|
|
139
|
+
<td class='text-align-center'>
|
|
140
|
+
<p>Замента директиве <code>tetaTabTitle</code>. Это свойство нужно использовать, если требуется вывести просто текст без дополнительных модификаций.</p>
|
|
141
|
+
</td>
|
|
142
|
+
</tr>
|
|
143
|
+
</tbody>
|
|
144
|
+
</table>
|
|
145
|
+
</div>
|
package/docs/tagDocs.mdx
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import TagStories from "../src/component/tag/Tag.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={TagStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>Тег</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>Tag (тег) — компонент, который объединяет между собой похожие объекты: статьи, документы, фотографии. По сути,
|
|
10
|
+
это метки, которые позволяет маркировать и классифицировать контент, и состоят из релевантных ключевых слов,
|
|
11
|
+
которые облегчают поиск и просмотр контента.</p>
|
|
12
|
+
</div>
|
|
13
|
+
<h3>Как использовать</h3>
|
|
14
|
+
<div class='column'>
|
|
15
|
+
<p>Для того чтобы сделать чип, нужно к блоку добавить CSS класс <code>tag</code></p>
|
|
16
|
+
<p>Если помимо текста в чипе нужна кнопка (допустим кнопка с иконкой closeBig), то она должна идти после текста</p>
|
|
17
|
+
<p>У тегов есть дополнительный класс для отображения с фоном - <code>tag_filled</code></p>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import ThreeStories from "../src/component/three/three.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={ThreeStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>Компонент 3д графика</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>3д график — это визуализация данных на графике с использованием трех измерений.</p>
|
|
10
|
+
</div>
|
|
11
|
+
<h3>Как использовать</h3>
|
|
12
|
+
<div class='column'>
|
|
13
|
+
<p>Для создания 3д графика используется компонент <code>teta-three-chart</code>. В свойство <code>data</code> необходимо передать объект с типом <code>I3dChartConfig</code></p>
|
|
14
|
+
<p>Этот объет включает в себя:</p>
|
|
15
|
+
<ul>
|
|
16
|
+
<li><code>noDataText</code> - текст который будет отображаться при отсутствии серий в графике.</li>
|
|
17
|
+
<li><code>xAxis</code> - принимает в себя объект со свойствами min и max. Эти значения применяются при генерации оси X. </li>
|
|
18
|
+
<li><code>yAxis</code> - принимает в себя объект со свойствами min и max. Эти значения применяются при генерации оси Y.</li>
|
|
19
|
+
<li><code>zAxis</code> - принимает в себя объект со свойствами min и max. Эти значения применяются при генерации оси Z.</li>
|
|
20
|
+
<li><code>series</code> - набор данных или набор точек данных, которые отображаются на графике.</li>
|
|
21
|
+
</ul>
|
|
22
|
+
<p>В свою очередь свойство <code>series</code> принимает в себя массив:</p>
|
|
23
|
+
<ul>
|
|
24
|
+
<li><code>color</code> - цвет серии</li>
|
|
25
|
+
<li><code>type</code> - тип серии</li>
|
|
26
|
+
<li><code>visible</code> - отображение серии</li>
|
|
27
|
+
<li><code>name</code> - название серии</li>
|
|
28
|
+
<li><code>component</code> - свойство для добавления кастомной серии.</li>
|
|
29
|
+
<li><code>data</code> - данные, на основе которых формируется серия</li>
|
|
30
|
+
</ul>
|
|
31
|
+
<p>В зависимости от типа серии, свойсво <code>data</code> принимает разные типы данных.</p>
|
|
32
|
+
<p>Для типа серии <code>Series3dType.line</code> нужно передать массив объектов x,y,z, а при типе серии <code>Series3dType.block</code> необходимо передать x,y,y1,z,iconId и name.</p>
|
|
33
|
+
<p>Свойства xAxis,yAxis,zAxis можно не вводить, при этом они будут генерироваться за счет свойств x,y,z из свойства data объекта series.</p>
|
|
34
|
+
<p>Для создания кастомной серии необходимо создать <code>standalone</code> компонент, в декоратор <code>Component</code> передать <code>schemas</code> со значением <code>[CUSTOM_ELEMENTS_SCHEMA]</code>. Добавить <code>extend(THREE);</code> в компонент серии.</p>
|
|
35
|
+
<p>В кастомный компонент можно внедрять <code>NgtStore</code>, с помощью которого можно управлять камерой, событиями, размером и т.д.</p>
|
|
36
|
+
</div>
|
|
37
|
+
<h3>Пример кода кастомной серии</h3>
|
|
38
|
+
<div>
|
|
39
|
+
<p>
|
|
40
|
+
<pre><code>extend(THREE);
|
|
41
|
+
@Component({
|
|
42
|
+
selector: 'teta-custom-series',
|
|
43
|
+
standalone: true,
|
|
44
|
+
imports: [CommonModule, NgtArgs],
|
|
45
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
46
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
47
|
+
templateUrl: './custom-series.component.html',
|
|
48
|
+
})
|
|
49
|
+
export class CustomSeriesComponent extends Base3dSeriesComponent<Base3dPoint> implements OnInit {
|
|
50
|
+
public scales: Observable<{ x; y; z }>;
|
|
51
|
+
constructor(override svc: Chart3dService, override ngtStore: NgtStore) {
|
|
52
|
+
super(svc, ngtStore);
|
|
53
|
+
this.scales = this.svc.scales;
|
|
54
|
+
}
|
|
55
|
+
ngOnInit(): void {
|
|
56
|
+
setTimeout(() => {
|
|
57
|
+
this.ngtStore.get('camera').zoom = 2;
|
|
58
|
+
this.ngtStore.get('camera').updateProjectionMatrix();
|
|
59
|
+
}, 1000);
|
|
60
|
+
}
|
|
61
|
+
}</code></pre>
|
|
62
|
+
</p>
|
|
63
|
+
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import toggleStories from "../src/component/toggle/Toggle.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={toggleStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>Переключатель</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>Toggle (переключатель) — компонент, который позволяет переключаться между состояниями.</p>
|
|
10
|
+
</div>
|
|
11
|
+
<h3>Функции</h3>
|
|
12
|
+
<div class='column'>
|
|
13
|
+
<p>Функционально тогл — аналог чекбокса, но контекст их использования может отличаться. Тогл нельзя использовать для выбора элементов в списке. Например, выбрать несколько параметров.</p>
|
|
14
|
+
<p>Тогл больше и заметнее чекбокса. Хорошо, когда на странице 1 тогл, максимум 2–3.</p>
|
|
15
|
+
</div>
|
|
16
|
+
<h3>Как использовать</h3>
|
|
17
|
+
<div class='column'>
|
|
18
|
+
<p><code>teta-toggle</code> - компонент для создание тогла. Для управления его состоянием используется <code>ngModel</code></p>
|
|
19
|
+
</div>
|
|
20
|
+
<h3>Свойства</h3>
|
|
21
|
+
<table>
|
|
22
|
+
<thead>
|
|
23
|
+
<tr>
|
|
24
|
+
<th>Свойство</th>
|
|
25
|
+
<th>Tип</th>
|
|
26
|
+
<th>Описание</th>
|
|
27
|
+
</tr>
|
|
28
|
+
</thead>
|
|
29
|
+
<tbody>
|
|
30
|
+
<tr>
|
|
31
|
+
<td class='text-align-center'>
|
|
32
|
+
<p>noLabel</p>
|
|
33
|
+
</td>
|
|
34
|
+
<td class='text-align-center'>
|
|
35
|
+
<code>boolean</code>
|
|
36
|
+
</td>
|
|
37
|
+
<td class='text-align-center'>
|
|
38
|
+
<p>Свойство, которое отображает/скрывает блок текста в тогле</p>
|
|
39
|
+
</td>
|
|
40
|
+
</tr>
|
|
41
|
+
<tr>
|
|
42
|
+
<td class='text-align-center'>
|
|
43
|
+
<p>disabled</p>
|
|
44
|
+
</td>
|
|
45
|
+
<td class='text-align-center'>
|
|
46
|
+
<code>boolean</code>
|
|
47
|
+
</td>
|
|
48
|
+
<td class='text-align-center'>
|
|
49
|
+
<p>Отключает взаимодействие со всем листом радиокнопок</p>
|
|
50
|
+
</td>
|
|
51
|
+
</tr>
|
|
52
|
+
</tbody>
|
|
53
|
+
</table>
|
|
54
|
+
</div>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import ToolbarStories from "../src/component/toolbar/Toolbar.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={ToolbarStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>Панель инструментов</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>Toolbar (панель инструментов) — элемент графического интерфейса пользователя. Обычно панель инструментов располагается в верхней части окна программы и содержит иконки, кнопки или выпадающие списки, которые позволяют пользователю выполнять определенные действия без необходимости просматривать меню или вводить команды вручную.</p>
|
|
10
|
+
</div>
|
|
11
|
+
<h3>Как использовать</h3>
|
|
12
|
+
<div class='column'>
|
|
13
|
+
<p>Для создания туллбара используется компонент <code>teta-toolbar</code></p>
|
|
14
|
+
<p>Внутрь передается контент, который необходимо отобразить в нем.</p>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|