@dxtmisha/wiki 0.24.3 → 0.39.1

package/src/media/descriptions/wikiDescriptionsMask.ts

@@ -227,5 +227,47 @@ export const wikiDescriptionsMask: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Mask'} type={'expose'}/>
 <StorybookDescriptions componentName={'Expose'} type={'clear'}/>
     `
+  },
+  ai: {
+    description: `
+ **Note:** This component is already integrated into the \`Input\` component and should not be used directly.
+
+ Mask is a low-level utility component responsible for controlling and formatting user input. It ensures that the data entered matches a predefined structure (mask) or data type (date, number, currency).
+
+ **How it works:**
+ The component intercepts input events (\`beforeinput\`, \`input\`) and validates each character against allowed patterns (\`match\`). It automatically inserts static characters defined in the \`mask\` (like parentheses, dashes) and skips over them during navigation. For complex types like \`date\` or \`number\`, it uses internal logic to validate ranges (e.g., month 1-12) and format values (e.g., adding thousands separators).
+
+ **Key Properties & Usage:**
+
+ 1. **Masking (\`mask\`):**
+    - **String:** A single pattern (e.g., \`+1 (***) ***-****\`). The \`*\` character (or value of \`special\`) represents an input slot. All other characters are treated as static literals and are automatically inserted/skipped.
+    - **Array:** A list of patterns (e.g., \`['(***) ***-****', '+1 (***) ***-****']\`). The component automatically selects the most appropriate mask based on the input length.
+
+ 2. **Input Types (\`type\`):**
+    - \`text\` (default): Uses the \`mask\` pattern directly.
+    - \`number\`: Formats input as a number. Automatically adds thousands separators based on \`language\`.
+    - \`currency\`: Formats as currency. Requires \`currency\` prop (e.g., 'USD'). Uses \`fraction\` for decimal places.
+    - \`date\` / \`datetime\` / \`time\`: Enforces valid date/time entry. The format (e.g., DD.MM.YYYY vs MM/DD/YYYY) is determined by the \`language\` prop.
+
+ 3. **Validation & Constraints:**
+    - \`match\`: A Regular Expression string (e.g., \`[0-9a-fA-F]\`). Only characters matching this pattern are accepted. Useful for Hex codes, alphanumeric IDs, etc.
+    - \`pattern\`: A Regex for validating the *completed* value.
+    - \`min\`, \`max\`: For number/currency types, restricts the value range.
+
+ 4. **Customization:**
+    - \`special\`: Defines the placeholder character in the \`mask\`. Default is \`*\`. Change this if your mask needs to contain literal asterisks.
+    - \`language\`: Determines locale-specific formatting for dates and numbers (separators, date order).
+    - \`fraction\`: Specifies the number of decimal places for numbers/currency.
+
+ **When to use (Design Identification):**
+ - **Formatted Text:** Inputs that require specific formatting like Phone Numbers \`+1 (555) ...\`, Credit Cards \`0000 0000 ...\`, or License Plates.
+ - **Financial Data:** Inputs for amounts that need thousands separators or currency symbols.
+ - **Dates:** Inputs requiring strict date structure (DD.MM.YYYY).
+
+ **Example Scenarios:**
+ - **Phone:** \`<Mask mask="+1 (***) ***-****" match="[0-9]"/>\`
+ - **Price:** \`<Mask type="currency" currency="USD" fraction="2"/>\`
+ - **Date:** \`<Mask type="date" language="en-GB"/>\` (DD/MM/YYYY)
+     `
   }
 }

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,26 +134,133 @@ 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'}/>
     `
+  },
+  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: `
+Menu is a comprehensive dropdown component used for navigation, actions, and selection.
+It combines a trigger (Control), a popup container (Window), and a structured list (List).
+
+**Key Features:**
+1. **Structure:**
+   - **Control Slot (\`#control\`):** The trigger element (e.g., Button, Avatar). Receives \`binds\` (click/keydown handlers) which **must** be applied.
+   - **Popup:** Opens a floating window positioned relative to the trigger.
+   - **Content:** Renders a list of items defined in the \`list\` prop.
+
+2. **Data Model (\`list\` prop):**
+   - Array of objects: \`{ label, value, icon, disabled, to, ... }\`.
+   - Supports special types: \`line\` (separator), \`group\` (headers), \`menu\` (nested submenus).
+
+3. **Interaction:**
+   - **Selection:** Tracks selected values via \`v-model:selected\`.
+   - **Navigation:** Supports keyboard navigation (Arrows, Enter, Esc).
+   - **Async:** Can load data dynamically using the \`ajax\` prop.
+
+**When to use:**
+- **Dropdown Menus:** For user profile menus, settings, or navigation.
+- **Context Menus:** For right-click actions.
+- **Select-like UI:** When a standard select is not enough (needs icons, groups, custom rendering).
+
+**Usage Examples:**
+
+- **Basic Menu:**
+  \`<Menu :list="[{ label: 'Item 1' }, { label: 'Item 2' }]">
+     <template #control="{ binds }">
+       <button v-bind="binds">Options</button>
+     </template>
+   </Menu>\`
+
+- **With Selection:**
+  \`<Menu
+     v-model:selected="currentValue"
+     :list="options"
+   >
+     <template #control="{ binds }">
+       <button v-bind="binds">Select: {{ currentValue }}</button>
+     </template>
+   </Menu>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsModal.ts

@@ -0,0 +1,200 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Modal component properties
+ *
+ * Описания свойств компонента Modal
+ */
+export const wikiDescriptionsModal: StorybookComponentsDescriptionItem = {
+  name: 'Modal',
+  description: {
+    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 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 a button with a customizable icon',
+      'programmatic control via a 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 a 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'}/>
+    `
+  },
+  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: `
+Modal is a simplified wrapper over the Window component for creating centered modal dialogs.
+It is designed to handle standard use cases for pop-ups, alerts, and forms with minimal configuration.
+
+**Note:** The \`embedded\` prop is used only for documentation examples to render the component inline. Do not use it in production code.
+
+**Key Features:**
+1. **Positioning & Overlay:**
+   - Always centered on the screen.
+   - Renders a backdrop (overlay) to block background interactions.
+   - Preset \`adaptive="modal"\` ensures correct behavior on all devices.
+
+2. **State Management:**
+   - Controlled via \`v-model:open\` (boolean).
+   - Automatically manages focus and scroll locking on the body.
+
+3. **Slots Structure:**
+   - \`#control\`: The trigger element (e.g., button). Receives \`binds\` (click handlers) to automatically toggle the modal.
+   - \`#title\`: The header area of the modal.
+   - \`#default\`: The main content body.
+   - \`#footer\`: The footer area, typically for action buttons.
+
+4. **User Interaction:**
+   - Closes on ESC key press.
+   - Closes on clicking outside the modal (backdrop).
+   - Supports a close button in the header.
+
+**Usage Examples:**
+
+- **With Trigger Button:**
+  \`<Modal>
+     <template #control="{ binds }">
+       <button v-bind="binds">Open Modal</button>
+     </template>
+     <template #default>
+       <p>Are you sure?</p>
+     </template>
+   </Modal>\`
+
+- **Programmatic Control:**
+  \`<Modal v-model:open="showModal">
+     <p>Content...</p>
+   </Modal>\`
+    `
+  }
+}

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,14 +203,67 @@ 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'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <MotionTransform :auto-close="false" v-bind="args">
+    <template #head>
+      <button class="wiki-storybook-button">Toggle Content</button>
+    </template>
+    <template #body>
+      <div class="wiki-storybook-item--padding">
+        <p>Expandable content goes here.</p>
+      </div>
+    </template>
+  </MotionTransform>
+</div>
+    `,
+    description: `
+MotionTransform is a core utility component for creating expanding, collapsing, or floating UI elements with smooth animations.
+It serves as the base for Dropdowns, Accordions, and custom interactive panels.
+
+**Key Features:**
+1. **Structure:**
+   - \`#head\`: The trigger area (e.g., a button or title).
+   - \`#body\`: The content area that animates in/out.
+
+2. **Animation Logic:**
+   - Automatically handles height calculations for smooth CSS transitions (expand/collapse).
+   - \`animationHeadPosition\`: Controls the visual flow (e.g., \`top\` for standard dropdowns, \`toBottom\` for specific motion effects).
+
+3. **Positioning & Teleport:**
+   - **Inline (Default):** Content expands within the flow (Accordion style).
+   - **Teleported:** With \`teleport\`, content moves to the \`<body>\` tag, useful for floating menus/popups that need to overlay other content.
+
+4. **Interaction:**
+   - \`clickOpen\`: Toggles state when clicking the head.
+   - \`autoClose\`: Closes when clicking outside the component.
+   - \`ignore\`: Selectors to exclude from the "click outside" check.
+
+**When to use:**
+- **Accordion/Collapse:** When clicking a header should push content down.
+- **Dropdown/Menu:** When clicking a button should show a floating list (use with \`teleport\`).
+- **Custom Toggles:** Any UI pattern requiring show/hide transitions.
+
+**Usage Examples:**
+
+- **Accordion:**
+  \`<MotionTransform click-open>
+     <template #head>Title</template>
+     <template #body>Content</template>
+   </MotionTransform>\`
+
+- **Floating Menu:**
+  \`<MotionTransform teleport auto-close>
+     <template #head><button>Options</button></template>
+     <template #body><menu>...</menu></template>
+   </MotionTransform>\`
+    `
   }
 }