vgapp 0.2.1 → 0.2.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 (16) hide show
  1. package/CHANGELOG.md +5 -1
  2. package/app/modules/vgdropdown/js/vgdropdown.js +28 -4
  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.js +27 -5
  15. package/build/vgapp.js.map +1 -1
  16. 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 - 0.2.3 (Апрель, 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';
@@ -29,10 +31,9 @@ class VGDropdown extends BaseModule {
29
31
 
30
32
  let defaultParams = {
31
33
  offset: [0, 2],
32
- over: false,
33
- backdrop: true,
34
- overflow: true,
35
- keyboard: true,
34
+ backdrop: false,
35
+ overflow: false,
36
+ keyboard: false,
36
37
  placement: 'bottom',
37
38
  timeoutAnimation: 350,
38
39
  hover: false,
@@ -100,6 +101,15 @@ class VGDropdown extends BaseModule {
100
101
  this._drop.classList.add(CLASS_NAME_SHOW);
101
102
  this._setPlacement();
102
103
 
104
+ if (this._params.backdrop && !this._params.hover) {
105
+ Backdrop.show();
106
+ }
107
+
108
+ if (this._params.overflow) {
109
+ Overflow.append();
110
+ document.body.classList.add('dropdown-open')
111
+ }
112
+
103
113
  const completeCallBack = () => {
104
114
  this._drop.classList.add(CLASS_NAME_FADE);
105
115
  EventHandler.trigger(this._element, EVENT_KEY_SHOWN, relatedTarget)
@@ -143,6 +153,20 @@ class VGDropdown extends BaseModule {
143
153
  this._element.classList.remove(CLASS_NAME_SHOW);
144
154
  this._element.setAttribute('aria-expanded', 'false');
145
155
 
156
+ if (this._params.backdrop && !this._params.hover) {
157
+ const _this = this;
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 */