mirror of
https://github.com/jason5ng32/MyIP.git
synced 2026-11-04 08:55:47 +00:00
Set up Tailwind v4 + shadcn-vue infrastructure and replace the first Bootstrap component (Toast) as a vertical slice that proves the approach. Infrastructure (refactor/01 phase A): - Add tailwindcss + @tailwindcss/vite (devDependencies) and wire the plugin in vite.config.js - Add shadcn-vue runtime deps: reka-ui, class-variance-authority, clsx, tailwind-merge, lucide-vue-next - Add components.json and frontend/lib/utils.js (cn helper) - Define design tokens via shadcn CSS variables (oklch, neutral baseColor) in frontend/style/style.css - Wire dark mode: store.setDarkMode now toggles <html>.dark for the Tailwind dark: variant - Coexist with Bootstrap (no removal yet) Toast → vue-sonner (refactor/01 phase B item 1): - Replace internals of widgets/Toast.vue (Bootstrap Toast → vue-sonner) - Keep store.setAlert() public API unchanged so all 5 call sites stay put - Map alertStyle text-success/warning/danger/info to sonner severities Refactor planning: - Add AGENTS.md so future AI sessions know the project layout, JS-only preference, and where to find refactor progress - Add refactor/ with a 4-task plan, completion discipline, and per-task review checklists Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
24 lines
595 B
Vue
24 lines
595 B
Vue
<script setup>
|
|
import { Primitive } from 'reka-ui';
|
|
import { cn } from '@/lib/utils';
|
|
import { buttonVariants } from './variants.js';
|
|
|
|
const props = defineProps({
|
|
variant: { type: String, default: 'default' },
|
|
size: { type: String, default: 'default' },
|
|
as: { type: String, default: 'button' },
|
|
asChild: { type: Boolean, default: false },
|
|
class: { type: [String, Array, Object], default: undefined },
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Primitive
|
|
:as="as"
|
|
:as-child="asChild"
|
|
:class="cn(buttonVariants({ variant, size }), props.class)"
|
|
>
|
|
<slot />
|
|
</Primitive>
|
|
</template>
|