Skip to content

Commit 2949915

Browse files
joetannenbaumjoetannenbaum
committed
using new grid helpers
1 parent 03c934f commit 2949915

File tree

2 files changed

+46
-39
lines changed

2 files changed

+46
-39
lines changed

‎playgrounds/vue3/resources/js/Pages/Async.vue

+30-24
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<script lang="ts">
22
import Layout from '../Components/Layout.vue'
3+
import TestGrid from '../Components/TestGrid.vue'
4+
import TestGridItem from '../Components/TestGridItem.vue'
35
export default { layout: Layout }
46
</script>
57

68
<script setup lang="ts">
79
import { Head, router, useForm } from '@inertiajs/vue3'
810
import { ref, watch } from 'vue'
911
10-
let timer = null
1112
const reloadCount = ref(0)
1213
1314
const props = defineProps<{
@@ -108,49 +109,54 @@ watch(reloadCount, () => {
108109
<Head title="Async Request" />
109110
<h1 class="text-3xl">Async Request</h1>
110111
<p class="mt-6">Reload Count: {{ reloadCount }}</p>
111-
<div class="grid grid-cols-3 gap-4 mt-6">
112-
<div class="p-4 space-y-4 text-sm text-gray-500 border border-gray-300 rounded">
112+
<TestGrid>
113+
<TestGridItem class="space-y-4">
113114
<p>Trigger an async reload that takes a moment and immediately programatically visit another page</p>
114-
<button @click="simulateConflict" class="px-4 py-2 text-white bg-green-600 rounded">Reload → Visit</button>
115-
</div>
116-
<div class="p-4 space-y-4 text-sm text-gray-500 border border-gray-300 rounded">
117-
<div class="flex flex-col">
118-
<label>
115+
<button @click="simulateConflict" class="rounded bg-green-600 px-4 py-2 text-white">Reload → Visit</button>
116+
</TestGridItem>
117+
118+
<TestGridItem class="space-y-4">
119+
<div>
120+
<label class="block">
119121
<input v-model="form.jonathan" type="checkbox" class="mr-2" />
120122
Jonathan
121123
</label>
122-
<label>
124+
<label class="block">
123125
<input v-model="form.taylor" type="checkbox" class="mr-2" />
124126
Taylor
125127
</label>
126-
<label>
128+
<label class="block">
127129
<input v-model="form.joe" type="checkbox" class="mr-2" />
128130
Joe
129131
</label>
130132
</div>
131133
<p>You can check these on and off and then navigate to another page and the requests should still complete.</p>
132134
<p>Toggling "Joe" on will cause a redirect to "Article", simulating an authorized action e.g.</p>
133-
</div>
134-
<div class="p-4 space-y-4 text-sm text-gray-500 border border-gray-300 rounded">
135+
</TestGridItem>
136+
137+
<TestGridItem class="space-y-4">
135138
<p>Trigger programatic visit and an async reload one after another</p>
136139

137140
<p>Reload should still happen but won't re-direct back to the reloaded component, we should respect the visit</p>
138141

139-
<button @click="triggerVisitThenReload" class="px-4 py-2 text-white bg-green-600 rounded">Visit → Reload</button>
140-
</div>
141-
<div class="p-4 space-y-4 text-sm text-gray-500 border border-gray-300 rounded">
142+
<button @click="triggerVisitThenReload" class="rounded bg-green-600 px-4 py-2 text-white">Visit → Reload</button>
143+
</TestGridItem>
144+
145+
<TestGridItem class="space-y-4">
142146
<p>Simply trigger a 4 second reload so you can navigate or do whatever you'd like during it.</p>
143-
<button @click="triggerLongReload" class="px-4 py-2 text-white bg-green-600 rounded">Trigger Long Reload</button>
144-
</div>
145-
<div class="p-4 space-y-4 text-sm text-gray-500 border border-gray-300 rounded">
147+
<button @click="triggerLongReload" class="rounded bg-green-600 px-4 py-2 text-white">Trigger Long Reload</button>
148+
</TestGridItem>
149+
150+
<TestGridItem class="space-y-4">
146151
<p>Trigger an automatic cancellation from the token.</p>
147-
<button @click="triggerCancel" class="px-4 py-2 text-white bg-green-600 rounded">Trigger Cancel</button>
148-
</div>
149-
<div class="p-4 space-y-4 text-sm text-gray-500 border border-gray-300 rounded">
152+
<button @click="triggerCancel" class="rounded bg-green-600 px-4 py-2 text-white">Trigger Cancel</button>
153+
</TestGridItem>
154+
155+
<TestGridItem class="space-y-4">
150156
<p>Trigger an automatic cancellation from the token after finishing request.</p>
151-
<button @click="triggerCancelAfterFinish" class="px-4 py-2 text-white bg-green-600 rounded">
157+
<button @click="triggerCancelAfterFinish" class="rounded bg-green-600 px-4 py-2 text-white">
152158
Trigger Cancel After Finish
153159
</button>
154-
</div>
155-
</div>
160+
</TestGridItem>
161+
</TestGrid>
156162
</template>

‎playgrounds/vue3/resources/js/Pages/Defer.vue

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script lang="ts">
22
import Deferred from '../../../../../packages/vue3/src/Deferred.vue'
33
import Layout from '../Components/Layout.vue'
4+
import TestGrid from '../Components/TestGrid.vue'
5+
import TestGridItem from '../Components/TestGridItem.vue'
46
export default { layout: Layout }
57
</script>
68

@@ -28,12 +30,11 @@ defineProps<{
2830
<template>
2931
<Head title="Async Request" />
3032
<h1 class="text-3xl">Deferred Props</h1>
31-
<div class="p-4 mt-6 bg-yellow-200 border border-yellow-500 rounded">
33+
<div class="mt-6 rounded border border-yellow-500 bg-yellow-200 p-4">
3234
<p>Page is loaded!</p>
3335
</div>
34-
35-
<div class="flex mt-6 space-x-6">
36-
<div class="w-1/2 p-4 border border-black rounded">
36+
<TestGrid>
37+
<TestGridItem>
3738
<Deferred :data="users">
3839
<template #loading>
3940
<p>Loading Users...</p>
@@ -43,30 +44,30 @@ defineProps<{
4344
<p>#{{ user.id }}: {{ user.name }} ({{ user.email }})</p>
4445
</div>
4546
</Deferred>
46-
</div>
47+
</TestGridItem>
4748

48-
<div class="w-1/2 p-4 border border-black rounded">
49+
<TestGridItem>
4950
<Deferred :data="foods">
5051
<template #loading>
51-
<p>Loading Foods...</p>
52+
<p>Loading Foods...</p>
5253
</template>
5354

5455
<div v-for="food in foods">
55-
<p>#{{ food.id }}: {{ food.name }}</p>
56+
<p>#{{ food.id }}: {{ food.name }}</p>
5657
</div>
5758
</Deferred>
58-
</div>
59+
</TestGridItem>
5960

60-
<div class="w-1/2 p-4 border border-black rounded">
61+
<TestGridItem>
6162
<Deferred :data="organizations">
6263
<template #loading>
63-
<p>Loading Organizations...</p>
64+
<p>Loading Organizations...</p>
6465
</template>
6566

66-
<div v-for="org in organizations">
67-
<p>#{{ org.id }}: {{ org.name }} ({{ org.url }})</p>
67+
<div v-for="org in organizations">
68+
<p>#{{ org.id }}: {{ org.name }} ({{ org.url }})</p>
6869
</div>
6970
</Deferred>
70-
</div>
71-
</div>
71+
</TestGridItem>
72+
</TestGrid>
7273
</template>

0 commit comments

Comments
 (0)