@dxtmisha/wiki 0.24.3 → 0.25.1

package/src/media/descriptions/wikiDescriptionsDialog.ts

@@ -0,0 +1,182 @@
+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: `
+        <button class="wiki-storybook-button" @click="open = true">Open via v-model ({{ open }})</button>
+
+        <DesignComponent
+          v-model:open="open"
+          label="Confirmation"
+          description="Are you sure you want to proceed with this action?"
+        />
+      `
+    },
+    {
+      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'}/>
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsField.ts

@@ -230,6 +230,8 @@ export const wikiDescriptionsField: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'prefix'} />
 <StorybookDescriptions componentName={'Slot'} type={'suffix'} />
 <StorybookDescriptions componentName={'Slot'} type={'caption'} />
+<StorybookDescriptions componentName={'Slot'} type={'leading'} />
+<StorybookDescriptions componentName={'Slot'} type={'trailing'} />
 <StorybookDescriptions componentName={'Field'} type={'slots'} />
     `
   }

package/src/media/descriptions/wikiDescriptionsImage.ts

@@ -75,23 +75,55 @@ export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
         <div class="wiki-storybook-group">
           <div class="wiki-storybook-item wiki-storybook-item--squared--md">
             <div class="wiki-storybook-item__label">size: auto (default)</div>
-            <DesignComponent :value="image1" size="auto"/>
+            <DesignComponent :value="image1" size="auto" tag-img/>
           </div>
           <div class="wiki-storybook-item wiki-storybook-item--squared--md">
             <div class="wiki-storybook-item__label">size: contain</div>
-            <DesignComponent :value="image1" size="contain"/>
+            <DesignComponent :value="image1" size="contain" tag-img/>
           </div>
           <div class="wiki-storybook-item wiki-storybook-item--squared--md">
             <div class="wiki-storybook-item__label">size: cover</div>
-            <DesignComponent :value="image1" size="cover"/>
+            <DesignComponent :value="image1" size="cover" tag-img/>
           </div>
           <div class="wiki-storybook-item wiki-storybook-item--squared--md">
             <div class="wiki-storybook-item__label">coordinator</div>
-            <DesignComponent :value="image1" :coordinator="[60, 10, 10, 40]"/>
+            <DesignComponent :value="image1" :coordinator="[60, 10, 10, 40]" tag-img/>
           </div>
           <div class="wiki-storybook-item wiki-storybook-item--squared--md">
             <div class="wiki-storybook-item__label">x, y</div>
-            <DesignComponent :value="image1" x="20" y="-10"/>
+            <DesignComponent :value="image1" x="20%" y="-10%" tag-img/>
+          </div>
+        </div>
+      `
+    },
+    {
+      id: 'ImageTagImg',
+      name: {
+        en: 'Using img tag',
+        ru: 'Использование тега img'
+      },
+      setup: `
+      return {
+        image1
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-group">
+          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
+            <div class="wiki-storybook-item__label">Background (default)</div>
+            <DesignComponent :value="image1"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
+            <div class="wiki-storybook-item__label">tag-img + alt</div>
+            <DesignComponent :value="image1" tag-img alt="Example image"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
+            <div class="wiki-storybook-item__label">tag-img + lazy + srcset</div>
+            <DesignComponent :value="image1" tag-img lazy alt="Responsive image" :srcset="{ '1x': image1, '2x': image1 }"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
+            <div class="wiki-storybook-item__label">tag-img + picture</div>
+            <DesignComponent :value="image1" tag-img alt="Adaptive image" :picture="{ 768: image1, 1024: image1 }"/>
           </div>
         </div>
       `
@@ -118,7 +150,7 @@ export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
             <DesignComponent :value="phone2" adaptive object-width="71.9"/>
           </div>
           <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <DesignComponent :value="phone3" adaptive object-width="129.9"/>
+            <DesignComponent :value="phone3" adaptive object-width="129.9" tag-img/>
           </div>
         </div>
       `
@@ -130,6 +162,9 @@ export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Image'} type={'value'}/>
 <Canvas of={Component.ImageType}/>
 
+<StorybookDescriptions componentName={'Image'} type={'img-tag'}/>
+<Canvas of={Component.ImageTagImg}/>
+
 <StorybookDescriptions componentName={'Image'} type={'size'}/>
 <Canvas of={Component.ImageSize}/>
 

package/src/media/descriptions/wikiDescriptionsInput.ts

@@ -0,0 +1,257 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Input component
+ *
+ * Описания свойств компонента Input
+ */
+export const wikiDescriptionsInput: StorybookComponentsDescriptionItem = {
+  name: 'Input',
+  description: {
+    en: 'Text input field component with validation, masking and formatting support',
+    ru: 'Компонент текстового поля ввода с поддержкой валидации, маскирования и форматирования'
+  },
+  possibilities: {
+    en: [
+      'multiple input types: text, number, email, password, tel, url, date, time and more',
+      'built-in validation with custom messages',
+      'mask support for formatted input (phone, date, custom patterns)',
+      'currency and number formatting',
+      'password visibility toggle',
+      'prefix and suffix support',
+      'counter for character limits',
+      'navigation arrows for numeric and selection inputs',
+      'autocomplete, spellcheck and autocorrect support',
+      'integrated with Field component for consistent styling'
+    ],
+    ru: [
+      'множественные типы ввода: text, number, email, password, tel, url, date, time и другие',
+      'встроенная валидация с пользовательскими сообщениями',
+      'поддержка маскирования для форматированного ввода (телефон, дата, пользовательские паттерны)',
+      'форматирование валюты и чисел',
+      'переключатель видимости пароля',
+      'поддержка префикса и суффикса',
+      'счётчик для ограничения символов',
+      'стрелки навигации для числовых и выборочных полей',
+      'поддержка автозаполнения, проверки орфографии и автокоррекции',
+      'интегрирован с компонентом Field для единообразной стилизации'
+    ]
+  },
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  render: `
+      <DesignComponent v-bind="args" />
+    `,
+  stories: [
+    {
+      id: 'InputTypes',
+      name: {
+        en: 'Input types',
+        ru: 'Типы ввода'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent type="text" label="Text" placeholder="Enter text" />
+          <DesignComponent type="email" label="Email" placeholder="email@example.com" />
+          <DesignComponent type="password" label="Password" placeholder="Enter password" />
+          <DesignComponent type="number" label="Number" placeholder="0" />
+          <DesignComponent type="text" label="Phone" mask="+1 (***) ***-****" placeholder="+1 (555) 000-0000" />
+          <DesignComponent type="date" label="Date" />
+          <DesignComponent type="search" label="Search" placeholder="Search..." />
+        </div>
+      `
+    },
+    {
+      id: 'InputNumber',
+      name: {
+        en: 'Number formatting',
+        ru: 'Форматирование чисел'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent type="number" value="1234567" label="Number" />
+          <DesignComponent type="number-format" value="1234567" language="en-US" label="Formatted" />
+          <DesignComponent type="number" value="50" :min="0" :max="100" label="From 0 to 100" />
+          <DesignComponent type="number" value="10" arrow="stepper" :step="5" :arrow-step="10" label="Step 5/10" />
+          <DesignComponent type="number-format" value="1234567.89" align="center" :fraction="2" label="Centered" />
+        </div>
+      `
+    },
+    {
+      id: 'InputCurrency',
+      name: {
+        en: 'Currency & number formatting',
+        ru: 'Валюта и форматирование чисел'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            type="currency"
+            label="Price (USD)"
+            currency="USD"
+          />
+          <DesignComponent
+            type="currency"
+            label="Price (USD)"
+            currency="USD"
+            value="1234.56"
+          />
+          <DesignComponent
+            type="currency"
+            label="Price (currency-hide)"
+            currency="EUR"
+            currency-hide
+            value="1234.56"
+          />
+        </div>
+      `
+    },
+    {
+      id: 'InputDate',
+      name: {
+        en: 'Date and time',
+        ru: 'Дата и время'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent type="date" label="Date" language="ru-RU" />
+          <DesignComponent type="datetime" label="Date and Time" language="en-US" />
+          <DesignComponent type="year-month" label="Period" language="ru-RU" />
+          <DesignComponent type="time" label="Time" />
+          <DesignComponent type="hour-minute" label="Hours:Minutes" />
+          <DesignComponent type="date" label="Limited Date" language="ru-RU" min="2024-01-01" max="2024-12-31" />
+        </div>
+      `
+    },
+    {
+      id: 'InputMask',
+      name: {
+        en: 'Masked input',
+        ru: 'Маскированный ввод'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent type="tel" mask="+1 (###) ###-####" placeholder="+1 (555) 000-0000" label="Phone" />
+          <DesignComponent type="text" mask="#### #### #### ####" placeholder="0000 0000 0000 0000" label="Card" />
+          <DesignComponent type="tel" mask="+1 (###) ###-####" :mask-visible="false" label="No placeholder" />
+        </div>
+      `
+    },
+    {
+      id: 'InputVModel',
+      name: {
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
+      },
+      setup: `
+      return {
+        inputValue: ref('Initial value'),
+        maskValue: ref(''),
+        numberValue: ref(42)
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="inputValue = 'Changed value'">Set text</button>
+            <button class="wiki-storybook-button" @click="inputValue = ''">Clear</button>
+          </div>
+          <DesignComponent
+            v-model="inputValue"
+            type="text"
+            label="Text input"
+            placeholder="Enter text"
+          />
+          <div>Value: {{ inputValue }}</div>
+
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="maskValue = '2022-05-13'">Set date</button>
+            <button class="wiki-storybook-button" @click="maskValue = ''">Clear</button>
+          </div>
+          <DesignComponent
+            v-model="maskValue"
+            type="date"
+            label="Date input"
+          />
+          <div>Mask: {{ maskValue }}</div>
+
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="numberValue += 10">+10</button>
+            <button class="wiki-storybook-button" @click="numberValue -= 10">-10</button>
+          </div>
+          <DesignComponent
+            v-model="numberValue"
+            type="number"
+            label="Number input"
+            :step="1"
+          />
+          <div>Number: {{ numberValue }}</div>
+        </div>
+      `
+    },
+    {
+      id: 'InputSkeleton',
+      name: {
+        en: 'Skeleton',
+        ru: 'Скелетон'
+      },
+      components: ['Skeleton'],
+      template: `
+        <DesignSkeleton :active="true" style="max-width:320px">
+          <div class="wiki-storybook-flex-column">
+            <DesignComponent
+              isSkeleton
+              label="Loading field"
+              helperMessage="This field is loading..."
+            />
+            <DesignComponent
+              isSkeleton
+              label="Another field"
+              counterShow
+            />
+          </div>
+        </DesignSkeleton>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Input'} type={'input'}/>
+
+<StorybookDescriptions componentName={'Input'} type={'type'}/>
+<Canvas of={Component.InputTypes}/>
+
+<StorybookDescriptions componentName={'Input'} type={'number'}/>
+<Canvas of={Component.InputNumber}/>
+
+<StorybookDescriptions componentName={'Input'} type={'currency'}/>
+<Canvas of={Component.InputCurrency}/>
+
+<StorybookDescriptions componentName={'Input'} type={'date'}/>
+<Canvas of={Component.InputDate}/>
+
+<StorybookDescriptions componentName={'Input'} type={'mask'}/>
+<Canvas of={Component.InputMask}/>
+
+<StorybookDescriptions componentName={'Value'} type={'value'}/>
+<StorybookDescriptions componentName={'Value'} type={'v-model'}/>
+<Canvas of={Component.InputVModel}/>
+
+<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>
+<Canvas of={Component.InputSkeleton}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Event'} type={'input'}/>
+<StorybookDescriptions componentName={'Event'} type={'change'}/>
+    `,
+    slots: `
+<StorybookDescriptions componentName={'Slot'} type={'label'} />
+<StorybookDescriptions componentName={'Slot'} type={'prefix'} />
+<StorybookDescriptions componentName={'Slot'} type={'suffix'} />
+<StorybookDescriptions componentName={'Slot'} type={'caption'} />
+<StorybookDescriptions componentName={'Slot'} type={'leading'} />
+<StorybookDescriptions componentName={'Slot'} type={'trailing'} />
+    `
+  }
+}