@dxtmisha/wiki 0.39.5 → 0.39.7

package/src/media/descriptions/wikiDescriptionsAccordion.ts

@@ -1,177 +0,0 @@
-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-flex-column">
-          <div class="wiki-storybook-flex">
-            <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>
-        </div>
-      `
-    },
-    {
-      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 #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: `
-Collapsible container for progressive disclosure. Toggles content visibility to manage space and cognitive load. Use for FAQs, grouped settings, hiding secondary info, or compact dashboards.
-Header is based on a Cell component and supports label, description, and icon. Features an auto-rotating arrow indicator and smooth height transitions via MotionTransform.
-Built-in ARIA support and keyboard navigation (Space/Enter). Controlled primarily via v-model:open. Customizable with divider and header attributes through cellAttrs.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsActionSheet.ts

@@ -1,148 +0,0 @@
-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: `
-        <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>
-        </div>
-      `
-    },
-    {
-      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>Title slot</template>
-          <template #default>Default slot</template>
-          <template #footer>Footer slot</template>
-        </DesignComponent>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'ActionSheet'} type={'actionSheet'}/>
-<StorybookDescriptions componentName={'ActionSheet'} type={'touchClose'}/>
-
-<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: `
-Mobile-optimized modal component (Bottom Sheet) that slides up from the bottom for actions, choices, or secondary content. Follows standard mobile interface patterns (iOS/Material).
-Features touch-gestures (swipe-down to close), backdrop dismissal, and keyboard accessibility. Includes primary/secondary action lists and automatic height adjustment based on content.
-Highly flexible with slots (#control, #title, #default, #footer) and controlled primarily via v-model:open. Use for mobile-focused menus, sharing options, or contextual actions.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsActions.ts

@@ -1,73 +0,0 @@
-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: 'ActionsSlots',
-      name: {
-        en: 'Slots usage',
-        ru: 'Использование слотов'
-      },
-      template: `
-        <DesignComponent>
-          <template #secondary>
-            Secondary Slot
-          </template>
-          <template #default>
-            Default Slot
-          </template>
-        </DesignComponent>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Actions'} type={'actions'}/>
-<StorybookDescriptions componentName={'Actions'} type={'list'}/>
-<StorybookDescriptions componentName={'Actions'} type={'flexible'}/>
-    `,
-    slots: `
-<Canvas of={Component.ActionsSlots}/>
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-<StorybookDescriptions componentName={'Slot'} type={'secondary'}/>
-    `
-  },
-  ai: {
-    description: `
-Layout container for action button groups, typically used in dialog footers, cards, or forms. Manages spacing, alignment, and separation between primary (main) and secondary action sets.
-Supports multiple alignments (left, center, right, block) and takes arrays of button props (list, listSecondary) to automatically render Button components.
-Features both array-based and slot-based rendering for maximum flexibility. Use for standardizing button layouts and ensuring consistent spacing.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsAnchor.ts

