ivyforms / frontend / src / views / admin / testing / testing-page / TestingSubdialog.vue

TestingSubdialog.vue in The Innovative Form Builder – IvyForms 0.1.2, at frontend/src/views/admin/testing/testing-page/TestingSubdialog.vue

702 lines 17.6 KB

Raw Download Zip

1	<template>
2	<div>
3	<h1>Dialog Testing Page</h1>
4	<div>
5	Deafult Notification dialog:
6	<IvyButtonAction
7	:priority="'primary'"
8	:size="'d'"
9	:type="'fill'"
10	@click="showDefaultDialog1 = true"
11	>Open left
12	</IvyButtonAction>
13	<IvyButtonAction
14	:priority="'primary'"
15	:size="'d'"
16	:type="'fill'"
17	@click="showDefaultDialog2 = true"
18	>Open center
19	</IvyButtonAction>
20	<IvyButtonAction
21	:priority="'primary'"
22	:size="'d'"
23	:type="'fill'"
24	@click="showDefaultDialog3 = true"
25	>Open right
26	</IvyButtonAction>
27	</div>
28	<div>
29	Coming Soon Notification dialog:
30	<IvyButtonAction
31	:priority="'secondary'"
32	:size="'d'"
33	:type="'border'"
34	@click="showUpComingDialog1 = true"
35	>Open left
36	</IvyButtonAction>
37	<IvyButtonAction
38	:priority="'secondary'"
39	:size="'d'"
40	:type="'border'"
41	@click="showUpComingDialog2 = true"
42	>Open center
43	</IvyButtonAction>
44	<IvyButtonAction
45	:priority="'secondary'"
46	:size="'d'"
47	:type="'border'"
48	@click="showUpComingDialog3 = true"
49	>Open right
50	</IvyButtonAction>
51	</div>
52	<div>
53	Premium Notification dialog (center align dialog):
54	<IvyButtonAction
55	:priority="'secondary'"
56	:size="'d'"
57	:type="'fill'"
58	@click="showPremiumDialog1 = true"
59	>Open left
60	</IvyButtonAction>
61	<IvyButtonAction
62	:priority="'secondary'"
63	:size="'d'"
64	:type="'fill'"
65	@click="showPremiumDialog2 = true"
66	>Open center
67	</IvyButtonAction>
68	<IvyButtonAction
69	:priority="'secondary'"
70	:size="'d'"
71	:type="'fill'"
72	@click="showPremiumDialog3 = true"
73	>Open right
74	</IvyButtonAction>
75	</div>
76	<hr />
77	<div>
78	Success Notification dialog:
79	<IvyButtonAction
80	:priority="'primary'"
81	:size="'d'"
82	:type="'fill'"
83	@click="showSuccessDialog1 = true"
84	>Open left
85	</IvyButtonAction>
86	<IvyButtonAction
87	:priority="'primary'"
88	:size="'d'"
89	:type="'fill'"
90	@click="showSuccessDialog2 = true"
91	>Open center
92	</IvyButtonAction>
93	<IvyButtonAction
94	:priority="'primary'"
95	:size="'d'"
96	:type="'fill'"
97	@click="showSuccessDialog3 = true"
98	>Open right
99	</IvyButtonAction>
100	</div>
101	<div>
102	Warning Notification dialog:
103	<IvyButtonAction
104	:priority="'warning'"
105	:size="'d'"
106	:type="'fill'"
107	@click="showWarningDialog1 = true"
108	>Open left
109	</IvyButtonAction>
110	<IvyButtonAction
111	:priority="'warning'"
112	:size="'d'"
113	:type="'fill'"
114	@click="showWarningDialog2 = true"
115	>Open center
116	</IvyButtonAction>
117	<IvyButtonAction
118	:priority="'warning'"
119	:size="'d'"
120	:type="'fill'"
121	@click="showWarningDialog3 = true"
122	>Open right
123	</IvyButtonAction>
124	</div>
125	<div>
126	Danger Notification dialog (center align dialog):
127	<IvyButtonAction
128	:priority="'danger'"
129	:size="'d'"
130	:type="'fill'"
131	@click="showDangerDialog1 = true"
132	>Open left
133	</IvyButtonAction>
134	<IvyButtonAction
135	:priority="'danger'"
136	:size="'d'"
137	:type="'fill'"
138	@click="showDangerDialog2 = true"
139	>Open center
140	</IvyButtonAction>
141	<IvyButtonAction
142	:priority="'danger'"
143	:size="'d'"
144	:type="'fill'"
145	@click="showDangerDialog3 = true"
146	>Open right
147	</IvyButtonAction>
148	</div>
149
150	<IvyShortDialog
151	v-model="showDefaultDialog1"
152	title="Default Notification"
153	:type="'default'"
154	:align="'left'"
155	show-close
156	>
157	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
158	<template #footer>
159	<IvyButtonAction
160	:priority="'primary'"
161	:size="'d'"
162	:type="'fill'"
163	@click="showDefaultDialog1 = false"
164	>
165	Action
166	</IvyButtonAction>
167	<IvyButtonAction
168	:priority="'tertiary'"
169	:size="'d'"
170	:type="'fill'"
171	@click="showDefaultDialog1 = false"
172	>
173	Cancel
174	</IvyButtonAction>
175	</template>
176	</IvyShortDialog>
177
178	<IvyShortDialog
179	v-model="showDefaultDialog2"
180	title="Default Notification"
181	:type="'default'"
182	:align="'center'"
183	show-close
184	>
185	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
186	<template #footer>
187	<IvyButtonAction
188	:priority="'primary'"
189	:size="'d'"
190	:type="'fill'"
191	@click="showDefaultDialog2 = false"
192	>
193	Action
194	</IvyButtonAction>
195	<IvyButtonAction
196	:priority="'tertiary'"
197	:size="'d'"
198	:type="'fill'"
199	@click="showDefaultDialog2 = false"
200	>
201	Cancel
202	</IvyButtonAction>
203	</template>
204	</IvyShortDialog>
205
206	<IvyShortDialog
207	v-model="showDefaultDialog3"
208	title="Default Notification"
209	:type="'default'"
210	:align="'right'"
211	show-close
212	>
213	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
214	<template #footer>
215	<IvyButtonAction
216	:priority="'primary'"
217	:size="'d'"
218	:type="'fill'"
219	@click="showDefaultDialog3 = false"
220	>
221	Action
222	</IvyButtonAction>
223	<IvyButtonAction
224	:priority="'tertiary'"
225	:size="'d'"
226	:type="'fill'"
227	@click="showDefaultDialog3 = false"
228	>
229	Cancel
230	</IvyButtonAction>
231	</template>
232	</IvyShortDialog>
233
234	<IvyShortDialog
235	v-model="showUpComingDialog1"
236	title="Coming Soon Feature"
237	:type="'upcoming'"
238	:align="'left'"
239	show-close
240	>
241	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
242	<template #footer>
243	<IvyButtonAction
244	:priority="'secondary'"
245	:size="'d'"
246	:type="'border'"
247	@click="showUpComingDialog1 = false"
248	>
249	Action
250	</IvyButtonAction>
251	<IvyButtonAction
252	:priority="'tertiary'"
253	:size="'d'"
254	:type="'fill'"
255	@click="showUpComingDialog1 = false"
256	>
257	Cancel
258	</IvyButtonAction>
259	</template>
260	</IvyShortDialog>
261
262	<IvyShortDialog
263	v-model="showUpComingDialog2"
264	title="Coming Soon Feature"
265	:type="'upcoming'"
266	:align="'center'"
267	show-close
268	>
269	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
270	<template #footer>
271	<IvyButtonAction
272	:priority="'secondary'"
273	:size="'d'"
274	:type="'border'"
275	@click="showUpComingDialog2 = false"
276	>
277	Action
278	</IvyButtonAction>
279	<IvyButtonAction
280	:priority="'tertiary'"
281	:size="'d'"
282	:type="'fill'"
283	@click="showUpComingDialog2 = false"
284	>
285	Cancel
286	</IvyButtonAction>
287	</template>
288	</IvyShortDialog>
289
290	<IvyShortDialog
291	v-model="showUpComingDialog3"
292	title="Coming Soon Feature"
293	:type="'upcoming'"
294	:align="'right'"
295	show-close
296	>
297	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
298	<template #footer>
299	<IvyButtonAction
300	:priority="'secondary'"
301	:size="'d'"
302	:type="'border'"
303	@click="showUpComingDialog3 = false"
304	>
305	Action
306	</IvyButtonAction>
307	<IvyButtonAction
308	:priority="'tertiary'"
309	:size="'d'"
310	:type="'fill'"
311	@click="showUpComingDialog3 = false"
312	>
313	Cancel
314	</IvyButtonAction>
315	</template>
316	</IvyShortDialog>
317
318	<IvyShortDialog
319	v-model="showPremiumDialog1"
320	title="Premium Feature"
321	:type="'premium'"
322	:align="'left'"
323	show-close
324	align-center
325	>
326	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
327	<template #footer>
328	<IvyButtonAction
329	:priority="'secondary'"
330	:size="'d'"
331	:type="'fill'"
332	@click="showPremiumDialog1 = false"
333	>
334	Action
335	</IvyButtonAction>
336	<IvyButtonAction
337	:priority="'tertiary'"
338	:size="'d'"
339	:type="'fill'"
340	@click="showPremiumDialog1 = false"
341	>
342	Cancel
343	</IvyButtonAction>
344	</template>
345	</IvyShortDialog>
346
347	<IvyShortDialog
348	v-model="showPremiumDialog2"
349	title="Premium Feature"
350	:type="'premium'"
351	:align="'center'"
352	show-close
353	align-center
354	>
355	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
356	<template #footer>
357	<IvyButtonAction
358	:priority="'secondary'"
359	:size="'d'"
360	:type="'fill'"
361	@click="showPremiumDialog2 = false"
362	>
363	Action
364	</IvyButtonAction>
365	<IvyButtonAction
366	:priority="'tertiary'"
367	:size="'d'"
368	:type="'fill'"
369	@click="showPremiumDialog2 = false"
370	>
371	Cancel
372	</IvyButtonAction>
373	</template>
374	</IvyShortDialog>
375
376	<IvyShortDialog
377	v-model="showPremiumDialog3"
378	title="Premium Feature"
379	:type="'premium'"
380	:align="'right'"
381	show-close
382	align-center
383	>
384	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
385	<template #footer>
386	<IvyButtonAction
387	:priority="'secondary'"
388	:size="'d'"
389	:type="'fill'"
390	@click="showPremiumDialog3 = false"
391	>
392	Action
393	</IvyButtonAction>
394	<IvyButtonAction
395	:priority="'tertiary'"
396	:size="'d'"
397	:type="'fill'"
398	@click="showPremiumDialog3 = false"
399	>
400	Cancel
401	</IvyButtonAction>
402	</template>
403	</IvyShortDialog>
404
405	<IvyShortDialog
406	v-model="showSuccessDialog1"
407	title="Success Notification"
408	:type="'success'"
409	:align="'left'"
410	show-close
411	>
412	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
413	<template #footer>
414	<IvyButtonAction
415	:priority="'primary'"
416	:size="'d'"
417	:type="'fill'"
418	@click="showSuccessDialog1 = false"
419	>
420	Action
421	</IvyButtonAction>
422	<IvyButtonAction
423	:priority="'tertiary'"
424	:size="'d'"
425	:type="'fill'"
426	@click="showSuccessDialog1 = false"
427	>
428	Cancel
429	</IvyButtonAction>
430	</template>
431	</IvyShortDialog>
432
433	<IvyShortDialog
434	v-model="showSuccessDialog2"
435	title="Success Notification"
436	:type="'success'"
437	:align="'center'"
438	show-close
439	>
440	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
441	<template #footer>
442	<IvyButtonAction
443	:priority="'primary'"
444	:size="'d'"
445	:type="'fill'"
446	@click="showSuccessDialog2 = false"
447	>
448	Action
449	</IvyButtonAction>
450	<IvyButtonAction
451	:priority="'tertiary'"
452	:size="'d'"
453	:type="'fill'"
454	@click="showSuccessDialog2 = false"
455	>
456	Cancel
457	</IvyButtonAction>
458	</template>
459	</IvyShortDialog>
460
461	<IvyShortDialog
462	v-model="showSuccessDialog3"
463	title="Success Notification"
464	:type="'success'"
465	:align="'right'"
466	show-close
467	>
468	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
469	<template #footer>
470	<IvyButtonAction
471	:priority="'primary'"
472	:size="'d'"
473	:type="'fill'"
474	@click="showSuccessDialog3 = false"
475	>
476	Action
477	</IvyButtonAction>
478	<IvyButtonAction
479	:priority="'tertiary'"
480	:size="'d'"
481	:type="'fill'"
482	@click="showSuccessDialog3 = false"
483	>
484	Cancel
485	</IvyButtonAction>
486	</template>
487	</IvyShortDialog>
488
489	<IvyShortDialog
490	v-model="showWarningDialog1"
491	title="Warning Notification"
492	:type="'warning'"
493	:align="'left'"
494	show-close
495	>
496	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
497	<template #footer>
498	<IvyButtonAction
499	:priority="'warning'"
500	:size="'d'"
501	:type="'fill'"
502	@click="showWarningDialog1 = false"
503	>
504	Action
505	</IvyButtonAction>
506	<IvyButtonAction
507	:priority="'tertiary'"
508	:size="'d'"
509	:type="'fill'"
510	@click="showWarningDialog1 = false"
511	>
512	Cancel
513	</IvyButtonAction>
514	</template>
515	</IvyShortDialog>
516
517	<IvyShortDialog
518	v-model="showWarningDialog2"
519	title="Warning Notification"
520	:type="'warning'"
521	:align="'center'"
522	show-close
523	>
524	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
525	<template #footer>
526	<IvyButtonAction
527	:priority="'warning'"
528	:size="'d'"
529	:type="'fill'"
530	@click="showWarningDialog2 = false"
531	>
532	Action
533	</IvyButtonAction>
534	<IvyButtonAction
535	:priority="'tertiary'"
536	:size="'d'"
537	:type="'fill'"
538	@click="showWarningDialog2 = false"
539	>
540	Cancel
541	</IvyButtonAction>
542	</template>
543	</IvyShortDialog>
544
545	<IvyShortDialog
546	v-model="showWarningDialog3"
547	title="Warning Notification"
548	:type="'warning'"
549	:align="'right'"
550	show-close
551	>
552	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
553	<template #footer>
554	<IvyButtonAction
555	:priority="'warning'"
556	:size="'d'"
557	:type="'fill'"
558	@click="showWarningDialog3 = false"
559	>
560	Action
561	</IvyButtonAction>
562	<IvyButtonAction
563	:priority="'tertiary'"
564	:size="'d'"
565	:type="'fill'"
566	@click="showWarningDialog3 = false"
567	>
568	Cancel
569	</IvyButtonAction>
570	</template>
571	</IvyShortDialog>
572
573	<IvyShortDialog
574	v-model="showDangerDialog1"
575	title="Danger Notification"
576	:type="'error'"
577	:align="'left'"
578	show-close
579	align-center
580	>
581	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
582	<template #footer>
583	<IvyButtonAction
584	:priority="'danger'"
585	:size="'d'"
586	:type="'fill'"
587	@click="showDangerDialog1 = false"
588	>
589	Action
590	</IvyButtonAction>
591	<IvyButtonAction
592	:priority="'tertiary'"
593	:size="'d'"
594	:type="'fill'"
595	@click="showDangerDialog1 = false"
596	>
597	Cancel
598	</IvyButtonAction>
599	</template>
600	</IvyShortDialog>
601
602	<IvyShortDialog
603	v-model="showDangerDialog2"
604	title="Danger Notification"
605	:type="'error'"
606	:align="'center'"
607	show-close
608	align-center
609	>
610	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
611	<template #footer>
612	<IvyButtonAction
613	:priority="'danger'"
614	:size="'d'"
615	:type="'fill'"
616	@click="showDangerDialog2 = false"
617	>
618	Action
619	</IvyButtonAction>
620	<IvyButtonAction
621	:priority="'tertiary'"
622	:size="'d'"
623	:type="'fill'"
624	@click="showDangerDialog2 = false"
625	>
626	Cancel
627	</IvyButtonAction>
628	</template>
629	</IvyShortDialog>
630
631	<IvyShortDialog
632	v-model="showDangerDialog3"
633	title="Danger Notification"
634	:type="'error'"
635	:align="'right'"
636	show-close
637	align-center
638	>
639	<div>Check out the all new dashboard view. Pages and exports now load faster.</div>
640	<template #footer>
641	<IvyButtonAction
642	:priority="'danger'"
643	:size="'d'"
644	:type="'fill'"
645	@click="showDangerDialog3 = false"
646	>
647	Action
648	</IvyButtonAction>
649	<IvyButtonAction
650	:priority="'tertiary'"
651	:size="'d'"
652	:type="'fill'"
653	@click="showDangerDialog3 = false"
654	>
655	Cancel
656	</IvyButtonAction>
657	</template>
658	</IvyShortDialog>
659	</div>
660	</template>
661
662	<script setup lang="ts">
663	import { ref } from 'vue'
664	import IvyShortDialog from '@/views/_components/sub-dialog/IvyShortDialog.vue'
665	import IvyButtonAction from '@/views/_components/button/IvyButtonAction.vue'
666
667	const showDefaultDialog1 = ref(false)
668	const showDefaultDialog2 = ref(false)
669	const showDefaultDialog3 = ref(false)
670	const showUpComingDialog1 = ref(false)
671	const showUpComingDialog2 = ref(false)
672	const showUpComingDialog3 = ref(false)
673	const showPremiumDialog1 = ref(false)
674	const showPremiumDialog2 = ref(false)
675	const showPremiumDialog3 = ref(false)
676	const showSuccessDialog1 = ref(false)
677	const showSuccessDialog2 = ref(false)
678	const showSuccessDialog3 = ref(false)
679	const showWarningDialog1 = ref(false)
680	const showWarningDialog2 = ref(false)
681	const showWarningDialog3 = ref(false)
682	const showDangerDialog1 = ref(false)
683	const showDangerDialog2 = ref(false)
684	const showDangerDialog3 = ref(false)
685	</script>
686
687	<style scoped>
688	h1 {
689	font-size: 24px;
690	margin-bottom: 16px;
691	}
692
693	button {
694	margin-top: 16px;
695	margin-right: 8px;
696	}
697
698	.flex-right {
699	flex: 2;
700	}
701	</style>
702