vgapp 0.1.2 → 0.1.3

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 (28) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +1 -1
  3. package/app/modules/vgdropdown/scss/vgdropdown.css +47 -47
  4. package/app/modules/vgformsender/scss/vgformsender.css +13 -13
  5. package/app/modules/vglawcookie/scss/vglawcookie.css +87 -87
  6. package/app/modules/vgmodal/js/vgmodal.js +2 -0
  7. package/app/modules/vgmodal/scss/vgmodal.css +3824 -3824
  8. package/app/modules/vgnav/scss/vgnav.css +309 -309
  9. package/app/modules/vgnotify/scss/vgnotify.css +3 -0
  10. package/app/modules/vgnotify/scss/vgnotify.css.map +1 -0
  11. package/app/modules/vgrollup/scss/vgrollup.css +41 -41
  12. package/app/modules/vgselect/js/vgselect.js +341 -0
  13. package/app/modules/vgselect/scss/_variables.scss +74 -0
  14. package/app/modules/vgselect/scss/vgselect.css +243 -0
  15. package/app/modules/vgselect/scss/vgselect.css.map +1 -0
  16. package/app/modules/vgselect/scss/vgselect.scss +216 -0
  17. package/app/modules/vgsidebar/js/vgsidebar.js +5 -4
  18. package/app/modules/vgsidebar/scss/vgsidebar.css +86 -86
  19. package/app/utils/js/dom/manipulator.js +9 -1
  20. package/app/utils/js/functions.js +20 -1
  21. package/app/utils/scss/default.css +275 -275
  22. package/build/vgapp.css +1 -0
  23. package/build/vgapp.css.map +1 -1
  24. package/build/vgapp.js +1 -1
  25. package/build/vgapp.js.map +1 -1
  26. package/index.js +5 -1
  27. package/package.json +1 -1
  28. /package/app/modules/vgnotify/scss/{vgnotify.sass → vgnotify.scss} +0 -0
