<template>
    <component v-if="!asChild" :is="as" :class="cx('root')" v-bind="attrs">
        <template v-for="(_, slotName) in $slots" #[slotName]="slotProps" :key="slotName">
            <slot :name="slotName" v-bind="slotProps || {}" />
        </template>
    </component>
    <slot v-else :a11yAttrs="a11yAttrs" :class="cx('root')" />
</template>

<script>
import { cn } from '@primeuix/utils';
import { mergeProps } from 'vue';
import BaseInputColorEyeDropper from './BaseInputColorEyeDropper.vue';

export default {
    name: 'InputColorEyeDropper',
    extends: BaseInputColorEyeDropper,
    inheritAttrs: false,
    inject: ['$pcInputColor'],
    methods: {
        onClick(event) {
            this.$pcInputColor.openEyeDropper(event);
        }
    },
    computed: {
        attrs() {
            return mergeProps(this.a11yAttrs, this.ptmi('root'));
        },
        a11yAttrs() {
            return {
                type: 'button',
                disabled: this.$pcInputColor.disabled || undefined,
                'data-p': this.dataP,
                onClick: this.onClick
            };
        },
        dataP() {
            return cn({
                disabled: this.$pcInputColor.disabled
            });
        }
    }
};
</script>
