@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/mdx/value/labelNumber.en.mdx

@@ -1,28 +1,47 @@
-## Properties for text and number handling
+## Working with text labels and numbers
 
-The `label`, `labelMax`, and `formatting` properties are designed to control the display of textual and numerical content in components.
+The `label`, `labelMax`, and `formatting` properties are designed to manage the display of textual and numerical content in interface components.
 
-### Properties
+**Properties:**
 
-- **label** — Text label or numeric value of the component
-- **labelMax** — Maximum length of a label text before truncation
-- **formatting** — Determines whether values should be formatted before display
+- `label` — text label or numeric value to display
+- `labelMax` — maximum value for numeric labels (adds "+" indicator when exceeded)
+- `formatting` — enables formatting of numeric values according to user locale
 
-### Functionality
+Properties work together for flexible content management: `label` accepts both textual and numeric values. When a number is passed, automatic processing is applied with localization consideration. The `labelMax` property limits the display of large numbers — when the value is exceeded, a "+" symbol is added (e.g., "99+"). The `formatting` property controls number formatting according to user regional settings, ensuring correct display of separators and numeric formats.
 
-These properties provide flexible content display management:
+```html
+<script setup>
+import { ref } from 'vue'
 
-#### Label processing
-- `label` can contain both textual and numeric values
-- When a numeric value is passed to `label`, the `toNumberByMax` function is automatically applied
-- Conversion occurs with consideration of maximum values and localization
+const count = ref(5)
+const largeNumber = ref(1234)
+</script>
 
-#### Length limitation
-- `labelMax` sets the maximum length of displayed text
-- When the limit is exceeded, a text is truncated with an overflow indicator
-- Ensures consistent display across different contexts
+<template>
+  <!-- Basic usage with text -->
+  <Component label="Text" />
 
-#### Value formatting
-- `formatting` controls whether formatting should be applied to values
-- When formatting is enabled, numeric values are converted according to user locale
-- Supports automatic interface language detection
+  <!-- Numeric value -->
+  <Component :label="count" />
+
+  <!-- Maximum value limitation -->
+  <Component :label="150" :label-max="99" />
+  <!-- Displays: 99+ -->
+
+  <!-- With number formatting -->
+  <Component
+    :label="largeNumber"
+    :formatting="true"
+  />
+  <!-- Displays: 1,234 (depending on locale) -->
+
+  <!-- Combined usage -->
+  <Component
+    :label="999"
+    :label-max="99"
+    :formatting="true"
+  />
+  <!-- Displays: 99+ -->
+</template>
+```

package/src/media/mdx/value/labelNumber.ru.mdx

@@ -1,28 +1,47 @@
-## Свойства для работы с текстом и числами
+## Работа с текстовыми метками и числами
 
-Свойства `label`, `labelMax` и `formatting` предназначены для управления отображением текстового и числового контента в компонентах.
+Свойства `label`, `labelMax` и `formatting` предназначены для управления отображением текстового и числового контента в компонентах интерфейса.
 
-### Свойства
+**Свойства:**
 
-- **label** — Текстовая метка или числовое значение компонента
-- **labelMax** — Максимальная длина текста метки перед обрезкой
-- **formatting** — Определяет необходимость форматирования значений перед отображением
+- `label` — текстовая метка или числовое значение для отображения
+- `labelMax` — максимальное значение для числовых меток (при превышении добавляется индикатор "+")
+- `formatting` — включает форматирование числовых значений согласно локали пользователя
 
-### Функциональность
+Свойства работают совместно для гибкого управления контентом: `label` принимает как текстовые, так и числовые значения. При передаче числа применяется автоматическая обработка с учётом локализации. Свойство `labelMax` ограничивает отображение больших чисел — при превышении значения добавляется символ "+" (например, "99+"). Свойство `formatting` контролирует форматирование чисел согласно региональным настройкам пользователя, обеспечивая корректное отображение разделителей и числовых форматов.
 
