@ishitatsuyuki/oruga-next/dist/cjs/Collapse-e4249d41.js

UI components for Vue.js and CSS framework agnostic

'use strict';

var vue = require('vue');
var helpers = require('./helpers.js');
var config = require('./config.js');
var BaseComponentMixin = require('./BaseComponentMixin-a03c02e3.js');

/**
 * An easy way to toggle what you want
 * @displayName Collapse
 * @style _collapse.scss
 */
var script = vue.defineComponent({
    name: 'OCollapse',
    mixins: [BaseComponentMixin.BaseComponentMixin],
    configField: 'collapse',
    emits: ['update:open', 'open', 'close'],
    props: {
        /**
         * Whether collapse is open or not, v-model:open to make it two-way binding
         */
        open: {
            type: Boolean,
            default: true
        },
        /**
         * Custom animation (transition name)
         */
        animation: {
            type: String,
            default: () => {
                return helpers.getValueByPath(config.getOptions(), 'collapse.animation', 'fade');
            }
        },
        ariaId: {
            type: String,
            default: ''
        },
        /**
         * Trigger position
         * @values top, bottom
         */
        position: {
            type: String,
            default: 'top',
            validator: (value) => {
                return [
                    'top',
                    'bottom'
                ].indexOf(value) > -1;
            }
        },
        rootClass: [String, Function, Array],
        triggerClass: [String, Function, Array],
        contentClass: [String, Function, Array]
    },
    data() {
        return {
            isOpen: this.open
        };
    },
    watch: {
        open(value) {
            this.isOpen = value;
        }
    },
    methods: {
        /**
        * Toggle and emit events
        */
        toggle() {
            this.isOpen = !this.isOpen;
            this.$emit('update:open', this.isOpen);
            this.$emit(this.isOpen ? 'open' : 'close');
        }
    },
    render() {
        const trigger = vue.h('div', {
            class: this.computedClass('triggerClass', 'o-clps__trigger'),
            onClick: this.toggle
        }, this.$slots.trigger({ open: this.isOpen }));
        const content = vue.h(vue.Transition, { name: this.animation }, () => vue.withDirectives(vue.h('div', {
            class: this.computedClass('contentClass', 'o-clps__content'),
            'id': this.ariaId
        }, this.$slots.default()), [[vue.vShow, this.isOpen]]));
        return vue.h('div', { class: this.computedClass('rootClass', 'o-clps') }, (this.position === 'top' ? [trigger, content] : [content, trigger]));
    }
});

script.__file = "src/components/collapse/Collapse.vue";

exports.script = script;