@dxtmisha/wiki 0.25.1 → 0.39.2

package/src/media/descriptions/wikiDescriptionsListGroup.ts

@@ -75,5 +75,25 @@ export const wikiDescriptionsListGroup: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'ListGroup'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <ListGroup v-bind="args">
+    <template #head="{ binds }">
+      <span v-bind="binds">head</span>
+    </template>
+    <template #list>
+      list
+    </template>
+  </ListGroup>
+</div>
+    `,
+    description: `
+Structural component for grouping related list items into collapsible/expandable hierarchies. Manages the visual nesting and visibility of child elements, providing organized categorization within dense lists.
+Features smooth height animations via MotionTransform and integrated header functionality with automatic arrow rotation. Exposes localized bindings in the #head slot to correctly link triggers with their collapsible content.
+Controlled via the open prop and utilizes #head and #list slots for content distribution. Use for navigation submenus, categorized data lists, or accordion-style expanding rows.
+    `,
+    hide: true
   }
 }

package/src/media/descriptions/wikiDescriptionsListItem.ts

@@ -49,16 +49,20 @@ export const wikiDescriptionsListItem: StorybookComponentsDescriptionItem = {
         ru: 'Базовые'
       },
       template: `
-        <DesignComponent>Simple Item</DesignComponent>
-        <DesignComponent icon="person">Item with Icon</DesignComponent>
-        <DesignComponent description="Additional information">Item with Description</DesignComponent>
-        <DesignComponent focus>Focus</DesignComponent>
-        <DesignComponent selected>Selected</DesignComponent>
-        <DesignComponent disabled>Disabled</DesignComponent>
-        <DesignComponent readonly>Readonly</DesignComponent>
-        <DesignComponent prefix="01" suffix="Info">With Prefix & Suffix</DesignComponent>
-        <DesignComponent caption="Caption" description="Description text here">Full Content</DesignComponent>
-        <DesignComponent icon="star" badge="new">Icon with Badge</DesignComponent>
+        <div class="wiki-storybook-group">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
+            <DesignComponent>Simple Item</DesignComponent>
+            <DesignComponent icon="person">Item with Icon</DesignComponent>
+            <DesignComponent description="Additional information">Item with Description</DesignComponent>
+            <DesignComponent focus>Focus</DesignComponent>
+            <DesignComponent selected>Selected</DesignComponent>
+            <DesignComponent disabled>Disabled</DesignComponent>
+            <DesignComponent readonly>Readonly</DesignComponent>
+            <DesignComponent prefix="01" suffix="Info">With Prefix & Suffix</DesignComponent>
+            <DesignComponent caption="Caption" description="Description text here">Full Content</DesignComponent>
+            <DesignComponent icon="star" badge="new">Icon with Badge</DesignComponent>
+          </div>
+        </div>
       `
     },
     {
@@ -68,10 +72,14 @@ export const wikiDescriptionsListItem: StorybookComponentsDescriptionItem = {
         ru: 'Выделение'
       },
       template: `
-        <DesignComponent highlight="search" label="Search result item"/>
-        <DesignComponent highlight="tex" :highlightLengthStart="3" label="Text with highlighting"/>
-        <DesignComponent highlight="te" :highlightLengthStart="3" label="Text without highlighting (too short)"/>
-        <DesignComponent highlight="example" :highlightLengthStart="2" label="Example text for highlighting"/>
+        <div class="wiki-storybook-group">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
+            <DesignComponent highlight="search" label="Search result item"/>
+            <DesignComponent highlight="tex" :highlightLengthStart="3" label="Text with highlighting"/>
+            <DesignComponent highlight="te" :highlightLengthStart="3" label="Text without highlighting (too short)"/>
+            <DesignComponent highlight="example" :highlightLengthStart="2" label="Example text for highlighting"/>
+          </div>
+        </div>
       `
     },
     {
@@ -81,10 +89,14 @@ export const wikiDescriptionsListItem: StorybookComponentsDescriptionItem = {
         ru: 'Заливка'
       },
       template: `
-        <DesignComponent label="Default fill"/>
-        <DesignComponent fill="#ff0000" label="Red fill"/>
-        <DesignComponent fill="rgb(0, 128, 255)" label="Blue fill"/>
-        <DesignComponent fill="rgba(255, 165, 0, 0.7)" label="Orange transparent fill"/>
+        <div class="wiki-storybook-group">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
+            <DesignComponent label="Default fill"/>
+            <DesignComponent fill="#ff0000" label="Red fill"/>
+            <DesignComponent fill="rgb(0, 128, 255)" label="Blue fill"/>
+            <DesignComponent fill="rgba(255, 165, 0, 0.7)" label="Orange transparent fill"/>
+          </div>
+        </div>
       `
     },
     {
@@ -144,5 +156,12 @@ export const wikiDescriptionsListItem: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
 <StorybookDescriptions componentName={'ListItem'} type={'slots'}/>
     `
