@dxtmisha/wiki 0.39.2 → 0.39.4

package/src/media/descriptions/wikiDescriptionsSelect.ts

@@ -1,223 +0,0 @@
-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: `
-      const valueSingle = ref('option2')
-      const valueMultiple = ref(['option1', 'option3'])
-      const options = [
-        { label: 'First option', value: 'option1' },
-        { label: 'Second option', value: 'option2' },
-        { label: 'Third option', value: 'option3' }
-      ]
-
-      return { valueSingle, valueMultiple, options }
-      `,
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <div class="wiki-storybook-flex-align-center">
-            <span>Value: <strong>{{ valueSingle }}</strong></span>
-            <button class="wiki-storybook-button" @click="valueSingle = 'option1'">option 1</button>
-            <button class="wiki-storybook-button" @click="valueSingle = 'option2'">option 2</button>
-            <button class="wiki-storybook-button" @click="valueSingle = 'option3'">option 3</button>
-          </div>
-
-          <DesignComponent
-            v-model="valueSingle"
-            type="select"
-            label="Single select"
-            :option="options"
-          />
-
-          <div class="wiki-storybook-flex-align-center">
-            <span>Value: <strong>{{ valueMultiple }}</strong></span>
-            <button class="wiki-storybook-button" @click="valueMultiple = ['option1', 'option2']">option 1, 2</button>
-            <button class="wiki-storybook-button wiki-storybook-button--warning" @click="valueMultiple = []">Clear</button>
-          </div>
-
-          <DesignComponent
-            v-model="valueMultiple"
-            type="select"
-            label="Multiple select"
-            multiple
-            :option="options"
-          />
-        </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: `
-High-level form control that combines a trigger field, a dropdown menu, and a structured value display (Chips or text). Designed for choosing single or multiple items from static lists or dynamic datasets with built-in search and filtering.
-Features support for AJAX data loading with caching, multiple selection with chips, and an editable combobox mode (editValue). Includes integrated validation, keyboard navigation, and full Field component functionality (labels, icons, and state messages).
-Controlled via the option prop for data and v-model for state tracking, supporting custom key mapping (keyLabel/keyValue). Use for user selection, category filtering, or complex multi-select interfaces requiring real-time search.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsSelectValue.ts

@@ -1,85 +0,0 @@
-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: `
-Specialized display engine used within Select, Combobox, or Autocomplete controls to render selected state. Dynamically switches between a simple text label for single selection and a group of Chips for multiple selection.
-Features automated Chip management, including removal event handling and integration with the Select data model. Supports empty state placeholders, custom Chip attributes (icons, outlines), and handles disabled/readonly states to prevent interaction.
-Controlled via the multiple and value props, requiring an array of objects even for single selection. Use as a foundational element when building custom selection fields requiring standardized token-based or text-based value representation.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsSkeleton.ts

