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

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

168 lines 3.9 KB

Raw Download Zip

1	<template>
2	<div>
3	<PageHeader />
4
5	<!-- Tabs Navigation -->
6	<IvyTabs
7	v-model="activeTab"
8	type="filled"
9	priority="primary"
10	:tabs="[
11	{ name: 'tabs', label: 'Tabs' },
12	{ name: 'menus', label: 'Menus' },
13	{ name: 'tooltips', label: 'Tooltips' },
14	{ name: 'radio', label: 'Radio' },
15	{ name: 'button', label: 'Button' },
16	{ name: 'alert', label: 'Alert' },
17	{ name: 'toggle', label: 'Toggle' },
18	{ name: 'checkbox', label: 'Checkbox' },
19	{ name: 'link', label: 'Link' },
20	{ name: 'search', label: 'Search' },
21	{ name: 'popover', label: 'Popover' },
22	{ name: 'dialog', label: 'Dialog' },
23	{ name: 'fab', label: 'FAB Options' },
24	{ name: 'context-menu', label: 'Context Menu' },
25	{ name: 'message', label: 'Message' },
26	{ name: 'subdialog', label: 'SubDialog' },
27	{ name: 'inputs', label: 'Inputs' },
28	{ name: 'editor', label: 'HTMLEditor' },
29	]"
30	/>
31
32	<div class="tab-content">
33	<!-- Tabs Section -->
34	<div v-if="activeTab === 'tabs'">
35	<TestingTabs />
36	</div>
37
38	<!-- Tooltips Section -->
39	<div v-if="activeTab === 'tooltips'">
40	<TestingTooltips />
41	</div>
42
43	<!-- Menus Section -->
44	<div v-if="activeTab === 'menus'">
45	<TestingMenus />
46	</div>
47
48	<!-- Radio Section -->
49	<div v-if="activeTab === 'radio'">
50	<TestingRadio />
51	</div>
52
53	<!-- Button Section -->
54	<div v-if="activeTab === 'button'">
55	<TestingButton />
56	</div>
57
58	<!-- Alert Section -->
59	<div v-if="activeTab === 'alert'">
60	<TestingAlert />
61	</div>
62
63	<!-- Toggle Section -->
64	<div v-if="activeTab === 'toggle'">
65	<TestingToggle />
66	</div>
67
68	<!-- Checkbox Section -->
69	<div v-if="activeTab === 'checkbox'">
70	<TestingCheckbox />
71	</div>
72
73	<!-- Link Section -->
74	<div v-if="activeTab === 'link'">
75	<TestingLink />
76	</div>
77
78	<!-- Search Section -->
79	<div v-if="activeTab === 'search'">
80	<TestingSearch />
81	</div>
82
83	<!-- Popover Section -->
84	<div v-if="activeTab === 'popover'">
85	<TestingPopover />
86	</div>
87
88	<!-- Dialog Section -->
89	<div v-if="activeTab === 'dialog'">
90	<TestingDialog />
91	</div>
92
93	<!-- FAB Options Section -->
94	<div v-if="activeTab === 'fab'">
95	<TestingFAB />
96	</div>
97
98	<!-- Context Menu Section -->
99	<div v-if="activeTab === 'context-menu'">
100	<TestingContextMenu />
101	</div>
102
103	<!-- Message Section -->
104	<div v-if="activeTab === 'message'">
105	<TestingMessage />
106	</div>
107
108	<!-- SubDialog Section -->
109	<div v-if="activeTab === 'subdialog'">
110	<TestingSubdialog />
111	</div>
112
113	<!-- Inputs Section -->
114	<div v-if="activeTab === 'inputs'">
115	<TestingInputs />
116	</div>
117
118	<!-- Editor Section -->
119	<div v-if="activeTab === 'editor'">
120	<TestingHtmlEditor />
121	</div>
122	</div>
123	</div>
124	</template>
125
126	<script setup lang="ts">
127	import { ref, provide } from 'vue'
128	import TestingToggle from '@/views/admin/testing/testing-page/TestingToggle.vue'
129	import TestingSearch from '@/views/admin/testing/testing-page/TestingSearch.vue'
130	import TestingMessage from '@/views/admin/testing/testing-page/TestingMessage.vue'
131	import TestingSubdialog from '@/views/admin/testing/testing-page/TestingSubdialog.vue'
132
133	const activeTab = ref('message')
134
135	const title = 'Testing'
136	provide('pageTitle', title)
137	</script>
138
139	<style lang="scss">
140	[class$='-controls']$='-controls'] {
141	margin-bottom: 20px;
142	padding: 10px;
143	border: 1px solid #ddd;
144	border-radius: 6px;
145	display: flex;
146	flex-direction: column;
147	gap: 20px;
148	flex-grow: 1;
149	}
150
151	h3 {
152	justify-content: center;
153	display: flex;
154	}
155
156	hr {
157	margin: 20px 0;
158	border: none;
159	border-top: 1px solid #ddd;
160	}
161
162	.tab-content {
163	display: flex;
164	align-items: center;
165	justify-content: center;
166	}
167	</style>
168