-Эти свойства обеспечивают гибкое управление отображением контента:
+```html
+<script setup>
+import { ref } from 'vue'
 
-#### Обработка меток
-- `label` может содержать как текстовые, так и числовые значения
-- При передаче числового значения в `label` автоматически применяется функция `toNumberByMax`
-- Происходит преобразование с учетом максимальных значений и локализации
+const count = ref(5)
+const largeNumber = ref(1234)
+</script>
 
-#### Ограничение длины
-- `labelMax` устанавливает максимальную длину отображаемого текста
-- При превышении лимита текст обрезается с добавлением индикатора переполнения
-- Обеспечивает консистентность отображения в различных контекстах
+<template>
+  <!-- Базовое использование с текстом -->
+  <Component label="Текст" />
 
-#### Форматирование значений
-- `formatting` контролирует, нужно ли применять форматирование к значениям
-- При включенном форматировании числовые значения преобразуются согласно локали пользователя
-- Поддерживается автоматическое определение языка интерфейса
+  <!-- Числовое значение -->
+  <Component :label="count" />
+
+  <!-- Ограничение максимального значения -->
+  <Component :label="150" :label-max="99" />
+  <!-- Отобразит: 99+ -->
+
+  <!-- С форматированием чисел -->
+  <Component
+    :label="largeNumber"
+    :formatting="true"
+  />
+  <!-- Отобразит: 1 234 (в зависимости от локали) -->
+
+  <!-- Комбинированное использование -->
+  <Component
+    :label="999"
+    :label-max="99"
+    :formatting="true"
+  />
+  <!-- Отобразит: 99+ -->
+</template>
+```

package/src/media/mdx/value/v-model-selected.en.mdx

@@ -0,0 +1,28 @@
+## Managing selection via v-model:selected
+
+Two-way binding for selected value using `v-model:selected` (component uses `modelSelected`).
+
+**Parameters:**
+- `modelSelected: string | number | string[] | number[] | undefined` — current selected value
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('')
+</script>
+
+<template>
+  <div>
+    <button @click="selected = 'option1'">Select Option 1</button>
+    <button @click="selected = 'option2'">Select Option 2</button>
+    <button @click="selected = undefined">Clear</button>
+  </div>
+
+  <Component v-model:selected="selected" :list="['Option 1', 'Option 2', 'Option 3']" />
+
+  <div>Current selected value: {{ selected }}</div>
+</template>
+```
+
+

package/src/media/mdx/value/v-model-selected.ru.mdx

@@ -0,0 +1,28 @@
+## Управление выбором через v-model:selected
+
+Двусторонняя привязка выбранного значения через `v-model:selected` (компонент использует `modelSelected`).
+
+**Параметры:**
+- `modelSelected: string | number | string[] | number[] | undefined` — текущее выбранное значение
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('')
+</script>
+
+<template>
+  <div>
+    <button @click="selected = 'option1'">Выбрать Option 1</button>
+    <button @click="selected = 'option2'">Выбрать Option 2</button>
+    <button @click="selected = undefined">Очистить</button>
+  </div>
+
+  <Component v-model:selected="selected" :list="['Option 1', 'Option 2', 'Option 3']" />
+
+  <div>Текущее выбранное значение: {{ selected }}</div>
+</template>
+```
+
+

package/src/media/mdx/value/v-model.en.mdx

@@ -0,0 +1,26 @@
+## Managing value via v-model
+
+Two-way value binding using `v-model` (component uses standard `modelValue`).
+
+**Parameters:**
+- `modelValue: string | number` — current value
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const value = ref('')
+</script>
+
+<template>
+  <div>
+    <button @click="value = 'Example'">Set value</button>
+    <button @click="value = ''">Clear</button>
+  </div>
+
+  <Component v-model="value" />
+
+  <div>Current value: {{ value }}</div>
+</template>
+```
+

package/src/media/mdx/value/v-model.ru.mdx

@@ -0,0 +1,26 @@
+## Управление значением через v-model
+
+Двусторонняя привязка значения через `v-model` (компонент использует стандартный `modelValue`).
+
+**Параметры:**
+- `modelValue: string | number` — текущее значение
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const value = ref('')
+</script>
+
+<template>
+  <div>
+    <button @click="value = 'Пример'">Установить значение</button>
+    <button @click="value = ''">Очистить</button>
+  </div>
+
+  <Component v-model="value" />
+
+  <div>Текущее значение: {{ value }}</div>
+</template>
+```
+