+  },
+  ai: {
+    description: `
+Versatile structural component for rendering items within lists, menus, or navigation bars. Provides a standardized layout with high-density content support for labels, descriptions, and metadata.
+Features dedicated slots for prefix (leading), content (central), suffix (trailing metadata), and trailing (action indicators). Includes built-in support for icons, badges, selected states, and interactive feedback like ripple effects.
+Controlled via label, description, and href/to props; renders as an <a> tag when navigating. Use for building navigation menus, data-rich list rows, or simple clickable interactive elements.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsListMenu.ts

@@ -73,5 +73,25 @@ export const wikiDescriptionsListMenu: StorybookComponentsDescriptionItem = {
     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

@@ -227,5 +227,13 @@ export const wikiDescriptionsMask: StorybookComponentsDescriptionItem = {
 <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

@@ -206,5 +206,23 @@ export const wikiDescriptionsMenu: StorybookComponentsDescriptionItem = {
 <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.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsModal.ts

@@ -8,19 +8,19 @@ import type { StorybookComponentsDescriptionItem } from '../../types/storybookTy
 export const wikiDescriptionsModal: StorybookComponentsDescriptionItem = {
   name: 'Modal',
   description: {
-    en: 'Simplified wrapper over Window component for creating centered modal dialogs',
+    en: 'Simplified wrapper over a 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',
+      'close on the 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',
+      'close a button with a customizable icon',
+      'programmatic control via a v-model:open',
       'focus management and keyboard navigation',
       'responsive design with mobile optimization'
     ],
@@ -56,7 +56,7 @@ export const wikiDescriptionsModal: StorybookComponentsDescriptionItem = {
           <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>
+          <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 a Modal component.</p>
         </template>
       </DesignComponent>
     `,
@@ -73,11 +73,15 @@ export const wikiDescriptionsModal: StorybookComponentsDescriptionItem = {
       }
       `,
       template: `
-        <button class="wiki-storybook-button" @click="open = true">Open via v-model ({{ open }})</button>
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="open = true">Open via v-model ({{ open }})</button>
+          </div>
 
-        <DesignComponent v-model:open="open">
-          <div class="wiki-storybook-item--padding">Your content here</div>
-        </DesignComponent>
+          <DesignComponent v-model:open="open">
+            <div class="wiki-storybook-item--padding">Your content here</div>
+          </DesignComponent>
+        </div>
       `
     },
     {
@@ -92,31 +96,9 @@ export const wikiDescriptionsModal: StorybookComponentsDescriptionItem = {
             <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>
+          <template #title>Title slot</template>
+          <template #default>Default slot</template>
+          <template #footer>Footer slot</template>
         </DesignComponent>
       `
     }
