@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,74 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import FileStories from "../src/component/file-upload/File.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={FileStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>FileArea</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>FileArea - область в которой работает перетаскивания туда файлов для загрузки(Drag and Drop). Также можно
|
|
10
|
+
кликнуть на специальную кнопку, чтобы указать путь к файлу и загрузить его.</p>
|
|
11
|
+
</div>
|
|
12
|
+
<h3>Как пользоваться компонентом</h3>
|
|
13
|
+
<div class='column'>
|
|
14
|
+
<p>Создаем <code> <teta-file-upload-area></code>, внуть передаем внутрь элементы, которые будут отображаться в нем.</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>upload</p>
|
|
30
|
+
</td>
|
|
31
|
+
<td class='text-align-center'>
|
|
32
|
+
<code>function</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>accept</p>
|
|
41
|
+
</td>
|
|
42
|
+
<td class='text-align-center'>
|
|
43
|
+
<code>string[]</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>multiple</p>
|
|
52
|
+
</td>
|
|
53
|
+
<td class='text-align-center'>
|
|
54
|
+
<code>boolean</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>disabled</p>
|
|
63
|
+
</td>
|
|
64
|
+
<td class='text-align-center'>
|
|
65
|
+
<code>boolean</code>
|
|
66
|
+
</td>
|
|
67
|
+
<td class='text-align-center'>
|
|
68
|
+
<p>Отключает прием файлов</p>
|
|
69
|
+
</td>
|
|
70
|
+
</tr>
|
|
71
|
+
</tbody>
|
|
72
|
+
</table>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import IconStories from "../src/component/icon/Icon.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={IconStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>Иконки</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>Иконка — элемент графического интерфейса, небольшая картинка, обозначающая приложение, файл, каталог и т. п</p>
|
|
10
|
+
<p>В библиотеке существует два вида иконок: цветные и без заливки</p>
|
|
11
|
+
</div>
|
|
12
|
+
<h3>Функции</h3>
|
|
13
|
+
<div class='column'>
|
|
14
|
+
<p>Иконки нужны для быстрого восприятия информации и помогают пользователю быстро и легко узнать о теме функции или категории, не используя текст.</p>
|
|
15
|
+
<p>Используются в различных компонентах:</p>
|
|
16
|
+
<ul>
|
|
17
|
+
<li>Кнопки</li>
|
|
18
|
+
<li>Инпуты</li>
|
|
19
|
+
<li>Селекты</li>
|
|
20
|
+
<li>Аккордеонах и т.п.</li>
|
|
21
|
+
</ul>
|
|
22
|
+
</div>
|
|
23
|
+
<h3>Как использовать</h3>
|
|
24
|
+
<div>
|
|
25
|
+
<p>Для создание иконки используется <code>teta-icon</code> и аттрибут <code>name</code> для указания названия иконки.</p>
|
|
26
|
+
<p>Для того, чтобы инконки загрузились в проект, необходимо в родительском компоненте или в корневом элементе добавить директиву <code>tetaIconSprite</code> с указанием пакета с нужными иконками.</p>
|
|
27
|
+
<p>На данный момент есть следующие пакеты с иконками:</p>
|
|
28
|
+
<ul>
|
|
29
|
+
<li>'assets/icons.svg'- обычые иконки без заливки</li>
|
|
30
|
+
<li>'assets/color-icons.svg'- цветные иконки</li>
|
|
31
|
+
<li>'assets/file-icons.svg'- иконки с типами файлов</li>
|
|
32
|
+
<li>'assets/lithotype-icons.svg'- иконки литотипов</li>
|
|
33
|
+
</ul>
|
|
34
|
+
</div>
|
|
35
|
+
<h3>Пример кода</h3>
|
|
36
|
+
<p>
|
|
37
|
+
<pre><code><div [tetaIconSprite]="'assets/icons.svg'" class="column bg-global-bgcard font-body-3 padding-3">
|
|
38
|
+
<teta-icon name='edit' >
|
|
39
|
+
</teta-icon>
|
|
40
|
+
</div></code></pre>
|
|
41
|
+
</p>
|
|
42
|
+
<div class='column'>
|
|
43
|
+
<h3>Свойства</h3>
|
|
44
|
+
<table>
|
|
45
|
+
<thead>
|
|
46
|
+
<tr>
|
|
47
|
+
<th>Свойство</th>
|
|
48
|
+
<th>Tип</th>
|
|
49
|
+
<th>Описание</th>
|
|
50
|
+
</tr>
|
|
51
|
+
</thead>
|
|
52
|
+
<tbody>
|
|
53
|
+
<tr>
|
|
54
|
+
<td class='text-align-center'>
|
|
55
|
+
<p>name</p>
|
|
56
|
+
</td>
|
|
57
|
+
<td class='text-align-center'>
|
|
58
|
+
<code>string</code>
|
|
59
|
+
</td>
|
|
60
|
+
<td class='text-align-center'>
|
|
61
|
+
<p>Название иконки</p>
|
|
62
|
+
</td>
|
|
63
|
+
</tr>
|
|
64
|
+
<tr>
|
|
65
|
+
<td class='text-align-center'>
|
|
66
|
+
<p>size</p>
|
|
67
|
+
</td>
|
|
68
|
+
<td class='text-align-center'>
|
|
69
|
+
<code>TetaSize</code>
|
|
70
|
+
</td>
|
|
71
|
+
<td class='text-align-center'>
|
|
72
|
+
<p>Размер иконки</p>
|
|
73
|
+
</td>
|
|
74
|
+
</tr>
|
|
75
|
+
<tr>
|
|
76
|
+
<td class='text-align-center'>
|
|
77
|
+
<p>palette</p>
|
|
78
|
+
</td>
|
|
79
|
+
<td class='text-align-center'>
|
|
80
|
+
<code>string</code>
|
|
81
|
+
</td>
|
|
82
|
+
<td class='text-align-center'>
|
|
83
|
+
<p>Принимает название палитры и окращивает в 50-й оттенок этой палитры</p>
|
|
84
|
+
</td>
|
|
85
|
+
</tr>
|
|
86
|
+
</tbody>
|
|
87
|
+
</table>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import InputStories from "../src/component/input/Input.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={InputStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>Инпут</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>Input (поле ввода) — компонент, который позволяет указать значение с помощью клавиатуры.</p>
|
|
10
|
+
<p>В библиотеке существует два вида иконок: цветные и без заливки</p>
|
|
11
|
+
</div>
|
|
12
|
+
<h3>Как использовать</h3>
|
|
13
|
+
<div class='column'>
|
|
14
|
+
<p>Иконки нужны для быстрого восприятия информации и помогают пользователю быстро и легко узнать о теме функции или категории, не используя текст.</p>
|
|
15
|
+
<p>Используются в различных компонентах:</p>
|
|
16
|
+
<ul>
|
|
17
|
+
<li>Кнопки</li>
|
|
18
|
+
<li>Инпуты</li>
|
|
19
|
+
<li>Селекты</li>
|
|
20
|
+
<li>Аккордеонах и т.п.</li>
|
|
21
|
+
</ul>
|
|
22
|
+
</div>
|
|
23
|
+
<div class='column'>
|
|
24
|
+
<h3>Свойства</h3>
|
|
25
|
+
<table>
|
|
26
|
+
<thead>
|
|
27
|
+
<tr>
|
|
28
|
+
<th>Свойство</th>
|
|
29
|
+
<th>Tип</th>
|
|
30
|
+
<th>Описание</th>
|
|
31
|
+
</tr>
|
|
32
|
+
</thead>
|
|
33
|
+
<tbody>
|
|
34
|
+
<tr>
|
|
35
|
+
<td class='text-align-center'>
|
|
36
|
+
<p>viewType</p>
|
|
37
|
+
</td>
|
|
38
|
+
<td class='text-align-center'>
|
|
39
|
+
<code>'rounded'|'circle'|'brick'</code>
|
|
40
|
+
</td>
|
|
41
|
+
<td class='text-align-center'>
|
|
42
|
+
<p>Свойство округления компонента.</p>
|
|
43
|
+
</td>
|
|
44
|
+
</tr>
|
|
45
|
+
<tr>
|
|
46
|
+
<td class='text-align-center'>
|
|
47
|
+
<p>size</p>
|
|
48
|
+
</td>
|
|
49
|
+
<td class='text-align-center'>
|
|
50
|
+
<code>'24' | '28' | '32' | '44' | '64' | '128' | '200'</code>
|
|
51
|
+
</td>
|
|
52
|
+
<td class='text-align-center'>
|
|
53
|
+
<p>Размер компонента</p>
|
|
54
|
+
</td>
|
|
55
|
+
</tr>
|
|
56
|
+
<tr>
|
|
57
|
+
<td class='text-align-center'>
|
|
58
|
+
<p>photo</p>
|
|
59
|
+
</td>
|
|
60
|
+
<td class='text-align-center'>
|
|
61
|
+
<code>'string | ArrayBuffer'</code>
|
|
62
|
+
</td>
|
|
63
|
+
<td class='text-align-center'>
|
|
64
|
+
<p>Изображение для фона компонента</p>
|
|
65
|
+
</td>
|
|
66
|
+
</tr>
|
|
67
|
+
<tr>
|
|
68
|
+
<td class='text-align-center'>
|
|
69
|
+
<p>id</p>
|
|
70
|
+
</td>
|
|
71
|
+
<td class='text-align-center'>
|
|
72
|
+
<code>'number'</code>
|
|
73
|
+
</td>
|
|
74
|
+
<td class='text-align-center'>
|
|
75
|
+
<p>Свойство, которое отвечает за цвет фона компонента</p>
|
|
76
|
+
</td>
|
|
77
|
+
</tr>
|
|
78
|
+
<tr>
|
|
79
|
+
<td class='text-align-center'>
|
|
80
|
+
<p>name</p>
|
|
81
|
+
</td>
|
|
82
|
+
<td class='text-align-center'>
|
|
83
|
+
<code>'string'</code>
|
|
84
|
+
</td>
|
|
85
|
+
<td class='text-align-center'>
|
|
86
|
+
<p>Отображаемый текст</p>
|
|
87
|
+
</td>
|
|
88
|
+
</tr>
|
|
89
|
+
</tbody>
|
|
90
|
+
</table>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import ListStories from "../src/component/list/List.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={ListStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>Лист</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>Лист - список элементов идущих подряд.</p>
|
|
10
|
+
<p>Лист обычно используется в дропдаунах, селектах и в деревьях</p>
|
|
11
|
+
</div>
|
|
12
|
+
<h3>Как использовать</h3>
|
|
13
|
+
<div class='column'>
|
|
14
|
+
<p>Сначала необходимо создать блок с классом <code>list</code> внутрь передать несколько элементов с классом <code>list-item</code></p>
|
|
15
|
+
<p>Если нужно чтобы список элементов был интерактивным, элементам списка необходимо дополнительно добавить класс <code>list-item_interactive</code></p>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import MessageStories from "../src/component/message/Message.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={MessageStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>Тост</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>Toast (тост) — короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.</p>
|
|
10
|
+
</div>
|
|
11
|
+
<h3>Функции</h3>
|
|
12
|
+
<div class='column'>
|
|
13
|
+
<p>Используйте тост, если нет возможности сообщить обратную связь. В проектах выпрыгивает из правого нижнего угла.</p>
|
|
14
|
+
<p>Тост может показывается несколько секунд или бесконечно. Этот компонент так же может содержать кнопки, чтобы закрыть или же перейти к объекту, к которому применима обратная связь.</p>
|
|
15
|
+
</div>
|
|
16
|
+
<h3>Виды тостов</h3>
|
|
17
|
+
<div>
|
|
18
|
+
<p>Есть несколько видов тостов. Они различаются своими State Lines.</p>
|
|
19
|
+
<ul>
|
|
20
|
+
<li>Default (Серый)</li>
|
|
21
|
+
<li>Success (Зеленый)</li>
|
|
22
|
+
<li>Error (Красный)</li>
|
|
23
|
+
<li>Warning (Желтый)</li>
|
|
24
|
+
</ul>
|
|
25
|
+
</div>
|
|
26
|
+
<h3>Как использовать</h3>
|
|
27
|
+
<div class='column'>
|
|
28
|
+
<p>Для того чтобы воспользоваться данным компонентом, нужно внедрить в компонент сервис <code>messageService</code> и использовать метод <code>add</code>. </p>
|
|
29
|
+
<p> Этот метод ждет объект типа <code>Message</code>, который содержит следующие свойства:</p>
|
|
30
|
+
<ul>
|
|
31
|
+
<li>name- индификатор для тоста, который используется для его скрытия</li>
|
|
32
|
+
<li>title- текст в заголовке тоста</li>
|
|
33
|
+
<li>text- текст в теле тоста</li>
|
|
34
|
+
<li>duration - длительность отобращения тоста в миллисекундах</li>
|
|
35
|
+
<li>infinite - бесконечная длительность отображения тоста</li>
|
|
36
|
+
<li>className - дополнительные классы для тоста</li>
|
|
37
|
+
<li>palette - цвет левой границы</li>
|
|
38
|
+
<li>template - возможность указать свой шаблон тела тоста</li>
|
|
39
|
+
<li>viewType- округление тоста</li>
|
|
40
|
+
</ul>
|
|
41
|
+
<p>Также есть возможность скрыть тост медотом <code>clearMessages</code></p>
|
|
42
|
+
</div>
|
|
43
|
+
<h3>Виды тостов</h3>
|
|
44
|
+
<div>
|
|
45
|
+
<p>Есть несколько видов тостов. Они различаются своими State Lines.</p>
|
|
46
|
+
<ul>
|
|
47
|
+
<li>Default (Серый)</li>
|
|
48
|
+
<li>Success (Зеленый)</li>
|
|
49
|
+
<li>Error (Красный)</li>
|
|
50
|
+
<li>Warning (Жельтый)</li>
|
|
51
|
+
</ul>
|
|
52
|
+
</div>
|
|
53
|
+
<h3>Пример кода</h3>
|
|
54
|
+
<div>
|
|
55
|
+
<p>
|
|
56
|
+
<pre><code>addMessage(){
|
|
57
|
+
this.messageService.add(
|
|
58
|
+
new Message({
|
|
59
|
+
name:'example',
|
|
60
|
+
title:'Ошибка',
|
|
61
|
+
text:'Перелогиньтесь',
|
|
62
|
+
palette: 'red',
|
|
63
|
+
duration: 5000,
|
|
64
|
+
});
|
|
65
|
+
)
|
|
66
|
+
}</code></pre>
|
|
67
|
+
</p>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import ModalStories from "../src/component/modal/Modal.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={ModalStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>Модальное окно</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>Modal Window или Pop Up (модальное окно) — это эмуляция диалогового окна браузера, появляющегося поверх страницы
|
|
10
|
+
в ответ на действия пользователя и блокирующего доступ к основному содержимому страницы.</p>
|
|
11
|
+
</div>
|
|
12
|
+
<h3>Функции</h3>
|
|
13
|
+
<div class='column'>
|
|
14
|
+
<p>Используйте модальное окно для второстепенного содержимого страниц, которое требуется только в некоторых случаях,
|
|
15
|
+
или для того, чтобы сосредоточить внимание пользователя на совершаемом действии. Как правило, это настройки,
|
|
16
|
+
создание новых документов, заполнение небольших форм.</p>
|
|
17
|
+
<p>Не используйте модальное окно для больших форм. Большие формы — это формы которые не помещаются в два экрана
|
|
18
|
+
монитора. </p>
|
|
19
|
+
</div>
|
|
20
|
+
<h3>Как использовать</h3>
|
|
21
|
+
<div class='column'>
|
|
22
|
+
<p>Для того чтобы воспользоваться данным компонентом, нужно внедрить в компонент
|
|
23
|
+
сервис <code>modalService</code> и использовать метод <code>create</code>, передав компонент, который будет
|
|
24
|
+
помещен в модалку и необходимые свойсва.</p>
|
|
25
|
+
<p>Этот метод вернет объект со свойствами: <code>close</code>- функция, которая принимает причину закрытия модалки и закрывает
|
|
26
|
+
ее, <code>onClose</code>- поток, который срабатывает при закрытии модалки и отдает объект с причиной закрытия модалки и
|
|
27
|
+
данными, которые мы вернули из модалки</p>
|
|
28
|
+
<p>Внутри компонента модалки мы привязываем события для закрытия модалки (допустим при нажатии на кнопку). Для этого
|
|
29
|
+
нужно внедрить сервис <code>CurrentModal</code> и вызвать метод close и передать в него объект со свойствами:</p>
|
|
30
|
+
<ul>
|
|
31
|
+
<li><code>reason</code> - принимает номер причины закрытия модалки (ModalCloseReason)</li>
|
|
32
|
+
<li><code>data</code> - данные, которые нужно вывести из модалки</li>
|
|
33
|
+
</ul>
|
|
34
|
+
<p></p>
|
|
35
|
+
<p>Также есть возможность скрыть все открытые модалки медотом <code>closeAll</code> из <code>modalService</code></p>
|
|
36
|
+
</div>
|
|
37
|
+
<h3>Пример кода</h3>
|
|
38
|
+
<div>
|
|
39
|
+
<p>Создание модалки</p>
|
|
40
|
+
<p>
|
|
41
|
+
<pre><code>createModal(name:string,description:string){
|
|
42
|
+
const modal=this.modalService.create(Component,{name,description})
|
|
43
|
+
modal.onClose.pipe(
|
|
44
|
+
takeWhile(()=>this.alive),
|
|
45
|
+
filter((data)=>data.reason===ModalCloseReason.resolve),
|
|
46
|
+
tap((data)=>{console.log(data.data.description)})
|
|
47
|
+
).subscribe()
|
|
48
|
+
}</code></pre>
|
|
49
|
+
</p>
|
|
50
|
+
<p>Закрытие модалки</p>
|
|
51
|
+
<p>
|
|
52
|
+
<pre><code>closeModal(description:string){
|
|
53
|
+
this.currentModal.close(
|
|
54
|
+
{
|
|
55
|
+
reason:ModalCloseReason.resolve,
|
|
56
|
+
data:{description},
|
|
57
|
+
}
|
|
58
|
+
)
|
|
59
|
+
}</code></pre>
|
|
60
|
+
</p>
|
|
61
|
+
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import ProgressBarStories from "../src/component/progress-bar/ProgressBar.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={ProgressBarStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>Слайдер</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>Progress bars (Слайдер) — это элемент управления страницей, который позволяет пользователю выбирать значение из
|
|
10
|
+
определенного диапазона. Он представляет собой горизонтальную полосу, которую можно перемещать влево или вправо,
|
|
11
|
+
чтобы выбрать значение в заданном диапазоне. Слайдеры часто используются для настройки параметров, выбора числовых
|
|
12
|
+
значений (например, громкости,времени или яркости) или фильтрации данных.</p>
|
|
13
|
+
</div>
|
|
14
|
+
<h3>Функции</h3>
|
|
15
|
+
<div class='column'>
|
|
16
|
+
<p>Slider выполняет следующие основные функции:</p>
|
|
17
|
+
<ul>
|
|
18
|
+
<li>Выбор значения в заданном диапазоне: Слайдер позволяет пользователю выбирать значение из определенного числового диапазона.</li>
|
|
19
|
+
<li>Отображение текущего значения: Слайдер отображает текущее выбранное значение, что позволяет пользователям видеть, какое значение они выбрали</li>
|
|
20
|
+
<li>Изменение значения в реальном времени: Когда пользователь перемещает бегунок слайдера, значение обновляется в реальном времени, что делает процесс выбора более наглядным и удобным.</li>
|
|
21
|
+
<li>Вы можете настроить шаг, с которым изменяется значение при перемещении бегунка слайдера.</li>
|
|
22
|
+
</ul>
|
|
23
|
+
</div>
|
|
24
|
+
<h3>Как использовать</h3>
|
|
25
|
+
<div class='column'>
|
|
26
|
+
<p>Для создания слайдера существует компонент <code>teta-progress-bar</code>. Для передачи данных в него нужно использовать <code>ngModel</code></p>
|
|
27
|
+
<p>Также в слайдере есть возможность настройки "шага". Это происходит с помощью передачи в него свойства step</p>
|
|
28
|
+
</div>
|
|
29
|
+
<h3>Свойства</h3>
|
|
30
|
+
<table>
|
|
31
|
+
<thead>
|
|
32
|
+
<tr>
|
|
33
|
+
<th>Свойство</th>
|
|
34
|
+
<th>Tип</th>
|
|
35
|
+
<th>Описание</th>
|
|
36
|
+
</tr>
|
|
37
|
+
</thead>
|
|
38
|
+
<tbody>
|
|
39
|
+
<tr>
|
|
40
|
+
<td class='text-align-center'>
|
|
41
|
+
<p>step</p>
|
|
42
|
+
</td>
|
|
43
|
+
<td class='text-align-center'>
|
|
44
|
+
<code>number</code>
|
|
45
|
+
</td>
|
|
46
|
+
<td class='text-align-center'>
|
|
47
|
+
<p>Выбор значения, на которое ползунок сдвигается при его перемещении</p>
|
|
48
|
+
</td>
|
|
49
|
+
</tr>
|
|
50
|
+
<tr>
|
|
51
|
+
<td class='text-align-center'>
|
|
52
|
+
<p>min</p>
|
|
53
|
+
</td>
|
|
54
|
+
<td class='text-align-center'>
|
|
55
|
+
<code>number</code>
|
|
56
|
+
</td>
|
|
57
|
+
<td class='text-align-center'>
|
|
58
|
+
<p>Минимальное значение слайдера</p>
|
|
59
|
+
</td>
|
|
60
|
+
</tr>
|
|
61
|
+
<tr>
|
|
62
|
+
<td class='text-align-center'>
|
|
63
|
+
<p>max</p>
|
|
64
|
+
</td>
|
|
65
|
+
<td class='text-align-center'>
|
|
66
|
+
<code>number</code>
|
|
67
|
+
</td>
|
|
68
|
+
<td class='text-align-center'>
|
|
69
|
+
<p>Максимальное значение слайдера</p>
|
|
70
|
+
</td>
|
|
71
|
+
</tr>
|
|
72
|
+
</tbody>
|
|
73
|
+
</table>
|
|
74
|
+
</div>
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import {Meta} from "@storybook/blocks";
|
|
2
|
+
import PropertyGridStories from "../src/component/property-grid/PropertyGrid.stories";
|
|
3
|
+
|
|
4
|
+
<Meta of={PropertyGridStories}/>
|
|
5
|
+
|
|
6
|
+
<div class='column gap-24'>
|
|
7
|
+
<h1>Property grid</h1>
|
|
8
|
+
<div class='column'>
|
|
9
|
+
<p>Property grid (сетка свойств) - это элемент пользовательского интерфейса в программировании, который предоставляет способ отображения и редактирования свойств объектов. Это особенно полезно при создании приложений с графическим интерфейсом, где пользователь может настраивать параметры объектов или элементов интерфейса.</p>
|
|
10
|
+
</div>
|
|
11
|
+
<h3>Как использовать</h3>
|
|
12
|
+
<div class='column'>
|
|
13
|
+
<p>Для начала нужно создать <code> <teta-property-grid></code>.</p>
|
|
14
|
+
<p>Для создания сетки свойств в компонент необходимо передать свойства:</p>
|
|
15
|
+
<ul>
|
|
16
|
+
<li><code>item</code> - данные для формирования сетки.</li>
|
|
17
|
+
<li><code>columns</code> - каркас данных для сетки.</li>
|
|
18
|
+
</ul>
|
|
19
|
+
<p><code>columns</code> принимает в себя массив объектов типа <code>TableColumn</code>. Он состоит из:</p>
|
|
20
|
+
<ul>
|
|
21
|
+
<li><code>width</code> - ширина блока</li>
|
|
22
|
+
<li><code>filterType</code> - тип поля (select,datepicker,string и т.д.)</li>
|
|
23
|
+
<li><code>unit</code> - единицы измерения</li>
|
|
24
|
+
<li><code>unitMeasureParameterId</code> - id измеряемого параметра </li>
|
|
25
|
+
<li><code>unitId</code> - id единицы измерения</li>
|
|
26
|
+
<li><code>editable</code> - флаг включения/отключения редактирования поля</li>
|
|
27
|
+
<li><code>defaultValue</code> - данные которые будут выводится при отсутствии данных.</li>
|
|
28
|
+
<li><code>maxValue</code> - максимальное значение в поле</li>
|
|
29
|
+
<li><code>minValue</code> - минимальное значение в поле</li>
|
|
30
|
+
<li><code>required</code> - флаг обязательности ввода данных в поле</li>
|
|
31
|
+
<li><code>validators</code> - валидаторы для полей</li>
|
|
32
|
+
<li><code>name</code> - название поля</li>
|
|
33
|
+
<li><code>caption</code> - описание поля</li>
|
|
34
|
+
<li><code>hint</code> - указанный текст появляется при наведении описание поля.</li>
|
|
35
|
+
<li><code>strict</code> - строгое сравнение </li>
|
|
36
|
+
</ul>
|
|
37
|
+
<p>При выборе листа в качестве типа поля, то необходимо добавить свойство <code>dict</code>, которое отвечает за отображаемые элементы списка.</p>
|
|
38
|
+
<p>Также можно сделать кастомное отображение сетки по названию свойства в форме при помощи директивы <code>tetaPropertyGridItemDescription</code>.</p>
|
|
39
|
+
</div>
|
|
40
|
+
<h3>Пример кода кастомной сетки</h3>
|
|
41
|
+
<p><pre><code><teta-property-grid class="scrollable padding-h-3 row_auto" style="width: 100%" (controlValueChange)="save($event)" [item]="item" [horizontal]="true" [columns]="columns" [dict]="dict">
|
|
42
|
+
<ng-template [tetaPropertyGridItemDescription]="'ram'" let-control>
|
|
43
|
+
<input [formControl]="control" class="input" />
|
|
44
|
+
</ng-template>
|
|
45
|
+
</teta-property-grid></code></pre></p>
|
|
46
|
+
<h3>Свойства</h3>
|
|
47
|
+
<table>
|
|
48
|
+
<thead>
|
|
49
|
+
<tr>
|
|
50
|
+
<th>Свойство</th>
|
|
51
|
+
<th>Tип</th>
|
|
52
|
+
<th>Описание</th>
|
|
53
|
+
</tr>
|
|
54
|
+
</thead>
|
|
55
|
+
<tbody>
|
|
56
|
+
<tr>
|
|
57
|
+
<td class='text-align-center'>
|
|
58
|
+
<p>item</p>
|
|
59
|
+
</td>
|
|
60
|
+
<td class='text-align-center'>
|
|
61
|
+
<code>any</code>
|
|
62
|
+
</td>
|
|
63
|
+
<td class='text-align-center'>
|
|
64
|
+
<p>Данные для формирования сетки.</p>
|
|
65
|
+
</td>
|
|
66
|
+
</tr>
|
|
67
|
+
<tr>
|
|
68
|
+
<td class='text-align-center'>
|
|
69
|
+
<p>columns</p>
|
|
70
|
+
</td>
|
|
71
|
+
<td class='text-align-center'>
|
|
72
|
+
<code>TableColumns[]</code>
|
|
73
|
+
</td>
|
|
74
|
+
<td class='text-align-center'>
|
|
75
|
+
<p>Шаблон сетки</p>
|
|
76
|
+
</td>
|
|
77
|
+
</tr>
|
|
78
|
+
<tr>
|
|
79
|
+
<td class='text-align-center'>
|
|
80
|
+
<p>horizontal</p>
|
|
81
|
+
</td>
|
|
82
|
+
<td class='text-align-center'>
|
|
83
|
+
<code>boolean</code>
|
|
84
|
+
</td>
|
|
85
|
+
<td class='text-align-center'>
|
|
86
|
+
<p>Флаг для отображения сетки горизотально</p>
|
|
87
|
+
</td>
|
|
88
|
+
</tr>
|
|
89
|
+
<tr>
|
|
90
|
+
<td class='text-align-center'>
|
|
91
|
+
<p>hideNonEditable</p>
|
|
92
|
+
</td>
|
|
93
|
+
<td class='text-align-center'>
|
|
94
|
+
<code>boolean</code>
|
|
95
|
+
</td>
|
|
96
|
+
<td class='text-align-center'>
|
|
97
|
+
<p>Флаг для скрытия нередактируемых полей</p>
|
|
98
|
+
</td>
|
|
99
|
+
</tr>
|
|
100
|
+
<tr>
|
|
101
|
+
<td class='text-align-center'>
|
|
102
|
+
<p>decimalPart</p>
|
|
103
|
+
</td>
|
|
104
|
+
<td class='text-align-center'>
|
|
105
|
+
<code>number</code>
|
|
106
|
+
</td>
|
|
107
|
+
<td class='text-align-center'>
|
|
108
|
+
<p>Количество знаков после запятой</p>
|
|
109
|
+
</td>
|
|
110
|
+
</tr>
|
|
111
|
+
<tr>
|
|
112
|
+
<td class='text-align-center'>
|
|
113
|
+
<p>controlValueChange</p>
|
|
114
|
+
</td>
|
|
115
|
+
<td class='text-align-center'>
|
|
116
|
+
<code>function</code>
|
|
117
|
+
</td>
|
|
118
|
+
<td class='text-align-center'>
|
|
119
|
+
<p>Функция,которая срабатывает при изменении поля сетки.</p>
|
|
120
|
+
</td>
|
|
121
|
+
</tr>
|
|
122
|
+
<tr>
|
|
123
|
+
<td class='text-align-center'>
|
|
124
|
+
<p>dict</p>
|
|
125
|
+
</td>
|
|
126
|
+
<td class='text-align-center'>
|
|
127
|
+
<code>any[]</code>
|
|
128
|
+
</td>
|
|
129
|
+
<td class='text-align-center'>
|
|
130
|
+
<p>Массив выбираемых элементов. Каждое свойство имеет название, которое должно совпадать с соответствующим свойством в <code>data</code>. В качестве значения принимает массив объектов id,name.Требуется если вы добавляете сетку типа лист.</p>
|
|
131
|
+
</td>
|
|
132
|
+
</tr>
|
|
133
|
+
</tbody>
|
|
134
|
+
</table>
|
|
135
|
+
</div>
|