package/src/media/mdx/value/value.en.mdx

@@ -1,16 +1,10 @@
-## Value and Data Properties
+## Value and Data Passing
 
-The `value` and `detail` properties are designed to transfer information when interacting with components.
+The `value` and `detail` properties are designed to transfer information when interacting with components and handling events.
 
-### Properties
+**Properties:**
 
-- **value** — Main component value
-- **detail** — Additional data and contextual information
+- `value` — main component value (string, number, object)
+- `detail` — additional data and contextual information
 
-### Property Relationship
-
-The properties complement each other, providing complete information about the component's state and context. `value` contains the main value, while `detail` extends it with additional data.
-
-- `value` reflects the current state or value of the component
-- `detail` can contain metadata, identifiers, coordinates, or other auxiliary data
-- Both properties work together to transfer structured information
+Properties work together: `value` contains the main component value, which is passed during events and accessible via the expose API. `detail` extends `value` with additional data such as metadata, identifiers, or other auxiliary information. Both properties are available for programmatic reading and passed in component events, providing complete information about the state and context during interaction.

package/src/media/mdx/value/value.ru.mdx

@@ -1,16 +1,10 @@
-## Свойства значений и данных
+## Передача значений и данных
 
-Свойства `value` и `detail` предназначены для передачи информации при взаимодействии с компонентами.
+Свойства `value` и `detail` предназначены для передачи информации при взаимодействии с компонентами и обработке событий.
 
-### Свойства
+**Свойства:**
 
-- **value** — Основное значение компонента
-- **detail** — Дополнительные данные и контекстная информация
+- `value` — основное значение компонента (строка, число, объект)
+- `detail` — дополнительные данные и контекстная информация
 
-### Взаимосвязь свойств
-
-Свойства дополняют друг друга, предоставляя полную информацию о состоянии и контексте компонента. `value` содержит основное значение, а `detail` расширяет его дополнительными данными.
-
-- `value` отражает текущее состояние или значение компонента
-- `detail` может содержать метаданные, идентификаторы, координаты или другие вспомогательные данные
-- Оба свойства работают совместно для передачи структурированной информации
+Свойства работают совместно: `value` содержит основное значение компонента, которое передаётся при событиях и доступно через expose API. `detail` расширяет `value` дополнительными данными, такими как метаданные, идентификаторы или другая вспомогательная информация. Оба свойства доступны для программного чтения и передаются в события компонента, обеспечивая полную информацию о состоянии и контексте при взаимодействии.

package/src/media/mdx/value/wikiMdxValue.ts

@@ -6,12 +6,33 @@ import labelNumberEn from './labelNumber.en.mdx'
 import labelNumberRu from './labelNumber.ru.mdx'
 import valueEn from './value.en.mdx'
 import valueRu from './value.ru.mdx'
+import vModelEn from './v-model.en.mdx'
+import vModelRu from './v-model.ru.mdx'
+import vModelSelectedEn from './v-model-selected.en.mdx'
+import vModelSelectedRu from './v-model-selected.ru.mdx'
 
 export const wikiMdxValue: StorybookComponentsMdxItem = {
   name: 'Value',
   descriptions: {
-    highlight: { en: highlightEn, ru: highlightRu },
-    labelNumber: { en: labelNumberEn, ru: labelNumberRu },
-    value: { en: valueEn, ru: valueRu }
+    'highlight': {
+      en: highlightEn,
+      ru: highlightRu
+    },
+    'labelNumber': {
+      en: labelNumberEn,
+      ru: labelNumberRu
+    },
+    'v-model': {
+      en: vModelEn,
+      ru: vModelRu
+    },
+    'v-model:selected': {
+      en: vModelSelectedEn,
+      ru: vModelSelectedRu
+    },
+    'value': {
+      en: valueEn,
+      ru: valueRu
+    }
   }
 }