package/app/modules/vgselect/scss/vgselect.css ADDED
@@ -0,0 +1,243 @@
1
+ @charset "UTF-8";
2
+ /**
3
+ *--------------------------------------------------------------------------
4
+ * Модуль: VGSELECT
5
+ * Автор: Vegas DEV
6
+ * Лицензия: смотри LICENSE
7
+ *--------------------------------------------------------------------------
8
+ **/
9
+ select.vg-select {
10
+ position: absolute;
11
+ left: 0;
12
+ top: 0;
13
+ opacity: 0;
14
+ z-index: -1000;
15
+ width: 100%;
16
+ height: 100%;
17
+ display: inline-block;
18
+ visibility: hidden;
19
+ }
20
+
21
+ .vg-select {
22
+ --vg-select-current-background-color: white ;
23
+ --vg-select-current-color: black ;
24
+ --vg-select-current-border-width: 1px ;
25
+ --vg-select-current-border-style: solid ;
26
+ --vg-select-current-border-color: #dddddd ;
27
+ --vg-select-current-border-radius: 5px ;
28
+ --vg-select-current-padding-left: 16px ;
29
+ --vg-select-current-padding-right: 40px ;
30
+ --vg-select-current-padding-top: 16px ;
31
+ --vg-select-current-padding-bottom: 16px ;
32
+ --vg-select-current-line-height: 1.1 ;
33
+ --vg-select-current-font-size: 16px ;
34
+ --vg-select-current-z-index: 10 ;
35
+ --vg-select-dropdown-background-color: white ;
36
+ --vg-select-dropdown-color: black ;
37
+ --vg-select-dropdown-border-width: 1px ;
38
+ --vg-select-dropdown-border-style: solid ;
39
+ --vg-select-dropdown-border-color: #dddddd ;
40
+ --vg-select-dropdown-border-radius: 0.375rem ;
41
+ --vg-select-dropdown-box-shadow: 0 7px 12px 1px rgba(68, 68, 68, 0.11) ;
42
+ --vg-select-dropdown-z-index: 15 ;
43
+ --vg-select-list-background-color: transparent ;
44
+ --vg-select-list-color: black ;
45
+ --vg-select-list-padding-left: 8px ;
46
+ --vg-select-list-padding-right: 8px ;
47
+ --vg-select-list-padding-top: 8px ;
48
+ --vg-select-list-padding-bottom: 8px ;
49
+ --vg-select-list-border-bottom-width: 1px ;
50
+ --vg-select-list-border-bottom-style: solid ;
51
+ --vg-select-list-border-bottom-color: #f5f5f5 ;
52
+ --vg-select-optgroup-background-color: transparent ;
53
+ --vg-select-optgroup-color: #fff ;
54
+ --vg-select-optgroup-padding-left: 8px ;
55
+ --vg-select-optgroup-padding-right: 8px ;
56
+ --vg-select-optgroup-padding-top: 8px ;
57
+ --vg-select-optgroup-padding-bottom: 8px ;
58
+ --vg-select-optgroup-border-bottom-width: 1px ;
59
+ --vg-select-optgroup-border-bottom-style: solid ;
60
+ --vg-select-optgroup-border-bottom-color: #838383 ;
61
+ --vg-select-optgroup-hover-background-color: #f7f7f7 ;
62
+ --vg-select-optgroup-hover-color: black ;
63
+ --vg-select-optgroup-hover-border-bottom-color: #f5f5f5 ;
64
+ --vg-select-list-hover-background-color: #f7f7f7 ;
65
+ --vg-select-list-hover-color: black ;
66
+ --vg-select-list-hover-border-bottom-color: #f5f5f5 ;
67
+ --vg-select-search-background-color: #f2f2f2 ;
68
+ --vg-select-search-color: #000000 ;
69
+ --vg-select-list-max-height: 286px;
70
+ --vg-select-list-scrollbar-width: 6px;
71
+ --vg-select-list-scrollbar-bg: #F5F5F5;
72
+ --vg-select-list-scrollbar-thumb: #999;
73
+ position: relative;
74
+ }
75
+ .vg-select-current {
76
+ background-color: var(--vg-select-current-background-color);
77
+ color: var(--vg-select-current-color);
78
+ border-width: var(--vg-select-current-border-width);
79
+ border-style: var(--vg-select-current-border-style);
80
+ border-color: var(--vg-select-current-border-color);
81
+ border-radius: var(--vg-select-current-border-radius);
82
+ padding-left: var(--vg-select-current-padding-left);
83
+ padding-right: var(--vg-select-current-padding-right);
84
+ padding-top: var(--vg-select-current-padding-top);
85
+ padding-bottom: var(--vg-select-current-padding-bottom);
86
+ line-height: var(--vg-select-current-line-height);
87
+ font-size: var(--vg-select-current-font-size);
88
+ z-index: var(--vg-select-current-z-index);
89
+ box-sizing: border-box;
90
+ cursor: pointer;
91
+ outline: none;
92
+ position: relative;
93
+ z-index: var(--vg-select-current-z-index);
94
+ white-space: nowrap;
95
+ overflow: hidden;
96
+ text-overflow: ellipsis;
97
+ }
98
+ .vg-select-current:after {
99
+ content: "";
100
+ position: absolute;
101
+ right: 16px;
102
+ top: 50%;
103
+ transform: translateY(-50%);
104
+ transition: all 0.4s ease-in-out;
105
+ background-image: url('data:image/svg+xml, <svg aria-hidden="true" focusable="false" data-prefix="fa-light" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M4 181C7 178 12 176 16 176C20 176 24 177 27 180L224 362L421 180C428 174 438 175 444 181C450 188 449 198 443 204L235 396C229 401 219 401 213 396L5 204C-1 198 -2 188 4 181Z" fill="gray"/></svg>');
106
+ background-repeat: no-repeat;
107
+ width: 16px;
108
+ height: 16px;
109
+ }
110
+ .vg-select-dropdown {
111
+ background-color: var(--vg-select-dropdown-background-color);
112
+ color: var(--vg-select-dropdown-color);
113
+ border-width: var(--vg-select-dropdown-border-width);
114
+ border-style: var(--vg-select-dropdown-border-style);
115
+ border-color: var(--vg-select-dropdown-border-color);
116
+ border-radius: var(--vg-select-dropdown-border-radius);
117
+ box-shadow: var(--vg-select-dropdown-box-shadow);
118
+ z-index: var(--vg-select-dropdown-z-index);
119
+ position: absolute;
120
+ box-sizing: border-box;
121
+ opacity: 0;
122
+ overflow: hidden;
123
+ padding: 0;
124
+ top: 100%;
125
+ left: 0;
126
+ width: 100%;
127
+ height: 0;
128
+ pointer-events: auto;
129
+ transform-origin: 50% 0;
130
+ transform: scale(0.75) translateY(-11px);
131
+ transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
132
+ z-index: var(--vg-select-dropdown-z-index);
133
+ margin-top: 0.25rem;
134
+ }
135
+ .vg-select-list {
136
+ margin: 0;
137
+ padding: 0;
138
+ list-style: none;
139
+ display: flex;
140
+ flex-direction: column;
141
+ max-height: var(--vg-select-list-max-height);
142
+ overflow-y: auto;
143
+ }
144
+ .vg-select-list::-webkit-scrollbar-track {
145
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
146
+ background-color: var(--vg-select-list-scrollbar-bg);
147
+ }
148
+ .vg-select-list::-webkit-scrollbar {
149
+ width: var(--vg-select-list-scrollbar-width);
150
+ background-color: var(--vg-select-list-scrollbar-bg);
151
+ }
152
+ .vg-select-list::-webkit-scrollbar-thumb {
153
+ background-color: var(--vg-select-list-scrollbar-thumb);
154
+ }
155
+ .vg-select-list--option {
156
+ background-color: var(--vg-select-list-background-color);
157
+ color: var(--vg-select-list-color);
158
+ padding-left: var(--vg-select-list-padding-left);
159
+ padding-right: var(--vg-select-list-padding-right);
160
+ padding-top: var(--vg-select-list-padding-top);
161
+ padding-bottom: var(--vg-select-list-padding-bottom);
162
+ border-bottom-width: var(--vg-select-list-border-bottom-width);
163
+ border-bottom-style: var(--vg-select-list-border-bottom-style);
164
+ border-bottom-color: var(--vg-select-list-border-bottom-color);
165
+ display: block;
166
+ width: 100%;
167
+ cursor: pointer;
168
+ transition: all 0.4s ease-in-out;
169
+ }
170
+ .vg-select-list--option:last-child {
171
+ border: none;
172
+ }
173
+ .vg-select-list--option:hover, .vg-select-list--option.selected {
174
+ background-color: var(--vg-select-list-hover-background-color);
175
+ color: var(--vg-select-list-hover-color);
176
+ border-bottom-color: var(--vg-select-list-hover-border-bottom-color);
177
+ }
178
+ .vg-select-list--option.disabled {
179
+ opacity: 0.6;
180
+ cursor: not-allowed;
181
+ }
182
+ .vg-select-list--option.hidden {
183
+ display: none !important;
184
+ }
185
+ .vg-select-list--optgroup {
186
+ list-style: none;
187
+ padding: 0;
188
+ }
189
+ .vg-select-list--optgroup + .vg-select-list--optgroup {
190
+ border-top-width: var(--vg-select-optgroup-border-bottom-width);
191
+ border-top-style: var(--vg-select-optgroup-border-bottom-style);
192
+ border-top-color: var(--vg-select-optgroup-border-bottom-color);
193
+ }
194
+ .vg-select-list--optgroup > li {
195
+ --vg-select-list-padding-left: 16px;
196
+ }
197
+ .vg-select-list--optgroup-title {
198
+ background-color: var(--vg-select-optgroup-background-color);
199
+ color: var(--vg-select-optgroup-color);
200
+ padding-left: var(--vg-select-optgroup-padding-left);
201
+ padding-right: var(--vg-select-optgroup-padding-right);
202
+ padding-top: var(--vg-select-optgroup-padding-top);
203
+ padding-bottom: var(--vg-select-optgroup-padding-bottom);
204
+ border-bottom-width: var(--vg-select-optgroup-border-bottom-width);
205
+ border-bottom-style: var(--vg-select-optgroup-border-bottom-style);
206
+ border-bottom-color: var(--vg-select-optgroup-border-bottom-color);
207
+ }
208
+ .vg-select-search input {
209
+ background-color: var(--vg-select-search-background-color);
210
+ color: var(--vg-select-search-color);
211
+ padding: 8px;
212
+ border: none;
213
+ outline: none;
214
+ width: 100%;
215
+ }
216
+ .vg-select.show .vg-select-current:after {
217
+ transform: translateY(-50%) rotate(180deg);
218
+ }
219
+ .vg-select.show .vg-select-dropdown {
220
+ transform: scale(1) translateY(0);
221
+ opacity: 1;
222
+ box-sizing: border-box;
223
+ height: auto;
224
+ }
225
+ .vg-select.is-invalid .vg-select-current {
226
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
227
+ background-repeat: no-repeat;
228
+ background-position: right calc(1.975em + 0.1875rem) center;
229
+ background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
230
+ --vg-select-current-padding-right: 55px;
231
+ }
232
+ .vg-select.disabled:before {
233
+ content: "";
234
+ position: absolute;
235
+ width: 100%;
236
+ height: 100%;
237
+ z-index: 500;
238
+ }
239
+ .vg-select.disabled > .vg-select-current {
240
+ opacity: 0.75;
241
+ }
242
+
243
+ /*# sourceMappingURL=vgselect.css.map */
package/app/modules/vgselect/scss/vgselect.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["vgselect.scss","../../../utils/scss/mixin.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;ECpBG;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ED4BF;EACA;EACA;EACA;EACA;;AAEA;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAED;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAED;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EAEC;;AAGD;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAED;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EAEE;EAAA;EAAA;;AAIF;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAOH;EAEE;EAAA;EAED;EACA;EACA;EACA;;AAMA;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC","file":"vgselect.css"}
package/app/modules/vgselect/scss/vgselect.scss ADDED
@@ -0,0 +1,216 @@
1
+ /**
2
+ *--------------------------------------------------------------------------
3
+ * Модуль: VGSELECT
4
+ * Автор: Vegas DEV
5
+ * Лицензия: смотри LICENSE
6
+ *--------------------------------------------------------------------------
7
+ **/
8
+
9
+ @import "../../../utils/scss/functions";
10
+ @import "../../../utils/scss/mixin";
11
+ @import "../../../utils/scss/variables";
12
+ @import "variables";
13
+
14
+ select {
15
+ &.vg-select {
16
+ position: absolute;
17
+ left: 0;
18
+ top: 0;
19
+ opacity: 0;
20
+ z-index: -1000;
21
+ width: 100%;
22
+ height: 100%;
23
+ display: inline-block;
24
+ visibility: hidden;
25
+ }
26
+ }
27
+
28
+ .vg-select {
29
+ @include mix-vars('select-current', $select-current-map);
30
+ @include mix-vars('select-dropdown', $select-dropdown-map);
31
+ @include mix-vars('select-list', $select-list-map);
32
+ @include mix-vars('select-optgroup', $select-optgroup-map);
33
+ @include mix-vars('select-optgroup-hover', $select-optgroup-hover-map);
34
+ @include mix-vars('select-list-hover', $select-list-hover-map);
35
+ @include mix-vars('select-search', $select-search-map);
36
+ --vg-select-list-max-height: #{$select-list-max-height};
37
+ --vg-select-list-scrollbar-width: #{$select-list-scrollbar-width};
38
+ --vg-select-list-scrollbar-bg: #{$select-list-scrollbar-bg};
39
+ --vg-select-list-scrollbar-thumb: #{$select-list-scrollbar-thumb};
40
+ position: relative;
41
+
42
+ &-current {
43
+ @each $key, $value in $select-current-map {
44
+ #{$key}: var(--vg-select-current-#{$key})
45
+ }
46
+ box-sizing: border-box;
47
+ cursor: pointer;
48
+ outline: none;
49
+ position: relative;
50
+ z-index: var(--vg-select-current-z-index);
51
+ white-space: nowrap;
52
+ overflow: hidden;
53
+ text-overflow: ellipsis;
54
+
55
+ &:after {
56
+ content: '';
57
+ position: absolute;
58
+ right: 16px;
59
+ top: 50%;
60
+ transform: translateY(-50%);
61
+ transition: all .4s ease-in-out;
62
+ background-image: url("data:image/svg+xml, " + $select-current-svg);
63
+ background-repeat: no-repeat;
64
+ width: 16px;
65
+ height: 16px;
66
+ }
67
+ }
68
+
69
+ &-dropdown {
70
+ @each $key, $value in $select-dropdown-map {
71
+ #{$key}: var(--vg-select-dropdown-#{$key})
72
+ }
73
+ position: absolute;
74
+ box-sizing: border-box;
75
+ opacity: 0;
76
+ overflow: hidden;
77
+ padding: 0;
78
+ top: 100%;
79
+ left: 0;
80
+ width: 100%;
81
+ height: 0;
82
+ pointer-events: auto;
83
+ transform-origin: 50% 0;
84
+ transform: scale(0.75) translateY(-11px);
85
+ transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
86
+ z-index: var(--vg-select-dropdown-z-index);
87
+ margin-top: .25rem;
88
+ }
89
+
90
+ &-list {
91
+ margin: 0;
92
+ padding: 0;
93
+ list-style: none;
94
+ display: flex;
95
+ flex-direction: column;
96
+ max-height: var(--vg-select-list-max-height);
97
+ overflow-y: auto;
98
+
99
+ &::-webkit-scrollbar-track {
100
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
101
+ background-color: var(--vg-select-list-scrollbar-bg);
102
+ }
103
+
104
+ &::-webkit-scrollbar
105
+ {
106
+ width: var(--vg-select-list-scrollbar-width);
107
+ background-color: var(--vg-select-list-scrollbar-bg);
108
+ }
109
+
110
+ &::-webkit-scrollbar-thumb
111
+ {
112
+ background-color: var(--vg-select-list-scrollbar-thumb);
113
+ }
114
+
115
+ &--option {
116
+ @each $key, $value in $select-list-map {
117
+ #{$key}: var(--vg-select-list-#{$key})
118
+ }
119
+ display: block;
120
+ width: 100%;
121
+ cursor: pointer;
122
+ transition: all .4s ease-in-out;
123
+
124
+ &:last-child {
125
+ border: none;
126
+ }
127
+
128
+ &:hover, &.selected {
129
+ @each $key, $value in $select-list-hover-map {
130
+ #{$key}: var(--vg-select-list-hover-#{$key})
131
+ }
132
+ }
133
+
134
+ &.disabled {
135
+ opacity: .6;
136
+ cursor: not-allowed;
137
+ }
138
+
139
+ &.hidden {
140
+ display: none !important;
141
+ }
142
+ }
143
+
144
+ &--optgroup {
145
+ list-style: none;
146
+ padding: 0;
147
+
148
+ + .vg-select-list--optgroup {
149
+ border-top-width: var(--vg-select-optgroup-border-bottom-width);
150
+ border-top-style: var(--vg-select-optgroup-border-bottom-style);
151
+ border-top-color: var(--vg-select-optgroup-border-bottom-color);
152
+ }
153
+
154
+ > li {
155
+ --vg-select-list-padding-left: 16px;
156
+ }
157
+
158
+ &-title {
159
+ @each $key, $value in $select-optgroup-map {
160
+ #{$key}: var(--vg-select-optgroup-#{$key})
161
+ }
162
+ }
163
+ }
164
+ }
165
+
166
+ &-search {
167
+ input {
168
+ @each $key, $value in $select-search-map {
169
+ #{$key}: var(--vg-select-search-#{$key})
170
+ }
171
+ padding: 8px;
172
+ border: none;
173
+ outline: none;
174
+ width: 100%;
175
+ }
176
+ }
177
+
178
+ &.show {
179
+ .vg-select-current {
180
+ &:after {
181
+ transform: translateY(-50%) rotate(180deg);
182
+ }
183
+ }
184
+
185
+ .vg-select-dropdown {
186
+ transform: scale(1) translateY(0);
187
+ opacity: 1;
188
+ box-sizing: border-box;
189
+ height: auto;
190
+ }
191
+ }
192
+
193
+ &.is-invalid {
194
+ .vg-select-current {
195
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
196
+ background-repeat: no-repeat;
197
+ background-position: right calc(1.975em + 0.1875rem) center;
198
+ background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
199
+ --vg-select-current-padding-right: 55px;
200
+ }
201
+ }
202
+
203
+ &.disabled {
204
+ &:before {
205
+ content: '';
206
+ position: absolute;
207
+ width: 100%;
208
+ height: 100%;
209
+ z-index: 500;
210
+ }
211
+
212
+ > .vg-select-current {
213
+ opacity: .75;
214
+ }
215
+ }
216
+ }
package/app/modules/vgsidebar/js/vgsidebar.js CHANGED
@@ -67,9 +67,10 @@ class VGSidebar extends BaseModule {
67
67
  const _this = this;
68
68
  if (isDisabled(_this._element)) return;
69
69
 
70
- this._route();
70
+ _this._params = _this._getParams(relatedTarget, _this._params);
71
+ _this._route();
71
72
 
72
- const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget })
73
+ const showEvent = EventHandler.trigger(_this._element, EVENT_KEY_SHOW, { relatedTarget })
73
74
  if (showEvent.defaultPrevented) return;
