nobswebdev
bb08bb389f
Improve narrow-viewport layout for upload, About, and shell overflow; keep modal scroll without extra dismiss or a11y markup changes.
37 lines
1.0 KiB
Vue
37 lines
1.0 KiB
Vue
<template>
|
|
<div class="flex w-full rounded-md border border-border p-0.5 sm:inline-flex sm:w-fit">
|
|
<button
|
|
v-for="option in options"
|
|
:key="option.value"
|
|
type="button"
|
|
class="min-w-0 flex-1 rounded px-3 py-1.5 text-center text-xs font-medium transition-colors sm:flex-none"
|
|
:class="
|
|
modelValue === option.value
|
|
? 'bg-muted text-foreground'
|
|
: 'text-muted-foreground hover:text-foreground'
|
|
"
|
|
@click="select(option.value)"
|
|
>
|
|
{{ option.label }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" generic="T extends string">
|
|
import { type PropType } from 'vue';
|
|
import type { InlineTabOption } from '@/types/ui/InlineTabOption';
|
|
|
|
const modelValue = defineModel<T>({ required: true });
|
|
|
|
defineProps({
|
|
options: {
|
|
type: Array as PropType<InlineTabOption<T>[]>,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const select = (value: T): void => {
|
|
modelValue.value = value;
|
|
};
|
|
</script>
|