@tetacom/ng-components 1.1.30 → 1.1.32

package/docs/propertyGridDocs.mdx

@@ -0,0 +1,135 @@
+import {Meta} from "@storybook/blocks";
+import PropertyGridStories from "../src/component/property-grid/PropertyGrid.stories";
+
+<Meta of={PropertyGridStories}/>
+
+<div class='column gap-24'>
+  <h1>Property grid</h1>
+  <div class='column'>
+    <p>Property grid (сетка свойств) - это элемент пользовательского интерфейса в программировании, который предоставляет способ отображения и редактирования свойств объектов. Это особенно полезно при создании приложений с графическим интерфейсом, где пользователь может настраивать параметры объектов или элементов интерфейса.</p>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>Для начала нужно создать <code> &lt;teta-property-grid&gt;</code>.</p>
+    <p>Для создания сетки свойств в компонент необходимо передать свойства:</p>
+    <ul>
+      <li><code>item</code> - данные для формирования сетки.</li>
+      <li><code>columns</code> - каркас данных для сетки.</li>
+    </ul>
+    <p><code>columns</code> принимает в себя массив объектов типа <code>TableColumn</code>. Он состоит из:</p>
+    <ul>
+      <li><code>width</code> - ширина  блока</li>
+      <li><code>filterType</code> - тип поля (select,datepicker,string и т.д.)</li>
+      <li><code>unit</code> - единицы измерения</li>
+      <li><code>unitMeasureParameterId</code> - id измеряемого параметра </li>
+      <li><code>unitId</code> - id единицы измерения</li>
+      <li><code>editable</code> - флаг включения/отключения редактирования поля</li>
+      <li><code>defaultValue</code> - данные которые будут выводится при отсутствии данных.</li>
+      <li><code>maxValue</code> - максимальное значение в поле</li>
+      <li><code>minValue</code> - минимальное значение в поле</li>
+      <li><code>required</code> - флаг обязательности ввода данных в поле</li>
+      <li><code>validators</code> - валидаторы для полей</li>
+      <li><code>name</code> - название поля</li>
+      <li><code>caption</code> - описание поля</li>
+      <li><code>hint</code> - указанный текст появляется при наведении описание поля.</li>
+      <li><code>strict</code> - строгое сравнение </li>
+    </ul>
+    <p>При выборе листа в качестве типа поля, то необходимо добавить свойство <code>dict</code>, которое отвечает за отображаемые элементы списка.</p>
+    <p>Также можно сделать кастомное отображение сетки по названию свойства в форме при помощи директивы <code>tetaPropertyGridItemDescription</code>.</p>
+  </div>
+  <h3>Пример кода кастомной сетки</h3>
+  <p><pre><code>&lt;teta-property-grid class="scrollable padding-h-3 row_auto" style="width: 100%" (controlValueChange)="save($event)" [item]="item" [horizontal]="true" [columns]="columns" [dict]="dict"&gt;
+    &nbsp;&nbsp;&lt;ng-template [tetaPropertyGridItemDescription]="'ram'" let-control&gt;
+    &nbsp;&nbsp;&nbsp;&nbsp;&lt;input [formControl]="control" class="input" /&gt;
+    &nbsp;&nbsp;&lt;/ng-template&gt;
+    &nbsp;&lt;/teta-property-grid&gt;</code></pre></p>
+  <h3>Свойства</h3>
+  <table>
+    <thead>
+    <tr>
+      <th>Свойство</th>
+      <th>Tип</th>
+      <th>Описание</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td class='text-align-center'>
+        <p>item</p>
+      </td>
+      <td class='text-align-center'>
+        <code>any</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Данные для формирования сетки.</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>columns</p>
+      </td>
+      <td class='text-align-center'>
+        <code>TableColumns[]</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Шаблон сетки</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>horizontal</p>
+      </td>
+      <td class='text-align-center'>
+        <code>boolean</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Флаг для отображения сетки горизотально</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>hideNonEditable</p>
+      </td>
+      <td class='text-align-center'>
+        <code>boolean</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Флаг для скрытия нередактируемых полей</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>decimalPart</p>
+      </td>
+      <td class='text-align-center'>
+        <code>number</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Количество знаков после запятой</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>controlValueChange</p>
+      </td>
+      <td class='text-align-center'>
+        <code>function</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Функция,которая срабатывает при изменении поля сетки.</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>dict</p>
+      </td>
+      <td class='text-align-center'>
+        <code>any[]</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Массив выбираемых элементов. Каждое свойство имеет название, которое должно совпадать с соответствующим свойством в <code>data</code>. В качестве значения принимает массив объектов id,name.Требуется если вы добавляете сетку типа лист.</p>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</div>

