@dxtmisha/wiki 0.39.5 → 0.39.6

package/src/media/descriptions/wikiDescriptionsDialog.ts

@@ -1,198 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Dialog component properties
- *
- * Описания свойств компонента Dialog
- */
-export const wikiDescriptionsDialog: StorybookComponentsDescriptionItem = {
-  name: 'Dialog',
-  description: {
-    en: 'Modal dialog component for displaying alerts, confirmations, and informational messages with icon and action buttons',
-    ru: 'Модальный диалоговый компонент для отображения предупреждений, подтверждений и информационных сообщений с иконкой и кнопками действий'
-  },
-  possibilities: {
-    en: [
-      'modal dialog with centered positioning and backdrop',
-      'icon support with predefined success and error states',
-      'customizable title, description, and content areas',
-      'action buttons with OK and Close presets',
-      'image positioning (top or left alignment)',
-      'integration with Window, Bars, Actions, Icon components',
-      'close on ESC key and backdrop click',
-      'programmatic control via v-model:open',
-      'automatic icon switching based on success/error states',
-      'flexible content layout with information block',
-      'customizable footer with action buttons',
-      'keyboard accessibility and focus management',
-      'responsive design with mobile optimization',
-      'support for custom button configurations'
-    ],
-    ru: [
-      'модальный диалог с центрированием и подложкой',
-      'поддержка иконок с предустановленными состояниями успеха и ошибки',
-      'настраиваемые области заголовка, описания и контента',
-      'кнопки действий с пресетами OK и Закрыть',
-      'позиционирование изображения (сверху или слева)',
-      'интеграция с компонентами Window, Bars, Actions, Icon',
-      'закрытие по ESC и клику на подложку',
-      'программное управление через 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 Dialog</button>
-        </template>
-      </DesignComponent>
-    `,
-  stories: [
-    {
-      id: 'DialogStates',
-      name: {
-        en: 'Success and error states',
-        ru: 'Состояния успеха и ошибки'
-      },
-      setup: `
-      return {
-        openSuccess: ref(false),
-        openError: ref(false)
-      }
-      `,
-      template: `
-        <div class="wiki-storybook-flex">
-          <DesignComponent
-            :success="true"
-            label="Operation Successful"
-            description="Your changes have been saved successfully."
-          >
-            <template #control="{binds}">
-              <button class="wiki-storybook-button" v-bind="binds">Success Dialog</button>
-            </template>
-          </DesignComponent>
-
-          <DesignComponent
-            :error="true"
-            label="Operation Failed"
-            description="An error occurred while processing your request. Please try again."
-          >
-            <template #control="{binds}">
-              <button class="wiki-storybook-button" v-bind="binds">Error Dialog</button>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    },
-    {
-      id: 'DialogVModel',
-      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"
-            label="Confirmation"
-            description="Are you sure you want to proceed with this action?"
-          />
-        </div>
-      `
-    },
-    {
-      id: 'DialogAllSlots',
-      name: {
-        en: 'All slots demonstration',
-        ru: 'Демонстрация всех слотов'
-      },
-      template: `
-        <DesignComponent>
-          <template #control="{binds}">
-            <button class="wiki-storybook-button" v-bind="binds">Open Dialog with All Slots</button>
-          </template>
-
-          <template #title>
-            Title Slot
-          </template>
-
-          <template #label>
-            <strong>Label Slot</strong>
-          </template>
-
-          <template #description>
-            <em>Description Slot</em>
-          </template>
-
-          <template #default>
-            Default Slot
-          </template>
-
-          <template #footer="{classesWindow}">
-            Footer Slot
-          </template>
-        </DesignComponent>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Dialog'} type={'dialog'}/>
-
-<StorybookDescriptions componentName={'Dialog'} type={'states'}/>
-<Canvas of={Component.DialogStates}/>
-
-<StorybookDescriptions componentName={'Dialog'} type={'buttons'}/>
-
-<StorybookDescriptions componentName={'Window'} type={'v-model'}/>
-<Canvas of={Component.DialogVModel}/>
-
-<StorybookDescriptions componentName={'Modal'} type={'differences'}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Dialog'} type={'events'}/>
-<StorybookDescriptions componentName={'Dialog'} type={'event.dialog'}/>
-<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.DialogAllSlots}/>
-<StorybookDescriptions componentName={'Slot'} type={'label'}/>
-<StorybookDescriptions componentName={'Slot'} type={'description'}/>
-<StorybookDescriptions componentName={'Window'} type={'slots'}/>
-    `
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item">
-  <Dialog embedded open label="Dialog Title" description="This is a description text." v-bind="args"/>
-</div>
-    `,
-    description: `
-Specialized modal component for standardized user interactions such as alerts, confirmations, and status messages. Extends the Modal component with a predefined layout for icons, titles, and action buttons.
-Features built-in success/error states with automatic icon switching and content styling. Supports flexible positioning of images (top/left) and integrates with Window, Bars, and Actions for a consistent footer.
-Controlled via v-model:open and various content props (label, description). Use for critical operations requiring user confirmation, operation success/fail alerts, or informative system messages.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsDummy.ts

@@ -1,42 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Dummy component properties
- *
- * Описания свойств компонента Dummy
- */
-export const wikiDescriptionsDummy: StorybookComponentsDescriptionItem = {
-  name: 'Dummy',
-  description: {
-    en: 'A placeholder component used for structural presentation or testing',
-    ru: 'Компонент-заглушка, используемый для структурного представления или тестирования'
-  },
-  possibilities: {
-    en: [
-      'multiple sizes from extra small to 5xl',
-      'various color palettes'
-    ],
-    ru: [
-      'множественные размеры от очень маленького до 5xl',
-      'различные цветовые палитры'
-    ]
-  },
-  import: [],
-  stories: [],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Dummy'} type={'dummy'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-    `
-  },
-  ai: {
-    description: `
-Placeholder component used for structural presentation, testing, or laying out interfaces early in development. Provides a simple geometric shape to represent where a future component will be placed.
-Features configurable sizes (from 'xs' to '5xl') and customizable color palettes. Acts as a lightweight visual anchor without complex logic or dependencies.
-Controlled via size and palette props. Use during prototyping to define layout structures before final components are implemented or for testing responsive container behavior.
-    `,
-    hide: true
-  }
-}

