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

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

202 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 icons from '@/views/_components/icon/iconImports.js'
135	import { computed, ref } from 'vue'
136	import IvyButtonAction from '@/views/_components/button/IvyButtonAction.vue'
137
138	const priority = ref<
139	'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'warning' \| 'danger' \| 'white' \| 'shadow-white'
140	>('primary')
141	const size = ref<'l' \| 'd' \| 's' \| 'xs'>('d')
142	const type = ref<'fill' \| 'border' \| 'ghost'>('fill')
143	const iconStart = ref<string>('')
144	const iconStartType = ref<'fill' \| 'outline'>('fill')
145	const iconEnd = ref<string>('')
146	const iconEndType = ref<'fill' \| 'outline'>('fill')
147	const fullWidth = ref<boolean>(false)
148	const iconOnly = ref<boolean>(false)
149	const disabled = ref<boolean>(false)
150	const loading = ref<boolean>(false)
151
152	const activeButtonTab = ref('button-controls')
153
154	const iconCategories = ['arrows', 'flags', 'global', 'security']
155
156	interface IconNames {
157	[key: string]: string[]
158	}
159
160	const iconNames = computed<IconNames>(() => {
161	const names: IconNames = {}
162	iconCategories.forEach((category) => {
163	names[category] = Object.keys(icons[category]).flatMap((type) =>
164	Object.keys(icons[category][type]).map((name) => name.replace('.svg', '')),
165	)
166	})
167	return names
168	})
169	const resetInputs = () => {
170	priority.value = 'primary'
171	size.value = 'd'
172	type.value = 'fill'
173	iconStart.value = ''
174	iconStartType.value = 'fill'
175	iconEnd.value = ''
176	iconEndType.value = 'fill'
177	fullWidth.value = false
178	iconOnly.value = false
179	disabled.value = false
180	loading.value = false
181	}
182	</script>
183
184	<style lang="scss">
185	.button-controls {
186	margin-bottom: 20px;
187	padding: 10px;
188	border: 1px solid #ddd;
189	border-radius: 6px;
190	display: flex;
191	flex-direction: column;
192	gap: 20px;
193	flex-grow: 1;
194	}
195
196	.button-preview {
197	display: flex;
198	align-items: center;
199	justify-content: center;
200	}
201	</style>
202