package/docs/radioDocs.mdx

@@ -0,0 +1,106 @@
+import {Meta} from "@storybook/blocks";
+import RadioStories from "../src/component/radio/Radio.stories";
+
+<Meta of={RadioStories}/>
+
+<div class='column gap-24'>
+  <h1>Радиокнопка</h1>
+  <div class='column'>
+    <p>Radiobutton (радиокнопка) — компонент, который используется для выбора одного значения из нескольких.</p>
+  </div>
+  <h3>Функции</h3>
+  <div class='column'>
+    <p>радиокнопку используют, когда вариантов выбора немного и стараются не задавать им два значения. Разрешено
+      использовать не более трех радиокнопок.</p>
+    <p>В качестве навигации их использовать не стоит, так как для этого лучше подходят табы (ссылка), навигационные
+      панели и группу выбора.</p>
+    <p>При клике пользователь переводит радиокнопку из состояния False в Active.</p>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>Создаем обертку для наших радиокнопок при помощи <code>teta-radio</code>. радиокнопки которые лежат внутри
+      будут объединены в лист радиокнопок, т.е. среди них может быть выделен только один.</p>
+    <p>Для создания радиокнопки нужно использовать <code>teta-radio-button</code>. Свойство <code>value</code>- своеобразный id для листа с радиокнопками</p>
+    <p>Для взаимодействия с листом радиокнопок, нужно передавать в компонент <code>teta-radio</code> свойство <code>ngModel</code> со значением свойства <code>value</code> выбранного <code>teta-radio-button</code></p>
+  </div>
+  <h3>Свойства</h3>
+  <h4>teta-radio</h4>
+  <table>
+    <thead>
+    <tr>
+      <th>Свойство</th>
+      <th>Tип</th>
+      <th>Описание</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td class='text-align-center'>
+        <p>inline</p>
+      </td>
+      <td class='text-align-center'>
+        <code>boolean</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Выстраивает радиокнопки в линию</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>disabled</p>
+      </td>
+      <td class='text-align-center'>
+        <code>boolean</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Отключает взаимодействие со всем листом радиокнопок</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>value</p>
+      </td>
+      <td class='text-align-center'>
+        <code>number</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Свойство для взаимодействия с листом радиокнопок (аналог ngModel)</p>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+  <h4>teta-radio-button</h4>
+  <table>
+    <thead>
+    <tr>
+      <th>Свойство</th>
+      <th>Tип</th>
+      <th>Описание</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td class='text-align-center'>
+        <p>value</p>
+      </td>
+      <td class='text-align-center'>
+        <code>number</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Свойство, которое является id радиокнопки. Испорльзуется при выборе радиокнопки.</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>disabled</p>
+      </td>
+      <td class='text-align-center'>
+        <code>boolean</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Отключает взаимодействие с радиокнопкой</p>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</div>

package/docs/resizePanelDocs.mdx

