<template>
    <component v-if="!asChild" :is="as" :class="cx('root')" v-bind="attrs">
        <slot />
    </component>
    <slot v-else :a11yAttrs="a11yAttrs" :class="cx('root')" />
</template>

<script>
import InputColorSwatchBackground from 'primevue/inputcolorswatchbackground';
import InputColorTransparencyGrid from 'primevue/inputcolortransparencygrid';
import { mergeProps } from 'vue';
import BaseInputColorSwatch from './BaseInputColorSwatch.vue';

export default {
    name: 'InputColorSwatch',
    extends: BaseInputColorSwatch,
    inheritAttrs: false,
    inject: ['$pcInputColor'],
    components: {
        InputColorTransparencyGrid,
        InputColorSwatchBackground
    },
    computed: {
        swatchStyles() {
            return this.$pcInputColor.swatchStyles;
        },
        attrs() {
            return mergeProps(this.a11yAttrs, this.ptmi('root'));
        },
        a11yAttrs() {
            return {
                style: this.swatchStyles
            };
        }
    }
};
</script>
