8000 Adds Multiple Checkbox support · engageinteractive/laravel@411c09f · GitHub
[go: up one dir, main page]
Skip to content

Commit 411c09f

Browse files
slatermattslatermatt
committed
Adds Multiple Checkbox support
1 parent f5ad58d commit 411c09f

File tree

7 files changed

+143
-43
lines changed

7 files changed

+143
-43
lines changed

‎resources/assets/js/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { createApp } from 'vue';
33
import './etc/validators';
44

55
import Button from './components/common/Button';
6-
import Form from './components/common/form';
6+
import Form from './components/common/Form';
77
import Icon from './components/common/Icon';
88
import Placeholder from './components/common/Placeholder';
99

‎resources/assets/js/components/common/form/Checkbox/MultipleCheckboxes.vue

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<script setup>
2+
import { Field as RenderlessCheckbox } from 'vee-validate';
3+
import VisuallyChecked from './VisuallyChecked';
4+
import ErrorText from '../ErrorText';
5+
6+
defineProps({
7+
label: {
8+
type: String,
9+
required: true,
10+
},
11+
12+
name: {
13+
type: String,
14+
required: true,
15+
},
16+
17+
options: {
18+
type: Array,
19+
required: true,
20+
},
21+
22+
rules: {
23+
type: String,
24+
default: null,
25+
},
26+
27+
validationName: {
28+
type: String,
29+
default: null,
30+
},
31+
});
32+
</script>
33+
34+
<template>
35+
<div class="flex flex-col gap-y-2">
36+
<span v-text="label" />
37+
38+
<div class="flex flex-col gap-y-2">
39+
<renderless-checkbox
40+
v-for="(option, index) in options"
41+
:key="index"
42+
v-slot="{ field }"
43+
type="checkbox"
44+
:name="name"
45+
:label="validationName || label"
46+
:value="option.value"
47+
:rules="rules"
48+
>
49+
<label class="flex items-center gap-x-1">
50+
<input
51+
:name="name"
52+
type="checkbox"
53+
v-bind="field"
54+
class="peer sr-only"
55+
:value="option.value"
56+
>
57+
58+
<visually-checked :checked="field.checked" />
59+
60+
<span v-text="option.label" />
61+
</label>
62+
</renderless-checkbox>
63+
</div>
64+
65+
<error-text :name="name" />
66+
</div>
67+
</template>

‎resources/assets/js/components/common/form/Checkbox.vue renamed to ‎resources/assets/js/components/common/form/Checkbox/SingleCheckbox.vue

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup>
22
import { useField } from 'vee-validate';
3-
4-
import ErrorText from './ErrorText';
3+
import VisuallyChecked from './VisuallyChecked';
4+
import ErrorText from '../ErrorText';
55
66
const props = defineProps({
77
label: {
@@ -42,35 +42,7 @@
4242
class="peer sr-only"
4343
>
4444

45-
<div
46-
:class="[
47-
'relative flex-shrink-0 w-8 h-8 mr-2',
48-
'peer-focus:ring-2 peer-focus:ring-focus',
49-
]"
50-
>
51-
&nbsp;
52-
53-
<div class="absolute top-1/2 left-0 w-full pt-full transform -translate-y-1/2">
54-
<div
55-
:class="[
56-
'flex items-center justify-center absolute inset-0',
57-
'bg-grey-100 border-1 border-grey-900',
58-
{
59-
'bg-grey-200': value,
60-
},
61-
]"
62-
>
63-
<e-icon
64-
:class="[
65-
'transform transition-transform duration-200 ease-out-cubic',
66-
value ? 'scale-90' : 'scale-0',
67-
]"
68-
size="w-full h-full"
69-
name="check"
70-
/>
71-
</div>
72-
</div>
73-
</div>
45+
<visually-checked :checked="value" />
7446

7547
<span
7648
class="self-center"

‎resources/assets/js/components/common/form/Checkbox/VisuallyChecked.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script setup>
2+
defineProps({
3+
checked: Boolean,
4+
});
5+
</script>
6+
<template>
7+
<div
8+
:class="[
9+
'relative flex-shrink-0 w-8 h-8 mr-2',
10+
'peer-focus:ring-2 peer-focus:ring-focus',
11+
]"
12+
>
13+
&nbsp;
14+
15+
<div class="absolute top-1/2 left-0 w-full pt-full transform -translate-y-1/2">
16+
<div
17+
:class="[
18+
'flex items-center justify-center absolute inset-0',
19+
'bg-grey-100 border-1 border-grey-900',
20+
{
21+
'bg-grey-200': checked,
22+
},
23+
]"
24+
>
25+
<e-icon
26+
:class="[
27+
'transform transition-transform duration-200 ease-out-cubic',
28+
checked ? 'scale-90' : 'scale-0',
29+
]"
30+
size="w-full h-full"
31+
name="check"
32+
/>
33+
</div>
34+
</div>
35+
</div>
36+
</template>

‎resources/assets/js/components/common/form/Checkbox/index.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup>
2+
import { useAttrs, computed } from 'vue';
3+
4+
import SingleCheckbox from './SingleCheckbox';
5+
import MultipleCheckboxes from './MultipleCheckboxes';
6+
7+
const attrs = useAttrs();
8+
const element = computed(() => (attrs.options ? MultipleCheckboxes : SingleCheckbox));
9+
</script>
10+
11+
<script>
12+
export default {
13+
name: 'ECheckbox',
14+
};
15+
</script>
16+
17+
<template>
18+
<component
19+
:is="element"
20+
v-bind="$attrs"
21+
/>
22+
</template>

‎resources/assets/js/components/common/form/index.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
3838
const {
3939
handleSubmit,
40-
// values,
40+
values,
4141
errors,
4242
} = useForm({
4343
initialValues: props.values || null,
@@ -67,13 +67,15 @@
6767
</script>
6868
6969
<template>
70-
<pre>
70+
<pre class="hidden">
7171
frontend errors: {{ errors }}<br>
7272
server errors: {{ fieldErrors }}<br>
7373
server errorMessage: {{ errorMessage }}<br>
7474
hasErrors: {{ hasErrors }}<br>
7575
</pre>
7676
77+
<pre v-text="values" />
78+
7779
<pre
7880
v-if="response"
7981
v-text="response"

‎resources/views/templates/styleguide.blade.php

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -202,23 +202,24 @@
202202
'rules' => 'required',
203203
],
204204
[
205-
'as' => 'radio',
206-
'label' => 'Activity',
207-
'name' => 'activity',
205+
'as' => 'checkbox',
206+
'label' => 'Your favourite fruit',
207+
'name' => 'fruit',
208208
'options' => [
209209
[
210-
'value' => 'walking',
211-
'label' => 'Walking',
210+
'value' => 'apple',
211+
'label' => 'Apple',
212212
],
213213
[
214-
'value' => 'running',
215-
'label' => 'Running',
214+
'value' => 'pear',
215+
'label' => 'Pear',
216216
],
217217
[
218-
'value' => 'climbing',
219-
'label' => 'Climbing',
218+
'value' => 'orange',
219+
'label' => 'Orange',
220220
],
221221
],
222+
'validation-name' => 'foo',
222223
'rules' => 'required',
223224
],
224225
[

0 commit comments

Comments
 (0)
0