@webitel/ui-sdk 23.12.6 → 23.12.8
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/dist/ui-sdk.common.js +18 -18
- package/dist/ui-sdk.common.js.map +1 -1
- package/dist/ui-sdk.css +1 -1
- package/dist/ui-sdk.umd.js +18 -18
- package/dist/ui-sdk.umd.js.map +1 -1
- package/dist/ui-sdk.umd.min.js +1 -1
- package/dist/ui-sdk.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/wt-icon/Readme.md +1 -1
- package/src/components/wt-icon/_variables.scss +4 -0
- package/src/components/wt-icon/wt-icon.vue +7 -1
- package/src/components/wt-rounded-action/wt-rounded-action.vue +17 -19
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
Different color icons:
|
|
7
7
|
```vue
|
|
8
|
-
const colors = ['default', 'disabled', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer'];
|
|
8
|
+
const colors = ['default', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'];
|
|
9
9
|
|
|
10
10
|
<div
|
|
11
11
|
style="display: flex; align-items: center; gap: 5px;"
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
--icon-xs-size: 8px;
|
|
10
10
|
|
|
11
11
|
--icon-color: var(--grey-darken-2);
|
|
12
|
+
--icon-primary-color: var(--primary-color);
|
|
12
13
|
--icon-error-color: var(--error-color);
|
|
13
14
|
--icon-success-color: var(--success-color);
|
|
14
15
|
--icon-warning-color: var(--warning-color);
|
|
@@ -18,11 +19,13 @@
|
|
|
18
19
|
--icon-info-color: var(--info-color);
|
|
19
20
|
--icon-chat-color: var(--chat-color);
|
|
20
21
|
--icon-transfer-color: var(--transfer-color);
|
|
22
|
+
--icon-job-color: var(--job-color);
|
|
21
23
|
--icon-disabled-color: var(--grey-lighten-4);
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
:root.theme--dark {
|
|
25
27
|
--icon-color: var(--grey-lighten-2);
|
|
28
|
+
--icon-primary-color: var(--primary-color);
|
|
26
29
|
--icon-disabled-color: var(--grey-darken-2);
|
|
27
30
|
--icon-error-color: var(--error-color);
|
|
28
31
|
--icon-success-color: var(--success-color);
|
|
@@ -33,4 +36,5 @@
|
|
|
33
36
|
--icon-info-color: var(--info-color);
|
|
34
37
|
--icon-chat-color: var(--chat-color);
|
|
35
38
|
--icon-transfer-color: var(--transfer-color);
|
|
39
|
+
--icon-job-color: var(--job-color);
|
|
36
40
|
}
|
|
@@ -35,7 +35,7 @@ const props = defineProps({
|
|
|
35
35
|
default: 'md',
|
|
36
36
|
},
|
|
37
37
|
/**
|
|
38
|
-
* @values 'default', 'disabled', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer'
|
|
38
|
+
* @values 'default', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'
|
|
39
39
|
*/
|
|
40
40
|
color: {
|
|
41
41
|
type: String,
|
|
@@ -88,6 +88,9 @@ svg {
|
|
|
88
88
|
&-default .wt-icon__icon {
|
|
89
89
|
fill: var(--icon-color);
|
|
90
90
|
}
|
|
91
|
+
&-primary .wt-icon__icon {
|
|
92
|
+
fill: var(--icon-primary-color);
|
|
93
|
+
}
|
|
91
94
|
&-error .wt-icon__icon {
|
|
92
95
|
fill: var(--icon-error-color);
|
|
93
96
|
}
|
|
@@ -115,6 +118,9 @@ svg {
|
|
|
115
118
|
&-transfer .wt-icon__icon {
|
|
116
119
|
fill: var(--icon-transfer-color);
|
|
117
120
|
}
|
|
121
|
+
&-job .wt-icon__icon {
|
|
122
|
+
fill: var(--icon-job-color);
|
|
123
|
+
}
|
|
118
124
|
&-disabled .wt-icon__icon {
|
|
119
125
|
fill: var(--icon-disabled-color);
|
|
120
126
|
}
|
|
@@ -76,13 +76,11 @@ const props = defineProps({
|
|
|
76
76
|
const emit = defineEmits(['click']);
|
|
77
77
|
|
|
78
78
|
const iColor = computed(() => {
|
|
79
|
-
const onDark = ['success', 'error', 'transfer'];
|
|
80
|
-
const onLight = ['primary'];
|
|
81
79
|
if (props.disabled) return 'disabled';
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
80
|
+
switch (props.color) {
|
|
81
|
+
case 'secondary': return 'default';
|
|
82
|
+
default: return props.color;
|
|
83
|
+
}
|
|
86
84
|
});
|
|
87
85
|
const loaderColor = computed(() => {
|
|
88
86
|
if (['success', 'transfer', 'error'].includes(props.color)) return 'main';
|
|
@@ -101,7 +99,7 @@ const loaderColor = computed(() => {
|
|
|
101
99
|
line-height: 0;
|
|
102
100
|
padding: var(--rounded-action-padding);
|
|
103
101
|
border: var(--rounded-action-border-size) solid;
|
|
104
|
-
background: var(--rounded-action-secondary-color);
|
|
102
|
+
//background: var(--rounded-action-secondary-color);
|
|
105
103
|
border-color: var(--rounded-action-secondary-color);
|
|
106
104
|
border-radius: var(--border-radius);
|
|
107
105
|
transition: var(--transition);
|
|
@@ -116,63 +114,63 @@ const loaderColor = computed(() => {
|
|
|
116
114
|
|
|
117
115
|
&--color {
|
|
118
116
|
&-primary {
|
|
119
|
-
background: var(--rounded-action-primary-color);
|
|
117
|
+
//background: var(--rounded-action-primary-color);
|
|
120
118
|
border-color: var(--rounded-action-primary-color);
|
|
121
119
|
|
|
122
120
|
&:hover {
|
|
123
|
-
background: var(--rounded-action-primary-hover-color);
|
|
121
|
+
//background: var(--rounded-action-primary-hover-color);
|
|
124
122
|
border-color: var(--rounded-action-primary-hover-color);
|
|
125
123
|
}
|
|
126
124
|
}
|
|
127
125
|
|
|
128
126
|
&-secondary {
|
|
129
|
-
background: var(--rounded-action-secondary-color);
|
|
127
|
+
//background: var(--rounded-action-secondary-color);
|
|
130
128
|
border-color: var(--rounded-action-secondary-color);
|
|
131
129
|
|
|
132
130
|
&:hover {
|
|
133
|
-
background: var(--rounded-action-secondary-hover-color);
|
|
131
|
+
//background: var(--rounded-action-secondary-hover-color);
|
|
134
132
|
border-color: var(--rounded-action-secondary-hover-color);
|
|
135
133
|
}
|
|
136
134
|
|
|
137
135
|
&.wt-rounded-action--active {
|
|
138
|
-
background: transparent;
|
|
136
|
+
//background: transparent;
|
|
139
137
|
border-color: var(--rounded-action-secondary-active-color);
|
|
140
138
|
}
|
|
141
139
|
}
|
|
142
140
|
|
|
143
141
|
&-success {
|
|
144
|
-
background: var(--rounded-action-success-color);
|
|
142
|
+
//background: var(--rounded-action-success-color);
|
|
145
143
|
border-color: var(--rounded-action-success-color);
|
|
146
144
|
|
|
147
145
|
&:hover {
|
|
148
|
-
background: var(--rounded-action-success-hover-color);
|
|
146
|
+
//background: var(--rounded-action-success-hover-color);
|
|
149
147
|
border-color: var(--rounded-action-success-hover-color);
|
|
150
148
|
}
|
|
151
149
|
}
|
|
152
150
|
|
|
153
151
|
&-error {
|
|
154
|
-
background: var(--rounded-action-error-color);
|
|
152
|
+
//background: var(--rounded-action-error-color);
|
|
155
153
|
border-color: var(--rounded-action-error-color);
|
|
156
154
|
|
|
157
155
|
&:hover {
|
|
158
|
-
background: var(--rounded-action-error-hover-color);
|
|
156
|
+
//background: var(--rounded-action-error-hover-color);
|
|
159
157
|
border-color: var(--rounded-action-error-hover-color);
|
|
160
158
|
}
|
|
161
159
|
}
|
|
162
160
|
|
|
163
161
|
&-transfer {
|
|
164
|
-
background: var(--rounded-action-transfer-color);
|
|
162
|
+
//background: var(--rounded-action-transfer-color);
|
|
165
163
|
border-color: var(--rounded-action-transfer-color);
|
|
166
164
|
|
|
167
165
|
&:hover {
|
|
168
|
-
background: var(--rounded-action-transfer-hover-color);
|
|
166
|
+
//background: var(--rounded-action-transfer-hover-color);
|
|
169
167
|
border-color: var(--rounded-action-transfer-hover-color);
|
|
170
168
|
}
|
|
171
169
|
}
|
|
172
170
|
}
|
|
173
171
|
|
|
174
172
|
&.wt-rounded-action--disabled {
|
|
175
|
-
background: var(--rounded-action-disabled-color);
|
|
173
|
+
//background: var(--rounded-action-disabled-color);
|
|
176
174
|
border-color: var(--rounded-action-disabled-color);
|
|
177
175
|
pointer-events: none;
|
|
178
176
|
}
|