<template>
    <component :is="type" v-bind="$props">
        <slot></slot>
    </component>
</template>

<script>
import slide from './SlideDrawer'
import push from './PushDrawer'
import reveal from './RevealDrawer'
export default {
    name: 'Drawer',
    components: {
        slide,
        push,
        reveal
    },
    props: {
        type: {
            type: String,
            default: 'slide',
            validator: function (val) {
                return ['slide', 'push', 'reveal'].indexOf(val) !== -1
            }
        },
        title: {
            type: String
        },
        contentWrapperId: {
            type: String,
            default: 'mainContent'
        },
        appWrapperId: {
            type: String,
            default: 'MAIN'
        },
        isOpen: {
            type: Boolean,
            required: false
        },
        right: {
            type: Boolean,
            required: false
        },
        width: {
            type: String,
            default: '300'
        },
        disableEsc: {
            type: Boolean,
            required: false
        },
        onStateChange: {
            type: Function,
            required: false
        },
        burgerIcon: {
            type: Boolean,
            default: true
        },
        crossIcon: {
            type: Boolean,
            default: true
        },
        disableOutsideClick: {
            type: Boolean,
            default: false
        },
        theme: {
            type: String,
            default: 'bt',
            validator: function (val) {
                return ['bt', 'dark', 'light'].indexOf(val) !== -1
            }
        },
        background: {
            type: String
        },
        associatedNavId: {
            type: String
        }
    }
}
</script>
