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

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

703 lines 17.5 KB

Raw Download Zip

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