@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/descriptions/wikiDescriptionsMotionTransform.ts

@@ -30,7 +30,7 @@ export const wikiDescriptionsMotionTransform: StorybookComponentsDescriptionItem
     ]
   },
   render: `
-      <DesignComponent class="wiki-storybook-decreased" v-bind="args">
+      <DesignComponent v-bind="args">
         <template #head>
           <div class="wiki-storybook-item--padding">
             <h3>MotionTransform Demo</h3>
@@ -190,11 +190,11 @@ export const wikiDescriptionsMotionTransform: StorybookComponentsDescriptionItem
   documentation: {
     body: `
 <StorybookDescriptions componentName={'MotionTransform'} type={'motionTransform'}/>
+<StorybookDescriptions componentName={'MotionTransform'} type={'classes'}/>
 <StorybookDescriptions componentName={'MotionTransform'} type={'animationHeadPosition'}/>
 <Canvas of={Component.MotionTransformAnimationHeadPosition}/>
 <StorybookDescriptions componentName={'MotionTransform'} type={'ignore'}/>
 <Canvas of={Component.MotionTransformIgnore}/>
-<StorybookDescriptions componentName={'MotionTransform'} type={'classes'}/>
 <StorybookDescriptions componentName={'MotionTransform'} type={'v-model'}/>
 <Canvas of={Component.MotionTransformVModel}/>
     `,
@@ -203,16 +203,10 @@ export const wikiDescriptionsMotionTransform: StorybookComponentsDescriptionItem
     `,
     expose: `
 <StorybookDescriptions componentName={'MotionTransform'} type={'expose.isShow'}/>
-<StorybookDescriptions componentName={'Window'} type={'expose.open'}/>
-<StorybookDescriptions componentName={'Window'} type={'expose.setOpen'}/>
-<StorybookDescriptions componentName={'Window'} type={'expose.toOpen'}/>
-<StorybookDescriptions componentName={'Window'} type={'expose.toClose'}/>
-<StorybookDescriptions componentName={'Window'} type={'expose.toggle'}/>
+<StorybookDescriptions componentName={'Window'} type={'expose'}/>
     `,
     slots: `
-<StorybookDescriptions componentName={'MotionTransform'} type={'slot.head'}/>
-<StorybookDescriptions componentName={'MotionTransform'} type={'slot.body'}/>
-<StorybookDescriptions componentName={'MotionTransform'} type={'slot.params'}/>
+<StorybookDescriptions componentName={'MotionTransform'} type={'slots'}/>
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsScrollbar.ts

@@ -64,13 +64,7 @@ export const wikiDescriptionsScrollbar: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Scrollbar'} type={'scrollbar'}/>
     `,
     events: `
-<StorybookDescriptions componentName={'Scrollbar'} type={'event.top'}/>
-<StorybookDescriptions componentName={'Scrollbar'} type={'event.reachTop'}/>
-<StorybookDescriptions componentName={'Scrollbar'} type={'event.leaveTop'}/>
-<StorybookDescriptions componentName={'Scrollbar'} type={'event.bottom'}/>
-<StorybookDescriptions componentName={'Scrollbar'} type={'event.reachBottom'}/>
-<StorybookDescriptions componentName={'Scrollbar'} type={'event.leaveBottom'}/>
-<StorybookDescriptions componentName={'Scrollbar'} type={'event.edge'}/>
+<StorybookDescriptions componentName={'Scrollbar'} type={'emits'}/>
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsSelect.ts

@@ -0,0 +1,209 @@
+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'}/>
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsSelectValue.ts

@@ -0,0 +1,78 @@
+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'}/>
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsSkeleton.ts

@@ -123,6 +123,7 @@ export const wikiDescriptionsSkeleton: StorybookComponentsDescriptionItem = {
   documentation: {
     body: `
 <StorybookDescriptions componentName={'Skeleton'} type={'active'}/>
+<StorybookDescriptions componentName={'Skeleton'} type={'classes'}/>
 <Canvas of={Component.SkeletonBasic}/>
     `,
     expose: `

package/src/media/descriptions/wikiDescriptionsTextareaAutosize.ts

@@ -0,0 +1,50 @@
+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'}/>
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsTooltip.ts

@@ -0,0 +1,89 @@
+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'}/>
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsWindow.ts

@@ -187,42 +187,25 @@ export const wikiDescriptionsWindow: StorybookComponentsDescriptionItem = {
   documentation: {
     body: `
 <StorybookDescriptions componentName={'Window'} type={'window'}/>
+<StorybookDescriptions componentName={'Window'} type={'classes'}/>
 <StorybookDescriptions componentName={'Window'} type={'staticMode'}/>
 <Canvas of={Component.WindowStaticMode}/>
 <StorybookDescriptions componentName={'Window'} type={'axis'}/>
 <Canvas of={Component.WindowAxis}/>
-<StorybookDescriptions componentName={'Window'} type={'classes'}/>
-<StorybookDescriptions componentName={'Window'} type={'hooks'}/>
 <StorybookDescriptions componentName={'Window'} type={'v-model'}/>
 <Canvas of={Component.WindowVModel}/>
+<StorybookDescriptions componentName={'Window'} type={'hooks'}/>
     `,
     events: `
 <StorybookDescriptions componentName={'Window'} type={'event.window'}/>
-
-<StorybookDescriptions componentName={'Event'} type={'scrollbarTop'}/>
-<StorybookDescriptions componentName={'Event'} type={'scrollbarReachTop'}/>
-<StorybookDescriptions componentName={'Event'} type={'scrollbarLeaveTop'}/>
-<StorybookDescriptions componentName={'Event'} type={'scrollbarBottom'}/>
-<StorybookDescriptions componentName={'Event'} type={'scrollbarReachBottom'}/>
-<StorybookDescriptions componentName={'Event'} type={'scrollbarLeaveBottom'}/>
-<StorybookDescriptions componentName={'Event'} type={'scrollbarEdge'}/>
-
+<StorybookDescriptions componentName={'Scrollbar'} type={'emits-include'}/>
 <StorybookDescriptions componentName={'Image'} type={'event.load'}/>
     `,
     expose: `
-<StorybookDescriptions componentName={'Window'} type={'expose.control'}/>
-<StorybookDescriptions componentName={'Window'} type={'expose.id'}/>
-<StorybookDescriptions componentName={'Window'} type={'expose.open'}/>
-<StorybookDescriptions componentName={'Window'} type={'expose.setOpen'}/>
-<StorybookDescriptions componentName={'Window'} type={'expose.toOpen'}/>
-<StorybookDescriptions componentName={'Window'} type={'expose.toClose'}/>
-<StorybookDescriptions componentName={'Window'} type={'expose.toggle'}/>
+<StorybookDescriptions componentName={'Window'} type={'expose'}/>
     `,
     slots: `
-<StorybookDescriptions componentName={'Slot'} type={'control'}/>
-<StorybookDescriptions componentName={'Slot'} type={'title'}/>
-<StorybookDescriptions componentName={'Slot'} type={'footer'}/>
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
+<StorybookDescriptions componentName={'Window'} type={'slots'}/>
     `
   }
 }