@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/descriptions/wikiDescriptionsInput.ts

@@ -0,0 +1,257 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Input component
+ *
+ * Описания свойств компонента Input
+ */
+export const wikiDescriptionsInput: StorybookComponentsDescriptionItem = {
+  name: 'Input',
+  description: {
+    en: 'Text input field component with validation, masking and formatting support',
+    ru: 'Компонент текстового поля ввода с поддержкой валидации, маскирования и форматирования'
+  },
+  possibilities: {
+    en: [
+      'multiple input types: text, number, email, password, tel, url, date, time and more',
+      'built-in validation with custom messages',
+      'mask support for formatted input (phone, date, custom patterns)',
+      'currency and number formatting',
+      'password visibility toggle',
+      'prefix and suffix support',
+      'counter for character limits',
+      'navigation arrows for numeric and selection inputs',
+      'autocomplete, spellcheck and autocorrect support',
+      'integrated with Field component for consistent styling'
+    ],
+    ru: [
+      'множественные типы ввода: text, number, email, password, tel, url, date, time и другие',
+      'встроенная валидация с пользовательскими сообщениями',
+      'поддержка маскирования для форматированного ввода (телефон, дата, пользовательские паттерны)',
+      'форматирование валюты и чисел',
+      'переключатель видимости пароля',
+      'поддержка префикса и суффикса',
+      'счётчик для ограничения символов',
+      'стрелки навигации для числовых и выборочных полей',
+      'поддержка автозаполнения, проверки орфографии и автокоррекции',
+      'интегрирован с компонентом Field для единообразной стилизации'
+    ]
+  },
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  render: `
+      <DesignComponent v-bind="args" />
+    `,
+  stories: [
+    {
+      id: 'InputTypes',
+      name: {
+        en: 'Input types',
+        ru: 'Типы ввода'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent type="text" label="Text" placeholder="Enter text" />
+          <DesignComponent type="email" label="Email" placeholder="email@example.com" />
+          <DesignComponent type="password" label="Password" placeholder="Enter password" />
+          <DesignComponent type="number" label="Number" placeholder="0" />
+          <DesignComponent type="text" label="Phone" mask="+1 (***) ***-****" placeholder="+1 (555) 000-0000" />
+          <DesignComponent type="date" label="Date" />
+          <DesignComponent type="search" label="Search" placeholder="Search..." />
+        </div>
+      `
+    },
+    {
+      id: 'InputNumber',
+      name: {
+        en: 'Number formatting',
+        ru: 'Форматирование чисел'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent type="number" value="1234567" label="Number" />
+          <DesignComponent type="number-format" value="1234567" language="en-US" label="Formatted" />
+          <DesignComponent type="number" value="50" :min="0" :max="100" label="From 0 to 100" />
+          <DesignComponent type="number" value="10" arrow="stepper" :step="5" :arrow-step="10" label="Step 5/10" />
+          <DesignComponent type="number-format" value="1234567.89" align="center" :fraction="2" label="Centered" />
+        </div>
+      `
+    },
+    {
+      id: 'InputCurrency',
+      name: {
+        en: 'Currency & number formatting',
+        ru: 'Валюта и форматирование чисел'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            type="currency"
+            label="Price (USD)"
+            currency="USD"
+          />
+          <DesignComponent
+            type="currency"
+            label="Price (USD)"
+            currency="USD"
+            value="1234.56"
+          />
+          <DesignComponent
+            type="currency"
+            label="Price (currency-hide)"
+            currency="EUR"
+            currency-hide
+            value="1234.56"
+          />
+        </div>
+      `
+    },
+    {
+      id: 'InputDate',
+      name: {
+        en: 'Date and time',
+        ru: 'Дата и время'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent type="date" label="Date" language="ru-RU" />
+          <DesignComponent type="datetime" label="Date and Time" language="en-US" />
+          <DesignComponent type="year-month" label="Period" language="ru-RU" />
+          <DesignComponent type="time" label="Time" />
+          <DesignComponent type="hour-minute" label="Hours:Minutes" />
+          <DesignComponent type="date" label="Limited Date" language="ru-RU" min="2024-01-01" max="2024-12-31" />
+        </div>
+      `
+    },
+    {
+      id: 'InputMask',
+      name: {
+        en: 'Masked input',
+        ru: 'Маскированный ввод'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent type="tel" mask="+1 (###) ###-####" placeholder="+1 (555) 000-0000" label="Phone" />
+          <DesignComponent type="text" mask="#### #### #### ####" placeholder="0000 0000 0000 0000" label="Card" />
+          <DesignComponent type="tel" mask="+1 (###) ###-####" :mask-visible="false" label="No placeholder" />
+        </div>
+      `
+    },
+    {
+      id: 'InputVModel',
+      name: {
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
+      },
+      setup: `
+      return {
+        inputValue: ref('Initial value'),
+        maskValue: ref(''),
+        numberValue: ref(42)
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="inputValue = 'Changed value'">Set text</button>
+            <button class="wiki-storybook-button" @click="inputValue = ''">Clear</button>
+          </div>
+          <DesignComponent
+            v-model="inputValue"
+            type="text"
+            label="Text input"
+            placeholder="Enter text"
+          />
+          <div>Value: {{ inputValue }}</div>
+
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="maskValue = '2022-05-13'">Set date</button>
+            <button class="wiki-storybook-button" @click="maskValue = ''">Clear</button>
+          </div>
+          <DesignComponent
+            v-model="maskValue"
+            type="date"
+            label="Date input"
+          />
+          <div>Mask: {{ maskValue }}</div>
+
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="numberValue += 10">+10</button>
+            <button class="wiki-storybook-button" @click="numberValue -= 10">-10</button>
+          </div>
+          <DesignComponent
+            v-model="numberValue"
+            type="number"
+            label="Number input"
+            :step="1"
+          />
+          <div>Number: {{ numberValue }}</div>
+        </div>
+      `
+    },
+    {
+      id: 'InputSkeleton',
+      name: {
+        en: 'Skeleton',
+        ru: 'Скелетон'
+      },
+      components: ['Skeleton'],
+      template: `
+        <DesignSkeleton :active="true" style="max-width:320px">
+          <div class="wiki-storybook-flex-column">
+            <DesignComponent
+              isSkeleton
+              label="Loading field"
+              helperMessage="This field is loading..."
+            />
+            <DesignComponent
+              isSkeleton
+              label="Another field"
+              counterShow
+            />
+          </div>
+        </DesignSkeleton>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Input'} type={'input'}/>
+
+<StorybookDescriptions componentName={'Input'} type={'type'}/>
+<Canvas of={Component.InputTypes}/>
+
+<StorybookDescriptions componentName={'Input'} type={'number'}/>
+<Canvas of={Component.InputNumber}/>
+
+<StorybookDescriptions componentName={'Input'} type={'currency'}/>
+<Canvas of={Component.InputCurrency}/>
+
+<StorybookDescriptions componentName={'Input'} type={'date'}/>
+<Canvas of={Component.InputDate}/>
+
+<StorybookDescriptions componentName={'Input'} type={'mask'}/>
+<Canvas of={Component.InputMask}/>
+
+<StorybookDescriptions componentName={'Value'} type={'value'}/>
+<StorybookDescriptions componentName={'Value'} type={'v-model'}/>
+<Canvas of={Component.InputVModel}/>
+
+<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>
+<Canvas of={Component.InputSkeleton}/>
+    `,
+    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'} />
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsList.ts

@@ -108,14 +108,10 @@ export const wikiDescriptionsList: StorybookComponentsDescriptionItem = {
     `,
     events: `
 <StorybookDescriptions componentName={'Event'} type={'click'}/>
-<StorybookDescriptions componentName={'Event'} type={'clickLite'}/>
 <StorybookDescriptions componentName={'List'} type={'event.close'}/>
     `,
     expose: `
-<StorybookDescriptions componentName={'Expose'} type={'isSelected'}/>
-<StorybookDescriptions componentName={'Expose'} type={'selectedList'}/>
-<StorybookDescriptions componentName={'Expose'} type={'selectedNames'}/>
-<StorybookDescriptions componentName={'Expose'} type={'selectedValues'}/>
+<StorybookDescriptions componentName={'Expose'} type={'selected'}/>
     `,
     slots: `
 <StorybookDescriptions componentName={'List'} type={'slot.html'}/>

package/src/media/descriptions/wikiDescriptionsListGroup.ts

@@ -70,11 +70,10 @@ export const wikiDescriptionsListGroup: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'ListGroup'} type={'listGroup'}/>
     `,
     expose: `
-<StorybookDescriptions componentName={'Window'} type={'expose.open'}/>
+<StorybookDescriptions componentName={'Expose'} type={'open'}/>
     `,
     slots: `
-<StorybookDescriptions componentName={'ListGroup'} type={'slot.head'}/>
-<StorybookDescriptions componentName={'ListGroup'} type={'slot.list'}/>
+<StorybookDescriptions componentName={'ListGroup'} type={'slots'}/>
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsListItem.ts

@@ -131,7 +131,6 @@ export const wikiDescriptionsListItem: StorybookComponentsDescriptionItem = {
     `,
     events: `
 <StorybookDescriptions componentName={'Event'} type={'click'}/>
-<StorybookDescriptions componentName={'Event'} type={'clickLite'}/>
     `,
     expose: `
 <StorybookDescriptions componentName={'Expose'} type={'value'}/>
@@ -143,8 +142,7 @@ export const wikiDescriptionsListItem: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'caption'}/>
 <StorybookDescriptions componentName={'Slot'} type={'suffix'}/>
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
-<StorybookDescriptions componentName={'ListItem'} type={'slot.trailing'}/>
-<StorybookDescriptions componentName={'ListItem'} type={'slot.body'}/>
+<StorybookDescriptions componentName={'ListItem'} type={'slots'}/>
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsListMenu.ts

@@ -68,17 +68,10 @@ export const wikiDescriptionsListMenu: StorybookComponentsDescriptionItem = {
 <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={'ListGroup'} type={'slot.head'}/>
-<StorybookDescriptions componentName={'ListGroup'} type={'slot.list'}/>
+<StorybookDescriptions componentName={'ListGroup'} type={'slots'}/>
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsMask.ts

@@ -214,6 +214,18 @@ export const wikiDescriptionsMask: StorybookComponentsDescriptionItem = {
 <Canvas of={Component.MaskDateTypes}/>
 
 <StorybookDescriptions componentName={'Mask'} type={'visible'}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Event'} type={'input'}/>
+<StorybookDescriptions componentName={'Event'} type={'beforeinput'}/>
+<StorybookDescriptions componentName={'Event'} type={'reset'}/>
+<StorybookDescriptions componentName={'Event'} type={'focus'}/>
+<StorybookDescriptions componentName={'Event'} type={'keyboard'}/>
+<StorybookDescriptions componentName={'Event'} type={'paste'}/>
+    `,
+    expose: `
+<StorybookDescriptions componentName={'Mask'} type={'expose'}/>
+<StorybookDescriptions componentName={'Expose'} type={'clear'}/>
     `
   }
 }

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,37 +134,77 @@ 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={'clickLite'}/>
-
 <StorybookDescriptions componentName={'Event'} type={'bars'}/>
-<StorybookDescriptions componentName={'Event'} type={'barsLite'}/>
-<StorybookDescriptions componentName={'Event'} type={'barsBack'}/>
-<StorybookDescriptions componentName={'Event'} type={'window'}/>
+<StorybookDescriptions componentName={'Menu'} type={'event.updateValue'}/>
+<StorybookDescriptions componentName={'Window'} type={'event.window'}/>
     `,
     expose: `
-<StorybookDescriptions componentName={'Expose'} type={'isSelected'}/>
-<StorybookDescriptions componentName={'Expose'} type={'selectedList'}/>
-<StorybookDescriptions componentName={'Expose'} type={'selectedNames'}/>
-<StorybookDescriptions componentName={'Expose'} type={'selectedValues'}/>
+<StorybookDescriptions componentName={'Expose'} type={'selected'}/>
+<StorybookDescriptions componentName={'Menu'} type={'expose.navigation'}/>
     `,
     slots: `
-<StorybookDescriptions componentName={'Menu'} type={'slot.control'}/>
-<StorybookDescriptions componentName={'Menu'} type={'slot.title'}/>
-<StorybookDescriptions componentName={'Menu'} type={'slot.footer'}/>
-<StorybookDescriptions componentName={'Menu'} type={'slot.contextTop'}/>
-<StorybookDescriptions componentName={'Menu'} type={'slot.contextBottom'}/>
 <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'}/>
+    `
+  }
+}