"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _mixins_1 = require("../../_mixins");
const index_cssr_1 = require("./styles/index.cssr");
const styles_1 = require("../styles");
const _internal_1 = require("../../_internal");
const collapseProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { collapsed: Boolean, appear: Boolean });
exports.default = (0, vue_1.defineComponent)({
    name: 'CollapseTransition',
    props: collapseProps,
    inheritAttrs: false,
    setup(props) {
        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
        const mergedThemeRef = (0, _mixins_1.useTheme)('CollapseTransition', 'CollapseTransition', index_cssr_1.default, styles_1.collapseTransitionLight, props);
        return {
            mergedClsPrefix: mergedClsPrefixRef,
            cssVars: (0, vue_1.computed)(() => {
                const { self: { bezier } } = mergedThemeRef.value;
                return {
                    '--bezier': bezier
                };
            })
        };
    },
    render() {
        return ((0, vue_1.h)(_internal_1.NFadeInExpandTransition, { appear: this.appear }, {
            default: () => this.collapsed
                ? (0, vue_1.h)('div', // Don't use jsx since it would cause useless spread in each rendering
                (0, vue_1.mergeProps)({
                    class: `${this.mergedClsPrefix}-collapse-transition`,
                    style: this.cssVars
                }, this.$attrs), this.$slots)
                : null
        }));
    }
});
