@webitel/ui-sdk 2.1.6 → 2.1.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/CHANGELOG.md +9 -0
- package/dist/ui-sdk.common.js +9 -10
- package/dist/ui-sdk.common.js.map +1 -1
- package/dist/ui-sdk.css +1 -1
- package/dist/ui-sdk.umd.js +9 -10
- 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 +3 -2
- package/src/components/molecules/wt-popup/wt-popup.vue +21 -31
- package/src/css/components/molecules/wt-popup/_variables.scss +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webitel/ui-sdk",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.8",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"serve-lib": "vue-cli-service serve",
|
|
@@ -22,7 +22,8 @@
|
|
|
22
22
|
"src/mixins/*",
|
|
23
23
|
"src/scripts/*",
|
|
24
24
|
"src/modules/*",
|
|
25
|
-
"src/store/*"
|
|
25
|
+
"src/store/*",
|
|
26
|
+
"CHANGELOG.md"
|
|
26
27
|
],
|
|
27
28
|
"dependencies": {
|
|
28
29
|
"core-js": "^3.6.5",
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="wt-popup"
|
|
4
3
|
:class="{ 'wt-popup--overflow': overflow }"
|
|
4
|
+
class="wt-popup"
|
|
5
5
|
>
|
|
6
|
-
<div class="wt-popup__shadow"></div>
|
|
7
6
|
<aside
|
|
8
|
-
class="wt-popup__popup"
|
|
9
7
|
:style="popupStyle"
|
|
8
|
+
class="wt-popup__popup"
|
|
10
9
|
>
|
|
11
10
|
<header class="wt-popup__header">
|
|
12
11
|
<slot name="header">
|
|
@@ -20,10 +19,10 @@
|
|
|
20
19
|
@click="$emit('close')"
|
|
21
20
|
></wt-icon-btn>
|
|
22
21
|
</header>
|
|
23
|
-
<section
|
|
22
|
+
<section v-if="$slots.main" class="wt-popup__main">
|
|
24
23
|
<slot name="main"></slot>
|
|
25
24
|
</section>
|
|
26
|
-
<footer
|
|
25
|
+
<footer v-if="$slots.actions" class="wt-popup__actions">
|
|
27
26
|
<slot name="actions"></slot>
|
|
28
27
|
</footer>
|
|
29
28
|
</aside>
|
|
@@ -49,7 +48,7 @@ export default {
|
|
|
49
48
|
popupStyle() {
|
|
50
49
|
let style = '';
|
|
51
50
|
style += this.minWidth ? `min-width: ${this.minWidth}px;` : '';
|
|
52
|
-
style += this.width ? `width: ${this.
|
|
51
|
+
style += this.width ? `width: ${this.width}px;` : '';
|
|
53
52
|
return style;
|
|
54
53
|
},
|
|
55
54
|
},
|
|
@@ -59,37 +58,28 @@ export default {
|
|
|
59
58
|
<style lang="scss" scoped>
|
|
60
59
|
.wt-popup {
|
|
61
60
|
position: fixed;
|
|
61
|
+
z-index: var(--popup-wrapper-z-index);
|
|
62
62
|
top: 0;
|
|
63
63
|
right: 0;
|
|
64
64
|
bottom: 0;
|
|
65
65
|
left: 0;
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
top: 0;
|
|
71
|
-
right: 0;
|
|
72
|
-
bottom: 0;
|
|
73
|
-
left: 0;
|
|
74
|
-
background: var(--popup-shadow-color);
|
|
75
|
-
z-index: 0;
|
|
76
|
-
}
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
background: var(--popup-shadow-color);
|
|
77
70
|
}
|
|
78
71
|
|
|
79
72
|
.wt-popup__popup {
|
|
80
|
-
|
|
81
|
-
top: 50%;
|
|
82
|
-
left: 50%;
|
|
73
|
+
z-index: 1;
|
|
83
74
|
display: flex;
|
|
84
75
|
flex-direction: column;
|
|
85
|
-
gap: var(--popup-sections-gap);
|
|
86
76
|
max-height: var(--popup-max-height);
|
|
77
|
+
margin: var(--popup-padding);
|
|
87
78
|
padding: var(--popup-padding);
|
|
88
|
-
background: var(--popup-bg-color);
|
|
89
|
-
transform: translate(-50%, -50%);
|
|
90
79
|
border-radius: var(--border-radius);
|
|
80
|
+
background: var(--popup-bg-color);
|
|
91
81
|
box-shadow: var(--elevation-10);
|
|
92
|
-
|
|
82
|
+
gap: var(--popup-sections-gap);
|
|
93
83
|
}
|
|
94
84
|
|
|
95
85
|
.wt-popup__header {
|
|
@@ -98,14 +88,14 @@ export default {
|
|
|
98
88
|
display: flex;
|
|
99
89
|
align-items: center;
|
|
100
90
|
justify-content: space-between;
|
|
101
|
-
gap: var(--popup-header-padding);
|
|
102
91
|
padding: var(--popup-header-padding);
|
|
103
|
-
background: var(--popup-header-bg-color);
|
|
104
92
|
border-radius: var(--border-radius);
|
|
93
|
+
background: var(--popup-header-bg-color);
|
|
94
|
+
gap: var(--popup-header-padding);
|
|
105
95
|
|
|
106
96
|
.wt-popup__title {
|
|
107
|
-
font: inherit;
|
|
108
97
|
flex-grow: 1;
|
|
98
|
+
font: inherit;
|
|
109
99
|
}
|
|
110
100
|
|
|
111
101
|
.wt-popup__close-btn {
|
|
@@ -116,18 +106,18 @@ export default {
|
|
|
116
106
|
.wt-popup__main {
|
|
117
107
|
@extend %wt-scrollbar;
|
|
118
108
|
@extend %typo-body-1;
|
|
119
|
-
min-height: 0;
|
|
120
|
-
flex-grow: 1;
|
|
121
109
|
overflow-y: auto;
|
|
110
|
+
flex-grow: 1;
|
|
111
|
+
min-height: 0;
|
|
122
112
|
padding-right: var(--popup-main-section-padding-right);
|
|
123
113
|
}
|
|
124
114
|
|
|
125
115
|
.wt-popup__actions {
|
|
126
116
|
display: flex;
|
|
127
|
-
justify-content: center;
|
|
128
117
|
align-items: center;
|
|
129
|
-
|
|
118
|
+
justify-content: center;
|
|
130
119
|
padding: var(--popup-actions-padding);
|
|
120
|
+
gap: var(--popup-actions-padding);
|
|
131
121
|
}
|
|
132
122
|
|
|
133
123
|
.wt-popup--overflow {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
--popup-shadow-opacity: 0.8;
|
|
6
6
|
--popup-shadow-color: hsla(var(--_contrast-color), var(--popup-shadow-opacity));
|
|
7
7
|
|
|
8
|
-
--popup-max-height:
|
|
8
|
+
--popup-max-height: 90%;
|
|
9
9
|
|
|
10
10
|
--popup-bg-color: var(--main-color);
|
|
11
11
|
--popup-sections-gap: var(--spacing-sm);
|
|
@@ -17,4 +17,4 @@
|
|
|
17
17
|
--popup-main-section-padding-right: var(--spacing-xs); // scroll offset
|
|
18
18
|
|
|
19
19
|
--popup-actions-padding: var(--spacing-xs);
|
|
20
|
-
}
|
|
20
|
+
}
|