football2801
a55b3bd187
Frontend: - Vue 3 + Vite + TypeScript strict in frontend/; builds to public/build/ - Vue Router (hash-history, requiresAuth guard → /login) and Pinia - Global SCSS design tokens with 6 full themes (Warm Craft, Playful Pop, Sage & Cream, Dusty Mauve, Ocean Dusk, Honey & Slate) - Base components: BaseButton (5 variants), BaseInput (floating label, error state), BaseBottomSheet (slide-up, focus trap, tap-outside dismiss), BaseCard, BaseChip, BaseToast (2.5s auto-dismiss, aria-live polite), BottomNav (4 tabs, hides at 960px) - Type stubs for all API shapes: User, Device, Image, StickerLayer, RenderedAsset, Token Backend: - SpaController catch-all serves public/build/index.html; excludes api/setup/token/login/register - User entity (email+password+roles+theme); UserRepository with PasswordUpgrader - SecurityController with /login, /logout, /register stubs; Twig login form - security.yaml: form_login firewall, remember_me, role_hierarchy, access_control - Migration: create user table Verified: npm run build succeeds, GET / → 302 /login (unauthenticated) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
49 lines
898 B
Vue
49 lines
898 B
Vue
<template>
|
|
<span :class="['chip', `chip--${variant}`]" v-bind="$attrs">
|
|
<slot />
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
variant?: 'default' | 'primary' | 'success' | 'warning' | 'error'
|
|
}>(), { variant: 'default' })
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: var(--space-1) var(--space-3);
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
|
|
&--default {
|
|
background: var(--color-surface-2);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
&--primary {
|
|
background: var(--color-primary);
|
|
color: var(--color-primary-fg);
|
|
}
|
|
|
|
&--success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
&--warning {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
&--error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
}
|
|
</style>
|