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

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

165 lines 4.1 KB

Raw Download Zip

1	<template>
2	<div>
3	<h3>Checkbox Props Controls</h3>
4	<div class="checkbox-controls">
5	<!-- Label Position -->
6	<label>
7	Label Position:
8	<select v-model="labelPosition">
9	<option value="left">Left</option>
10	<option value="right">Right</option>
11	</select>
12	</label>
13
14	<!-- Description -->
15	<label>
16	Description:
17	<input v-model="description" placeholder="Enter description" />
18	</label>
19
20	<!-- Priority -->
21	<label>
22	Priority:
23	<select v-model="priority">
24	<option value="primary">Primary</option>
25	<option value="secondary">Secondary</option>
26	<option value="amber">Amber</option>
27	</select>
28	</label>
29
30	<!-- Size -->
31	<label>
32	Size:
33	<select v-model="size">
34	<option value="s">Small</option>
35	<option value="d">Default (medium)</option>
36	<option value="l">Large</option>
37	<option value="xl">Extra Large</option>
38	</select>
39	</label>
40
41	<!-- Style -->
42	<label>
43	Style:
44	<select v-model="type">
45	<option value="checkmark">Checkmark</option>
46	<option value="withMarker">With Marker</option>
47	</select>
48	</label>
49
50	<!-- Indeterminate -->
51	<label>
52	Indeterminate:
53	<input v-model="indeterminate" type="checkbox" />
54	</label>
55	<!-- Checkbox Group -->
56	<label>
57	Use Checkbox Group:
58	<input v-model="useCheckboxGroup" type="checkbox" />
59	</label>
60	</div>
61	<hr />
62
63	<!-- Checkbox Preview -->
64	<div class="checkbox-preview">
65	<h3>Checkbox Preview</h3>
66
67	<!-- Checkbox or Checkbox Group based on the toggle -->
68	<div v-if="!useCheckboxGroup">
69	<IvyCheckbox
70	v-model="checkboxValue"
71	:label-position="labelPosition"
72	:description="description"
73	:priority="priority"
74	:size="size"
75	:type="type"
76	:indeterminate="indeterminate"
77	>
78	Sample Checkbox
79	</IvyCheckbox>
80	</div>
81
82	<div v-else>
83	<IvyCheckboxGroup v-model="checkboxGroupValue">
84	<IvyCheckbox
85	:label-position="labelPosition"
86	:description="description"
87	:priority="priority"
88	:size="size"
89	:type="type"
90	value="checkbox1"
91	:indeterminate="indeterminate"
92	>
93	Checkbox 1
94	</IvyCheckbox>
95	<IvyCheckbox
96	:label-position="labelPosition"
97	:description="description"
98	:priority="priority"
99	:size="size"
100	:type="type"
101	value="checkbox2"
102	:indeterminate="indeterminate"
103	>
104	Checkbox 2
105	</IvyCheckbox>
106	<IvyCheckbox
107	:label-position="labelPosition"
108	:description="description"
109	:priority="priority"
110	:size="size"
111	:type="type"
112	value="checkbox3"
113	disabled
114	:indeterminate="indeterminate"
115	>
116	Checkbox 3
117	</IvyCheckbox>
118	</IvyCheckboxGroup>
119	</div>
120	</div>
121	</div>
122	</template>
123
124	<script setup lang="ts">
125	import { ref } from 'vue'
126	import IvyCheckbox from '@/views/_components/checkbox/IvyCheckbox.vue'
127	import IvyCheckboxGroup from '@/views/_components/checkbox/IvyCheckboxGroup.vue'
128
129	const checkboxValue = ref(false)
130	const checkboxGroupValue = ref<string[]>([])
131
132	const labelPosition = ref<'left' \| 'right'>('left')
133	const description = ref('')
134	const priority = ref<'primary' \| 'secondary' \| 'amber'>('primary')
135	const size = ref<'s' \| 'd' \| 'l' \| 'xl'>('d')
136	const type = ref<'checkmark' \| 'withMarker'>('checkmark')
137	const useCheckboxGroup = ref(false)
138	const indeterminate = ref(false)
139	</script>
140
141	<style scoped>
142	.checkbox-controls {
143	margin-bottom: 20px;
144	padding: 10px;
145	border: 1px solid #ddd;
146	border-radius: 6px;
147	}
148	.checkbox-controls label {
149	display: block;
150	margin-bottom: 10px;
151	}
152
153	.checkbox-preview {
154	margin-top: 20px;
155	}
156	.checkbox-preview h3 {
157	margin-bottom: 20px;
158	}
159	hr {
160	margin: 20px 0;
161	border: none;
162	border-top: 1px solid #ddd;
163	}
164	</style>
165