@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/descriptions/wikiDescriptionsActions.ts

@@ -0,0 +1,161 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Actions component properties
+ *
+ * Описания свойств компонента Actions
+ */
+export const wikiDescriptionsActions: StorybookComponentsDescriptionItem = {
+  name: 'Actions',
+  description: {
+    en: 'A flexible container component for organizing action buttons with primary and secondary groups, supporting various alignment options and adaptive behavior.',
+    ru: 'Гибкий компонент-контейнер для организации кнопок действий с основной и вторичной группами, поддерживающий различные варианты выравнивания и адаптивное поведение.'
+  },
+  possibilities: {
+    en: [
+      'Organizes action buttons into primary and secondary groups',
+      'Supports multiple alignment modes: left, right, center, block',
+      'Flexible layout that adapts to available space',
+      'Automatic spacing between button groups',
+      'Customizable button attributes for each group',
+      'Responsive behavior with adaptive breakpoints',
+      'Supports both array-based and slot-based button rendering'
+    ],
+    ru: [
+      'Организует кнопки действий в основные и вторичные группы',
+      'Поддерживает несколько режимов выравнивания: left, right, center, block',
+      'Гибкая раскладка, адаптирующаяся к доступному пространству',
+      'Автоматическое расстояние между группами кнопок',
+      'Настраиваемые атрибуты кнопок для каждой группы',
+      'Адаптивное поведение с точками перехода',
+      'Поддерживает рендеринг кнопок через массив и слоты'
+    ]
+  },
+  import: [],
+  stories: [
+    {
+      id: 'ActionsBasic',
+      name: {
+        en: 'Basic',
+        ru: 'Базовые'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Save', primary: true }
+            ]"
+          />
+        </div>
+      `
+    },
+    {
+      id: 'ActionsAlignment',
+      name: {
+        en: 'Alignment',
+        ru: 'Выравнивание'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            align="left"
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Save', primary: true }
+            ]"
+          />
+          <DesignComponent
+            align="center"
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Save', primary: true }
+            ]"
+          />
+          <DesignComponent
+            align="right"
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Save', primary: true }
+            ]"
+          />
+          <DesignComponent
+            align="block"
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Save', primary: true }
+            ]"
+          />
+        </div>
+      `
+    },
+    {
+      id: 'ActionsPrimarySecondary',
+      name: {
+        en: 'Primary & Secondary Groups',
+        ru: 'Основная и вторичная группы'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Save', primary: true }
+            ]"
+            :list-secondary="[
+              { label: 'Delete', text: true }
+            ]"
+          />
+        </div>
+      `
+    },
+    {
+      id: 'ActionsFlexible',
+      name: {
+        en: 'Flexible Layout',
+        ru: 'Гибкая раскладка'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            flexible="adaptive"
+            :list="[
+              { label: 'Cancel' },
+              { label: 'Apply' },
+              { label: 'Save', primary: true }
+            ]"
+          />
+        </div>
+      `
+    },
+    {
+      id: 'ActionsCustomButtons',
+      name: {
+        en: 'Custom Button Styles',
+        ru: 'Пользовательские стили кнопок'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            :list="[
+              { label: 'Cancel', outlined: true },
+              { label: 'Save', primary: true }
+            ]"
+            :button-attrs="{ size: 'large' }"
+          />
+        </div>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Actions'} type={'actions'}/>
+<StorybookDescriptions componentName={'Actions'} type={'list'}/>
+<StorybookDescriptions componentName={'Actions'} type={'flexible'}/>
+    `,
+    slots: `
+<StorybookDescriptions componentName={'Slot'} type={'default'}/>
+<StorybookDescriptions componentName={'Slot'} type={'secondary'}/>
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsAnchor.ts

@@ -0,0 +1,42 @@
+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'}/>
+`
+  }
+}

package/src/media/descriptions/wikiDescriptionsArrow.ts

@@ -0,0 +1,181 @@
+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}/>
+`
+  }
+}

package/src/media/descriptions/wikiDescriptionsBars.ts