@@ -1,140 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-export const wikiDescriptionsSkeleton: StorybookComponentsDescriptionItem = {
-  name: 'Skeleton',
-  description: {
-    en: 'Skeleton component for displaying loading placeholders',
-    ru: 'Компонент для отображения заглушки загрузки. Создает анимированные плейсхолдеры для контента во время загрузки данных'
-  },
-  possibilities: {
-    en: [
-      'animated loading placeholders for content',
-      'control visibility with `active` property',
-      'child elements react to the skeleton state via `isSkeleton` property or special classes',
-      'customizable appearance and animation'
-    ],
-    ru: [
-      'анимированные заглушки загрузки для контента',
-      'управление видимостью через свойство `active`',
-      'дочерние элементы реагируют на состояние скелетона через свойство `isSkeleton` или специальные классы',
-      'настраиваемый внешний вид и анимация'
-    ]
-  },
-  render: `
-    <DesignComponent v-bind="args">
-      <div class="wiki-storybook-card design-component__background">
-        <div class="wiki-storybook-card__image design-component__background" style="background-image: url('\${image1}')"/>
-        <div class="wiki-storybook-card__content">
-          <div>
-            <div class="wiki-storybook-card__label design-component__text">Product Name</div>
-            <div class="wiki-storybook-card__information design-component__textVariant">Short description</div>
-          </div>
-          <div class="wiki-storybook-card__description design-component__text">
-            Detailed product description that tells about its main features and advantages.
-          </div>
-          <div class="wiki-storybook-card__actions">
-            <button class="wiki-storybook-button design-component__background">Buy Now</button>
-          </div>
-        </div>
-      </div>
-    </DesignComponent>
-  `,
-  import: [
-    'import { image1 } from \'@dxtmisha/wiki/media\''
-  ],
-  stories: [
-    {
-      id: 'SkeletonBasic',
-      name: {
-        en: 'Basic usage',
-        ru: 'Базовое использование'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">text</div>
-            <DesignComponent :active="true">
-              <div class="design-component__text">Text placeholder</div>
-              <div class="design-component__text">Text placeholder</div>
-              <div class="design-component__text">Text placeholder</div>
-            </DesignComponent>
-          </div>
-
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">textVariant</div>
-            <DesignComponent :active="true">
-              <div class="design-component__textVariant">Text placeholder</div>
-              <div class="design-component__textVariant">Text placeholder</div>
-              <div class="design-component__textVariant">Text placeholder</div>
-            </DesignComponent>
-          </div>
-
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">background</div>
-            <DesignComponent :active="true">
-              <div
-                class="design-component__background"
-                style="width: 128px; height: 128px;"
-              >
-                Text placeholder
-              </div>
-            </DesignComponent>
-          </div>
-
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">backgroundVariant</div>
-            <DesignComponent :active="true">
-              <div
-                class="design-component__backgroundVariant"
-                style="width: 128px; height: 128px;"
-              >
-                Background Variant
-              </div>
-            </DesignComponent>
-          </div>
-
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">border</div>
-            <DesignComponent :active="true">
-              <div
-                class="design-component__border"
-                style="width: 128px; height: 128px; border: 2px solid #ccc;"
-              >
-                Border placeholder
-              </div>
-            </DesignComponent>
-          </div>
-
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">borderVariant</div>
-            <DesignComponent :active="true">
-              <div
-                class="design-component__borderVariant"
-                style="width: 128px; height: 128px; border: 2px solid #ccc;"
-              >
-                Border Variant
-              </div>
-            </DesignComponent>
-          </div>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Skeleton'} type={'active'}/>
-<StorybookDescriptions componentName={'Skeleton'} type={'classes'}/>
-<Canvas of={Component.SkeletonBasic}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'Skeleton'} type={'expose.isActive'}/>
-    `
-  },
-  ai: {
-    description: `
-Structural layout utility designed to display animated loading placeholders (ghost versions) for UI elements. Improves perceived performance and prevents Cumulative Layout Shift (CLS) by reserving space for incoming content.
-Features a logic-sharing mechanism via provide/inject that allows child components (Field, Image, Chip) to automatically switch to their skeleton states without individual props. Exposes specialized CSS classes through slot props for styling raw HTML elements as text lines, backgrounds, or borders.
-Controlled via the active prop to toggle the global loading state and accessibility Busy/Live attributes. Use as a wrapper for sections or entire pages during data fetching to maintain structural integrity and a high-quality user experience.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsSnackbar.ts

@@ -1,86 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Snackbar component properties
- *
- * Описания свойств компонента Snackbar
- */
-export const wikiDescriptionsSnackbar: StorybookComponentsDescriptionItem = {
-  name: 'Snackbar',
-  description: {
-    en: 'An orchestration component for managing and displaying a queue of temporary notification messages (Snackbars).',
-    ru: 'Компонент-оркестратор для управления и отображения очереди временных уведомлений (Snackbars).'
-  },
-  possibilities: {
-    en: [
-      'automatic lifecycle management for notifications',
-      'flexible anchor positioning (top/bottom, left/right/block)',
-      'priority-based visual separation of messages',
-      'configurable auto-hide timeout',
-      'teleport-based rendering to ensure overlay on top of all elements',
-      'full programmatic control over the notification queue'
-    ],
-    ru: [
-      'автоматическое управление жизненным циклом уведомлений',
-      'гибкое позиционирование (сверху/снизу, слева/справа/блоком)',
-      'визуальное разделение сообщений по приоритету',
-      'настраиваемое время автоматического скрытия',
-      'рендер через Teleport для гарантированного отображения поверх всех элементов',
-      'полный программный контроль над очередью уведомлений'
-    ]
-  },
-  import: [],
-  render: `
-    <div class="wiki-storybook-flex-column">
-      <div class="wiki-storybook-flex">
-        <button
-          class="wiki-storybook-button"
-          @click="() => $refs.snackbar.add({ data: { label: 'Action completed', icon: 'check_circle' }, delay: 3000 })"
-        >
-          Success Message
-        </button>
-        <button
-          class="wiki-storybook-button"
-          @click="() => $refs.snackbar.add({ data: { label: 'Connection timeout', description: 'Retrying in 5s...', icon: 'error' }, highPriority: true })"
-        >
-          System Error
-        </button>
-        <button
-          class="wiki-storybook-button wiki-storybook-button--warning"
-          @click="() => $refs.snackbar.clear()"
-        >
-          Clear Queue
-        </button>
-      </div>
-      <DesignComponent ref="snackbar" v-bind="args" />
-    </div>
-  `,
-  stories: [],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Snackbar'} type={'snackbar'}/>
-<StorybookDescriptions componentName={'Snackbar'} type={'add'}/>
-
-<StorybookDescriptions componentName={'Snackbar'} type={'adaptation'}/>
-<StorybookDescriptions componentName={'Snackbar'} type={'position'}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Snackbar'} type={'event.show'}/>
-<StorybookDescriptions componentName={'Snackbar'} type={'event.hide'}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'Snackbar'} type={'expose.isItem'}/>
-<StorybookDescriptions componentName={'Snackbar'} type={'expose.add'}/>
-<StorybookDescriptions componentName={'Snackbar'} type={'expose.remove'}/>
-<StorybookDescriptions componentName={'Snackbar'} type={'expose.clear'}/>
-    `,
-    slots: ``
-  },
-  ai: {
-    description: `
-Centralized notification management system (orchestrator) that coordinates the lifecycle and queue of temporary messages. Ideal for global system alerts, user feedback, and asynchronous status updates across the application.
-Features an intelligent queue manager with support for priority containers, automatic lifecycle hooks (show/hide), and flexible screen anchoring (vertical/horizontal positioning). Includes programmatic control over message stack, custom auto-hide delays, and teleport-based rendering to ensure overlay priority over all content.
-Controlled via an exposed API (add, remove, clear) and configurable global settings like delay and origin. Place a single instance at the root of the application (e.g., App.vue) to manage consistent notification patterns throughout the entire user session.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsSnackbarItem.ts

@@ -1,96 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for SnackbarItem component properties
- *
- * Описания свойств компонента SnackbarItem
- */
-export const wikiDescriptionsSnackbarItem: StorybookComponentsDescriptionItem = {
-  name: 'SnackbarItem',
-  description: {
-    en: 'Individual notification message element used within a Snackbar.',
-    ru: 'Элемент индивидуального уведомления, используемый внутри Snackbar.'
-  },
-  possibilities: {
-    en: [
-      'support for label and detailed description text',
-      'leading and trailing icons support',
-      'action buttons support',
-      'custom HTML or component rendering',
-      'built-in close button with customizable icon',
-      'accessible ARIA status by default'
-    ],
-    ru: [
-      'поддержка заголовка и подробного текста описания',
-      'поддержка начальных и конечных иконок',
-      'поддержка кнопок действий',
-      'рендер произвольного HTML или компонентов',
-      'встроенная кнопка закрытия с настраиваемой иконкой',
-      'доступный ARIA статус по умолчанию'
-    ]
-  },
-  import: [],
-  stories: [
-    {
-      id: 'SnackbarItemBasic',
-      name: {
-        en: 'Basic',
-        ru: 'Базовые'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <DesignComponent
-            label="Detailed notification"
-            description="Description text provides more context for the user."
-            class="wiki-storybook-item--squared--lg"
-          />
-          <DesignComponent
-            label="Success message"
-            icon="check_circle"
-            class="wiki-storybook-item--squared--lg"
-          />
-          <DesignComponent
-            label="File deleted"
-            icon="delete"
-            button="Undo"
-            class="wiki-storybook-item--squared--lg"
-          />
-          <DesignComponent
-            label="Connection lost"
-            icon="wifi_off"
-            :actions-list="[{ label: 'Retry', primary: true }]"
-            class="wiki-storybook-item--squared--lg"
-          />
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'SnackbarItem'} type={'snackbarItem'}/>
-<Canvas of={Component.SnackbarItemBasic}/>
-
-<StorybookDescriptions componentName={'SnackbarItem'} type={'component'}/>
-<StorybookDescriptions componentName={'SnackbarItem'} type={'html'}/>
-<StorybookDescriptions componentName={'SnackbarItem'} type={'role'}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Event'} type={'click'}/>
-<StorybookDescriptions componentName={'Event'} type={'actions'}/>
-<StorybookDescriptions componentName={'SnackbarItem'} type={'eventClose'}/>
-    `,
-    expose: '',
-    slots: `
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-<StorybookDescriptions componentName={'Slot'} type={'description'}/>
-<StorybookDescriptions componentName={'Slot'} type={'body'}/>
-`
-  },
-  ai: {
-    description: `
-Visual representation element for a single notification message, typically orchestrated by the Snackbar component. Designed for concise informational alerts, success messages, or quick-action prompts.
-Features a flexible internal structure with support for labels, detailed descriptions, and material-symbol icons (leading/trailing). Includes integrated action button support, a mandatory close button, and support for rendering custom HTML or Vue components as message bodies.
-Controlled via simple content props or an actions-list array for complex button configurations. Use as the base message unit for all system feedback, ensuring high visibility and accessibility through automatic ARIA status role implementation.
-    `
-  }
-}