@dxtmisha/wiki 0.24.3 → 0.25.1

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/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,11 +96,12 @@ 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}/>

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'}/>
+    `
+  }
+}