@studio-west/component-sw 0.12.13 → 0.12.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +127 -58
  2. package/package.json +1 -1
  3. package/src/components/SwIcon.vue +1 -1
package/README.md CHANGED
@@ -30,6 +30,8 @@ The `Component SW` library provides a set of ready-to-use UI components on Vue 3
30
30
 
31
31
  - [SwDropdownItem](#swdropdownitem)
32
32
 
33
+ - [SwIcon](#swicon)
34
+
33
35
  - [SwGide](#swgide)
34
36
 
35
37
  - [SwInput](#swinput)
@@ -141,8 +143,8 @@ if (typeof document !== 'undefined') {
141
143
  | `type` | `String` | `info` | Тип сообщения: `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`. |
142
144
  | `message` | `String` | `Default message` | Само сообщение. |
143
145
  | `duration` | `Number` | `6000` | Время отображения в миллисекундах. |
144
- | `before` | `String` | `` | Название svg в спрайте загружаемое в начале. |
145
- | `after` | `String` | `` | Название svg в спрайте загружаемое в конце (кнопка закрыть). |
146
+ | `before` | `String` | `` | Иконка в начале: имя из SVG-спрайта или URL (`https://…`). См. [SwIcon](#swicon). |
147
+ | `after` | `String` | `` | Иконка в конце (кнопка закрыть): имя из спрайта или URL. См. [SwIcon](#swicon). |
146
148
 
147
149
  ### Слоты / Slots
148
150
 
@@ -158,12 +160,13 @@ if (typeof document !== 'undefined') {
158
160
  // .js addons
159
161
  import { Alert, components } from "@studio-west/component-sw"
160
162
  import { h } from 'vue'
161
- Alert({message: 'Message', type: 'danger', duration:10000, before:'bell', footer: h(components.SwButton, { onClick: () => console.log('Клик по кнопке в футере') }, () => 'OK')})
163
+ Alert({message: 'Message', type: 'danger', duration:10000, before:'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/bell.svg', footer: h(components.SwButton, { onClick: () => console.log('Клик по кнопке в футере') }, () => 'OK')})
162
164
 
163
165
  // Composition API else <script setup>:
164
166
  import { inject, h } from "vue"
167
+ import { components } from "@studio-west/component-sw"
165
168
  const Alert = inject('Alert')
166
- Alert({message: 'Alarm!', type: 'warning', suffix: h(components.SwgIcon, { name: 'info-circle' })})
169
+ Alert({message: 'Alarm!', type: 'warning', suffix: h(components.SwIcon, { iconClass: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/info-circle.svg' })})
167
170
  //Options API:
168
171
  this.$Alert({message: 'Welcome!', type: 'success', prefix: 'Дополнительная информация'});
169
172
  ```
@@ -186,8 +189,8 @@ this.$Alert({message: 'Welcome!', type: 'success', prefix: 'Дополнител
186
189
  | `href` | `String` | `` | URL, на который будет перенаправлен пользователь при клике (если `link=true`). |
187
190
  | `disabled` | `Boolean` | `false` | Блокирует кнопку, делая её неактивной. |
188
191
  | `label` | `String` | `` | Текст кнопки (альтернатива содержимому слота). |
189
- | `prefix` | `String` | `` | Название SVG-иконки из спрайта, отображаемой перед текстом. |
190
- | `postfix` | `String` | `` | Название SVG-иконки из спрайта, отображаемой после текста. |
192
+ | `prefix` | `String` | `` | Иконка перед текстом: имя из SVG-спрайта или URL (`https://…`). См. [SwIcon](#swicon). |
193
+ | `postfix` | `String` | `` | Иконка после текста: имя из спрайта или URL. См. [SwIcon](#swicon). |
191
194
 
192
195
  ### Слоты / Slots
193
196
 
@@ -216,8 +219,8 @@ Default - содержимое кнопки (текст, иконки или д
216
219
  ```html
217
220
  <sw-button
218
221
  label="Сохранить"
219
- prefix="save-icon"
220
- postfix="arrow-right"
222
+ prefix="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/device-floppy.svg"
223
+ postfix="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/arrow-right.svg"
221
224
  type="success"
222
225
  />
223
226
  ```
@@ -297,8 +300,12 @@ Default - Контент для скрытия
297
300
  ### Пример использования / Example Usage
298
301
 
299
302
  ```html
300
- <sw-collapse :visual="false">
301
- <p>Скрытое / Hidden</p>
303
+ <script>let open = true</script>
304
+
305
+ <sw-button label="Показать / скрыть" type="primary" @click="open = !open" />
306
+
307
+ <sw-collapse :visual="open">
308
+ <p>Скрываемый контент / Collapsible content</p>
302
309
  </sw-collapse>
303
310
  ```
304
311
  ---
@@ -339,8 +346,8 @@ input - событие выбора с данными {dateStart: "11.11.2011",
339
346
  ```html
340
347
  <script>const addDateStart = (date) => {console.log(date)}</script>
341
348
  <sw-date-picker
342
- :data="{startDate: '11.11.2011' endDate: '14-12-2011'}"
343
- limitation=" [{endDate: '14-04-2025', startDate:'30-03-2025'}]"
349
+ :data="{startDate: '11.11.2011', endDate: '14-12-2011'}"
350
+ :limitation="[{endDate: '14-04-2025', startDate:'30-03-2025'}]"
344
351
  range="range"
345
352
  @input="addDateStart"
346
353
  >
@@ -378,17 +385,11 @@ model - состояние меню, булевое значение откры
378
385
  ### Пример использования / Example Usage
379
386
 
380
387
  ```html
381
- <script>let visual = false </script>
382
- <sw-dropdown
383
- class="custom-class"
384
- trigger="none"
385
- v-model="visual"
386
- maxWidth="250"
387
- >
388
- <sw-button @click="visual = true">Описание / Description</sw-button>
389
- <template #dropdown>
390
- <sw-dropdown-item> содержание / context </sw-dropdown-item>
391
- </template>
388
+ <sw-dropdown class="custom-class" :max-width="250">
389
+ <sw-button label="Меню" type="primary" />
390
+ <template #dropdown>
391
+ <sw-dropdown-item>содержание / context</sw-dropdown-item>
392
+ </template>
392
393
  </sw-dropdown>
393
394
  ```
394
395
  ---
@@ -404,7 +405,7 @@ model - состояние меню, булевое значение откры
404
405
  | `class` | `String` | `sw-dropdown-item` | Добавляет пользовательский CSS-класс к компоненту. |
405
406
  | `size` | `String` | `` | Размер поля: `'large'`, `'small'`. |
406
407
  | `type` | `String` | `info` | `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`. |
407
- | `iconBefore` | `String` | `` | Название иконки в коллекции. При наличии вставляет иконку. |
408
+ | `iconBefore` | `String` | `` | Иконка в начале: имя из спрайта или URL. См. [SwIcon](#swicon). |
408
409
 
409
410
  ### Слоты / Slots
410
411
 
@@ -413,22 +414,43 @@ Default - текст названия или модуль
413
414
  ### Пример использования / Example Usage
414
415
 
415
416
  ```html
416
- <script>let visual = false </script>
417
- <sw-dropdown
418
- class="custom-class"
419
- trigger="none"
420
- v-model="visual"
421
- maxWidth="250"
422
- >
423
- <sw-button @click="visual = true">Описание / Description</sw-button>
424
- <template #dropdown>
425
- <sw-dropdown-item @click="visual = false" iconBefore="documents"> содержание / context </sw-dropdown-item>
426
- </template>
427
-
417
+ <sw-dropdown class="custom-class" :max-width="250">
418
+ <sw-button label="Меню" type="primary" />
419
+ <template #dropdown>
420
+ <sw-dropdown-item icon-before="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/files.svg">содержание / context</sw-dropdown-item>
421
+ </template>
428
422
  </sw-dropdown>
429
423
  ```
430
424
  ---
431
425
 
426
+ ## SwIcon
427
+
428
+ Компонент `SwIcon` отображает SVG-иконку из встроенного спрайта или по внешнему URL.
429
+
430
+ Если `iconClass` начинается с `http://`, `https://`, иконка загружается как внешний SVG через CSS `mask` (класс `sw-external-icon`). Иначе используется символ из спрайта: `#prefix-iconClass`.
431
+
432
+ Компонент используется внутри SwButton (`prefix`, `postfix`), SwInput и SwAlert (`before`, `after`), SwDropdownItem (`iconBefore`), SwSection и SwMessage (`iconAfter`) — во всех этих props можно передавать как имя из спрайта, так и полный URL.
433
+
434
+ ### Свойства / Properties
435
+
436
+ | Имя | Тип | По умолчанию | Значения/Описание |
437
+ |-------------|----------|--------------|----------------------------------------------------------------|
438
+ | `iconClass` | `String` | `required` | Имя иконки в спрайте или URL (`https://…`). |
439
+ | `prefix` | `String` | `icon` | Префикс символа в спрайте: `#prefix-iconClass`. |
440
+ | `className` | `String` | `` | Дополнительный CSS-класс для элемента `<svg>`. |
441
+
442
+ ### Пример использования / Example Usage
443
+
444
+ ```html
445
+ <!-- из спрайта -->
446
+ <sw-icon icon-class="star" />
447
+
448
+ <!-- внешний URL (Tabler Icons) -->
449
+ <sw-icon icon-class="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/star.svg" />
450
+ ```
451
+
452
+ ---
453
+
432
454
  ## SwGide
433
455
 
434
456
  Компонент `SwGide` Создает затенение вокруг блока по заданному тегу, и выводит [SwDropdown](#swdropdown) с управляющими кнопками, переключающими по массиву из параметров `steps`
@@ -438,7 +460,7 @@ Default - текст названия или модуль
438
460
  | Имя | Тип | По умолчанию | Значения/Описание |
439
461
  |--------------|-----------|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
440
462
  | `steps` | `Array` | `() => []` | Массив шагов обучения. [{header: 'заголовок',text: 'текст сообщения',tag: 'тег,якорь или класс', placement: 'место всплытия', img: 'src картинки' }], |
441
- | `iconClose` | `String` | `` | Иконка закрытия обучения. |
463
+ | `iconClose` | `String` | `` | Иконка закрытия: имя из спрайта или URL. См. [SwIcon](#swicon). |
442
464
  | `maxWidth` | `Number` | `250` | Ширина всплывающего окна в px (без картинки). по умолчанию 250 |
443
465
 
444
466
  ### Слоты / Slots
@@ -457,22 +479,23 @@ model - массив обьектов шагов обучения
457
479
 
458
480
  ```html
459
481
  <script>
482
+ let settings = { gide: true };
460
483
  let step = 0;
461
484
  let steps = [
462
485
  {header: 'заголовок',
463
486
  text: 'текст сообщения',
464
487
  tag: 'nav',
465
488
  placement: 'bottom',
466
- img: '/img/img.npg'
489
+ img: 'assets/teme_sw/images/sw.png'
467
490
  }
468
491
  ]
469
492
  </script>
470
- <sw-gide v-if="settings.gide" :steps="steps" v-model="step" @close="settings.gide=false" icon-step="arrow">
493
+ <sw-gide v-if="settings.gide" :steps="steps" v-model="step" @close="settings.gide=false" icon-close="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/x.svg">
471
494
  <template #header>
472
495
  Блок {{ steps[step].header }}
473
- <sw-button type="primary" link @click="settings.gide=false"><svg-icon icon-class="close" /></sw-button>
496
+ <sw-button type="primary" link @click="settings.gide=false"><sw-icon icon-class="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/x.svg" /></sw-button>
474
497
  </template>
475
- <template #arrow><svg-icon icon-class="arrow" /></template>
498
+ <template #arrow><sw-icon icon-class="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/chevron-left.svg" /></template>
476
499
  </sw-gide>
477
500
  ```
478
501
  ---
@@ -489,8 +512,8 @@ model - массив обьектов шагов обучения
489
512
  | `size` | `String` | `` | Размер поля: `'large'`, `'small'`. |
490
513
  | `type` | `String` | `text` | Тип поля: `'text'`- текст, `'phone'`- телефон, `'password'` - пароль |
491
514
  | `inputMode` | `String` | `text` | Мобильная клавиатура: `'text'`- стандартная, `'search'`- поиск, `'numeric'`- цифры, `'decimal'` - числа, `'tel'` - телефон, `'url'` - адреса, `'email'` - почта |
492
- | `before` | `String` | `` | Название svg в спрайте загружаемое в начале. |
493
- | `after` | `String` | `` | Название svg в спрайте загружаемое в конце. |
515
+ | `before` | `String` | `` | Иконка в начале: имя из спрайта или URL. См. [SwIcon](#swicon). |
516
+ | `after` | `String` | `` | Иконка в конце: имя из спрайта или URL. См. [SwIcon](#swicon). |
494
517
  | `placeholder` | `String` | `` | Текст Placeholder. |
495
518
  | `required` | `Boolean` | `false` | Признак обязательно ли для заполнения. |
496
519
  | `label` | `String` | `` | Текст в Label. |
@@ -525,7 +548,7 @@ focusInput - focus на поле ввода
525
548
  class="custom-class"
526
549
  size="large"
527
550
  type="phone"
528
- before="phone"
551
+ before="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/phone.svg"
529
552
  placeholder="input"
530
553
  label="input"
531
554
  @prefix="console.log('before')"
@@ -593,7 +616,7 @@ change - событие изменения значения компонента
593
616
  'SwInput': {
594
617
  name: 'input1',
595
618
  placeholder: 'Введите текст',
596
- before: 'search'
619
+ before: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/search.svg'
597
620
  }
598
621
  }
599
622
  ]
@@ -656,7 +679,7 @@ const menuConfig = {
656
679
  'SwButton': {
657
680
  label: 'Нажми меня',
658
681
  type: 'primary',
659
- prefix: 'star'
682
+ prefix: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/star.svg'
660
683
  },
661
684
  'SwSwitch': [
662
685
  {
@@ -680,7 +703,18 @@ const handleChange = (data) => {
680
703
  }
681
704
  </script>
682
705
 
706
+ <style>
707
+ .demo-menu {
708
+ display: flex;
709
+ flex-wrap: wrap;
710
+ gap: 12px;
711
+ align-items: center;
712
+ padding: 12px;
713
+ }
714
+ </style>
715
+
683
716
  <sw-menu
717
+ class="demo-menu"
684
718
  :menu-items="menuConfig"
685
719
  v-model="menuState"
686
720
  @click="handleClick"
@@ -715,16 +749,26 @@ const menuItems = [
715
749
  'SwInput': {
716
750
  name: 'search',
717
751
  placeholder: 'Поиск...',
718
- before: 'search',
752
+ before: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/search.svg',
719
753
  size: 'small'
720
754
  }
721
755
  }
722
756
  ]
723
757
  </script>
724
758
 
759
+ <style>
760
+ .demo-menu {
761
+ display: flex;
762
+ flex-wrap: wrap;
763
+ gap: 12px;
764
+ align-items: center;
765
+ padding: 12px;
766
+ }
767
+ </style>
768
+
725
769
  <sw-menu
770
+ class="demo-menu"
726
771
  :menu-items="menuItems"
727
- class="custom-menu"
728
772
  />
729
773
  ```
730
774
 
@@ -742,19 +786,19 @@ const dropdownMenu = {
742
786
  'SwButton': {
743
787
  label: 'Меню',
744
788
  type: 'primary',
745
- postfix: 'arrow-down'
789
+ postfix: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/chevron-down.svg'
746
790
  }
747
791
  },
748
792
  'slot.dropdown': [
749
793
  {
750
794
  'SwDropdownItem': {
751
- iconBefore: 'user',
795
+ iconBefore: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/user.svg',
752
796
  slot: 'Профиль'
753
797
  }
754
798
  },
755
799
  {
756
800
  'SwDropdownItem': {
757
- iconBefore: 'settings',
801
+ iconBefore: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/settings.svg',
758
802
  slot: 'Настройки'
759
803
  }
760
804
  }
@@ -763,7 +807,17 @@ const dropdownMenu = {
763
807
  }
764
808
  </script>
765
809
 
766
- <sw-menu :menu-items="dropdownMenu" />
810
+ <style>
811
+ .demo-menu {
812
+ display: flex;
813
+ flex-wrap: wrap;
814
+ gap: 12px;
815
+ align-items: center;
816
+ padding: 12px;
817
+ }
818
+ </style>
819
+
820
+ <sw-menu class="demo-menu" :menu-items="dropdownMenu" />
767
821
  ```
768
822
 
769
823
  #### Пример с использованием слотов:
@@ -776,7 +830,7 @@ import { components } from '@studio-west/component-sw'
776
830
  const complexMenu = {
777
831
  'SwSection': {
778
832
  name: 'Панель управления',
779
- iconAfter: 'chevron-down',
833
+ iconAfter: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/chevron-down.svg',
780
834
  slot: 'Основное содержимое секции',
781
835
  'slot.footer': {
782
836
  'SwButtonGroup': {
@@ -800,7 +854,17 @@ const complexMenu = {
800
854
  }
801
855
  </script>
802
856
 
803
- <sw-menu :menu-items="complexMenu" />
857
+ <style>
858
+ .demo-menu {
859
+ display: flex;
860
+ flex-wrap: wrap;
861
+ gap: 12px;
862
+ align-items: center;
863
+ padding: 12px;
864
+ }
865
+ </style>
866
+
867
+ <sw-menu class="demo-menu" :menu-items="complexMenu" />
804
868
  ```
805
869
  ---
806
870
 
@@ -814,7 +878,7 @@ const complexMenu = {
814
878
  |-------------|-----------|--------------|----------------------------------------------------------------------------|
815
879
  | `name` | `String` | `` | Добавляет текстовый заголовок, при отсутствии реализован слот `"header"`. |
816
880
  | `class` | `String` | `sw-section` | Добавляет пользовательский CSS-класс к компоненту. |
817
- | `iconAfter` | `String` | `` | Добавляет иконку из коллекции для кнопки закрытия (при наличии заголовка). |
881
+ | `iconAfter` | `String` | `` | Иконка кнопки закрытия (при заголовке): имя из спрайта или URL. См. [SwIcon](#swicon). |
818
882
 
819
883
  ### Слоты / Slots
820
884
 
@@ -829,10 +893,15 @@ model - состояние компонента булевое значение,
829
893
  ### Пример использования / Example Usage
830
894
 
831
895
  ```html
896
+ <script>let model = false</script>
897
+
898
+ <sw-button label="Показать сообщение" type="primary" @click="model = true" />
899
+
832
900
  <sw-message
833
901
  v-model="model"
834
902
  name="Message"
835
903
  class="custom-class"
904
+ icon-after="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/x.svg"
836
905
  >
837
906
  <p>Описание / Description</p>
838
907
  </sw-message>
@@ -849,7 +918,7 @@ model - состояние компонента булевое значение,
849
918
  |-------------|-----------|--------------|----------------------------------------------------|
850
919
  | `name` | `String` | `` | Добавляет заголовок в секцию. |
851
920
  | `class` | `String` | `sw-section` | Добавляет пользовательский CSS-класс к компоненту. |
852
- | `iconAfter` | `String` | `` | Добавляет иконку из коллекции. |
921
+ | `iconAfter` | `String` | `` | Иконка в заголовке: имя из спрайта или URL. См. [SwIcon](#swicon). |
853
922
 
854
923
  ### Слоты / Slots
855
924
 
@@ -869,7 +938,7 @@ header - клик по всему Header
869
938
  <sw-section
870
939
  name="section"
871
940
  class="custom-class"
872
- iconAfter="cross"
941
+ icon-after="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/x.svg"
873
942
  >
874
943
  <p>Содержимое / Content</p>
875
944
  <template #footer>
@@ -1005,7 +1074,7 @@ model - значение слайдера (число, массив чисел)
1005
1074
  class="custom-class"
1006
1075
  vertical
1007
1076
  >
1008
- <svg-icon icon-class="component" />
1077
+ <sw-icon icon-class="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/components.svg" />
1009
1078
  </sw-slider>
1010
1079
  ```
1011
1080
  ---
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@studio-west/component-sw",
3
- "version": "0.12.13",
3
+ "version": "0.12.15",
4
4
  "description": "Vue components of Component-SW collection.",
5
5
  "type": "module",
6
6
  "keywords": [
package/src/components/SwIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  </svg>
6
6
  </template>
7
7
  <script setup>
8
- import { isExternal } from '../utils/index.js'
8
+ import { isExternal } from '../utils/index.ts'
9
9
 
10
10
  const props = defineProps({
11
11
  prefix: {type: String, default: 'icon'},