package/src/media/descriptions/wikiDescriptionsField.ts

@@ -1,222 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Field component
- *
- * Описания свойств компонента Field
- */
-export const wikiDescriptionsField: StorybookComponentsDescriptionItem = {
-  name: 'Field',
-  description: {
-    en: 'Base container for form controls that composes label, messages, counter, icons and progress',
-    ru: 'Базовый контейнер для полей ввода, который собирает метку, сообщения, счётчик, иконки и прогресс'
-  },
-  possibilities: {
-    en: [
-      'composes FieldLabel, FieldMessage, FieldCounter, Progress and icon includes',
-      'handles states: focus, disabled, readonly, selected, block',
-      'supports prefix, suffix and caption slots',
-      'validation highlighting based on validationMessage and forceShowMessage',
-      'optional cancel and navigation (arrow) icons with visibility flags',
-      'counter position control with counterTop',
-      'integrated helpers for sizing and icons (FieldSize, FieldIcons)'
-    ],
-    ru: [
-      'композит из FieldLabel, FieldMessage, FieldCounter, Progress и включений иконок',
-      'обрабатывает состояния: focus, disabled, readonly, selected, block',
-      'поддерживает слоты prefix, suffix и caption',
-      'подсветка валидации на основе validationMessage и forceShowMessage',
-      'дополнительные иконки отмены и навигации (стрелки) с флагами видимости',
-      'управление позицией счётчика через counterTop',
-      'встроенные помощники для размеров и иконок (FieldSize, FieldIcons)'
-    ]
-  },
-  import: [],
-  render: `
-      <DesignComponent v-bind="args">
-        <template v-slot:default="{binds}">
-          <input :value="args.value" readonly v-bind="binds"/>
-        </template>
-      </DesignComponent>
-    `,
-  stories: [
-    {
-      id: 'FieldWidth',
-      name: {
-        en: 'Width',
-        ru: 'Ширина'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent label="auto">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent width="320px" label="320px">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent width="50%" label="50%">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent width="min(100%,320px)" label="min(...)" >
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="" readonly/>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    },
-    {
-      id: 'FieldCancel',
-      name: {
-        en: 'Cancel button',
-        ru: 'Кнопка очистки'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent cancel="auto" label="auto">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent cancel="auto" :cancel-show="true" label="auto + value">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="Value" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent cancel="always" label="always">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="" readonly/>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    },
-    {
-      id: 'FieldNavigation',
-      name: {
-        en: 'Navigation & arrows',
-        ru: 'Навигация / стрелки'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent arrow-carousel label="carousel (start)" :disabled-previous="true">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="Item 1" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent arrow-carousel label="carousel (end)" :disabled-next="true">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="Item 9" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent arrow-stepper align="center" label="stepper (center)">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="42" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent arrow-stepper label="stepper (prev off)" :disabled-previous="true">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="0" readonly/>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    },
-    {
-      id: 'FieldSkeleton',
-      name: {
-        en: 'Skeleton',
-        ru: 'Скелетон'
-      },
-      components: ['Skeleton'],
-      template: `
-        <DesignSkeleton :active="true" style="max-width:280px">
-          <DesignComponent isSkeleton label="Skeleton" counter="12" helper-message="Helper message: loading description.">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" readonly/>
-            </template>
-          </DesignComponent>
-        </DesignSkeleton>
-      `
-    },
-    {
-      id: 'FieldSlots',
-      name: {
-        en: 'Slots usage',
-        ru: 'Использование слотов'
-      },
-      template: `
-        <DesignComponent
-          :cancelShow="true"
-          label="Label prop"
-          icon="home"
-          icon-trailing="close"
-          value="Value"
-        >
-          <template #default="{id, className}">
-            <input :id="id" :class="className" value="Value" readonly/>
-          </template>
-          <template #leading>Leading slot</template>
-          <template #trailing>Trailing slot</template>
-          <template #label><b>Label slot</b></template>
-          <template #prefix>Prefix slot</template>
-          <template #suffix>Suffix slot</template>
-          <template #caption>Caption slot</template>
-        </DesignComponent>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Field'} type={'field'}/>
-
-<StorybookDescriptions componentName={'Field'} type={'value'}/>
-
-<StorybookDescriptions componentName={'Field'} type={'width'}/>
-<Canvas of={Component.FieldWidth}/>
-
-<StorybookDescriptions componentName={'Field'} type={'cancel'}/>
-<Canvas of={Component.FieldCancel}/>
-
-<StorybookDescriptions componentName={'Field'} type={'arrows'}/>
-<Canvas of={Component.FieldNavigation}/>
-
-<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>
-<Canvas of={Component.FieldSkeleton}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Event'} type={'click'}/>
-    `,
-    slots: `
-<Canvas of={Component.FieldSlots}/>
-<StorybookDescriptions componentName={'Slot'} type={'label'} />
-<StorybookDescriptions componentName={'Slot'} type={'prefix'} />
-<StorybookDescriptions componentName={'Slot'} type={'suffix'} />
-<StorybookDescriptions componentName={'Slot'} type={'caption'} />
-<StorybookDescriptions componentName={'Field'} type={'slots'} />
-    `
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item">
-  <Field label="Field Label" helper-message="Helper text" v-bind="args">
-    <template v-slot:default="{binds}">
-      <input :value="args.value" readonly v-bind="binds as any"/>
-    </template>
-  </Field>
-</div>
-    `,
-    description: `
-Foundational wrapper component for all form inputs. Provides the structural layout, styling, and state management for labels, helper messages, validation errors, icons, and progress indicators.
-Features a composable structure with prefix/suffix slots, leading/trailing icons, and a character counter. Automatically handles validation states, loading spinners, and disabled/readonly appearances.
-Integrates with native inputs via the #default slot, exposing essential bindings (id, class, aria) to maintain design consistency and accessibility. Use as a base when creating custom form controls.
-    `,
-    hide: true
-  }
-}

package/src/media/descriptions/wikiDescriptionsFieldCounter.ts

@@ -1,75 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for FieldCounter component properties
- *
- * Описания свойств компонента FieldCounter
- */
-export const wikiDescriptionsFieldCounter: StorybookComponentsDescriptionItem = {
-  name: 'FieldCounter',
-  description: {
-    en: 'Component for displaying character count and input length limits in form fields',
-    ru: 'Компонент для отображения счетчика символов и ограничений длины ввода в полях форм'
-  },
-  possibilities: {
-    en: [
-      'displays current character count',
-      'shows maximum character limit when specified',
-      'customizable display template with placeholders',
-      'automatic visibility based on counter and maxlength props',
-      'supports both string and number values',
-      'compact display format (e.g., "50 / 100")',
-      'template-based formatting with [c] and [m] placeholders'
-    ],
-    ru: [
-      'отображает текущее количество символов',
-      'показывает максимальное ограничение символов при указании',
-      'настраиваемый шаблон отображения с заполнителями',
-      'автоматическая видимость на основе свойств counter и maxlength',
-      'поддерживает значения как строк, так и чисел',
-      'компактный формат отображения (например, "50 / 100")',
-      'форматирование на основе шаблона с заполнителями [c] и [m]'
-    ]
-  },
-  import: [],
-  stories: [
-    {
-      id: 'FieldCounterTemplate',
-      name: {
-        en: 'Custom Template',
-        ru: 'Пользовательский шаблон'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md wiki-storybook-item--auto wiki-storybook-item--padding">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Default template</div>
-            <DesignComponent :counter="75" :maxlength="150"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md wiki-storybook-item--auto wiki-storybook-item--padding">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Custom template: "Characters: [c] of [m]"</div>
-            <DesignComponent :counter="75" :maxlength="150" template="Characters: [c] of [m]"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md wiki-storybook-item--auto wiki-storybook-item--padding">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Counter only with template: "[c] chars"</div>
-            <DesignComponent :counter="42" template="<b>[c]</b> chars"/>
-          </div>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'FieldCounter'} type={'fieldCounter'}/>
-<StorybookDescriptions componentName={'FieldCounter'} type={'templates'}/>
-<Canvas of={Component.FieldCounterTemplate}/>
-    `
-  },
-  ai: {
-    description: `
-Utility subcomponent for displaying character counts and input limits. Provides visual feedback to users and accessibility status to screen readers during formal data entry.
-Features customizable display templates with placeholders ([c] for counter, [m] for max) and automated visibility based on maxlength. Includes ARIA live region management for screen reader announcements.
-Integrated automatically into components like Input and Textarea; should generally not be used directly. Controlled via counter and maxlength props within the Field wrapper.
-    `,
-    hide: true
-  }
-}

package/src/media/descriptions/wikiDescriptionsFieldLabel.ts

@@ -1,46 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for FieldLabel component properties
- *
- * Описания свойств компонента FieldLabel
- */
-export const wikiDescriptionsFieldLabel: StorybookComponentsDescriptionItem = {
-  name: 'FieldLabel',
-  description: {
-    en: 'Component for displaying a field label and required marker; can be used together with counter and progress',
-    ru: 'Компонент для отображения метки поля и индикатора обязательности; может использоваться вместе со счетчиком и прогрессом'
-  },
-  possibilities: {
-    en: [
-      'renders a text label for form fields',
-      'shows required marker when the field is mandatory',
-      'works together with FieldCounter and Progress when passed as props',
-      'keeps consistent spacing and classes within form controls'
-    ],
-    ru: [
-      'рендерит текстовую метку для полей формы',
-      'показывает индикатор обязательности для обязательных полей',
-      'работает совместно со счетчиком FieldCounter и прогрессом при передаче соответствующих свойств',
-      'сохраняет согласованные отступы и классы внутри элементов формы'
-    ]
-  },
-  import: [],
-  stories: [],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'FieldLabel'} type={'fieldLabel'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'Slot'} type={'label'} />
-    `
-  },
-  ai: {
-    description: `
-Subcomponent of the Field wrapper responsible for rendering form field labels and required markers. Ensures consistent styling, positioning, and accessibility for all input headings.
-Features automated support for the "required" property (showing an asterisk) and works seamlessly with character counters and progress bars within the Field header.
-Controlled through the label prop or #label slot. Primarily used within Input, Textarea, and other field-based controls; should generally not be used as a standalone component.
-    `,
-    hide: true
-  }
-}

package/src/media/descriptions/wikiDescriptionsFieldMessage.ts

@@ -1,71 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for FieldMessage component properties
- *
- * Описания свойств компонента FieldMessage
- */
-export const wikiDescriptionsFieldMessage: StorybookComponentsDescriptionItem = {
-  name: 'FieldMessage',
-  description: {
-    en: 'Component for displaying helper and validation messages for form fields',
-    ru: 'Компонент для отображения вспомогательных и валидационных сообщений для полей форм'
-  },
-  possibilities: {
-    en: [
-      'shows helper text under the field',
-      'displays validation message when error occurs',
-      'visibility control via a dedicated force flag',
-      'works together with input fields and counters',
-      'supports HTML-safe rendering by design system'
-    ],
-    ru: [
-      'показывает вспомогательный текст под полем',
-      'отображает сообщение валидации при ошибке',
-      'управление видимостью через специальный флаг',
-      'работает совместно с полями ввода и счетчиками',
-      'поддерживает безопасный рендеринг HTML силами дизайн-системы'
-    ]
-  },
-  import: [],
-  stories: [
-    {
-      id: 'FieldMessageSlots',
-      name: {
-        en: 'Slots',
-        ru: 'Слоты'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent>
-            <template #helper>
-              <span><b>Helper:</b> You can use Latin letters</span>
-            </template>
-          </DesignComponent>
-          <DesignComponent>
-            <template #validation>
-              <span><b>Validation:</b> Please fill out this field</span>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'FieldMessage'} type={'fieldMessage'}/>
-    `,
-    slots: `
-<Canvas of={Component.FieldMessageSlots}/>
-<StorybookDescriptions componentName={'FieldMessage'} type={'slots'}/>
-    `
-  },
-  ai: {
-    description: `
-Subcomponent of the Field wrapper used to display informational text, validation errors, and character counters beneath input fields. Provides critical visual feedback regarding entry status or requirements.
-Features a priority system where validation messages override helper text when an error occurs. Includes automatic status styling (red for errors) and integration with the character counter logic.
-Controlled via helperMessage and validationMessage props; linked automatically to the input via ARIA attributes. Primarily used within Field-based components; should generally not be used directly.
-    `,
-    hide: true
-  }
-}