menduner/src/components/FormUI/checkbox/index.vue

<template>
  <div class="d-flex align-center">
    <div class="mr-5 color-999" :style="`width: ${item.width || 120}px;`">{{ item.label }}</div>
    <v-checkbox
      v-model="value"
      v-for="k in item.items"
      :key="k.key"
      :label="k.label"
      :value="k.value"
      :disabled="k.disabled"
      :color="item.color || 'primary'"
      :density="k.density || 'compact'"
      :multiple="k.multiple === false ? false : true"
      class="mr-3"
      hide-details
      @update:modelValue="modelValueUpDate"
    ></v-checkbox>
  </div>
</template>
<script setup>
import { ref } from 'vue';
defineOptions({ name:'FormUI-v-checkbox'})

const props = defineProps({item: Object, modelValue: Array})
const emit = defineEmits(['update:modelValue', 'change'])
const item = props.item
const value = ref(props.modelValue)
const modelValueUpDate = (val) => {
  value.value = val
  emit('update:modelValue', value.value)
  emit('change', value.value)
}
</script>
<style lang="scss" scoped>
// :deep(.v-input__control) {
//   flex-direction: row !important;
// }
// :deep(.v-selection-control-group) {
//   margin-top: 0 !important;
// }
// :deep(.v-label) {
//   margin-left: 0 !important;
// }
</style>