vgapp 0.2.1 → 0.2.2

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 (17) hide show
  1. package/CHANGELOG.md +5 -1
  2. package/app/modules/vgdropdown/js/vgdropdown.js +24 -0
  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/scss/vgmodal.css +3824 -3824
  7. package/app/modules/vgnav/scss/vgnav.css +312 -309
  8. package/app/modules/vgnav/scss/vgnav.css.map +1 -1
  9. package/app/modules/vgnotify/scss/vgnotify.css +3 -3
  10. package/app/modules/vgrollup/scss/vgrollup.css +41 -41
  11. package/app/modules/vgselect/scss/vgselect.css +256 -256
  12. package/app/modules/vgsidebar/scss/vgsidebar.css +86 -86
  13. package/app/utils/scss/default.css +275 -275
  14. package/build/vgapp.css +10 -4945
  15. package/build/vgapp.js +3 -4255
  16. package/build/vgapp.js.map +1 -1
  17. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,4 +1,8 @@
1
- # VEGAS-APP 0.2.1 (Март, 13, 2025)
1
+ # VEGAS-APP 0.2.2 (Апрель, 4, 2025)
2
+ ## Модуль VGDROPDOWN
3
+ * Добавлен параметр overflow и backdrop
4
+
5
+ # VEGAS-APP 0.2.1 (Март, 31, 2025)
2
6
  ## Модуль VGDROPDOWN
3
7
  * Теперь можно открыть выпадающих список через параметр data-vg-target
4
8
 
package/app/modules/vgdropdown/js/vgdropdown.js CHANGED
@@ -3,6 +3,8 @@ import EventHandler from "../../../utils/js/dom/event";
3
3
  import Selectors from "../../../utils/js/dom/selectors";
4
4
  import {isDisabled, mergeDeepObject, noop} from "../../../utils/js/functions";
5
5
  import Placement from "../../../utils/js/components/placement";
6
+ import Overflow from "../../../utils/js/components/overflow";
7
+ import Backdrop from "../../../utils/js/components/backdrop";
6
8
 
7
9
  const NAME = 'dropdown';
8
10
  const NAME_KEY = 'vg.dropdown';
