75 lines
1.5 KiB
Vue
75 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
:class="[
|
|
cn.b(),
|
|
cn.is('checked', checked),
|
|
cn.is('invalid', invalid),
|
|
cn.is('disabled', disabled),
|
|
cn.is('focused', focused),
|
|
cn.has('label', hasLabel),
|
|
]"
|
|
>
|
|
<label :class="[cn.e('wrapper')]">
|
|
<input
|
|
:name="id"
|
|
:class="[cn.e('input')]"
|
|
type="checkbox"
|
|
:disabled="disabled"
|
|
:checked="checked"
|
|
@focus="focused = true"
|
|
@blur="focused = false"
|
|
@change="handleChange"
|
|
>
|
|
|
|
<UiIconSCheck :class="[cn.e('checkmark')]" />
|
|
|
|
<p :class="[cn.e('label')]">
|
|
<slot>{{ label }}</slot>
|
|
</p>
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useSlots } from 'vue'
|
|
import useClassname from '../../composables/use-classname'
|
|
|
|
export interface Props {
|
|
id: string
|
|
label?: string
|
|
disabled?: boolean
|
|
modelValue?: boolean | string | number
|
|
trueValue?: boolean | string | number
|
|
falseValue?: boolean | string | number
|
|
required?: boolean
|
|
}
|
|
|
|
defineOptions({
|
|
name: 'UiCheckbox',
|
|
})
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
disabled: false,
|
|
trueValue: true,
|
|
falseValue: false,
|
|
required: false,
|
|
modelValue: undefined,
|
|
})
|
|
|
|
defineEmits<{
|
|
'update:modelValue': [state: boolean | string | number]
|
|
focus: []
|
|
blur: []
|
|
}>()
|
|
|
|
const slots = useSlots()
|
|
|
|
const cn = useClassname('ui-checkbox')
|
|
|
|
const { checked, invalid, focused, hasLabel, handleChange } = useCheckbox(props, slots)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use 'styles';
|
|
</style>
|