@studio-west/component-sw 0.11.36 → 0.12.0

package/README.md

@@ -32,6 +32,8 @@ The `Component SW` library provides a set of ready-to-use UI components on Vue 3
 
 - [SwInput](#swinput)
 
+- [SwMenu](#swmenu)
+
 - [SwMessage](#swmessage)
 
 - [SwSelect](#swselect)
@@ -503,6 +505,275 @@ focusInput - focus на поле ввода
 ```
 ---
 
+## 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: Объект
+```js
+{
+  'SwButton': {
+    label: 'Кнопка',
+    type: 'primary',
+    slot: 'Текст кнопки'
+  },
+  'SwSwitch': [
+    { 
+      label: 'Переключатель 1',
+      on: 'Вкл',
+      off: 'Выкл'
+    },
+    { 
+      label: 'Переключатель 2',
+      checkbox: true
+    }
+  ]
+}
+```
+
+#### Вариант 2: Массив
+```js
+[
+  { 
+    'SwButton': { 
+      label: 'Кнопка 1', 
+      type: 'success' 
+    } 
+  },
+  { 
+    'SwInput': { 
+      name: 'input1',
+      placeholder: 'Введите текст',
+      before: 'search'
+    } 
+  }
+]
+```
+
+### Использование слотов
+
+Для добавления контента в слоты компонентов используйте свойство `slot`:
+
+```js
+{
+  'SwDropdown': {
+    trigger: 'click',
+    'slot.dropdown': {
+      'SwDropdownItem': {
+        slot: 'Пункт меню'
+      }
+    }
+  }
+}
+```
+
+Или используйте префикс `slot.` для именованных слотов:
+
+```js
+{
+  'SwSection': {
+    name: 'Секция',
+    slot: 'Содержимое секции',
+    'slot.footer': {
+      'SwButton': {
+        label: 'Сохранить',
+        type: 'primary'
+      }
+    }
+  }
+}
+```
+
+### Особенности реализации
+
+- Автоматический рендеринг компонентов на основе конфигурации
+- Поддержка вложенных компонентов через слоты
+- Двусторонняя привязка (v-model) для компонентов первого уровня
+- Эмит событий click и change для всех компонентов
+- Рекурсивная обработка конфигурации любой сложности
+- Поддержка как объектного, так и массивного формата menuItems
+
+### Пример использования / Example Usage
+
+#### Базовый пример с объектом:
+
+```html
+<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"
+/>
+```
+
+#### Пример с массивом:
+
+```html
+<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"
+/>
+```
+
+#### Пример с вложенными компонентами:
+
+```html
+<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" />
+```
+
+#### Пример с использованием слотов:
+
+```html
+<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" />
+```
+---
+
 ## SwMessage
 
 Компонент `SwMessage` это выплывающее окно, центрируется по центру.

package/dist/{SwAlert-BN8mwcp_.js → SwAlert-Cwjd3AAq.js}

@@ -1,5 +1,5 @@
-import { n as e } from "./SwIcon-0PtPyq2k.js";
-import { t } from "./SwSelect-CuBxoXju.js";
+import { n as e } from "./SwIcon-Ppc9lrFd.js";
+import { t } from "./SwSelect-Y4RMcbqb.js";
 import { Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, normalizeClass as l, onMounted as u, onUnmounted as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, withCtx as g } from "vue";
 //#region src/components/SwAlert.vue
 var _ = /* @__PURE__ */ t({ default: () => v }), v = {

package/dist/{SwDropdownItem-CscV8R77.js → SwDropdownItem-C_iQ2z-J.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./SwIcon-0PtPyq2k.js";
+import { n as e } from "./SwIcon-Ppc9lrFd.js";
 import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, normalizeClass as a, openBlock as o, renderSlot as s } from "vue";
 //#region src/components/SwDropdownItem.vue
 var c = {

package/dist/{SwGide-Dm9B-VvV.js → SwGide-D_budjqc.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./SwIcon-0PtPyq2k.js";
+import { n as e } from "./SwIcon-Ppc9lrFd.js";
 import t from "./SwButton-Bvn3JLcT.js";
 import n from "./SwDropdown-DMkEn-su.js";
 import { createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, mergeModels as s, normalizeClass as c, onMounted as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, useModel as m, watchEffect as h, withCtx as g } from "vue";

package/dist/{SwIcon-0PtPyq2k.js → SwIcon-Ppc9lrFd.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./utils-CGgSSFR1.js";
-import { t } from "./SwSelect-CuBxoXju.js";
+import { t } from "./SwSelect-Y4RMcbqb.js";
 import { createElementBlock as n, createElementVNode as r, mergeProps as i, openBlock as a, unref as o } from "vue";
 //#region src/components/SwIcon.vue
 var s = /* @__PURE__ */ t({ default: () => l }), c = ["href"], l = {

package/dist/{SwInput-fqZBIN92.js → SwInput-BcWXNImz.js}

@@ -1,5 +1,5 @@
 import { n as e } from "./utils-CGgSSFR1.js";
-import { n as t } from "./SwIcon-0PtPyq2k.js";
+import { n as t } from "./SwIcon-Ppc9lrFd.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, mergeModels as l, mergeProps as u, normalizeClass as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, useModel as g, vModelDynamic as _, watch as v, withDirectives as y } from "vue";
 //#region src/components/SwInput.vue?vue&type=script&setup=true&lang.ts
 var b = ["for"], x = {

package/dist/SwMenu-DllTH3KY.js

@@ -0,0 +1,94 @@
+import { Fragment as e, computed as t, createBlock as n, createElementBlock as r, defineComponent as i, getCurrentInstance as a, h as o, mergeModels as s, normalizeClass as c, openBlock as l, renderList as u, resolveComponent as d, resolveDynamicComponent as f, useModel as p } from "vue";
+//#endregion
+//#region src/components/SwMenu.vue
+var m = /* @__PURE__ */ i({
+	__name: "SwMenu",
+	props: /* @__PURE__ */ s({
+		menuItems: {},
+		class: { default: "" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ s(["click", "change"], ["update:modelValue"]),
+	setup(i, { emit: s }) {
+		let m = i, h = p(i, "modelValue"), g = s, _ = a(), v = (e, t, n = null, r = null) => {
+			let i, a = null;
+			try {
+				if (typeof e == "string") {
+					if (i = _?.appContext?.components?.[e], !i) try {
+						a = d(e), a && typeof a == "object" && (i = a);
+					} catch (t) {
+						console.warn(`Failed to resolve component: ${e}`, t);
+					}
+					if (!i || typeof i == "string") return console.error(`Component "${e}" NOT FOUND`), o("div", { class: "error" }, `Component "${e}" not found`);
+				} else i = e;
+			} catch (t) {
+				return console.warn(`Component "${e}" not found`, t), o("div", { class: "error" }, `Component "${e}" not found`);
+			}
+			if (typeof t == "object" && t && !Array.isArray(t)) {
+				let r = {}, a = {};
+				for (let [e, n] of Object.entries(t)) if (e === "slot") r.default = () => typeof n == "object" && n && !Array.isArray(n) ? "text" in n ? o("span", { textContent: n.text }) : "html" in n ? o("span", { innerHTML: n.html }) : Object.entries(n).map(([e, t]) => Array.isArray(t) ? t.map((t) => v(e, t)) : v(e, t)).flat() : Array.isArray(n) ? n.map((e) => {
+					if (typeof e == "object" && !Array.isArray(e)) {
+						let [t, n] = Object.entries(e)[0];
+						return v(t, n);
+					}
+					return e;
+				}) : n;
+				else if (e.startsWith("slot.")) {
+					let t = e.substring(5);
+					r[t] = () => typeof n == "object" && n && !Array.isArray(n) ? "text" in n ? o("span", { textContent: n.text }) : "html" in n ? o("span", { innerHTML: n.html }) : Object.entries(n).map(([e, t]) => Array.isArray(t) ? t.map((t) => v(e, t)) : v(e, t)).flat() : Array.isArray(n) ? n.map((e) => {
+						if (typeof e == "object" && !Array.isArray(e)) {
+							let [t, n] = Object.entries(e)[0];
+							return v(t, n);
+						}
+						return e;
+					}) : n;
+				} else a[e] = n;
+				return n !== null && (a.onClick = (t) => {
+					g("click", {
+						index: n,
+						componentName: String(e),
+						event: t,
+						value: h.value?.[n]
+					});
+				}, a.onChange = (t) => {
+					g("change", {
+						index: n,
+						componentName: String(e),
+						event: t,
+						value: h.value?.[n]
+					});
+				}, a["onUpdate:modelValue"] = (t) => {
+					h.value ||= [];
+					let r = [...h.value];
+					for (; r.length <= n;) r.push(!1);
+					r[n] = t, h.value = r, g("change", {
+						index: n,
+						componentName: String(e),
+						value: t
+					});
+				}, a.modelValue = h.value && n < h.value.length ? h.value[n] : !1), Object.keys(r).length > 0 ? o(i, a, r) : o(i, a);
+			}
+			return o(i, t);
+		}, y = t(() => {
+			let e = [];
+			if (Array.isArray(m.menuItems)) m.menuItems.forEach((t, n) => {
+				if (typeof t == "object" && t) {
+					let [r, i] = Object.entries(t)[0];
+					e.push({ render: () => v(r, i, n) });
+				}
+			});
+			else {
+				let t = 0;
+				for (let [n, r] of Object.entries(m.menuItems)) Array.isArray(r) ? r.forEach((r) => {
+					e.push({ render: () => v(n, r, t++) });
+				}) : typeof r == "object" && r && e.push({ render: () => v(n, r, t) });
+			}
+			return e;
+		});
+		return (t, i) => (l(), r("nav", { class: c("sw-menu " + m.class) }, [(l(!0), r(e, null, u(y.value, (e, t) => (l(), n(f(e.render), { key: t }))), 128))], 2));
+	}
+});
+//#endregion
+export { m as default };

package/dist/{SwMessage-87r4I7QX.js → SwMessage-B4t8ezM9.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./SwIcon-0PtPyq2k.js";
+import { n as e } from "./SwIcon-Ppc9lrFd.js";
 import t from "./SwButton-Bvn3JLcT.js";
 import { createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, mergeModels as s, nextTick as c, normalizeClass as l, onUnmounted as u, openBlock as d, ref as f, renderSlot as p, toDisplayString as m, unref as h, useModel as g, useSlots as _, watch as v, withCtx as y } from "vue";
 //#region src/components/SwMessage.vue

package/dist/{SwSkeleton-DIwAcNfp.js → SwSkeleton-Byvq4bjt.js}

@@ -1,4 +1,4 @@
-import e from "./SwSkeletonItem-D3Wjgl7J.js";
+import e from "./SwSkeletonItem-BnXZXE54.js";
 import { createElementBlock as t, createVNode as n, normalizeClass as r, openBlock as i, renderSlot as a } from "vue";
 //#region src/components/SwSkeleton.vue
 var o = {

package/dist/{SwTable-DFcF6prC.js → SwTable-DNt-mSdn.js}

@@ -1,4 +1,4 @@
-import e from "./SwTableColumn-CUaP7Ncj.js";
+import e from "./SwTableColumn-S8ldvuhL.js";
 import { Fragment as t, computed as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, normalizeStyle as o, onMounted as s, openBlock as c, ref as l, renderList as u, renderSlot as d, toDisplayString as f, unref as p, useSlots as m } from "vue";
 //#region src/components/SwTable.vue
 var h = { class: "sw-table" }, g = ["colspan", "rowspan"], _ = ["colspan", "rowspan"], v = {