package/src/media/mdx/wikiMdx.ts

@@ -6,28 +6,42 @@ import { wikiMdxSlot } from './slot/wikiMdxSlot'
 import { wikiMdxStyle } from './style/wikiMdxStyle'
 import { wikiMdxValue } from './value/wikiMdxValue'
 
+import { wikiMdxAccordion } from './Accordion/wikiMdxAccordion'
+import { wikiMdxActions } from './Actions/wikiMdxActions'
+import { wikiMdxActionSheet } from './ActionSheet/wikiMdxActionSheet'
+import { wikiMdxAnchor } from './Anchor/wikiMdxAnchor'
+import { wikiMdxArrow } from './Arrow/wikiMdxArrow'
 import { wikiMdxBadge } from './Badge/wikiMdxBadge'
 import { wikiMdxBars } from './Bars/wikiMdxBars'
+import { wikiMdxBlock } from './Block/wikiMdxBlock'
 import { wikiMdxButton } from './Button/wikiMdxButton'
 import { wikiMdxCell } from './Cell/wikiMdxCell'
 import { wikiMdxChip } from './Chip/wikiMdxChip'
+import { wikiMdxChipGroup } from './ChipGroup/wikiMdxChipGroup'
+import { wikiMdxDialog } from './Dialog/wikiMdxDialog'
 import { wikiMdxField } from './Field/wikiMdxField'
 import { wikiMdxFieldCounter } from './FieldCounter/wikiMdxFieldCounter'
 import { wikiMdxFieldLabel } from './FieldLabel/wikiMdxFieldLabel'
 import { wikiMdxFieldMessage } from './FieldMessage/wikiMdxFieldMessage'
 import { wikiMdxIcon } from './Icon/wikiMdxIcon'
 import { wikiMdxImage } from './Image/wikiMdxImage'
+import { wikiMdxInput } from './Input/wikiMdxInput'
 import { wikiMdxList } from './List/wikiMdxList'
 import { wikiMdxListGroup } from './ListGroup/wikiMdxListGroup'
 import { wikiMdxListItem } from './ListItem/wikiMdxListItem'
 import { wikiMdxListMenu } from './ListMenu/wikiMdxListMenu'
 import { wikiMdxMask } from './Mask/wikiMdxMask'
 import { wikiMdxMenu } from './Menu/wikiMdxMenu'
+import { wikiMdxModal } from './Modal/wikiMdxModal'
 import { wikiMdxMotionTransform } from './MotionTransform/wikiMdxMotionTransform'
 import { wikiMdxProgress } from './Progress/wikiMdxProgress'
 import { wikiMdxRipple } from './Ripple/wikiMdxRipple'
 import { wikiMdxScrollbar } from './Scrollbar/wikiMdxScrollbar'
+import { wikiMdxSelect } from './Select/wikiMdxSelect'
+import { wikiMdxSelectValue } from './SelectValue/wikiMdxSelectValue'
 import { wikiMdxSkeleton } from './Skeleton/wikiMdxSkeleton'