@@ -0,0 +1,86 @@
+import {Meta} from "@storybook/blocks";
+import ResizeStories from "../src/component/resize-panel/Resize.stories";
+
+<Meta of={ResizeStories}/>
+
+<div class='column gap-24'>
+  <h1>Панель изменения размера</h1>
+  <div class='column'>
+    <p>Resizing panel (Панель изменения размера) — это элемент интерфейса, который обычно используется для изменения размера окна, панели
+      или другого элемента на экране. Это может быть полезным для пользователей, чтобы они могли настроить размер
+      элементов под свои потребности или предпочтения.</p>
+  </div>
+  <h3>Функции</h3>
+  <div class='column'>
+    <p>Функции resizing panel зависят от контекста, в котором она используется. Вот несколько общих функций, которые она
+      может выполнять:</p>
+    <ul>
+      <li>Изменение размера элементов: Основная функция resizing panel - это позволить пользователю изменять размер
+        элементов интерфейса. Это может быть окон, панелей, изображений, виджетов и т. д.</li>
+      <li>Размещение элементов: Некоторые resizing panel также могут помогать пользователю выравнивать и располагать
+        элементы на экране. Например, они могут предоставлять сетку или направляющие линии для более точного
+        позиционирования.</li>
+    </ul>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p><code>teta-resize-panel</code> - компонент для создания панели изменения размера.</p>
+    <p>Панель может расрываться горизонтально и вертикально. За это отвечает свойство <code>direction</code></p>
+  </div>
+  <h3>Свойства</h3>
+  <table>
+    <thead>
+    <tr>
+      <th>Свойство</th>
+      <th>Tип</th>
+      <th>Описание</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td class='text-align-center'>
+        <p>direction</p>
+      </td>
+      <td class='text-align-center'>
+        <code>'vertical' | 'horizontal'</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Направления раскрытия панели</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>minSize</p>
+      </td>
+      <td class='text-align-center'>
+        <code>number</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Минимальный размер панели</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>maxSize</p>
+      </td>
+      <td class='text-align-center'>
+        <code>number</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Максимальный размер панели</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>grabPosition</p>
+      </td>
+      <td class='text-align-center'>
+        <code>'top' | 'bottom' | 'right' | 'left'</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Позиция иконки для изменения размера.</p>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</div>

package/docs/selectDocs.mdx

