@mantine-vue/lightbox 3.3.0

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 (48) hide show
  1. package/README.md +14 -0
  2. package/cjs/index.cjs +1482 -0
  3. package/cjs/index.cjs.map +1 -0
  4. package/esm/index.mjs +1431 -0
  5. package/esm/index.mjs.map +1 -0
  6. package/lib/Lightbox.d.ts +35 -0
  7. package/lib/Lightbox.props.d.ts +57 -0
  8. package/lib/Lightbox.vue.d.ts +52 -0
  9. package/lib/LightboxCaption/LightboxCaption.d.ts +5 -0
  10. package/lib/LightboxCaption/LightboxCaption.vue.d.ts +3 -0
  11. package/lib/LightboxCaption/index.d.ts +1 -0
  12. package/lib/LightboxCloseButton/LightboxCloseButton.d.ts +9 -0
  13. package/lib/LightboxCloseButton/LightboxCloseButton.vue.d.ts +13 -0
  14. package/lib/LightboxCloseButton/index.d.ts +1 -0
  15. package/lib/LightboxNavigation/LightboxNavigation.d.ts +5 -0
  16. package/lib/LightboxNavigation/LightboxNavigation.vue.d.ts +3 -0
  17. package/lib/LightboxNavigation/index.d.ts +1 -0
  18. package/lib/LightboxProvider/LightboxProvider.d.ts +7 -0
  19. package/lib/LightboxProvider/LightboxProvider.vue.d.ts +8 -0
  20. package/lib/LightboxProvider/index.d.ts +1 -0
  21. package/lib/LightboxRoot/LightboxRoot.d.ts +4 -0
  22. package/lib/LightboxRoot/LightboxRoot.types.d.ts +73 -0
  23. package/lib/LightboxRoot/LightboxRoot.vue.d.ts +35 -0
  24. package/lib/LightboxRoot/index.d.ts +1 -0
  25. package/lib/LightboxSlide/LightboxSlide.d.ts +3 -0
  26. package/lib/LightboxSlide/LightboxSlide.types.d.ts +16 -0
  27. package/lib/LightboxSlide/LightboxSlide.vue.d.ts +11 -0
  28. package/lib/LightboxSlide/index.d.ts +1 -0
  29. package/lib/LightboxSlides/LightboxSlides.d.ts +9 -0
  30. package/lib/LightboxSlides/LightboxSlides.vue.d.ts +13 -0
  31. package/lib/LightboxSlides/index.d.ts +1 -0
  32. package/lib/LightboxThumbnails/LightboxThumbnails.d.ts +5 -0
  33. package/lib/LightboxThumbnails/LightboxThumbnails.vue.d.ts +3 -0
  34. package/lib/LightboxThumbnails/index.d.ts +1 -0
  35. package/lib/LightboxToolbar/LightboxToolbar.d.ts +9 -0
  36. package/lib/LightboxToolbar/LightboxToolbar.vue.d.ts +7 -0
  37. package/lib/LightboxToolbar/index.d.ts +1 -0
  38. package/lib/LightboxToolbar/toolbar-items.d.ts +5 -0
  39. package/lib/default-labels.d.ts +2 -0
  40. package/lib/hooks/use-lightbox-zoom.d.ts +38 -0
  41. package/lib/index.d.mts +13 -0
  42. package/lib/index.d.ts +13 -0
  43. package/lib/lightbox.context.d.ts +21 -0
  44. package/lib/lightbox.store.d.ts +54 -0
  45. package/lib/types.d.ts +75 -0
  46. package/package.json +50 -0
  47. package/styles.css +201 -0
  48. package/styles.layer.css +203 -0
