<template>
    <div :class="[
        'el-title',
        size ? 'el-title-' + size : ''
    ]">
        <div class="el-title-prefix">
            <slot name="prefix">
                <template v-if="prefix">
                    <el-svg v-if="svg" :name="prefix" :size="svgSize"></el-svg>
                    <el-icon v-else :name="prefix"></el-icon>
                </template>
            </slot>
        </div>
        <div class="el-title-text">
            <slot></slot>
        </div>
        <div class="el-title-suffix">
            <slot name="suffix">
                <template v-if="suffix">
                    <el-svg v-if="svg" :name="suffix" :size="svgSize"></el-svg>
                    <el-icon v-else :name="suffix"></el-icon>
                </template>
            </slot>
        </div>
    </div>
</template>

<script>
import Svg from '../../svg'
import Icon from '../../icon'
export default {
    name: "ElTitle",
    components: {
        [Icon.name]: Icon,
        [Svg.name]: Svg
    },
    props: {
        size: {
            type: String,
            default() {
                return this.$ELEMENT.title?.size || this.$ELEMENT.size || 'default'
            }
        },
        prefix: {
            type: String,
            default() {
                return this.$ELEMENT.title?.prefix
            }
        },
        suffix: {
            type: String,
            default() {
                return this.$ELEMENT.title?.suffix
            }
        },
        svg: {
            type: Boolean,
            default() {
                return this.$ELEMENT.title?.svg
            }
        },
        svgSize: {
            type: String,
            default() {
                return this.$ELEMENT.title?.svgSize
            }
        }
    },
    data() {
        return {};
    },
    methods: {}
};
</script>

<style scoped>

</style>
