@veristone/nuxt-v-app 0.1.1 → 0.2.1
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/app/components/V/A/Crud/Create.vue +149 -0
- package/app/components/V/A/Crud/Delete.vue +147 -0
- package/app/components/V/A/Crud/Update.vue +171 -0
- package/app/components/V/A/Modal/Base.vue +64 -167
- package/app/components/V/A/Modal/Form.vue +47 -21
- package/app/components/V/A/Slide.vue +17 -19
- package/app/components/V/Modal.vue +51 -18
- package/app/composables/useVToast.ts +10 -10
- package/app/layouts/default.vue +80 -70
- package/app/pages/playground/crud.vue +936 -0
- package/app/pages/playground/index.vue +6 -0
- package/app/pages/playground/modals.vue +794 -557
- package/app/pages/test-api-auth.vue +140 -93
- package/package.json +1 -1
|
@@ -1,606 +1,843 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
definePageMeta({
|
|
3
|
-
title:
|
|
4
|
-
})
|
|
3
|
+
title: "Modal Components",
|
|
4
|
+
});
|
|
5
5
|
|
|
6
6
|
// Modal states
|
|
7
|
-
const showInfoModal = ref(false)
|
|
8
|
-
const showWarningModal = ref(false)
|
|
9
|
-
const showDangerModal = ref(false)
|
|
10
|
-
const showFormModal = ref(false)
|
|
11
|
-
const isLoading = ref(false)
|
|
7
|
+
const showInfoModal = ref(false);
|
|
8
|
+
const showWarningModal = ref(false);
|
|
9
|
+
const showDangerModal = ref(false);
|
|
10
|
+
const showFormModal = ref(false);
|
|
11
|
+
const isLoading = ref(false);
|
|
12
12
|
|
|
13
13
|
// Custom modal states
|
|
14
|
-
const showSmModal = ref(false)
|
|
15
|
-
const showMdModal = ref(false)
|
|
16
|
-
const showLgModal = ref(false)
|
|
17
|
-
const showXlModal = ref(false)
|
|
18
|
-
const showFullModal = ref(false)
|
|
14
|
+
const showSmModal = ref(false);
|
|
15
|
+
const showMdModal = ref(false);
|
|
16
|
+
const showLgModal = ref(false);
|
|
17
|
+
const showXlModal = ref(false);
|
|
18
|
+
const showFullModal = ref(false);
|
|
19
19
|
|
|
20
20
|
// Custom slideover states
|
|
21
|
-
const showSmSlide = ref(false)
|
|
22
|
-
const showMdSlide = ref(false)
|
|
23
|
-
const showLgSlide = ref(false)
|
|
24
|
-
const showLeftSlide = ref(false)
|
|
21
|
+
const showSmSlide = ref(false);
|
|
22
|
+
const showMdSlide = ref(false);
|
|
23
|
+
const showLgSlide = ref(false);
|
|
24
|
+
const showLeftSlide = ref(false);
|
|
25
25
|
|
|
26
26
|
// VModal state
|
|
27
|
-
const showVModal = ref(false)
|
|
27
|
+
const showVModal = ref(false);
|
|
28
28
|
|
|
29
29
|
const handleConfirm = () => {
|
|
30
|
-
isLoading.value = true
|
|
30
|
+
isLoading.value = true;
|
|
31
31
|
setTimeout(() => {
|
|
32
|
-
isLoading.value = false
|
|
33
|
-
showInfoModal.value = false
|
|
34
|
-
showWarningModal.value = false
|
|
35
|
-
showDangerModal.value = false
|
|
36
|
-
}, 1500)
|
|
37
|
-
}
|
|
32
|
+
isLoading.value = false;
|
|
33
|
+
showInfoModal.value = false;
|
|
34
|
+
showWarningModal.value = false;
|
|
35
|
+
showDangerModal.value = false;
|
|
36
|
+
}, 1500);
|
|
37
|
+
};
|
|
38
38
|
|
|
39
39
|
const handleFormSubmit = (data: any) => {
|
|
40
|
-
console.log(
|
|
41
|
-
}
|
|
40
|
+
console.log("Form submitted:", data);
|
|
41
|
+
};
|
|
42
42
|
</script>
|
|
43
43
|
|
|
44
44
|
<template>
|
|
45
45
|
<UDashboardPanel grow>
|
|
46
46
|
<UContainer>
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
47
|
+
<div class="py-8">
|
|
48
|
+
<h1 class="text-3xl font-bold mb-4">Modal Components Showcase</h1>
|
|
49
|
+
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
|
50
|
+
Modal dialogs and slideover panels for confirmations, forms, and
|
|
51
|
+
detailed views.
|
|
52
|
+
</p>
|
|
53
|
+
|
|
54
|
+
<!-- VAModalConfirm Section -->
|
|
55
|
+
<h2 class="text-2xl font-semibold mb-4 mt-8">VAModalConfirm</h2>
|
|
56
|
+
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
|
57
|
+
Confirmation modals with different variants.
|
|
58
|
+
</p>
|
|
59
|
+
<div class="mb-8">
|
|
60
|
+
<UCard>
|
|
61
|
+
<div class="flex flex-wrap gap-4">
|
|
62
|
+
<UButton
|
|
63
|
+
label="Info Confirm"
|
|
64
|
+
color="info"
|
|
65
|
+
@click="showInfoModal = true"
|
|
66
|
+
/>
|
|
67
|
+
<UButton
|
|
68
|
+
label="Warning Confirm"
|
|
69
|
+
color="warning"
|
|
70
|
+
@click="showWarningModal = true"
|
|
71
|
+
/>
|
|
72
|
+
<UButton
|
|
73
|
+
label="Danger Confirm"
|
|
74
|
+
color="error"
|
|
75
|
+
@click="showDangerModal = true"
|
|
76
|
+
/>
|
|
77
|
+
</div>
|
|
78
|
+
</UCard>
|
|
79
|
+
|
|
80
|
+
<ClientOnly>
|
|
81
|
+
<VAModalConfirm
|
|
82
|
+
v-model="showInfoModal"
|
|
83
|
+
title="Confirm Action"
|
|
84
|
+
message="Are you sure you want to proceed with this action? This will apply the changes immediately."
|
|
85
|
+
variant="info"
|
|
86
|
+
confirm-text="Proceed"
|
|
87
|
+
:loading="isLoading"
|
|
88
|
+
@confirm="handleConfirm"
|
|
89
|
+
/>
|
|
90
|
+
</ClientOnly>
|
|
91
|
+
|
|
92
|
+
<ClientOnly>
|
|
93
|
+
<VAModalConfirm
|
|
94
|
+
v-model="showWarningModal"
|
|
95
|
+
title="Warning"
|
|
96
|
+
message="This action may have unintended consequences. Please review before proceeding."
|
|
97
|
+
variant="warning"
|
|
98
|
+
confirm-text="Continue Anyway"
|
|
99
|
+
:loading="isLoading"
|
|
100
|
+
@confirm="handleConfirm"
|
|
101
|
+
/>
|
|
102
|
+
</ClientOnly>
|
|
103
|
+
|
|
104
|
+
<ClientOnly>
|
|
105
|
+
<VAModalConfirm
|
|
106
|
+
v-model="showDangerModal"
|
|
107
|
+
title="Delete Item"
|
|
108
|
+
message="Are you sure you want to delete this item? This action cannot be undone."
|
|
109
|
+
variant="danger"
|
|
110
|
+
confirm-text="Delete"
|
|
111
|
+
:loading="isLoading"
|
|
112
|
+
@confirm="handleConfirm"
|
|
113
|
+
/>
|
|
114
|
+
</ClientOnly>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<!-- VAModalForm Section -->
|
|
118
|
+
<h2 class="text-2xl font-semibold mb-4 mt-8">VAModalForm</h2>
|
|
119
|
+
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
|
120
|
+
Form modal for creating and editing records.
|
|
121
|
+
</p>
|
|
122
|
+
<div class="mb-8">
|
|
123
|
+
<UCard>
|
|
124
|
+
<div class="flex flex-wrap gap-4">
|
|
125
|
+
<UButton
|
|
126
|
+
label="Open Form Modal"
|
|
127
|
+
color="primary"
|
|
128
|
+
@click="showFormModal = true"
|
|
129
|
+
/>
|
|
130
|
+
</div>
|
|
131
|
+
</UCard>
|
|
132
|
+
|
|
133
|
+
<ClientOnly>
|
|
134
|
+
<VAModalForm
|
|
135
|
+
v-model="showFormModal"
|
|
136
|
+
title="Create New User"
|
|
137
|
+
@submit="handleFormSubmit"
|
|
138
|
+
>
|
|
139
|
+
<template #default="{ submit }">
|
|
140
|
+
<form @submit.prevent="submit" class="space-y-4">
|
|
141
|
+
<UFormField label="Full Name" required>
|
|
142
|
+
<UInput placeholder="Enter full name" />
|
|
143
|
+
</UFormField>
|
|
144
|
+
<UFormField label="Email Address" required>
|
|
145
|
+
<UInput type="email" placeholder="Enter email" />
|
|
146
|
+
</UFormField>
|
|
147
|
+
<UFormField label="Role">
|
|
148
|
+
<USelect
|
|
149
|
+
placeholder="Select role"
|
|
150
|
+
:items="[
|
|
151
|
+
{ label: 'Admin', value: 'admin' },
|
|
152
|
+
{ label: 'Editor', value: 'editor' },
|
|
153
|
+
{ label: 'Viewer', value: 'viewer' },
|
|
154
|
+
]"
|
|
155
|
+
/>
|
|
156
|
+
</UFormField>
|
|
157
|
+
<UFormField label="Notes">
|
|
158
|
+
<UTextarea placeholder="Any additional notes..." />
|
|
159
|
+
</UFormField>
|
|
160
|
+
<div class="flex justify-end gap-3 pt-4">
|
|
161
|
+
<UButton
|
|
162
|
+
label="Cancel"
|
|
163
|
+
color="neutral"
|
|
164
|
+
variant="ghost"
|
|
165
|
+
@click="showFormModal = false"
|
|
166
|
+
/>
|
|
167
|
+
<UButton
|
|
168
|
+
type="submit"
|
|
169
|
+
label="Create User"
|
|
170
|
+
color="primary"
|
|
171
|
+
/>
|
|
172
|
+
</div>
|
|
173
|
+
</form>
|
|
174
|
+
</template>
|
|
175
|
+
</VAModalForm>
|
|
176
|
+
</ClientOnly>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<!-- VModal Section -->
|
|
180
|
+
<h2 class="text-2xl font-semibold mb-4 mt-8">VModal</h2>
|
|
181
|
+
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
|
182
|
+
Simple modal wrapper using UModal component.
|
|
183
|
+
</p>
|
|
184
|
+
<div class="mb-8">
|
|
185
|
+
<UCard>
|
|
186
|
+
<template #header>
|
|
187
|
+
<h3 class="font-semibold">Basic Modal</h3>
|
|
188
|
+
</template>
|
|
189
|
+
<div class="flex flex-wrap gap-4">
|
|
190
|
+
<UButton
|
|
191
|
+
label="Open Modal"
|
|
192
|
+
color="primary"
|
|
193
|
+
@click="showVModal = true"
|
|
194
|
+
/>
|
|
195
|
+
</div>
|
|
196
|
+
</UCard>
|
|
197
|
+
|
|
198
|
+
<ClientOnly>
|
|
199
|
+
<VModal v-model="showVModal" title="Simple Modal">
|
|
200
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
201
|
+
This is a simple modal using the VModal component.
|
|
202
|
+
</p>
|
|
203
|
+
<p class="mt-2 text-gray-600 dark:text-gray-400">
|
|
204
|
+
It's a lightweight wrapper around UModal for basic modal
|
|
205
|
+
functionality.
|
|
206
|
+
</p>
|
|
207
|
+
<template #footer>
|
|
208
|
+
<div class="flex justify-end gap-3">
|
|
209
|
+
<UButton
|
|
210
|
+
label="Close"
|
|
211
|
+
color="neutral"
|
|
212
|
+
variant="ghost"
|
|
213
|
+
@click="showVModal = false"
|
|
214
|
+
/>
|
|
215
|
+
</div>
|
|
216
|
+
</template>
|
|
217
|
+
</VModal>
|
|
218
|
+
</ClientOnly>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<!-- VAModalBase Section (Custom) -->
|
|
222
|
+
<h2 class="text-2xl font-semibold mb-4 mt-8">VAModalBase (Custom)</h2>
|
|
223
|
+
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
|
224
|
+
Custom modal component (not using UModal) with size variants and full
|
|
225
|
+
accessibility.
|
|
226
|
+
</p>
|
|
227
|
+
<div class="mb-8">
|
|
228
|
+
<UCard>
|
|
229
|
+
<template #header>
|
|
230
|
+
<h3 class="font-semibold">Size Variants</h3>
|
|
231
|
+
</template>
|
|
232
|
+
<div class="flex flex-wrap gap-4">
|
|
233
|
+
<UButton label="Small" @click="showSmModal = true" />
|
|
234
|
+
<UButton label="Medium" @click="showMdModal = true" />
|
|
235
|
+
<UButton label="Large" @click="showLgModal = true" />
|
|
236
|
+
<UButton label="Extra Large" @click="showXlModal = true" />
|
|
237
|
+
<UButton label="Full" @click="showFullModal = true" />
|
|
238
|
+
</div>
|
|
239
|
+
</UCard>
|
|
240
|
+
|
|
241
|
+
<ClientOnly>
|
|
242
|
+
<VAModalBase v-model="showSmModal" title="Small Modal" size="sm">
|
|
243
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
244
|
+
This is a small modal (max-w-sm).
|
|
245
|
+
</p>
|
|
246
|
+
<p class="mt-2 text-gray-600 dark:text-gray-400">
|
|
247
|
+
Perfect for quick confirmations or simple messages.
|
|
248
|
+
</p>
|
|
249
|
+
<template #footer>
|
|
250
|
+
<div class="flex justify-end gap-3">
|
|
251
|
+
<UButton
|
|
252
|
+
label="Cancel"
|
|
253
|
+
color="neutral"
|
|
254
|
+
variant="ghost"
|
|
255
|
+
@click="showSmModal = false"
|
|
256
|
+
/>
|
|
257
|
+
<UButton
|
|
258
|
+
label="Confirm"
|
|
259
|
+
color="primary"
|
|
260
|
+
@click="showSmModal = false"
|
|
261
|
+
/>
|
|
262
|
+
</div>
|
|
263
|
+
</template>
|
|
264
|
+
</VAModalBase>
|
|
265
|
+
</ClientOnly>
|
|
266
|
+
|
|
267
|
+
<ClientOnly>
|
|
268
|
+
<VAModalBase v-model="showMdModal" title="Medium Modal" size="md">
|
|
269
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
270
|
+
This is a medium modal (max-w-md). The default size.
|
|
271
|
+
</p>
|
|
272
|
+
<div class="mt-4 space-y-4">
|
|
273
|
+
<UFormField label="Name">
|
|
274
|
+
<UInput placeholder="Enter your name" />
|
|
122
275
|
</UFormField>
|
|
123
|
-
<UFormField label="Email
|
|
124
|
-
<UInput type="email" placeholder="Enter email" />
|
|
276
|
+
<UFormField label="Email">
|
|
277
|
+
<UInput type="email" placeholder="Enter your email" />
|
|
125
278
|
</UFormField>
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
279
|
+
</div>
|
|
280
|
+
<template #footer>
|
|
281
|
+
<div class="flex justify-end gap-3">
|
|
282
|
+
<UButton
|
|
283
|
+
label="Cancel"
|
|
284
|
+
color="neutral"
|
|
285
|
+
variant="ghost"
|
|
286
|
+
@click="showMdModal = false"
|
|
287
|
+
/>
|
|
288
|
+
<UButton
|
|
289
|
+
label="Save"
|
|
290
|
+
color="primary"
|
|
291
|
+
@click="showMdModal = false"
|
|
134
292
|
/>
|
|
293
|
+
</div>
|
|
294
|
+
</template>
|
|
295
|
+
</VAModalBase>
|
|
296
|
+
</ClientOnly>
|
|
297
|
+
|
|
298
|
+
<ClientOnly>
|
|
299
|
+
<VAModalBase v-model="showLgModal" title="Large Modal" size="lg">
|
|
300
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
301
|
+
This is a large modal (max-w-lg).
|
|
302
|
+
</p>
|
|
303
|
+
<p class="mt-2 text-gray-600 dark:text-gray-400">
|
|
304
|
+
Good for forms with more fields or content that needs more
|
|
305
|
+
space.
|
|
306
|
+
</p>
|
|
307
|
+
<div class="mt-4 grid grid-cols-2 gap-4">
|
|
308
|
+
<UFormField label="First Name">
|
|
309
|
+
<UInput placeholder="First name" />
|
|
135
310
|
</UFormField>
|
|
136
|
-
<UFormField label="
|
|
137
|
-
<
|
|
311
|
+
<UFormField label="Last Name">
|
|
312
|
+
<UInput placeholder="Last name" />
|
|
313
|
+
</UFormField>
|
|
314
|
+
<UFormField label="Email">
|
|
315
|
+
<UInput type="email" placeholder="Email" />
|
|
316
|
+
</UFormField>
|
|
317
|
+
<UFormField label="Phone">
|
|
318
|
+
<UInput type="tel" placeholder="Phone" />
|
|
138
319
|
</UFormField>
|
|
139
|
-
<div class="flex justify-end gap-3 pt-4">
|
|
140
|
-
<UButton label="Cancel" color="gray" variant="ghost" @click="showFormModal = false" />
|
|
141
|
-
<UButton type="submit" label="Create User" color="primary" />
|
|
142
|
-
</div>
|
|
143
|
-
</form>
|
|
144
|
-
</template>
|
|
145
|
-
</VAModalForm>
|
|
146
|
-
</ClientOnly>
|
|
147
|
-
</div>
|
|
148
|
-
|
|
149
|
-
<!-- VModal Section -->
|
|
150
|
-
<h2 class="text-2xl font-semibold mb-4 mt-8">VModal</h2>
|
|
151
|
-
<p class="text-gray-600 dark:text-gray-400 mb-4">Simple modal wrapper using UModal component.</p>
|
|
152
|
-
<div class="mb-8">
|
|
153
|
-
<UCard>
|
|
154
|
-
<template #header>
|
|
155
|
-
<h3 class="font-semibold">Basic Modal</h3>
|
|
156
|
-
</template>
|
|
157
|
-
<div class="flex flex-wrap gap-4">
|
|
158
|
-
<UButton label="Open Modal" color="primary" @click="showVModal = true" />
|
|
159
|
-
</div>
|
|
160
|
-
</UCard>
|
|
161
|
-
|
|
162
|
-
<ClientOnly>
|
|
163
|
-
<VModal v-model="showVModal" title="Simple Modal">
|
|
164
|
-
<p class="text-gray-600 dark:text-gray-400">This is a simple modal using the VModal component.</p>
|
|
165
|
-
<p class="mt-2 text-gray-600 dark:text-gray-400">It's a lightweight wrapper around UModal for basic modal functionality.</p>
|
|
166
|
-
<template #footer>
|
|
167
|
-
<div class="flex justify-end gap-3">
|
|
168
|
-
<UButton label="Close" color="gray" variant="ghost" @click="showVModal = false" />
|
|
169
|
-
</div>
|
|
170
|
-
</template>
|
|
171
|
-
</VModal>
|
|
172
|
-
</ClientOnly>
|
|
173
|
-
</div>
|
|
174
|
-
|
|
175
|
-
<!-- VAModalBase Section (Custom) -->
|
|
176
|
-
<h2 class="text-2xl font-semibold mb-4 mt-8">VAModalBase (Custom)</h2>
|
|
177
|
-
<p class="text-gray-600 dark:text-gray-400 mb-4">Custom modal component (not using UModal) with size variants and full accessibility.</p>
|
|
178
|
-
<div class="mb-8">
|
|
179
|
-
<UCard>
|
|
180
|
-
<template #header>
|
|
181
|
-
<h3 class="font-semibold">Size Variants</h3>
|
|
182
|
-
</template>
|
|
183
|
-
<div class="flex flex-wrap gap-4">
|
|
184
|
-
<UButton label="Small" @click="showSmModal = true" />
|
|
185
|
-
<UButton label="Medium" @click="showMdModal = true" />
|
|
186
|
-
<UButton label="Large" @click="showLgModal = true" />
|
|
187
|
-
<UButton label="Extra Large" @click="showXlModal = true" />
|
|
188
|
-
<UButton label="Full" @click="showFullModal = true" />
|
|
189
|
-
</div>
|
|
190
|
-
</UCard>
|
|
191
|
-
|
|
192
|
-
<ClientOnly>
|
|
193
|
-
<VAModalBase v-model="showSmModal" title="Small Modal" size="sm">
|
|
194
|
-
<p class="text-gray-600 dark:text-gray-400">This is a small modal (max-w-sm).</p>
|
|
195
|
-
<p class="mt-2 text-gray-600 dark:text-gray-400">Perfect for quick confirmations or simple messages.</p>
|
|
196
|
-
<template #footer>
|
|
197
|
-
<div class="flex justify-end gap-3">
|
|
198
|
-
<UButton label="Cancel" color="gray" variant="ghost" @click="showSmModal = false" />
|
|
199
|
-
<UButton label="Confirm" color="primary" @click="showSmModal = false" />
|
|
200
320
|
</div>
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
321
|
+
<template #footer>
|
|
322
|
+
<div class="flex justify-end gap-3">
|
|
323
|
+
<UButton
|
|
324
|
+
label="Cancel"
|
|
325
|
+
color="neutral"
|
|
326
|
+
variant="ghost"
|
|
327
|
+
@click="showLgModal = false"
|
|
328
|
+
/>
|
|
329
|
+
<UButton
|
|
330
|
+
label="Save"
|
|
331
|
+
color="primary"
|
|
332
|
+
@click="showLgModal = false"
|
|
333
|
+
/>
|
|
334
|
+
</div>
|
|
335
|
+
</template>
|
|
336
|
+
</VAModalBase>
|
|
337
|
+
</ClientOnly>
|
|
338
|
+
|
|
339
|
+
<ClientOnly>
|
|
340
|
+
<VAModalBase
|
|
341
|
+
v-model="showXlModal"
|
|
342
|
+
title="Extra Large Modal"
|
|
343
|
+
size="xl"
|
|
344
|
+
>
|
|
345
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
346
|
+
This is an extra large modal (max-w-2xl).
|
|
347
|
+
</p>
|
|
348
|
+
<p class="mt-2 text-gray-600 dark:text-gray-400">
|
|
349
|
+
Ideal for complex forms, data displays, or content requiring
|
|
350
|
+
significant horizontal space.
|
|
351
|
+
</p>
|
|
352
|
+
<div class="mt-4 grid grid-cols-3 gap-4">
|
|
353
|
+
<UFormField label="Field 1"
|
|
354
|
+
><UInput placeholder="Value"
|
|
355
|
+
/></UFormField>
|
|
356
|
+
<UFormField label="Field 2"
|
|
357
|
+
><UInput placeholder="Value"
|
|
358
|
+
/></UFormField>
|
|
359
|
+
<UFormField label="Field 3"
|
|
360
|
+
><UInput placeholder="Value"
|
|
361
|
+
/></UFormField>
|
|
362
|
+
<UFormField label="Field 4"
|
|
363
|
+
><UInput placeholder="Value"
|
|
364
|
+
/></UFormField>
|
|
365
|
+
<UFormField label="Field 5"
|
|
366
|
+
><UInput placeholder="Value"
|
|
367
|
+
/></UFormField>
|
|
368
|
+
<UFormField label="Field 6"
|
|
369
|
+
><UInput placeholder="Value"
|
|
370
|
+
/></UFormField>
|
|
220
371
|
</div>
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
</
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
372
|
+
<template #footer>
|
|
373
|
+
<div class="flex justify-end gap-3">
|
|
374
|
+
<UButton
|
|
375
|
+
label="Cancel"
|
|
376
|
+
color="neutral"
|
|
377
|
+
variant="ghost"
|
|
378
|
+
@click="showXlModal = false"
|
|
379
|
+
/>
|
|
380
|
+
<UButton
|
|
381
|
+
label="Save"
|
|
382
|
+
color="primary"
|
|
383
|
+
@click="showXlModal = false"
|
|
384
|
+
/>
|
|
385
|
+
</div>
|
|
386
|
+
</template>
|
|
387
|
+
</VAModalBase>
|
|
388
|
+
</ClientOnly>
|
|
389
|
+
|
|
390
|
+
<ClientOnly>
|
|
391
|
+
<VAModalBase
|
|
392
|
+
v-model="showFullModal"
|
|
393
|
+
title="Full Screen Modal"
|
|
394
|
+
size="full"
|
|
395
|
+
>
|
|
396
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
397
|
+
This is a full-width modal that takes up most of the viewport.
|
|
398
|
+
</p>
|
|
399
|
+
<p class="mt-2 text-gray-600 dark:text-gray-400">
|
|
400
|
+
Use for complex workflows, data tables, or when maximum screen
|
|
401
|
+
real estate is needed.
|
|
402
|
+
</p>
|
|
403
|
+
<div class="mt-6 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
|
|
404
|
+
<p class="text-sm text-gray-500">
|
|
405
|
+
Content area - this modal scales to fill the available space.
|
|
406
|
+
</p>
|
|
247
407
|
</div>
|
|
408
|
+
<template #footer>
|
|
409
|
+
<div class="flex justify-end gap-3">
|
|
410
|
+
<UButton
|
|
411
|
+
label="Close"
|
|
412
|
+
color="neutral"
|
|
413
|
+
variant="ghost"
|
|
414
|
+
@click="showFullModal = false"
|
|
415
|
+
/>
|
|
416
|
+
</div>
|
|
417
|
+
</template>
|
|
418
|
+
</VAModalBase>
|
|
419
|
+
</ClientOnly>
|
|
420
|
+
</div>
|
|
421
|
+
|
|
422
|
+
<!-- VASlideover Section (Custom) -->
|
|
423
|
+
<h2 class="text-2xl font-semibold mb-4 mt-8">VASlideover (Custom)</h2>
|
|
424
|
+
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
|
425
|
+
Custom slideover component (not using USlideover) with custom
|
|
426
|
+
transitions.
|
|
427
|
+
</p>
|
|
428
|
+
<div class="mb-8">
|
|
429
|
+
<UCard>
|
|
430
|
+
<template #header>
|
|
431
|
+
<h3 class="font-semibold">Size Variants & Positioning</h3>
|
|
248
432
|
</template>
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
<UFormField label="Field 3"><UInput placeholder="Value" /></UFormField>
|
|
260
|
-
<UFormField label="Field 4"><UInput placeholder="Value" /></UFormField>
|
|
261
|
-
<UFormField label="Field 5"><UInput placeholder="Value" /></UFormField>
|
|
262
|
-
<UFormField label="Field 6"><UInput placeholder="Value" /></UFormField>
|
|
433
|
+
<div class="flex flex-wrap gap-4">
|
|
434
|
+
<UButton label="Small Right" @click="showSmSlide = true" />
|
|
435
|
+
<UButton label="Medium Right" @click="showMdSlide = true" />
|
|
436
|
+
<UButton label="Large Right" @click="showLgSlide = true" />
|
|
437
|
+
<UButton
|
|
438
|
+
label="Medium Left"
|
|
439
|
+
color="neutral"
|
|
440
|
+
variant="outline"
|
|
441
|
+
@click="showLeftSlide = true"
|
|
442
|
+
/>
|
|
263
443
|
</div>
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
444
|
+
</UCard>
|
|
445
|
+
|
|
446
|
+
<ClientOnly>
|
|
447
|
+
<VASlideover
|
|
448
|
+
v-model="showSmSlide"
|
|
449
|
+
title="Small Slideover"
|
|
450
|
+
size="sm"
|
|
451
|
+
>
|
|
452
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
453
|
+
This is a small slideover (w-80).
|
|
454
|
+
</p>
|
|
455
|
+
<p class="mt-2 text-gray-600 dark:text-gray-400">
|
|
456
|
+
Good for quick settings or filters.
|
|
457
|
+
</p>
|
|
458
|
+
</VASlideover>
|
|
459
|
+
</ClientOnly>
|
|
460
|
+
|
|
461
|
+
<ClientOnly>
|
|
462
|
+
<VASlideover
|
|
463
|
+
v-model="showMdSlide"
|
|
464
|
+
title="Medium Slideover"
|
|
465
|
+
size="md"
|
|
466
|
+
>
|
|
467
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
468
|
+
This is a medium slideover (w-96).
|
|
469
|
+
</p>
|
|
470
|
+
<div class="mt-4 space-y-4">
|
|
471
|
+
<UFormField label="Name">
|
|
472
|
+
<UInput placeholder="Enter name" />
|
|
473
|
+
</UFormField>
|
|
474
|
+
<UFormField label="Description">
|
|
475
|
+
<UTextarea placeholder="Enter description" />
|
|
476
|
+
</UFormField>
|
|
268
477
|
</div>
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
478
|
+
<template #footer>
|
|
479
|
+
<div class="flex justify-end gap-3">
|
|
480
|
+
<UButton
|
|
481
|
+
label="Cancel"
|
|
482
|
+
color="neutral"
|
|
483
|
+
variant="ghost"
|
|
484
|
+
@click="showMdSlide = false"
|
|
485
|
+
/>
|
|
486
|
+
<UButton
|
|
487
|
+
label="Save"
|
|
488
|
+
color="primary"
|
|
489
|
+
@click="showMdSlide = false"
|
|
490
|
+
/>
|
|
491
|
+
</div>
|
|
492
|
+
</template>
|
|
493
|
+
</VASlideover>
|
|
494
|
+
</ClientOnly>
|
|
495
|
+
|
|
496
|
+
<ClientOnly>
|
|
497
|
+
<VASlideover
|
|
498
|
+
v-model="showLgSlide"
|
|
499
|
+
title="Large Slideover"
|
|
500
|
+
size="lg"
|
|
501
|
+
>
|
|
502
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
503
|
+
This is a large slideover (w-[32rem]).
|
|
504
|
+
</p>
|
|
505
|
+
<p class="mt-2 text-gray-600 dark:text-gray-400">
|
|
506
|
+
Ideal for detailed forms or data views.
|
|
507
|
+
</p>
|
|
508
|
+
<div class="mt-4 grid grid-cols-2 gap-4">
|
|
509
|
+
<UFormField label="First Name">
|
|
510
|
+
<UInput placeholder="First name" />
|
|
511
|
+
</UFormField>
|
|
512
|
+
<UFormField label="Last Name">
|
|
513
|
+
<UInput placeholder="Last name" />
|
|
514
|
+
</UFormField>
|
|
515
|
+
<UFormField label="Email">
|
|
516
|
+
<UInput type="email" placeholder="Email" />
|
|
517
|
+
</UFormField>
|
|
518
|
+
<UFormField label="Phone">
|
|
519
|
+
<UInput type="tel" placeholder="Phone" />
|
|
520
|
+
</UFormField>
|
|
283
521
|
</div>
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
522
|
+
<template #footer>
|
|
523
|
+
<div class="flex justify-end gap-3">
|
|
524
|
+
<UButton
|
|
525
|
+
label="Cancel"
|
|
526
|
+
color="neutral"
|
|
527
|
+
variant="ghost"
|
|
528
|
+
@click="showLgSlide = false"
|
|
529
|
+
/>
|
|
530
|
+
<UButton
|
|
531
|
+
label="Save"
|
|
532
|
+
color="primary"
|
|
533
|
+
@click="showLgSlide = false"
|
|
534
|
+
/>
|
|
535
|
+
</div>
|
|
536
|
+
</template>
|
|
537
|
+
</VASlideover>
|
|
538
|
+
</ClientOnly>
|
|
539
|
+
|
|
540
|
+
<ClientOnly>
|
|
541
|
+
<VASlideover
|
|
542
|
+
v-model="showLeftSlide"
|
|
543
|
+
title="Left Slideover"
|
|
544
|
+
size="md"
|
|
545
|
+
side="left"
|
|
546
|
+
>
|
|
547
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
548
|
+
This slideover opens from the left side.
|
|
549
|
+
</p>
|
|
550
|
+
<p class="mt-2 text-gray-600 dark:text-gray-400">
|
|
551
|
+
Useful for navigation panels or secondary menus.
|
|
552
|
+
</p>
|
|
553
|
+
<div class="mt-4 space-y-2">
|
|
554
|
+
<UButton
|
|
555
|
+
label="Dashboard"
|
|
556
|
+
color="neutral"
|
|
557
|
+
variant="ghost"
|
|
558
|
+
block
|
|
559
|
+
class="justify-start"
|
|
560
|
+
icon="i-lucide-home"
|
|
561
|
+
/>
|
|
562
|
+
<UButton
|
|
563
|
+
label="Analytics"
|
|
564
|
+
color="neutral"
|
|
565
|
+
variant="ghost"
|
|
566
|
+
block
|
|
567
|
+
class="justify-start"
|
|
568
|
+
icon="i-lucide-bar-chart-3"
|
|
569
|
+
/>
|
|
570
|
+
<UButton
|
|
571
|
+
label="Settings"
|
|
572
|
+
color="neutral"
|
|
573
|
+
variant="ghost"
|
|
574
|
+
block
|
|
575
|
+
class="justify-start"
|
|
576
|
+
icon="i-lucide-settings"
|
|
577
|
+
/>
|
|
327
578
|
</div>
|
|
579
|
+
</VASlideover>
|
|
580
|
+
</ClientOnly>
|
|
581
|
+
</div>
|
|
582
|
+
|
|
583
|
+
<!-- VASlide Section -->
|
|
584
|
+
<h2 class="text-2xl font-semibold mb-4 mt-8">VASlide</h2>
|
|
585
|
+
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
|
586
|
+
Slideover panels for detailed views and forms.
|
|
587
|
+
</p>
|
|
588
|
+
<div class="mb-8">
|
|
589
|
+
<UCard>
|
|
590
|
+
<template #header>
|
|
591
|
+
<h3 class="font-semibold">Right Side Slidevers (Default)</h3>
|
|
328
592
|
</template>
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
<
|
|
347
|
-
<
|
|
348
|
-
|
|
593
|
+
<div class="flex flex-wrap gap-4">
|
|
594
|
+
<ClientOnly>
|
|
595
|
+
<VASlide
|
|
596
|
+
title="Small Slideover"
|
|
597
|
+
size="sm"
|
|
598
|
+
trigger-label="Small"
|
|
599
|
+
trigger-variant="outline"
|
|
600
|
+
>
|
|
601
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
602
|
+
This is a small slideover panel.
|
|
603
|
+
</p>
|
|
604
|
+
<p class="mt-4 text-gray-600 dark:text-gray-400">
|
|
605
|
+
Perfect for quick actions or minimal content.
|
|
606
|
+
</p>
|
|
607
|
+
</VASlide>
|
|
608
|
+
</ClientOnly>
|
|
609
|
+
|
|
610
|
+
<ClientOnly>
|
|
611
|
+
<VASlide
|
|
612
|
+
title="Medium Slideover"
|
|
613
|
+
size="md"
|
|
614
|
+
trigger-label="Medium"
|
|
615
|
+
trigger-variant="outline"
|
|
616
|
+
>
|
|
617
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
618
|
+
This is a medium slideover panel.
|
|
619
|
+
</p>
|
|
620
|
+
<p class="mt-4 text-gray-600 dark:text-gray-400">
|
|
621
|
+
Good for forms and detailed information.
|
|
622
|
+
</p>
|
|
623
|
+
<div class="mt-6 space-y-4">
|
|
624
|
+
<UFormField label="Name">
|
|
625
|
+
<UInput placeholder="Enter name" />
|
|
626
|
+
</UFormField>
|
|
627
|
+
<UFormField label="Description">
|
|
628
|
+
<UTextarea placeholder="Enter description" />
|
|
629
|
+
</UFormField>
|
|
630
|
+
</div>
|
|
631
|
+
</VASlide>
|
|
632
|
+
</ClientOnly>
|
|
633
|
+
|
|
634
|
+
<ClientOnly>
|
|
635
|
+
<VASlide
|
|
636
|
+
title="Large Slideover"
|
|
637
|
+
size="lg"
|
|
638
|
+
trigger-label="Large"
|
|
639
|
+
trigger-variant="outline"
|
|
640
|
+
>
|
|
641
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
642
|
+
This is a large slideover panel.
|
|
643
|
+
</p>
|
|
644
|
+
<p class="mt-4 text-gray-600 dark:text-gray-400">
|
|
645
|
+
Ideal for complex forms or data views.
|
|
646
|
+
</p>
|
|
647
|
+
<div class="mt-6 grid grid-cols-2 gap-4">
|
|
648
|
+
<UFormField label="First Name">
|
|
649
|
+
<UInput placeholder="First name" />
|
|
650
|
+
</UFormField>
|
|
651
|
+
<UFormField label="Last Name">
|
|
652
|
+
<UInput placeholder="Last name" />
|
|
653
|
+
</UFormField>
|
|
654
|
+
<UFormField label="Email">
|
|
655
|
+
<UInput type="email" placeholder="Email" />
|
|
656
|
+
</UFormField>
|
|
657
|
+
<UFormField label="Phone">
|
|
658
|
+
<UInput type="tel" placeholder="Phone" />
|
|
659
|
+
</UFormField>
|
|
660
|
+
</div>
|
|
661
|
+
</VASlide>
|
|
662
|
+
</ClientOnly>
|
|
663
|
+
|
|
664
|
+
<ClientOnly>
|
|
665
|
+
<VASlide
|
|
666
|
+
title="Extra Large Slideover"
|
|
667
|
+
size="xl"
|
|
668
|
+
trigger-label="Extra Large"
|
|
669
|
+
trigger-variant="outline"
|
|
670
|
+
>
|
|
671
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
672
|
+
This is an extra large slideover panel.
|
|
673
|
+
</p>
|
|
674
|
+
<p class="mt-4 text-gray-600 dark:text-gray-400">
|
|
675
|
+
Best for complex workflows with multiple sections.
|
|
676
|
+
</p>
|
|
677
|
+
<div class="mt-6">
|
|
678
|
+
<div class="grid grid-cols-3 gap-4">
|
|
679
|
+
<UFormField label="Field 1">
|
|
680
|
+
<UInput placeholder="Value" />
|
|
681
|
+
</UFormField>
|
|
682
|
+
<UFormField label="Field 2">
|
|
683
|
+
<UInput placeholder="Value" />
|
|
684
|
+
</UFormField>
|
|
685
|
+
<UFormField label="Field 3">
|
|
686
|
+
<UInput placeholder="Value" />
|
|
687
|
+
</UFormField>
|
|
688
|
+
</div>
|
|
689
|
+
</div>
|
|
690
|
+
</VASlide>
|
|
691
|
+
</ClientOnly>
|
|
349
692
|
</div>
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
</
|
|
693
|
+
</UCard>
|
|
694
|
+
|
|
695
|
+
<UCard class="mt-4">
|
|
696
|
+
<template #header>
|
|
697
|
+
<h3 class="font-semibold">Left Side Slideover</h3>
|
|
355
698
|
</template>
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
699
|
+
<div class="flex flex-wrap gap-4">
|
|
700
|
+
<ClientOnly>
|
|
701
|
+
<VASlide
|
|
702
|
+
title="Left Slideover"
|
|
703
|
+
size="md"
|
|
704
|
+
side="left"
|
|
705
|
+
trigger-label="Open Left"
|
|
706
|
+
trigger-variant="soft"
|
|
707
|
+
>
|
|
708
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
709
|
+
This slideover opens from the left side.
|
|
710
|
+
</p>
|
|
711
|
+
<p class="mt-4 text-gray-600 dark:text-gray-400">
|
|
712
|
+
Useful for navigation or filter panels.
|
|
713
|
+
</p>
|
|
714
|
+
</VASlide>
|
|
715
|
+
</ClientOnly>
|
|
367
716
|
</div>
|
|
368
|
-
</
|
|
369
|
-
</ClientOnly>
|
|
370
|
-
</div>
|
|
717
|
+
</UCard>
|
|
371
718
|
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
>
|
|
388
|
-
<p class="text-gray-600 dark:text-gray-400">This is a small slideover panel.</p>
|
|
389
|
-
<p class="mt-4 text-gray-600 dark:text-gray-400">Perfect for quick actions or minimal content.</p>
|
|
390
|
-
</VASlide>
|
|
391
|
-
</ClientOnly>
|
|
392
|
-
|
|
393
|
-
<ClientOnly>
|
|
394
|
-
<VASlide
|
|
395
|
-
title="Medium Slideover"
|
|
396
|
-
size="md"
|
|
397
|
-
trigger-label="Medium"
|
|
398
|
-
trigger-variant="outline"
|
|
399
|
-
>
|
|
400
|
-
<p class="text-gray-600 dark:text-gray-400">This is a medium slideover panel.</p>
|
|
401
|
-
<p class="mt-4 text-gray-600 dark:text-gray-400">Good for forms and detailed information.</p>
|
|
402
|
-
<div class="mt-6 space-y-4">
|
|
403
|
-
<UFormField label="Name">
|
|
404
|
-
<UInput placeholder="Enter name" />
|
|
405
|
-
</UFormField>
|
|
406
|
-
<UFormField label="Description">
|
|
407
|
-
<UTextarea placeholder="Enter description" />
|
|
408
|
-
</UFormField>
|
|
409
|
-
</div>
|
|
410
|
-
</VASlide>
|
|
411
|
-
</ClientOnly>
|
|
412
|
-
|
|
413
|
-
<ClientOnly>
|
|
414
|
-
<VASlide
|
|
415
|
-
title="Large Slideover"
|
|
416
|
-
size="lg"
|
|
417
|
-
trigger-label="Large"
|
|
418
|
-
trigger-variant="outline"
|
|
419
|
-
>
|
|
420
|
-
<p class="text-gray-600 dark:text-gray-400">This is a large slideover panel.</p>
|
|
421
|
-
<p class="mt-4 text-gray-600 dark:text-gray-400">Ideal for complex forms or data views.</p>
|
|
422
|
-
<div class="mt-6 grid grid-cols-2 gap-4">
|
|
423
|
-
<UFormField label="First Name">
|
|
424
|
-
<UInput placeholder="First name" />
|
|
425
|
-
</UFormField>
|
|
426
|
-
<UFormField label="Last Name">
|
|
427
|
-
<UInput placeholder="Last name" />
|
|
428
|
-
</UFormField>
|
|
429
|
-
<UFormField label="Email">
|
|
430
|
-
<UInput type="email" placeholder="Email" />
|
|
431
|
-
</UFormField>
|
|
432
|
-
<UFormField label="Phone">
|
|
433
|
-
<UInput type="tel" placeholder="Phone" />
|
|
434
|
-
</UFormField>
|
|
435
|
-
</div>
|
|
436
|
-
</VASlide>
|
|
437
|
-
</ClientOnly>
|
|
438
|
-
|
|
439
|
-
<ClientOnly>
|
|
440
|
-
<VASlide
|
|
441
|
-
title="Extra Large Slideover"
|
|
442
|
-
size="xl"
|
|
443
|
-
trigger-label="Extra Large"
|
|
444
|
-
trigger-variant="outline"
|
|
445
|
-
>
|
|
446
|
-
<p class="text-gray-600 dark:text-gray-400">This is an extra large slideover panel.</p>
|
|
447
|
-
<p class="mt-4 text-gray-600 dark:text-gray-400">Best for complex workflows with multiple sections.</p>
|
|
448
|
-
<div class="mt-6">
|
|
449
|
-
<div class="grid grid-cols-3 gap-4">
|
|
450
|
-
<UFormField label="Field 1">
|
|
451
|
-
<UInput placeholder="Value" />
|
|
719
|
+
<UCard class="mt-4">
|
|
720
|
+
<template #header>
|
|
721
|
+
<h3 class="font-semibold">Slideover with Footer</h3>
|
|
722
|
+
</template>
|
|
723
|
+
<div class="flex flex-wrap gap-4">
|
|
724
|
+
<ClientOnly>
|
|
725
|
+
<VASlide
|
|
726
|
+
title="Form Slideover"
|
|
727
|
+
size="md"
|
|
728
|
+
trigger-label="With Footer"
|
|
729
|
+
trigger-color="green"
|
|
730
|
+
>
|
|
731
|
+
<div class="space-y-4">
|
|
732
|
+
<UFormField label="Project Name" required>
|
|
733
|
+
<UInput placeholder="Enter project name" />
|
|
452
734
|
</UFormField>
|
|
453
|
-
<UFormField label="
|
|
454
|
-
<
|
|
735
|
+
<UFormField label="Description">
|
|
736
|
+
<UTextarea placeholder="Describe your project" />
|
|
455
737
|
</UFormField>
|
|
456
|
-
<UFormField label="
|
|
457
|
-
<
|
|
738
|
+
<UFormField label="Priority">
|
|
739
|
+
<USelect
|
|
740
|
+
placeholder="Select priority"
|
|
741
|
+
:items="[
|
|
742
|
+
{ label: 'High', value: 'high' },
|
|
743
|
+
{ label: 'Medium', value: 'medium' },
|
|
744
|
+
{ label: 'Low', value: 'low' },
|
|
745
|
+
]"
|
|
746
|
+
/>
|
|
458
747
|
</UFormField>
|
|
459
748
|
</div>
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
</
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
trigger-color="green"
|
|
497
|
-
>
|
|
498
|
-
<div class="space-y-4">
|
|
499
|
-
<UFormField label="Project Name" required>
|
|
500
|
-
<UInput placeholder="Enter project name" />
|
|
501
|
-
</UFormField>
|
|
502
|
-
<UFormField label="Description">
|
|
503
|
-
<UTextarea placeholder="Describe your project" />
|
|
504
|
-
</UFormField>
|
|
505
|
-
<UFormField label="Priority">
|
|
506
|
-
<USelect
|
|
507
|
-
placeholder="Select priority"
|
|
508
|
-
:items="[
|
|
509
|
-
{ label: 'High', value: 'high' },
|
|
510
|
-
{ label: 'Medium', value: 'medium' },
|
|
511
|
-
{ label: 'Low', value: 'low' }
|
|
512
|
-
]"
|
|
513
|
-
/>
|
|
514
|
-
</UFormField>
|
|
515
|
-
</div>
|
|
516
|
-
<template #footer>
|
|
517
|
-
<div class="flex justify-end gap-3">
|
|
518
|
-
<UButton label="Cancel" color="gray" variant="ghost" />
|
|
519
|
-
<UButton label="Save Project" color="primary" />
|
|
520
|
-
</div>
|
|
521
|
-
</template>
|
|
522
|
-
</VASlide>
|
|
523
|
-
</ClientOnly>
|
|
524
|
-
</div>
|
|
525
|
-
</UCard>
|
|
526
|
-
|
|
527
|
-
<UCard class="mt-4">
|
|
528
|
-
<template #header>
|
|
529
|
-
<h3 class="font-semibold">Icon-Only Trigger</h3>
|
|
530
|
-
</template>
|
|
531
|
-
<div class="flex flex-wrap gap-4">
|
|
532
|
-
<ClientOnly>
|
|
533
|
-
<VASlide
|
|
534
|
-
title="Settings"
|
|
535
|
-
size="sm"
|
|
536
|
-
trigger-icon="i-lucide-settings"
|
|
537
|
-
trigger-variant="ghost"
|
|
538
|
-
>
|
|
539
|
-
<div class="space-y-4">
|
|
540
|
-
<div class="flex items-center justify-between">
|
|
541
|
-
<span>Dark Mode</span>
|
|
542
|
-
<UToggle />
|
|
749
|
+
<template #footer>
|
|
750
|
+
<div class="flex justify-end gap-3">
|
|
751
|
+
<UButton label="Cancel" color="neutral" variant="ghost" />
|
|
752
|
+
<UButton label="Save Project" color="primary" />
|
|
753
|
+
</div>
|
|
754
|
+
</template>
|
|
755
|
+
</VASlide>
|
|
756
|
+
</ClientOnly>
|
|
757
|
+
</div>
|
|
758
|
+
</UCard>
|
|
759
|
+
|
|
760
|
+
<UCard class="mt-4">
|
|
761
|
+
<template #header>
|
|
762
|
+
<h3 class="font-semibold">Icon-Only Trigger</h3>
|
|
763
|
+
</template>
|
|
764
|
+
<div class="flex flex-wrap gap-4">
|
|
765
|
+
<ClientOnly>
|
|
766
|
+
<VASlide
|
|
767
|
+
title="Settings"
|
|
768
|
+
size="sm"
|
|
769
|
+
trigger-icon="i-lucide-settings"
|
|
770
|
+
trigger-variant="ghost"
|
|
771
|
+
>
|
|
772
|
+
<div class="space-y-4">
|
|
773
|
+
<div class="flex items-center justify-between">
|
|
774
|
+
<span>Dark Mode</span>
|
|
775
|
+
<UToggle />
|
|
776
|
+
</div>
|
|
777
|
+
<div class="flex items-center justify-between">
|
|
778
|
+
<span>Notifications</span>
|
|
779
|
+
<UToggle />
|
|
780
|
+
</div>
|
|
781
|
+
<div class="flex items-center justify-between">
|
|
782
|
+
<span>Auto-save</span>
|
|
783
|
+
<UToggle />
|
|
784
|
+
</div>
|
|
543
785
|
</div>
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
786
|
+
</VASlide>
|
|
787
|
+
</ClientOnly>
|
|
788
|
+
|
|
789
|
+
<ClientOnly>
|
|
790
|
+
<VASlide
|
|
791
|
+
title="Filter Options"
|
|
792
|
+
size="sm"
|
|
793
|
+
trigger-icon="i-lucide-filter"
|
|
794
|
+
trigger-variant="outline"
|
|
795
|
+
>
|
|
796
|
+
<div class="space-y-4">
|
|
797
|
+
<UFormField label="Status">
|
|
798
|
+
<USelect
|
|
799
|
+
placeholder="All statuses"
|
|
800
|
+
:items="[
|
|
801
|
+
{ label: 'Active', value: 'active' },
|
|
802
|
+
{ label: 'Pending', value: 'pending' },
|
|
803
|
+
{ label: 'Archived', value: 'archived' },
|
|
804
|
+
]"
|
|
805
|
+
/>
|
|
806
|
+
</UFormField>
|
|
807
|
+
<UFormField label="Date Range">
|
|
808
|
+
<UInput type="date" />
|
|
809
|
+
</UFormField>
|
|
547
810
|
</div>
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
811
|
+
</VASlide>
|
|
812
|
+
</ClientOnly>
|
|
813
|
+
|
|
814
|
+
<ClientOnly>
|
|
815
|
+
<VASlide
|
|
816
|
+
title="Help & Support"
|
|
817
|
+
size="md"
|
|
818
|
+
trigger-icon="i-lucide-help-circle"
|
|
819
|
+
trigger-color="neutral"
|
|
820
|
+
trigger-variant="soft"
|
|
821
|
+
>
|
|
822
|
+
<div class="space-y-4">
|
|
823
|
+
<p class="text-gray-600 dark:text-gray-400">
|
|
824
|
+
Need help? Here are some resources:
|
|
825
|
+
</p>
|
|
826
|
+
<ul
|
|
827
|
+
class="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400"
|
|
828
|
+
>
|
|
829
|
+
<li>Documentation</li>
|
|
830
|
+
<li>Video Tutorials</li>
|
|
831
|
+
<li>Community Forum</li>
|
|
832
|
+
<li>Contact Support</li>
|
|
833
|
+
</ul>
|
|
551
834
|
</div>
|
|
552
|
-
</
|
|
553
|
-
</
|
|
554
|
-
</
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
<VASlide
|
|
558
|
-
title="Filter Options"
|
|
559
|
-
size="sm"
|
|
560
|
-
trigger-icon="i-lucide-filter"
|
|
561
|
-
trigger-variant="outline"
|
|
562
|
-
>
|
|
563
|
-
<div class="space-y-4">
|
|
564
|
-
<UFormField label="Status">
|
|
565
|
-
<USelect
|
|
566
|
-
placeholder="All statuses"
|
|
567
|
-
:items="[
|
|
568
|
-
{ label: 'Active', value: 'active' },
|
|
569
|
-
{ label: 'Pending', value: 'pending' },
|
|
570
|
-
{ label: 'Archived', value: 'archived' }
|
|
571
|
-
]"
|
|
572
|
-
/>
|
|
573
|
-
</UFormField>
|
|
574
|
-
<UFormField label="Date Range">
|
|
575
|
-
<UInput type="date" />
|
|
576
|
-
</UFormField>
|
|
577
|
-
</div>
|
|
578
|
-
</VASlide>
|
|
579
|
-
</ClientOnly>
|
|
580
|
-
|
|
581
|
-
<ClientOnly>
|
|
582
|
-
<VASlide
|
|
583
|
-
title="Help & Support"
|
|
584
|
-
size="md"
|
|
585
|
-
trigger-icon="i-lucide-help-circle"
|
|
586
|
-
trigger-color="neutral"
|
|
587
|
-
trigger-variant="soft"
|
|
588
|
-
>
|
|
589
|
-
<div class="space-y-4">
|
|
590
|
-
<p class="text-gray-600 dark:text-gray-400">Need help? Here are some resources:</p>
|
|
591
|
-
<ul class="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400">
|
|
592
|
-
<li>Documentation</li>
|
|
593
|
-
<li>Video Tutorials</li>
|
|
594
|
-
<li>Community Forum</li>
|
|
595
|
-
<li>Contact Support</li>
|
|
596
|
-
</ul>
|
|
597
|
-
</div>
|
|
598
|
-
</VASlide>
|
|
599
|
-
</ClientOnly>
|
|
600
|
-
</div>
|
|
601
|
-
</UCard>
|
|
835
|
+
</VASlide>
|
|
836
|
+
</ClientOnly>
|
|
837
|
+
</div>
|
|
838
|
+
</UCard>
|
|
839
|
+
</div>
|
|
602
840
|
</div>
|
|
603
|
-
</div>
|
|
604
841
|
</UContainer>
|
|
605
842
|
</UDashboardPanel>
|
|
606
843
|
</template>
|