@@ -0,0 +1,240 @@
+import {Meta} from "@storybook/blocks";
+import SelectStories from "../src/component/select/Select.stories";
+
+<Meta of={SelectStories}/>
+
+<div class='column gap-24'>
+  <h1>Поле выбора</h1>
+  <div class='column'>
+    <p>Select (поле выбора) — компонент, который позволяет выбрать значение с помощью выпадающего списка или же написать
+      с помощью клавиатуры.</p>
+  </div>
+  <h3>Функции</h3>
+  <div class='column'>
+    <p>Функции resizing panel зависят от контекста, в котором она используется. Вот несколько общих функций, которые она
+      может выполнять:</p>
+    <ul>
+      <li>Выбор одного варианта: Вы можете использовать его для создания меню с выбором одного элемента из списка. Например, это может быть полезно при заполнении формы, где пользователю нужно выбрать свой пол, страну, штат или другой единственный вариант.</li>
+      <li>Множественный выбор: Вы также можете использовать селект со свойством <code>multiple</code>, чтобы позволить пользователю выбирать несколько вариантов из списка. Это полезно, например, при выборе нескольких категорий или характеристик товаров.</li>
+      <li>Выбор даты и времени: Выпадающие списки также могут использоваться для выбора даты и времени. В зависимости от конкретных потребностей, вы можете создать несколько выпадающих списков для выбора года, месяца, дня, часа и минут.</li>
+      <li>Фильтрация и сортировка данных: В некоторых случаях селект может быть использован для фильтрации или сортировки данных на веб-странице. Например, можно предоставить пользователю возможность выбрать категорию или сортировать список товаров по цене или рейтингу.</li>
+      <li>Навигация по веб-сайту: Выпадающие списки также могут использоваться в навигации по веб-сайту, чтобы позволить пользователям выбирать разделы, страницы или фильтры.</li>
+    </ul>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>За создание селекта отвечает компонент <code>teta-select</code></p>
+    <p>У селекта есть свойство <code>options</code> , которое по дефолту ждет массив объектов со свойствами id,name. Эти значения будут использоваться в качестве вариантов выбора в селекте.</p>
+    <p>Если необхдимо чтобы использовались другие свойства передаваемого объекта, то можно указать свойство<code>valueRef</code> и <code>textRef</code> для выбора необходимых свойств.</p>
+    <p>Также в компоненте есть возможность сделать кастомное отображение выбираемых элементов и текста в шапке селекта. Для этого нужно внутрь передать <code>ng-template</code> с директивами <code>tetaSelectValue</code>(текст в шапке) и <code>tetaSelectOption</code>(элементы списка)</p>
+  </div>
+  <h3>Пример кода</h3>
+  <p><pre><code>&lt;teta-select [(ngModel)]="selected" valueRef='number' textRef='pseudonym' [options]="[&#123;number:1,pseudonym:'Дима'&#125;,&#123;number:2,pseudonym:'Михаил'&#125;]"&gt;
+    &nbsp;&nbsp;&lt;ng-template tetaSelectValue let-value&gt;
+    &nbsp;&nbsp;&nbsp;&lt;p style="color:red"&gt;&#123;&#123;value?.pseudonym&#125;&#125;&lt;/p&gt;
+    &nbsp;&nbsp;&lt;/ng-template&gt;
+    &nbsp;&nbsp;&lt;ng-template tetaSelectOption let-option&gt;
+    &nbsp;&nbsp;&nbsp;&lt;p style="color:blue"&gt;&#123;&#123;option?.pseudonym&#125;&#125;&lt;/p&gt;
+    &nbsp;&nbsp;&lt;/ng-template&gt;
+    &lt;/teta-select&gt;</code></pre></p>
+  <h3>Свойства</h3>
+  <h4>teta-select</h4>
+  <table>
+    <thead>
+    <tr>
+      <th>Свойство</th>
+      <th>Tип</th>
+      <th>Описание</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td class='text-align-center'>
+        <p>viewType</p>
+      </td>
+      <td class='text-align-center'>
+        <code>'rounded'|'circle'|'brick'</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Свойство округления компонента.</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>options</p>
+      </td>
+      <td class='text-align-center'>
+        <code>IIdName[] </code>
+      </td>
+      <td class='text-align-center'>
+        <p>Массив выбираемых элементов селекта</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>textRef</p>
+      </td>
+      <td class='text-align-center'>
+        <code>string</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Наименование свойства для использования в качестве текста для выбираемых элементов селекта</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>valueRef</p>
+      </td>
+      <td class='text-align-center'>
+        <code>string</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Наименование свойства для использования в качестве идентификатора для выбираемых элементов</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>multiple</p>
+      </td>
+      <td class='text-align-center'>
+        <code>boolean</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Возможность выбора нескольких элементов</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>disabled</p>
+      </td>
+      <td class='text-align-center'>
+        <code>boolean</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Отключает реакцию компонента на клик пользователя</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>allowNull</p>
+      </td>
+      <td class='text-align-center'>
+        <code>boolean</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Свойство, которое добавляет в селект пункт "не выбрано"</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>searchRef</p>
+      </td>
+      <td class='text-align-center'>
+        <code>string</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Добавляет поиск в select и ищет совпадения по указанному свойству.</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>notFoundText</p>
+      </td>
+      <td class='text-align-center'>
+        <code>string</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Меняет стандартный текст, который появляется при отсутствии соответствий в поиске</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>placeholder</p>
+      </td>
+      <td class='text-align-center'>
+        <code>string</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Указанный текст отображается при отсутствии выбранных элементов</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>invalid</p>
+      </td>
+      <td class='text-align-center'>
+        <code>boolean</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Добавляет состояние error для селекта</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>verticalAlign</p>
+      </td>
+      <td class='text-align-center'>
+        <code>VerticalAlign</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Позиция выпадающего списка по вертикали</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>align</p>
+      </td>
+      <td class='text-align-center'>
+        <code>align</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Позиция выпадающего списка по горизонтали</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>icon</p>
+      </td>
+      <td class='text-align-center'>
+        <code>name</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Принимает название иконки, которое будет отображаться в поле селекта, слева от текста в шапке селекта</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>autoClose</p>
+      </td>
+      <td class='text-align-center'>
+        <code>boolean</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Свойство, которое включает/отключает закрытие селекта автоматически.</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>autoCloseIgnore</p>
+      </td>
+      <td class='text-align-center'>
+        <code>AutoCloseIgnoreCase[]</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Свойство, которое игнорирует указанные причины закрытия селекта</p>
+      </td>
+    </tr>
+    <tr>
+      <td class='text-align-center'>
+        <p>appendToBody</p>
+      </td>
+      <td class='text-align-center'>
+        <code>boolean</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Позволяет прикрепить содержимое селекта не к шапке, а к <code>body</code></p>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</div>