132 lines
2.7 KiB
Vue
132 lines
2.7 KiB
Vue
<template>
|
|
<div
|
|
:class="[
|
|
cn.b(),
|
|
cn.is('checked', checked),
|
|
cn.is('invalid', invalid),
|
|
cn.is('disabled', disabled),
|
|
cn.is('focused', focused),
|
|
]"
|
|
@click="handleChange"
|
|
>
|
|
<UiIconSCheck :class="[cn.e('checkmark')]" />
|
|
|
|
<p :class="[cn.e('label')]">
|
|
<slot v-bind="{ checked }">
|
|
{{ label }}
|
|
</slot>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
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: 'CheckboxButton',
|
|
})
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
disabled: false,
|
|
trueValue: true,
|
|
falseValue: false,
|
|
required: false,
|
|
modelValue: undefined,
|
|
})
|
|
const slots = useSlots()
|
|
const { checked, invalid, focused, handleChange } = useCheckbox(props, slots)
|
|
|
|
const cn = useClassname('checkbox-button')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.checkbox-button {
|
|
$self: &;
|
|
|
|
@include txt-i-m;
|
|
|
|
--border-color: #{$clr-grey-300};
|
|
--border-width: 1px;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 40px;
|
|
padding: 8px 16px;
|
|
border-radius: 12px;
|
|
outline: var(--border-width) solid var(--border-color);
|
|
outline-offset: calc(var(--border-width) * -1);
|
|
cursor: pointer;
|
|
transition: .2s ease-out;
|
|
transition-property: outline-color, background-color, color;
|
|
user-select: none;
|
|
|
|
&:hover {
|
|
--border-color: transparent;
|
|
|
|
background-color: $clr-grey-200;
|
|
}
|
|
|
|
&.is-checked {
|
|
--border-color: transparent;
|
|
|
|
background-color: $clr-cyan-500;
|
|
color: $clr-white;
|
|
|
|
&:hover {
|
|
background-color: $clr-cyan-400;
|
|
}
|
|
}
|
|
|
|
//&.is-invalid {
|
|
// --border-color: var(--checkbox-invalid-border-color);
|
|
//}
|
|
|
|
&.is-disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&__checkmark {
|
|
--border-color: var(--checkbox-border-color);
|
|
--border-width: 1px;
|
|
|
|
width: var(--size);
|
|
height: var(--size);
|
|
border-radius: 4px;
|
|
outline: var(--border-width) solid var(--border-color);
|
|
outline-offset: calc(var(--border-width) * -1);
|
|
color: transparent;
|
|
cursor: pointer;
|
|
transition: .2s ease-out;
|
|
transition-property: outline-color, background-color, color;
|
|
margin-right: 8px;
|
|
|
|
#{$self}.has-label & {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
#{$self}.is-checked & {
|
|
--border-width: 0;
|
|
|
|
color: var(--checkbox-checked-color);
|
|
background-color: var(--checkbox-checked-background);
|
|
}
|
|
|
|
#{$self}.is-disabled & {
|
|
--border-color: var(--checkbox-disabled-border-color);
|
|
}
|
|
|
|
#{$self}.is-disabled.is-checked & {
|
|
color: var(--checkbox-disabled-checked-color);
|
|
}
|
|
}
|
|
}
|
|
</style>
|