<template> <div class="space-y-1"> <span class="text-xs font-semibold text-gray-400">Spalten</span> <div class="flex rounded-lg border border-gray-500 divide-x divide-gray-500 overflow-hidden"> <div class="bg-gray-600 w-8 h-6 flex items-center justify-center"> <ui-sprite src="mobile" class="w-4 h-4"></ui-sprite> </div> <div v-for="(i, index) in 2" class="hover:cursor-pointer grow flex items-center justify-center text-sm text-teal-600" :class="{'bg-teal-900': i <= modelValue.mobile}" @click.prevent="$emit('update:modelValue', {...modelValue, mobile: i})" v-text="i" ></div> </div> <div class="flex rounded-lg border border-gray-500 divide-x divide-gray-500 overflow-hidden"> <div class="bg-gray-600 w-8 h-6 flex items-center justify-center"> <ui-sprite src="tablet" class="w-4 h-4"></ui-sprite> </div> <div v-for="(i, index) in 4" class="hover:cursor-pointer grow flex items-center justify-center text-sm text-teal-600" :class="{'bg-teal-900': i <= modelValue.tablet}" @click.prevent="$emit('update:modelValue', {...modelValue, tablet: i})" v-text="i" ></div> </div> <div class="flex rounded-lg border border-gray-500 divide-x divide-gray-500 overflow-hidden"> <div class="bg-gray-600 w-8 h-6 flex items-center justify-center"> <ui-sprite src="desktop" class="w-4 h-4"></ui-sprite> </div> <div v-for="(i, index) in 6" class="hover:cursor-pointer grow flex items-center justify-center text-sm text-teal-600" :class="{'bg-teal-900': i <= modelValue.desktop}" @click.prevent="$emit('update:modelValue', {...modelValue, desktop: i})" v-text="i" ></div> </div> </div> </template> <script lang="js" setup> defineEmits(['update:modelValue']); const props = defineProps({ modelValue: { required: true, validator: (value) => typeof value === 'object' && JSON.stringify(Object.keys(value).sort()) === JSON.stringify(['desktop', 'mobile', 'tablet'].sort()), }, }); </script>