Skip to content

Commit 55bfbf6

Browse files
author
antoine
committed
Fix inline checkboxes, closes #154 
1 parent e9e4b19 commit 55bfbf6

File tree

5 files changed

+118
-108
lines changed

5 files changed

+118
-108
lines changed

‎resources/assets/js/__tests__/__snapshots__/Select.test.js.snap‎

Lines changed: 62 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,56 @@
33
exports[`select-field can mount "read only" Select field as checkboxes list 1`] = `
44
<div id="app">
55
<div class="SharpSelect SharpSelect--multiple SharpSelect--list">
6-
<span class="SharpSelect__item SharpSelect__item--inline">
7-
<div class="SharpCheck">
8-
<label class="SharpCheck__label">
9-
<input type="checkbox" disabled="disabled" class="SharpCheck__input">
10-
<span class="SharpCheck__appearance">
11-
<svg width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd" class="SharpCheck__checkmark">
12-
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
13-
</svg>
14-
</span>
15-
<span class="SharpCheck__label-text">AAA</span>
16-
</label>
6+
<div class="SharpSelect__group">
7+
<div class="SharpSelect__item SharpSelect__item--inline">
8+
<div class="SharpCheck">
9+
<label class="SharpCheck__label">
10+
<input type="checkbox" disabled="disabled" class="SharpCheck__input">
11+
<span class="SharpCheck__appearance">
12+
<svg width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd" class="SharpCheck__checkmark">
13+
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
14+
</svg>
15+
</span>
16+
<span class="SharpCheck__label-text">AAA</span>
17+
</label>
18+
</div>
1719
</div>
18-
</span>
19-
<span class="SharpSelect__item SharpSelect__item--inline">
20-
<div class="SharpCheck">
21-
<label class="SharpCheck__label">
22-
<input type="checkbox" disabled="disabled" class="SharpCheck__input">
23-
<span class="SharpCheck__appearance">
24-
<svg width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd" class="SharpCheck__checkmark">
25-
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
26-
</svg>
27-
</span>
28-
<span class="SharpCheck__label-text">BBB</span>
29-
</label>
20+
<div class="SharpSelect__item SharpSelect__item--inline">
21+
<div class="SharpCheck">
22+
<label class="SharpCheck__label">
23+
<input type="checkbox" disabled="disabled" class="SharpCheck__input">
24+
<span class="SharpCheck__appearance">
25+
<svg width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd" class="SharpCheck__checkmark">
26+
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
27+
</svg>
28+
</span>
29+
<span class="SharpCheck__label-text">BBB</span>
30+
</label>
31+
</div>
3032
</div>
31-
</span>
33+
</div>
3234
</div>
3335
</div>
3436
`;
3537
3638
exports[`select-field can mount "read only" Select field as radios list 1`] = `
3739
<div id="app">
3840
<div class="SharpSelect SharpSelect--list">
39-
<div class="SharpSelect__radio-button-group">
40-
<span class="SharpSelect__item SharpSelect__item--inline">
41+
<div class="SharpSelect__group">
42+
<div class="SharpSelect__item SharpSelect__item--inline">
4143
<input type="radio" tabindex="0" id="select0" disabled="disabled" name="select" class="SharpRadio" value="3">
4244
<label for="select0" class="SharpRadio__label">
4345
<span class="SharpRadio__appearance"></span>
4446
AAA
4547
</label>
46-
</span>
47-
<span class="SharpSelect__item SharpSelect__item--inline">
48+
</div>
49+
<div class="SharpSelect__item SharpSelect__item--inline">
4850
<input type="radio" tabindex="0" id="select1" disabled="disabled" name="select" class="SharpRadio" value="4">
4951
<label for="select1" class="SharpRadio__label">
5052
<span class="SharpRadio__appearance"></span>
5153
BBB
5254
</label>
53-
</span>
55+
</div>
5456
</div>
5557
</div>
5658
</div>
@@ -104,54 +106,56 @@ exports[`select-field can mount Select field 1`] = `
104106
exports[`select-field can mount Select field as checkboxes list 1`] = `
105107
<div id="app">
106108
<div class="SharpSelect SharpSelect--multiple SharpSelect--list">
107-
<span class="SharpSelect__item SharpSelect__item--inline">
108-
<div class="SharpCheck">
109-
<label class="SharpCheck__label">
110-
<input type="checkbox" class="SharpCheck__input">
111-
<span class="SharpCheck__appearance">
112-
<svg width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd" class="SharpCheck__checkmark">
113-
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
114-
</svg>
115-
</span>
116-
<span class="SharpCheck__label-text">AAA</span>
117-
</label>
109+
<div class="SharpSelect__group">
110+
<div class="SharpSelect__item SharpSelect__item--inline">
111+
<div class="SharpCheck">
112+
<label class="SharpCheck__label">
113+
<input type="checkbox" class="SharpCheck__input">
114+
<span class="SharpCheck__appearance">
115+
<svg width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd" class="SharpCheck__checkmark">
116+
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
117+
</svg>
118+
</span>
119+
<span class="SharpCheck__label-text">AAA</span>
120+
</label>
121+
</div>
118122
</div>
119-
</span>
120-
<span class="SharpSelect__item SharpSelect__item--inline">
121-
<div class="SharpCheck">
122-
<label class="SharpCheck__label">
123-
<input type="checkbox" class="SharpCheck__input">
124-
<span class="SharpCheck__appearance">
125-
<svg width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd" class="SharpCheck__checkmark">
126-
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
127-
</svg>
128-
</span>
129-
<span class="SharpCheck__label-text">BBB</span>
130-
</label>
123+
<div class="SharpSelect__item SharpSelect__item--inline">
124+
<div class="SharpCheck">
125+
<label class="SharpCheck__label">
126+
<input type="checkbox" class="SharpCheck__input">
127+
<span class="SharpCheck__appearance">
128+
<svg width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd" class="SharpCheck__checkmark">
129+
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
130+
</svg>
131+
</span>
132+
<span class="SharpCheck__label-text">BBB</span>
133+
</label>
134+
</div>
131135
</div>
132-
</span>
136+
</div>
133137
</div>
134138
</div>
135139
`;
136140
137141
exports[`select-field can mount Select field as radios list 1`] = `
138142
<div id="app">
139143
<div class="SharpSelect SharpSelect--list">
140-
<div class="SharpSelect__radio-button-group">
141-
<span class="SharpSelect__item SharpSelect__item--inline">
144+
<div class="SharpSelect__group">
145+
<div class="SharpSelect__item SharpSelect__item--inline">
142146
<input type="radio" tabindex="0" id="select0" name="select" class="SharpRadio" value="3">
143147
<label for="select0" class="SharpRadio__label">
144148
<span class="SharpRadio__appearance"></span>
145149
AAA
146150
</label>
147-
</span>
148-
<span class="SharpSelect__item SharpSelect__item--inline">
151+
</div>
152+
<div class="SharpSelect__item SharpSelect__item--inline">
149153
<input type="radio" tabindex="0" id="select1" name="select" class="SharpRadio" value="4">
150154
<label for="select1" class="SharpRadio__label">
151155
<span class="SharpRadio__appearance"></span>
152156
BBB
153157
</label>
154-
</span>
158+
</div>
155159
</div>
156160
</div>
157161
</div>

‎resources/assets/js/components/form/fields/Select.vue‎

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -34,43 +34,39 @@
3434
<slot name="option" slot="option"></slot>
3535
</sharp-multiselect>
3636
<template v-else>
37-
<template v-if="multiple">
38-
<component :is="inline?'span':'div'"
39-
v-for="option in options"
40-
:key="option.id"
41-
class="SharpSelect__item"
42-
:class="{'SharpSelect__item--inline':inline}"
43-
>
44-
<sharp-check :value="checked(option.id)"
45-
:text="optionsLabel[option.id]"
46-
:read-only="readOnly"
47-
@input="handleCheckboxChanged($event,option.id)">
48-
</sharp-check>
49-
</component>
50-
</template>
51-
<div v-else class="SharpSelect__radio-button-group" :class="{'SharpSelect__radio-button-group--block':!inline}">
52-
<component :is="inline?'span':'div'"
53-
v-for="(option, index) in options"
54-
:key="option.id"
55-
class="SharpSelect__item"
56-
:class="{'SharpSelect__item--inline':inline}"
57-
>
58-
<input type="radio"
59-
class="SharpRadio"
60-
tabindex="0"
61-
:id="`${uniqueIdentifier}${index}`"
62-
:checked="value===option.id"
63-
:value="option.id"
64-
:disabled="readOnly"
65-
:name="uniqueIdentifier"
66-
@change="handleRadioChanged(option.id)"
67-
>
68-
<label class="SharpRadio__label" :for="`${uniqueIdentifier}${index}`">
69-
<span class="SharpRadio__appearance"></span>
70-
{{ optionsLabel[option.id] }}
71-
</label>
72-
73-
</component>
37+
<div class="SharpSelect__group" :class="{'SharpSelect__group--block':!inline}">
38+
<template v-if="multiple">
39+
<template v-for="option in options">
40+
<div class="SharpSelect__item" :class="itemClasses" :key="option.id">
41+
<SharpCheck
42+
:value="checked(option.id)"
43+
:text="optionsLabel[option.id]"
44+
:read-only="readOnly"
45+
@input="handleCheckboxChanged($event,option.id)"
46+
/>
47+
</div>
48+
</template>
49+
</template>
50+
<template v-else>
51+
<template v-for="(option, index) in options">
52+
<div class="SharpSelect__item" :class="itemClasses" :key="option.id">
53+
<input type="radio"
54+
class="SharpRadio"
55+
tabindex="0"
56+
:id="`${uniqueIdentifier}${index}`"
57+
:checked="value===option.id"
58+
:value="option.id"
59+
:disabled="readOnly"
60+
:name="uniqueIdentifier"
61+
@change="handleRadioChanged(option.id)"
62+
>
63+
<label class="SharpRadio__label" :for="`${uniqueIdentifier}${index}`">
64+
<span class="SharpRadio__appearance"></span>
65+
{{ optionsLabel[option.id] }}
66+
</label>
67+
</div>
68+
</template>
69+
</template>
7470
</div>
7571
</template>
7672
</div>
@@ -147,7 +143,12 @@
147143
map[opt.id] = this.localizedOptionLabel(opt);
148144
return map;
149145
}, {});
150-
}
146+
},
147+
itemClasses() {
148+
return {
149+
'SharpSelect__item--inline': this.inline,
150+
}
151+
},
151152
},
152153
methods: {
153154
remove() {

‎resources/assets/sass/_vars.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,6 @@ $dropdown-focus-border-color: $brand-01-light;
3737
$dropdown-hover-border-color: lighten($dropdown-focus-border-color, 25%);
3838
$dropdown-list-offset: 3px;
3939
$dropdown-btn-transition: all 100ms ease-in-out;
40-
$dropdown-item-transition: background 50ms ease-in-out;
40+
$dropdown-item-transition: background 50ms ease-in-out;
41+
42+
$checkbox-inline-margin-bottom: .3rem;

‎resources/assets/sass/components/form/_Radio.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
height: rem(18px);
1616
width: rem(18px);
1717
min-width: rem(18px);
18-
margin-right: rem(10px);
18+
margin-right: .5rem;
1919
}
2020
}
2121

‎resources/assets/sass/components/form/_Select.scss‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
&--list {
44
background: $ui-03;
55
padding: 1rem;
6+
overflow: hidden;
67
}
78

89
&__clear-button {
@@ -18,26 +19,28 @@
1819
padding-right: 2rem;
1920
}
2021

21-
&__radio-button-group {
22+
&__group {
2223
display: flex;
23-
//flex-flow: row wrap;
24+
flex-wrap: wrap;
2425
align-items: center;
25-
//margin-top: rem(6px);
26-
26+
margin-bottom: -$checkbox-inline-margin-bottom;
2727
&--block {
2828
display: block;
29+
margin-bottom: 0;
2930
}
3031
}
3132

3233
&__item {
33-
margin-top: .3rem;
34-
&:first-child, &--inline {
35-
margin-top: 0;
34+
margin-bottom: .3rem;
35+
&:last-child {
36+
margin-bottom: 0;
3637
}
3738
&--inline {
38-
margin-left: 1rem;
39-
&:first-child {
40-
margin-left: 0;
39+
margin-right: 1rem;
40+
margin-bottom: $checkbox-inline-margin-bottom;
41+
&:last-child {
42+
margin-right: 0;
43+
margin-bottom: $checkbox-inline-margin-bottom;
4144
}
4245
}
4346
}

0 commit comments

Comments
 (0)