@dxtmisha/wiki 0.39.3 → 0.39.5

package/src/media/mdx/style/wikiMdxStyle.ts

@@ -0,0 +1,20 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import adaptiveEn from './adaptive.en.mdx'
+import adaptiveRu from './adaptive.ru.mdx'
+import asPaletteEn from './asPalette.en.mdx'
+import asPaletteRu from './asPalette.ru.mdx'
+import dirEn from './dir.en.mdx'
+import dirRu from './dir.ru.mdx'
+import isSkeletonEn from './isSkeleton.en.mdx'
+import isSkeletonRu from './isSkeleton.ru.mdx'
+
+export const wikiMdxStyle: StorybookComponentsMdxItem = {
+  name: 'Style',
+  descriptions: {
+    adaptive: { en: adaptiveEn, ru: adaptiveRu },
+    asPalette: { en: asPaletteEn, ru: asPaletteRu },
+    dir: { en: dirEn, ru: dirRu },
+    isSkeleton: { en: isSkeletonEn, ru: isSkeletonRu }
+  }
+}

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

@@ -0,0 +1,25 @@
+## Managing search and highlighting
+
+The `highlight` and `highlightLengthStart` properties work together to control match highlighting when searching through list items. They set the search string and minimum query length for activating visual highlighting of found fragments.
+
+**Properties:**
+
+- `highlight` — search string for finding and highlighting in list items
+- `highlightLengthStart` — minimum search string length to start highlighting, defaults to `2`
+
+Match highlighting is activated automatically: when the `highlight` length is less than `highlightLengthStart`, search works but visual highlighting is not applied. When the minimum length is reached, the component begins highlighting found fragments across the entire list hierarchy. Search works in real-time and considers nested items in groups and menus. Use `highlightLengthStart` to prevent excessive highlighting with short queries.
+
+```html
+<!-- Standard search with highlighting from 2 characters -->
+<List :list="items" highlight="text" />
+
+<!-- Search with highlighting from 3 characters -->
+<List :list="items" highlight="abc" :highlightLengthStart="3" />
+
+<!-- Dynamic search with v-model -->
+<List :list="items" :highlight="searchQuery" :highlightLengthStart="1" />
+
+<!-- Search without minimum threshold -->
+<List :list="products" :highlight="filter" :highlightLengthStart="0" />
+```
+

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

@@ -0,0 +1,25 @@
+## Управление поиском и выделением
+
+Свойства `highlight` и `highlightLengthStart` работают в связке для управления подсветкой совпадений при поиске по элементам списка. Они устанавливают строку поиска и минимальную длину запроса для активации визуального выделения найденных фрагментов.
+
+**Свойства:**
+
+- `highlight` — строка для поиска и подсветки в элементах списка
+- `highlightLengthStart` — минимальная длина строки поиска для начала выделения, по умолчанию `2`
+
+Выделение совпадений активируется автоматически: когда длина `highlight` меньше `highlightLengthStart`, поиск работает, но визуальное выделение не применяется. При достижении минимальной длины компонент начинает подсвечивать найденные фрагменты во всей иерархии списка. Поиск работает в реальном времени и учитывает вложенные элементы в группах и меню. Используйте `highlightLengthStart` для предотвращения чрезмерного выделения при коротких запросах.
+
+```html
+<!-- Стандартный поиск с выделением от 2 символов -->
+<List :list="items" highlight="текст" />
+
+<!-- Поиск с выделением от 3 символов -->
+<List :list="items" highlight="abc" :highlightLengthStart="3" />
+
+<!-- Динамический поиск с v-model -->
+<List :list="items" :highlight="searchQuery" :highlightLengthStart="1" />
+
+<!-- Поиск без минимального порога -->
+<List :list="products" :highlight="filter" :highlightLengthStart="0" />
+```
+

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

