66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
<script setup>
|
|
import { twMerge } from "tailwind-merge";
|
|
import { defineProps } from "vue";
|
|
|
|
const props = defineProps({
|
|
checked: Boolean,
|
|
disabled: Boolean,
|
|
title: String,
|
|
onClick: Function,
|
|
onChange: Function,
|
|
name: String,
|
|
value: String,
|
|
className: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<label
|
|
:class="
|
|
twMerge('cursor-pointer flex justify-center items-center my-0', className)
|
|
"
|
|
>
|
|
<input
|
|
:name="name || 'checkbox'"
|
|
type="checkbox"
|
|
class="checkbox checkbox-sm rounded-full checkbox-success"
|
|
:checked="checked"
|
|
:disabled="disabled"
|
|
:value="value"
|
|
@click.stop="
|
|
(e) => {
|
|
onClick && onClick();
|
|
}
|
|
"
|
|
@change.stop.prevent="
|
|
(e) => {
|
|
console.log('@', e.target.value, e.target.checked);
|
|
onChange && onChange(e.target.value, e.target.checked);
|
|
}
|
|
"
|
|
/>
|
|
<!-- <input
|
|
v-else
|
|
type="checkbox"
|
|
:name="name||'checkbox'"
|
|
:disabled="disabled"
|
|
class="checkbox checkbox-sm rounded-full checkbox-success mr-3"
|
|
@click.stop.prevent="
|
|
(e) => {
|
|
onClick && onClick();
|
|
}
|
|
"
|
|
/> -->
|
|
<span v-if="title" class="ml-3"> {{ title }}</span>
|
|
</label>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
.checkbox:disabled {
|
|
@apply bg-opacity-50;
|
|
}
|
|
</style>
|