@@ -1,49 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Anchor component properties
- *
- * Описания свойств компонента Anchor
- */
-export const wikiDescriptionsAnchor: StorybookComponentsDescriptionItem = {
-  name: 'Anchor',
-  description: {
-    en: 'Component for creating hyperlinks or anchor points for navigation',
-    ru: 'Компонент для создания гиперссылок или якорных точек для навигации'
-  },
-  possibilities: {
-    en: [
-      'creating links to other pages or resources',
-      'creating anchor points for internal page navigation',
-      'support for icons and text',
-      'customizable appearance'
-    ],
-    ru: [
-      'создание ссылок на другие страницы или ресурсы',
-      'создание якорных точек для внутренней навигации по странице',
-      'поддержка иконок и текста',
-      'настраиваемый внешний вид'
-    ]
-  },
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Anchor'} type={'anchor'}/>
-<StorybookDescriptions componentName={'Anchor'} type={'isCopy'}/>
-<StorybookDescriptions componentName={'Anchor'} type={'hide'}/>
-<StorybookDescriptions componentName={'Anchor'} type={'scroll'}/>
-`,
-    expose: `
-<StorybookDescriptions componentName={'Anchor'} type={'expose.go'}/>
-`,
-    slots: `
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-`
-  },
-  ai: {
-    description: `
-Navigation component for creating hyperlinks, internal page anchors, and interactive links. Wraps the native <a> tag with additional support for smooth scrolling and clipboard operations.
-Features automated scroll-to-id behavior with custom offsets and a built-in copy-to-clipboard function (isCopy). Supports icon integration for different link types and success feedback.
-Controlled primarily through href or name props. Use for table of contents, permalinks, external resource links, or quick-copy action buttons for IDs and URLs.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsArrow.ts

@@ -1,193 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Arrow component properties
- *
- * Описания свойств компонента Arrow
- */
-export const wikiDescriptionsArrow: StorybookComponentsDescriptionItem = {
-  name: 'Arrow',
-  description: {
-    en: 'Component for displaying an arrow or directional indicator',
-    ru: 'Компонент для отображения стрелки или индикатора направления'
-  },
-  possibilities: {
-    en: [
-      'displaying directional arrows',
-      'customizable size and color',
-      'rotation support'
-    ],
-    ru: [
-      'отображение направляющих стрелок',
-      'настраиваемый размер и цвет',
-      'поддержка вращения'
-    ]
-  },
-  import: [
-    'import { ref } from \'vue\''
-  ],
-  render: `
-      <div class="wiki-storybook-item wiki-storybook-item--rectangle wiki-storybook-item--center">
-        <div>
-          <div
-            style="
-              width: 256px;
-              margin-bottom: 32px;
-              margin-left: 32px;
-            "
-          >
-            <div
-              id="id-arrow-target"
-              style="
-                padding: 8px;
-                width: min-content;
-                border-radius: 8px;
-                background-color: oklch(90.2% 0.063 306.703);
-              "
-            >
-              Target
-            </div>
-          </div>
-          <div
-            style="
-              position: relative;
-              width: 256px;
-              height: 128px;
-              border-radius: 16px;
-              background-color: oklch(93.2% 0.032 255.585);
-              border: 2px solid oklch(80.9% 0.105 251.813);
-              box-shadow: 0 0 8px oklch(0.281 0.092 268.132 / 0.32);
-            "
-          >
-            <DesignComponent v-bind="args"/>
-          </div>
-        </div>
-      </div>
-    `,
-  stories: [
-    {
-      id: 'ArrowBasic',
-      name: {
-        en: 'Basic',
-        ru: 'Базовые'
-      },
-      setup: `
-      const elementBasic = ref()
-      const elementTarget = ref()
-      const elementArray = ref()
-
-      const x = ref('0px')
-      const y = ref('0px')
-
-      const onClick = (event: PointerEvent) => {
-        if (elementBasic.value) {
-          const rect = elementBasic.value.getBoundingClientRect()
-          let offsetX = 0
-          let offsetY = 0
-
-          if (elementTarget.value) {
-            const targetRect = elementTarget.value.getBoundingClientRect()
-            offsetX = targetRect.width / 2
-            offsetY = targetRect.height / 2
-          }
-
-          x.value = (event.clientX - rect.left - offsetX) + 'px'
-          y.value = (event.clientY - rect.top - offsetY) + 'px'
-
-          requestAnimationFrame(() => elementArray.value?.update())
-        }
-      }
-
-      return {
-        elementBasic,
-        elementTarget,
-        elementArray,
-        x,
-        y,
-        onClick
-      }
-      `,
-      template: `
-        <div
-          class="wiki-storybook-item wiki-storybook-item--rectangle wiki-storybook-item--center"
-          style="cursor: crosshair;"
-          @click="onClick"
-        >
-          <div>
-            <div
-              style="
-              opacity: 0.5;
-              font-size: 14px;
-              margin-bottom: 8px;
-              text-align: center;
-            "
-            >
-              Click to move target
-            </div>
-            <div
-              ref="elementBasic"
-              style="
-              position: relative;
-              margin-bottom: 96px;
-              margin-left: 32px;
-              z-index: 32;
-            "
-            >
-              <div
-                ref="elementTarget"
-                id="id-arrow-target-2"
-                style="
-                position: absolute;
-                padding: 8px;
-                width: min-content;
-                border-radius: 8px;
-                background-color: oklch(90.2% 0.063 306.703);
-                text-wrap: nowrap;
-                pointer-events: none;
-              "
-                :style="{left: x, top: y}"
-              >
-                Target Element Example
-              </div>
-            </div>
-            <div
-              style="
-              position: relative;
-              width: 256px;
-              height: 128px;
-              border-radius: 16px;
-              background-color: oklch(93.2% 0.032 255.585);
-              border: 2px solid oklch(80.9% 0.105 251.813);
-              box-shadow: 0 0 8px oklch(0.281 0.092 268.132 / 0.32);
-            "
-            >
-              <DesignComponent
-                ref="elementArray"
-                position="auto"
-                element-target="#id-arrow-target-2"
-              />
-            </div>
-          </div>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Arrow'} type={'arrow'}/>
-<Canvas of={Component.ArrowBasic}/>
-`
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item" style="position: relative; width: 48px; height: 48px; background-color: oklch(93.2% 0.032 255.585);">
-    <Arrow position="top" v-bind="args"/>
-</div>
-    `,
-    description: `
-Functional directional indicator (pointer) designed to connect floating containers like tooltips, popovers, or menus with their target elements. Automatically calculates positioning and orientation to create a seamless speech-bubble or callout effect.
-Features smart auto-positioning logic, support for inverse directions, and automated style inheritance. It inherits background and border properties from its parent container (Window or custom wrapper) to ensure visual consistency without manual configuration.
-Ideal for enhanced spatial context in complex UIs. Use within floating components to clearly indicate the source of a message or action. Controlled via position and elementTarget props, with an exposed update method for manual synchronization.
-    `
-  }
-}