@dxtmisha/wiki 0.24.3 → 0.39.1

package/src/media/descriptions/wikiDescriptionsAccordion.ts

@@ -0,0 +1,204 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Accordion component
+ *
+ * Описания свойств компонента Accordion
+ */
+export const wikiDescriptionsAccordion: StorybookComponentsDescriptionItem = {
+  name: 'Accordion',
+  description: {
+    en: 'Expandable container component that reveals and hides content with smooth animations',
+    ru: 'Раскрывающийся контейнерный компонент, который показывает и скрывает контент с плавными анимациями'
+  },
+  possibilities: {
+    en: [
+      'smooth expand/collapse animations via MotionTransform',
+      'composable header with label, description, and icons',
+      'automatic arrow rotation indicator',
+      'controlled or uncontrolled state management with v-model',
+      'divider line customization',
+      'custom cell attributes support',
+      'click event handling with custom data',
+      'flexible content slots for header and body'
+    ],
+    ru: [
+      'плавные анимации раскрытия/сворачивания через MotionTransform',
+      'композитная шапка с меткой, описанием и иконками',
+      'автоматический индикатор поворота стрелки',
+      'управление состоянием контролируемо или неконтролируемо через v-model',
+      'настройка линии разделителя',
+      'поддержка пользовательских атрибутов ячейки',
+      'обработка событий клика с пользовательскими данными',
+      'гибкие слоты контента для шапки и тела'
+    ]
+  },
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  render: `
+    <DesignComponent v-bind="args">
+      <template #default>
+        <p>Accordion content goes here. This section can contain any HTML elements, components, or text.</p>
+        <p>You can include multiple paragraphs, lists, and other structured content to demonstrate the accordion's flexibility and behavior.</p>
+        <ul>
+          <li>First example item with some details</li>
+          <li>Second example showing list formatting</li>
+          <li>Third item demonstrating nested content</li>
+        </ul>
+        <p>Additional text can be added to show how the accordion handles longer content with smooth animations and proper spacing.</p>
+        <div style="padding: 12px; background: #f5f5f5; border-radius: 4px; margin-top: 8px;">
+          <strong>Note:</strong> This is a highlighted section within the accordion body.
+        </div>
+        <p style="margin-top: 12px;">The accordion component automatically manages the height transitions and ensures all content is properly displayed when expanded.</p>
+      </template>
+    </DesignComponent>
+    <DesignComponent v-bind="args">
+      <template #default>
+        <h4 style="margin-top: 0;">Features Overview</h4>
+        <p>This accordion demonstrates different content types and layout possibilities:</p>
+        <ol>
+          <li>Numbered lists for sequential information</li>
+          <li>Headings for content structure</li>
+          <li>Mixed content types in a single container</li>
+        </ol>
+        <p>The component supports various HTML elements and maintains proper spacing throughout the animation cycle.</p>
+        <div style="display: flex; gap: 8px; margin-top: 12px;">
+          <span style="padding: 4px 8px; background: #e3f2fd; border-radius: 4px; font-size: 12px;">Tag 1</span>
+          <span style="padding: 4px 8px; background: #f3e5f5; border-radius: 4px; font-size: 12px;">Tag 2</span>
+          <span style="padding: 4px 8px; background: #e8f5e9; border-radius: 4px; font-size: 12px;">Tag 3</span>
+        </div>
+      </template>
+    </DesignComponent>
+    <DesignComponent v-bind="args">
+      <template #default>
+        <p>This is the third variant showing simplified content structure.</p>
+        <p>Accordion components support various content formats while maintaining consistent behavior.</p>
+        <h5>Key Features:</h5>
+        <ul>
+          <li>Flexible content layouts</li>
+          <li>Smooth animations</li>
+          <li>Easy customization</li>
+        </ul>
+      </template>
+    </DesignComponent>
+  `,
+  stories: [
+    {
+      id: 'AccordionVModel',
+      name: {
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
+      },
+      setup: `
+      return {
+        open: ref(false)
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-item--padding">
+          <button class="wiki-storybook-button" @click="open = !open">Toggle ({{ open }})</button>
+        </div>
+        <DesignComponent v-model:open="open" label="Settings" description="Click to expand" icon="settings">
+          <template #default>
+            <div class="wiki-storybook-item--padding">
+              <p>Content is {{ open ? 'visible' : 'hidden' }}</p>
+              <p>Using <code>v-model:open</code> provides a clean and declarative way to manage the accordion's state from the parent. It simplifies the logic by removing the need for manual event handling (<code>@update:open</code>) and prop binding (<code>:open</code>).</p>
+              <p>This two-way binding is ideal for scenarios where the parent component needs to know about and control the visibility of the accordion, such as in complex forms or coordinated UI interactions.</p>
+            </div>
+          </template>
+        </DesignComponent>
+      `
+    },
+    {
+      id: 'AccordionSlots',
+      name: {
+        en: 'Slots usage',
+        ru: 'Использование слотов'
+      },
+      template: `
+        <DesignComponent label="Default label" description="Default description" icon="settings">
+          <template #label>Custom label slot</template>
+          <template #description>Custom description slot</template>
+          <template #caption>Custom caption slot</template>
+          <template #trailing>Trailing slot</template>
+          <template #body>Body slot content</template>
+          <template #default>
+              <p>Custom default slot content (main accordion body)</p>
+          </template>
+        </DesignComponent>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Accordion'} type={'accordion'}/>
+
+<StorybookDescriptions componentName={'MotionTransform'} type={'v-model'}/>
+<Canvas of={Component.AccordionVModel}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Event'} type={'click'}/>
+<StorybookDescriptions componentName={'MotionTransform'} type={'events'}/>
+    `,
+    expose: `
+<StorybookDescriptions componentName={'MotionTransform'} type={'expose.isShow'}/>
+<StorybookDescriptions componentName={'Window'} type={'expose'}/>
+<StorybookDescriptions componentName={'MotionTransform'} type={'expose.motionTransformElement'}/>
+    `,
+    slots: `
+<Canvas of={Component.AccordionSlots}/>
+<StorybookDescriptions componentName={'Accordion'} type={'slots'}/>
+<StorybookDescriptions componentName={'Slot'} type={'label'}/>
+<StorybookDescriptions componentName={'Slot'} type={'caption'}/>
+<StorybookDescriptions componentName={'Slot'} type={'description'}/>
+<StorybookDescriptions componentName={'Cell'} type={'slots'}/>
+    `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <Accordion :open="true" :auto-close="false" v-bind="args">
+    <div class="wiki-storybook-item--padding">
+      Hidden content
+    </div>
+  </Accordion>
+</div>
+    `,
+    description: `
+Accordion is a vertically stacking interactive component that allows users to reveal or hide content sections.
+It consists of a header (trigger) and a body (content) that expands/collapses with a smooth animation.
+
+**Key Features:**
+1. **Header (Trigger):**
+   - Uses the \`Cell\` component structure.
+   - Supports \`label\` (title), \`description\` (subtitle), and \`icon\` (leading icon).
+   - Includes a rotating arrow indicator (\`iconArrowDown\`) to show state.
+
+2. **Animation:**
+   - Uses \`MotionTransform\` for smooth height transitions.
+   - Content is unmounted or hidden when collapsed (depending on configuration).
+
+3. **Interaction:**
+   - Toggles on click or keyboard interaction (Enter/Space).
+   - Controlled via \`v-model:open\`.
+
+**Usage Examples:**
+
+- **Basic:**
+  \`<Accordion label="Settings">
+     <p>Settings content...</p>
+   </Accordion>\`
+
+- **With Description and Icon:**
+  \`<Accordion label="Profile" description="Manage your account" icon="person">
+     <ProfileForm />
+   </Accordion>\`
+
+- **Controlled:**
+  \`<Accordion v-model:open="isOpen" label="Controlled">
+     Content
+   </Accordion>\`
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsActionSheet.ts

@@ -0,0 +1,264 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for ActionSheet component properties
+ *
+ * Описания свойств компонента ActionSheet
+ */
+export const wikiDescriptionsActionSheet: StorybookComponentsDescriptionItem = {
+  name: 'ActionSheet',
+  description: {
+    en: 'Mobile-optimized modal component for displaying a list of actions or choices that slide up from the bottom',
+    ru: 'Мобильно-оптимизированный модальный компонент для отображения списка действий или выборов, выдвигающийся снизу'
+  },
+  possibilities: {
+    en: [
+      'bottom-anchored modal panel with smooth slide-up animation',
+      'displays primary and secondary action lists',
+      'supports cancel button and custom actions',
+      'mobile-first design with touch-friendly interface',
+      'backdrop click to close functionality',
+      'keyboard accessibility support',
+      'integration with List and Actions components',
+      'customizable appearance and positioning',
+      'automatic height adjustment based on content',
+      'support for grouped actions with separators'
+    ],
+    ru: [
+      'модальная панель, закрепленная снизу, с плавной анимацией выдвижения',
+      'отображает основной и второстепенный списки действий',
+      'поддержка кнопки отмены и пользовательских действий',
+      'мобильно-ориентированный дизайн с удобным сенсорным интерфейсом',
+      'закрытие при клике на подложку',
+      'поддержка доступности с клавиатуры',
+      'интеграция с компонентами List и Actions',
+      'настраиваемый внешний вид и позиционирование',
+      'автоматическая подстройка высоты под контент',
+      'поддержка группировки действий с разделителями'
+    ]
+  },
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  render: `
+      <DesignComponent v-bind="args">
+        <template #control="{binds}">
+          <button class="wiki-storybook-button" v-bind="binds">Open Action Sheet</button>
+        </template>
+
+        <template #title>
+          Action Sheet Menu
+        </template>
+
+        <template #default>
+          <h4>Mobile Action Sheet Component</h4>
+          <p>The Action Sheet component provides a mobile-optimized interface for presenting users with a set of actions or choices. It slides up from the bottom of the screen, following familiar patterns from iOS and Material Design guidelines.</p>
+
+          <p>This component is particularly effective for contextual actions related to specific content, such as sharing options, editing tools, or destructive operations. The bottom-anchored design makes it easily accessible on mobile devices while maintaining a clear visual hierarchy.</p>
+
+          <h4>Key Features</h4>
+          <p>The Action Sheet includes support for primary and secondary action lists, allowing you to group related actions logically. It automatically handles touch interactions, backdrop dismissal, and keyboard accessibility, ensuring a consistent user experience across different input methods.</p>
+
+          <p>Integration with List and Actions components provides flexibility in content presentation, while the customizable appearance adapts seamlessly to different design systems and brand requirements. The component automatically adjusts its height based on content, preventing overflow issues while maintaining optimal usability.</p>
+        </template>
+      </DesignComponent>
+    `,
+  stories: [
+    {
+      id: 'ActionSheetVModel',
+      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: 'ActionSheetTouchClose',
+      name: {
+        en: 'Touch gesture to close',
+        ru: 'Закрытие жестом'
+      },
+      setup: `
+      return {
+        openWithTouch: ref(false),
+        openWithoutTouch: ref(false)
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-flex">
+          <button class="wiki-storybook-button" @click="openWithTouch = true">
+            With Touch Close ({{ openWithTouch }})
+          </button>
+          <button class="wiki-storybook-button" @click="openWithoutTouch = true">
+            Without Touch Close ({{ openWithoutTouch }})
+          </button>
+        </div>
+
+        <DesignComponent v-model:open="openWithTouch" :touchClose="true">
+          <template #title>
+            Swipe Down to Close
+          </template>
+          <template #default>
+            <div class="wiki-storybook-item--padding">
+              <div class="wiki-storybook-info">
+                <strong>Touch Close: Enabled</strong>
+                <p>This action sheet can be closed by swiping down on the title area. Notice the tab indicator at the top that signals the drag interaction.</p>
+                <p>Try swiping down on the header to close this panel. This follows iOS and Material Design patterns for mobile interfaces.</p>
+              </div>
+            </div>
+          </template>
+        </DesignComponent>
+
+        <DesignComponent v-model:open="openWithoutTouch" :touchClose="false">
+          <template #title>
+            No Swipe Gesture
+          </template>
+          <template #default>
+            <div class="wiki-storybook-item--padding">
+              <div class="wiki-storybook-info">
+                <strong>Touch Close: Disabled</strong>
+                <p>This action sheet cannot be closed by swiping down. The tab indicator is not displayed, and touch gestures are disabled.</p>
+                <p>You must use the backdrop click or close button to dismiss this panel. This is useful when you want to prevent accidental dismissal.</p>
+              </div>
+            </div>
+          </template>
+          <template #footer="{classesWindow}">
+            <button :class="classesWindow.close" class="wiki-storybook-button wiki-storybook-button--text">Close</button>
+          </template>
+        </DesignComponent>
+      `
+    },
+    {
+      id: 'ActionSheetAllSlots',
+      name: {
+        en: 'All slots demonstration',
+        ru: 'Демонстрация всех слотов'
+      },
+      template: `
+        <DesignComponent>
+          <template #control="{binds}">
+            <button class="wiki-storybook-button" v-bind="binds">Open Action Sheet with All Slots</button>
+          </template>
+
+          <template #title>
+            Action Sheet Title Slot
+          </template>
+
+          <template #default>
+            <div class="wiki-storybook-item--padding">
+              <h4>Default Slot Content</h4>
+              <p>This is the main content area of the action sheet. You can place any content here including action lists, forms, 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> - action sheet header/title area</li>
+                  <li><code>#default</code> - main content area</li>
+                  <li><code>#footer</code> - footer with actions or cancel button</li>
+                </ul>
+              </div>
+
+              <p>Each slot receives control props that allow you to interact with the action sheet programmatically, such as closing it or accessing window classes. The component slides up from the bottom with touch gesture support.</p>
+            </div>
+          </template>
+
+          <template #footer="{classesWindow}">
+            <div class="wiki-storybook-flex wiki-storybook-item--padding">
+              <button :class="classesWindow.close" class="wiki-storybook-button wiki-storybook-button--text">Cancel</button>
+              <button class="wiki-storybook-button">Confirm</button>
+            </div>
+          </template>
+        </DesignComponent>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'ActionSheet'} type={'actionSheet'}/>
+
+<StorybookDescriptions componentName={'ActionSheet'} type={'touchClose'}/>
+<Canvas of={Component.ActionSheetTouchClose}/>
+
+<StorybookDescriptions componentName={'Window'} type={'v-model'}/>
+<Canvas of={Component.ActionSheetVModel}/>
+
+<StorybookDescriptions componentName={'Modal'} type={'differences'}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Window'} type={'event.window'}/>
+<StorybookDescriptions componentName={'Event'} type={'bars'}/>
+    `,
+    expose: `
+<StorybookDescriptions componentName={'Window'} type={'expose'}/>
+    `,
+    slots: `
+<Canvas of={Component.ActionSheetAllSlots}/>
+<StorybookDescriptions componentName={'Window'} type={'slots'}/>
+    `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item" style="min-width: 800px;">
+  <ActionSheet embedded open v-bind="args">
+    <template #control="{ binds }">
+      <button v-bind="binds">Open Menu</button>
+    </template>
+    <template #default>Content goes here...</template>
+  </ActionSheet>
+</div>
+    `,
+    description: `
+ActionSheet is a mobile-optimized modal component that slides up from the bottom of the screen (Bottom Sheet).
+It is designed to present a set of actions, choices, or secondary content, following standard mobile interface patterns (iOS/Material).
+
+**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 & Animation:**
+   - Anchored to the bottom of the viewport.
+   - Slides up with an animation when opened.
+   - Renders a backdrop (overlay) to block background interactions.
+
+2. **Mobile Interactions:**
+   - **Touch Close:** Supports swiping down on the header to close the sheet (controlled by the \`touchClose\` prop).
+   - **Backdrop:** Clicking the overlay closes the sheet.
+   - **Scroll:** Automatically handles internal scrolling if content exceeds height.
+
+3. **Slots Structure:**
+   - \`#control\` - The trigger element (e.g., a button). Receives \`binds\` to toggle visibility.
+   - \`#title\` - The header area. Often contains the title and the drag handle (indicator).
+   - \`#default\` - The main content area.
+   - \`#footer\` - The bottom area, typically used for a "Cancel" button or primary actions.
+
+**Usage Examples:**
+
+- **With Trigger:**
+  \`<ActionSheet>
+     <template #control="{ binds }">
+       <button v-bind="binds">Open Menu</button>
+     </template>
+     <template #title>Select Option</template>
+     <template #default>
+       <p>List of options...</p>
+     </template>
+   </ActionSheet>\`
+
+- **Programmatic Control:**
+  \`<ActionSheet v-model:open="isOpen" touch-close>
+     <template #default>Content</template>
+   </ActionSheet>\`
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsActions.ts

@@ -0,0 +1,189 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Actions component properties
+ *
+ * Описания свойств компонента Actions
+ */
+export const wikiDescriptionsActions: StorybookComponentsDescriptionItem = {
+  name: 'Actions',
+  description: {
+    en: 'A flexible container component for organizing action buttons with primary and secondary groups, supporting various alignment options and adaptive behavior.',
+    ru: 'Гибкий компонент-контейнер для организации кнопок действий с основной и вторичной группами, поддерживающий различные варианты выравнивания и адаптивное поведение.'
+  },
+  possibilities: {
+    en: [
+      'Organizes action buttons into primary and secondary groups',
+      'Supports multiple alignment modes: left, right, center, block',
+      'Flexible layout that adapts to available space',
+      'Automatic spacing between button groups',
+      'Customizable button attributes for each group',
+      'Responsive behavior with adaptive breakpoints',
+      'Supports both array-based and slot-based button rendering'
+    ],
+    ru: [
+      'Организует кнопки действий в основные и вторичные группы',
+      'Поддерживает несколько режимов выравнивания: left, right, center, block',
+      'Гибкая раскладка, адаптирующаяся к доступному пространству',
+      'Автоматическое расстояние между группами кнопок',
+      'Настраиваемые атрибуты кнопок для каждой группы',
+      'Адаптивное поведение с точками перехода',
+      'Поддерживает рендеринг кнопок через массив и слоты'
+    ]
+  },
+  import: [],
+  stories: [
+    {
+      id: 'ActionsBasic',
+      name: {
+        en: 'Basic',
+        ru: 'Базовые'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Save', primary: true }
+            ]"
+          />
+        </div>
+      `
+    },
+    {
+      id: 'ActionsAlignment',
+      name: {
+        en: 'Alignment',
+        ru: 'Выравнивание'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            align="left"
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Save', primary: true }
+            ]"
+          />
+          <DesignComponent
+            align="center"
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Save', primary: true }
+            ]"
+          />
+          <DesignComponent
+            align="right"
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Save', primary: true }
+            ]"
+          />
+          <DesignComponent
+            align="block"
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Save', primary: true }
+            ]"
+          />
+        </div>
+      `
+    },
+    {
+      id: 'ActionsPrimarySecondary',
+      name: {
+        en: 'Primary & Secondary Groups',
+        ru: 'Основная и вторичная группы'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Save', primary: true }
+            ]"
+            :list-secondary="[
+              { label: 'Delete', text: true }
+            ]"
+          />
+        </div>
+      `
+    },
+    {
+      id: 'ActionsFlexible',
+      name: {
+        en: 'Flexible Layout',
+        ru: 'Гибкая раскладка'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            flexible="adaptive"
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Apply' },
+              { label: 'Save', primary: true }
+            ]"
+          />
+        </div>
+      `
+    },
+    {
+      id: 'ActionsCustomButtons',
+      name: {
+        en: 'Custom Button Styles',
+        ru: 'Пользовательские стили кнопок'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            :list="[
+              { label: 'Cancel', outlined: true },
+              { label: 'Save', primary: true }
+            ]"
+            :button-attrs="{ size: 'large' }"
+          />
+        </div>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Actions'} type={'actions'}/>
+<StorybookDescriptions componentName={'Actions'} type={'list'}/>
+<StorybookDescriptions componentName={'Actions'} type={'flexible'}/>
+    `,
+    slots: `
+<StorybookDescriptions componentName={'Slot'} type={'default'}/>
+<StorybookDescriptions componentName={'Slot'} type={'secondary'}/>
+    `
+  },
+  ai: {
+    description: `
+Actions is a layout component for organizing groups of buttons, typically used in dialog footers, card actions, or form controls.
+It manages spacing, alignment, and the separation between primary and secondary action groups.
+
+**Key Features:**
+1. **Groups:**
+   - \`list\`: Array of props for the main group of buttons (usually right-aligned or primary).
+   - \`listSecondary\`: Array of props for the secondary group (usually left-aligned).
+
+2. **Alignment (\`align\`):**
+   - \`left\`: Aligns all buttons to the left.
+   - \`center\`: Centers the buttons.
+   - \`right\`: Aligns all buttons to the right (default for dialogs).
+   - \`block\`: Stretches buttons to fill the width.
+
+3. **Button Configuration:**
+   - Items in \`list\` and \`listSecondary\` are passed directly to the \`Button\` component.
+   - \`buttonAttrs\`: Common props applied to all buttons in the main list.
+   - \`buttonSecondaryAttrs\`: Common props applied to all buttons in the secondary list.
+
+**Usage Examples:**
+
+- **Dialog Footer:** \`<Actions align="right" :list="[{ label: 'Cancel' }, { label: 'Ok', primary: true }]" />\`
+- **Split Actions:** \`<Actions :list="[{ label: 'Save' }]" :listSecondary="[{ label: 'Delete', text: true }]" />\` (Save on right, Delete on left)
+- **Full Width:** \`<Actions align="block" :list="[{ label: 'Login', primary: true }]" />\`
+      `
+  }
+}