vgapp 0.2.3 → 0.2.4

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 (38) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/app/modules/vgalert/js/vgalert.js +119 -0
  3. package/app/modules/vgalert/scss/_variables.scss +32 -0
  4. package/app/modules/vgalert/scss/vgalert.css +83 -0
  5. package/app/modules/vgalert/scss/vgalert.css.map +1 -0
  6. package/app/modules/vgalert/scss/vgalert.scss +79 -0
  7. package/app/modules/vgdropdown/js/vgdropdown.js +2 -1
  8. package/app/modules/vgdropdown/scss/vgdropdown.css +47 -47
  9. package/app/modules/vgformsender/scss/vgformsender.css +13 -13
  10. package/app/modules/vglawcookie/scss/vglawcookie.css +87 -87
  11. package/app/modules/vgmodal/js/vgmodal.js +32 -4
  12. package/app/modules/vgmodal/scss/vgmodal.css +3824 -3824
  13. package/app/modules/vgnav/scss/vgnav.css +312 -312
  14. package/app/modules/vgrollup/scss/vgrollup.css +41 -41
  15. package/app/modules/vgselect/scss/vgselect.css +256 -256
  16. package/app/modules/vgsidebar/js/vgsidebar.js +32 -2
  17. package/app/modules/vgsidebar/scss/vgsidebar.css +86 -86
  18. package/app/modules/vgtoast/js/vgtoast.js +378 -0
  19. package/app/modules/vgtoast/scss/_variables.scss +26 -0
  20. package/app/modules/vgtoast/scss/vgtoast.css +113 -0
  21. package/app/modules/vgtoast/scss/vgtoast.css.map +1 -0
  22. package/app/modules/vgtoast/scss/vgtoast.scss +125 -0
  23. package/app/utils/js/dom/event.js +1 -0
  24. package/app/utils/scss/default.css +198 -275
  25. package/app/utils/scss/default.css.map +1 -1
  26. package/app/utils/scss/default.scss +0 -70
  27. package/app/utils/scss/functions.scss +19 -0
  28. package/app/utils/scss/variables.scss +58 -35
  29. package/build/vgapp.css +13 -4946
  30. package/build/vgapp.css.map +1 -1
  31. package/build/vgapp.js +3 -4277
  32. package/build/vgapp.js.map +1 -1
  33. package/index.js +9 -1
  34. package/package.json +1 -1
  35. package/app/modules/vgnotify/js/vgnotify.js +0 -0
  36. package/app/modules/vgnotify/scss/vgnotify.css +0 -3
  37. package/app/modules/vgnotify/scss/vgnotify.css.map +0 -1
  38. package/app/modules/vgnotify/scss/vgnotify.scss +0 -0
