supervision-vue/src/components/model-icon-picker.vue

<template>
    <div class="flex gap wrap mb-10">
        <div
            v-for="item in colors"
            :key="item"
            class="color-container"
            @click="handleChangeColorClick(item)"
            :active="item === activeColor"
        >
            <div class="color-item" :style="{background: item}"></div>
        </div>
    </div>
    <div class="flex gap wrap">
        <div
            v-for="item in icons"
            :key="item"
            class="icon-container"
            @click="handleClick(item)"
            :active="item === activeIcon"
        >
            <div class="icon" :style="{background: activeColor}">
                <icon :name="item" :size="36" />
            </div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    color: {
        type: String,
    },
    ico: {
        type: String,
    },
});

const emit = defineEmits(["update:color", "update:ico"]);

const colors = [
    "linear-gradient( 180deg, #3A7DDB 0%, #2731DB 100%)",
    "linear-gradient( 180deg, #F4D540 0%, #BF801F 100%)",
    "linear-gradient( 180deg, #54C6EA 0%, #096562 100%)",
    "linear-gradient( 180deg, #7699FF 0%, #1117C0 100%)",
    "linear-gradient( 180deg, #59D0FC 0%, #2657E7 100%)",
    "linear-gradient( 180deg, #F5B77D 0%, #B33F1A 100%)",
    "linear-gradient( 180deg, #E07DF5 0%, #743AD8 100%)",
    "linear-gradient( 180deg, #FF6969 0%, #B02A00 100%)",
    "linear-gradient( 180deg, #6FC328 0%, #0E670A 100%)",
];
const icons = ref([]);
for (let i = 1; i <= 19; i++) {
    icons.value.push(`local-icon-ic_${i < 10 ? "0" + i : i}`);
}

const activeIcon = ref(props.ico);

watch(() => props.ico, (val) => {
    activeIcon.value = val
})

const activeColor = ref(props.color || 'linear-gradient( 180deg, #3A7DDB 0%, #2731DB 100%)')
function handleChangeColorClick(item) {
    activeColor.value = item;
}

function handleClick(item) {
    activeIcon.value = item;
    emit("update:ico", item);
    emit("update:color", activeColor.value);
}
</script>
<style lang="scss" scoped>
.color-container {
    border: 1px solid transparent;
    padding: 8px;
    .color-item {
        height: 40px;
        width: 40px;
        border-radius: 8px;
    }
    &:hover, &[active="true"] {
        cursor: pointer;
        background: #dce4ff;
        border-color: #4759d9;
    }
}
.icon-container {
    border: 1px solid transparent;
    padding: 8px;
    .icon {
        padding: 8px;
        border-radius: 8px;
    }
    &:hover,
    &[active="true"] {
        cursor: pointer;
        background: #dce4ff;
        border-color: #4759d9;
    }
}
</style>