SwMenu

SwMenu

Компонент SwMenu представляет собой динамическое меню, которое генерируется на основе конфигурационного объекта или массива. Поддерживает рендеринг любых компонентов с возможностью настройки слотов и свойств.

Свойства / Properties

Имя	Тип	По умолчанию	Значения/Описание
menuItems	`Object \	Array`	required	Конфигурация меню. Объект или массив объектов с компонентами и их настройками.
class	String	''	Добавляет пользовательский CSS-класс к компоненту.

Модель / Model

model - массив булевых значений для двусторонней привязки (v-model) с компонентами первого уровня.

События / Events

click - событие клика по компоненту. Параметры: { index, componentName, event, value } change - событие изменения значения компонента. Параметры: { index, componentName, event?, value }

Формат конфигурации menuItems

Вариант 1: Объект

{
  'SwButton': {
    label: 'Кнопка',
    type: 'primary',
    slot: 'Текст кнопки'
  },
  'SwSwitch': [
    { 
      label: 'Переключатель 1',
      on: 'Вкл',
      off: 'Выкл'
    },
    { 
      label: 'Переключатель 2',
      checkbox: true
    }
  ]
}

Вариант 2: Массив

[
  { 
    'SwButton': { 
      label: 'Кнопка 1', 
      type: 'success' 
    } 
  },
  { 
    'SwInput': { 
      name: 'input1',
      placeholder: 'Введите текст',
      before: 'search'
    } 
  }
]

Использование слотов

Для добавления контента в слоты компонентов используйте свойство slot:

{
  'SwDropdown': {
    trigger: 'click',
    'slot.dropdown': {
      'SwDropdownItem': {
        slot: 'Пункт меню'
      }
    }
  }
}

Или используйте префикс slot. для именованных слотов:

{
  'SwSection': {
    name: 'Секция',
    slot: 'Содержимое секции',
    'slot.footer': {
      'SwButton': {
        label: 'Сохранить',
        type: 'primary'
      }
    }
  }
}

Особенности реализации

• Автоматический рендеринг компонентов на основе конфигурации
• Поддержка вложенных компонентов через слоты
• Двусторонняя привязка (v-model) для компонентов первого уровня
• Эмит событий click и change для всех компонентов
• Рекурсивная обработка конфигурации любой сложности
• Поддержка как объектного, так и массивного формата menuItems

Пример использования / Example Usage

Базовый пример с объектом:

<script setup>
import { ref } from 'vue'

const menuState = ref([false, false])

const menuConfig = {
  'SwButton': {
    label: 'Нажми меня',
    type: 'primary',
    prefix: 'star'
  },
  'SwSwitch': [
    { 
      label: 'Уведомления',
      on: 'Вкл',
      off: 'Выкл'
    },
    { 
      label: 'Звук',
      checkbox: true
    }
  ]
}

const handleClick = (data) => {
  console.log('Clicked:', data)
}

const handleChange = (data) => {
  console.log('Changed:', data)
}
</script>

<sw-menu 
  :menu-items="menuConfig" 
  v-model="menuState"
  @click="handleClick"
  @change="handleChange"
/>

Пример с массивом:

<script setup>
import { ref } from 'vue'

const menuItems = [
  { 
    'SwButton': { 
      label: 'Главная', 
      type: 'info',
      link: true,
      href: '/'
    } 
  },
  { 
    'SwButton': { 
      label: 'О нас', 
      type: 'info',
      link: true,
      href: '/about'
    } 
  },
  { 
    'SwInput': { 
      name: 'search',
      placeholder: 'Поиск...',
      before: 'search',
      size: 'small'
    } 
  }
]
</script>

<sw-menu 
  :menu-items="menuItems"
  class="custom-menu"
/>

Пример с вложенными компонентами:

<script setup>
import { ref } from 'vue'

const dropdownMenu = {
  'SwDropdown': {
    trigger: 'hover',
    placement: 'bottom-left',
    slot: {
      'SwButton': {
        label: 'Меню',
        type: 'primary',
        postfix: 'arrow-down'
      }
    },
    'slot.dropdown': [
      {
        'SwDropdownItem': {
          iconBefore: 'user',
          slot: 'Профиль'
        }
      },
      {
        'SwDropdownItem': {
          iconBefore: 'settings',
          slot: 'Настройки'
        }
      }
    ]
  }
}
</script>

<sw-menu :menu-items="dropdownMenu" />

Пример с использованием слотов:

<script setup>
import { h } from 'vue'
import { components } from '@studio-west/component-sw'

const complexMenu = {
  'SwSection': {
    name: 'Панель управления',
    iconAfter: 'chevron-down',
    slot: 'Основное содержимое секции',
    'slot.footer': {
      'SwButtonGroup': {
        radio: true,
        slot: [
          {
            'SwButton': {
              label: 'Опция 1',
              type: 'primary'
            }
          },
          {
            'SwButton': {
              label: 'Опция 2'
            }
          }
        ]
      }
    }
  }
}
</script>

<sw-menu :menu-items="complexMenu" />