import { Namespace } from "../../utils/namespace";
import { mixChildren } from '../../mixins/relation/children';
import { namespace as namespace_parent } from "../tab/tab.jsx";

const namespace = Namespace.Create('tab-pane');

export default {
    name: namespace.name,
    mixins:[
        mixChildren(namespace_parent.name)
    ],
    props:{
        title:{
            type: String
        },
        disabled:{
            type: Boolean,
            default:false
        },
        dot:{
            type: Boolean,
            default: false
        },
        badge:{
            type: String | Number
        },
        icon:{
            type: String
        },
        iconSize:{
            type: String | Number,
            default: 18
        },
        titleClass:{
            type: String | Object
        },
        titleStyle:{
            type: String | Object
        }
    },
    computed:{
        cls(){
            return namespace.derive()
        }
    },
    render(){
        return (
            <div class={this.cls}>
                {this.$slots.default}
            </div>
        )
    }
}