<template>
  <div>
    <group>
      <x-switch
        v-model="show"
        title="Toggle"
      />
    </group>
    <confirm
      v-model="show"
      title="confirm deleting the item"
      @on-cancel="onCancel"
      @on-confirm="onConfirm"
      @on-show="onShow"
      @on-hide="onHide"
    >
      <p style="text-align:center;">
        Are you sure?
      </p>
    </confirm>
  </div>
</template>

<script>
import { Confirm, Group, XSwitch } from '../components/_index'

export default {
  components: {
    Confirm,
    Group,
    XSwitch
  },
  data () {
    return {
      show: true
    }
  },
  methods: {
    onCancel () {
      console.log('on cancel')
    },
    onConfirm () {
      console.log('on confirm')
    },
    onHide () {
      console.log('on hide')
    },
    onShow () {
      console.log('on show')
    }
  }
}
</script>