@@ -141,5 +123,21 @@ export const wikiDescriptionsModal: StorybookComponentsDescriptionItem = {
 <Canvas of={Component.ModalAllSlots}/>
 <StorybookDescriptions componentName={'Window'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <Modal embedded open v-bind="args">
+    <template #default>
+      <p>This is a modal dialog.</p>
+    </template>
+  </Modal>
+</div>
+    `,
+    description: `
+Simplified wrapper over the Window component pre-configured for centered modal dialogs. Provides a high-level API for typical interaction patterns like confirmation prompts, info alerts, and data entry forms.
+Features automatic overlay management, background interaction blocking, and body scroll locking. Includes built-in focus trapping, Esc key dismissal, and responsive layout optimization (adaptive="modal") for consistent mobile and desktop UX.
+Controlled via the v-model:open prop and utilizes #control, #title, and #footer slots for modular layout. Use for critical user notifications, blocking confirmation steps, or focused sub-tasks requiring immediate attention.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsMotionAxis.ts

@@ -0,0 +1,196 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for MotionAxis component
+ *
+ * Описания компонента MotionAxis
+ */
+export const wikiDescriptionsMotionAxis: StorybookComponentsDescriptionItem = {
+  name: 'MotionAxis',
+  description: {
+    en: 'A component for organizing transitions between elements (slides). Allows animating content changes along X, Y, Z axes with slide effects. Supports automatic animation direction detection, container height management, and lazy loading (DOM).',
+    ru: 'Компонент для организации переходов между элементами (слайдами). Позволяет анимировать смену контента по осям X, Y, Z с эффектами сдвига. Поддерживает автоматическое определение направления анимации, управление высотой контейнера и ленивую загрузку (DOM).'
+  },
+  possibilities: {
+    en: [
+      'Slide transition animation along X, Y, Z axes',
+      'Automatic or manual direction control (next/back)',
+      'Smooth container height animation to fit content',
+      'Slide lifecycle management in DOM (inDom, inDomSlide)',
+      'Slot support for each slide'
+    ],
+    ru: [
+      'Анимация смены слайдов по осям X, Y, Z',
+      'Автоматическое или ручное управление направлением (вперед/назад)',
+      'Плавная анимация высоты контейнера под контент',
+      'Управление жизненным циклом слайдов в DOM (inDom, inDomSlide)',
+      'Поддержка слотов для каждого слайда'
+    ]
+  },
+  render: `
+    <DesignComponent v-bind="args">
+      <template #slide1>
+        <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
+        </div>
+      </template>
+      <template #slide2>
+        <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.</p>
+        </div>
+      </template>
+      <template #slide3>
+        <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.</p>
+          <p>Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+        </div>
+      </template>
+    </DesignComponent>
+`,
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  stories: [
+    {
+      id: 'MotionAxisBasic',
+      name: {
+        en: 'Basic Usage',
+        ru: 'Базовое использование'
+      },
+      setup: `
+      const selected = ref('slide1')
+      return { selected }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="selected = 'slide1'">1</button>
+            <button class="wiki-storybook-button" @click="selected = 'slide2'">2</button>
+            <button class="wiki-storybook-button" @click="selected = 'slide3'">3</button>
+          </div>
+
+          <DesignComponent :selected="selected">
+            <template #slide1>
+              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+                <p>Short content.</p>
+              </div>
+            </template>
+            <template #slide2>
+              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+                <p>Medium length content. This slide has a bit more text to demonstrate the transition.</p>
+              </div>
+            </template>
+            <template #slide3>
+              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+                <p>Long content. This slide contains significantly more text to demonstrate the smooth height animation capabilities of the MotionAxis component. It should expand the container height when active.</p>
+                <p>Additional paragraph for extra height.</p>
+              </div>
+            </template>
+          </DesignComponent>
+        </div>
+      `
+    },
+    {
+      id: 'MotionAxisScroll',
+      name: {
+        en: 'Scroll Management',
+        ru: 'Управление скроллом'
+      },
+      setup: `
+      const selected = ref('short')
+      return { selected }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column design-component__scroll">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="selected = 'short'">short</button>
+            <button class="wiki-storybook-button" @click="selected = 'long'">long</button>
+          </div>
+
+          <DesignComponent :selected="selected">
+            <template #short>
+              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+                Short content
+              </div>
+            </template>
+            <template #long>
+              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+                Long content that causes scrolling.<br>
+                Scroll down to see more.<br>
+                ...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>
+                End of content.
+              </div>
+            </template>
+          </DesignComponent>
+        </div>
+      `
+    },
+    {
+      id: 'MotionAxisVModel',
+      name: {
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
+      },
+      setup: `
+      const selected = ref('slide1')
+      return { selected }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex-align-center">
+            <span>Current value: {{ selected }}</span>
+            <button class="wiki-storybook-button" @click="selected = 'slide1'">Select Slide 1</button>
+            <button class="wiki-storybook-button" @click="selected = 'slide2'">Select Slide 2</button>
+            <button class="wiki-storybook-button" @click="selected = 'slide3'">Select Slide 3</button>
+          </div>
+
+          <DesignComponent v-model:selected="selected">
+            <template #slide1>
+              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+                Slide 1
+              </div>
+            </template>
+            <template #slide2>
+              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+                Slide 2
+              </div>
+            </template>
+            <template #slide3>
+              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+                Slide 3
+              </div>
+            </template>
+          </DesignComponent>
+        </div>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'MotionAxis'} type={'motionAxis'}/>
+<Canvas of={Component.MotionAxisBasic}/>
+
+<StorybookDescriptions componentName={'MotionAxis'} type={'classes'}/>
+<Canvas of={Component.MotionAxisScroll}/>
+
+<StorybookDescriptions componentName={'MotionAxis'} type={'v-model'}/>
+<Canvas of={Component.MotionAxisVModel}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'MotionAxis'} type={'events'}/>
+    `,
+    expose: `
+<StorybookDescriptions componentName={'MotionAxis'} type={'expose'}/>
+    `,
+    slots: `
+<StorybookDescriptions componentName={'MotionAxis'} type={'slots'}/>
+    `
+  },
+  ai: {
+    description: `
+Low-level layout component for animating transitions between multiple content areas (slides) along X, Y, or Z axes. Ideal for multi-step wizards, tabbed content, and gallery-like interfaces requiring direction-aware motion.
+Features automated animation direction detection (next/back), smooth container height transitions, and lazy loading support to manage slide life-cycles in the DOM. Supports horizontal slide, vertical flip, and depth-based transitions with customizable speed and easing.
+Controlled via the selected prop or v-model:selected, utilizing numbered slide slots (#slide1, #slide2, etc.) for content distribution. Use when content needs to transition within a fixed or dynamic container while maintaining high visual polish and spatial orientation.
+    `
+  }
+}