<template>
  <svg version="1.1" :width="16" :height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
        class="n-checkbox-icon" :class="classes" @mouseenter="setHover(true)" @mouseleave="setHover(false)">
    <rect class="border transition" rx="2" ry="2" width="16" height="16"/>
    <rect class="bg transition" x="1" y="1" rx="1" ry="1" width="14" height="14"/>
    <polygon class="tick transition" v-if="indeterminate" points="3,9 3,7 13,7 13,9"/>
    <polygon class="tick transition" v-else-if="value" points="6.5,12.4 2.8,8.7 4.2,7.3 6.5,9.6 11.8,4.3 13.2,5.7"/>
  </svg>
</template>

<script>
import {prop} from '@uif/next/lib/utils/tools'

export default {
  name: 'n-checkbox-icon',
  props: {
    value: prop.boolean(),
    disabled: prop.boolean(),
    indeterminate: prop.boolean()
  },
  data () {
    return {
      hover: false
    }
  },
  computed: {
    classes ({value, indeterminate, disabled, hover}) {
      return {
        active: value,
        indeterminate,
        disabled,
        hover: !disabled && hover
      }
    }
  },
  methods: {
    setHover (value) {
      this.hover = value
    }
  }
}
</script>