package/styles.layer.css ADDED
@@ -0,0 +1,203 @@
1
+ @layer mantine {
2
+ ._root_13vd4_1 {
3
+ --lightbox-transition-duration: 200ms;
4
+ --lightbox-overlay-color: rgba(0, 0, 0, 0.9);
5
+ --lightbox-z-index: 400;
6
+ --lightbox-toolbar-height: calc(3.5rem * var(--mantine-scale));
7
+ --lightbox-thumbnails-height: calc(6.25rem * var(--mantine-scale));
8
+ display: contents;
9
+ }
10
+ ._overlay_13vd4_9 {
11
+ position: fixed;
12
+ inset: 0;
13
+ z-index: var(--lightbox-z-index);
14
+ background-color: var(--lightbox-overlay-color);
15
+ }
16
+ ._content_13vd4_15 {
17
+ position: fixed;
18
+ inset: 0;
19
+ z-index: var(--lightbox-z-index);
20
+ display: flex;
21
+ flex-direction: column;
22
+ color: var(--mantine-color-white);
23
+ outline: none;
24
+ }
25
+ ._toolbar_13vd4_24 {
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: space-between;
29
+ height: var(--lightbox-toolbar-height);
30
+ padding: 0 var(--mantine-spacing-md);
31
+ flex-shrink: 0;
32
+ z-index: 1;
33
+ }
34
+ ._toolbarGroup_13vd4_33 {
35
+ display: flex;
36
+ align-items: center;
37
+ gap: var(--mantine-spacing-xs);
38
+ }
39
+ ._toolbarButton_13vd4_38 {
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: center;
43
+ width: calc(2.5rem * var(--mantine-scale));
44
+ height: calc(2.5rem * var(--mantine-scale));
45
+ border-radius: var(--mantine-radius-sm);
46
+ color: var(--mantine-color-white);
47
+ opacity: 0.8;
48
+ transition:
49
+ opacity var(--lightbox-transition-duration) ease,
50
+ background-color var(--lightbox-transition-duration) ease;
51
+ }
52
+ ._toolbarButton_13vd4_38:hover {
53
+ opacity: 1;
54
+ background-color: rgba(255, 255, 255, 0.1);
55
+ }
56
+ ._counter_13vd4_55 {
57
+ font-size: var(--mantine-font-size-sm);
58
+ color: var(--mantine-color-white);
59
+ opacity: 0.8;
60
+ user-select: none;
61
+ }
62
+ ._slides_13vd4_61 {
63
+ flex: 1;
64
+ position: relative;
65
+ overflow: hidden;
66
+ min-height: 0;
67
+ }
68
+ ._slidesViewport_13vd4_67 {
69
+ height: 100%;
70
+ overflow: hidden;
71
+ touch-action: pan-y pinch-zoom;
72
+ }
73
+ ._slidesContainer_13vd4_72 {
74
+ display: flex;
75
+ height: 100%;
76
+ }
77
+ ._slide_13vd4_61 {
78
+ position: relative;
79
+ flex: 0 0 100%;
80
+ display: flex;
81
+ align-items: center;
82
+ justify-content: center;
83
+ padding: var(--mantine-spacing-md);
84
+ min-width: 0;
85
+ }
86
+ ._slideImage_13vd4_85 {
87
+ max-width: 100%;
88
+ max-height: 100%;
89
+ object-fit: contain;
90
+ user-select: none;
91
+ -webkit-user-drag: none;
92
+ transition: transform var(--lightbox-transition-duration) ease;
93
+ }
94
+ ._slideImage_13vd4_85[data-zoom-enabled] {
95
+ touch-action: none;
96
+ }
97
+ ._slideImage_13vd4_85[data-zoom-enabled]:not([data-zoomed]) {
98
+ cursor: zoom-in;
99
+ }
100
+ ._slideImage_13vd4_85[data-zoomed] {
101
+ cursor: grab;
102
+ }
103
+ ._slideImage_13vd4_85[data-zoomed]:active {
104
+ cursor: grabbing;
105
+ }
106
+ ._slideImage_13vd4_85[data-dragging] {
107
+ transition: none;
108
+ }
109
+ ._slideVideo_13vd4_108 {
110
+ width: 100%;
111
+ height: 100%;
112
+ max-width: 100%;
113
+ max-height: 100%;
114
+ object-fit: contain;
115
+ }
116
+ ._thumbnails_13vd4_115 {
117
+ display: block;
118
+ padding: 0 var(--mantine-spacing-md);
119
+ flex-shrink: 0;
120
+ overflow: hidden;
121
+ }
122
+ ._thumbnailsViewport_13vd4_121 {
123
+ width: fit-content;
124
+ max-width: 100%;
125
+ margin-inline: auto;
126
+ height: var(--lightbox-thumbnails-height);
127
+ overflow: hidden;
128
+ }
129
+ ._thumbnailsContainer_13vd4_128 {
130
+ display: flex;
131
+ gap: var(--mantine-spacing-xs);
132
+ height: 100%;
133
+ align-items: center;
134
+ }
135
+ ._thumbnail_13vd4_115 {
136
+ flex: 0 0 auto;
137
+ width: calc(4rem * var(--mantine-scale));
138
+ height: calc(4rem * var(--mantine-scale));
139
+ border-radius: var(--mantine-radius-sm);
140
+ overflow: hidden;
141
+ opacity: 0.5;
142
+ border: calc(0.125rem * var(--mantine-scale)) solid transparent;
143
+ cursor: pointer;
144
+ transition:
145
+ opacity var(--lightbox-transition-duration) ease,
146
+ border-color var(--lightbox-transition-duration) ease;
147
+ padding: 0;
148
+ background: none;
149
+ }
150
+ ._thumbnail_13vd4_115:hover {
151
+ opacity: 0.8;
152
+ }
153
+ ._thumbnail_13vd4_115[data-active] {
154
+ opacity: 1;
155
+ border-color: var(--mantine-primary-color-filled);
156
+ }
157
+ ._thumbnailImage_13vd4_156 {
158
+ width: 100%;
159
+ height: 100%;
160
+ object-fit: cover;
161
+ }
162
+ ._navigation_13vd4_161 {
163
+ position: absolute;
164
+ top: 50%;
165
+ display: flex;
166
+ justify-content: space-between;
167
+ width: 100%;
168
+ padding: 0 var(--mantine-spacing-md);
169
+ pointer-events: none;
170
+ transform: translateY(-50%);
171
+ z-index: 1;
172
+ }
173
+ ._navigationButton_13vd4_172 {
174
+ display: flex;
175
+ align-items: center;
176
+ justify-content: center;
177
+ width: calc(3rem * var(--mantine-scale));
178
+ height: calc(3rem * var(--mantine-scale));
179
+ color: var(--mantine-color-white);
180
+ pointer-events: all;
181
+ opacity: 0.7;
182
+ transition: opacity var(--lightbox-transition-duration) ease;
183
+ }
184
+ ._navigationButton_13vd4_172:hover {
185
+ opacity: 1;
186
+ }
187
+ ._navigationButton_13vd4_172[data-inactive] {
188
+ opacity: 0.3;
189
+ pointer-events: none;
190
+ }
191
+ ._caption_13vd4_190 {
192
+ text-align: center;
193
+ padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
194
+ font-size: var(--mantine-font-size-sm);
195
+ color: var(--mantine-color-white);
196
+ opacity: 0.8;
197
+ flex-shrink: 0;
198
+ }
199
+ ._closeButton_13vd4_198 {
200
+ color: var(--mantine-color-white);
201
+ }
202
+ /*$vite$:1*/
203
+ }