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

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

213 lines 5.5 KB

Raw Download Zip

1	<template>
2	<div>
3	<IvyTabs
4	v-model="activeButtonTab"
5	type="tonal"
6	priority="primary"
7	:tabs="[
8	{ name: 'button-controls', label: 'Button controls' },
9	{ name: 'button-views', label: 'Button views' },
10	]"
11	/>
12	<div v-if="activeButtonTab === 'button-controls'">
13	<h3>Button Props Controls</h3>
14	<div class="button-controls">
15	<label>
16	Priority:
17	<select v-model="priority">
18	<option value="primary">Primary</option>
19	<option value="secondary">Secondary</option>
20	<option value="tertiary">Tertiary</option>
21	<option value="success">Success</option>
22	<option value="warning">Warning</option>
23	<option value="danger">Danger</option>
24	<option value="white">White</option>
25	<option value="shadow-white">Shadow White</option>
26	</select>
27	</label>
28
29	<label>
30	Size:
31	<select v-model="size">
32	<option value="l">Large</option>
33	<option value="d">Default</option>
34	<option value="s">Small</option>
35	<option value="xs">Extra Small</option>
36	</select>
37	</label>
38
39	<label>
40	Type:
41	<select v-model="type">
42	<option value="fill">Fill</option>
43	<option value="border">Border</option>
44	<option value="ghost">Ghost</option>
45	</select>
46	</label>
47
48	<label>
49	Icon Start:
50	<select v-model="iconStart">
51	<option v-for="icon in iconNames.global" :key="icon" :value="icon">{{ icon }}</option>
52	</select>
53	</label>
54
55	<label>
56	Icon Start Type:
57	<select v-model="iconStartType">
58	<option value="fill">Fill</option>
59	<option value="fill-duo">Fill Duo</option>
60	<option value="line">Line</option>
61	<option value="broken">Broken</option>
62	<option value="outline">Outline</option>
63	</select>
64	</label>
65
66	<label>
67	Icon End:
68	<select v-model="iconEnd">
69	<option v-for="icon in iconNames.global" :key="icon" :value="icon">{{ icon }}</option>
70	</select>
71	</label>
72
73	<label>
74	Icon End Type:
75	<select v-model="iconEndType">
76	<option value="fill">Fill</option>
77	<option value="fill-duo">Fill Duo</option>
78	<option value="line">Line</option>
79	<option value="broken">Broken</option>
80	<option value="outline">Outline</option>
81	</select>
82	</label>
83
84	<label>
85	Full Width:
86	<input v-model="fullWidth" type="checkbox" />
87	</label>
88
89	<label>
90	Icon Only:
91	<input v-model="iconOnly" type="checkbox" />
92	</label>
93
94	<label>
95	Disabled:
96	<input v-model="disabled" type="checkbox" />
97	</label>
98
99	<label>
100	Loading:
101	<input v-model="loading" type="checkbox" />
102	</label>
103
104	<IvyButtonAction priority="danger" @click="resetInputs">Reset</IvyButtonAction>
105	</div>
106
107	<h3>Button Component Preview</h3>
108	<div class="button-preview">
109	<IvyButtonAction
110	:priority="priority"
111	:size="size"
112	:type="type"
113	:icon-start="iconStart"
114	:icon-start-type="iconStartType"
115	:icon-end="iconEnd"
116	:icon-end-type="iconEndType"
117	:full-width="fullWidth"
118	:icon-only="iconOnly"
119	:disabled="disabled"
120	:loading="loading"
121	>
122	Test Button
123	</IvyButtonAction>
124	</div>
125	</div>
126
127	<div v-if="activeButtonTab === 'button-views'">
128	<TestingbuttonViews />
129	</div>
130	</div>
131	</template>
132
133	<script setup lang="ts">
134	import { ref } from 'vue'
135	import IvyButtonAction from '@/views/_components/button/IvyButtonAction.vue'
136
137	const priority = ref<
138	'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'warning' \| 'danger' \| 'white' \| 'shadow-white'
139	>('primary')
140	const size = ref<'l' \| 'd' \| 's' \| 'xs'>('d')
141	const type = ref<'fill' \| 'border' \| 'ghost'>('fill')
142	const iconStart = ref<string>('')
143	const iconStartType = ref<'fill' \| 'outline'>('fill')
144	const iconEnd = ref<string>('')
145	const iconEndType = ref<'fill' \| 'outline'>('fill')
146	const fullWidth = ref<boolean>(false)
147	const iconOnly = ref<boolean>(false)
148	const disabled = ref<boolean>(false)
149	const loading = ref<boolean>(false)
150
151	const activeButtonTab = ref('button-controls')
152
153	// Manually list some common icons for testing
154	// This is a testing page, so we just need a few examples
155	const iconNames = {
156	global: [
157	'archive',
158	'bell',
159	'calendar-dot',
160	'cart',
161	'check-circle',
162	'clock',
163	'close-circle',
164	'copy',
165	'edit',
166	'email',
167	'export',
168	'filter',
169	'image',
170	'info',
171	'link',
172	'search',
173	'settings',
174	'trash',
175	'user',
176	'warning',
177	],
178	}
179
180	const resetInputs = () => {
181	priority.value = 'primary'
182	size.value = 'd'
183	type.value = 'fill'
184	iconStart.value = ''
185	iconStartType.value = 'fill'
186	iconEnd.value = ''
187	iconEndType.value = 'fill'
188	fullWidth.value = false
189	iconOnly.value = false
190	disabled.value = false
191	loading.value = false
192	}
193	</script>
194
195	<style lang="scss">
196	.button-controls {
197	margin-bottom: 20px;
198	padding: 10px;
199	border: 1px solid #ddd;
200	border-radius: 6px;
201	display: flex;
202	flex-direction: column;
203	gap: 20px;
204	flex-grow: 1;
205	}
206
207	.button-preview {
208	display: flex;
209	align-items: center;
210	justify-content: center;
211	}
212	</style>
213