@dxtmisha/wiki 0.39.2 → 0.39.4

package/src/media/descriptions/wikiDescriptionsListMenu.ts

@@ -1,97 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for ListMenu component properties
- *
- * Описания свойств компонента ListMenu
- */
-export const wikiDescriptionsListMenu: StorybookComponentsDescriptionItem = {
-  name: 'ListMenu',
-  description: {
-    en: 'Auxiliary component for the List component to create nested menus and organize navigation elements with expandable structure',
-    ru: 'Вспомогательный компонент для компонента List для создания вложенных меню и организации навигационных элементов с раскрывающейся структурой'
-  },
-  possibilities: {
-    en: [
-      'menu helper for List component navigation',
-      'expandable/collapsible submenu functionality',
-      'customizable menu header with icon support',
-      'automatic arrow icon rotation based on state',
-      'nested menu support for complex hierarchies',
-      'seamless integration with List ecosystem',
-      'keyboard navigation and accessibility',
-      'smooth animation transitions',
-      'flexible menu content management through slots'
-    ],
-    ru: [
-      'помощник меню для навигации компонента List',
-      'функциональность раскрывающихся/сворачивающихся подменю',
-      'настраиваемый заголовок меню с поддержкой иконок',
-      'автоматический поворот стрелки в зависимости от состояния',
-      'поддержка вложенных меню для сложных иерархий',
-      'бесшовная интеграция с экосистемой List',
-      'навигация с клавиатуры и поддержка доступности',
-      'плавные анимационные переходы',
-      'гибкое управление содержимым меню через слоты'
-    ]
-  },
-  render: `
-    <DesignComponent v-bind="args">
-      <template v-slot:head="{binds}">
-        <span v-bind="binds">Primary menu header with expand/collapse toggle</span>
-      </template>
-      <template v-slot:list>
-        <div class="wiki-storybook-item--padding">
-          <h4>Menu Content</h4>
-          <p>Navigation elements providing access to application sections.</p>
-
-          <ul>
-            <li><strong>Dashboard</strong> - Main control panel</li>
-            <li><strong>Content</strong> - Content management</li>
-            <li><strong>Analytics</strong> - Data analysis tools</li>
-          </ul>
-
-          <p>Supports nested submenus and adapts to user permissions.</p>
-        </div>
-      </template>
-    </DesignComponent>
-    `,
-  import: [],
-  stories: [],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'ListMenu'} type={'listMenu'}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Window'} type={'event.window'}/>
-
-<StorybookDescriptions componentName={'Image'} type={'event.load'}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'Window'} type={'expose'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'ListGroup'} type={'slots'}/>
-    `
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item">
-  <ListMenu embedded :window-attrs="{open: true}" v-bind="args">
-    <template #head="{ binds }">
-      <span v-bind="binds as any">head</span>
-    </template>
-    <template #list>
-      list
-    </template>
-  </ListMenu>
-</div>
-    `,
-    description: `
-Specialized wrapper component for creating dropdown menus or nested navigation trees. Utilizes dynamic window positioning to display a list of actions or sub-options relative to a trigger element.
-Features an adaptive menu preset managing visibility, positioning (popover vs inline), and interaction modes. Exposes standard binds in the #head slot to automate trigger setup and ensures smooth animations during state transitions.
-Controlled via the windowAttrs prop for positioning and utilizes #head and #list slots for trigger and content. Use for context menus, account settings dropdowns, or multi-level primary navigation links.
-    `,
-    hide: true
-  }
-}

package/src/media/descriptions/wikiDescriptionsMask.ts

