@bagelink/vue 0.0.378 → 0.0.384

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 (23) hide show
  1. package/dist/components/BglVideo.vue.d.ts +6 -6
  2. package/dist/components/BglVideo.vue.d.ts.map +1 -1
  3. package/dist/components/Modal.vue.d.ts +2 -0
  4. package/dist/components/Modal.vue.d.ts.map +1 -1
  5. package/dist/components/ModalForm.vue.d.ts +6 -0
  6. package/dist/components/ModalForm.vue.d.ts.map +1 -1
  7. package/dist/components/form/inputs/FileUpload.vue.d.ts +9 -2
  8. package/dist/components/form/inputs/FileUpload.vue.d.ts.map +1 -1
  9. package/dist/components/form/inputs/RichText.vue.d.ts.map +1 -1
  10. package/dist/index.cjs +425 -67
  11. package/dist/index.mjs +425 -67
  12. package/dist/plugins/modal.d.ts +2 -0
  13. package/dist/plugins/modal.d.ts.map +1 -1
  14. package/dist/style.css +127 -123
  15. package/package.json +3 -1
  16. package/src/components/BglVideo.vue +27 -21
  17. package/src/components/Modal.vue +67 -46
  18. package/src/components/ModalForm.vue +39 -18
  19. package/src/components/form/inputs/FileUpload.vue +17 -6
  20. package/src/components/form/inputs/FileUploadURL.vue +296 -0
  21. package/src/components/form/inputs/RichText.vue +48 -8
  22. package/src/plugins/modal.ts +2 -0
  23. package/src/styles/modal.css +74 -74
package/src/styles/modal.css CHANGED
@@ -1,119 +1,119 @@
1
1
  .bg-dark {
2
- position: fixed;
3
- top: 0;
4
- right: 0;
5
- left: 0;
6
- bottom: 0;
7
- background-color: rgba(0, 0, 0, 0.7);
8
- z-index: 999;
9
- pointer-events: none;
10
- opacity: 0;
11
- transition: all ease-in-out 0.3s;
12
- max-height: 100vh;
13
- overflow: auto;
14
- margin: 0 auto;
15
- width: 100%;
16
- text-align: center;
17
- display: grid;
18
- align-items: center;
2
+ position: fixed;
3
+ top: 0;
4
+ right: 0;
5
+ left: 0;
6
+ bottom: 0;
7
+ background-color: rgba(0, 0, 0, 0.7);
8
+ z-index: 999;
9
+ pointer-events: none;
10
+ opacity: 0;
11
+ transition: all ease-in-out 0.3s;
12
+ max-height: 100vh;
13
+ overflow: auto;
14
+ margin: 0 auto;
15
+ width: 100%;
16
+ text-align: center;
17
+ display: grid;
18
+ align-items: center;
19
19
  }
20
20
 
21
21
  .bg-lignt {
22
- background-color: var(--bgl-white);
22
+ background-color: var(--bgl-white);
23
23
  }
24
24
 
25
25
  .modal {
26
- width: 96%;
27
- max-width: 680px;
28
- transform: scale(0.5);
29
- opacity: 0;
30
- transition: all ease-in-out 0.15s;
31
- margin-left: auto;
32
- margin-right: auto;
33
- height: fit-content;
26
+ width: 96%;
27
+ max-width: 720px;
28
+ transform: scale(0.5);
29
+ opacity: 0;
30
+ transition: all ease-in-out 0.15s;
31
+ margin-left: auto;
32
+ margin-right: auto;
33
+ height: fit-content;
34
34
  }
35
35
 
36
36
  .small-modal .modal {
37
- max-width: 300px;
38
- text-align: center;
37
+ max-width: 300px;
38
+ text-align: center;
39
39
  }
40
40
 
