@studio-west/component-sw 0.12.13 → 0.12.14

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 (2) hide show
  1. package/README.md +62 -30
  2. package/package.json +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
  ```
@@ -339,8 +342,8 @@ input - событие выбора с данными {dateStart: "11.11.2011",
339
342
  ```html
340
343
  <script>const addDateStart = (date) => {console.log(date)}</script>
341
344
  <sw-date-picker
342
- :data="{startDate: '11.11.2011' endDate: '14-12-2011'}"
343
- limitation=" [{endDate: '14-04-2025', startDate:'30-03-2025'}]"
345
+ :data="{startDate: '11.11.2011', endDate: '14-12-2011'}"
346
+ :limitation="[{endDate: '14-04-2025', startDate:'30-03-2025'}]"
344
347
  range="range"
345
348
  @input="addDateStart"
346
349
  >
@@ -404,7 +407,7 @@ model - состояние меню, булевое значение откры
404
407
  | `class` | `String` | `sw-dropdown-item` | Добавляет пользовательский CSS-класс к компоненту. |
405
408
  | `size` | `String` | `` | Размер поля: `'large'`, `'small'`. |
406
409
  | `type` | `String` | `info` | `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`. |
407
- | `iconBefore` | `String` | `` | Название иконки в коллекции. При наличии вставляет иконку. |
410
+ | `iconBefore` | `String` | `` | Иконка в начале: имя из спрайта или URL. См. [SwIcon](#swicon). |
408
411
 
409
412
  ### Слоты / Slots
410
413
 
@@ -422,13 +425,41 @@ Default - текст названия или модуль
422
425
  >
423
426
  <sw-button @click="visual = true">Описание / Description</sw-button>
424
427
  <template #dropdown>
425
- <sw-dropdown-item @click="visual = false" iconBefore="documents"> содержание / context </sw-dropdown-item>
428
+ <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>
426
429
  </template>
427
430
 
428
431
  </sw-dropdown>
429
432
  ```
430
433
  ---
431
434
 
435
+ ## SwIcon
436
+
437
+ Компонент `SwIcon` отображает SVG-иконку из встроенного спрайта или по внешнему URL.
438
+
439
+ Если `iconClass` начинается с `http://`, `https://`, `mailto:` или `tel:`, иконка загружается как внешний SVG через CSS `mask` (класс `sw-external-icon`). Иначе используется символ из спрайта: `#prefix-iconClass`.
440
+
441
+ Компонент используется внутри [SwButton](#swbutton) (`prefix`, `postfix`), [SwInput](#swinput) (`before`, `after`), [SwAlert](#swalert), [SwDropdownItem](#swdropdownitem) (`iconBefore`), [SwSection](#swsection) и [SwMessage](#swmessage) (`iconAfter`) — во всех этих props можно передавать как имя из спрайта, так и полный URL.
442
+
443
+ ### Свойства / Properties
444
+
445
+ | Имя | Тип | По умолчанию | Значения/Описание |
446
+ |-------------|----------|--------------|----------------------------------------------------------------|
447
+ | `iconClass` | `String` | `required` | Имя иконки в спрайте или URL (`https://…`). |
448
+ | `prefix` | `String` | `icon` | Префикс символа в спрайте: `#prefix-iconClass`. |
449
+ | `className` | `String` | `` | Дополнительный CSS-класс для элемента `<svg>`. |
450
+
451
+ ### Пример использования / Example Usage
452
+
453
+ ```html
454
+ <!-- из спрайта -->
455
+ <sw-icon icon-class="star" />
456
+
457
+ <!-- внешний URL (Tabler Icons) -->
458
+ <sw-icon icon-class="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/star.svg" />
459
+ ```
460
+
461
+ ---
462
+
432
463
  ## SwGide
433
464
 
434
465
  Компонент `SwGide` Создает затенение вокруг блока по заданному тегу, и выводит [SwDropdown](#swdropdown) с управляющими кнопками, переключающими по массиву из параметров `steps`
@@ -438,7 +469,7 @@ Default - текст названия или модуль
438
469
  | Имя | Тип | По умолчанию | Значения/Описание |
439
470
  |--------------|-----------|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
440
471
  | `steps` | `Array` | `() => []` | Массив шагов обучения. [{header: 'заголовок',text: 'текст сообщения',tag: 'тег,якорь или класс', placement: 'место всплытия', img: 'src картинки' }], |
441
- | `iconClose` | `String` | `` | Иконка закрытия обучения. |
472
+ | `iconClose` | `String` | `` | Иконка закрытия: имя из спрайта или URL. См. [SwIcon](#swicon). |
442
473
  | `maxWidth` | `Number` | `250` | Ширина всплывающего окна в px (без картинки). по умолчанию 250 |
443
474
 
444
475
  ### Слоты / Slots
@@ -457,6 +488,7 @@ model - массив обьектов шагов обучения
457
488
 
458
489
  ```html
459
490
  <script>
491
+ let settings = { gide: true };
460
492
  let step = 0;
461
493
  let steps = [
462
494
  {header: 'заголовок',
@@ -467,12 +499,12 @@ model - массив обьектов шагов обучения
467
499
  }
468
500
  ]
469
501
  </script>
470
- <sw-gide v-if="settings.gide" :steps="steps" v-model="step" @close="settings.gide=false" icon-step="arrow">
502
+ <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
503
  <template #header>
472
504
  Блок {{ steps[step].header }}
473
- <sw-button type="primary" link @click="settings.gide=false"><svg-icon icon-class="close" /></sw-button>
505
+ <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
506
  </template>
475
- <template #arrow><svg-icon icon-class="arrow" /></template>
507
+ <template #arrow><sw-icon icon-class="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/chevron-left.svg" /></template>
476
508
  </sw-gide>
477
509
  ```
478
510
  ---
@@ -489,8 +521,8 @@ model - массив обьектов шагов обучения
489
521
  | `size` | `String` | `` | Размер поля: `'large'`, `'small'`. |
490
522
  | `type` | `String` | `text` | Тип поля: `'text'`- текст, `'phone'`- телефон, `'password'` - пароль |
491
523
  | `inputMode` | `String` | `text` | Мобильная клавиатура: `'text'`- стандартная, `'search'`- поиск, `'numeric'`- цифры, `'decimal'` - числа, `'tel'` - телефон, `'url'` - адреса, `'email'` - почта |
492
- | `before` | `String` | `` | Название svg в спрайте загружаемое в начале. |
493
- | `after` | `String` | `` | Название svg в спрайте загружаемое в конце. |
524
+ | `before` | `String` | `` | Иконка в начале: имя из спрайта или URL. См. [SwIcon](#swicon). |
525
+ | `after` | `String` | `` | Иконка в конце: имя из спрайта или URL. См. [SwIcon](#swicon). |
494
526
  | `placeholder` | `String` | `` | Текст Placeholder. |
495
527
  | `required` | `Boolean` | `false` | Признак обязательно ли для заполнения. |
496
528
  | `label` | `String` | `` | Текст в Label. |
@@ -525,7 +557,7 @@ focusInput - focus на поле ввода
525
557
  class="custom-class"
526
558
  size="large"
527
559
  type="phone"
528
- before="phone"
560
+ before="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/phone.svg"
529
561
  placeholder="input"
530
562
  label="input"
531
563
  @prefix="console.log('before')"
@@ -593,7 +625,7 @@ change - событие изменения значения компонента
593
625
  'SwInput': {
594
626
  name: 'input1',
595
627
  placeholder: 'Введите текст',
596
- before: 'search'
628
+ before: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/search.svg'
597
629
  }
598
630
  }
599
631
  ]
@@ -656,7 +688,7 @@ const menuConfig = {
656
688
  'SwButton': {
657
689
  label: 'Нажми меня',
658
690
  type: 'primary',
659
- prefix: 'star'
691
+ prefix: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/star.svg'
660
692
  },
661
693
  'SwSwitch': [
662
694
  {
@@ -715,7 +747,7 @@ const menuItems = [
715
747
  'SwInput': {
716
748
  name: 'search',
717
749
  placeholder: 'Поиск...',
718
- before: 'search',
750
+ before: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/search.svg',
719
751
  size: 'small'
720
752
  }
721
753
  }
@@ -742,19 +774,19 @@ const dropdownMenu = {
742
774
  'SwButton': {
743
775
  label: 'Меню',
744
776
  type: 'primary',
745
- postfix: 'arrow-down'
777
+ postfix: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/chevron-down.svg'
746
778
  }
747
779
  },
748
780
  'slot.dropdown': [
749
781
  {
750
782
  'SwDropdownItem': {
751
- iconBefore: 'user',
783
+ iconBefore: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/user.svg',
752
784
  slot: 'Профиль'
753
785
  }
754
786
  },
755
787
  {
756
788
  'SwDropdownItem': {
757
- iconBefore: 'settings',
789
+ iconBefore: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/settings.svg',
758
790
  slot: 'Настройки'
759
791
  }
760
792
  }
@@ -776,7 +808,7 @@ import { components } from '@studio-west/component-sw'
776
808
  const complexMenu = {
777
809
  'SwSection': {
778
810
  name: 'Панель управления',
779
- iconAfter: 'chevron-down',
811
+ iconAfter: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/chevron-down.svg',
780
812
  slot: 'Основное содержимое секции',
781
813
  'slot.footer': {
782
814
  'SwButtonGroup': {
@@ -814,7 +846,7 @@ const complexMenu = {
814
846
  |-------------|-----------|--------------|----------------------------------------------------------------------------|
815
847
  | `name` | `String` | `` | Добавляет текстовый заголовок, при отсутствии реализован слот `"header"`. |
816
848
  | `class` | `String` | `sw-section` | Добавляет пользовательский CSS-класс к компоненту. |
817
- | `iconAfter` | `String` | `` | Добавляет иконку из коллекции для кнопки закрытия (при наличии заголовка). |
849
+ | `iconAfter` | `String` | `` | Иконка кнопки закрытия (при заголовке): имя из спрайта или URL. См. [SwIcon](#swicon). |
818
850
 
819
851
  ### Слоты / Slots
820
852
 
@@ -849,7 +881,7 @@ model - состояние компонента булевое значение,
849
881
  |-------------|-----------|--------------|----------------------------------------------------|
850
882
  | `name` | `String` | `` | Добавляет заголовок в секцию. |
851
883
  | `class` | `String` | `sw-section` | Добавляет пользовательский CSS-класс к компоненту. |
852
- | `iconAfter` | `String` | `` | Добавляет иконку из коллекции. |
884
+ | `iconAfter` | `String` | `` | Иконка в заголовке: имя из спрайта или URL. См. [SwIcon](#swicon). |
853
885
 
854
886
  ### Слоты / Slots
855
887
 
@@ -869,7 +901,7 @@ header - клик по всему Header
869
901
  <sw-section
870
902
  name="section"
871
903
  class="custom-class"
872
- iconAfter="cross"
904
+ icon-after="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/x.svg"
873
905
  >
874
906
  <p>Содержимое / Content</p>
875
907
  <template #footer>
@@ -1005,7 +1037,7 @@ model - значение слайдера (число, массив чисел)
1005
1037
  class="custom-class"
1006
1038
  vertical
1007
1039
  >
1008
- <svg-icon icon-class="component" />
1040
+ <sw-icon icon-class="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/components.svg" />
1009
1041
  </sw-slider>
1010
1042
  ```
1011
1043
  ---
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.14",
4
4
  "description": "Vue components of Component-SW collection.",
5
5
  "type": "module",
6
6
  "keywords": [