package/app/modules/vgrollup/scss/vgrollup.css CHANGED
@@ -1,41 +1,41 @@
1
- @charset "UTF-8";
2
- /**
3
- *--------------------------------------------------------------------------
4
- * Модуль: VGRollup
5
- * Автор: Vegas DEV
6
- * Лицензия: смотри LICENSE
7
- *--------------------------------------------------------------------------
8
- **/
9
- .vg-rollup {
10
- --vg-rollup-transition: all 0.5s ease-in-out ;
11
- --vg-rollup-fade-height: 100px ;
12
- --vg-rollup-fade-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%) ;
13
- transform: var(--vg-rollup-transition);
14
- }
15
- .vg-rollup-button {
16
- --vg-rollup-button-align: center ;
17
- text-align: var(--vg-rollup-button-align);
18
- }
19
- .vg-rollup-content--hidden {
20
- overflow: hidden;
21
- }
22
- .vg-rollup-content--fade {
23
- position: relative;
24
- }
25
- .vg-rollup-content--fade:after {
26
- content: "";
27
- position: absolute;
28
- left: 0;
29
- bottom: 0;
30
- width: 100%;
31
- height: var(--vg-rollup-fade-height);
32
- background: var(--vg-rollup-fade-background);
33
- }
34
- .vg-rollup-content--ellipsis {
35
- overflow: hidden;
36
- text-overflow: ellipsis;
37
- display: -webkit-box;
38
- -webkit-box-orient: vertical;
39
- }
40
-
41
- /*# sourceMappingURL=vgrollup.css.map */
1
+ @charset "UTF-8";
2
+ /**
3
+ *--------------------------------------------------------------------------
4
+ * Модуль: VGRollup
5
+ * Автор: Vegas DEV
6
+ * Лицензия: смотри LICENSE
7
+ *--------------------------------------------------------------------------
8
+ **/
9
+ .vg-rollup {
10
+ --vg-rollup-transition: all 0.5s ease-in-out ;
11
+ --vg-rollup-fade-height: 100px ;
12
+ --vg-rollup-fade-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%) ;
13
+ transform: var(--vg-rollup-transition);
14
+ }
15
+ .vg-rollup-button {
16
+ --vg-rollup-button-align: center ;
17
+ text-align: var(--vg-rollup-button-align);
18
+ }
19
+ .vg-rollup-content--hidden {
20
+ overflow: hidden;
21
+ }
22
+ .vg-rollup-content--fade {
23
+ position: relative;
24
+ }
25
+ .vg-rollup-content--fade:after {
26
+ content: "";
27
+ position: absolute;
28
+ left: 0;
29
+ bottom: 0;
30
+ width: 100%;
31
+ height: var(--vg-rollup-fade-height);
32
+ background: var(--vg-rollup-fade-background);
33
+ }
34
+ .vg-rollup-content--ellipsis {
35
+ overflow: hidden;
36
+ text-overflow: ellipsis;
37
+ display: -webkit-box;
38
+ -webkit-box-orient: vertical;
39
+ }
40
+
41
+ /*# sourceMappingURL=vgrollup.css.map */
package/app/modules/vgselect/scss/vgselect.css CHANGED
@@ -1,256 +1,256 @@
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-current-placehoder-color: rgba(0, 0, 0, 0.32) ;
36
- --vg-select-current-placehoder-font-size: 16px ;
37
- --vg-select-dropdown-background-color: white ;
38
- --vg-select-dropdown-color: black ;
39
- --vg-select-dropdown-border-width: 1px ;
40
- --vg-select-dropdown-border-style: solid ;
41
- --vg-select-dropdown-border-color: #dddddd ;
42
- --vg-select-dropdown-border-radius: 0.375rem ;
43
- --vg-select-dropdown-box-shadow: 0 7px 12px 1px rgba(68, 68, 68, 0.11) ;
44
- --vg-select-dropdown-z-index: 15 ;
45
- --vg-select-list-background-color: transparent ;
46
- --vg-select-list-color: black ;
47
- --vg-select-list-padding-left: 8px ;
48
- --vg-select-list-padding-right: 8px ;
49
- --vg-select-list-padding-top: 8px ;
50
- --vg-select-list-padding-bottom: 8px ;
51
- --vg-select-list-border-bottom-width: 1px ;
52
- --vg-select-list-border-bottom-style: solid ;
53
- --vg-select-list-border-bottom-color: #f5f5f5 ;
54
- --vg-select-optgroup-background-color: transparent ;
55
- --vg-select-optgroup-color: #000 ;
56
- --vg-select-optgroup-padding-left: 8px ;
57
- --vg-select-optgroup-padding-right: 8px ;
58
- --vg-select-optgroup-padding-top: 8px ;
59
- --vg-select-optgroup-padding-bottom: 8px ;
60
- --vg-select-optgroup-border-bottom-width: 1px ;
61
- --vg-select-optgroup-border-bottom-style: solid ;
62
- --vg-select-optgroup-border-bottom-color: #838383 ;
63
- --vg-select-optgroup-font-weight: 500 ;
64
- --vg-select-optgroup-hover-background-color: #f7f7f7 ;
65
- --vg-select-optgroup-hover-color: black ;
66
- --vg-select-optgroup-hover-border-bottom-color: #f5f5f5 ;
67
- --vg-select-list-hover-background-color: #f7f7f7 ;
68
- --vg-select-list-hover-color: black ;
69
- --vg-select-list-hover-border-bottom-color: #f5f5f5 ;
70
- --vg-select-search-background-color: #f2f2f2 ;
71
- --vg-select-search-color: #000000 ;
72
- --vg-select-list-max-height: 286px;
73
- --vg-select-list-scrollbar-width: 6px;
74
- --vg-select-list-scrollbar-bg: #F5F5F5;
75
- --vg-select-list-scrollbar-thumb: #999;
76
- position: relative;
77
- }
78
- .vg-select:not(.show) .vg-select-dropdown {
79
- display: none;
80
- }
81
- .vg-select-current {
82
- background-color: var(--vg-select-current-background-color);
83
- color: var(--vg-select-current-color);
84
- border-width: var(--vg-select-current-border-width);
85
- border-style: var(--vg-select-current-border-style);
86
- border-color: var(--vg-select-current-border-color);
87
- border-radius: var(--vg-select-current-border-radius);
88
- padding-left: var(--vg-select-current-padding-left);
89
- padding-right: var(--vg-select-current-padding-right);
90
- padding-top: var(--vg-select-current-padding-top);
91
- padding-bottom: var(--vg-select-current-padding-bottom);
92
- line-height: var(--vg-select-current-line-height);
93
- font-size: var(--vg-select-current-font-size);
94
- z-index: var(--vg-select-current-z-index);
95
- box-sizing: border-box;
96
- cursor: pointer;
97
- outline: none;
98
- position: relative;
99
- white-space: nowrap;
100
- overflow: hidden;
101
- text-overflow: ellipsis;
102
- }
103
- .vg-select-current:after {
104
- content: "";
105
- position: absolute;
106
- right: 16px;
107
- top: 50%;
108
- transform: translateY(-50%);
109
- transition: all 0.4s ease-in-out;
110
- 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>');
111
- background-repeat: no-repeat;
112
- width: 16px;
113
- height: 16px;
114
- }
115
- .vg-select-current--placeholder {
116
- color: var(--vg-select-current-placehoder-color);
117
- font-size: var(--vg-select-current-font-size);
118
- }
119
- .vg-select-dropdown {
120
- background-color: var(--vg-select-dropdown-background-color);
121
- color: var(--vg-select-dropdown-color);
122
- border-width: var(--vg-select-dropdown-border-width);
123
- border-style: var(--vg-select-dropdown-border-style);
124
- border-color: var(--vg-select-dropdown-border-color);
125
- border-radius: var(--vg-select-dropdown-border-radius);
126
- box-shadow: var(--vg-select-dropdown-box-shadow);
127
- z-index: var(--vg-select-dropdown-z-index);
128
- position: absolute;
129
- box-sizing: border-box;
130
- opacity: 0;
131
- overflow: hidden;
132
- padding: 0;
133
- top: 100%;
134
- left: 0;
135
- width: 100%;
136
- height: 0;
137
- pointer-events: auto;
138
- transform-origin: 50% 0;
139
- transform: scale(0.75) translateY(-11px);
140
- transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
141
- z-index: var(--vg-select-dropdown-z-index);
142
- margin-top: 0.25rem;
143
- }
144
- .vg-select-list {
145
- margin: 0;
146
- padding: 0;
147
- list-style: none;
148
- display: flex;
149
- flex-direction: column;
150
- max-height: var(--vg-select-list-max-height);
151
- overflow-y: auto;
152
- }
153
- .vg-select-list::-webkit-scrollbar-track {
154
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
155
- background-color: var(--vg-select-list-scrollbar-bg);
156
- }
157
- .vg-select-list::-webkit-scrollbar {
158
- width: var(--vg-select-list-scrollbar-width);
159
- background-color: var(--vg-select-list-scrollbar-bg);
160
- }
161
- .vg-select-list::-webkit-scrollbar-thumb {
162
- background-color: var(--vg-select-list-scrollbar-thumb);
163
- }
164
- .vg-select-list--option {
165
- background-color: var(--vg-select-list-background-color);
166
- color: var(--vg-select-list-color);
167
- padding-left: var(--vg-select-list-padding-left);
168
- padding-right: var(--vg-select-list-padding-right);
169
- padding-top: var(--vg-select-list-padding-top);
170
- padding-bottom: var(--vg-select-list-padding-bottom);
171
- border-bottom-width: var(--vg-select-list-border-bottom-width);
172
- border-bottom-style: var(--vg-select-list-border-bottom-style);
173
- border-bottom-color: var(--vg-select-list-border-bottom-color);
174
- display: block;
175
- width: 100%;
176
- cursor: pointer;
177
- transition: all 0.4s ease-in-out;
178
- }
179
- .vg-select-list--option:last-child {
180
- border: none;
181
- }
182
- .vg-select-list--option:hover, .vg-select-list--option.selected {
183
- background-color: var(--vg-select-list-hover-background-color);
184
- color: var(--vg-select-list-hover-color);
185
- border-bottom-color: var(--vg-select-list-hover-border-bottom-color);
186
- }
187
- .vg-select-list--option.disabled {
188
- opacity: 0.6;
189
- cursor: not-allowed;
190
- }
191
- .vg-select-list--option.hidden {
192
- display: none !important;
193
- }
194
- .vg-select-list--optgroup {
195
- list-style: none;
196
- padding: 0;
197
- }
198
- .vg-select-list--optgroup + .vg-select-list--optgroup {
199
- border-top-width: var(--vg-select-optgroup-border-bottom-width);
200
- border-top-style: var(--vg-select-optgroup-border-bottom-style);
201
- border-top-color: var(--vg-select-optgroup-border-bottom-color);
202
- }
203
- .vg-select-list--optgroup > li {
204
- --vg-select-list-padding-left: 16px;
205
- }
206
- .vg-select-list--optgroup-title {
207
- background-color: var(--vg-select-optgroup-background-color);
208
- color: var(--vg-select-optgroup-color);
209
- padding-left: var(--vg-select-optgroup-padding-left);
210
- padding-right: var(--vg-select-optgroup-padding-right);
211
- padding-top: var(--vg-select-optgroup-padding-top);
212
- padding-bottom: var(--vg-select-optgroup-padding-bottom);
213
- border-bottom-width: var(--vg-select-optgroup-border-bottom-width);
214
- border-bottom-style: var(--vg-select-optgroup-border-bottom-style);
215
- border-bottom-color: var(--vg-select-optgroup-border-bottom-color);
216
- font-weight: var(--vg-select-optgroup-font-weight);
217
- }
218
- .vg-select-search input {
219
- background-color: var(--vg-select-search-background-color);
220
- color: var(--vg-select-search-color);
221
- padding: 8px;
222
- border: none;
223
- outline: none;
224
- width: 100%;
225
- }
226
- .vg-select.show .vg-select-current:after {
227
- transform: translateY(-50%) rotate(180deg);
228
- }
229
- .vg-select.show .vg-select-dropdown {
230
- display: block;
231
- }
232
- .vg-select.active .vg-select-dropdown {
233
- transform: scale(1) translateY(0);
234
- opacity: 1;
235
- box-sizing: border-box;
236
- height: auto;
237
- }
238
- .vg-select.is-invalid .vg-select-current {
239
- 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");
240
- background-repeat: no-repeat;
241
- background-position: right calc(1.975em + 0.1875rem) center;
242
- background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
243
- --vg-select-current-padding-right: 55px;
244
- }
245
- .vg-select.disabled:before {
246
- content: "";
247
- position: absolute;
248
- width: 100%;
249
- height: 100%;
250
- z-index: 12;
251
- }
252
- .vg-select.disabled > .vg-select-current {
253
- opacity: 0.75;
254
- }
255
-
256
- /*# sourceMappingURL=vgselect.css.map */
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-current-placehoder-color: rgba(0, 0, 0, 0.32) ;
36
+ --vg-select-current-placehoder-font-size: 16px ;
37
+ --vg-select-dropdown-background-color: white ;
38
+ --vg-select-dropdown-color: black ;
39
+ --vg-select-dropdown-border-width: 1px ;
40
+ --vg-select-dropdown-border-style: solid ;
41
+ --vg-select-dropdown-border-color: #dddddd ;
42
+ --vg-select-dropdown-border-radius: 0.375rem ;
43
+ --vg-select-dropdown-box-shadow: 0 7px 12px 1px rgba(68, 68, 68, 0.11) ;
44
+ --vg-select-dropdown-z-index: 15 ;
45
+ --vg-select-list-background-color: transparent ;
46
+ --vg-select-list-color: black ;
47
+ --vg-select-list-padding-left: 8px ;
48
+ --vg-select-list-padding-right: 8px ;
49
+ --vg-select-list-padding-top: 8px ;
50
+ --vg-select-list-padding-bottom: 8px ;
51
+ --vg-select-list-border-bottom-width: 1px ;
52
+ --vg-select-list-border-bottom-style: solid ;
53
+ --vg-select-list-border-bottom-color: #f5f5f5 ;
54
+ --vg-select-optgroup-background-color: transparent ;
55
+ --vg-select-optgroup-color: #000 ;
56
+ --vg-select-optgroup-padding-left: 8px ;
57
+ --vg-select-optgroup-padding-right: 8px ;
58
+ --vg-select-optgroup-padding-top: 8px ;
59
+ --vg-select-optgroup-padding-bottom: 8px ;
60
+ --vg-select-optgroup-border-bottom-width: 1px ;
61
+ --vg-select-optgroup-border-bottom-style: solid ;
62
+ --vg-select-optgroup-border-bottom-color: #838383 ;
63
+ --vg-select-optgroup-font-weight: 500 ;
64
+ --vg-select-optgroup-hover-background-color: #f7f7f7 ;
65
+ --vg-select-optgroup-hover-color: black ;
66
+ --vg-select-optgroup-hover-border-bottom-color: #f5f5f5 ;
67
+ --vg-select-list-hover-background-color: #f7f7f7 ;
68
+ --vg-select-list-hover-color: black ;
69
+ --vg-select-list-hover-border-bottom-color: #f5f5f5 ;
70
+ --vg-select-search-background-color: #f2f2f2 ;
71
+ --vg-select-search-color: #000000 ;
72
+ --vg-select-list-max-height: 286px;
73
+ --vg-select-list-scrollbar-width: 6px;
74
+ --vg-select-list-scrollbar-bg: #F5F5F5;
75
+ --vg-select-list-scrollbar-thumb: #999;
76
+ position: relative;
77
+ }
78
+ .vg-select:not(.show) .vg-select-dropdown {
79
+ display: none;
80
+ }
81
+ .vg-select-current {
82
+ background-color: var(--vg-select-current-background-color);
83
+ color: var(--vg-select-current-color);
84
+ border-width: var(--vg-select-current-border-width);
85
+ border-style: var(--vg-select-current-border-style);
86
+ border-color: var(--vg-select-current-border-color);
87
+ border-radius: var(--vg-select-current-border-radius);
88
+ padding-left: var(--vg-select-current-padding-left);
89
+ padding-right: var(--vg-select-current-padding-right);
90
+ padding-top: var(--vg-select-current-padding-top);
91
+ padding-bottom: var(--vg-select-current-padding-bottom);
92
+ line-height: var(--vg-select-current-line-height);
93
+ font-size: var(--vg-select-current-font-size);
94
+ z-index: var(--vg-select-current-z-index);
95
+ box-sizing: border-box;
96
+ cursor: pointer;
97
+ outline: none;
98
+ position: relative;
99
+ white-space: nowrap;
100
+ overflow: hidden;
101
+ text-overflow: ellipsis;
102
+ }
103
+ .vg-select-current:after {
104
+ content: "";
105
+ position: absolute;
106
+ right: 16px;
107
+ top: 50%;
108
+ transform: translateY(-50%);
109
+ transition: all 0.4s ease-in-out;
110
+ 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>');
111
+ background-repeat: no-repeat;
112
+ width: 16px;
113
+ height: 16px;
114
+ }
115
+ .vg-select-current--placeholder {
116
+ color: var(--vg-select-current-placehoder-color);
117
+ font-size: var(--vg-select-current-font-size);
118
+ }
119
+ .vg-select-dropdown {
120
+ background-color: var(--vg-select-dropdown-background-color);
121
+ color: var(--vg-select-dropdown-color);
122
+ border-width: var(--vg-select-dropdown-border-width);
123
+ border-style: var(--vg-select-dropdown-border-style);
124
+ border-color: var(--vg-select-dropdown-border-color);
125
+ border-radius: var(--vg-select-dropdown-border-radius);
126
+ box-shadow: var(--vg-select-dropdown-box-shadow);
127
+ z-index: var(--vg-select-dropdown-z-index);
128
+ position: absolute;
129
+ box-sizing: border-box;
130
+ opacity: 0;
131
+ overflow: hidden;
132
+ padding: 0;
133
+ top: 100%;
134
+ left: 0;
135
+ width: 100%;
136
+ height: 0;
137
+ pointer-events: auto;
138
+ transform-origin: 50% 0;
139
+ transform: scale(0.75) translateY(-11px);
140
+ transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
141
+ z-index: var(--vg-select-dropdown-z-index);
142
+ margin-top: 0.25rem;
143
+ }
144
+ .vg-select-list {
145
+ margin: 0;
146
+ padding: 0;
147
+ list-style: none;
148
+ display: flex;
149
+ flex-direction: column;
150
+ max-height: var(--vg-select-list-max-height);
151
+ overflow-y: auto;
152
+ }
153
+ .vg-select-list::-webkit-scrollbar-track {
154
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
155
+ background-color: var(--vg-select-list-scrollbar-bg);
156
+ }
157
+ .vg-select-list::-webkit-scrollbar {
158
+ width: var(--vg-select-list-scrollbar-width);
159
+ background-color: var(--vg-select-list-scrollbar-bg);
160
+ }
161
+ .vg-select-list::-webkit-scrollbar-thumb {
162
+ background-color: var(--vg-select-list-scrollbar-thumb);
163
+ }
164
+ .vg-select-list--option {
165
+ background-color: var(--vg-select-list-background-color);
166
+ color: var(--vg-select-list-color);
167
+ padding-left: var(--vg-select-list-padding-left);
168
+ padding-right: var(--vg-select-list-padding-right);
169
+ padding-top: var(--vg-select-list-padding-top);
170
+ padding-bottom: var(--vg-select-list-padding-bottom);
171
+ border-bottom-width: var(--vg-select-list-border-bottom-width);
172
+ border-bottom-style: var(--vg-select-list-border-bottom-style);
173
+ border-bottom-color: var(--vg-select-list-border-bottom-color);
174
+ display: block;
175
+ width: 100%;
176
+ cursor: pointer;
177
+ transition: all 0.4s ease-in-out;
178
+ }
179
+ .vg-select-list--option:last-child {
180
+ border: none;
181
+ }
182
+ .vg-select-list--option:hover, .vg-select-list--option.selected {
183
+ background-color: var(--vg-select-list-hover-background-color);
184
+ color: var(--vg-select-list-hover-color);
185
+ border-bottom-color: var(--vg-select-list-hover-border-bottom-color);
186
+ }
187
+ .vg-select-list--option.disabled {
188
+ opacity: 0.6;
189
+ cursor: not-allowed;
190
+ }
191
+ .vg-select-list--option.hidden {
192
+ display: none !important;
193
+ }
194
+ .vg-select-list--optgroup {
195
+ list-style: none;
196
+ padding: 0;
197
+ }
198
+ .vg-select-list--optgroup + .vg-select-list--optgroup {
199
+ border-top-width: var(--vg-select-optgroup-border-bottom-width);
200
+ border-top-style: var(--vg-select-optgroup-border-bottom-style);
201
+ border-top-color: var(--vg-select-optgroup-border-bottom-color);
202
+ }
203
+ .vg-select-list--optgroup > li {
204
+ --vg-select-list-padding-left: 16px;
205
+ }
206
+ .vg-select-list--optgroup-title {
207
+ background-color: var(--vg-select-optgroup-background-color);
208
+ color: var(--vg-select-optgroup-color);
209
+ padding-left: var(--vg-select-optgroup-padding-left);
210
+ padding-right: var(--vg-select-optgroup-padding-right);
211
+ padding-top: var(--vg-select-optgroup-padding-top);
212
+ padding-bottom: var(--vg-select-optgroup-padding-bottom);
213
+ border-bottom-width: var(--vg-select-optgroup-border-bottom-width);
214
+ border-bottom-style: var(--vg-select-optgroup-border-bottom-style);
215
+ border-bottom-color: var(--vg-select-optgroup-border-bottom-color);
216
+ font-weight: var(--vg-select-optgroup-font-weight);
217
+ }
218
+ .vg-select-search input {
219
+ background-color: var(--vg-select-search-background-color);
220
+ color: var(--vg-select-search-color);
221
+ padding: 8px;
222
+ border: none;
223
+ outline: none;
224
+ width: 100%;
225
+ }
226
+ .vg-select.show .vg-select-current:after {
227
+ transform: translateY(-50%) rotate(180deg);
228
+ }
229
+ .vg-select.show .vg-select-dropdown {
230
+ display: block;
231
+ }
232
+ .vg-select.active .vg-select-dropdown {
233
+ transform: scale(1) translateY(0);
234
+ opacity: 1;
235
+ box-sizing: border-box;
236
+ height: auto;
237
+ }
238
+ .vg-select.is-invalid .vg-select-current {
239
+ 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");
240
+ background-repeat: no-repeat;
241
+ background-position: right calc(1.975em + 0.1875rem) center;
242
+ background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
243
+ --vg-select-current-padding-right: 55px;
244
+ }
245
+ .vg-select.disabled:before {
246
+ content: "";
247
+ position: absolute;
248
+ width: 100%;
249
+ height: 100%;
250
+ z-index: 12;
251
+ }
252
+ .vg-select.disabled > .vg-select-current {
253
+ opacity: 0.75;
254
+ }
255
+
256
+ /*# sourceMappingURL=vgselect.css.map */
package/app/modules/vgsidebar/js/vgsidebar.js CHANGED
@@ -25,6 +25,8 @@ const EVENT_KEY_LOADED = `${NAME_KEY}.loaded`;
25
25
  const EVENT_KEY_KEYDOWN_DISMISS = `keydown.dismiss.${NAME_KEY}`;