@@ -100,6 +102,15 @@ class VGDropdown extends BaseModule {
100
102
  this._drop.classList.add(CLASS_NAME_SHOW);
101
103
  this._setPlacement();
102
104
 
105
+ if (this._params.backdrop) {
106
+ Backdrop.show();
107
+ }
108
+
109
+ if (this._params.overflow) {
110
+ Overflow.append();
111
+ document.body.classList.add('dropdown-open')
112
+ }
113
+
103
114
  const completeCallBack = () => {
104
115
  this._drop.classList.add(CLASS_NAME_FADE);
105
116
  EventHandler.trigger(this._element, EVENT_KEY_SHOWN, relatedTarget)
@@ -143,6 +154,19 @@ class VGDropdown extends BaseModule {
143
154
  this._element.classList.remove(CLASS_NAME_SHOW);
144
155
  this._element.setAttribute('aria-expanded', 'false');
145
156
 
157
+ if (this._params.backdrop) {
158
+ Backdrop.hide(function () {
159
+ if (this._params.overflow) {
160
+ Overflow.destroy();
161
+ }
162
+ });
163
+ }
164
+
165
+ if (this._params.overflow) {
166
+ Overflow.destroy();
167
+ document.body.classList.remove('dropdown-open');
168
+ }
169
+
146
170
  setTimeout(() => {
147
171
  const completeCallback = () => {
148
172
  this._drop.classList.remove(CLASS_NAME_SHOW);
package/app/modules/vgdropdown/scss/vgdropdown.css CHANGED
@@ -1,47 +1,47 @@
1
- @charset "UTF-8";
2
- /**
3
- *--------------------------------------------------------------------------
4
- * Модуль: VGDropdown
5
- * Автор: Vegas DEV
6
- * Лицензия: смотри LICENSE
7
- *--------------------------------------------------------------------------
8
- **/
9
- .vg-dropdown {
10
- position: relative;
11
- --vg-dropdown-bg-color: #fff ;
12
- --vg-dropdown-color: #000000 ;
13
- --vg-dropdown-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
14
- --vg-dropdown-border-width: 1px ;
15
- --vg-dropdown-border-style: solid ;
16
- --vg-dropdown-border-color: rgba(0, 0, 0, 0.2) ;
17
- --vg-dropdown-border-radius: 0.375rem ;
18
- --vg-dropdown-z-index: 1010 ;
19
- --vg-dropdown-transition: all 0.5s ease-in-out ;
20
- --vg-dropdown-min-width: 225px ;
21
- }
22
- .vg-dropdown-content {
23
- z-index: var(--vg-dropdown-z-index);
24
- position: absolute;
25
- opacity: 0;
26
- transform: translateY(20%);
27
- transition: var(--vg-dropdown-transition);
28
- min-width: var(--vg-dropdown-min-width);
29
- }
30
- .vg-dropdown-content:not(.show) {
31
- display: none;
32
- }
33
- .vg-dropdown-content.fade {
34
- opacity: 1;
35
- transform: translateY(0);
36
- }
37
- .vg-dropdown-container {
38
- background-color: var(--vg-dropdown-bg-color);
39
- color: var(--vg-dropdown-color);
40
- border-width: var(--vg-dropdown-border-width);
41
- border-style: var(--vg-dropdown-border-style);
42
- border-color: var(--vg-dropdown-border-color);
43
- border-radius: var(--vg-dropdown-border-radius);
44
- box-shadow: var(--vg-dropdown-box-shadow);
45
- }
46
-
47
- /*# sourceMappingURL=vgdropdown.css.map */
1
+ @charset "UTF-8";
2
+ /**
3
+ *--------------------------------------------------------------------------
4
+ * Модуль: VGDropdown
5
+ * Автор: Vegas DEV
6
+ * Лицензия: смотри LICENSE
7
+ *--------------------------------------------------------------------------
8
+ **/
9
+ .vg-dropdown {
10
+ position: relative;
11
+ --vg-dropdown-bg-color: #fff ;
12
+ --vg-dropdown-color: #000000 ;
13
+ --vg-dropdown-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
14
+ --vg-dropdown-border-width: 1px ;
15
+ --vg-dropdown-border-style: solid ;
16
+ --vg-dropdown-border-color: rgba(0, 0, 0, 0.2) ;
17
+ --vg-dropdown-border-radius: 0.375rem ;
18
+ --vg-dropdown-z-index: 1010 ;
19
+ --vg-dropdown-transition: all 0.5s ease-in-out ;
20
+ --vg-dropdown-min-width: 225px ;
21
+ }
22
+ .vg-dropdown-content {
23
+ z-index: var(--vg-dropdown-z-index);
24
+ position: absolute;
25
+ opacity: 0;
26
+ transform: translateY(20%);
27
+ transition: var(--vg-dropdown-transition);
28
+ min-width: var(--vg-dropdown-min-width);
29
+ }
30
+ .vg-dropdown-content:not(.show) {
31
+ display: none;
32
+ }
33
+ .vg-dropdown-content.fade {
34
+ opacity: 1;
35
+ transform: translateY(0);
36
+ }
37
+ .vg-dropdown-container {
38
+ background-color: var(--vg-dropdown-bg-color);
39
+ color: var(--vg-dropdown-color);
40
+ border-width: var(--vg-dropdown-border-width);
41
+ border-style: var(--vg-dropdown-border-style);
42
+ border-color: var(--vg-dropdown-border-color);
43
+ border-radius: var(--vg-dropdown-border-radius);
44
+ box-shadow: var(--vg-dropdown-box-shadow);
45
+ }
46
+
47
+ /*# sourceMappingURL=vgdropdown.css.map */
package/app/modules/vgformsender/scss/vgformsender.css CHANGED
@@ -1,13 +1,13 @@
1
- @charset "UTF-8";
2
- /**
3
- *--------------------------------------------------------------------------
4
- * Модуль: VGFormSender
5
- * Автор: Vegas DEV
6
- * Лицензия: смотри LICENSE
7
- *--------------------------------------------------------------------------
8
- **/
9
- .vg-form-sender-modal .vg-modal-content {
10
- padding: 0;
11
- }
12
-
13
- /*# sourceMappingURL=vgformsender.css.map */
1
+ @charset "UTF-8";
2
+ /**
3
+ *--------------------------------------------------------------------------
4
+ * Модуль: VGFormSender
5
+ * Автор: Vegas DEV
6
+ * Лицензия: смотри LICENSE
7
+ *--------------------------------------------------------------------------
8
+ **/
9
+ .vg-form-sender-modal .vg-modal-content {
10
+ padding: 0;
11
+ }
12
+
13
+ /*# sourceMappingURL=vgformsender.css.map */
package/app/modules/vglawcookie/scss/vglawcookie.css CHANGED
@@ -1,87 +1,87 @@
1
- @charset "UTF-8";
2
- /**
3
- *--------------------------------------------------------------------------
4
- * Модуль: VGLawCookie
5
- * Автор: Vegas DEV
6
- * Лицензия: смотри LICENSE
7
- *--------------------------------------------------------------------------
8
- **/
9
- .vg-lawcookie {
10
- --vg-lawcookie-background-color: #fff ;
11
- --vg-lawcookie-color: #000000 ;
12
- --vg-lawcookie-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
13
- --vg-lawcookie-padding: 1rem ;
14
- --vg-lawcookie-border: 1px solid rgba(0, 0, 0, 0.2) ;
15
- --vg-lawcookie-border-radius: 0.375rem ;
16
- --vg-lawcookie-z-index: 2000 ;
17
- --vg-lawcookie-transition: all 0.5s ease-in-out ;
18
- --vg-lawcookie-max-width: 50% ;
19
- --vg-lawcookie-padding-outer: 1rem ;
20
- --vg-lawcookie-font-size: 14px ;
21
- --vg-lawcookie-title-font-size: 16px ;
22
- position: fixed;
23
- display: none;
24
- padding: var(--vg-lawcookie-padding-outer);
25
- z-index: var(--vg-lawcookie-z-index);
26
- max-width: var(--vg-lawcookie-max-width);
27
- }
28
- @media screen and (max-width: 600px) {
29
- .vg-lawcookie {
30
- width: 100%;
31
- --vg-lawcookie-max-width: 100%;
32
- }
33
- }
34
- .vg-lawcookie.show {
35
- display: block;
36
- }
37
- .vg-lawcookie.left {
38
- left: 0;
39
- }
40
- .vg-lawcookie.right {
41
- right: 0;
42
- }
43
- .vg-lawcookie.top {
44
- top: 0;
45
- }
46
- .vg-lawcookie.bottom {
47
- bottom: 0;
48
- }
49
- .vg-lawcookie.center {
50
- top: 50%;
51
- left: 50%;
52
- }
53
- .vg-lawcookie.center.left {
54
- left: 0;
55
- }
56
- .vg-lawcookie.center.top {
57
- top: 0;
58
- left: 50%;
59
- }
60
- .vg-lawcookie.center.bottom {
61
- top: auto;
62
- bottom: 0;
63
- }
64
- .vg-lawcookie.center.right {
65
- right: 0;
66
- left: auto;
67
- }
68
- .vg-lawcookie.fullwidth {
69
- max-width: 100%;
70
- width: 100%;
71
- --vg-lawcookie-padding-outer: 0;
72
- --vg-lawcookie-border-radius: 0;
73
- --vg-lawcookie-box-shadow: none;
74
- }
75
- .vg-lawcookie--content {
76
- background-color: var(--vg-lawcookie-background-color);
77
- border-radius: var(--vg-lawcookie-border-radius);
78
- padding: var(--vg-lawcookie-padding);
79
- color: var(--vg-lawcookie-color);
80
- box-shadow: var(--vg-lawcookie-box-shadow);
81
- font-size: var(--vg-lawcookie-font-size);
82
- }
83
- .vg-lawcookie--content .title {
84
- font-size: var(--vg-lawcookie-title-font-size);
85
- }
86
-
87
- /*# sourceMappingURL=vglawcookie.css.map */
1
+ @charset "UTF-8";
2
+ /**
3
+ *--------------------------------------------------------------------------
4
+ * Модуль: VGLawCookie
5
+ * Автор: Vegas DEV
6
+ * Лицензия: смотри LICENSE
7
+ *--------------------------------------------------------------------------
8
+ **/
9
+ .vg-lawcookie {
10
+ --vg-lawcookie-background-color: #fff ;
11
+ --vg-lawcookie-color: #000000 ;
12
+ --vg-lawcookie-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
13
+ --vg-lawcookie-padding: 1rem ;
14
+ --vg-lawcookie-border: 1px solid rgba(0, 0, 0, 0.2) ;
15
+ --vg-lawcookie-border-radius: 0.375rem ;
16
+ --vg-lawcookie-z-index: 2000 ;
17
+ --vg-lawcookie-transition: all 0.5s ease-in-out ;
18
+ --vg-lawcookie-max-width: 50% ;
19
+ --vg-lawcookie-padding-outer: 1rem ;
20
+ --vg-lawcookie-font-size: 14px ;
21
+ --vg-lawcookie-title-font-size: 16px ;
22
+ position: fixed;
23
+ display: none;
24
+ padding: var(--vg-lawcookie-padding-outer);
25
+ z-index: var(--vg-lawcookie-z-index);
26
+ max-width: var(--vg-lawcookie-max-width);
27
+ }
28
+ @media screen and (max-width: 600px) {
29
+ .vg-lawcookie {
30
+ width: 100%;
31
+ --vg-lawcookie-max-width: 100%;
32
+ }
33
+ }
34
+ .vg-lawcookie.show {
35
+ display: block;
36
+ }
37
+ .vg-lawcookie.left {
38
+ left: 0;
39
+ }
40
+ .vg-lawcookie.right {
41
+ right: 0;
42
+ }
43
+ .vg-lawcookie.top {
44
+ top: 0;
45
+ }
46
+ .vg-lawcookie.bottom {
47
+ bottom: 0;
48
+ }
49
+ .vg-lawcookie.center {
50
+ top: 50%;
51
+ left: 50%;
52
+ }
53
+ .vg-lawcookie.center.left {
54
+ left: 0;
55
+ }
56
+ .vg-lawcookie.center.top {
57
+ top: 0;
58
+ left: 50%;
59
+ }
60
+ .vg-lawcookie.center.bottom {
61
+ top: auto;
62
+ bottom: 0;
63
+ }
64
+ .vg-lawcookie.center.right {
65
+ right: 0;
66
+ left: auto;
67
+ }
68
+ .vg-lawcookie.fullwidth {
69
+ max-width: 100%;
70
+ width: 100%;
71
+ --vg-lawcookie-padding-outer: 0;
72
+ --vg-lawcookie-border-radius: 0;
73
+ --vg-lawcookie-box-shadow: none;
74
+ }
75
+ .vg-lawcookie--content {
76
+ background-color: var(--vg-lawcookie-background-color);
77
+ border-radius: var(--vg-lawcookie-border-radius);
78
+ padding: var(--vg-lawcookie-padding);
79
+ color: var(--vg-lawcookie-color);
80
+ box-shadow: var(--vg-lawcookie-box-shadow);
81
+ font-size: var(--vg-lawcookie-font-size);
82
+ }
83
+ .vg-lawcookie--content .title {
84
+ font-size: var(--vg-lawcookie-title-font-size);
85
+ }
86
+
87
+ /*# sourceMappingURL=vglawcookie.css.map */