@@ -130,13 +130,11 @@ export const wikiDescriptionsBars: StorybookComponentsDescriptionItem = {
     `,
     events: `
 <StorybookDescriptions componentName={'Event'} type={'click'}/>
-<StorybookDescriptions componentName={'Event'} type={'clickLite'}/>
     `,
     slots: `
+<StorybookDescriptions componentName={'Bars'} type={'slots'}/>
 <StorybookDescriptions componentName={'Slot'} type={'default'}/>
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
-<StorybookDescriptions componentName={'Bars'} type={'slot.bars'}/>
-<StorybookDescriptions componentName={'Bars'} type={'slot.actionBars'}/>
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsBlock.ts

@@ -0,0 +1,97 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Block component properties
+ *
+ * Описания свойств компонента Block
+ */
+export const wikiDescriptionsBlock: StorybookComponentsDescriptionItem = {
+  name: 'Block',
+  description: {
+    en: 'A versatile structural component that serves as a container with support for labels, descriptions, captions, icons, and headlines',
+    ru: 'Универсальный структурный компонент, служащий контейнером с поддержкой меток, описаний, подписей, иконок и заголовков'
+  },
+  possibilities: {
+    en: [
+      'displaying a headline, label, description, and caption',
+      'support for icons',
+      'customizable HTML tag',
+      'flexible layout for content organization'
+    ],
+    ru: [
+      'отображение заголовка, метки, описания и подписи',
+      'поддержка иконок',
+      'настраиваемый HTML-тег',
+      'гибкая компоновка для организации контента'
+    ]
+  },
+  import: [],
+  render: `
+      <DesignComponent v-bind="args">
+        <p>
+          The Block component serves as a fundamental building unit for constructing complex user interfaces.
+          It provides a flexible container that can host various content elements such as labels, descriptions, and icons.
+        </p>
+        <p>
+          With its versatile design, the Block component adapts seamlessly to different layout requirements.
+          Whether you need a simple content wrapper or a detailed card with a headline and caption, this component handles it all.
+        </p>
+        <p>
+          Developers can easily customize the appearance and behavior of the Block using properties and slots.
+          This ensures that the component fits perfectly into any design system while maintaining consistency across the application.
+        </p>
+      </DesignComponent>
+    `,
+  stories: [
+    {
+      id: 'BlockBasic',
+      name: {
+        en: 'Basic',
+        ru: 'Базовые'
+      },
+      template: `
+        <div class="wiki-storybook-flex">
+          <DesignComponent>Content</DesignComponent>
+          <DesignComponent label="Label" description="Description">Content</DesignComponent>
+          <DesignComponent headline="Headline" label="Label">Content</DesignComponent>
+          <DesignComponent icon="home" label="Label">Content</DesignComponent>
+        </div>
+      `
+    },
+    {
+      id: 'BlockSlots',
+      name: {
+        en: 'Slots usage',
+        ru: 'Использование слотов'
+      },
+      template: `
+        <DesignComponent>
+          <template #default>Default slot</template>
+          <template #headline>Headline slot</template>
+          <template #label>Label slot</template>
+          <template #description>Description slot</template>
+          <template #caption>Caption slot</template>
+          <template #trailing>Trailing slot</template>
+        </DesignComponent>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Block'} type={'block'}/>
+`,
+    slots: `
+<Canvas of={Component.BlockSlots}/>
+<StorybookDescriptions componentName={'Slot'} type={'default'}/>
+<StorybookDescriptions componentName={'Slot'} type={'headline'}/>
+<StorybookDescriptions componentName={'Slot'} type={'label'}/>
+<StorybookDescriptions componentName={'Slot'} type={'description'}/>
+<StorybookDescriptions componentName={'Slot'} type={'caption'}/>
+<StorybookDescriptions componentName={'Slot'} type={'trailing'}/>
+`,
+    expose: `
+<StorybookDescriptions componentName={'Expose'} type={'labelId'}/>
+<StorybookDescriptions componentName={'Expose'} type={'descriptionId'}/>
+`
+  }
+}

package/src/media/descriptions/wikiDescriptionsButton.ts

@@ -181,7 +181,6 @@ export const wikiDescriptionsButton: StorybookComponentsDescriptionItem = {
     `,
     events: `
 <StorybookDescriptions componentName={'Event'} type={'click'}/>
-<StorybookDescriptions componentName={'Event'} type={'clickLite'}/>
     `,
     expose: `
 <StorybookDescriptions componentName={'Expose'} type={'value'}/>

package/src/media/descriptions/wikiDescriptionsCell.ts

@@ -96,19 +96,19 @@ export const wikiDescriptionsCell: StorybookComponentsDescriptionItem = {
 `,
     events: `
 <StorybookDescriptions componentName={'Event'} type={'click'}/>
-<StorybookDescriptions componentName={'Event'} type={'clickLite'}/>
     `,
     expose: `
 <StorybookDescriptions componentName={'Expose'} type={'value'}/>
 <StorybookDescriptions componentName={'Expose'} type={'detail'}/>
+<StorybookDescriptions componentName={'Expose'} type={'labelId'}/>
+<StorybookDescriptions componentName={'Expose'} type={'descriptionId'}/>
     `,
     slots: `
 <Canvas of={Component.CellSlots}/>
 <StorybookDescriptions componentName={'Slot'} type={'default'}/>
 <StorybookDescriptions componentName={'Slot'} type={'caption'}/>
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
-<StorybookDescriptions componentName={'Cell'} type={'slot.trailing'}/>
-<StorybookDescriptions componentName={'Cell'} type={'slot.body'}/>
+<StorybookDescriptions componentName={'Cell'} type={'slots'}/>
 `
   }
 }

package/src/media/descriptions/wikiDescriptionsChip.ts

@@ -209,7 +209,6 @@ export const wikiDescriptionsChip: StorybookComponentsDescriptionItem = {
     `,
     events: `
 <StorybookDescriptions componentName={'Event'} type={'click'}/>
-<StorybookDescriptions componentName={'Event'} type={'clickLite'}/>
     `,
     expose: `
 <StorybookDescriptions componentName={'Expose'} type={'value'}/>