74
75
 
75
76
  if (_this._params.backdrop) {
@@ -87,9 +88,9 @@ class VGSidebar extends BaseModule {
87
88
  _this.hide();
88
89
  });
89
90
 
90
- EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
91
+ EventHandler.trigger(_this._element, EVENT_KEY_SHOWN, { relatedTarget });
91
92
  }
92
- this._queueCallback(completeCallBack, this._element, true, 50)
93
+ _this._queueCallback(completeCallBack, _this._element, true, 50)
93
94
  }
94
95
 
95
96
  hide() {
package/app/modules/vgsidebar/scss/vgsidebar.css CHANGED
@@ -1,86 +1,86 @@
1
- @charset "UTF-8";
2
- /**
3
- *--------------------------------------------------------------------------
4
- * Модуль: VGSidebar
5
- * Автор: Vegas DEV
6
- * Лицензия: смотри LICENSE
7
- *--------------------------------------------------------------------------
8
- **/
9
- .vg-sidebar {
10
- --vg-sidebar-horizontal-width: 400px ;
11
- --vg-sidebar-horizontal-height: 100vh ;
12
- --vg-sidebar-vertical-width: 100vw ;
13
- --vg-sidebar-vertical-height: 30vh ;
14
- --vg-sidebar-bg-color: #fff ;
15
- --vg-sidebar-color: #000000 ;
16
- --vg-sidebar-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
17
- --vg-sidebar-header-height: 60px ;
18
- --vg-sidebar-footer-height: 70px ;
19
- --vg-sidebar-padding: 1rem ;
20
- --vg-sidebar-border: 1px solid rgba(0, 0, 0, 0.2) ;
21
- --vg-sidebar-z-index: 1040 ;
22
- --vg-sidebar-transition: all 0.5s ease-in-out ;
23
- position: fixed;
24
- width: auto;
25
- height: auto;
26
- transition: var(--vg-sidebar-transition);
27
- z-index: var(--vg-sidebar-z-index);
28
- background: var(--vg-sidebar-bg-color);
29
- color: var(--vg-sidebar-color);
30
- box-shadow: var(--vg-sidebar-box-shadow);
31
- }
32
- .vg-sidebar.left, .vg-sidebar.right {
33
- width: var(--vg-sidebar-horizontal-width);
34
- height: var(--vg-sidebar-horizontal-height);
35
- top: 0;
36
- }
37
- .vg-sidebar.left {
38
- left: -105%;
39
- }
40
- .vg-sidebar.left.show {
41
- left: 0;
42
- }
43
- .vg-sidebar.right {
44
- right: -105%;
45
- }
46
- .vg-sidebar.right.show {
47
- right: 0;
48
- }
49
- .vg-sidebar.top, .vg-sidebar.bottom {
50
- height: var(--vg-sidebar-vertical-height);
51
- width: var(--vg-sidebar-vertical-width);
52
- left: 0;
53
- }
54
- .vg-sidebar.top {
55
- top: -105%;
56
- }
57
- .vg-sidebar.top.show {
58
- top: 0;
59
- }
60
- .vg-sidebar.bottom {
61
- bottom: -105%;
62
- }
63
- .vg-sidebar.bottom.show {
64
- bottom: 0;
65
- }
66
- .vg-sidebar-header {
67
- height: var(--vg-sidebar-header-height);
68
- z-index: 10;
69
- position: relative;
70
- display: flex;
71
- align-items: center;
72
- padding: var(--vg-sidebar-padding);
73
- border-bottom: var(--vg-sidebar-border);
74
- }
75
- .vg-sidebar-body {
76
- height: calc(100% - var(--vg-sidebar-header-height) - var(--vg-sidebar-footer-height));
77
- overflow-y: auto;
78
- padding: var(--vg-sidebar-padding);
79
- }
80
- .vg-sidebar-footer {
81
- height: var(--vg-sidebar-footer-height);
82
- padding: var(--vg-sidebar-padding);
83
- border-top: var(--vg-sidebar-border);
84
- }
85
-
86
- /*# sourceMappingURL=vgsidebar.css.map */
1
+ @charset "UTF-8";
2
+ /**
3
+ *--------------------------------------------------------------------------
4
+ * Модуль: VGSidebar
5
+ * Автор: Vegas DEV
6
+ * Лицензия: смотри LICENSE
7
+ *--------------------------------------------------------------------------
8
+ **/
9
+ .vg-sidebar {
10
+ --vg-sidebar-horizontal-width: 400px ;
11
+ --vg-sidebar-horizontal-height: 100vh ;
12
+ --vg-sidebar-vertical-width: 100vw ;
13
+ --vg-sidebar-vertical-height: 30vh ;
14
+ --vg-sidebar-bg-color: #fff ;
15
+ --vg-sidebar-color: #000000 ;
16
+ --vg-sidebar-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
17
+ --vg-sidebar-header-height: 60px ;
18
+ --vg-sidebar-footer-height: 70px ;
19
+ --vg-sidebar-padding: 1rem ;
20
+ --vg-sidebar-border: 1px solid rgba(0, 0, 0, 0.2) ;
21
+ --vg-sidebar-z-index: 1040 ;
22
+ --vg-sidebar-transition: all 0.5s ease-in-out ;
23
+ position: fixed;
24
+ width: auto;
25
+ height: auto;
26
+ transition: var(--vg-sidebar-transition);
27
+ z-index: var(--vg-sidebar-z-index);
28
+ background: var(--vg-sidebar-bg-color);
29
+ color: var(--vg-sidebar-color);
30
+ box-shadow: var(--vg-sidebar-box-shadow);
31
+ }
32
+ .vg-sidebar.left, .vg-sidebar.right {
33
+ width: var(--vg-sidebar-horizontal-width);
34
+ height: var(--vg-sidebar-horizontal-height);
35
+ top: 0;
36
+ }
37
+ .vg-sidebar.left {
38
+ left: -105%;
39
+ }
40
+ .vg-sidebar.left.show {
41
+ left: 0;
42
+ }
43
+ .vg-sidebar.right {
44
+ right: -105%;
45
+ }
46
+ .vg-sidebar.right.show {
47
+ right: 0;
48
+ }
49
+ .vg-sidebar.top, .vg-sidebar.bottom {
50
+ height: var(--vg-sidebar-vertical-height);
51
+ width: var(--vg-sidebar-vertical-width);
52
+ left: 0;
53
+ }
54
+ .vg-sidebar.top {
55
+ top: -105%;
56
+ }
57
+ .vg-sidebar.top.show {
58
+ top: 0;
59
+ }
60
+ .vg-sidebar.bottom {
61
+ bottom: -105%;
62
+ }
63
+ .vg-sidebar.bottom.show {
64
+ bottom: 0;
65
+ }
66
+ .vg-sidebar-header {
67
+ height: var(--vg-sidebar-header-height);
68
+ z-index: 10;
69
+ position: relative;
70
+ display: flex;
71
+ align-items: center;
72
+ padding: var(--vg-sidebar-padding);
73
+ border-bottom: var(--vg-sidebar-border);
74
+ }
75
+ .vg-sidebar-body {
76
+ height: calc(100% - var(--vg-sidebar-header-height) - var(--vg-sidebar-footer-height));
77
+ overflow-y: auto;
78
+ padding: var(--vg-sidebar-padding);
79
+ }
80
+ .vg-sidebar-footer {
81
+ height: var(--vg-sidebar-footer-height);
82
+ padding: var(--vg-sidebar-padding);
83
+ border-top: var(--vg-sidebar-border);
84
+ }
85
+
86
+ /*# sourceMappingURL=vgsidebar.css.map */
package/app/utils/js/dom/manipulator.js CHANGED
@@ -56,7 +56,15 @@ const Manipulator = {
56
56
  if (isElement(element) && nameAttribute) {
57
57
  element.removeAttribute(nameAttribute);
58
58
  }
59
- }
59
+ },
60
+
61
+ hide(el) {
62
+ el.style.display = 'none';
63
+ },
64
+
65
+ show(el, state = 'block') {
66
+ el.style.display = state;
67
+ },
60
68
  }
61
69
 
62
70
  export {Manipulator}