41
41
  .tool-bar {
42
- margin: -2rem -1rem 1rem;
43
- display: flex;
44
- justify-content: space-between;
45
- position: -webkit-sticky;
46
- position: sticky;
47
- padding-top: 1rem;
48
- top: 0rem;
49
- z-index: 3;
50
- background: var(--bgl-white);
42
+ margin: -2rem -1rem 1rem;
43
+ display: flex;
44
+ justify-content: space-between;
45
+ position: -webkit-sticky;
46
+ position: sticky;
47
+ padding-top: 1rem;
48
+ top: 0rem;
49
+ z-index: 3;
50
+ background: var(--bgl-white);
51
51
  }
52
52
 
53
53
  .modal-size {
54
- cursor: pointer;
54
+ cursor: pointer;
55
55
  }
56
56
 
57
57
  .is-side .modal {
58
- inset-inline-end: -600px;
59
- transform: scale(1);
60
- opacity: 1;
61
- /* position: fixed; */
62
- /* top: 20px; */
63
- /* bottom: 20px; */
64
- max-width: 600px;
65
- width: 90%;
66
- margin-top: 20px;
67
- margin-bottom: 20px;
68
- margin-inline-start: auto;
69
- margin-inline-end: 20px;
70
- min-height: calc(100vh - 40px);
71
- transform: translateX(100%);
58
+ inset-inline-end: -600px;
59
+ transform: scale(1);
60
+ opacity: 1;
61
+ /* position: fixed; */
62
+ /* top: 20px; */
63
+ /* bottom: 20px; */
64
+ max-width: 600px;
65
+ width: 90%;
66
+ margin-top: 20px;
67
+ margin-bottom: 20px;
68
+ margin-inline-start: auto;
69
+ margin-inline-end: 20px;
70
+ min-height: calc(100vh - 40px);
71
+ transform: translateX(100%);
72
72
  }
73
73
 
74
74
  .is-active .modal {
75
- transform: scale(1);
76
- opacity: 1;
77
- box-shadow: 6px 6px 20px 20px #0000001c;
75
+ transform: scale(1);
76
+ opacity: 1;
77
+ box-shadow: 6px 6px 20px 20px #0000001c;
78
78
  }
79
79
 
80
80
  .bg-lignt .modal {
81
- transform: scale(1);
82
- border: 1px solid var(--border-color);
81
+ transform: scale(1);
82
+ border: 1px solid var(--border-color);
83
83
  }
84
84
 
85
85
  .bg-lignt.is-active .modal {
86
- box-shadow: none;
86
+ box-shadow: none;
87
87
  }
88
88
 
89
89
  .is-active.is-side .modal {
90
- inset-inline-end: 20px;
91
- transform: translateX(0%);
90
+ inset-inline-end: 20px;
91
+ transform: translateX(0%);
92
92
  }
93
93
 
94
94
  .bg-dark.is-active {
95
- opacity: 1;
96
- pointer-events: all;
95
+ opacity: 1;
96
+ pointer-events: all;
97
97
  }
98
98
 
99
99
  .is-side.bg-dark.is-active {
100
- opacity: 1;
101
- align-items: stretch;
100
+ opacity: 1;
101
+ align-items: stretch;
102
102
  }
103
103
 
104
104
  .is-side.is-active .modal {
105
- pointer-events: all;
105
+ pointer-events: all;
106
106
  }
107
107
 
108
108
  @media screen and (max-width: 910px) {
109
- .tool-bar {
110
- margin: -1rem 0rem 1rem;
111
- padding-bottom: 1rem;
112
- align-items: center;
113
- }
109
+ .tool-bar {
110
+ margin: -1rem 0rem 1rem;
111
+ padding-bottom: 1rem;
112
+ align-items: center;
113
+ }
114
114
 
115
- .is-active.is-side .modal {
116
- margin-inline-end: 5%;
117
- margin-inline-start: 5%;
118
- }
115
+ .is-active.is-side .modal {
116
+ margin-inline-end: 5%;
117
+ margin-inline-start: 5%;
118
+ }
119
119
  }