@@ -0,0 +1,47 @@
+## Working with text labels and numbers
+
+The `label`, `labelMax`, and `formatting` properties are designed to manage the display of textual and numerical content in interface components.
+
+**Properties:**
+
+- `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
+
+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.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(5)
+const largeNumber = ref(1234)
+</script>
+
+<template>
+  <!-- Basic usage with text -->
+  <Component label="Text" />
+
+  <!-- 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

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

@@ -0,0 +1,10 @@
+## Value and Data Passing
+
+The `value` and `detail` properties are designed to transfer information when interacting with components and handling events.
+
+**Properties:**
+
+- `value` — main component value (string, number, object)
+- `detail` — additional data and contextual 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

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

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

@@ -0,0 +1,38 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import highlightEn from './highlight.en.mdx'
+import highlightRu from './highlight.ru.mdx'
+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
+    },
+    'v-model': {
+      en: vModelEn,
+      ru: vModelRu
+    },
+    'v-model:selected': {
+      en: vModelSelectedEn,
+      ru: vModelSelectedRu
+    },
+    'value': {
+      en: valueEn,
+      ru: valueRu
+    }
+  }
+}

package/src/media/mdx/wikiMdx.ts

@@ -0,0 +1,121 @@
+import type { StorybookComponentsMdx } from '../../types/storybookTypes'
+
+import { wikiMdxEvent } from './event/wikiMdxEvent'
+import { wikiMdxExpose } from './expose/wikiMdxExpose'
+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 { wikiMdxCheckbox } from './Checkbox/wikiMdxCheckbox'
+import { wikiMdxChip } from './Chip/wikiMdxChip'
+import { wikiMdxChipGroup } from './ChipGroup/wikiMdxChipGroup'
+import { wikiMdxDialog } from './Dialog/wikiMdxDialog'
+import { wikiMdxDummy } from './Dummy/wikiMdxDummy'
+import { wikiMdxField } from './Field/wikiMdxField'
+import { wikiMdxFieldCounter } from './FieldCounter/wikiMdxFieldCounter'
+import { wikiMdxFieldLabel } from './FieldLabel/wikiMdxFieldLabel'
+import { wikiMdxFieldMessage } from './FieldMessage/wikiMdxFieldMessage'
+import { wikiMdxGrid } from './Grid/wikiMdxGrid'
+import { wikiMdxGridItem } from './GridItem/wikiMdxGridItem'
+import { wikiMdxGroup } from './Group/wikiMdxGroup'
+import { wikiMdxHorizontalScroll } from './HorizontalScroll/wikiMdxHorizontalScroll'
+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 { wikiMdxMotionAxis } from './MotionAxis/wikiMdxMotionAxis'
+import { wikiMdxMotionTransform } from './MotionTransform/wikiMdxMotionTransform'
+import { wikiMdxPage } from './Page/wikiMdxPage'
+import { wikiMdxProgress } from './Progress/wikiMdxProgress'
+import { wikiMdxRipple } from './Ripple/wikiMdxRipple'
+import { wikiMdxScrollbar } from './Scrollbar/wikiMdxScrollbar'
+import { wikiMdxSection } from './Section/wikiMdxSection'
+import { wikiMdxSelect } from './Select/wikiMdxSelect'
+import { wikiMdxSelectValue } from './SelectValue/wikiMdxSelectValue'
+import { wikiMdxSkeleton } from './Skeleton/wikiMdxSkeleton'
+import { wikiMdxSnackbar } from './Snackbar/wikiMdxSnackbar'
+import { wikiMdxSnackbarItem } from './SnackbarItem/wikiMdxSnackbarItem'
+import { wikiMdxTabItem } from './TabItem/wikiMdxTabItem'
+import { wikiMdxTabs } from './Tabs/wikiMdxTabs'
+import { wikiMdxTabsNavigation } from './TabsNavigation/wikiMdxTabsNavigation'
+import { wikiMdxTextarea } from './Textarea/wikiMdxTextarea'
+import { wikiMdxTextareaAutosize } from './TextareaAutosize/wikiMdxTextareaAutosize'
+import { wikiMdxTooltip } from './Tooltip/wikiMdxTooltip'
+import { wikiMdxWindow } from './Window/wikiMdxWindow'
+
+export const wikiMdx: StorybookComponentsMdx = [
+  wikiMdxEvent,
+  wikiMdxExpose,
+  wikiMdxSlot,
+  wikiMdxStyle,
+  wikiMdxValue,
+
+  wikiMdxAccordion,
+  wikiMdxActions,
+  wikiMdxActionSheet,
+  wikiMdxAnchor,
+  wikiMdxArrow,
+  wikiMdxBadge,
+  wikiMdxBars,
+  wikiMdxBlock,
+  wikiMdxButton,
+  wikiMdxCell,
+  wikiMdxCheckbox,
+  wikiMdxChip,
+  wikiMdxChipGroup,
+  wikiMdxDialog,
+  wikiMdxDummy,
+  wikiMdxField,
+  wikiMdxFieldCounter,
+  wikiMdxFieldLabel,
+  wikiMdxFieldMessage,
+  wikiMdxGrid,
+  wikiMdxGridItem,
+  wikiMdxGroup,
+  wikiMdxHorizontalScroll,
+  wikiMdxIcon,
+  wikiMdxImage,
+  wikiMdxInput,
+  wikiMdxList,
+  wikiMdxListGroup,
+  wikiMdxListItem,
+  wikiMdxListMenu,
+  wikiMdxMask,
+  wikiMdxMenu,
+  wikiMdxModal,
+  wikiMdxMotionAxis,
+  wikiMdxMotionTransform,
+  wikiMdxPage,
+  wikiMdxProgress,
+  wikiMdxRipple,
+  wikiMdxScrollbar,
+  wikiMdxSection,
+  wikiMdxSelect,
+  wikiMdxSelectValue,
+  wikiMdxSkeleton,
+  wikiMdxSnackbar,
+  wikiMdxSnackbarItem,
+  wikiMdxTabItem,
+  wikiMdxTabs,
+  wikiMdxTabsNavigation,
+  wikiMdxTextarea,
+  wikiMdxTextareaAutosize,
+  wikiMdxTooltip,
+  wikiMdxWindow
+]

package/src/media/props/wiki.ts

@@ -0,0 +1,107 @@
+import type { StorybookArgsToList } from '../../types/storybookTypes'
+
+import { wikiAria } from './wikiAria'
+import { wikiAttributes } from './wikiAttributes'
+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 { wikiCheckbox } from './wikiCheckbox'
+import { wikiChip } from './wikiChip'
+import { wikiChipGroup } from './wikiChipGroup'
+import { wikiDialog } from './wikiDialog'
+import { wikiField } from './wikiField'
+import { wikiGridItem } from './wikiGridItem'
+import { wikiIcon } from './wikiIcon'
+import { wikiImage } from './wikiImage'
+import { wikiInput } from './wikiInput'
+import { wikiList } from './wikiList'
+import { wikiListItem } from './wikiListItem'
+import { wikiMask } from './wikiMask'
+import { wikiMenu } from './wikiMenu'
+import { wikiMotionAxis } from './wikiMotionAxis'
+import { wikiMotionTransform } from './wikiMotionTransform'
+import { wikiProgress } from './wikiProgress'
+import { wikiPropsTextarea } from './wikiPropsTextarea'
+import { wikiScrollbar } from './wikiScrollbar'
+import { wikiSelect } from './wikiSelect'
+import { wikiSelectValue } from './wikiSelectValue'
+import { wikiSnackbar } from './wikiSnackbar'
+import { wikiSnackbarItem } from './wikiSnackbarItem'
+import { wikiTabs } from './wikiTabs'
+import { wikiTabsNavigation } from './wikiTabsNavigation'
+import { wikiTooltip } from './wikiTooltip'
+import { wikiWindow } from './wikiWindow'
+
+export const wiki: StorybookArgsToList = {
+  ...wikiAria,
+  ...wikiAttributes,
+  ...wikiForm,
+  ...wikiStatus,
+  ...wikiInformation,
+  ...wikiValue,
+  ...wikiStyle,
+  ...wikiOption,
+  ...wikiTechnical,
+  ...wikiText,
+  ...wikiHook,
+
+  ...wikiActionsInclude,
+  ...wikiArrowInclude,
+  ...wikiBarsInclude,
+  ...wikiFieldCounterInclude,
+  ...wikiIconInclude,
+  ...wikiMaskInclude,
+
+  ...wikiActions,
+  ...wikiAnchor,
+  ...wikiArrow,
+  ...wikiBadge,
+  ...wikiBars,
+  ...wikiButton,
+  ...wikiCheckbox,
+  ...wikiChip,
+  ...wikiChipGroup,
+  ...wikiDialog,
+  ...wikiField,
+  ...wikiGridItem,
+  ...wikiIcon,
+  ...wikiImage,
+  ...wikiInput,
+  ...wikiList,
+  ...wikiListItem,
+  ...wikiMask,
+  ...wikiMenu,
+  ...wikiMotionAxis,
+  ...wikiMotionTransform,
+  ...wikiProgress,
+  ...wikiPropsTextarea,
+  ...wikiScrollbar,
+  ...wikiSelect,
+  ...wikiSelectValue,
+  ...wikiSnackbar,
+  ...wikiSnackbarItem,
+  ...wikiTabs,
+  ...wikiTabsNavigation,
+  ...wikiTooltip,
+  ...wikiWindow
+}

package/src/media/props/wikiActions.ts

@@ -0,0 +1,45 @@
+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' }
+      ]
+    },
+    hide: true
+  },
+  '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' }
+      ]
+    },
+    hide: true
+  }
+}