@getmicdrop/venue-calendar 4.0.80 → 4.0.81
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.
- package/README.md +173 -128
- package/dist/{CarouselView.legacy-D2EY3K5p.js → CarouselView.legacy-Bn76lnuH.js} +3 -3
- package/dist/{CarouselView.legacy-D2EY3K5p.js.map → CarouselView.legacy-Bn76lnuH.js.map} +1 -1
- package/dist/{CartView-CXsAlVHs.js → CartView-lR1zLxmN.js} +277 -280
- package/dist/CartView-lR1zLxmN.js.map +1 -0
- package/dist/{Checkout-Bj85hSlQ.js → Checkout-D5mXj5zN.js} +69 -73
- package/dist/Checkout-D5mXj5zN.js.map +1 -0
- package/dist/Checkout-KyLZlwLk.js +1673 -0
- package/dist/Checkout-KyLZlwLk.js.map +1 -0
- package/dist/{Checkout.legacy-D4Uh3sQB.js → Checkout.legacy-Dl8Oh7y3.js} +77 -81
- package/dist/{Checkout.legacy-D4Uh3sQB.js.map → Checkout.legacy-Dl8Oh7y3.js.map} +1 -1
- package/dist/CheckoutTimer-Deo1mLnO.js +141 -0
- package/dist/CheckoutTimer-Deo1mLnO.js.map +1 -0
- package/dist/CollectionView-C1O9xfVC.js +338 -0
- package/dist/CollectionView-C1O9xfVC.js.map +1 -0
- package/dist/{CollectionView.legacy-CsBYjvZv.js → CollectionView.legacy-DK_mCA_g.js} +25 -28
- package/dist/{CollectionView.legacy-CsBYjvZv.js.map → CollectionView.legacy-DK_mCA_g.js.map} +1 -1
- package/dist/Event-B5WRygEf.js +2240 -0
- package/dist/Event-B5WRygEf.js.map +1 -0
- package/dist/EventPage-f1AOk4Jb.js +577 -0
- package/dist/EventPage-f1AOk4Jb.js.map +1 -0
- package/dist/{EventPage.legacy-DDVZNT-7.js → EventPage.legacy-Bk3PJyJs.js} +408 -411
- package/dist/{EventPage.legacy-DDVZNT-7.js.map → EventPage.legacy-Bk3PJyJs.js.map} +1 -1
- package/dist/{FeaturedView.legacy-BfOfYXRN.js → FeaturedView.legacy-BzCt1X1W.js} +19 -19
- package/dist/{FeaturedView.legacy-BfOfYXRN.js.map → FeaturedView.legacy-BzCt1X1W.js.map} +1 -1
- package/dist/{GalleryCard-CZkN5_Jb.js → GalleryCard-C1EKGErR.js} +14 -14
- package/dist/{GalleryCard-CZkN5_Jb.js.map → GalleryCard-C1EKGErR.js.map} +1 -1
- package/dist/{GalleryView.legacy-CziaM40i.js → GalleryView.legacy-BmQtZKl7.js} +3 -3
- package/dist/{GalleryView.legacy-CziaM40i.js.map → GalleryView.legacy-BmQtZKl7.js.map} +1 -1
- package/dist/{GroupedListView.legacy-CPy5md80.js → GroupedListView.legacy-D72fbNfA.js} +18 -18
- package/dist/{GroupedListView.legacy-CPy5md80.js.map → GroupedListView.legacy-D72fbNfA.js.map} +1 -1
- package/dist/Heading-Bwevh2c4.js +81 -0
- package/dist/Heading-Bwevh2c4.js.map +1 -0
- package/dist/ModalHeader-DKwE5ZYZ.js +22 -0
- package/dist/ModalHeader-DKwE5ZYZ.js.map +1 -0
- package/dist/OrderSummarySkeleton-DKWKZNLL.js +632 -0
- package/dist/OrderSummarySkeleton-DKWKZNLL.js.map +1 -0
- package/dist/{ScarcityBadge-Bungh7jy.js → ScarcityBadge-3cFxTOCh.js} +24 -28
- package/dist/{ScarcityBadge-Bungh7jy.js.map → ScarcityBadge-3cFxTOCh.js.map} +1 -1
- package/dist/{SeriesPage-BzyObY3_.js → SeriesPage-Cq4Q8Vah.js} +17 -21
- package/dist/{SeriesPage-BzyObY3_.js.map → SeriesPage-Cq4Q8Vah.js.map} +1 -1
- package/dist/{SeriesPage.legacy-BA00IzDL.js → SeriesPage.legacy-zvgW0S_y.js} +70 -74
- package/dist/{SeriesPage.legacy-BA00IzDL.js.map → SeriesPage.legacy-zvgW0S_y.js.map} +1 -1
- package/dist/{Success-NB1gahZr.js → Success-kyiEO6_Z.js} +186 -175
- package/dist/{Success-NB1gahZr.js.map → Success-kyiEO6_Z.js.map} +1 -1
- package/dist/{Success.legacy-D6cvUMzi.js → Success.legacy-BxKYmXgz.js} +58 -62
- package/dist/{Success.legacy-D6cvUMzi.js.map → Success.legacy-BxKYmXgz.js.map} +1 -1
- package/dist/Text-_bLxSPv-.js +158 -0
- package/dist/Text-_bLxSPv-.js.map +1 -0
- package/dist/{VenueCalendar-CISH7WGT.js → VenueCalendar-d8u6MKEu.js} +8138 -22881
- package/dist/VenueCalendar-d8u6MKEu.js.map +1 -0
- package/dist/ViewTicketsEmbed-DquJJVIK.js +2081 -0
- package/dist/ViewTicketsEmbed-DquJJVIK.js.map +1 -0
- package/dist/__SKIP_NAVIGATION__-CmipjatL.js +18 -0
- package/dist/__SKIP_NAVIGATION__-CmipjatL.js.map +1 -0
- package/dist/api/api.cjs +1 -1
- package/dist/api/api.cjs.map +1 -1
- package/dist/api/api.mjs +482 -374
- package/dist/api/api.mjs.map +1 -1
- package/dist/api/cta.d.ts +2 -10
- package/dist/api/transformers/address.d.ts +18 -0
- package/dist/api/transformers/cart.d.ts +19 -0
- package/dist/api/transformers/collection.d.ts +12 -0
- package/dist/api/transformers/event.d.ts +50 -1
- package/dist/api/transformers/giftCard.d.ts +11 -0
- package/dist/api/transformers/index.d.ts +10 -3
- package/dist/api/transformers/performer.d.ts +8 -0
- package/dist/api/transformers/series.d.ts +12 -0
- package/dist/api/types.d.ts +423 -383
- package/dist/api-BzICORqy.js +6 -0
- package/dist/{api-BV4wcElQ.js.map → api-BzICORqy.js.map} +1 -1
- package/dist/colors-CmP-sSZD.js.map +1 -1
- package/dist/{data-toggle-store.svelte-DU0VWdcf.js → data-toggle-store.svelte-BGbzblUJ.js} +6 -6
- package/dist/{data-toggle-store.svelte-DU0VWdcf.js.map → data-toggle-store.svelte-BGbzblUJ.js.map} +1 -1
- package/dist/index-BsWecoW1.js +63 -0
- package/dist/index-BsWecoW1.js.map +1 -0
- package/dist/labels-Bj_cocb1.js +966 -0
- package/dist/labels-Bj_cocb1.js.map +1 -0
- package/dist/transform-D7Oe8jUp.js +276 -0
- package/dist/transform-D7Oe8jUp.js.map +1 -0
- package/dist/types/index.d.ts +45 -0
- package/dist/venue-calendar.css +1 -1
- package/dist/venue-calendar.es.js +31 -37
- package/dist/venue-calendar.es.js.map +1 -1
- package/dist/venue-calendar.iife.js +40 -107
- package/dist/venue-calendar.iife.js.map +1 -1
- package/dist/venue-calendar.umd.js +38 -125
- package/dist/venue-calendar.umd.js.map +1 -1
- package/package.json +170 -168
- package/dist/CartView-CXsAlVHs.js.map +0 -1
- package/dist/Checkout-BPAkGlf6.js +0 -1531
- package/dist/Checkout-BPAkGlf6.js.map +0 -1
- package/dist/Checkout-Bj85hSlQ.js.map +0 -1
- package/dist/CheckoutTimer-CSc35x4t.js +0 -35
- package/dist/CheckoutTimer-CSc35x4t.js.map +0 -1
- package/dist/CollectionView-BitCEQzn.js +0 -148
- package/dist/CollectionView-BitCEQzn.js.map +0 -1
- package/dist/Event-BAKC5X6r.js +0 -1910
- package/dist/Event-BAKC5X6r.js.map +0 -1
- package/dist/EventPage-DxiAuBVc.js +0 -336
- package/dist/EventPage-DxiAuBVc.js.map +0 -1
- package/dist/Heading-AFd3o0xt.js +0 -44
- package/dist/Heading-AFd3o0xt.js.map +0 -1
- package/dist/OrderSummarySkeleton-dDKUH741.js +0 -16
- package/dist/OrderSummarySkeleton-dDKUH741.js.map +0 -1
- package/dist/Text-CXR2fhx6.js +0 -54
- package/dist/Text-CXR2fhx6.js.map +0 -1
- package/dist/VenueCalendar-CISH7WGT.js.map +0 -1
- package/dist/ViewTicketsEmbed-Bo16Y0sx.js +0 -2039
- package/dist/ViewTicketsEmbed-Bo16Y0sx.js.map +0 -1
- package/dist/__SKIP_NAVIGATION__-CJ96TTPE.js +0 -7
- package/dist/__SKIP_NAVIGATION__-CJ96TTPE.js.map +0 -1
- package/dist/api-BV4wcElQ.js +0 -12
- package/dist/labels-B2ebkcUD.js +0 -659
- package/dist/labels-B2ebkcUD.js.map +0 -1
- package/dist/transform-B3tJXUnG.js +0 -275
- package/dist/transform-B3tJXUnG.js.map +0 -1
package/README.md
CHANGED
|
@@ -22,7 +22,10 @@ Add one `<script>` tag pointing at the Micdrop-hosted bundle. The package is
|
|
|
22
22
|
private (not on npm/jsDelivr) — it is delivered from `get-micdrop.com`:
|
|
23
23
|
|
|
24
24
|
```html
|
|
25
|
-
<script
|
|
25
|
+
<script
|
|
26
|
+
defer
|
|
27
|
+
src="https://get-micdrop.com/embed/venue-calendar.iife.js"
|
|
28
|
+
></script>
|
|
26
29
|
```
|
|
27
30
|
|
|
28
31
|
- **No stylesheet to link.** The bundle injects its own CSS at runtime, so a
|
|
@@ -49,27 +52,32 @@ Simply add a div with the class `micdrop-calendar-container` and the calendar wi
|
|
|
49
52
|
```html
|
|
50
53
|
<!DOCTYPE html>
|
|
51
54
|
<html>
|
|
52
|
-
<head>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
+
<head>
|
|
56
|
+
<title>My Comedy Club</title>
|
|
57
|
+
<!-- Preload the bundle while the page parses. defer keeps the
|
|
55
58
|
<script> non-blocking; preload starts the fetch earlier. -->
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
<link
|
|
60
|
+
rel="preload"
|
|
61
|
+
as="script"
|
|
62
|
+
href="https://get-micdrop.com/embed/venue-calendar.iife.js"
|
|
63
|
+
/>
|
|
64
|
+
<script
|
|
65
|
+
defer
|
|
66
|
+
src="https://get-micdrop.com/embed/venue-calendar.iife.js"
|
|
67
|
+
></script>
|
|
68
|
+
</head>
|
|
69
|
+
<body>
|
|
70
|
+
<!-- Calendar auto-mounts here. Use data-organization-id to show all of an
|
|
64
71
|
organization's shows, or data-venue-id for a single venue. -->
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
72
|
+
<div
|
|
73
|
+
class="micdrop-calendar-container"
|
|
74
|
+
data-organization-id="your-organization-id"
|
|
75
|
+
data-view="calendar"
|
|
76
|
+
data-show-view-options="true"
|
|
77
|
+
data-show-month-switcher="true"
|
|
78
|
+
data-locale="en-US"
|
|
79
|
+
></div>
|
|
80
|
+
</body>
|
|
73
81
|
</html>
|
|
74
82
|
```
|
|
75
83
|
|
|
@@ -80,21 +88,24 @@ Use the custom `<micdrop-calendar>` element:
|
|
|
80
88
|
```html
|
|
81
89
|
<!DOCTYPE html>
|
|
82
90
|
<html>
|
|
83
|
-
<head>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
<
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
91
|
+
<head>
|
|
92
|
+
<title>My Comedy Club</title>
|
|
93
|
+
<script
|
|
94
|
+
defer
|
|
95
|
+
src="https://get-micdrop.com/embed/venue-calendar.iife.js"
|
|
96
|
+
></script>
|
|
97
|
+
</head>
|
|
98
|
+
<body>
|
|
99
|
+
<!-- Web Component -->
|
|
100
|
+
<micdrop-calendar
|
|
101
|
+
venue-id="your-venue-id"
|
|
102
|
+
view="calendar"
|
|
103
|
+
show-view-options="true"
|
|
104
|
+
show-month-switcher="true"
|
|
105
|
+
locale="en-US"
|
|
106
|
+
>
|
|
107
|
+
</micdrop-calendar>
|
|
108
|
+
</body>
|
|
98
109
|
</html>
|
|
99
110
|
```
|
|
100
111
|
|
|
@@ -105,26 +116,29 @@ For more control, use the JavaScript API:
|
|
|
105
116
|
```html
|
|
106
117
|
<!DOCTYPE html>
|
|
107
118
|
<html>
|
|
108
|
-
<head>
|
|
109
|
-
|
|
110
|
-
</head>
|
|
111
|
-
<body>
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
119
|
+
<head>
|
|
120
|
+
<title>My Comedy Club</title>
|
|
121
|
+
</head>
|
|
122
|
+
<body>
|
|
123
|
+
<div id="my-calendar"></div>
|
|
124
|
+
|
|
125
|
+
<!-- Load the bundle, then call the global it exposes. -->
|
|
126
|
+
<script
|
|
127
|
+
defer
|
|
128
|
+
src="https://get-micdrop.com/embed/venue-calendar.iife.js"
|
|
129
|
+
></script>
|
|
130
|
+
<script>
|
|
131
|
+
window.addEventListener('load', function () {
|
|
132
|
+
window.VenueCalendar.initVenueCalendar({
|
|
133
|
+
target: '#my-calendar',
|
|
134
|
+
organizationId: 'your-organization-id',
|
|
135
|
+
view: 'calendar',
|
|
136
|
+
showViewOptions: true,
|
|
137
|
+
showMonthSwitcher: true,
|
|
138
|
+
});
|
|
124
139
|
});
|
|
125
|
-
|
|
126
|
-
</
|
|
127
|
-
</body>
|
|
140
|
+
</script>
|
|
141
|
+
</body>
|
|
128
142
|
</html>
|
|
129
143
|
```
|
|
130
144
|
|
|
@@ -155,7 +169,9 @@ function VenueCalendarComponent({ venueId, view = 'calendar' }) {
|
|
|
155
169
|
// Svelte 5 — components mounted via `mount()` are destroyed via
|
|
156
170
|
// the `unmount` helper, not `.$destroy()` (that was Svelte 4).
|
|
157
171
|
if (instanceRef.current) {
|
|
158
|
-
try {
|
|
172
|
+
try {
|
|
173
|
+
unmount(instanceRef.current);
|
|
174
|
+
} catch {}
|
|
159
175
|
instanceRef.current = null;
|
|
160
176
|
}
|
|
161
177
|
};
|
|
@@ -189,40 +205,40 @@ For ad-hoc support diagnostics, the widget exposes its version on
|
|
|
189
205
|
`window`:
|
|
190
206
|
|
|
191
207
|
```js
|
|
192
|
-
window.__MICDROP_CALENDAR__.version
|
|
208
|
+
window.__MICDROP_CALENDAR__.version; // e.g. "3.6.23"
|
|
193
209
|
```
|
|
194
210
|
|
|
195
211
|
**Usage in React App:**
|
|
196
212
|
|
|
197
213
|
```jsx
|
|
198
|
-
import React, { useState } from
|
|
199
|
-
import VenueCalendarComponent from
|
|
214
|
+
import React, { useState } from 'react';
|
|
215
|
+
import VenueCalendarComponent from './VenueCalendarComponent';
|
|
200
216
|
|
|
201
217
|
function App() {
|
|
202
|
-
const [venueId, setVenueId] = useState(
|
|
203
|
-
const [view, setView] = useState(
|
|
218
|
+
const [venueId, setVenueId] = useState('comedy-club-123');
|
|
219
|
+
const [view, setView] = useState('calendar');
|
|
204
220
|
|
|
205
221
|
return (
|
|
206
|
-
<div style={{ padding:
|
|
222
|
+
<div style={{ padding: '20px' }}>
|
|
207
223
|
<h1>Event Viewer</h1>
|
|
208
|
-
|
|
209
|
-
<div style={{ marginBottom:
|
|
224
|
+
|
|
225
|
+
<div style={{ marginBottom: '20px' }}>
|
|
210
226
|
<label>Venue ID:</label>
|
|
211
227
|
<input
|
|
212
228
|
type="text"
|
|
213
229
|
value={venueId}
|
|
214
|
-
onChange={
|
|
230
|
+
onChange={e => setVenueId(e.target.value)}
|
|
215
231
|
/>
|
|
216
232
|
</div>
|
|
217
233
|
|
|
218
|
-
<div style={{ marginBottom:
|
|
234
|
+
<div style={{ marginBottom: '20px' }}>
|
|
219
235
|
<label>Select View:</label>
|
|
220
236
|
<label>
|
|
221
237
|
<input
|
|
222
238
|
type="radio"
|
|
223
239
|
value="list"
|
|
224
|
-
checked={view ===
|
|
225
|
-
onChange={
|
|
240
|
+
checked={view === 'list'}
|
|
241
|
+
onChange={e => setView(e.target.value)}
|
|
226
242
|
/>
|
|
227
243
|
List
|
|
228
244
|
</label>
|
|
@@ -230,8 +246,8 @@ function App() {
|
|
|
230
246
|
<input
|
|
231
247
|
type="radio"
|
|
232
248
|
value="gallery"
|
|
233
|
-
checked={view ===
|
|
234
|
-
onChange={
|
|
249
|
+
checked={view === 'gallery'}
|
|
250
|
+
onChange={e => setView(e.target.value)}
|
|
235
251
|
/>
|
|
236
252
|
Gallery
|
|
237
253
|
</label>
|
|
@@ -239,8 +255,8 @@ function App() {
|
|
|
239
255
|
<input
|
|
240
256
|
type="radio"
|
|
241
257
|
value="calendar"
|
|
242
|
-
checked={view ===
|
|
243
|
-
onChange={
|
|
258
|
+
checked={view === 'calendar'}
|
|
259
|
+
onChange={e => setView(e.target.value)}
|
|
244
260
|
/>
|
|
245
261
|
Calendar
|
|
246
262
|
</label>
|
|
@@ -269,8 +285,8 @@ const props = defineProps({
|
|
|
269
285
|
venueId: String,
|
|
270
286
|
view: {
|
|
271
287
|
type: String,
|
|
272
|
-
default: 'calendar'
|
|
273
|
-
}
|
|
288
|
+
default: 'calendar',
|
|
289
|
+
},
|
|
274
290
|
});
|
|
275
291
|
|
|
276
292
|
const calendarContainer = ref(null);
|
|
@@ -293,19 +309,22 @@ onUnmounted(() => {
|
|
|
293
309
|
}
|
|
294
310
|
});
|
|
295
311
|
|
|
296
|
-
watch(
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
calendarInstance
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
312
|
+
watch(
|
|
313
|
+
() => props.venueId,
|
|
314
|
+
newId => {
|
|
315
|
+
if (calendarInstance) {
|
|
316
|
+
calendarInstance.$destroy();
|
|
317
|
+
calendarInstance = initVenueCalendar({
|
|
318
|
+
target: calendarContainer.value,
|
|
319
|
+
venueId: newId,
|
|
320
|
+
view: props.view,
|
|
321
|
+
events: [],
|
|
322
|
+
showViewOptions: true,
|
|
323
|
+
showMonthSwitcher: true,
|
|
324
|
+
});
|
|
325
|
+
}
|
|
307
326
|
}
|
|
308
|
-
|
|
327
|
+
);
|
|
309
328
|
</script>
|
|
310
329
|
```
|
|
311
330
|
|
|
@@ -332,24 +351,30 @@ watch(() => props.venueId, (newId) => {
|
|
|
332
351
|
|
|
333
352
|
<VenueCalendar
|
|
334
353
|
showViewOptions={[
|
|
335
|
-
{ id: 0, text:
|
|
336
|
-
{ id: 1, text:
|
|
337
|
-
{ id: 2, text:
|
|
354
|
+
{ id: 0, text: 'List view', icon: List },
|
|
355
|
+
{ id: 1, text: 'Gallery view', icon: Grid },
|
|
356
|
+
{ id: 2, text: 'Calendar view', icon: Calendar },
|
|
338
357
|
]}
|
|
339
358
|
showMonthSwitcher={true}
|
|
340
359
|
events={[]}
|
|
341
360
|
{currentMonth}
|
|
342
361
|
{currentYear}
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
on:eventClick={
|
|
362
|
+
{handleNext}
|
|
363
|
+
{handlePrev}
|
|
364
|
+
on:eventClick={e => console.log('Event clicked:', e.detail)}
|
|
346
365
|
/>
|
|
347
366
|
```
|
|
348
367
|
|
|
349
368
|
### Angular
|
|
350
369
|
|
|
351
370
|
```typescript
|
|
352
|
-
import {
|
|
371
|
+
import {
|
|
372
|
+
Component,
|
|
373
|
+
OnInit,
|
|
374
|
+
OnDestroy,
|
|
375
|
+
ElementRef,
|
|
376
|
+
ViewChild,
|
|
377
|
+
} from '@angular/core';
|
|
353
378
|
import { initVenueCalendar } from '@getmicdrop/venue-calendar';
|
|
354
379
|
|
|
355
380
|
@Component({
|
|
@@ -357,7 +382,8 @@ import { initVenueCalendar } from '@getmicdrop/venue-calendar';
|
|
|
357
382
|
template: '<div #calendarContainer></div>',
|
|
358
383
|
})
|
|
359
384
|
export class VenueCalendarComponent implements OnInit, OnDestroy {
|
|
360
|
-
@ViewChild('calendarContainer', { static: true })
|
|
385
|
+
@ViewChild('calendarContainer', { static: true })
|
|
386
|
+
calendarContainer!: ElementRef;
|
|
361
387
|
private calendarInstance: any;
|
|
362
388
|
|
|
363
389
|
ngOnInit() {
|
|
@@ -383,23 +409,23 @@ export class VenueCalendarComponent implements OnInit, OnDestroy {
|
|
|
383
409
|
|
|
384
410
|
### Data Attributes (for auto-mount)
|
|
385
411
|
|
|
386
|
-
| Attribute
|
|
387
|
-
|
|
388
|
-
| `data-venue-id`
|
|
389
|
-
| `data-view`
|
|
390
|
-
| `data-show-view-options`
|
|
391
|
-
| `data-show-month-switcher` | boolean | `true`
|
|
412
|
+
| Attribute | Type | Default | Description |
|
|
413
|
+
| -------------------------- | ------- | ------------ | ---------------------------------------------------- |
|
|
414
|
+
| `data-venue-id` | string | `''` | The venue ID to fetch events for |
|
|
415
|
+
| `data-view` | string | `'calendar'` | Initial view: `'list'`, `'gallery'`, or `'calendar'` |
|
|
416
|
+
| `data-show-view-options` | boolean | `true` | Show view switcher buttons |
|
|
417
|
+
| `data-show-month-switcher` | boolean | `true` | Show month navigation controls |
|
|
392
418
|
|
|
393
419
|
### JavaScript API Options
|
|
394
420
|
|
|
395
421
|
```javascript
|
|
396
422
|
initVenueCalendar({
|
|
397
|
-
target: '.my-calendar',
|
|
398
|
-
venueId: 'venue-123',
|
|
399
|
-
view: 'calendar',
|
|
400
|
-
events: [],
|
|
401
|
-
showViewOptions: true,
|
|
402
|
-
showMonthSwitcher: true,
|
|
423
|
+
target: '.my-calendar', // CSS selector or HTMLElement (required)
|
|
424
|
+
venueId: 'venue-123', // Venue ID (optional)
|
|
425
|
+
view: 'calendar', // 'list', 'gallery', or 'calendar' (default: 'calendar')
|
|
426
|
+
events: [], // Array of event objects (default: [])
|
|
427
|
+
showViewOptions: true, // Show view switcher (default: true)
|
|
428
|
+
showMonthSwitcher: true, // Show month navigation (default: true)
|
|
403
429
|
});
|
|
404
430
|
```
|
|
405
431
|
|
|
@@ -420,12 +446,15 @@ initVenueCalendar({
|
|
|
420
446
|
## Views
|
|
421
447
|
|
|
422
448
|
### Calendar View
|
|
449
|
+
|
|
423
450
|
The default view showing events in a monthly calendar grid. Perfect for venues with regular shows.
|
|
424
451
|
|
|
425
452
|
### List View
|
|
453
|
+
|
|
426
454
|
A vertical list layout showing all upcoming events with details. Great for mobile experiences.
|
|
427
455
|
|
|
428
456
|
### Gallery View
|
|
457
|
+
|
|
429
458
|
A grid layout displaying event posters in a gallery format. Ideal for showcasing event imagery.
|
|
430
459
|
|
|
431
460
|
## WordPress Integration
|
|
@@ -433,10 +462,11 @@ A grid layout displaying event posters in a gallery format. Ideal for showcasing
|
|
|
433
462
|
For WordPress sites, you can add this to your page/post HTML:
|
|
434
463
|
|
|
435
464
|
```html
|
|
436
|
-
<div
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
465
|
+
<div
|
|
466
|
+
class="micdrop-calendar-container"
|
|
467
|
+
data-venue-id="your-venue-id"
|
|
468
|
+
data-view="calendar"
|
|
469
|
+
></div>
|
|
440
470
|
|
|
441
471
|
<script src="https://get-micdrop.com/embed/venue-calendar.iife.js"></script>
|
|
442
472
|
```
|
|
@@ -467,14 +497,14 @@ Override the default theme by setting CSS custom properties:
|
|
|
467
497
|
```css
|
|
468
498
|
/* Custom brand colors */
|
|
469
499
|
.micdrop-calendar-container {
|
|
470
|
-
--Brand-Primary: 270 76% 60%;
|
|
500
|
+
--Brand-Primary: 270 76% 60%; /* Purple */
|
|
471
501
|
--Text-Primary: 0 0% 10%;
|
|
472
502
|
--BG-Primary: 0 0% 100%;
|
|
473
503
|
}
|
|
474
504
|
|
|
475
505
|
/* Dark mode */
|
|
476
506
|
.dark .micdrop-calendar-container,
|
|
477
|
-
[data-theme=
|
|
507
|
+
[data-theme='dark'] .micdrop-calendar-container {
|
|
478
508
|
--Brand-Primary: 270 76% 70%;
|
|
479
509
|
--Text-Primary: 0 0% 95%;
|
|
480
510
|
--BG-Primary: 0 0% 10%;
|
|
@@ -483,24 +513,28 @@ Override the default theme by setting CSS custom properties:
|
|
|
483
513
|
|
|
484
514
|
### Available CSS Variables
|
|
485
515
|
|
|
486
|
-
| Variable
|
|
487
|
-
|
|
488
|
-
| `--Brand-Primary`
|
|
489
|
-
| `--Text-Primary`
|
|
490
|
-
| `--Text-Secondary`
|
|
491
|
-
| `--BG-Primary`
|
|
492
|
-
| `--BG-Secondary`
|
|
493
|
-
| `--Stroke-Primary`
|
|
494
|
-
| `--Status-OnSale`
|
|
495
|
-
| `--Status-SellingFast` | "Selling Fast" badge
|
|
496
|
-
| `--Status-SoldOut`
|
|
497
|
-
| `--Today-BG`
|
|
498
|
-
| `--Focus-Ring`
|
|
516
|
+
| Variable | Description | Default (Light) |
|
|
517
|
+
| ---------------------- | ----------------------- | -------------------- |
|
|
518
|
+
| `--Brand-Primary` | Primary brand color | `217 91% 60%` (Blue) |
|
|
519
|
+
| `--Text-Primary` | Main text color | `0 0% 0%` |
|
|
520
|
+
| `--Text-Secondary` | Secondary text | `0 0% 40%` |
|
|
521
|
+
| `--BG-Primary` | Main background | `0 0% 100%` |
|
|
522
|
+
| `--BG-Secondary` | Secondary background | `0 0% 98%` |
|
|
523
|
+
| `--Stroke-Primary` | Border colors | `0 0% 80%` |
|
|
524
|
+
| `--Status-OnSale` | "On Sale" badge | `217 91% 60%` |
|
|
525
|
+
| `--Status-SellingFast` | "Selling Fast" badge | `38 92% 50%` |
|
|
526
|
+
| `--Status-SoldOut` | "Sold Out" badge | `0 84% 60%` |
|
|
527
|
+
| `--Today-BG` | Today's date background | `217 91% 97%` |
|
|
528
|
+
| `--Focus-Ring` | Keyboard focus ring | `217 91% 60%` |
|
|
499
529
|
|
|
500
530
|
### Using JavaScript Theme Utilities
|
|
501
531
|
|
|
502
532
|
```javascript
|
|
503
|
-
import {
|
|
533
|
+
import {
|
|
534
|
+
applyTheme,
|
|
535
|
+
themes,
|
|
536
|
+
generateThemeCSS,
|
|
537
|
+
} from '@getmicdrop/venue-calendar';
|
|
504
538
|
|
|
505
539
|
// Apply a preset theme
|
|
506
540
|
applyTheme(themes.dark);
|
|
@@ -511,10 +545,10 @@ applyTheme(themes.dark, container);
|
|
|
511
545
|
|
|
512
546
|
// Create a custom theme
|
|
513
547
|
const myTheme = {
|
|
514
|
-
brandPrimary: '270 76% 60%',
|
|
548
|
+
brandPrimary: '270 76% 60%', // Purple
|
|
515
549
|
textPrimary: '0 0% 10%',
|
|
516
550
|
bgPrimary: '0 0% 100%',
|
|
517
|
-
statusOnSale: '142 71% 45%',
|
|
551
|
+
statusOnSale: '142 71% 45%', // Green for on sale
|
|
518
552
|
};
|
|
519
553
|
applyTheme(myTheme);
|
|
520
554
|
|
|
@@ -611,6 +645,14 @@ venue-calendar/
|
|
|
611
645
|
└── README.md
|
|
612
646
|
```
|
|
613
647
|
|
|
648
|
+
### Lockfile policy
|
|
649
|
+
|
|
650
|
+
`package-lock.json` is the single canonical lockfile — CI and the publish
|
|
651
|
+
workflow install with `npm ci`. Do not commit `yarn.lock` or
|
|
652
|
+
`pnpm-lock.yaml` (both gitignored). Local dev machines may use pnpm for the
|
|
653
|
+
svelte-components symlink workflow, but dependency changes must land in
|
|
654
|
+
`package-lock.json` via npm.
|
|
655
|
+
|
|
614
656
|
## API Reference
|
|
615
657
|
|
|
616
658
|
### `initVenueCalendar(options)`
|
|
@@ -618,11 +660,13 @@ venue-calendar/
|
|
|
618
660
|
Initialize a calendar instance.
|
|
619
661
|
|
|
620
662
|
**Parameters:**
|
|
663
|
+
|
|
621
664
|
- `options` (Object): Configuration options
|
|
622
665
|
|
|
623
666
|
**Returns:** Svelte component instance
|
|
624
667
|
|
|
625
668
|
**Example:**
|
|
669
|
+
|
|
626
670
|
```javascript
|
|
627
671
|
const calendar = initVenueCalendar({
|
|
628
672
|
target: '#calendar',
|
|
@@ -636,6 +680,7 @@ const calendar = initVenueCalendar({
|
|
|
636
680
|
Automatically mount calendars to all elements with class `micdrop-calendar-container`.
|
|
637
681
|
|
|
638
682
|
**Example:**
|
|
683
|
+
|
|
639
684
|
```javascript
|
|
640
685
|
import { autoMount } from '@getmicdrop/venue-calendar';
|
|
641
686
|
autoMount();
|
|
@@ -652,7 +697,7 @@ const calendar = initVenueCalendar({
|
|
|
652
697
|
});
|
|
653
698
|
|
|
654
699
|
// Listen to component events (if using Svelte component directly)
|
|
655
|
-
calendar.$on('eventClick',
|
|
700
|
+
calendar.$on('eventClick', event => {
|
|
656
701
|
console.log('Event clicked:', event.detail);
|
|
657
702
|
});
|
|
658
703
|
```
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import "svelte/internal/disclose-version";
|
|
2
2
|
import * as e from "svelte/internal/client";
|
|
3
3
|
import { onMount as _ } from "svelte";
|
|
4
|
-
import { G as k } from "./GalleryCard-
|
|
5
|
-
import {
|
|
4
|
+
import { G as k } from "./GalleryCard-C1EKGErR.js";
|
|
5
|
+
import { aI as C } from "./VenueCalendar-d8u6MKEu.js";
|
|
6
6
|
var S = e.from_html('<button class="carousel-arrow absolute top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full flex items-center justify-center bg-card/90 border border-border shadow-lg cursor-pointer transition-opacity duration-200 hover:bg-card hover: focus-visible:outline-2 focus-visible:outline-brand-primary:outline-brand-primary focus-visible:outline-offset-2 left-2 svelte-1lcnwer" aria-label="Scroll left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-text-secondary"><polyline points="15 18 9 12 15 6"></polyline></svg></button>'), j = e.from_html('<div class="carousel-item svelte-1lcnwer" role="listitem"><!></div>'), B = e.from_html('<button class="carousel-arrow absolute top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full flex items-center justify-center bg-card/90 border border-border shadow-lg cursor-pointer transition-opacity duration-200 hover:bg-card hover: focus-visible:outline-2 focus-visible:outline-brand-primary:outline-brand-primary focus-visible:outline-offset-2 right-2 svelte-1lcnwer" aria-label="Scroll right"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-text-secondary"><polyline points="9 18 15 12 9 6"></polyline></svg></button>'), W = e.from_html('<section class="w-full" aria-label="Events carousel"><h2 class="sr-only svelte-1lcnwer">Upcoming events</h2> <div class="relative"><!> <div class="carousel-scroll flex gap-4 overflow-x-auto p-2 sm:p-3 lg:p-4 svelte-1lcnwer" role="list"></div> <!></div></section>');
|
|
7
7
|
function L(b, i) {
|
|
8
8
|
e.push(i, !0);
|
|
@@ -62,4 +62,4 @@ e.delegate(["click"]);
|
|
|
62
62
|
export {
|
|
63
63
|
L as default
|
|
64
64
|
};
|
|
65
|
-
//# sourceMappingURL=CarouselView.legacy-
|
|
65
|
+
//# sourceMappingURL=CarouselView.legacy-Bn76lnuH.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselView.legacy-
|
|
1
|
+
{"version":3,"file":"CarouselView.legacy-Bn76lnuH.js","sources":["../src/components/Calendar/CarouselView.legacy.svelte"],"sourcesContent":["<!-- native-element-exception: VC is an embeddable widget — native <button>s are intentional here (widget-controlled styling on calendar cells, date selectors, checkout/nav CTAs). -->\r\n<!--\r\n @tokens-px-escape: This is a .legacy.svelte file — frozen pre-redesign\r\n code preserved for rollback comparison. The inline px values here are\r\n not actively maintained code paths. tokens-non-color record documents\r\n legacy/archived files as exempt.\r\n-->\r\n<script>\r\n // @ts-nocheck legacy fallback (legacy=1 path), slated for deletion after VC finalization — not type-maintained\r\n import { onMount } from \"svelte\";\r\n import GalleryCard from \"./GalleryCard.svelte\";\r\n import { filterTodayAndFuture } from \"$lib/utils/browse-status.js\";\r\n\r\n let { events = [], oneventClick } = $props();\r\n\r\n let scrollContainer;\r\n let canScrollLeft = $state(false);\r\n let canScrollRight = $state(false);\r\n let showArrows = $state(false);\r\n\r\n // Filter to today and future, sorted chronologically\r\n let futureEvents = $derived(filterTodayAndFuture(events));\r\n\r\n function updateScrollState() {\r\n if (!scrollContainer) return;\r\n const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;\r\n canScrollLeft = scrollLeft > 1;\r\n canScrollRight = scrollLeft + clientWidth < scrollWidth - 1;\r\n showArrows = scrollWidth > clientWidth + 1;\r\n }\r\n\r\n function scrollByCard(direction) {\r\n if (!scrollContainer) return;\r\n // Get the width of the first card item\r\n const firstCard = scrollContainer.querySelector('.carousel-item');\r\n if (!firstCard) return;\r\n const cardWidth = firstCard.offsetWidth + 16; // card width + gap\r\n scrollContainer.scrollBy({ left: direction * cardWidth, behavior: 'smooth' });\r\n }\r\n\r\n onMount(() => {\r\n updateScrollState();\r\n // Use ResizeObserver to update on container resize\r\n const observer = new ResizeObserver(() => updateScrollState());\r\n if (scrollContainer) {\r\n observer.observe(scrollContainer);\r\n }\r\n return () => observer.disconnect();\r\n });\r\n</script>\r\n\r\n<section class=\"w-full\" aria-label=\"Events carousel\">\r\n <h2 class=\"sr-only\">Upcoming events</h2>\r\n\r\n <div class=\"relative\">\r\n <!-- Left arrow -->\r\n {#if showArrows && canScrollLeft}\r\n <button\r\n class=\"carousel-arrow absolute top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full flex items-center justify-center bg-card/90 border border-border shadow-lg cursor-pointer transition-opacity duration-200 hover:bg-card hover: focus-visible:outline-2 focus-visible:outline-brand-primary:outline-brand-primary focus-visible:outline-offset-2 left-2\"\r\n onclick={() => scrollByCard(-1)}\r\n aria-label=\"Scroll left\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-5 h-5 text-text-secondary\"><polyline points=\"15 18 9 12 15 6\"></polyline></svg>\r\n </button>\r\n {/if}\r\n\r\n <!-- Scroll container -->\r\n <div\r\n class=\"carousel-scroll flex gap-4 overflow-x-auto p-2 sm:p-3 lg:p-4\"\r\n bind:this={scrollContainer}\r\n onscroll={updateScrollState}\r\n role=\"list\"\r\n >\r\n {#each futureEvents as event}\r\n <div class=\"carousel-item\" role=\"listitem\">\r\n <GalleryCard {event} {oneventClick} />\r\n </div>\r\n {/each}\r\n </div>\r\n\r\n <!-- Right arrow -->\r\n {#if showArrows && canScrollRight}\r\n <button\r\n class=\"carousel-arrow absolute top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full flex items-center justify-center bg-card/90 border border-border shadow-lg cursor-pointer transition-opacity duration-200 hover:bg-card hover: focus-visible:outline-2 focus-visible:outline-brand-primary:outline-brand-primary focus-visible:outline-offset-2 right-2\"\r\n onclick={() => scrollByCard(1)}\r\n aria-label=\"Scroll right\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-5 h-5 text-text-secondary\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\r\n </button>\r\n {/if}\r\n </div>\r\n</section>\r\n\r\n<style>\r\n .carousel-scroll {\r\n scroll-snap-type: x mandatory;\r\n -webkit-overflow-scrolling: touch;\r\n scrollbar-width: none;\r\n }\r\n\r\n .carousel-scroll::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .carousel-item {\r\n scroll-snap-align: start;\r\n flex: 0 0 85%;\r\n }\r\n\r\n /* Tablet: 2 visible cards with peek */\r\n @media (width >= 640px) {\r\n .carousel-item {\r\n flex: 0 0 calc(50% - 8px);\r\n }\r\n }\r\n\r\n /* Desktop: 3 visible cards with peek */\r\n @media (width >= 1024px) {\r\n .carousel-item {\r\n flex: 0 0 calc(33.333% - 11px);\r\n }\r\n }\r\n\r\n /* Hide arrows on mobile -- touch scrolling is natural */\r\n @media (width <= 639px) {\r\n .carousel-arrow {\r\n display: none;\r\n }\r\n }\r\n\r\n /* Reduced motion */\r\n @media (prefers-reduced-motion: reduce) {\r\n .carousel-scroll {\r\n scroll-behavior: auto;\r\n }\r\n }\r\n\r\n /* Screen reader only text */\r\n .sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border-width: 0;\r\n }\r\n</style>"],"names":["events","$","$$props","scrollContainer","canScrollLeft","canScrollRight","showArrows","futureEvents","filterTodayAndFuture","updateScrollState","scrollLeft","scrollWidth","clientWidth","scrollByCard","direction","firstCard","cardWidth","onMount","observer","section","root_3","div","button","root","$$render","consequent","div_1","node","$$anchor","event","div_2","root_1","GalleryCard","node_1","$$value","button_1","root_2","consequent_1"],"mappings":";;;;;;iBAOA;;AAME,MAAIA,IAAQC,EAAA,KAAAC,GAAA,UAAA,IAAA,MAAA,EAAA,GAERC,GACAC,IAAgBH,EAAA,MAAO,EAAK,GAC5BI,IAAiBJ,EAAA,MAAO,EAAK,GAC7BK,IAAaL,EAAA,MAAO,EAAK,GAGzBM,IAAYN,EAAA,QAAA,MAAYO,EAAqBR,EAAM,CAAA,CAAA;AAEvD,WAASS,IAAoB;AAC3B,QAAE,CAAGN,EAAiB;AACtB,UAAM,EAAE,YAAAO,GAAY,aAAAC,GAAa,aAAAC,EAAW,IAAKT;UACjDC,GAAgBM,IAAa,CAAC,GAC9BT,EAAA,IAAAI,GAAiBK,IAAaE,IAAcD,IAAc,CAAC,GAC3DV,EAAA,IAAAK,GAAaK,IAAcC,IAAc,CAAC;AAAA,EAC5C;AAEA,WAASC,EAAaC,GAAW;AAC/B,QAAE,CAAGX,EAAiB;AAEtB,UAAMY,IAAYZ,EAAgB,cAAc,gBAAgB;AAChE,QAAE,CAAGY,EAAW;AAChB,UAAMC,IAAYD,EAAU,cAAc;AAC1C,IAAAZ,EAAgB,SAAQ,EAAG,MAAMW,IAAYE,GAAW,UAAU,UAAQ;AAAA,EAC5E;AAEA,EAAAC,QAAc;AACZ,IAAAR,EAAiB;AAEjB,UAAMS,IAAW,IAAI,qBAAqBT,EAAiB,CAAA;AAC3D,WAAIN,KACFe,EAAS,QAAQf,CAAe,GAE5B,MAAOe,EAAS,WAAU;AAAA,EAClC,CAAC;MAGFC,IAAOC,EAAA,GAGLC,sBAHFF,CAAO,GAAA,CAAA,eAGLE,CAAG;;;UAGCC,IAAMC,EAAA;2BAAND,GAAM,MAEUT,EAAY,EAAG,CAAA,eAF/BS,CAAM;AAAA;;AADJ,MAAArB,EAAA,IAAAK,CAAU,WAAIF,CAAa,KAAAoB,EAAAC,CAAA;AAAA;;MAW/BC,IAAGzB,EAAA,QAAA0B,GAAA,CAAA;SAAHD,GAAG,IAAA,MAAAzB,EAAA,IAMKM,CAAY,GAAAN,EAAA,OAAA,CAAA2B,GAAIC,MAAK;QACzBC,IAAGC,EAAA,eAAHD,CAAG;AACD,IAAAE,EAAWC,GAAA;AAAA;qBAAEJ,CAAK;AAAA;;;;gBADpBC,CAAG,eAAHA,CAAG;AAAA,cAPPJ,CAAG,eAAHA,GAAG,CAAAQ,MAES/B,IAAe+B,GAAA,MAAf/B,CAAe;oBAF3BuB,GAAG,CAAA;;;UAeDS,IAAMC,EAAA;2BAAND,GAAM,MAEUtB,EAAa,CAAC,CAAA,eAF9BsB,CAAM;AAAA;;AADJ,MAAAlC,EAAA,IAAAK,CAAU,WAAID,CAAc,KAAAmB,EAAAa,CAAA;AAAA;;UA3BlChB,CAAG,WAHLF,CAAO,GAgBHlB,EAAA,MAAA,UAAAyB,GAGWjB,CAAiB,eAnBhCU,CAAO;AAFA;;"}
|