@@ -1,239 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Mask component
- *
- * Описания компонента Mask
- */
-export const wikiDescriptionsMask: StorybookComponentsDescriptionItem = {
-  name: 'Mask',
-  description: {
-    en: 'Input masking utility for text, numbers, currency and dates with flexible patterns and validation.',
-    ru: 'Утилита маскирования ввода для текста, чисел, валют и дат с гибкими шаблонами и валидацией.'
-  },
-  possibilities: {
-    en: [
-      'string or multi-pattern masks (auto selection)',
-      'special symbols define input groups and literals are auto-inserted',
-      'per-group and global validation patterns',
-      'number / currency formats with grouping and fraction control',
-      'date/time helpers and locale-aware behavior'
-    ],
-    ru: [
-      'одиночные и множественные маски (автовыбор по вводу)',
-      'спецсимволы задают группы ввода, литералы подставляются автоматически',
-      'валидация по группам и глобально',
-      'форматы числа/валюты с группировкой и дробной частью',
-      'помощники для даты/времени и поведение с учётом локали'
-    ]
-  },
-  import: [],
-  render: `
-    <div class="wiki-storybook-group" >
-      <DesignComponent
-        class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding"
-        v-bind="args"
-      />
-    </div>
-    `,
-  stories: [
-    {
-      id: 'MaskBasic',
-      name: {
-        en: 'Mask Examples',
-        ru: 'Примеры масок'
-      },
-      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 wiki-storybook-item__label--static">Phone number format (+1 area code)</div>
-            <DesignComponent :mask="'+1 *** *** ** **'" placeholder="Enter phone number"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Auto format selection (multiple masks)</div>
-            <DesignComponent
-              :mask="['*** *** ***', '**** **** ****']"
-              placeholder="Auto format selection"
-            />
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'MaskSpecial',
-      name: {
-        en: 'Special Characters',
-        ru: 'Специальные символы'
-      },
-      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 wiki-storybook-item__label--static">Default special symbol (*)</div>
-            <DesignComponent :mask="'+7 *** *** ** **'" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Custom special symbol (X)</div>
-            <DesignComponent :mask="'XX.XX.XXXX'" special="X" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Multiple special symbols (*, #, X)</div>
-            <DesignComponent :mask="'***-###-XXX'" :special="['*', '#', 'X']" />
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'MaskValidation',
-      name: {
-        en: 'Validation',
-        ru: 'Валидация'
-      },
-      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 wiki-storybook-item__label--static">Pattern validation (6-9 digits only)</div>
-            <DesignComponent :mask="'*** *** ***'" pattern="[6-9]+" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Group-specific pattern (*, # groups)</div>
-            <DesignComponent :mask="'**:##'" :special="['*', '#']" :pattern="'[6-9]+'"/>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'MaskGroupSave',
-      name: {
-        en: 'Group navigation (groupSave)',
-        ru: 'Навигация по группам (groupSave)'
-      },
-      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 wiki-storybook-item__label--static">Smart navigation enabled (groupSave: true)</div>
-            <DesignComponent :mask="'****-####'" :special="['*', '#']" :groupSave="true" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Smart navigation disabled (groupSave: false)</div>
-            <DesignComponent :mask="'****-####'" :special="['*', '#']" :groupSave="false" />
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'MaskMatch',
-      name: {
-        en: 'Allowed characters (match)',
-        ru: 'Допустимые символы (match)'
-      },
-      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 wiki-storybook-item__label--static">HEX characters (0-9, A-F)</div>
-            <DesignComponent :mask="'***-***'" match="[A-F0-9]" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Letters only (A-Z, a-z)</div>
-            <DesignComponent :mask="'***-***'" match="[A-Za-z]" />
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'MaskNumberTypes',
-      name: {
-        en: 'Numeric types',
-        ru: 'Числовые типы'
-      },
-      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 wiki-storybook-item__label--static">Simple number</div>
-            <DesignComponent type="number" :fraction="2" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Formatted number with separators</div>
-            <DesignComponent type="number-format" language="ru" :fraction="2" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Currency (RUB)</div>
-            <DesignComponent type="currency" currency="RUB" language="ru" />
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'MaskDateTypes',
-      name: {
-        en: 'Date and time types',
-        ru: 'Типы дат и времени'
-      },
-      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 wiki-storybook-item__label--static">Full date (DD.MM.YYYY)</div>
-            <DesignComponent type="date" language="ru" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Date and time</div>
-            <DesignComponent type="datetime" language="ru" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Time only (HH:MM)</div>
-            <DesignComponent type="hour-minute" />
-          </div>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Mask'} type={'basic'}/>
-
-<StorybookDescriptions componentName={'Mask'} type={'mask'}/>
-<Canvas of={Component.MaskBasic}/>
-
-<StorybookDescriptions componentName={'Mask'} type={'special'}/>
-<Canvas of={Component.MaskSpecial}/>
-
-<StorybookDescriptions componentName={'Mask'} type={'groupSave'}/>
-<Canvas of={Component.MaskGroupSave}/>
-
-<StorybookDescriptions componentName={'Mask'} type={'match'}/>
-<Canvas of={Component.MaskMatch}/>
-
-<StorybookDescriptions componentName={'Mask'} type={'pattern'}/>
-<Canvas of={Component.MaskValidation}/>
-
-<StorybookDescriptions componentName={'Mask'} type={'type'}/>
-
-<StorybookDescriptions componentName={'Mask'} type={'numberTypes'}/>
-<Canvas of={Component.MaskNumberTypes}/>
-
-<StorybookDescriptions componentName={'Mask'} type={'dateTypes'}/>
-<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'}/>
-    `
-  },
-  ai: {
-    description: `
-Low-level input masking utility for controlling and formatting text, numeric, and date/time data entry. Intercepts input events to enforce strict patterns, automatically inserting literal characters and validating each keystroke against allowed rules.
-Features support for single or multiple patterns (auto-selection), specialized input types (currency, number-format), and locale-aware date/time validation. Includes granular control over allowed characters (match), decimal fractions, and value range constraints (min/max).
-Integrated primarily within the Input component; should generally not be used as a standalone element. Controlled via mask and type props, providing a foundation for phone numbers, credit card fields, and international financial inputs.
-    `,
-    hide: true
-  }
-}

package/src/media/descriptions/wikiDescriptionsMenu.ts

@@ -1,228 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Menu component properties
- *
- * Описания свойств компонента Menu
- */
-export const wikiDescriptionsMenu: StorybookComponentsDescriptionItem = {
-  name: 'Menu',
-  description: {
-    en: 'Composite menu that combines Window, Bars, and List for nested interactive navigation',
-    ru: 'Составной компонент, объединяющий Window, Bars и List для вложенной интерактивной навигации'
-  },
-  possibilities: {
-    en: [
-      'popup container from Window with control/title/footer slots',
-      'toolbar actions via Bars and hierarchical items via List',
-      'nested groups and menus with keyboard focus and selection',
-      'lightweight rendering for large menus (lite + liteThreshold)',
-      'custom fields mapping with keyLabel and keyValue',
-      'custom item attributes and container attributes (itemAttrs, listAttrs)'
-    ],
-    ru: [
-      'всплывающий контейнер из Window со слотами control/title/footer',
-      'действия панели через Bars и иерархия пунктов через List',
-      'вложенные группы и меню с фокусом с клавиатуры и выбором',
-      'облегчённый рендер для больших меню (lite + liteThreshold)',
-      'кастомное сопоставление полей через keyLabel и keyValue',
-      'настройка атрибутов пунктов и списка (itemAttrs, listAttrs)'
-    ]
-  },
-  import: [
-    'import { ref } from \'vue\''
-  ],
-  render: `
-    <DesignComponent v-bind="args">
-      <template #control="{binds}">
-        <button class="wiki-storybook-button" v-bind="binds">Open Menu</button>
-      </template>
-    </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: {
-        en: 'AJAX Loading',
-        ru: 'AJAX Загрузка'
-      },
-      setup: `
-        const loadMenuData = () => new Promise(resolve => setTimeout(() => resolve([
-          {label: 'Dashboard', value: 'dashboard', icon: 'dashboard'},
-          {label: 'Users', value: 'users', icon: 'people'},
-          {label: 'Settings', value: 'settings', icon: 'settings'},
-          {label: 'Reports', value: 'reports', icon: 'assessment'}
-        ]), 512))
-
-        return { loadMenuData }
-      `,
-      template: `
-        <DesignComponent :ajax="loadMenuData" selected="settings">
-          <template #control="{binds, loading}">
-            <button class="wiki-storybook-button" v-bind="binds">
-              Open AJAX Menu (loading: {{ loading }})
-            </button>
-          </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'}/>
-    `
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item">
-  <Menu embedded :window-attrs="{open: true}" v-bind="args">
-    <template #control="{ binds }">
-      <button class="wiki-storybook-button" v-bind="binds">
-        Open Menu
-      </button>
-    </template>
-  </Menu>
-</div>
-    `,
-    description: `
-Comprehensive navigational component that integrates a trigger (Control), a floating container (Window), and a structured dataset (List). Designed for multi-level menus, context-sensitive actions, and complex selection interfaces requiring icons or grouping.
-Features support for hierarchical data structures (nested submenus), real-time AJAX loading, and full keyboard accessibility. Includes sophisticated focus management, automatic positioning relative to the trigger, and a lite rendering mode for optimized performance with large lists.
-Controlled via the list prop for items and v-model:selected for state tracking. Use for user profile menus, sidebar navigation, or advanced select-like UI patterns where standard dropdowns lack sufficient structural flexibility.
-    `
-  }
-}