@dxtmisha/wiki 0.24.3 → 0.25.1

package/src/media/descriptions/wikiDescriptionsMenu.ts

@@ -29,6 +29,9 @@ export const wikiDescriptionsMenu: StorybookComponentsDescriptionItem = {
       'настройка атрибутов пунктов и списка (itemAttrs, listAttrs)'
     ]
   },
+  import: [
+    'import { ref } from \'vue\''
+  ],
   render: `
     <DesignComponent v-bind="args">
       <template #control="{binds}">
@@ -37,6 +40,75 @@ export const wikiDescriptionsMenu: StorybookComponentsDescriptionItem = {
     </DesignComponent>
   `,
   stories: [
+    {
+      id: 'MenuNavigation',
+      name: {
+        en: 'Navigation with previous/next',
+        ru: 'Навигация с previous/next'
+      },
+      setup: `
+      return {
+        selectedValue: ref('color2'),
+        colors: ref([
+          {label: '[1]Red', value: 'color1', icon: 'palette'},
+          {label: '[2]Green', value: 'color2', icon: 'palette'},
+          {label: '[3]Blue', value: 'color3', icon: 'palette'},
+          {label: '[4]Yellow', value: 'color4', icon: 'palette'},
+          {label: '[5]Purple', value: 'color5', icon: 'palette'},
+          {label: '[6]Orange', value: 'color6', icon: 'palette'}
+        ]),
+        step: ref(1)
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+            <div class="wiki-storybook-item__label">Step size:</div>
+            <div class="wiki-storybook-flex">
+              <button class="wiki-storybook-button" @click="step = 1">1 item</button>
+              <button class="wiki-storybook-button" @click="step = 2">2 items</button>
+              <button class="wiki-storybook-button" @click="step = 3">3 items</button>
+            </div>
+          </div>
+
+          <DesignComponent
+            v-model:selected="selectedValue"
+            :list="colors"
+            :step="step"
+            is-selected-by-value
+          >
+            <template #control="{previous, next, selectedNames, open}">
+              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+                <div class="wiki-storybook-flex">
+                  <button
+                    class="wiki-storybook-button"
+                    @click="previous"
+                    style="padding: 4px 12px;"
+                  >
+                    ◀ Previous
+                  </button>
+                  <div style="flex: 1; text-align: center; font-weight: 500;">
+                    {{ selectedNames.value[0] || 'None' }}
+                  </div>
+                  <button
+                    class="wiki-storybook-button"
+                    @click="next"
+                    style="padding: 4px 12px;"
+                  >
+                    Next ▶
+                  </button>
+                </div>
+              </div>
+            </template>
+          </DesignComponent>
+
+          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+            <div>Selected: {{ selectedValue }}</div>
+            <div>Step: {{ step }}</div>
+          </div>
+        </div>
+      `
+    },
     {
       id: 'MenuAjax',
       name: {
@@ -62,25 +134,76 @@ export const wikiDescriptionsMenu: StorybookComponentsDescriptionItem = {
           </template>
         </DesignComponent>
       `
+    },
+    {
+      id: 'MenuVModel',
+      name: {
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
+      },
+      setup: `
+      return {
+        selectedValue: ref('settings'),
+        menuItems: ref([
+          {label: 'Dashboard', value: 'dashboard', icon: 'dashboard'},
+          {label: 'Users', value: 'users', icon: 'people'},
+          {label: 'Settings', value: 'settings', icon: 'settings'},
+          {label: 'Reports', value: 'reports', icon: 'assessment'},
+          {label: 'Help', value: 'help', icon: 'help'}
+        ])
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="selectedValue = 'dashboard'">Select Dashboard</button>
+            <button class="wiki-storybook-button" @click="selectedValue = 'reports'">Select Reports</button>
+            <button class="wiki-storybook-button" @click="selectedValue = ''">Clear</button>
+          </div>
+          <div class="wiki-storybook-flex">
+            <DesignComponent
+              v-model:selected="selectedValue"
+              :list="menuItems"
+              is-selected-by-value
+            >
+              <template #control="{binds}">
+                <button class="wiki-storybook-button" v-bind="binds">
+                  Open Menu
+                </button>
+              </template>
+            </DesignComponent>
+          </div>
+          <div>Selected value: {{ selectedValue }}</div>
+        </div>
+      `
     }
   ],
   documentation: {
     body: `
 <StorybookDescriptions componentName={'Menu'} type={'menu'}/>
 
+<StorybookDescriptions componentName={'Menu'} type={'navigation'}/>
+<Canvas of={Component.MenuNavigation}/>
+
 <StorybookDescriptions componentName={'Menu'} type={'ajax'}/>
 <Canvas of={Component.MenuAjax}/>
+
+<StorybookDescriptions componentName={'Value'} type={'v-model'}/>
+<Canvas of={Component.MenuVModel}/>
     `,
     events: `
 <StorybookDescriptions componentName={'Event'} type={'click'}/>
 <StorybookDescriptions componentName={'Event'} type={'bars'}/>
+<StorybookDescriptions componentName={'Menu'} type={'event.updateValue'}/>
 <StorybookDescriptions componentName={'Window'} type={'event.window'}/>
     `,
     expose: `
 <StorybookDescriptions componentName={'Expose'} type={'selected'}/>
+<StorybookDescriptions componentName={'Menu'} type={'expose.navigation'}/>
     `,
     slots: `
 <StorybookDescriptions componentName={'List'} type={'slot.html'}/>
+<StorybookDescriptions componentName={'Menu'} type={'slotsControl'}/>
 <StorybookDescriptions componentName={'Menu'} type={'slots'}/>
     `
   }

package/src/media/descriptions/wikiDescriptionsModal.ts

@@ -0,0 +1,145 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Modal component properties
+ *
+ * Описания свойств компонента Modal
+ */
+export const wikiDescriptionsModal: StorybookComponentsDescriptionItem = {
+  name: 'Modal',
+  description: {
+    en: 'Simplified wrapper over Window component for creating centered modal dialogs',
+    ru: 'Упрощенная обертка над компонентом Window для создания центрированных модальных диалогов'
+  },
+  possibilities: {
+    en: [
+      'pre-configured modal window with centered positioning',
+      'overlay backdrop with background blocking',
+      'close on ESC key and click outside',
+      'integration with scrollbar for long content',
+      'slots for title, content and footer customization',
+      'lifecycle events (preparation, opening, closing)',
+      'close button with customizable icon',
+      'programmatic control via v-model:open',
+      'focus management and keyboard navigation',
+      'responsive design with mobile optimization'
+    ],
+    ru: [
+      'предварительно настроенное модальное окно с центрированием',
+      'оверлей с блокировкой фона',
+      'закрытие по ESC и клику вне области',
+      'интеграция со скроллбаром для длинного контента',
+      'слоты для настройки заголовка, содержимого и подвала',
+      'события жизненного цикла (preparation, opening, closing)',
+      'кнопка закрытия с настраиваемой иконкой',
+      'программное управление через v-model:open',
+      'управление фокусом и клавиатурная навигация',
+      'адаптивный дизайн с оптимизацией для мобильных'
+    ]
+  },
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  render: `
+      <DesignComponent v-bind="args">
+        <template #control="{binds}">
+          <button class="wiki-storybook-button" v-bind="binds">Open Modal</button>
+        </template>
+
+        <template #default>
+          <h4>Modal Component Overview</h4>
+          <p>Modal is a specialized wrapper around the Window component with preset adaptive mode set to 'modal'. It provides a simplified API for creating centered modal dialogs without needing to configure positioning and adaptive behavior manually.</p>
+
+          <p>The component automatically handles common modal dialog scenarios including confirmations, forms, alerts, and content previews. It manages focus, scroll behavior, and keyboard navigation to ensure accessibility and optimal user experience across different devices and screen sizes.</p>
+
+          <h4>Best Practices</h4>
+          <p>Use modals sparingly and only for content that genuinely requires immediate attention. Ensure modals have clear actions (confirm/cancel), provide easy ways to dismiss them, and avoid nesting modals within modals. The component should be large enough to display content comfortably but not so large that it overwhelms the screen.</p>
+
+          <h4>Relationship with Window</h4>
+          <p>Modal is essentially Window with <code>adaptive="modal"</code> preset, simplifying the usage for standard dialog scenarios. All Window properties, slots, and events are available in Modal component.</p>
+        </template>
+      </DesignComponent>
+    `,
+  stories: [
+    {
+      id: 'ModalVModel',
+      name: {
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
+      },
+      setup: `
+      return {
+        open: ref(false)
+      }
+      `,
+      template: `
+        <button class="wiki-storybook-button" @click="open = true">Open via v-model ({{ open }})</button>
+
+        <DesignComponent v-model:open="open">
+          <div class="wiki-storybook-item--padding">Your content here</div>
+        </DesignComponent>
+      `
+    },
+    {
+      id: 'ModalAllSlots',
+      name: {
+        en: 'All slots demonstration',
+        ru: 'Демонстрация всех слотов'
+      },
+      template: `
+        <DesignComponent>
+          <template #control="{binds}">
+            <button class="wiki-storybook-button" v-bind="binds">Open Modal with All Slots</button>
+          </template>
+
+          <template #title>
+            Modal Title Slot
+          </template>
+
+          <template #default>
+            <h4>Default Slot Content</h4>
+            <p>This is the main content area of the modal. You can place any content here including text, forms, images, or other components.</p>
+
+            <div class="wiki-storybook-info">
+              <strong>Available slots:</strong>
+              <ul>
+                <li><code>#control</code> - trigger button or element</li>
+                <li><code>#title</code> - modal header/title area</li>
+                <li><code>#default</code> - main content area</li>
+                <li><code>#footer</code> - footer with actions</li>
+              </ul>
+            </div>
+
+            <p>Each slot receives control props that allow you to interact with the modal programmatically, such as closing it or accessing window classes.</p>
+          </template>
+
+          <template #footer="{classesWindow}">
+              <button :class="classesWindow.close" class="wiki-storybook-button wiki-storybook-button--text">Cancel</button>
+              <button class="wiki-storybook-button">Confirm</button>
+          </template>
+        </DesignComponent>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Modal'} type={'modal'}/>
+<StorybookDescriptions componentName={'Window'} type={'v-model'}/>
+<Canvas of={Component.ModalVModel}/>
+
+<StorybookDescriptions componentName={'Modal'} type={'differences'}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Window'} type={'event.window'}/>
+<StorybookDescriptions componentName={'Event'} type={'bars'}/>
+<StorybookDescriptions componentName={'Event'} type={'actions'}/>
+    `,
+    expose: `
+<StorybookDescriptions componentName={'Window'} type={'expose'}/>
+    `,
+    slots: `
+<Canvas of={Component.ModalAllSlots}/>
+<StorybookDescriptions componentName={'Window'} type={'slots'}/>
+    `
+  }
+}

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>
@@ -203,11 +203,7 @@ 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={'slots'}/>

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/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'}/>
+    `
+  }
+}