Skip to content

Commit 1a15857

Browse files
atomjoyatomjoy
authored
Toggle checkbox onoff
1 parent df35ad8 commit 1a15857

File tree

5 files changed

+106
-3
lines changed

5 files changed

+106
-3
lines changed

‎input/CheckboxOnOff.vue‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<div class="input-group">
3+
<div class="checkbox-line">
4+
<label v-if="props.label" :for="props.name">{{ props.label }} <slot></slot></label>
5+
<input class="checkbox checkbox-checkmark-onoff" type="checkbox" :value="props.value" :name="props.name" v-model="props.modelValue" @change="emits('update:modelValue', props.modelValue)" />
6+
<div :class="{ 'checkmark-onoff': true, 'checkmark-onoff-checked': checked }">
7+
<div class="dot"></div>
8+
</div>
9+
</div>
10+
</div>
11+
</template>
12+
13+
<script setup>
14+
import { computed } from 'vue'
15+
16+
const emits = defineEmits(['update:modelValue', 'change'])
17+
const props = defineProps({
18+
name: { type: String },
19+
modelValue: { type: [Array, Boolean] },
20+
value: { type: String, required: true },
21+
label: { type: String, required: true },
22+
})
23+
24+
const checked = computed(() => {
25+
if (props.modelValue instanceof Array) {
26+
return props.modelValue.includes(props.value)
27+
}
28+
return props.modelValue
29+
})
30+
</script>
31+
32+
<style>
33+
@import './css/input-root.css';
34+
</style>
35+
36+
<style scoped>
37+
@import './css/input.css';
38+
</style>
39+
40+
<!--
41+
42+
// Multiple Array with strings values
43+
let money = ref(['card','cash']) // Default selected in array
44+
45+
<Checkbox label="Cash" value="cash" v-model="money" name="pay_cash" />
46+
<Checkbox label="Card" value="card" v-model="money" name="pay_card" />
47+
48+
// Single (true|false)
49+
let remember_me = ref(true)
50+
51+
<Checkbox label="Remember me 1" value="1" v-model="remember_me" name="remember_me" />
52+
53+
-->

‎input/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Vue3 input components
1+
# Vue3 form field components
22

33
Vue3 form field components with search and passowrd validation.
44

@@ -9,7 +9,7 @@ Vue3 form field components with search and passowrd validation.
99
- Select (search)
1010
- Password (validation)
1111
- Radiobox (select one)
12-
- Checkbox (multiple, single)
12+
- Checkbox (multiple, single, onoff toggle)
1313
- Phone prefix (flags emoji, country name, country code)
1414

1515
## Import fonts

‎input/css/input-root.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
--wow-font-size: 18px;
55
--wow-bg: #fff;
66
--wow-input-bg: #f6f6f6;
7+
--wow-checkbox-shadow: #27284815;
78
--wow-accent: #024ef9;
89
--wow-accent-light: #024ef922;
910
--wow-color: #272848;

‎input/css/input.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,51 @@ option {
359359
border: 1px solid var(--wow-accent);
360360
} */
361361

362+
/* Checkbox onoff */
363+
364+
.checkbox-checkmark-onoff {
365+
min-height: 45px;
366+
min-width: 80px;
367+
right: 5px;
368+
}
369+
370+
.checkmark-onoff {
371+
float: left;
372+
box-sizing: border-box;
373+
height: 42px;
374+
width: 92px;
375+
padding: 5px;
376+
margin-left: 15px;
377+
background: var(--wow-input-bg);
378+
border: 1px solid var(--wow-border);
379+
border-radius: var(--wow-border-radius);
380+
transition: all 0.6s;
381+
overflow: hidden;
382+
}
383+
384+
.checkmark-onoff .dot {
385+
float: left;
386+
min-width: 30px;
387+
min-height: 30px;
388+
background: var(--wow-bg);
389+
border-radius: var(--wow-border-radius);
390+
border: 1px solid var(--wow-border);
391+
box-shadow: 0px 1px 3px var(--wow-checkbox-shadow);
392+
transition: all 0.6s;
393+
}
394+
395+
.checkmark-onoff-checked {
396+
background: var(--wow-accent-light);
397+
border: 1px solid var(--wow-accent);
398+
}
399+
400+
.checkmark-onoff-checked .dot {
401+
float: right;
402+
background: var(--wow-accent);
403+
border: 1px solid var(--wow-accent);
404+
transform: rotate(180deg);
405+
}
406+
362407
/* Radio */
363408

364409
.checkbox-line .radiomark,

‎input/example/DemoPageView.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Textarea from '@/components/input/Textarea.vue'
99
import SelectPrefix from '@/components/input/SelectPrefix.vue'
1010
import Checkbox from '@/components/input/Checkbox.vue'
1111
import Radiobox from '@/components/input/Radiobox.vue'
12+
import CheckboxOnOff from '@/components/input/CheckboxOnOff.vue'
1213
1314
// Input v-focus
1415
const vFocus = { mounted: (el) => el.focus() }
@@ -26,6 +27,7 @@ let radio = ref('')
2627
let select_country = ref(48)
2728
let select_code = ref(1)
2829
let select_name = ref('Ala')
30+
let lights = ref(false)
2931
3032
onMounted(() => {
3133
// Route
@@ -82,6 +84,8 @@ function onSubmit(e) {
8284

8385
<Textarea name="desc" v-model="textarea" placeholder="Some text" label="Description" />
8486

87+
<CheckboxOnOff label="Enable lights" value="1" v-model="lights" name="lights" />
88+
8589
<Checkbox label="Cash" value="cash" v-model="payment" name="pay_cash" />
8690
<Checkbox label="Card" value="card" v-model="payment" name="pay_card" />
8791

@@ -93,7 +97,7 @@ function onSubmit(e) {
9397

9498
<button class="button">Update</button>
9599

96-
<h4>{{ select_code }} {{ select_country }} {{ select_name }} {{ input }} {{ password }} {{ payment }} {{ remember_me }} {{ textarea }} {{ radio }}</h4>
100+
<h4>{{ lights }} | {{ select_code }} | {{ select_country }} | {{ select_name }} | {{ input }} | {{ password }} | {{ payment }} | {{ remember_me }} | {{ textarea }} | {{ radio }}</h4>
97101
</form>
98102
</template>
99103

0 commit comments

Comments
 (0)