Files
shop/components/SelectionBox.vue
libretech 61a74e649b
build / build (push) Successful in 1m38s
feat(selection): lock single-option boxes, drop the about link
Recovered work in progress that sat uncommitted since 2026-05: a
SelectionBox renders as a plain div instead of a NuxtLink when locked,
so a variant with only one choice reads as decided rather than
clickable, and it reports aria-checked in that state. useProductContent
gained the content lookups the details and index pages now use, the
cookie banner says Schließen instead of Akzeptieren, the Über uns
header entry is gone, and ProductCard's hover shadow no longer relies
on a short-circuit that could yield a non-array.
2026-09-23 22:09:52 +02:00

43 lines
1.1 KiB
Vue

<template>
<component
:is="locked ? 'div' : NuxtLink"
:to="locked ? undefined : path"
:title="ariaLabel"
:aria-label="ariaLabel"
:aria-checked="isActive || locked"
:class="{
'border-black bg-white': isActive || locked,
'cursor-default': locked,
'border-transparent cursor-pointer bg-gray-100 opacity-80 hover:opacity-100 hover:border-gray-400 pointer': !isActive && !locked,
'opacity-30 cursor-not-allowed pointer-events-none': ariaDisabled
}"
class="flex flex-col items-center gap-y-4 rounded-md border-2 border-spacing-2 pt-2 pb-2 px-2 transition-all"
>
<div v-if="$slots.default" class="w-16 h-16 bg-transparent overflow-hidden">
<slot></slot>
</div>
<div
class="text-sm text-gray-800 pointer-events-none"
:class="{
'font-semibold': isActive || locked
}"
>
{{ label }}
</div>
</component>
</template>
<script setup lang="ts">
import { NuxtLink } from "#components";
defineProps<{
label: string;
path: string;
isActive?: boolean;
ariaLabel?: string;
ariaDisabled?: boolean;
// Pre-selected, non-interactive (single-option / fixed products)
locked?: boolean;
}>();
</script>