@dxtmisha/wiki 0.39.5 → 0.39.7

package/src/media/descriptions/wikiDescriptionsTabItem.ts

@@ -1,79 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-export const wikiDescriptionsTabItem: StorybookComponentsDescriptionItem = {
-  name: 'TabItem',
-  description: {
-    en: 'A versatile component for creating tabs, navigation links, or list items. Supports icons, badges, labels, and various interactive states.',
-    ru: 'Универсальный компонент для создания вкладок, навигационных ссылок или элементов списка. Поддерживает иконки, бейджи, метки и различные интерактивные состояния.'
-  },
-  possibilities: {
-    en: [
-      'displaying a label (`label`)',
-      'leading and trailing icons (`icon`, `iconTrailing`)',
-      'integrated badge support (`badge`)',
-      'selection state (`selected`)',
-      'disabled state (`disabled`)',
-      'navigation support (`href`, `to`)',
-      'customizable root tag (`tag`)',
-      'ripple effect on click',
-      'skeleton loading state'
-    ],
-    ru: [
-      'отображение метки (`label`)',
-      'иконки слева и справа (`icon`, `iconTrailing`)',
-      'встроенная поддержка бейджа (`badge`)',
-      'состояние выбора (`selected`)',
-      'отключенное состояние (`disabled`)',
-      'поддержка навигации (`href`, `to`)',
-      'настраиваемый корневой тег (`tag`)',
-      'эффект ряби при клике',
-      'состояние загрузки (скелетон)'
-    ]
-  },
-  render: `
-    <div class="wiki-storybook-flex">
-      <DesignComponent v-bind="args" />
-      <DesignComponent v-bind="args" />
-      <DesignComponent v-bind="args" />
-    </div>
-  `,
-  stories: [
-    {
-      id: 'TabItemSkeleton',
-      name: {
-        en: 'Skeleton',
-        ru: 'Скелетон'
-      },
-      components: ['Skeleton'],
-      template: `
-        <DesignSkeleton :active="true">
-          <DesignComponent isSkeleton>Tab item</DesignComponent>
-        </DesignSkeleton>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'TabItem'} type={'tabItem'}/>
-<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>
-<Canvas of={Component.TabItemSkeleton}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Event'} type={'click'}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'Expose'} type={'value'}/>
-<StorybookDescriptions componentName={'Expose'} type={'detail'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-    `
-  },
-  ai: {
-    description: `
-Foundational interactive building block for multi-item navigation structures like tabs, list menus, and sidebars. Encapsulates a label, optional icons, and status indicators (badges) into a single semantic unit with integrated state management.
-Features built-in support for selected, disabled, and loading (skeleton) states, along with automated navigation logic for href and router-link. Includes a Material-style ripple effect for high-polish click feedback and flexible tag rendering to support various HTML roles (button, a, li).
-Controlled via label, icon, and badge props, with v-model or selected prop integration. Use within Tabs or List components to create cohesive, accessible navigation interfaces with consistent visual affordance and spatial organization.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsTabs.ts

@@ -1,115 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Tabs component
- *
- * Описания свойств компонента Tabs
- */
-export const wikiDescriptionsTabs: StorybookComponentsDescriptionItem = {
-  name: 'Tabs',
-  description: {
-    en: 'Tabs component for switching between different views with animation',
-    ru: 'Компонент вкладок для переключения между различными представлениями с анимацией'
-  },
-  possibilities: {
-    en: [
-      'switching between content sections',
-      'animated transitions via MotionAxis',
-      'navigation via TabsNavigation',
-      'customizable tabs list',
-      'dynamic content slots'
-    ],
-    ru: [
-      'переключение между разделами контента',
-      'анимированные переходы через MotionAxis',
-      'навигация через TabsNavigation',
-      'настраиваемый список вкладок',
-      'динамические слоты контента'
-    ]
-  },
-  import: [
-    'import { ref } from \'vue\''
-  ],
-  render: `
-<DesignComponent v-bind="args">
-  <template #home>Welcome to your personal dashboard! Here you can see an overview of your activity.</template>
-  <template #profile>Manage your personal information, security settings, and preferences.</template>
-  <template #messages>You have 3 unread messages. Connect with your colleagues and friends.</template>
-  <template #settings>Adjust your application settings to suit your needs.</template>
-  <template #dashboard>View your analytics and performance metrics in real-time.</template>
-  <template #notifications>Stay updated with the latest alerts and announcements.</template>
-</DesignComponent>
-  `,
-  stories: [
-    {
-      id: 'TabsBasic',
-      name: {
-        en: 'Basic',
-        ru: 'Базовый'
-      },
-      template: `
-        <DesignComponent
-          :tabs="[
-            { label: 'Home', value: 'home' },
-            { label: 'Profile', value: 'profile' }
-          ]"
-          selected="home"
-        >
-          <template #home>Home</template>
-          <template #profile>Profile</template>
-        </DesignComponent>
-      `
-    },
-    {
-      id: 'TabsVModel',
-      name: {
-        en: 'v-model',
-        ru: 'v-model'
-      },
-      setup: `
-      return {
-        selected: ref('tab1')
-      }
-      `,
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <div class="wiki-storybook-flex-align-center">
-            <span>Current value: {{ selected }}</span>
-            <button class="wiki-storybook-button" @click="selected = 'tab1'">Tab 1</button>
-            <button class="wiki-storybook-button" @click="selected = 'tab2'">Tab 2</button>
-            <button class="wiki-storybook-button" @click="selected = 'tab3'">Tab 3</button>
-          </div>
-
-          <DesignComponent
-            :tabs="[
-            { label: 'Tab 1', value: 'tab1' },
-            { label: 'Tab 2', value: 'tab2' },
-            { label: 'Tab 3', value: 'tab3' }
-          ]"
-            v-model:selected="selected"
-          >
-            <template #tab1>Content 1</template>
-            <template #tab2>Content 2</template>
-            <template #tab3>Content 3</template>
-          </DesignComponent>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Tabs'} type={'tabs'}/>
-<Canvas of={Component.TabsBasic}/>
-
-<StorybookDescriptions componentName={'Tabs'} type={'v-model'}/>
-<Canvas of={Component.TabsVModel}/>
-    `
-  },
-  ai: {
-    description: `
-High-level compound component that integrates TabsNavigation and MotionAxis to provide a complete, animated tabbed interface. Simplifies the creation of multi-view layouts where each section is logically separated and visually transitioned.
-Features automated coordination between the navigation bar and the content area, including direction-aware sliding animations and lazy loading. Supports dynamic tab lists, centralized state management via v-model, and modular content distribution through named slots matching tab values.
-Controlled via the tabs prop for structure and v-model:selected for active state. Use for main dashboard views, complex settings panels, or any multi-step interface requiring a polished, interactive navigation experience with high performance.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsTabsNavigation.ts

@@ -1,102 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-export const wikiDescriptionsTabsNavigation: StorybookComponentsDescriptionItem = {
-  name: 'TabsNavigation',
-  description: {
-    en: 'Component for managing navigation between tabs. Supports horizontal scrolling, selection management, and focus.',
-    ru: 'Компонент для управления навигацией между вкладками. Поддерживает горизонтальную прокрутку, управление выделением и фокусом.'
-  },
-  possibilities: {
-    en: [
-      'horizontal scrolling of tabs',
-      'management of the selected tab via `selected` and `list`',
-      'keyboard support (arrows, Enter, Space)',
-      'customization of tab appearance via `tag` and `itemAttrs`',
-      'event support: `update:selected`, `update:modelSelected`'
-    ],
-    ru: [
-      'горизонтальная прокрутка вкладок',
-      'управление выбранной вкладкой через `selected` и `list`',
-      'поддержка клавиатуры (стрелки, Enter, Пробел)',
-      'настройка внешнего вида вкладок через `tag` и `itemAttrs`',
-      'поддержка событий: `update:selected`, `update:modelSelected`'
-    ]
-  },
-  render: `
-    <DesignComponent v-bind="args"/>
-  `,
-  import: [
-    'import { ref } from \'vue\''
-  ],
-  stories: [
-    {
-      id: 'TabsNavigationBasic',
-      name: {
-        en: 'Basic usage',
-        ru: 'Базовое использование'
-      },
-      setup: `
-      const list = [
-        { label: 'Tab 1', value: '1' },
-        { label: 'Tab 2', value: '2' },
-        { label: 'Tab 3', value: '3' }
-      ]
-      const selected = ref('2')
-      return { list, selected }
-      `,
-      template: `
-        <DesignComponent :list="list" v-model:selected="selected"/>
-      `
-    },
-    {
-      id: 'TabsNavigationVModel',
-      name: {
-        en: 'Two-way binding (v-model)',
-        ru: 'Двусторонняя привязка (v-model)'
-      },
-      setup: `
-      const list = [
-        { label: 'Tab 1', value: '1' },
-        { label: 'Tab 2', value: '2' },
-        { label: 'Tab 3', value: '3' }
-      ]
-      const selected = ref('1')
-      return { list, selected }
-      `,
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <div class="wiki-storybook-flex-align-center">
-            <span>Current value: {{ selected }}</span>
-            <button class="wiki-storybook-button" @click="selected = '1'">Select Tab 1</button>
-            <button class="wiki-storybook-button" @click="selected = '2'">Select Tab 2</button>
-            <button class="wiki-storybook-button" @click="selected = '3'">Select Tab 3</button>
-          </div>
-
-          <DesignComponent :list="list" v-model:selected="selected"/>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'TabsNavigation'} type={'tabsNavigation'}/>
-<Canvas of={Component.TabsNavigationBasic}/>
-<StorybookDescriptions componentName={'TabsNavigation'} type={'v-model'}/>
-<Canvas of={Component.TabsNavigationVModel}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Event'} type={'click'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'Slot'} type={'leading'} />
-<StorybookDescriptions componentName={'Slot'} type={'trailing'} />
-    `
-  },
-  ai: {
-    description: `
-Specialized navigation container for creating horizontal tab bars with automated scrolling and focus management. Designed for switching between filtered views, dashboard sections, or multi-step form progress indicators.
-Features intelligent horizontal scrolling with alignment control, keyboard navigation support (arrows, Enter, Space), and customizable tab item rendering via the tag and itemAttrs props. Automatically synchronizes active state through two-way binding and provides leading/trailing slots for auxiliary navigation actions.
-Controlled via the list prop for tab definitions and v-model:selected for active state tracking. Use as the base header for complex tabbed layouts or standalone navigation bars requiring high accessibility and smooth interaction across mobile and desktop.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsTextarea.ts

@@ -1,58 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-export const wikiDescriptionsTextarea: StorybookComponentsDescriptionItem = {
-  name: 'Textarea',
-  description: {
-    en: 'A multi-line text input component. Supports auto-sizing, validation, icons, labels, messages, and counters.',
-    ru: 'Компонент многострочного ввода текста. Поддерживает авто-размер, валидацию, иконки, метки, сообщения и счетчики.'
-  },
-  possibilities: {
-    en: [
-      'multi-line text input',
-      'auto-sizing based on content (`autosize`)',
-      'validation support (`validationMessage`, `required`)',
-      'label and helper message support',
-      'character counter (`counter`, `maxlength`)',
-      'icons support',
-      'disabled and readonly states'
-    ],
-    ru: [
-      'многострочный ввод текста',
-      'авто-размер в зависимости от контента (`autosize`)',
-      'поддержка валидации (`validationMessage`, `required`)',
-      'поддержка метки и вспомогательного сообщения',
-      'счетчик символов (`counter`, `maxlength`)',
-      'поддержка иконок',
-      'состояния отключения и только для чтения'
-    ]
-  },
-  render: `
-    <DesignComponent v-bind="args" />
-  `,
-  stories: [],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Textarea'} type={'textarea'}/>
-<StorybookDescriptions componentName={'Textarea'} type={'autosize'}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Event'} type={'input'}/>
-<StorybookDescriptions componentName={'Event'} type={'change'}/>
-    `,
-    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'} />
-    `
-  },
-  ai: {
-    description: `
-Versatile multi-line text input control with automated spatial management and comprehensive validation support. Designed for feedback forms, detailed descriptions, and any scenario requiring a flexible, high-volume data entry area.
-Features an intelligent autosize engine that grows/shrinks dynamically based on content, along with character counter integration and Material symbol icons (leading/trailing). Inherits full Field component functionality including floating labels, helper messages, and reactive error states.
-Controlled via the v-model for content and autosize prop for height behavior. Use for user biographies, multi-row comments, or complex data entry views where standard single-line inputs lack sufficient capacity.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsTextareaAutosize.ts

@@ -1,57 +0,0 @@
-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: `
-Low-level functional engine for multi-line inputs that provides precise, real-time height adjustment based on content. Implements a reliable cloning mechanism to calculate scroll-free container heights while respecting parent padding and font styles.
-Features automated height synchronization during content changes, supporting smooth CSS transitions and native textarea attributes via inputAttrs. Operates as a foundational tool for the Textarea component, ensuring character entry never triggers unwanted shift or overflow.
-Primarily integrated as a subcomponent; should generally not be manually used for standalone input fields. Controlled via reactive value bindings, serving as the high-performance core for any dynamic data entry element requiring responsive layout scaling.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsTooltip.ts

@@ -1,105 +0,0 @@
-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: `
-Contextual informational overlay that appears when a user interacts with a trigger element via hover or focus. Designed for auxiliary labels, helper text, and secondary descriptive titles that enhance functional awareness without crowding the UI.
-Features automated high-precision positioning (top, bottom, left, right) with viewport collision detection and customizable delay/interactive behaviors. Includes a built-in arrow indicator and requires trigger binding via the #control slot's binds object for proper event synchronization.
-Controlled via simple content props (label, description) and supports complex HTML structures within the #default slot. Use to provide non-critical supplemental information, keyboard shortcuts, or detailed affordance for icon-only buttons.
-    `
-  }
-}