<script setup>
defineProps({
    columns: {
        type: Array,
        required: true,
    },
    row: {
        type: Object,
        default: null,
    },
});

function stopEventPropagation(event) {
    event.preventDefault();
    event.stopPropagation();
}
</script>
<template>
    <slot name="beforeChip" :row="row"></slot>
    <span
        v-for="col of columns"
        :key="col.name"
        @click="stopEventPropagation"
        class="cursor-text"
    >
        <QChip
            v-if="col.chip.condition(row[col.name], row)"
            :title="col.label"
            :class="[
                col.chip.color
                    ? col.chip.color(row)
                    : !col.chip.icon && 'bg-chip-secondary',
                col.chip.icon && 'q-px-none',
            ]"
            dense
            square
        >
            <span v-if="!col.chip.icon">
                {{ col.format ? col.format(row) : row[col.name] }}
            </span>
            <QIcon v-else :name="col.chip.icon" color="primary-light" />
        </QChip>
    </span>
    <slot name="afterChip" :row="row"></slot>
</template>
<style lang="scss">
.bg-chip-secondary {
    background-color: var(--vn-page-color);
    color: var(--vn-text-color);
}

.cursor-text {
    pointer-events: all;
    cursor: text;
    user-select: all;
}
</style>
