@webitel/ui-sdk 2.0.24 → 2.0.27
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/img/sprite/telegram-bot.svg +0 -1
- package/dist/ui-sdk.common.js +18 -16
- package/dist/ui-sdk.common.js.map +1 -1
- package/dist/ui-sdk.css +1 -1
- package/dist/ui-sdk.umd.js +18 -16
- package/dist/ui-sdk.umd.js.map +1 -1
- package/dist/ui-sdk.umd.min.js +2 -2
- package/dist/ui-sdk.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/wt-button/wt-button.vue +5 -0
- package/src/components/molecules/wt-search-bar/wt-search-bar.vue +68 -68
- package/src/locale/en/en.js +0 -2
- package/src/locale/ru/ru.js +0 -2
- package/src/locale/ua/ua.js +0 -2
package/package.json
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
'wt-button--wide': wide,
|
|
11
11
|
'wt-button--rounded': rounded,
|
|
12
12
|
'wt-button--disabled': disabled,
|
|
13
|
+
'wt-button--loading': loading,
|
|
13
14
|
}
|
|
14
15
|
]"
|
|
15
16
|
type="button"
|
|
@@ -116,6 +117,10 @@ export default {
|
|
|
116
117
|
}
|
|
117
118
|
}
|
|
118
119
|
|
|
120
|
+
&--loading {
|
|
121
|
+
pointer-events: none;
|
|
122
|
+
}
|
|
123
|
+
|
|
119
124
|
&:hover,
|
|
120
125
|
&:active {
|
|
121
126
|
background-color: var(--btn-accent--hover-color);
|
|
@@ -108,86 +108,86 @@
|
|
|
108
108
|
<style lang="scss" scoped>
|
|
109
109
|
.wt-search-bar {
|
|
110
110
|
cursor: text;
|
|
111
|
+
}
|
|
111
112
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
113
|
+
.wt-search-bar__wrapper {
|
|
114
|
+
position: relative;
|
|
115
|
+
}
|
|
115
116
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
117
|
+
.wt-search-bar__search-icon {
|
|
118
|
+
line-height: 0;
|
|
119
|
+
position: absolute;
|
|
120
|
+
top: 50%;
|
|
121
|
+
left: var(--input-icon-margin);
|
|
122
|
+
transform: translateY(-50%);
|
|
123
|
+
pointer-events: none;
|
|
124
|
+
}
|
|
124
125
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
126
|
+
.wt-search-bar__reset-icon-btn {
|
|
127
|
+
position: absolute;
|
|
128
|
+
top: 50%;
|
|
129
|
+
right: var(--input-icon-margin);
|
|
130
|
+
transform: translateY(-50%);
|
|
130
131
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
132
|
+
.wt-search-bar:not(:focus-within) & {
|
|
133
|
+
opacity: 0;
|
|
134
|
+
pointer-events: none;
|
|
135
135
|
}
|
|
136
|
+
}
|
|
136
137
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.wt-search-bar--outline & {
|
|
157
|
-
border-color: var(--form-outline-border-color);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.wt-search-bar--outline:hover &,
|
|
161
|
-
.wt-search-bar--outline &:focus {
|
|
162
|
-
border-color: var(--form-outline-border--hover-color);
|
|
163
|
-
}
|
|
138
|
+
.wt-search-bar__input {
|
|
139
|
+
@extend %typo-body-1;
|
|
140
|
+
@include wt-placeholder;
|
|
141
|
+
|
|
142
|
+
display: block;
|
|
143
|
+
width: 100%;
|
|
144
|
+
box-sizing: border-box;
|
|
145
|
+
padding: var(--search-bar-padding);
|
|
146
|
+
color: var(--form-input-color);
|
|
147
|
+
border: var(--input-border);
|
|
148
|
+
border-color: var(--form-border-color);
|
|
149
|
+
border-radius: var(--border-radius);
|
|
150
|
+
transition: var(--transition);
|
|
151
|
+
|
|
152
|
+
&:focus {
|
|
153
|
+
@include wt-placeholder('focus');
|
|
154
|
+
border-color: var(--form-border--hover-color);
|
|
164
155
|
}
|
|
165
156
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
.wt-search-bar:focus-within ::v-deep .wt-icon__icon {
|
|
169
|
-
fill: var(--icon-color--hover);
|
|
157
|
+
.wt-search-bar--outline & {
|
|
158
|
+
border-color: var(--form-outline-border-color);
|
|
170
159
|
}
|
|
171
160
|
|
|
172
|
-
|
|
173
|
-
.wt-search-
|
|
174
|
-
|
|
175
|
-
width: 0;
|
|
176
|
-
height: 0;
|
|
161
|
+
.wt-search-bar--outline:hover &,
|
|
162
|
+
.wt-search-bar--outline &:focus {
|
|
163
|
+
border-color: var(--form-outline-border--hover-color);
|
|
177
164
|
}
|
|
165
|
+
}
|
|
178
166
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
167
|
+
/* make icons black */
|
|
168
|
+
.wt-search-bar:hover ::v-deep .wt-icon__icon,
|
|
169
|
+
.wt-search-bar:focus-within ::v-deep .wt-icon__icon {
|
|
170
|
+
fill: var(--icon-color--hover);
|
|
171
|
+
}
|
|
184
172
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
173
|
+
/* clears the 'X' from Internet Explorer */
|
|
174
|
+
.wt-search-bar__input::-ms-clear {
|
|
175
|
+
display: none;
|
|
176
|
+
width: 0;
|
|
177
|
+
height: 0;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.wt-search-bar__input::-ms-reveal {
|
|
181
|
+
display: none;
|
|
182
|
+
width: 0;
|
|
183
|
+
height: 0;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* clears the 'X' from Chrome */
|
|
187
|
+
.wt-search-bar__input::-webkit-search-decoration,
|
|
188
|
+
.wt-search-bar__input::-webkit-search-cancel-button,
|
|
189
|
+
.wt-search-bar__input::-webkit-search-results-button,
|
|
190
|
+
.wt-search-bar__input::-webkit-search-results-decoration {
|
|
191
|
+
display: none;
|
|
192
192
|
}
|
|
193
193
|
</style>
|
package/src/locale/en/en.js
CHANGED
package/src/locale/ru/ru.js
CHANGED