@studio-west/component-sw 0.12.14 → 0.12.15

package/README.md

@@ -300,8 +300,12 @@ Default - Контент для скрытия
 ### Пример использования / Example Usage
 
 ```html
-<sw-collapse :visual="false">
-  <p>Скрытое / Hidden</p>
+<script>let open = true</script>
+
+<sw-button label="Показать / скрыть" type="primary" @click="open = !open" />
+
+<sw-collapse :visual="open">
+  <p>Скрываемый контент / Collapsible content</p>
 </sw-collapse>
 ```
 ---
@@ -381,17 +385,11 @@ model - состояние меню, булевое значение откры
 ### Пример использования / Example Usage
 
 ```html
-<script>let visual = false </script>
-<sw-dropdown
-  class="custom-class"
-  trigger="none"
-  v-model="visual"
-  maxWidth="250"
->
-  <sw-button @click="visual = true">Описание / Description</sw-button>
-    <template #dropdown>
-        <sw-dropdown-item> содержание / context </sw-dropdown-item>
-    </template>
+<sw-dropdown class="custom-class" :max-width="250">
+  <sw-button label="Меню" type="primary" />
+  <template #dropdown>
+    <sw-dropdown-item>содержание / context</sw-dropdown-item>
+  </template>
 </sw-dropdown>
 ```
 ---
@@ -416,18 +414,11 @@ Default - текст названия или модуль
 ### Пример использования / Example Usage
 
 ```html
-<script>let visual = false </script>
-<sw-dropdown
-  class="custom-class"
-  trigger="none"
-  v-model="visual"
-  maxWidth="250"
->
-    <sw-button @click="visual = true">Описание / Description</sw-button>
-    <template #dropdown>
-        <sw-dropdown-item @click="visual = false" icon-before="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/files.svg"> содержание / context </sw-dropdown-item>
-    </template>
-  
+<sw-dropdown class="custom-class" :max-width="250">
+  <sw-button label="Меню" type="primary" />
+  <template #dropdown>
+    <sw-dropdown-item icon-before="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/files.svg">содержание / context</sw-dropdown-item>
+  </template>
 </sw-dropdown>
 ```
 ---
@@ -436,9 +427,9 @@ Default - текст названия или модуль
 
 Компонент `SwIcon` отображает SVG-иконку из встроенного спрайта или по внешнему URL.
 
-Если `iconClass` начинается с `http://`, `https://`, `mailto:` или `tel:`, иконка загружается как внешний SVG через CSS `mask` (класс `sw-external-icon`). Иначе используется символ из спрайта: `#prefix-iconClass`.
+Если `iconClass` начинается с `http://`, `https://`, иконка загружается как внешний SVG через CSS `mask` (класс `sw-external-icon`). Иначе используется символ из спрайта: `#prefix-iconClass`.
 
-Компонент используется внутри [SwButton](#swbutton) (`prefix`, `postfix`), [SwInput](#swinput) (`before`, `after`), [SwAlert](#swalert), [SwDropdownItem](#swdropdownitem) (`iconBefore`), [SwSection](#swsection) и [SwMessage](#swmessage) (`iconAfter`) — во всех этих props можно передавать как имя из спрайта, так и полный URL.
+Компонент используется внутри SwButton (`prefix`, `postfix`), SwInput и SwAlert (`before`, `after`), SwDropdownItem (`iconBefore`), SwSection и SwMessage (`iconAfter`) — во всех этих props можно передавать как имя из спрайта, так и полный URL.
 
 ### Свойства / Properties
 
@@ -495,7 +486,7 @@ model - массив обьектов шагов обучения
          text: 'текст сообщения',
          tag: 'nav', 
          placement: 'bottom',
-         img: '/img/img.npg' 
+         img: 'assets/teme_sw/images/sw.png'
         }
     ]
 </script>
@@ -712,7 +703,18 @@ const handleChange = (data) => {
 }
 </script>
 
+<style>
+.demo-menu {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+}
+</style>
+
 <sw-menu 
+  class="demo-menu"
   :menu-items="menuConfig" 
   v-model="menuState"
   @click="handleClick"
@@ -754,9 +756,19 @@ const menuItems = [
 ]
 </script>
 
+<style>
+.demo-menu {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+}
+</style>
+
 <sw-menu 
+  class="demo-menu"
   :menu-items="menuItems"
-  class="custom-menu"
 />
 ```
 
@@ -795,7 +807,17 @@ const dropdownMenu = {
 }
 </script>
 
-<sw-menu :menu-items="dropdownMenu" />
+<style>
+.demo-menu {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+}
+</style>
+
+<sw-menu class="demo-menu" :menu-items="dropdownMenu" />
 ```
 
 #### Пример с использованием слотов:
@@ -832,7 +854,17 @@ const complexMenu = {
 }
 </script>
 
-<sw-menu :menu-items="complexMenu" />
+<style>
+.demo-menu {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+}
+</style>
+
+<sw-menu class="demo-menu" :menu-items="complexMenu" />
 ```
 ---
 
@@ -861,10 +893,15 @@ model - состояние компонента булевое значение,
 ### Пример использования / Example Usage
 
 ```html
+<script>let model = false</script>
+
+<sw-button label="Показать сообщение" type="primary" @click="model = true" />
+
 <sw-message
   v-model="model"
   name="Message"
   class="custom-class"
+  icon-after="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/x.svg"
 >
   <p>Описание / Description</p>
 </sw-message>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-west/component-sw",
-  "version": "0.12.14",
+  "version": "0.12.15",
   "description": "Vue components of Component-SW collection.",
   "type": "module",
   "keywords": [

package/src/components/SwIcon.vue

@@ -5,7 +5,7 @@
   </svg>
 </template>
 <script setup>
-import { isExternal } from '../utils/index.js'
+import { isExternal } from '../utils/index.ts'
 
 const props = defineProps({
   prefix: {type: String, default: 'icon'},