26
26
  const EVENT_KEY_HIDE_PREVENTED = `hidePrevented.${NAME_KEY}`;
27
27
  const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
28
+ const EVENT_KEY_POPSTATE_DATA_API = `popstate.${NAME_KEY}.data.api`;
29
+ const EVENT_KEY_DOM_LOADED_DATA_API = `DOMContentLoaded.${NAME_KEY}.data.api`;
28
30
 
29
31
  class VGSidebar extends BaseModule {
30
32
  constructor(element, params = {}) {
@@ -34,6 +36,7 @@ class VGSidebar extends BaseModule {
34
36
  backdrop: true,
35
37
  overflow: true,
36
38
  keyboard: true,
39
+ hash: true,
37
40
  animation: {
38
41
  enable: false,
39
42
  in: 'animate__rollIn',
@@ -71,7 +74,8 @@ class VGSidebar extends BaseModule {
71
74
  const _this = this;
72
75
  if (isDisabled(_this._element)) return;
73
76
 
74
- _this._params = _this._getParams(relatedTarget, _this._params);
77
+ if (relatedTarget) _this._params = _this._getParams(relatedTarget, _this._params);
78
+
75
79
  _this._route(function (status, data) {
76
80
  EventHandler.trigger(_this._element, EVENT_KEY_LOADED, {stats: status, data: data});
77
81
  });
@@ -87,6 +91,14 @@ class VGSidebar extends BaseModule {
87
91
  Overflow.append();
88
92
  }
89
93
 
94
+ if (this._params.hash) {
95
+ window.history.pushState(null, "vg-sidebar-open", "#" + this._element.id);
96
+
97
+ EventHandler.on(window, EVENT_KEY_POPSTATE_DATA_API, () => {
98
+ this.hide();
99
+ });
100
+ }
101
+
90
102
  _this._element.classList.add(CLASS_NAME_SHOW);
91
103
  document.body.classList.add(CLASS_NAME_OPEN);
92
104
 
@@ -124,6 +136,10 @@ class VGSidebar extends BaseModule {
124
136
  Overflow.destroy();
125
137
  }
126
138
 
139
+ if (_this._params.hash) {
140
+ history.pushState("", document.title, window.location.pathname + window.location.search);
141
+ }
142
+
127
143
  document.body.classList.remove(CLASS_NAME_OPEN);
128
144
  EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
129
145
  }
@@ -171,7 +187,6 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
171
187
 
172
188
  this.setAttribute('aria-expanded', true);
173
189
  EventHandler.one(target, EVENT_KEY_HIDDEN, () => {
174
- //if (isVisible(this)) this.focus();
175
190
  this.setAttribute('aria-expanded', false);
176
191
  })
177
192
 
@@ -184,4 +199,19 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
184
199
  data.toggle(this);
185
200
  });
186
201
 
202
+ EventHandler.on(document, EVENT_KEY_DOM_LOADED_DATA_API, function () {
203
+ let targetHash = window.location.hash.slice(1);
204
+ if (targetHash) {
205
+ let target = Selectors.find('#' + targetHash);
206
+ if (target && target.classList.contains('vg-sidebar')) {
207
+ if (isDisabled(target)) {
208
+ return;
209
+ }
210
+
211
+ const data = VGSidebar.getOrCreateInstance(target)
212
+ data.toggle();
213
+ }
214
+ }
215
+ })
216
+
187
217
  export default VGSidebar;