- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin - Add @vmall/shared/theme.css tokens with html[data-accent] presets - Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage, VAccentSwatch, useAccent) as a Nuxt module - Convert all three apps to kit + utilities; delete ui.css/mall.css and every <style scoped>; consoles get accent presets, mall locked to red - Fix VCard boolean prop default (padding) and PDP/store stale useAsyncData keys on param navigation - Archive adopt-tailwind-design-system; new frontend-ui capability spec
23 lines
747 B
Vue
23 lines
747 B
Vue
<script setup lang="ts">
|
|
defineProps<{ tabs: { key: string; label: string }[]; modelValue: string }>();
|
|
const emit = defineEmits<{ "update:modelValue": [key: string] }>();
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="flex border-b border-border">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
type="button"
|
|
class="border-0 border-b-2 border-transparent bg-transparent px-6 py-3 text-sm text-muted transition-colors"
|
|
:class="tab.key === modelValue ? 'border-primary font-semibold text-primary' : 'hover:text-primary'"
|
|
@click="emit('update:modelValue', tab.key)"
|
|
>{{ tab.label }}</button>
|
|
</div>
|
|
<div class="py-5">
|
|
<slot :active="modelValue" />
|
|
</div>
|
|
</div>
|
|
</template>
|