+import { wikiMdxTextareaAutosize } from './TextareaAutosize/wikiMdxTextareaAutosize'
+import { wikiMdxTooltip } from './Tooltip/wikiMdxTooltip'
 import { wikiMdxWindow } from './Window/wikiMdxWindow'
 
 export const wikiMdx: StorybookComponentsMdx = [
@@ -37,27 +51,41 @@ export const wikiMdx: StorybookComponentsMdx = [
   wikiMdxStyle,
   wikiMdxValue,
 
+  wikiMdxAccordion,
+  wikiMdxActions,
+  wikiMdxActionSheet,
+  wikiMdxAnchor,
+  wikiMdxArrow,
   wikiMdxBadge,
   wikiMdxBars,
+  wikiMdxBlock,
   wikiMdxButton,
   wikiMdxCell,
   wikiMdxChip,
+  wikiMdxChipGroup,
+  wikiMdxDialog,
   wikiMdxField,
   wikiMdxFieldCounter,
   wikiMdxFieldLabel,
   wikiMdxFieldMessage,
   wikiMdxIcon,
   wikiMdxImage,
+  wikiMdxInput,
   wikiMdxList,
   wikiMdxListGroup,
   wikiMdxListItem,
   wikiMdxListMenu,
   wikiMdxMask,
-  wikiMdxMotionTransform,
   wikiMdxMenu,
+  wikiMdxModal,
+  wikiMdxMotionTransform,
   wikiMdxProgress,
   wikiMdxRipple,
   wikiMdxScrollbar,
+  wikiMdxSelect,
+  wikiMdxSelectValue,
   wikiMdxSkeleton,
+  wikiMdxTextareaAutosize,
+  wikiMdxTooltip,
   wikiMdxWindow
 ]

package/src/media/props/wiki.ts

@@ -1,18 +1,36 @@
 import type { StorybookArgsToList } from '../../types/storybookTypes'
 
+import { wikiAria } from './wikiAria'
+import { wikiForm } from './wikiForm'
 import { wikiStatus } from './wikiStatus'
+import { wikiInformation } from './wikiInformation'
 import { wikiValue } from './wikiValue'
 import { wikiStyle } from './wikiStyle'
+import { wikiOption } from './wikiOption'
 import { wikiTechnical } from './wikiTechnical'
+import { wikiText } from './wikiText'
 import { wikiHook } from './wikiHook'
 
+import { wikiActionsInclude } from './wikiActionsInclude'
+import { wikiArrowInclude } from './wikiArrowInclude'
+import { wikiBarsInclude } from './wikiBarsInclude'
+import { wikiFieldCounterInclude } from './wikiFieldCounterInclude'
+import { wikiIconInclude } from './wikiIconInclude'
+import { wikiMaskInclude } from './wikiMaskInclude'
+
+import { wikiActions } from './wikiActions'
+import { wikiAnchor } from './wikiAnchor'
+import { wikiArrow } from './wikiArrow'
 import { wikiBadge } from './wikiBadge'
 import { wikiBars } from './wikiBars'
 import { wikiButton } from './wikiButton'
 import { wikiChip } from './wikiChip'
+import { wikiChipGroup } from './wikiChipGroup'
+import { wikiDialog } from './wikiDialog'
 import { wikiField } from './wikiField'
 import { wikiIcon } from './wikiIcon'
 import { wikiImage } from './wikiImage'
+import { wikiInput } from './wikiInput'
 import { wikiList } from './wikiList'
 import { wikiListItem } from './wikiListItem'
 import { wikiMask } from './wikiMask'
@@ -20,22 +38,43 @@ import { wikiMenu } from './wikiMenu'
 import { wikiMotionTransform } from './wikiMotionTransform'
 import { wikiProgress } from './wikiProgress'
 import { wikiScrollbar } from './wikiScrollbar'
+import { wikiSelect } from './wikiSelect'
+import { wikiSelectValue } from './wikiSelectValue'
+import { wikiTooltip } from './wikiTooltip'
 import { wikiWindow } from './wikiWindow'
 
 export const wiki: StorybookArgsToList = {
+  ...wikiAria,
+  ...wikiForm,
   ...wikiStatus,
+  ...wikiInformation,
   ...wikiValue,
   ...wikiStyle,
+  ...wikiOption,
   ...wikiTechnical,
+  ...wikiText,
   ...wikiHook,
 
+  ...wikiActionsInclude,
+  ...wikiArrowInclude,
+  ...wikiBarsInclude,
+  ...wikiFieldCounterInclude,
+  ...wikiIconInclude,
+  ...wikiMaskInclude,
+
+  ...wikiActions,
+  ...wikiAnchor,
+  ...wikiArrow,
   ...wikiBadge,
   ...wikiBars,
   ...wikiButton,
   ...wikiChip,
+  ...wikiChipGroup,
+  ...wikiDialog,
   ...wikiField,
   ...wikiIcon,
   ...wikiImage,
+  ...wikiInput,
   ...wikiList,
   ...wikiListItem,
   ...wikiMask,
@@ -43,5 +82,8 @@ export const wiki: StorybookArgsToList = {
   ...wikiMotionTransform,
   ...wikiProgress,
   ...wikiScrollbar,
+  ...wikiSelect,
+  ...wikiSelectValue,
+  ...wikiTooltip,
   ...wikiWindow
 }

package/src/media/props/wikiActions.ts

@@ -0,0 +1,43 @@
+import {
+  type StorybookArgsToList,
+  StorybookCategory,
+  StorybookControl
+} from '../../types/storybookTypes'
+
+/**
+ * The wikiActions object contains descriptions of all properties for the Actions component
+ *
+ * Объект wikiActions содержит описание всех свойств для компонента Actions
+ */
+export const wikiActions: StorybookArgsToList = {
+  'actions.list': {
+    type: StorybookControl.object,
+    options: {
+      category: StorybookCategory.value,
+      description: {
+        en: 'Array of primary action button configurations',
+        ru: 'Массив конфигураций основных кнопок действий'
+      },
+      value: [
+        { label: 'Ok' },
+        { label: 'Cancel' }
+      ]
+    }
+  },
+  'actions.listSecondary': {
+    type: StorybookControl.object,
+    options: {
+      category: StorybookCategory.value,
+      description: {
+        en: 'Array of secondary action button configurations',
+        ru: 'Массив конфигураций вторичных кнопок действий'
+      },
+      value: [
+        { icon: 'edit' },
+        { icon: 'photo_camera' },
+        { icon: 'image' },
+        { icon: 'tune' }
+      ]
+    }
+  }
+}

package/src/media/props/wikiActionsInclude.ts

@@ -0,0 +1,62 @@
+import {
+  type StorybookArgsToList,
+  StorybookCategory,
+  StorybookControl
+} from '../../types/storybookTypes'
+
+/**
+ * The wikiActionsInclude object contains descriptions of all properties for the Actions include
+ *
+ * Объект wikiActionsInclude содержит описание всех свойств для включения Actions
+ */
+export const wikiActionsInclude: StorybookArgsToList = {
+  actionsAttrs: {
+    type: StorybookControl.object,
+    options: {
+      category: StorybookCategory.actions,
+      description: {
+        en: 'Additional attributes for the Actions component container',
+        ru: 'Дополнительные атрибуты для контейнера компонента Actions'
+      }
+    }
+  },
+  actionsHide: {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.actions,
+      description: {
+        en: 'Hides the actions block',
+        ru: 'Скрывает блок действий'
+      }
+    }
+  },
+  actionsList: {
+    type: StorybookControl.object,
+    options: {
+      category: StorybookCategory.actions,
+      description: {
+        en: 'Array of primary action buttons displayed in the actions area',
+        ru: 'Массив основных кнопок действий, отображаемых в области действий'
+      },
+      value: [
+        { icon: 'edit', label: 'Edit' },
+        { icon: 'delete', label: 'Delete' },
+        { icon: 'share', label: 'Share' }
+      ]
+    }
+  },
+  actionsSecondary: {
+    type: StorybookControl.object,
+    options: {
+      category: StorybookCategory.actions,
+      description: {
+        en: 'Array of secondary action buttons displayed in the actions area',
+        ru: 'Массив вторичных кнопок действий, отображаемых в области действий'
+      },
+      value: [
+        { icon: 'info', label: 'Info' },
+        { icon: 'help', label: 'Help' }
+      ]
+    }
+  }
+}