Skip to content

Commit dbd8fb5

Browse files
aggreaggre
authored
Slotted preview image (#1890)
* impl `preview` slots for Checkout/Result * 3.26.7-beta.3
1 parent 950792d commit dbd8fb5

File tree

7 files changed

+104
-35
lines changed

7 files changed

+104
-35
lines changed

‎example/Checkout.astro‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,21 @@ const payload = toUtf8Bytes('tier-1')
2525
uiMode="embed"
2626
{...props}
2727
>
28+
<span
29+
slot="checkout:preview"
30+
class="h-auto min-h-24 w-24 rounded-lg border border-black/20 bg-black/10 p-1"
31+
>
32+
<img
33+
v-if="previewImageSrc"
34+
class="h-auto w-full rounded-lg object-cover object-center"
35+
src="https://images.unsplash.com/photo-1652489997190-f492cfbbdf7e?q=80&w=1200&h=1200&fit=crop"
36+
/>
37+
</span>
38+
<img
39+
slot="checkout:result:preview"
40+
class="z-10 max-h-60 min-h-full max-w-60 rounded-md object-contain @xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl"
41+
src="https://images.unsplash.com/photo-1688168293343-e1c824a4ace5?q=80&w=1200&h=1200&fit=crop"
42+
/>
2843
<div class="opacity-50" slot="checkout:after:description">
2944
We strictly prohibit any unauthorized reproduction, reprinting, reuse, or
3045
modification of any part or all of the content (images, text, etc.)

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devprotocol/clubs-core",
3-
"version": "3.26.7-beta.2",
3+
"version": "3.26.7-beta.3",
44
"description": "Core library for Clubs",
55
"main": "dist/index.mjs",
66
"exports": {

‎src/ui/components/Checkout/Checkout.astro‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,12 @@ const SlotsCheckoutMainTransactionForm = clubs.slots.filter(
5858
const SlotsCheckoutAfterPrice = clubs.slots.filter(
5959
(slot) => slot.slot === 'checkout:after:price'
6060
)
61+
const SlotsCheckoutPreview = clubs.slots.filter(
62+
(slot) => slot.slot === 'checkout:preview'
63+
)
64+
const SlotsCheckoutResultPreview = clubs.slots.filter(
65+
(slot) => slot.slot === 'checkout:result:preview'
66+
)
6167
const SlotsCheckoutResultBeforePreview = clubs.slots.filter(
6268
(slot) => slot.slot === 'checkout:result:before:preview'
6369
)
@@ -97,6 +103,8 @@ const SlotsCheckoutAfterSignInForm = clubs.slots.filter(
97103
<slot name="checkout:after:transaction-form" slot="after:transaction-form" />
98104
<slot name="checkout:main:transaction-form" slot="main:transaction-form" />
99105
<slot name="checkout:after:price" slot="after:price" />
106+
<slot name="checkout:preview" slot="preview" />
107+
<slot name="checkout:result:preview" slot="result:preview" />
100108
<slot name="checkout:result:before:preview" slot="result:before:preview" />
101109
<slot name="checkout:after:description" slot="after:description" />
102110
<slot name="checkout:after:sign-in-form" slot="after:sign-in-form" />
@@ -137,6 +145,24 @@ const SlotsCheckoutAfterSignInForm = clubs.slots.filter(
137145
/>
138146
))
139147
}
148+
{
149+
SlotsCheckoutPreview.map((Slot) => (
150+
<Slot.component
151+
{...Slot.props}
152+
checkoutOptions={checkoutOptions}
153+
slot="preview"
154+
/>
155+
))
156+
}
157+
{
158+
SlotsCheckoutResultPreview.map((Slot) => (
159+
<Slot.component
160+
{...Slot.props}
161+
checkoutOptions={checkoutOptions}
162+
slot="result:preview"
163+
/>
164+
))
165+
}
140166
{
141167
SlotsCheckoutResultBeforePreview.map((Slot) => (
142168
<Slot.component

‎src/ui/components/Checkout/Checkout.vue‎

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -438,6 +438,10 @@ const signIn = () =>
438438
connection.value?.().signal.next(ClubsConnectionSignal.SignInRequest)
439439
440440
onMounted(async () => {
441+
// setTimeout(() => {
442+
// stakeSuccessful.value = true
443+
// }, 2000)
444+
441445
const { connection: _connection } = await import('../../../connection')
442446
connection.value = _connection
443447
@@ -587,29 +591,36 @@ onUnmounted(() => {
587591
<div
588592
class="grid grid-cols-[auto_auto_1fr] items-center justify-between gap-4"
589593
>
590-
<span
591-
v-if="!previewImageSrc && previewVideoSrc"
592-
class="w-36 rounded-lg border border-black/20 bg-black/10 p-1"
593-
>
594-
<VideoFetch
595-
:url="previewVideoSrc"
596-
:videoClass="`w-full rounded aspect-square`"
597-
/>
598-
</span>
594+
<span class="contents">
595+
<!-- This uses CSS instead of Vue's slot fallback content because Astro always inserts an empty element into the slot. -->
596+
<span class="peer contents">
597+
<slot name="preview" />
598+
</span>
599+
<span class="contents peer-has-[:not(:empty)]:hidden">
600+
<span
601+
v-if="!previewImageSrc && previewVideoSrc"
602+
class="w-36 rounded-lg border border-black/20 bg-black/10 p-1"
603+
>
604+
<VideoFetch
605+
:url="previewVideoSrc"
606+
:videoClass="`w-full rounded aspect-square`"
607+
/>
608+
</span>
599609

600-
<span
601-
v-if="!previewVideoSrc"
602-
class="h-auto min-h-24 w-24 rounded-lg border border-black/20 bg-black/10 p-1"
603-
>
604-
<img
605-
v-if="previewImageSrc"
606-
ref="imageRef"
607-
class="h-auto w-full rounded-lg object-cover object-center"
608-
/>
609-
<Skeleton
610-
v-if="previewImageSrc === undefined"
611-
class="mx-auto aspect-square h-full w-full"
612-
/>
610+
<span
611+
v-if="!previewVideoSrc"
612+
class="h-auto min-h-24 w-24 rounded-lg border border-black/20 bg-black/10 p-1"
613+
>
614+
<img
615+
v-if="previewImageSrc"
616+
ref="imageRef"
617+
class="h-auto w-full rounded-lg object-cover object-center"
618+
/>
619+
<Skeleton
620+
v-if="previewImageSrc === undefined"
621+
class="mx-auto aspect-square h-full w-full"
622+
/> </span
623+
></span>
613624
</span>
614625
<h3 class="text-balance break-all font-bold">{{ previewName }}</h3>
615626
<span class="justify-self-end">
@@ -905,6 +916,9 @@ onUnmounted(() => {
905916
:video-src="previewVideoSrc"
906917
:base="props.base"
907918
>
919+
<template #preview>
920+
<slot name="result:preview" />
921+
</template>
908922
<template #before:preview>
909923
<slot name="result:before:preview" />
910924
</template>

‎src/ui/components/Checkout/ModalCheckout.vue‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -184,18 +184,26 @@ onMounted(async () => {
184184
>
185185
</h3>
186186
<!-- image -->
187-
<img
188-
v-if="imageSrc"
189-
ref="imageRef"
190-
class="z-10 max-h-60 min-h-full max-w-60 rounded-md object-contain @xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl"
191-
/>
192-
<!-- video -->
193-
<VideoFetch
194-
v-if="!imageSrc && videoSrc"
195-
class="aspect-[1/1] max-w-60 rounded-md"
196-
video-class="rounded-md [&>video]:rounded-md"
197-
:url="videoSrc"
198-
/>
187+
<span class="contents">
188+
<!-- This uses CSS instead of Vue's slot fallback content because Astro always inserts an empty element into the slot. -->
189+
<span class="peer contents">
190+
<slot name="preview" />
191+
</span>
192+
<span class="contents peer-has-[:not(:empty)]:hidden">
193+
<img
194+
v-if="imageSrc"
195+
ref="imageRef"
196+
class="z-10 max-h-60 min-h-full max-w-60 rounded-md object-contain @xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl"
197+
/>
198+
<!-- video -->
199+
<VideoFetch
200+
v-if="!imageSrc && videoSrc"
201+
class="aspect-[1/1] max-w-60 rounded-md"
202+
video-class="rounded-md [&>video]:rounded-md"
203+
:url="videoSrc"
204+
/>
205+
</span>
206+
</span>
199207
<span class="text-base italic text-white">
200208
{{ i18n('PurchaseGreeting') }}
201209
</span>

‎src/ui/components/Checkout/Result.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@ onMounted(async () => {
5555
base,
5656
}"
5757
>
58+
<template #preview>
59+
<slot name="preview" />
60+
</template>
5861
<template #after:description>
5962
<slot name="before:preview" />
6063
</template>

‎src/ui/components/Modal.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@ html:has(dialog[open]) {
5656
:is="modalContent"
5757
v-bind="attrs"
5858
>
59+
<template #preview>
60+
<slot name="preview" />
61+
</template>
5962
<template #after:description>
6063
<slot name="after:description" />
6164
</template>

0 commit comments

Comments
 (0)