@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/descriptions/wikiDescriptionsChipGroup.ts

@@ -0,0 +1,168 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for ChipGroup component properties
+ *
+ * Описания свойств компонента ChipGroup
+ */
+export const wikiDescriptionsChipGroup: StorybookComponentsDescriptionItem = {
+  name: 'ChipGroup',
+  description: {
+    en: 'Container for managing a collection of chips with selection functionality',
+    ru: 'Контейнер для управления коллекцией чипов с функциональностью выбора'
+  },
+  possibilities: {
+    en: [
+      'single or multiple chip selection',
+      'dynamic list rendering from data',
+      'customizable chip appearance through chipAttrs',
+      'conditional icon display based on selection state',
+      'flexible data binding with keyLabel and keyValue',
+      'event handling for user interactions'
+    ],
+    ru: [
+      'одиночный или множественный выбор чипов',
+      'динамический рендеринг списка из данных',
+      'настраиваемый внешний вид чипов через chipAttrs',
+      'условное отображение иконок в зависимости от состояния выбора',
+      'гибкое связывание данных через keyLabel и keyValue',
+      'обработка событий для взаимодействия пользователя'
+    ]
+  },
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  stories: [
+    {
+      id: 'ChipGroupBasic',
+      name: {
+        en: 'Basic',
+        ru: 'Базовые'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Default</div>
+            <DesignComponent :list="['Option 1', 'Option 2', 'Option 3']"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">With icons</div>
+            <DesignComponent
+              :list="[
+                { label: 'Home', icon: 'home' },
+                { label: 'Star', icon: 'star' },
+                { label: 'Heart', icon: 'favorite' }
+              ]"
+            />
+          </div>
+        </div>
+      `
+    },
+    {
+      id: 'ChipGroupSelection',
+      name: {
+        en: 'Selection States',
+        ru: 'Состояния выбора'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Single selection</div>
+            <DesignComponent :list="['Option 1', 'Option 2', 'Option 3']" selected="2"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Multiple selection</div>
+            <DesignComponent :list="['Option 1', 'Option 2', 'Option 3', 'Option 4']" :selected="['2', '3']"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Icon when selected</div>
+            <DesignComponent
+              :list="[
+                { label: 'Option 1', icon: 'check', value: 'option1' },
+                { label: 'Option 2', icon: 'check', value: 'option2' },
+                { label: 'Option 3', icon: 'check', value: 'option3' }
+              ]"
+              :selected="['option2']"
+              :icon-when-selected="true"
+            />
+          </div>
+        </div>
+      `
+    },
+    {
+      id: 'ChipGroupVModel',
+      name: {
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
+      },
+      setup: `
+      return {
+        selectedValue: ref('option2'),
+        multipleSelected: ref(['option1', 'option3'])
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Selected: {{ selectedValue }}</div>
+            <div class="wiki-storybook-flex-column">
+              <DesignComponent
+                v-model:selected="selectedValue"
+                :list="[
+                  { label: 'Option 1', value: 'option1' },
+                  { label: 'Option 2', value: 'option2' },
+                  { label: 'Option 3', value: 'option3' }
+                ]"
+                :readonly="false"
+              />
+              <div class="wiki-storybook-flex">
+                <button class="wiki-storybook-button" @click="selectedValue = 'option1'">Select 1</button>
+                <button class="wiki-storybook-button" @click="selectedValue = 'option2'">Select 2</button>
+                <button class="wiki-storybook-button" @click="selectedValue = undefined">Clear</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Selected: {{ multipleSelected }}</div>
+            <div class="wiki-storybook-flex-column">
+              <DesignComponent
+                v-model:selected="multipleSelected"
+                :list="[
+                  { label: 'Option 1', value: 'option1', icon: 'check' },
+                  { label: 'Option 2', value: 'option2', icon: 'check' },
+                  { label: 'Option 3', value: 'option3', icon: 'check' }
+                ]"
+                :readonly="false"
+                :icon-when-selected="true"
+              />
+              <div class="wiki-storybook-flex">
+                <button class="wiki-storybook-button" @click="multipleSelected = ['option1', 'option2']">Select 1,2</button>
+                <button class="wiki-storybook-button" @click="multipleSelected = ['option1', 'option2', 'option3']">Add 3</button>
+                <button class="wiki-storybook-button" @click="multipleSelected = []">Clear all</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+    <StorybookDescriptions componentName={'ChipGroup'} type={'chipGroup'}/>
+    <Canvas of={Component.ChipGroupBasic}/>
+
+    <StorybookDescriptions componentName={'ChipGroup'} type={'selected'}/>
+    <Canvas of={Component.ChipGroupSelection}/>
+
+    <StorybookDescriptions componentName={'Value'} type={'v-model:selected'}/>
+    <Canvas of={Component.ChipGroupVModel}/>
+    `,
+    events: `
+    <StorybookDescriptions componentName={'Event'} type={'click'}/>
+    `,
+    slots: `
+    <StorybookDescriptions componentName={'Slot'} type={'default'}/>
+    `
+  }
+}

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

@@ -223,17 +223,16 @@ export const wikiDescriptionsField: StorybookComponentsDescriptionItem = {
     `,
     events: `
 <StorybookDescriptions componentName={'Event'} type={'click'}/>
-<StorybookDescriptions componentName={'Event'} type={'clickLite'}/>
     `,
     slots: `
 <Canvas of={Component.FieldSlots}/>
-<StorybookDescriptions componentName={'Slot'} type={'default'} />
-<StorybookDescriptions componentName={'Field'} type={'slot.leading'} />
-<StorybookDescriptions componentName={'Field'} type={'slot.trailing'} />
 <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'} />
+<StorybookDescriptions componentName={'Field'} type={'slots'} />
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsFieldCounter.ts

@@ -41,16 +41,16 @@ export const wikiDescriptionsFieldCounter: StorybookComponentsDescriptionItem =
       },
       template: `
         <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--center wiki-storybook-item--squared--md wiki-storybook-item--compact">
-            <div class="wiki-storybook-item__label">Default template</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">Default template</div>
             <DesignComponent :counter="75" :maxlength="150"/>
           </div>
-          <div class="wiki-storybook-item wiki-storybook-item--center wiki-storybook-item--squared--md wiki-storybook-item--compact">
-            <div class="wiki-storybook-item__label">Custom 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">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--center wiki-storybook-item--squared--md wiki-storybook-item--compact">
-            <div class="wiki-storybook-item__label">Counter only with template: "[c] chars"</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>

package/src/media/descriptions/wikiDescriptionsFieldMessage.ts

@@ -56,9 +56,8 @@ export const wikiDescriptionsFieldMessage: StorybookComponentsDescriptionItem =
 <StorybookDescriptions componentName={'FieldMessage'} type={'fieldMessage'}/>
     `,
     slots: `
-<StorybookDescriptions componentName={'FieldMessage'} type={'slot.helper'}/>
-<StorybookDescriptions componentName={'FieldMessage'} type={'slot.validation'}/>
 <Canvas of={Component.FieldMessageSlots}/>
+<StorybookDescriptions componentName={'FieldMessage'} 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>
       `
@@ -126,9 +158,13 @@ export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
   ],
   documentation: {
     body: `
+<StorybookDescriptions componentName={'Image'} type={'image'}/>
 <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}/>
 
@@ -139,8 +175,7 @@ export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Image'} type={'event.load'}/>
     `,
     expose: `
-<StorybookDescriptions componentName={'Image'} type={'expose.type'}/>
-<StorybookDescriptions componentName={'Image'} type={'expose.data'}/>
+<StorybookDescriptions componentName={'Image'} type={'expose'}/>
     `
   }
 }