@studio-west/component-sw 0.1.41 → 0.1.43
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.
package/README.md
CHANGED
|
@@ -1,6 +1,102 @@
|
|
|
1
|
-
|
|
1
|
+
находится в разработке !
|
|
2
|
+
# Component SW - UI компоненты с поддержкой светлой и темной системной темы
|
|
2
3
|
|
|
4
|
+
Библиотека компонентов `Component SW` предоставляет набор готовых UI-компонентов для быстрой разработки интерфейсов. Каждый компонент имеет набор свойств, которые можно настраивать для достижения желаемого поведения и внешнего вида. Имеет поддержку светлой и темной системной темы.
|
|
3
5
|
|
|
4
|
-
|
|
6
|
+
---
|
|
5
7
|
|
|
6
|
-
|
|
8
|
+
# Component SW - UI Components with Light and Dark Theme Support
|
|
9
|
+
|
|
10
|
+
The `Component SW` library provides a set of ready-to-use UI components for rapid interface development. Each component has a set of properties that can be customized to achieve the desired behavior and appearance. It supports both light and dark system themes.
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## Содержание / Table of Contents
|
|
15
|
+
|
|
16
|
+
- [SwButton](#swbutton)
|
|
17
|
+
- [SwInput](#swinput)
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## SwButton
|
|
22
|
+
|
|
23
|
+
Компонент `SwButton` представляет собой кнопку с различными настраиваемыми параметрами.
|
|
24
|
+
|
|
25
|
+
### Свойства / Properties
|
|
26
|
+
|
|
27
|
+
| Имя | Тип | Значения/Описание |
|
|
28
|
+
|----------|------------|----------------------------------------------------------------------------------|
|
|
29
|
+
| `class` | `String` | Добавляет пользовательский CSS-класс к компоненту. |
|
|
30
|
+
| `size` | `String` | Размер кнопки: `'large'`, `'small'`. |
|
|
31
|
+
| `type` | `String` | Тип кнопки: `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`. |
|
|
32
|
+
| `round` | `Boolean` | Делает кнопку визуально закругленной. |
|
|
33
|
+
| `text` | `Boolean` | Делает кнопку визуально похожей на текст (без фона). |
|
|
34
|
+
| `link` | `Boolean` | Преобразует кнопку в ссылку. |
|
|
35
|
+
| `href` | `String` | URL, на который будет перенаправлен пользователь при клике (если `link=true`). |
|
|
36
|
+
|
|
37
|
+
### Пример использования / Example Usage
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<sw-button
|
|
41
|
+
class="custom-class"
|
|
42
|
+
size="large"
|
|
43
|
+
type="primary"
|
|
44
|
+
round
|
|
45
|
+
text
|
|
46
|
+
link
|
|
47
|
+
href="https://example.com"
|
|
48
|
+
>
|
|
49
|
+
Нажми меня / Click Me
|
|
50
|
+
</sw-button>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## SwInput
|
|
56
|
+
|
|
57
|
+
Компонент SwInput представляет собой поле ввода с возможностью настройки внешнего вида и поведения.
|
|
58
|
+
|
|
59
|
+
### Свойства / Properties
|
|
60
|
+
|
|
61
|
+
| Имя | Тип | Значения/Описание |
|
|
62
|
+
|---------------|-----------|----------------------------------------------------------|
|
|
63
|
+
| `name` | `String` | Обязателен! нужен для связывания через id input и label |
|
|
64
|
+
| `class` | `String` | Добавляет пользовательский CSS-класс к компоненту. |
|
|
65
|
+
| `size` | `String` | Размер поля: `'large'`, `'small'`. |
|
|
66
|
+
| `type` | `String` | Тип поля: `'text'`- по умолчанию, `'phone'`- телефон. |
|
|
67
|
+
| `before` | `String` | Название svg в спрайте загружаемое в начале. |
|
|
68
|
+
| `after` | `String` | Название svg в спрайте загружаемое в конце. |
|
|
69
|
+
| `placeholder` | `String` | текст Placeholder. |
|
|
70
|
+
| `label` | `String` | Текст в Label |
|
|
71
|
+
|
|
72
|
+
### Слоты / Slots
|
|
73
|
+
|
|
74
|
+
#prefix - вставка при отсутствии before не обязательно / Insertion when before is not used (optional).
|
|
75
|
+
|
|
76
|
+
#suffix - вставка при отсутствии after не обязательно / Insertion when after is not used (optional).
|
|
77
|
+
|
|
78
|
+
### Пример использования
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<sw-input
|
|
82
|
+
name="input"
|
|
83
|
+
class="custom-class"
|
|
84
|
+
size="large"
|
|
85
|
+
type="phone"
|
|
86
|
+
before="phone"
|
|
87
|
+
after=""
|
|
88
|
+
placeholder="input"
|
|
89
|
+
label="input"
|
|
90
|
+
>
|
|
91
|
+
<template #suffix>#</template>
|
|
92
|
+
</sw-input>
|
|
93
|
+
```
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
### Лицензия / License
|
|
97
|
+
|
|
98
|
+
Этот проект распространяется под лицензией MIT. Подробности см. в файле LICENSE .
|
|
99
|
+
This project is distributed under the MIT License. For details, see the LICENSE file.
|
|
100
|
+
---
|
|
101
|
+
Если у вас есть вопросы или предложения, пожалуйста, создайте issue на почту info@studiowest.ru.
|
|
102
|
+
If you have any questions or suggestions, please create an issue to E-mail info@studiowest.ru.
|
package/dist/component-sw.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--sw-color-default: #DFDFDF;--sw-color-primary: #3EAF4E;--sw-color-success: #FFE603;--sw-color-info: #C0C0C0;--sw-color-warning: #FF7A00;--sw-color-danger: #CC2D4A;--sw-color-preholiday: #FFE78070;--sw-color-weekend: #ff808070;--sw-color-select: #007bff70;--sw-color-holiday: #ff0000;--sw-color-nowork: #ff0000;--sw-color-active: #007bff;--sw-text-color-primary: #333333;--sw-text-color-secondary: #4C4C4C;--sw-text-color-third: #818181;--sw-text-color-revers: white;--sw-bg-color: #f4f4f4;--sw-bg-color-page: white;--sw-bg-color-second: #FAFAFA;--sw-border-color: #D6D6D6;--sw-border-color-input: #CECECE;--sw-font-size: 1rem;--sw-font-size-small: .875rem;--sw-font-size-large: 1.125rem;--sw-font-size-big: 2.8rem;--sw-border-radius: .625rem;--sw-border-round: 3.625rem;--sw-component-size-base: 3rem;--sw-component-size-small: 1.625rem;--sw-component-size-large: 3.5rem;--sw-component-size-big: 10.5rem;font-family:Montserrat,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--sw-text-color-primary);background-color:var(--sw-bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: dark){:root{--sw-color-default: #4E4E4E;--sw-color-primary: #38A151;--sw-color-success: #FFE603;--sw-color-info: #808185;--sw-color-warning: #FF7A00;--sw-color-danger: #CC2D4A;--sw-text-color-primary: white;--sw-text-color-secondary: #FAFAFA;--sw-text-color-third: #FAFAFA;--sw-text-color-revers: white;--sw-bg-color: #182127;--sw-bg-color-page: #323741;--sw-bg-color-second: #232832;--sw-border-color: #4E4E4E;--sw-border-color-input: #5C5E63;--sw-shadow: 0 100px 80px rgba(0, 0, 0, .03), 0 41.7776px 33.4221px rgba(0, 0, 0, .0215656), 0 22.3363px 17.869px rgba(0, 0, 0, .0178832), 0 12.5216px 10.0172px rgba(0, 0, 0, .015), 0 6.6501px 5.32008px rgba(0, 0, 0, .0121168), 0 2.76726px 2.21381px rgba(0, 0, 0, .00843437)}}.sw-tabs{-webkit-user-select:none;user-select:none}.sw-tabs>header{display:flex;border-bottom:2px solid var(--sw-color-info);color:var(--sw-color-info);-webkit-user-select:none;user-select:none;font-size:var(--sw-font-size-small);font-weight:400;margin-bottom:1.25rem;transition:all .6s ease-out}.sw-tabs>header span{position:relative;top:2px;border-radius:0;padding:5px;cursor:pointer;border:none;background:none;outline:none}.sw-tabs>header span.active{border-bottom:2px solid var(--sw-color-primary);color:var(--sw-color-primary);font-weight:700}.sw-tabs>header span:hover:not(.active){color:var(--sw-border-color)}.sw-input{display:flex;align-items:center;position:relative;gap:0 1.75rem;padding:0 1.2em;border:1px solid var(--sw-border-color-input);border-radius:var(--sw-border-radius)}.sw-input input{line-height:var(--sw-component-size-base);border:none;width:100%;font-size:var(--sw-font-size-large);background:none;outline:none}.sw-input .svg-icon{font-size:20px;color:var(--sw-text-color-third)}.sw-input>svg+label{left:4rem}.sw-input.sw-small input{line-height:var(--sw-component-size-small)}.sw-input.sw-large input{line-height:var(--sw-component-size-large)}.sw-button{border-radius:1rem;border:1px solid var(--sw-color-default);padding:0 1.2em;min-height:var(--sw-component-size-base);font-size:var(--sw-font-size);font-weight:500;cursor:pointer;transition:border-color .25s;background-color:var(--sw-color-default);color:var(--sw-text-color-revers)}.sw-form-item{display:flex;justify-content:space-between;font-size:var(--sw-font-size-small);color:var(--sw-text-color-secondary);gap:1rem}.sw-form-item.sw-start{justify-content:flex-start}.sw-form-item.sw-end{justify-content:flex-end}.sw-form-item.sw-around{justify-content:space-around}.sw-dropdown{position:relative;display:inline-block}.sw-dropdown-popup{z-index:3;padding:8px;min-width:200px;margin:0;background-color:var(--sw-bg-color-second);border:1px solid var(--sw-border-color);border-radius:4px;box-shadow:0 2px 8px #0000001a}.sw-dropdown-item{display:block}.sw-dropdown-item svg{margin-right:.5rem}.sw-dropdown-item:hover{color:var(--sw-color-primary)}.sw-collapse{transition:all .3s ease-out;overflow:hidden;box-sizing:border-box;margin:0}.sw-switch{display:inline-flex;align-items:center;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sw-switch>input{display:none}.sw-switch>input:checked+label{background-color:var(--sw-color-primary)}.sw-switch>input:checked+label:before{color:var(--sw-text-color-revers);content:attr(data-onlabel);left:.5rem;right:auto}.sw-switch>input:checked+label:after{background:#f7f7f7;left:2.125rem}.sw-switch>label{background-color:var(--sw-color-info);border-radius:1rem;cursor:pointer;flex:0 0 4rem;height:1.75rem;margin:.5rem;position:relative;transition:all .3s;width:4rem}.sw-switch>label:before{color:var(--sw-text-color-revers);content:attr(data-offlabel);display:block;font-size:1rem;position:absolute;right:.5rem;transition:all .3s}.sw-switch>label:after{background:var(--sw-text-color-revers);border:1px solid var(--sw-color-info);border-radius:50%;content:"";height:2rem;left:-.125rem;position:absolute;top:-.125rem;transition:all .3s;width:2rem}.sw-switch.sw-small>label{width:3.125rem;flex:0 0 3.125rem}.sw-switch.sw-small>label:before{content:""}.sw-switch.sw-small>label:after{content:"";left:.15rem;top:.125rem;width:1.375rem;height:1.375rem}.sw-switch.sw-small>input:checked+label:before{content:""}.sw-switch.sw-small>input:checked+label:after{left:1.475rem}.sw-skeleton{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end}.sw-skeleton-item{min-height:var(--sw-component-size-base);width:100%;background:var(--sw-bg-color-second);border-radius:var(--sw-border-radius);border:1px solid var(--sw-bg-color);box-sizing:border-box;overflow:hidden;position:relative}.sw-skeleton-item>div{height:100%;width:10px;background:var(--sw-border-color-input);display:inline-block;animation:sw-skeleton 3s linear infinite normal;position:absolute;transform:skew(-20deg);box-shadow:0 0 20px 20px var(--sw-border-color-input)}.sw-message{position:fixed;z-index:3;background-color:var(--sw-bg-color-page);border:1px solid var(--sw-border-color);border-radius:var(--sw-border-radius);padding:1.875rem;box-sizing:border-box;top:50%;left:50%;transform:translateY(-50%) translate(-50%);min-width:20rem;max-width:95%;max-height:95%}.sw-message>header{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}.sw-message>footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}.sw-modal-footer{margin-top:1rem;display:flex;gap:.5rem;justify-content:flex-end}.sw-data-picker{display:flex}.sw-data-picker .month_year{display:flex;justify-content:space-around;align-items:center}.sw-data-picker .month_year span:not(.text) button{font-size:1.3em}.sw-data-picker>div:not(:first-child){margin-left:2rem}.sw-data-picker button{height:30px;text-align:center;line-height:30px;cursor:pointer;background:none;border:none;border-radius:.2rem;transition:all .3s ease}.sw-data-picker button:hover:not(.disabled):not(.active){color:var(--sw-color-primary)}.sw-data-picker .week{border-bottom:1px solid var(--sw-color-info);margin-bottom:.5rem}.sw-data-picker .month,.sw-data-picker .week{width:250px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:.2rem}.sw-data-picker .month>button,.sw-data-picker .week>button{width:30px}.sw-data-picker .month>button.disabled,.sw-data-picker .week>button.disabled{color:var(--el-color-info);cursor:not-allowed}.sw-data-picker .month>button.preholiday,.sw-data-picker .week>button.preholiday{background-color:var(--sw-color-preholiday)}.sw-data-picker .month>button.weekend,.sw-data-picker .week>button.weekend{background-color:var(--sw-color-weekend)}.sw-data-picker .month>button.select,.sw-data-picker .week>button.select{background-color:var(--sw-color-select)}.sw-data-picker .month>button.holiday,.sw-data-picker .week>button.holiday{background-color:var(--sw-color-holiday)}.sw-data-picker .month>button.nowork,.sw-data-picker .week>button.nowork{background-color:var(--sw-color-nowork)}.sw-data-picker .month>button.active,.sw-data-picker .week>button.active{background-color:var(--sw-color-active)}.sw-round{border-radius:var(--sw-border-round)}.sw-small{min-height:var(--sw-component-size-small)}.sw-large{min-height:var(--sw-component-size-large)}.sw-big{min-height:var(--sw-component-size-big)}.sw-primary{background-color:var(--sw-color-primary);border-color:var(--sw-color-primary)}.sw-success{background-color:var(--sw-color-success);border-color:var(--sw-color-success)}.sw-info{background-color:var(--sw-color-info);border-color:var(--sw-color-info)}.sw-warning{background-color:var(--sw-color-warning);border-color:var(--sw-color-warning)}.sw-danger{background-color:var(--sw-color-danger);border-color:var(--sw-color-danger)}.sw-text{color:var(--sw-color-default);background:none}.sw-text.sw-primary{color:var(--sw-color-primary)}.sw-text.sw-success{color:var(--sw-color-success)}.sw-text.sw-info{color:var(--sw-color-info)}.sw-text.sw-warning{color:var(--sw-color-warning)}.sw-text.sw-danger{color:var(--sw-color-danger)}.sw-link{background:none;border:none;padding:0;color:var(--sw-text-color-secondary);min-height:1em}.sw-link:hover.sw-primary{color:var(--sw-color-primary)}.sw-link:hover.sw-success{color:var(--sw-color-success)}.sw-link:hover.sw-info{color:var(--sw-color-info)}.sw-link:hover.sw-warning{color:var(--sw-color-warning)}.sw-link:hover.sw-danger{color:var(--sw-color-danger)}@keyframes sw-skeleton{0%{left:-50px}to{left:calc(50px + 100%)}}
|
|
1
|
+
:root{--sw-color-default: #DFDFDF;--sw-color-primary: #3EAF4E;--sw-color-success: #FFE603;--sw-color-info: #C0C0C0;--sw-color-warning: #FF7A00;--sw-color-danger: #CC2D4A;--sw-color-preholiday: #FFE78070;--sw-color-weekend: #ff808070;--sw-color-select: #007bff70;--sw-color-holiday: #ff0000;--sw-color-nowork: #ff0000;--sw-color-active: #007bff;--sw-text-color-primary: #333333;--sw-text-color-secondary: #4C4C4C;--sw-text-color-third: #818181;--sw-text-color-revers: white;--sw-bg-color: #f4f4f4;--sw-bg-color-page: white;--sw-bg-color-second: #FAFAFA;--sw-border-color: #D6D6D6;--sw-border-color-input: #CECECE;--sw-font-size: 1rem;--sw-font-size-small: .875rem;--sw-font-size-large: 1.125rem;--sw-font-size-big: 2.8rem;--sw-border-radius: .625rem;--sw-border-round: 3.625rem;--sw-component-size-base: 3rem;--sw-component-size-small: 1.625rem;--sw-component-size-large: 3.5rem;--sw-component-size-big: 10.5rem;font-family:Montserrat,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--sw-text-color-primary);background-color:var(--sw-bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: dark){:root{--sw-color-default: #4E4E4E;--sw-color-primary: #38A151;--sw-color-success: #FFE603;--sw-color-info: #808185;--sw-color-warning: #FF7A00;--sw-color-danger: #CC2D4A;--sw-text-color-primary: white;--sw-text-color-secondary: #FAFAFA;--sw-text-color-third: #FAFAFA;--sw-text-color-revers: white;--sw-bg-color: #182127;--sw-bg-color-page: #323741;--sw-bg-color-second: #232832;--sw-border-color: #4E4E4E;--sw-border-color-input: #5C5E63;--sw-shadow: 0 100px 80px rgba(0, 0, 0, .03), 0 41.7776px 33.4221px rgba(0, 0, 0, .0215656), 0 22.3363px 17.869px rgba(0, 0, 0, .0178832), 0 12.5216px 10.0172px rgba(0, 0, 0, .015), 0 6.6501px 5.32008px rgba(0, 0, 0, .0121168), 0 2.76726px 2.21381px rgba(0, 0, 0, .00843437)}}.sw-tabs{-webkit-user-select:none;user-select:none}.sw-tabs>header{display:flex;border-bottom:2px solid var(--sw-color-info);color:var(--sw-color-info);-webkit-user-select:none;user-select:none;font-size:var(--sw-font-size-small);font-weight:400;margin-bottom:1.25rem;transition:all .6s ease-out}.sw-tabs>header span{position:relative;top:2px;border-radius:0;padding:5px;cursor:pointer;border:none;background:none;outline:none}.sw-tabs>header span.active{border-bottom:2px solid var(--sw-color-primary);color:var(--sw-color-primary);font-weight:700}.sw-tabs>header span:hover:not(.active){color:var(--sw-border-color)}.sw-input{display:flex;align-items:center;position:relative;gap:0 1.75rem;padding:0 1.2em;border:1px solid var(--sw-border-color-input);border-radius:var(--sw-border-radius)}.sw-input input{line-height:var(--sw-component-size-base);border:none;width:100%;font-size:var(--sw-font-size-large);background:none;outline:none}.sw-input .svg-icon{font-size:20px;color:var(--sw-text-color-third)}.sw-input>svg+label{left:4rem}.sw-input.sw-small input{line-height:var(--sw-component-size-small)}.sw-input.sw-large input{line-height:var(--sw-component-size-large)}.sw-button{border-radius:1rem;border:1px solid var(--sw-color-default);padding:0 1.2em;min-height:var(--sw-component-size-base);font-size:var(--sw-font-size);font-weight:500;cursor:pointer;transition:border-color .25s;background-color:var(--sw-color-default);color:var(--sw-text-color-revers)}.sw-form-item{display:flex;justify-content:space-between;font-size:var(--sw-font-size-small);color:var(--sw-text-color-secondary);gap:1rem}.sw-form-item.sw-start{justify-content:flex-start}.sw-form-item.sw-end{justify-content:flex-end}.sw-form-item.sw-around{justify-content:space-around}.sw-form-item.sw-center{justify-content:center}.sw-dropdown{position:relative;display:inline-block}.sw-dropdown-popup{z-index:3;padding:8px;min-width:200px;margin:0;background-color:var(--sw-bg-color-second);border:1px solid var(--sw-border-color);border-radius:4px;box-shadow:0 2px 8px #0000001a}.sw-dropdown-item{display:block}.sw-dropdown-item svg{margin-right:.5rem}.sw-dropdown-item:hover{color:var(--sw-color-primary)}.sw-collapse{transition:all .3s ease-out;overflow:hidden;box-sizing:border-box;margin:0}.sw-switch{display:inline-flex;align-items:center;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sw-switch>input{display:none}.sw-switch>input:checked+label{background-color:var(--sw-color-primary)}.sw-switch>input:checked+label:before{color:var(--sw-text-color-revers);content:attr(data-onlabel);left:.5rem;right:auto}.sw-switch>input:checked+label:after{background:#f7f7f7;left:2.125rem}.sw-switch>label{background-color:var(--sw-color-info);border-radius:1rem;cursor:pointer;flex:0 0 4rem;height:1.75rem;margin:.5rem;position:relative;transition:all .3s;width:4rem}.sw-switch>label:before{color:var(--sw-text-color-revers);content:attr(data-offlabel);display:block;font-size:1rem;position:absolute;right:.5rem;transition:all .3s}.sw-switch>label:after{background:var(--sw-text-color-revers);border:1px solid var(--sw-color-info);border-radius:50%;content:"";height:2rem;left:-.125rem;position:absolute;top:-.125rem;transition:all .3s;width:2rem}.sw-switch.sw-small>label{width:3.125rem;flex:0 0 3.125rem}.sw-switch.sw-small>label:before{content:""}.sw-switch.sw-small>label:after{content:"";left:.15rem;top:.125rem;width:1.375rem;height:1.375rem}.sw-switch.sw-small>input:checked+label:before{content:""}.sw-switch.sw-small>input:checked+label:after{left:1.475rem}.sw-skeleton{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end}.sw-skeleton-item{min-height:var(--sw-component-size-base);width:100%;background:var(--sw-bg-color-second);border-radius:var(--sw-border-radius);border:1px solid var(--sw-bg-color);box-sizing:border-box;overflow:hidden;position:relative}.sw-skeleton-item>div{height:100%;width:10px;background:var(--sw-border-color-input);display:inline-block;animation:sw-skeleton 3s linear infinite normal;position:absolute;transform:skew(-20deg);box-shadow:0 0 20px 20px var(--sw-border-color-input)}.sw-message{position:fixed;z-index:3;background-color:var(--sw-bg-color-page);border:1px solid var(--sw-border-color);border-radius:var(--sw-border-radius);padding:1.875rem;box-sizing:border-box;top:50%;left:50%;transform:translateY(-50%) translate(-50%);min-width:20rem;max-width:95%;max-height:95%}.sw-message>header{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}.sw-message>footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}.sw-modal-footer{margin-top:1rem;display:flex;gap:.5rem;justify-content:flex-end}.sw-data-picker{display:flex}.sw-data-picker .month_year{display:flex;justify-content:space-around;align-items:center}.sw-data-picker .month_year span:not(.text) button{font-size:1.3em}.sw-data-picker>div:not(:first-child){margin-left:2rem}.sw-data-picker button{height:30px;text-align:center;line-height:30px;cursor:pointer;background:none;border:none;border-radius:.2rem;transition:all .3s ease}.sw-data-picker button:hover:not(.disabled):not(.active){color:var(--sw-color-primary)}.sw-data-picker .week{border-bottom:1px solid var(--sw-color-info);margin-bottom:.5rem}.sw-data-picker .month,.sw-data-picker .week{width:250px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:.2rem}.sw-data-picker .month>button,.sw-data-picker .week>button{width:30px}.sw-data-picker .month>button.disabled,.sw-data-picker .week>button.disabled{color:var(--el-color-info);cursor:not-allowed}.sw-data-picker .month>button.preholiday,.sw-data-picker .week>button.preholiday{background-color:var(--sw-color-preholiday)}.sw-data-picker .month>button.weekend,.sw-data-picker .week>button.weekend{background-color:var(--sw-color-weekend)}.sw-data-picker .month>button.select,.sw-data-picker .week>button.select{background-color:var(--sw-color-select)}.sw-data-picker .month>button.holiday,.sw-data-picker .week>button.holiday{background-color:var(--sw-color-holiday)}.sw-data-picker .month>button.nowork,.sw-data-picker .week>button.nowork{background-color:var(--sw-color-nowork)}.sw-data-picker .month>button.active,.sw-data-picker .week>button.active{background-color:var(--sw-color-active)}.sw-round{border-radius:var(--sw-border-round)}.sw-small{min-height:var(--sw-component-size-small)}.sw-large{min-height:var(--sw-component-size-large)}.sw-big{min-height:var(--sw-component-size-big)}.sw-primary{background-color:var(--sw-color-primary);border-color:var(--sw-color-primary)}.sw-success{background-color:var(--sw-color-success);border-color:var(--sw-color-success)}.sw-info{background-color:var(--sw-color-info);border-color:var(--sw-color-info)}.sw-warning{background-color:var(--sw-color-warning);border-color:var(--sw-color-warning)}.sw-danger{background-color:var(--sw-color-danger);border-color:var(--sw-color-danger)}.sw-text{color:var(--sw-color-default);background:none}.sw-text.sw-primary{color:var(--sw-color-primary)}.sw-text.sw-success{color:var(--sw-color-success)}.sw-text.sw-info{color:var(--sw-color-info)}.sw-text.sw-warning{color:var(--sw-color-warning)}.sw-text.sw-danger{color:var(--sw-color-danger)}.sw-link{background:none;border:none;padding:0;color:var(--sw-text-color-secondary);min-height:1em}.sw-link:hover.sw-primary{color:var(--sw-color-primary)}.sw-link:hover.sw-success{color:var(--sw-color-success)}.sw-link:hover.sw-info{color:var(--sw-color-info)}.sw-link:hover.sw-warning{color:var(--sw-color-warning)}.sw-link:hover.sw-danger{color:var(--sw-color-danger)}@keyframes sw-skeleton{0%{left:-50px}to{left:calc(50px + 100%)}}
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineAsyncComponent as m } from "vue";
|
|
2
|
-
const n = /* @__PURE__ */ Object.assign({ "./components/SwButton.vue": () => import("./SwButton-0uPLNlAn.js"), "./components/SwCollapse.vue": () => import("./SwCollapse-CjL9dpO-.js"), "./components/SwDataPicker.vue": () => import("./SwDataPicker-Zxy4Lv1v.js"), "./components/SwDropdown.vue": () => import("./SwDropdown-D2W9Glgy.js"), "./components/SwDropdownItem.vue": () => import("./SwDropdownItem-C3_wJ1DL.js"), "./components/SwFormItem.vue": () => import("./SwFormItem-
|
|
2
|
+
const n = /* @__PURE__ */ Object.assign({ "./components/SwButton.vue": () => import("./SwButton-0uPLNlAn.js"), "./components/SwCollapse.vue": () => import("./SwCollapse-CjL9dpO-.js"), "./components/SwDataPicker.vue": () => import("./SwDataPicker-Zxy4Lv1v.js"), "./components/SwDropdown.vue": () => import("./SwDropdown-D2W9Glgy.js"), "./components/SwDropdownItem.vue": () => import("./SwDropdownItem-C3_wJ1DL.js"), "./components/SwFormItem.vue": () => import("./SwFormItem-CfnEis1u.js"), "./components/SwInput.vue": () => import("./SwInput-VZogDySW.js"), "./components/SwMessage.vue": () => import("./SwMessage-BB2yKYsR.js"), "./components/SwSection.vue": () => import("./SwSection-CaY8OFmf.js"), "./components/SwSkeleton.vue": () => import("./SwSkeleton-DWILNFfF.js"), "./components/SwSkeletonItem.vue": () => import("./SwSkeletonItem-CU7LvihY.js"), "./components/SwSwitch.vue": () => import("./SwSwitch-FMwJbEH7.js"), "./components/SwTabs.vue": () => import("./SwTabs-DgvDpw7u.js"), "./components/SwTabsNew.vue": () => import("./SwTabsNew-Dr5Vyz6M.js"), "./components/SwTabsPane.vue": () => import("./SwTabsPane-BUUmFjh7.js"), "./components/SwTabsPaneNew.vue": () => import("./SwTabsPaneNew-DFPu-sRT.js") }), t = {};
|
|
3
3
|
for (const e in n) {
|
|
4
4
|
const o = e.split("/").pop().replace(".vue", "").replace(/-(\w)/g, (s, p) => p.toUpperCase());
|
|
5
5
|
t[o] = m(() => n[e]());
|