<template>
  <div
    v-click-outside="onClickOutside"
    class="snt-collapse"
    :class="{ 'collapse': collapse }">
    <slot
      :collapse="collapse"
      :setCollapse="setCollapse" />
  </div>
</template>

<script>

export default {
  name: 'SntCollapse',
  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
    }
  }
}
</script>

<style scoped>

</style>
