@tetacom/ng-components 1.4.4 → 1.4.7

package/docs/selectDocs.mdx

@@ -1,240 +1,282 @@
-import {Meta} from "@storybook/blocks";
-import SelectStories from "../src/component/select/Select.stories";
+import { Meta } from '@storybook/blocks';
+import SelectStories from '../src/component/select/Select.stories';
 
-<Meta of={SelectStories}/>
+<Meta of={SelectStories} />
 
-<div class='column gap-24'>
+<div class="column gap-24">
   <h1>Поле выбора</h1>
-  <div class='column'>
-    <p>Select (поле выбора) — компонент, который позволяет выбрать значение с помощью выпадающего списка или же написать
-      с помощью клавиатуры.</p>
+  <div class="column">
+    <p>
+      Select (поле выбора) — компонент, который позволяет выбрать значение с помощью выпадающего списка или же написать
+      с помощью клавиатуры.
+    </p>
   </div>
   <h3>Функции</h3>
-  <div class='column'>
-    <p>Функции resizing panel зависят от контекста, в котором она используется. Вот несколько общих функций, которые она
-      может выполнять:</p>
+  <div class="column">
+    <p>
+      Функции resizing panel зависят от контекста, в котором она используется. Вот несколько общих функций, которые она
+      может выполнять:
+    </p>
     <ul>
-      <li>Выбор одного варианта: Вы можете использовать его для создания меню с выбором одного элемента из списка. Например, это может быть полезно при заполнении формы, где пользователю нужно выбрать свой пол, страну, штат или другой единственный вариант.</li>
-      <li>Множественный выбор: Вы также можете использовать селект со свойством <code>multiple</code>, чтобы позволить пользователю выбирать несколько вариантов из списка. Это полезно, например, при выборе нескольких категорий или характеристик товаров.</li>
-      <li>Выбор даты и времени: Выпадающие списки также могут использоваться для выбора даты и времени. В зависимости от конкретных потребностей, вы можете создать несколько выпадающих списков для выбора года, месяца, дня, часа и минут.</li>
-      <li>Фильтрация и сортировка данных: В некоторых случаях селект может быть использован для фильтрации или сортировки данных на веб-странице. Например, можно предоставить пользователю возможность выбрать категорию или сортировать список товаров по цене или рейтингу.</li>
-      <li>Навигация по веб-сайту: Выпадающие списки также могут использоваться в навигации по веб-сайту, чтобы позволить пользователям выбирать разделы, страницы или фильтры.</li>
+      <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 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>
+  <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>
+      <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>
+      <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>