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

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

182 lines 4.2 KB

Raw Download Zip

1	<template>
2	<div>
3	<h1>Dialog Testing Page</h1>
4	<div>
5	Delete dialog(fill, middle) :
6	<IvyButtonAction
7	:priority="'white'"
8	:size="'d'"
9	:type="'fill'"
10	@click="showDeleteDialog = true"
11	>Open Delete
12	</IvyButtonAction>
13	</div>
14	<br />
15	<div>
16	Edit dialog(r-alinged, middle) :
17	<IvyButtonAction
18	:priority="'warning'"
19	:size="'d'"
20	:type="'fill'"
21	@click="showEditDialog = true"
22	>Open Edit
23	</IvyButtonAction>
24	</div>
25	<br />
26	<div>
27	Add new dialog(options, top-middle) :
28	<IvyButtonAction
29	:priority="'shadow-white'"
30	:size="'d'"
31	:type="'fill'"
32	@click="showAddNewDialog = true"
33	>Open Add New
34	</IvyButtonAction>
35	</div>
36	<IvyDialog
37	v-model="showDeleteDialog"
38	title="Delete Item"
39	subtitle="Are you sure you want to delete this item?"
40	show-close
41	align-center
42	>
43	<div>Delete dialog content goes here...</div>
44	<template #footer>
45	<IvyButtonAction
46	:priority="'tertiary'"
47	:size="'d'"
48	:type="'fill'"
49	:full-width="true"
50	@click="showDeleteDialog = false"
51	>
52	Cancel
53	</IvyButtonAction>
54	<IvyButtonAction
55	:priority="'danger'"
56	:size="'d'"
57	:type="'fill'"
58	:full-width="true"
59	@click="showDeleteDialog = false"
60	>
61	Delete
62	</IvyButtonAction>
63	</template>
64	</IvyDialog>
65
66	<IvyDialog
67	v-model="showEditDialog"
68	title="Edit Item"
69	subtitle="Edit the details of the item"
70	show-close
71	align-center
72	>
73	<div>Edit dialog content goes here...</div>
74	<template #footer>
75	<IvyButtonAction
76	:priority="'tertiary'"
77	:size="'d'"
78	:type="'fill'"
79	@click="showEditDialog = false"
80	>
81	Cancel
82	</IvyButtonAction>
83	<IvyButtonAction
84	:priority="'success'"
85	:size="'d'"
86	:type="'fill'"
87	@click="showEditDialog = false"
88	>
89	Save
90	</IvyButtonAction>
91	</template>
92	</IvyDialog>
93
94	<IvyDialog
95	v-model="showAddNewDialog"
96	title="Add New Item"
97	subtitle="Enter the details of the new item"
98	show-close
99	>
100	<div>Add new dialog content goes here...</div>
101	<template #footer>
102	<div class="flex-left">
103	<IvyButtonAction
104	:priority="'danger'"
105	:size="'d'"
106	:type="'fill'"
107	icon-only
108	:icon-start="'trash'"
109	@click="showAddNewDialog = false"
110	>
111	Add
112	</IvyButtonAction>
113	<IvyButtonAction
114	:priority="'warning'"
115	:size="'d'"
116	:type="'fill'"
117	icon-only
118	:icon-start="'copy'"
119	@click="showAddNewDialog = false"
120	>
121	Add
122	</IvyButtonAction>
123	<IvyButtonAction
124	:priority="'shadow-white'"
125	:size="'d'"
126	:type="'fill'"
127	icon-only
128	:icon-start="'eye-opened'"
129	@click="showAddNewDialog = false"
130	>
131	Add
132	</IvyButtonAction>
133	</div>
134	<div class="flex-right">
135	<IvyButtonAction
136	:priority="'tertiary'"
137	:size="'d'"
138	:type="'fill'"
139	@click="showAddNewDialog = false"
140	>
141	Cancel
142	</IvyButtonAction>
143	<IvyButtonAction
144	:priority="'success'"
145	:size="'d'"
146	:type="'fill'"
147	@click="showAddNewDialog = false"
148	>
149	Add
150	</IvyButtonAction>
151	</div>
152	</template>
153	</IvyDialog>
154	</div>
155	</template>
156
157	<script setup lang="ts">
158	import { ref } from 'vue'
159	import IvyDialog from '@/views/_components/dialog/IvyDialog.vue'
160	import IvyButtonAction from '@/views/_components/button/IvyButtonAction.vue'
161
162	const showDeleteDialog = ref(false)
163	const showEditDialog = ref(false)
164	const showAddNewDialog = ref(false)
165	</script>
166
167	<style scoped>
168	h1 {
169	font-size: 24px;
170	margin-bottom: 16px;
171	}
172
173	button {
174	margin-top: 16px;
175	margin-right: 8px;
176	}
177
178	.flex-right {
179	flex: 2;
180	}
181	</style>
182