@studio-west/component-sw 0.11.35 → 0.12.0

package/src/components/SwMenu.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { computed, h, resolveComponent, getCurrentInstance, type VNode, type Component } from 'vue'
+
+// Типы для конфигурации компонента
+interface ComponentConfig {
+  [key: string]: any
+}
+
+interface MenuItemConfig {
+  slot?: string | ComponentConfig | Array<any>
+  [key: string]: any
+}
+
+interface MenuItemsObject {
+  [componentName: string]: MenuItemConfig | MenuItemConfig[]
+}
+
+type MenuItems = MenuItemsObject | Array<{ [componentName: string]: MenuItemConfig }>
+
+interface Props {
+  menuItems: MenuItems
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  class: ''
+})
+
+const model = defineModel<boolean[]>()
+const emit = defineEmits<{
+  click: [{ index: number; componentName: string; event: Event; value?: boolean }]
+  change: [{ index: number; componentName: string; event?: Event; value?: boolean }]
+}>()
+
+const instance = getCurrentInstance()
+
+// Рекурсивная функция для создания компонента со слотами
+const createComponentWithSlots = (
+  componentName: string | Component,
+  config: MenuItemConfig,
+  index: number | null = null,
+  parentIndex: number | null = null
+): VNode => {
+  let component: Component | string
+  let resolvedComponent: any = null
+
+  try {
+    if (typeof componentName === 'string') {
+      // Сначала ищем в глобально зарегистрированных компонентах
+      component = instance?.appContext?.components?.[componentName]
+      if (!component) {
+        try {
+          resolvedComponent = resolveComponent(componentName)
+          // Если это async компонент, нужно получить его определение
+          if (resolvedComponent && typeof resolvedComponent === 'object') {
+            component = resolvedComponent as Component
+          }
+        } catch (e) {
+          console.warn(`Failed to resolve component: ${componentName}`, e)
+        }
+      }
+      if (!component || typeof component === 'string') {
+        console.error(`Component "${componentName}" NOT FOUND`)
+        return h('div', { class: 'error' }, `Component "${componentName}" not found`)
+      }
+    } else {
+      component = componentName
+    }
+  } catch (e) {
+    console.warn(`Component "${componentName}" not found`, e)
+    return h('div', { class: 'error' }, `Component "${componentName}" not found`)
+  }
+
+  if (typeof config === 'object' && config !== null && !Array.isArray(config)) {
+    const slots: Record<string, () => any> = {}
+    const componentProps: Record<string, any> = {}
+
+    for (const [key, value] of Object.entries(config)) {
+      if (key === 'slot') {
+        slots.default = () => {
+          if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+            if ('text' in value) {
+              return h('span', { textContent: value.text })
+            }
+            if ('html' in value) {
+              return h('span', { innerHTML: value.html })
+            }
+            return Object.entries(value).map(([compName, compConfig]) => {
+              if (Array.isArray(compConfig)) {
+                return compConfig.map(item => createComponentWithSlots(compName, item))
+              } else {
+                return createComponentWithSlots(compName, compConfig)
+              }
+            }).flat()
+          }
+          if (Array.isArray(value)) {
+            return value.map(item => {
+              if (typeof item === 'object' && !Array.isArray(item)) {
+                const [nestedComponentName, nestedConfig] = Object.entries(item)[0]
+                return createComponentWithSlots(nestedComponentName, nestedConfig)
+              }
+              return item
+            })
+          }
+          return value
+        }
+      } else if (key.startsWith('slot.')) {
+        const slotName = key.substring(5)
+        slots[slotName] = () => {
+          if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+            if ('text' in value) {
+              return h('span', { textContent: value.text })
+            }
+            if ('html' in value) {
+              return h('span', { innerHTML: value.html })
+            }
+            return Object.entries(value).map(([compName, compConfig]) => {
+              if (Array.isArray(compConfig)) {
+                return compConfig.map(item => createComponentWithSlots(compName, item))
+              } else {
+                return createComponentWithSlots(compName, compConfig)
+              }
+            }).flat()
+          }
+          if (Array.isArray(value)) {
+            return value.map(item => {
+              if (typeof item === 'object' && !Array.isArray(item)) {
+                const [nestedComponentName, nestedConfig] = Object.entries(item)[0]
+                return createComponentWithSlots(nestedComponentName, nestedConfig)
+              }
+              return item
+            })
+          }
+          return value
+        }
+      } else {
+        componentProps[key] = value
+      }
+    }
+
+    // Назначаем двустороннюю привязку (v-model) всем компонентам первого уровня
+    if (index !== null) {
+      // Добавляем обработчики событий click и change
+      componentProps.onClick = (event: Event) => {
+        emit('click', { index, componentName: String(componentName), event, value: model.value?.[index] })
+      }
+      componentProps.onChange = (event: Event) => {
+        emit('change', { index, componentName: String(componentName), event, value: model.value?.[index] })
+      }
+      componentProps['onUpdate:modelValue'] = (value: boolean) => {
+        // Инициализируем model.value если он undefined
+        if (!model.value) {
+          model.value = []
+        }
+        const newValues = [...model.value]
+        // Расширяем массив если нужно
+        while (newValues.length <= index) {
+          newValues.push(false)
+        }
+        newValues[index] = value
+        model.value = newValues
+        // Эмитим событие change при изменении значения
+        emit('change', { index, componentName: String(componentName), value })
+      }
+      // Используем значение из model или false по умолчанию
+      const currentValue = model.value && index < model.value.length ? model.value[index] : false
+      componentProps.modelValue = currentValue
+    }
+
+    if (Object.keys(slots).length > 0) {
+      return h(component as Component, componentProps, slots)
+    }
+    return h(component as Component, componentProps)
+  }
+  return h(component as Component, config)
+}
+
+const menuComponents = computed(() => {
+  const components: Array<{ render: () => VNode }> = []
+
+  if (Array.isArray(props.menuItems)) {
+    props.menuItems.forEach((item, index) => {
+      if (typeof item === 'object' && item !== null) {
+        const [componentName, config] = Object.entries(item)[0]
+        components.push({
+          render: () => createComponentWithSlots(componentName, config as MenuItemConfig, index)
+        })
+      }
+    })
+  } else {
+    let index = 0
+    for (const [componentName, params] of Object.entries(props.menuItems)) {
+      if (Array.isArray(params)) {
+        params.forEach((param) => {
+          components.push({
+            render: () => createComponentWithSlots(componentName, param, index++)
+          })
+        })
+      } else if (typeof params === 'object' && params !== null) {
+        components.push({
+          render: () => createComponentWithSlots(componentName, params, index)
+        })
+      }
+    }
+  }
+  return components
+})
+</script>
+
+<template>
+  <nav :class="'sw-menu ' + props.class">
+    <component
+      v-for="(item, index) in menuComponents"
+      :key="index"
+      :is="item.render"
+    />
+  </nav>
+</template>

