@studio-west/component-sw 0.5.6 → 0.5.7

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 +384 -49
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,7 +1,6 @@
1
- Находится в разработке !
2
1
  # Component SW - UI компоненты с поддержкой светлой и темной системной темы
3
2
 
4
- Библиотека компонентов `Component SW` предоставляет набор готовых UI-компонентов на vue 3 для быстрой разработки интерфейсов. Каждый компонент имеет набор свойств, которые можно настраивать для достижения желаемого поведения и внешнего вида. Имеет поддержку светлой и темной системной темы.
3
+ Библиотека компонентов `Component SW` предоставляет набор готовых UI-компонентов на vue 3 для быстрой разработки интерфейсов. Каждый компонент имеет набор свойств, которые можно настраивать для достижения желаемого поведения и внешнего вида. Имеет поддержку светлой и темной системной темы. А также имеет поддержку мобильных систем разработки
5
4
 
6
5
  ---
7
6
 
@@ -14,22 +13,36 @@ The `Component SW` library provides a set of ready-to-use UI components on Vue 3
14
13
  ## Содержание / Table of Contents
15
14
 
16
15
  - [Установка / Install](#установка--install)
16
+
17
17
  - [SwAlert](#swalert)
18
+
18
19
  - [SwButton](#swbutton)
19
- - [SwInput](#swinput)
20
+
20
21
  - [SwCollapse](#swcollapse)
22
+
23
+ - [SwDatePicker](#swdatepicker)
24
+
21
25
  - [SwDropdown](#swdropdown)
26
+
22
27
  - [SwDropdownItem](#swdropdownitem)
23
- - [SwDatePicker](#swdatepicker)
24
- - [SwMtssage](#swmessage)
25
- - [SwSection](#swsection)
28
+
29
+ - [SwInput](#swinput)
30
+
31
+ - [SwMessage](#swmessage)
32
+
26
33
  - [SwSelect](#swselect)
34
+
35
+ - [SwSection](#swsection)
36
+
27
37
  - [SwSkeleton](#swskeleton)
38
+
28
39
  - [SwSkeletonItem](#swskeletonitem)
40
+
29
41
  - [SwSwitch](#swswitch)
42
+
30
43
  - [SwTabs](#swtabs)
31
- - [SwTabsPane](#swtabspane)
32
44
 
45
+ - [SwTabsPane](#swtabspane)
33
46
  ---
34
47
 
35
48
  ### Установка / Install
@@ -39,14 +52,15 @@ npm install @studio-west/component-sw
39
52
 
40
53
  ### Глобальное подключение / global add to main.js:
41
54
  ```js
42
- import Library from '@studio-west/component-sw';
55
+ import { Library } from '@studio-west/component-sw';
43
56
  import '@studio-west/component-sw/dist/component-sw.css';
44
57
 
45
58
  app.use(Library)
46
59
  ```
47
60
  Установка в ручную светлой и темной темы - добавление к тегу `html` классов `dark` или `light` / Installation in a manual light and dark theme - adding to the tag `html` classes` dark` or `light`
48
61
 
49
- пример:
62
+ ### Пример использования / Example Usage
63
+
50
64
  ```js
51
65
  const darkMode = () => {
52
66
  if(mode.value === 'dark-theme') {
@@ -60,14 +74,14 @@ const darkMode = () => {
60
74
  mode.value = (document.querySelector('html').classList.contains('dark')) ? 'light-theme' : 'dark-theme'
61
75
  }
62
76
  ```
77
+ ## SwAlert
63
78
 
64
- ---
79
+ Функция / Компонент `SwAlert`
65
80
 
66
- ## SwAlert
67
- Функция / Компонент `SwAlert`
68
81
 
69
82
  ### Свойства / Properties
70
83
 
84
+
71
85
  | Имя | Тип | Значения/Описание |
72
86
  |------------|----------|-----------------------------------------------------------------------------|
73
87
  | `class` | `String` | Добавляет пользовательский CSS-класс к компоненту. |
@@ -81,14 +95,17 @@ const darkMode = () => {
81
95
  ### Пример использования / Example Usage
82
96
 
83
97
  ```js
84
- // в main:
85
- import { swAlert } from "@studio-west/component-sw/swAlert.js";
86
-
87
- swAlert({ message: 'Предупреждение!', type: 'warning' });
88
- // --
89
- app.provide('swAlert', swAlert) // 💡 Пробросили через provide
98
+ // .js addons
99
+ import { Alert } from "@studio-west/component-sw"
100
+ Alert({message: 'Message', type: 'danger', duration:10000, before:'bell'})
101
+
102
+ // Composition API else <script setup>:
103
+ import {inject} from "vue"
104
+ const Alert = inject('Alert')
105
+ Alert({message: 'Alarm!', type: 'warning'})
106
+ //Options API:
107
+ this.$Alert({message: 'Welcome!', type: 'success'});
90
108
  ```
91
-
92
109
  ---
93
110
 
94
111
  ## SwButton
@@ -103,26 +120,153 @@ app.provide('swAlert', swAlert) // 💡 Пробросили через provide
103
120
  | `size` | `String` | Размер кнопки: `'large'`, `'small'`. |
104
121
  | `type` | `String` | Тип кнопки: `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`. |
105
122
  | `round` | `Boolean` | Делает кнопку визуально закругленной. |
106
- | `text` | `Boolean` | Делает кнопку визуально похожей на текст (без фона). |
107
- | `link` | `Boolean` | Преобразует кнопку в ссылку. |
123
+ | `text` | `Boolean` | Делает кнопку визуально похожей на текст (без фона только граница). |
124
+ | `link` | `Boolean` | Преобразует кнопку в ссылку(без фона и границ). |
108
125
  | `href` | `String` | URL, на который будет перенаправлен пользователь при клике (если `link=true`). |
109
126
 
110
127
  ### Пример использования / Example Usage
111
128
 
112
129
  ```html
113
130
  <sw-button
114
- class="custom-class"
115
- size="large"
116
- type="primary"
117
- round
118
- text
119
- link
120
- href="https://example.com"
131
+ class="custom-class"
132
+ size="large"
133
+ type="primary"
134
+ round
135
+ text
136
+ link
137
+ href="https://example.com"
121
138
  >
122
- Нажми меня / Click Me
139
+ Нажми меня / Click Me
123
140
  </sw-button>
124
141
  ```
142
+ ---
143
+
144
+ ## SwCollapse
145
+
146
+ Компонент `SwCollapse` представляет собой аналог тегов <details> + <summary>, но с анимацией.
147
+
148
+ ### Свойства / Properties
149
+
150
+ | Имя | Тип | Значения/Описание |
151
+ |----------|-----------|-------------------------------------|
152
+ | `visual` | `Boolean` | Видимость `'true'` - по умолчанию. |
153
+
154
+ ### Слоты / Slots
155
+
156
+ Default - Контент для скрытия
157
+
158
+ ### Пример использования / Example Usage
159
+
160
+ ```html
161
+ <sw-collapse :visual="false">
162
+ <p>Скрытое / Hidden</p>
163
+ </sw-collapse>
164
+ ```
165
+ ---
166
+
167
+ ## SwDatePicker
168
+
169
+ Компонент `SwDatePicker` представляет собой панель с календарем.
170
+
171
+ ### Свойства / Properties
172
+
173
+ | Имя | Тип | Значения/Описание |
174
+ |--------------|------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
175
+ | `data` | `Object` | Начальные данные - диапазон ( при `'solid'` - используется только `'startDate'`) изначальных выбранных дат {endDate: '14-04-2025', startDate:'30-03-2025', holiday: { preholidays: ["2020-03-30"], holidays: ["2020-03-30"], holiday: ["2020-03-30"], nowork: ["2020-03-30"] }}, ограничение не более 2х месяцев. |
176
+ | `limitation` | `Boolean, Array` | Массив ограничений дат: [{endDate: '14-04-2025', startDate:'30-03-2025'}], false - по умолчанию. |
177
+ | `range` | `String` | Тип календаря: `'year'`,`'range'`, `'solid'` - по умолчанию. |
178
+
179
+ ### События / Events
180
+
181
+ input - событие выбора с данными {dateStart: "11.11.2011", dateEnd: "14-12-2011" ( при range), count: 1 }
182
+
183
+ ### Слоты / Slots
184
+
185
+ #double-arrow - для двойной стрелки по умолчанию `«`
186
+
187
+ #arrow - для одинарной стрелки по умолчанию `‹`
188
+
189
+ ### Пример использования / Example Usage
190
+
191
+ ```html
192
+ <sw-date-picker
193
+ :data="{startDate: '11.11.2011' endDate: '14-12-2011'}"
194
+ limitation=" [{endDate: '14-04-2025', startDate:'30-03-2025'}]"
195
+ range="range"
196
+ @selectPicker.stop="processing"
197
+ >
198
+ <template #double-arrow>«</template>
199
+ <template #arrow>‹</template>
200
+ </sw-date-picker>
201
+ ```
202
+ ---
203
+
204
+ ## SwDropdown
205
+
206
+ Компонент SwDropdown это всплывающее меню с возможностью настройки места относительного всплытия и типа Тригера.
207
+
208
+ ### Свойства / Properties
209
+
210
+
211
+ | Имя | Тип | Значения/Описание |
212
+ |-------------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
213
+ | `class` | `String` | Добавляет пользовательский CSS-класс к компоненту. |
214
+ | `size` | `String` | Размер поля: `'large'`, `'small'`. |
215
+ | `type` | `String` | `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`. |
216
+ | `trigger` | `String` | `'click'` - по умолчанию, `'hover'`, `'context'`,`'none'`. |
217
+ | `placement` | `String` | Относительное место всплытия `'bottom-left'` - по умолчанию, `'bottom'`, `'bottom-right'`, `'top-left'`, `'top'`, `'top-right'`, `'left'`, `'right'`. |
218
+ | `maxWidth` | `Number` | Максимальная ширина меню в пикселях. |
219
+
220
+ ### Слоты / Slots
221
+
222
+ Default - текст описания или модуль / модули
223
+
224
+ ### Пример использования / Example Usage
225
+
226
+ ```html
227
+ <script>let visual = false </script>
228
+ <sw-dropdown
229
+ class="custom-class"
230
+ trigger="none"
231
+ v-model="visual"
232
+ maxWidth="o250"
233
+ >
234
+ <button @cick="visual = true">Описание</button>
235
+ </sw-dropdown>
236
+ ```
237
+ ---
238
+
239
+ ## SwDropdownItem
240
+
241
+ Компонент SwDropdownItem это пункт во всплывающем меню с возможностью добавления в начало иконки.
242
+
243
+ ### Свойства / Properties
244
+
245
+
246
+ | Имя | Тип | Значения/Описание |
247
+ |---------------|----------|--------------------------------------------------------------|
248
+ | `class` | `String` | Добавляет пользовательский CSS-класс к компоненту. |
249
+ | `size` | `String` | Размер поля: `'large'`, `'small'`. |
250
+ | `type` | `String` | `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`. |
251
+ | `iconBefore` | `String` | Название иконки в коллекции. |
252
+
253
+ ### Слоты / Slots
254
+
255
+ Default - текст названия или модуль
256
+
257
+ ### Пример использования / Example Usage
125
258
 
259
+ ```html
260
+ <script>let visual = false </script>
261
+ <sw-dropdown
262
+ class="custom-class"
263
+ trigger="none"
264
+ v-model="visual"
265
+ maxWidth="o250"
266
+ >
267
+ <sw-dropdown-item @cick="visual = true" iconBefore="documents">Описание</sw-dropdown-item>
268
+ </sw-dropdown>
269
+ ```
126
270
  ---
127
271
 
128
272
  ## SwInput
@@ -156,7 +300,9 @@ prefix - клик иконке before
156
300
 
157
301
  suffix - клик иконке after
158
302
 
159
- ### Пример использования
303
+ focusInput - focus на поле ввода
304
+
305
+ ### Пример использования / Example Usage
160
306
 
161
307
  ```html
162
308
  <sw-input
@@ -175,28 +321,156 @@ suffix - клик иконке after
175
321
  </sw-input>
176
322
  ```
177
323
  ---
178
- ## SwDropdown
179
324
 
180
- Компонент SwDropdown это всплывающее меню с возможностью настройки места относительного всплытия и типа Тригера.
325
+ ## SwMessage
326
+
327
+ Компонент SwMessage это выплывающее окно, центрируется по центру.
181
328
 
182
329
  ### Свойства / Properties
183
330
 
184
331
 
185
- | Имя | Тип | Значения/Описание |
186
- |-------------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
187
- | `class` | `String` | Добавляет пользовательский CSS-класс к компоненту. |
188
- | `size` | `String` | Размер поля: `'large'`, `'small'`. |
189
- | `type` | `String` | `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`. |
190
- | `trigger` | `String` | `'click'` - по умолчанию, `'hover'`, `'context'`,`'none'`. |
191
- | `placement` | `String` | Относительное место всплытия `'bottom-left'` - по умолчанию, `'bottom'`, `'bottom-right'`, `'top-left'`, `'top'`, `'top-right'`, `'left'`, `'right'`. |
192
- | `manual` | `Boolean` | Ручное управление показом по умолчанию `false`. |
193
- | `maxWidth` | `Number` | Максимальная ширина меню в пикселях. |
332
+ | Имя | Тип | Значения/Описание |
333
+ |-------------|-----------|-----------------------------------------------------------------------------|
334
+ | `name` | `String` | Добавляет текстовый заголовок, при отсутствии реализован слот `"header"`. |
335
+ | `class` | `String` | Добавляет пользовательский CSS-класс к компоненту. |
336
+ | `iconAfter` | `String` | Добавляет иконку из коллекции для кнопки закрытия (при наличии заголовка). |
194
337
 
338
+ ### Слоты / Slots
339
+
340
+ #header - слот для заголовка окна.
195
341
 
196
- ### Пример использования
342
+ #footer - слот для подвала.
343
+
344
+ ### Пример использования / Example Usage
197
345
 
198
346
  ```html
199
- <sw-dropdown
347
+ <sw-message
348
+ v-model="model"
349
+ name="Message"
350
+ class="custom-class"
351
+ >
352
+ <p>Описание / Description</p>
353
+ </sw-message>
354
+ ```
355
+ ---
356
+
357
+ ## SwSection
358
+
359
+ Компонент SwSection это тег section с шаблоном из слотов, по умолчанию в слот #header добавлено заголовок и иконка.
360
+
361
+ ### Свойства / Properties
362
+
363
+
364
+ | Имя | Тип | Значения/Описание |
365
+ |-------------|-----------|----------------------------------------------------|
366
+ | `name` | `String` | Добавляет заголовок в секцию. |
367
+ | `class` | `String` | Добавляет пользовательский CSS-класс к компоненту. |
368
+ | `iconAfter` | `String` | Добавляет иконку из коллекции. |
369
+
370
+ ### Слоты / Slots
371
+
372
+ #header - слот для заголовка секции.
373
+
374
+ Default - содержимое секции
375
+
376
+ #footer - слот для подвала секции.
377
+
378
+ ### События / Events
379
+
380
+ header - клик по всему Header
381
+
382
+ ### Пример использования / Example Usage
383
+
384
+ ```html
385
+ <sw-section
386
+ name="section"
387
+ class="custom-class"
388
+ iconAfter="cross"
389
+ >
390
+ <p>Содержимое / Content</p>
391
+ <template #footer>
392
+ <p>Footer!</p>
393
+ </template>
394
+ </sw-section>
395
+ ```
396
+ ---
397
+
398
+ ## SwSelect
399
+
400
+ Компонент SwSelect - реализация подсказок для https://dadata.ru/api/suggest/address/.
401
+
402
+ ### Свойства / Properties
403
+
404
+
405
+ | Имя | Тип | Значения/Описание |
406
+ |----------------|-----------|-----------------------------------------------|
407
+ | `class` | `String` | Добавляет пользовательский CSS-класс к popup. |
408
+ | `size` | `String` | Размер поля: `'large'`, `'small'`. |
409
+ | `placeholder` | `String` | Добавляет в placeholder описание. |
410
+ | `token` | `String` | API-ключ для DADATA. |
411
+
412
+
413
+ ### Пример использования / Example Usage
414
+
415
+ ```html
416
+ <sw-select
417
+ v-model="model"
418
+ class="custom-class"
419
+ placeholder="placeholder"
420
+ :token="${API_KEY}"
421
+ />
422
+ ```
423
+ ---
424
+
425
+ ## SwSkeleton
426
+
427
+ Компонент SwSkeleton используется для анимации загрузки данных, выступая оболочкой компонента SwSkeletonItem
428
+ или пользовательского компонента при использовании слота #skeleton, по умолчанию в слот #skeleton добавлен 1 SwSkeletonItem с базовыми настройками
429
+
430
+ ### Свойства / Properties
431
+
432
+
433
+ | Имя | Тип | Значения/Описание |
434
+ |----------|-----------|----------------------------------------------------|
435
+ | `class` | `String` | Добавляет пользовательский CSS-класс к компоненту. |
436
+ | `visual` | `Boolean` | Тригер на переключение. |
437
+
438
+ ### Слоты / Slots
439
+
440
+ Default - Содержимое
441
+
442
+ #skeleton - слот для skeleton
443
+
444
+ ### Пример использования / Example Usage
445
+
446
+ ```html
447
+ <sw-skeleton
448
+ :visual="visual"
449
+ >
450
+ <p>Содержимое / Content</p>
451
+ </sw-skeleton>
452
+ ```
453
+ ---
454
+
455
+ ## SwSkeletonItem
456
+
457
+ Компонент SwSkeletonItem представляет собой полоску псевдо данных с возможностью анимирования.
458
+
459
+ ### Свойства / Properties
460
+
461
+
462
+ | Имя | Тип | Значения/Описание |
463
+ |------------|-----------|----------------------------------------------------|
464
+ | `width` | `String` | Ширина элемента в процентах. |
465
+ | `class` | `String` | Добавляет пользовательский CSS-класс к компоненту. |
466
+ | `animate` | `String` | Добавляет анимацию в элемент. |
467
+ | `size` | `String` | Размер поля: `'large'`, `'small'`. |
468
+
469
+
470
+ ### Пример использования / Example Usage
471
+
472
+ ```html
473
+ <sw-skeleton-item
200
474
  v-model="model"
201
475
  name="switch"
202
476
  class="custom-class"
@@ -204,8 +478,8 @@ suffix - клик иконке after
204
478
  on="on"
205
479
  off="off"
206
480
  >
207
- <p>Описание</p>
208
- </sw-dropdown>
481
+ <p>Описание / Description</p>
482
+ </sw-skeleton-item>
209
483
  ```
210
484
  ---
211
485
 
@@ -226,7 +500,11 @@ suffix - клик иконке after
226
500
  | `off` | `String` | Текст при false. |
227
501
  | `checkbox` | `Boolean` | Визуализирует как обычный чекбокс. |
228
502
 
229
- ### Пример использования
503
+ ### Слоты / Slots
504
+
505
+ Default - текст описания
506
+
507
+ ### Пример использования / Example Usage
230
508
 
231
509
  ```html
232
510
  <sw-switch
@@ -237,15 +515,72 @@ suffix - клик иконке after
237
515
  on="on"
238
516
  off="off"
239
517
  >
240
- <p>Описание</p>
518
+ <p>Описание / Description</p>
241
519
  </sw-switch>
242
520
  ```
243
521
  ---
244
522
 
523
+ ## SwTabs
524
+
525
+ Компонент SwTabs представляет собой панель вкладок SwTabsPane.
526
+
527
+ ### Свойства / Properties
528
+
529
+
530
+ | Имя | Тип | Значения/Описание |
531
+ |---------|-----------|---------------------------------------------------------|
532
+ | `class` | `String` | Добавляет пользовательский CSS-класс к компоненту. |
533
+
534
+ ### Слоты / Slots
535
+
536
+ Default - для компонентов SwTabsPane
537
+
538
+ ### Пример использования / Example Usage
539
+
540
+ ```html
541
+ <sw-tabs
542
+ v-model="activeTabId"
543
+ class="custom-class"
544
+ >
545
+ <sw-tabs-pane label="Label" title="Title">Вкладка / Tab</sw-tabs-pane>
546
+ </sw-tabs>
547
+ ```
548
+ ---
549
+
550
+ ## SwTabsPane
551
+
552
+ Компонент SwTabsPane представляет собой оболочку для вкладок.
553
+
554
+ ### Свойства / Properties
555
+
556
+
557
+ | Имя | Тип | Значения/Описание |
558
+ |---------|-----------|-----------------------------------------------------------------------------------------|
559
+ | `title` | `String` | название унификатор - обязателен при отсутствии `label` будет взят за название вкладки. |
560
+ | `label` | `String` | название вкладки при отсутствии возьмется из `title`. |
561
+
562
+ ### Слоты / Slots
563
+
564
+ Default - для вкладок
565
+
566
+ ### Пример использования / Example Usage
567
+
568
+ ```html
569
+ <sw-tabs
570
+ v-model="activeTabId"
571
+ class="custom-class"
572
+ >
573
+ <sw-tabs-pane label="Label" title="Title">Вкладка / Tab</sw-tabs-pane>
574
+ </sw-tabs>
575
+ ```
576
+ ---
577
+
245
578
  ### Лицензия / License
246
579
 
247
- Этот проект распространяется под лицензией MIT. Подробности см. в файле LICENSE .
580
+ Этот проект распространяется под лицензией MIT. Подробности см. в файле LICENSE . /
248
581
  This project is distributed under the MIT License. For details, see the LICENSE file.
582
+
249
583
  ---
250
- Если у вас есть вопросы или предложения, пожалуйста, создайте issue на почту info@studiowest.ru.
584
+
585
+ Если у вас есть вопросы или предложения, пожалуйста, создайте issue на почту info@studiowest.ru. /
251
586
  If you have any questions or suggestions, please create an issue to E-mail info@studiowest.ru.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@studio-west/component-sw",
3
- "version": "0.5.6",
3
+ "version": "0.5.7",
4
4
  "description": "Vue components of Component SW collection.",
5
5
  "type": "module",
6
6
  "keywords": [