@dxtmisha/wiki 0.24.3 → 0.39.1

package/src/media/descriptions/wikiDescriptionsSelect.ts

@@ -0,0 +1,253 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Select component properties
+ *
+ * Описания свойств компонента Select
+ */
+export const wikiDescriptionsSelect: StorybookComponentsDescriptionItem = {
+  name: 'Select',
+  description: {
+    en: 'Complete select dropdown control combining Field, Menu, SelectValue and Input for sophisticated selection interface',
+    ru: 'Полнофункциональный элемент выбора из выпадающего списка, объединяющий Field, Menu, SelectValue и Input для продвинутого интерфейса выбора'
+  },
+  possibilities: {
+    en: [
+      'single or multiple value selection',
+      'built-in search and filtering capabilities',
+      'editable selected value mode (editValue)',
+      'AJAX data loading with caching support',
+      'filter mode for real-time option filtering',
+      'validation with standard Field features',
+      'keyboard navigation and accessibility',
+      'custom option list via slots or data',
+      'icon support for dropdown arrow and search',
+      'auto-close control for multiple selection',
+      'integration with all Field component features (label, counter, messages, icons)'
+    ],
+    ru: [
+      'выбор одиночного или множественных значений',
+      'встроенный поиск и возможности фильтрации',
+      'режим редактирования выбранного значения (editValue)',
+      'AJAX загрузка данных с поддержкой кеширования',
+      'режим фильтрации для реального времени',
+      'валидация со стандартными функциями Field',
+      'клавиатурная навигация и доступность',
+      'пользовательский список опций через слоты или данные',
+      'поддержка иконок для стрелки выпадающего списка и поиска',
+      'управление автозакрытием для множественного выбора',
+      'интеграция со всеми возможностями компонента Field (подпись, счётчик, сообщения, иконки)'
+    ]
+  },
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  render: `
+      <DesignComponent v-bind="args" />
+    `,
+  stories: [
+    {
+      id: 'SelectBasic',
+      name: {
+        en: 'Basic',
+        ru: 'Базовые'
+      },
+      setup: `
+      const options = ref([
+        {label: 'JavaScript', value: 'js'},
+        {label: 'TypeScript', value: 'ts'},
+        {label: 'Python', value: 'py'},
+        {label: 'Java', value: 'java'},
+        {label: 'C++', value: 'cpp'},
+        {label: 'Ruby', value: 'rb'},
+        {label: 'Go', value: 'go'},
+        {label: 'PHP', value: 'php'}
+      ])
+
+      return { options }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            type="select"
+            label="Standard select"
+            placeholder="Select option"
+            :option="options"
+          />
+          <DesignComponent
+            type="select"
+            label="With search"
+            placeholder="Search..."
+            showSearch
+            :option="options"
+          />
+          <DesignComponent
+            type="select"
+            label="With filter"
+            placeholder="Type to filter"
+            showSearch
+            filterMode
+            :option="options"
+          />
+          <DesignComponent
+            type="select"
+            label="Edit value"
+            placeholder="Select or type"
+            editValue
+            filterMode
+            :option="options"
+          />
+          <DesignComponent
+            type="select"
+            label="With arrows"
+            placeholder="Select option"
+            arrow="carousel"
+            :option="options"
+          />
+        </div>
+      `
+    },
+    {
+      id: 'SelectVModel',
+      name: {
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
+      },
+      setup: `
+      return {
+        singleValue: ref('option2'),
+        multipleValue: ref(['option1', 'option3'])
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            v-model="singleValue"
+            type="select"
+            label="Single select"
+            arrow="carousel"
+            :option="[
+              {label: 'First option', value: 'option1'},
+              {label: 'Second option', value: 'option2'},
+              {label: 'Third option', value: 'option3'}
+            ]"
+          />
+          <div>Selected: {{ singleValue }}</div>
+
+          <DesignComponent
+            v-model="multipleValue"
+            type="select"
+            label="Multiple select"
+            multiple
+            :option="[
+              {label: 'First option', value: 'option1'},
+              {label: 'Second option', value: 'option2'},
+              {label: 'Third option', value: 'option3'}
+            ]"
+          />
+          <div>Selected: {{ multipleValue }}</div>
+        </div>
+      `
+    },
+    {
+      id: 'SelectSkeleton',
+      name: {
+        en: 'Skeleton',
+        ru: 'Скелетон'
+      },
+      components: ['Skeleton'],
+      template: `
+        <DesignSkeleton :active="true" style="max-width:320px">
+          <div class="wiki-storybook-flex-column">
+            <DesignComponent
+              isSkeleton
+              type="select"
+              label="Loading select"
+              helperMessage="Options are loading..."
+              :option="[
+                {label: 'First option', value: 'option1'},
+                {label: 'Second option', value: 'option2'},
+                {label: 'Third option', value: 'option3'}
+              ]"
+            />
+          </div>
+        </DesignSkeleton>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Select'} type={'select'}/>
+<Canvas of={Component.SelectBasic}/>
+
+<StorybookDescriptions componentName={'Value'} type={'value'}/>
+<StorybookDescriptions componentName={'Value'} type={'v-model'}/>
+<Canvas of={Component.SelectVModel}/>
+
+<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>
+<Canvas of={Component.SelectSkeleton}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Event'} type={'input'}/>
+<StorybookDescriptions componentName={'Event'} type={'change'}/>
+    `,
+    expose: `
+<StorybookDescriptions componentName={'Expose'} type={'selected'}/>
+<StorybookDescriptions componentName={'Expose'} type={'validation'}/>
+    `,
+    slots: `
+<StorybookDescriptions componentName={'Slot'} type={'label'} />
+<StorybookDescriptions componentName={'Slot'} type={'prefix'} />
+<StorybookDescriptions componentName={'Slot'} type={'suffix'} />
+<StorybookDescriptions componentName={'Slot'} type={'caption'} />
+<StorybookDescriptions componentName={'Slot'} type={'leading'} />
+<StorybookDescriptions componentName={'Slot'} type={'trailing'} />
+<StorybookDescriptions componentName={'List'} type={'slot.html'}/>
+<StorybookDescriptions componentName={'Menu'} type={'slots'}/>
+    `
+  },
+  ai: {
+    description: `
+The select is a comprehensive form component used for choosing one or multiple values from a collection of options.
+It integrates a trigger field, a dropdown menu, and value display logic into a single cohesive control.
+
+**Key Features:**
+1. **Data Handling (\`option\`):**
+   - **Static Data:** Accepts an array of objects or strings via the \`option\` prop.
+   - **Mapping:** Use \`keyLabel\` and \`keyValue\` to specify which properties to use for display and value (defaults to 'label' and 'value').
+   - **Async Data:** Use the \`ajax\` prop to provide a function that returns a Promise with the list of options. Supports caching via \`cache\`.
+
+2. **Selection Modes:**
+   - **Single Selection:** Default. Displays the selected item's label as text.
+   - **Multiple Selection (\`multiple\`):** Allows selecting multiple items. Displays them as Chips. Use \`max\` to limit the number of selections.
+   - **Editable (\`editValue\`):** Allows the user to type into the input field, acting like a Combobox.
+
+3. **Search & Filtering:**
+   - **Filter Mode (\`filterMode\`):** Filters the list options in real-time as the user types.
+   - **Show Search (\`showSearch\`):** Adds a dedicated search input field inside the dropdown menu (useful for mobile or when \`editValue\` is false).
+
+4. **Appearance & Feedback:**
+   - **Field Integration:** Inherits all \`Field\` styling props (\`label\`, \`helperMessage\`, \`validationMessage\`, \`icon\`, \`loading\`).
+   - **Placeholder:** Text shown when no value is selected.
+   - **Cancel:** The \`cancel\` prop controls the visibility of the clear button ('auto', 'always', 'none').
+
+**Usage Examples:**
+
+- **Standard Select:**
+  \`<Select label="Choose a fruit" :option="['Apple', 'Banana', 'Orange']" />\`
+
+- **Multiple Select with Object Data:**
+  \`<Select
+      label="Assignees"
+      multiple
+      :option="users"
+      key-label="name"
+      key-value="id"
+      v-model="selectedUserIds"
+   />\`
+
+- **Searchable Select:**
+  \`<Select label="Country" :option="countries" filter-mode />\`
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsSelectValue.ts

@@ -0,0 +1,107 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for SelectValue component properties
+ *
+ * Описания свойств компонента SelectValue
+ */
+export const wikiDescriptionsSelectValue: StorybookComponentsDescriptionItem = {
+  name: 'SelectValue',
+  description: {
+    en: 'Display component for selected values in select controls, showing chips for multiple selection or single text value',
+    ru: 'Компонент отображения выбранных значений в элементах выбора, показывающий чипы для множественного выбора или одиночное текстовое значение'
+  },
+  possibilities: {
+    en: [
+      'single or multiple value display modes',
+      'automatic chip rendering for multiple selections',
+      'placeholder support for empty state',
+      'cancel icon for clearing individual selections',
+      'customizable chip appearance via chipAttrs',
+      'optional icon display in chips',
+      'responsive handling of selected items',
+      'disabled and readonly states support'
+    ],
+    ru: [
+      'режимы отображения одиночного или множественного значения',
+      'автоматический рендеринг чипов для множественного выбора',
+      'поддержка плейсхолдера для пустого состояния',
+      'иконка отмены для очистки отдельных выборов',
+      'настраиваемый внешний вид чипов через chipAttrs',
+      'опциональное отображение иконок в чипах',
+      'адаптивная обработка выбранных элементов',
+      'поддержка состояний disabled и readonly'
+    ]
+  },
+  import: [],
+  stories: [
+    {
+      id: 'SelectValueBasic',
+      name: {
+        en: 'Basic',
+        ru: 'Базовые'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Placeholder</div>
+            <DesignComponent placeholder="Select option"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Single value</div>
+            <DesignComponent :value="[{ label: 'Option 1', value: '1' }]"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Multiple values</div>
+            <DesignComponent
+              :multiple="true"
+              :value="[
+                { label: 'Option 1', value: '1', index: '1' },
+                { label: 'Option 2', value: '2', index: '2' },
+                { label: 'Option 3', value: '3', index: '3' }
+              ]"
+            />
+          </div>
+        </div>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'SelectValue'} type={'selectValue'}/>
+<Canvas of={Component.SelectValueBasic}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Event'} type={'click'}/>
+    `
+  },
+  ai: {
+    description: `
+SelectValue is a specialized display component used primarily within Select-like inputs to render the selected value(s).
+It handles the visual representation of selection, switching between a simple text label (single selection) and a group of chips (multiple selection).
+
+**Key Features:**
+1. **Display Modes:**
+   - **Single Selection (default):** Renders the label of the first item in the \`value\` array as text.
+   - **Multiple Selection (\`multiple\`):** Renders each item in the \`value\` array as a \`Chip\` component.
+
+2. **Data Handling (\`value\`):**
+   - Accepts an array of objects: \`[{ label: 'Text', value: 'val', ... }]\`.
+   - Even for single selection, it expects an array (uses the first item).
+   - If \`value\` is empty, it displays the \`placeholder\`.
+
+3. **Chip Customization (Multiple Mode):**
+   - \`chipAttrs\`: Allows passing props to the internal \`Chip\` components (e.g., \`{ outline: true, icon: 'check' }\`).
+   - Handles chip removal events automatically if not disabled/readonly.
+
+**When to use:**
+- Inside the trigger area of a **Select**, **Combobox**, or **Autocomplete** component.
+- To display a list of selected tags or tokens.
+
+**Usage Examples:**
+
+- **Multiple Values (Chips):**
+  \`<SelectValue multiple :value="[{ label: 'Apple' }, { label: 'Banana' }]" />\`
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsSkeleton.ts

@@ -10,7 +10,7 @@ export const wikiDescriptionsSkeleton: StorybookComponentsDescriptionItem = {
     en: [
       'animated loading placeholders for content',
       'control visibility with `active` property',
-      'child elements react to skeleton state via `isSkeleton` property or special classes',
+      'child elements react to the skeleton state via `isSkeleton` property or special classes',
       'customizable appearance and animation'
     ],
     ru: [
@@ -129,5 +129,46 @@ export const wikiDescriptionsSkeleton: StorybookComponentsDescriptionItem = {
     expose: `
 <StorybookDescriptions componentName={'Skeleton'} type={'expose.isActive'}/>
     `
+  },
+  ai: {
+    description: `
+Skeleton is a structural component used to display a loading state (placeholder) for content.
+It creates an animated "ghost" version of the UI to improve perceived performance and prevent layout shifts (CLS).
+
+**Key Features:**
+1. **Activation (\`active\`):**
+   - The \`active\` prop controls the visibility of the skeleton effect.
+   - When \`true\`, the component applies loading styles and accessibility attributes.
+
+2. **Context & Inheritance:**
+   - Uses Vue's \`provide\`/\`inject\` mechanism.
+   - Child components (like \`Image\`, \`Field\`, \`Chip\`) automatically detect if they are inside an active \`Skeleton\` and switch to their own skeleton view without needing individual props.
+
+3. **Styling Classes (Slot Props):**
+   - The component exposes CSS classes via the default slot to style raw HTML elements.
+   - **Text:** \`classText\` (lines), \`classTextVariant\` (headings).
+   - **Background:** \`classBackground\` (blocks, images), \`classBackgroundVariant\`.
+   - **Border:** \`classBorder\` (outlines).
+
+4. **Accessibility:**
+   - Automatically applies \`aria-busy="true"\` and \`aria-live="polite"\` to the wrapper.
+
+**Usage Examples:**
+
+- **Wrapping Smart Components:**
+  \`<Skeleton :active="isLoading">
+     <div class="profile">
+       <Image :value="user.avatar" /> <!-- Auto-skeleton -->
+       <Field :value="user.name" readonly /> <!-- Auto-skeleton -->
+     </div>
+   </Skeleton>\`
+
+- **Manual Structure (using slot classes):**
+  \`<Skeleton :active="isLoading" v-slot="{ classes }">
+     <div :class="classes.classBackground" style="height: 200px"></div>
+     <h3 :class="classes.classTextVariant"></h3>
+     <p :class="classes.classText"></p>
+   </Skeleton>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsTextareaAutosize.ts

@@ -0,0 +1,80 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for TextareaAutosize component
+ *
+ * Описания свойств компонента TextareaAutosize
+ */
+export const wikiDescriptionsTextareaAutosize: StorybookComponentsDescriptionItem = {
+  name: 'TextareaAutosize',
+  description: {
+    en: 'Textarea component that automatically adjusts its height based on content',
+    ru: 'Компонент текстового поля, которое автоматически подстраивает свою высоту под содержимое'
+  },
+  possibilities: {
+    en: [
+      'automatic height adjustment based on content',
+      'clone element for precise height calculation',
+      'respects padding and styling from the original textarea',
+      'smooth height transitions on content change',
+      'supports all standard textarea attributes via inputAttrs',
+      'optional autosize toggle for flexibility',
+      'reactive value binding with input event emission'
+    ],
+    ru: [
+      'автоматическая подстройка высоты под содержимое',
+      'элемент-клон для точного расчёта высоты',
+      'учитывает отступы и стили исходного textarea',
+      'плавные переходы высоты при изменении содержимого',
+      'поддержка всех стандартных атрибутов textarea через inputAttrs',
+      'опциональное отключение autosize для гибкости',
+      'реактивная привязка значения с генерацией события input'
+    ]
+  },
+  import: [],
+  render: `
+      <DesignComponent v-bind="args" :inputAttrs="{style: 'width: 240px; border: 1px solid #90A1B9FF'}" />
+    `,
+  stories: [],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'TextareaAutosize'} type={'textarea-autosize'}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Event'} type={'input-standard'}/>
+    `,
+    expose: `
+<StorybookDescriptions componentName={'Expose'} type={'value'}/>
+    `
+  },
+  ai: {
+    description: `
+**Note:** This is a subcomponent of \`Textarea\`. You should generally not use it directly.
+          It is automatically integrated into the \`Textarea\` component to provide auto-resizing capabilities.
+
+TextareaAutosize is a functional component that renders a \`<textarea>\` element capable of automatically adjusting its height to fit the content.
+
+**Key Features:**
+1. **Auto-Resizing Logic:**
+   - It renders a hidden "clone" element (a \`div\`) that mirrors the styles (font, padding, border, width) of the actual textarea.
+   - As text is entered, the content is copied to the clone, and the clone's height is measured.
+   - The textarea's height is then updated to match the clone's height, ensuring no scrollbars appear and the field grows/shrinks dynamically.
+
+2. **Input Attributes (\`inputAttrs\`):**
+   - Standard HTML attributes for the textarea (like \`placeholder\`, \`rows\`, \`disabled\`, \`readonly\`, \`style\`) should be passed via the \`inputAttrs\` prop.
+   - This ensures they are applied directly to the native \`<textarea>\` element.
+
+3. **Value Management:**
+   - It manages the input value and emits updates, allowing for reactive data binding.
+
+**When to use:**
+- This component is designed to be the internal engine for the \`Textarea\` component.
+- Use \`Textarea\` instead for a complete form field with labels, validation, and styling.
+
+**Usage Examples:**
+
+- **Internal Usage:**
+  \`<TextareaAutosize :value="modelValue" :inputAttrs="{ rows: 1 }" />\`
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsTooltip.ts

@@ -0,0 +1,136 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Tooltip component properties
+ *
+ * Описания свойств компонента Tooltip
+ */
+export const wikiDescriptionsTooltip: StorybookComponentsDescriptionItem = {
+  name: 'Tooltip',
+  description: {
+    en: 'Component for displaying a popup hint when hovering over an element',
+    ru: 'Компонент для отображения всплывающей подсказки при наведении на элемент'
+  },
+  possibilities: {
+    en: [
+      'displaying text or other content in a popup window',
+      'automatic positioning relative to the element',
+      'support for delay before showing and hiding',
+      'customizable indentation and padding',
+      'ability to control the open state',
+      'support for an arrow pointing to the element'
+    ],
+    ru: [
+      'отображение текста или другого контента во всплывающем окне',
+      'автоматическое позиционирование относительно элемента',
+      'поддержка задержки перед показом и скрытием',
+      'настраиваемые отступы и поля',
+      'возможность управления состоянием открытия',
+      'поддержка стрелки, указывающей на элемент'
+    ]
+  },
+  import: [],
+  render: `
+      <DesignComponent v-bind="args">
+        <template #control="{ binds }">
+          <span v-bind="binds">
+            Hover me
+          </span>
+        </template>
+      </DesignComponent>
+    `,
+  stories: [
+    {
+      id: 'TooltipAllSlots',
+      name: {
+        en: 'All slots demonstration',
+        ru: 'Демонстрация всех слотов'
+      },
+      template: `
+        <DesignComponent>
+          <template #control="{ binds }">
+            <button class="wiki-storybook-button" v-bind="binds">
+              Hover me (All Slots)
+            </button>
+          </template>
+
+          <template #default>
+            Default Slot
+          </template>
+
+          <template #description>
+            Description Slot
+          </template>
+
+          <template #body>
+            <div class="wiki-storybook-item--padding">
+              Body Slot Content
+            </div>
+          </template>
+        </DesignComponent>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Tooltip'} type={'tooltip'}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Tooltip'} type={'event.tooltip'}/>
+    `,
+    slots: `
+<Canvas of={Component.TooltipAllSlots}/>
+<StorybookDescriptions componentName={'Tooltip'} type={'slot.control'}/>
+<StorybookDescriptions componentName={'Slot'} type={'default'}/>
+<StorybookDescriptions componentName={'Slot'} type={'description'}/>
+<StorybookDescriptions componentName={'Slot'} type={'body'}/>
+    `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <Tooltip open embedded v-bind="args">
+    <template #control="{ binds }">
+      <button v-bind="binds">Hover me</button>
+    </template>
+  </Tooltip>
+</div>
+    `,
+    description: `
+Tooltip is a floating component that displays contextual information when a user interacts with a trigger element (hover or focus).
+It is designed to provide auxiliary descriptions, labels, or helper text.
+
+**Key Features:**
+1. **Trigger Integration:**
+   - Uses the \`#control\` slot to wrap the target element.
+   - Provides \`binds\` (events and ARIA attributes) that **must** be applied to the trigger element using \`v-bind="binds"\`.
+
+2. **Content & Layout:**
+   - \`label\`: Primary text content.
+   - \`description\`: Secondary text content.
+   - \`#default\`: Slot for custom HTML content.
+   - Includes a built-in \`Arrow\` component pointing to the trigger.
+
+3. **Behavior:**
+   - **Positioning:** Automatically calculates position (top, bottom, left, right) to stay within the viewport.
+   - **Timing:** Configurable \`delay\` (open) and \`delayHide\` (close).
+   - **Interaction:** Supports \`interactive\` mode (allows hovering the tooltip content) and \`disabled\` state.
+
+**Usage Examples:**
+
+- **Basic Label:**
+  \`<Tooltip label="Save changes">
+     <template #control="{ binds }">
+       <button v-bind="binds">Save</button>
+     </template>
+   </Tooltip>\`
+
+- **With Description:**
+  \`<Tooltip label="User Profile" description="Click to edit settings">
+     <template #control="{ binds }">
+       <Avatar v-bind="binds" />
+     </template>
+   </Tooltip>\`
+    `
+  }
+}