minnan-website/components/controls/Check.vue

<template>
  <div class="nana-checkbox" @click="() => $emit('update:modelValue', modelValue ? false : true)">
    <div class="checker">
      <CheckIcon v-if="modelValue" />
    </div>
    <span>
      <slot />
    </span>
  </div>
</template>

<script lang="ts" setup>
import CheckIcon from './CheckIcon.vue';

defineProps({
  modelValue: {
    type: [Number,Object, Boolean],
    default: null
  },
})

defineEmits([
  'update:modelValue'
])
</script>

<style lang="scss">
.nana-checkbox {
  vertical-align: middle;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  position: relative;

  .checker {
    position: relative;
    border: 1px solid #c5c5c5;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 6px;

    &:hover {
      background-color:#ececec;
    }
    &:active {
      background-color:#eaeaea;
    }

    &:active, &:hover {
      border-color: #0092e7;
    }

    svg {
      position: absolute;
      left: 1px;
      top: 1px;
      width: 16px;
      height: 16px;
    }
  }

}
</style>