import Vue from 'vue'
import './SntCollapse.scss'
import { ClickOutside } from 'vuetify/lib'

export default Vue.extend({
  name: 'SntCollapse',
  directives: { ClickOutside },
  props: {
    value: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      collapse: this.value
    }
  },
  watch: {
    value () {
      this.collapse = this.value
    }
  },
  methods: {
    onClickOutside () {
      this.collapse = true
    },
    setCollapse (collapse) {
      this.collapse = collapse
    }
  },
  template: `
    <div
      v-click-outside="onClickOutside"
      class="snt-collapse"
      :class="{ 'collapse': collapse }">
      <slot
        :collapse="collapse"
        :setCollapse="setCollapse" />
    </div>
  `
})