package/src/index.ts

@@ -38,6 +38,7 @@ export type { SwButtonProps } from '@/types'
 export type { SwInputProps } from '@/types'
 export type { SwSwitchProps } from '@/types'
 export type { SwSelectProps } from '@/types'
+export type { SwMenuProps } from '@/types'
 
 // Named exports
 export { components, Alert, Library }

package/types/components.d.ts

@@ -6,6 +6,7 @@ export type SwButton = DefineComponent<import('./index').SwButtonProps>
 export type SwInput = DefineComponent<import('./index').SwInputProps>
 export type SwSwitch = DefineComponent<import('./index').SwSwitchProps>
 export type SwSelect = DefineComponent<import('./index').SwSelectProps>
+export type SwMenu = DefineComponent<import('./index').SwMenuProps>
 
 // Augment Vue's GlobalComponents interface
 declare module 'vue' {
@@ -33,6 +34,7 @@ declare module 'vue' {
     SwTableColumn: DefineComponent
     SwTabs: DefineComponent
     SwTabsPane: DefineComponent
+    SwMenu: SwMenu
     
     // kebab-case component names (alternative)
     'sw-button': SwButton
@@ -57,6 +59,7 @@ declare module 'vue' {
     'sw-table-column': DefineComponent
     'sw-tabs': DefineComponent
     'sw-tabs-pane': DefineComponent
+    'sw-menu': SwMenu
   }
 }
 

package/types/index.d.ts

@@ -70,11 +70,17 @@ export interface SwSelectProps {
   token?: string
 }
 
+export interface SwMenuProps {
+  menuItems: Record<string, any> | Array<{ [componentName: string]: any }>
+  class?: string
+}
+
 // Export component constructor types
 export type SwButton = DefineComponent<SwButtonProps>
 export type SwInput = DefineComponent<SwInputProps>
 export type SwSwitch = DefineComponent<SwSwitchProps>
 export type SwSelect = DefineComponent<SwSelectProps>
+export type SwMenu = DefineComponent<SwMenuProps>
 
 // Global component registration
 declare module 'vue' {
@@ -102,6 +108,7 @@ declare module 'vue' {
     SwTableColumn: DefineComponent
     SwTabs: DefineComponent
     SwTabsPane: DefineComponent
+    SwMenu: SwMenu
   }
 }