Skip to content

Commit 342da35

Browse files
ccbikaiccbikai
authored
Merge pull request #180 from ccbikai/nuxt-v4
Nuxt v4 and Tailwind V4
2 parents cf21a2d + cc9a534 commit 342da35

File tree

415 files changed

+13856
-9938
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

415 files changed

+13856
-9938
lines changed

‎app/assets/css/tailwind.css‎

Lines changed: 167 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,177 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
4-
5-
@layer base {
6-
:root {
7-
--background: 0 0% 100%;
8-
--foreground: 240 10% 3.9%;
9-
10-
--muted: 240 4.8% 95.9%;
11-
--muted-foreground: 240 3.8% 46.1%;
12-
13-
--popover: 0 0% 100%;
14-
--popover-foreground: 240 10% 3.9%;
15-
16-
--card: 0 0% 100%;
17-
--card-foreground: 240 10% 3.9%;
18-
19-
--border: 240 5.9% 90%;
20-
--input: 240 5.9% 90%;
21-
22-
--primary: 240 5.9% 10%;
23-
--primary-foreground: 0 0% 98%;
24-
25-
--secondary: 240 4.8% 95.9%;
26-
--secondary-foreground: 240 5.9% 10%;
27-
28-
--accent: 240 4.8% 95.9%;
29-
--accent-foreground: 240 5.9% 10%;
30-
31-
--destructive: 0 84.2% 60.2%;
32-
--destructive-foreground: 0 0% 98%;
33-
34-
--ring: 240 10% 3.9%;
35-
36-
--radius: 0.5rem;
37-
38-
--vis-tooltip-background-color: none !important;
39-
--vis-tooltip-border-color: none !important;
40-
--vis-tooltip-text-color: none !important;
41-
--vis-tooltip-shadow-color: none !important;
42-
--vis-tooltip-backdrop-filter: none !important;
43-
--vis-tooltip-padding: none !important;
44-
45-
--vis-primary-color: 158 64% 52%;
46-
--vis-secondary-color: 198 93% 60%;
47-
/* --vis-secondary-color: 160 81% 40%; */
48-
/* --vis-secondary-color: var(--primary); */
49-
--vis-text-color: var(--muted-foreground);
1+
@import 'tailwindcss';
2+
@import 'tw-animate-css';
3+
4+
/*
5+
---break---
6+
*/
7+
@custom-variant dark (&:is(.dark *));
8+
9+
/*
10+
---break---
11+
*/
12+
@theme inline {
13+
--color-background: var(--background);
14+
--color-foreground: var(--foreground);
15+
--color-card: var(--card);
16+
--color-card-foreground: var(--card-foreground);
17+
--color-popover: var(--popover);
18+
--color-popover-foreground: var(--popover-foreground);
19+
--color-primary: var(--primary);
20+
--color-primary-foreground: var(--primary-foreground);
21+
--color-secondary: var(--secondary);
22+
--color-secondary-foreground: var(--secondary-foreground);
23+
--color-muted: var(--muted);
24+
--color-muted-foreground: var(--muted-foreground);
25+
--color-accent: var(--accent);
26+
--color-accent-foreground: var(--accent-foreground);
27+
--color-destructive: var(--destructive);
28+
--color-destructive-foreground: var(--destructive-foreground);
29+
--color-border: var(--border);
30+
--color-input: var(--input);
31+
--color-ring: var(--ring);
32+
--color-chart-1: var(--chart-1);
33+
--color-chart-2: var(--chart-2);
34+
--color-chart-3: var(--chart-3);
35+
--color-chart-4: var(--chart-4);
36+
--color-chart-5: var(--chart-5);
37+
--radius-sm: calc(var(--radius) - 4px);
38+
--radius-md: calc(var(--radius) - 2px);
39+
--radius-lg: var(--radius);
40+
--radius-xl: calc(var(--radius) + 4px);
41+
--color-sidebar: var(--sidebar);
42+
--color-sidebar-foreground: var(--sidebar-foreground);
43+
--color-sidebar-primary: var(--sidebar-primary);
44+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
45+
--color-sidebar-accent: var(--sidebar-accent);
46+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
47+
--color-sidebar-border: var(--sidebar-border);
48+
--color-sidebar-ring: var(--sidebar-ring);
49+
--animate-accordion-down: accordion-down 0.2s ease-out;
50+
--animate-accordion-up: accordion-up 0.2s ease-out;
51+
@keyframes accordion-down {
52+
from {
53+
height: 0;
54+
}
55+
to {
56+
height: var(--reka-accordion-content-height);
57+
}
5058
}
51-
52-
.dark {
53-
--background: 240 10% 3.9%;
54-
--foreground: 0 0% 98%;
55-
56-
--muted: 240 3.7% 15.9%;
57-
--muted-foreground: 240 5% 64.9%;
58-
59-
--popover: 240 10% 3.9%;
60-
--popover-foreground: 0 0% 98%;
61-
62-
--card: 240 10% 3.9%;
63-
--card-foreground: 0 0% 98%;
64-
65-
--border: 240 3.7% 15.9%;
66-
--input: 240 3.7% 15.9%;
67-
68-
--primary: 0 0% 98%;
69-
--primary-foreground: 240 5.9% 10%;
70-
71-
--secondary: 240 3.7% 15.9%;
72-
--secondary-foreground: 0 0% 98%;
73-
74-
--accent: 240 3.7% 15.9%;
75-
--accent-foreground: 0 0% 98%;
76-
77-
--destructive: 0 62.8% 30.6%;
78-
--destructive-foreground: 0 0% 98%;
79-
80-
--ring: 240 4.9% 83.9%;
59+
@keyframes accordion-up {
60+
from {
61+
height: var(--reka-accordion-content-height);
62+
}
63+
to {
64+
height: 0;
65+
}
8166
}
8267
}
83-
68+
/*
69+
---break---
70+
*/
71+
:root {
72+
--background: oklch(1 0 0);
73+
--foreground: oklch(0.145 0 0);
74+
--card: oklch(1 0 0);
75+
--card-foreground: oklch(0.145 0 0);
76+
--popover: oklch(1 0 0);
77+
--popover-foreground: oklch(0.145 0 0);
78+
--primary: oklch(0.205 0 0);
79+
--primary-foreground: oklch(0.985 0 0);
80+
--secondary: oklch(0.97 0 0);
81+
--secondary-foreground: oklch(0.205 0 0);
82+
--muted: oklch(0.97 0 0);
83+
--muted-foreground: oklch(0.556 0 0);
84+
--accent: oklch(0.97 0 0);
85+
--accent-foreground: oklch(0.205 0 0);
86+
--destructive: oklch(0.577 0.245 27.325);
87+
--destructive-foreground: oklch(0.577 0.245 27.325);
88+
--border: oklch(0.922 0 0);
89+
--input: oklch(0.922 0 0);
90+
--ring: oklch(0.708 0 0);
91+
--chart-1: oklch(0.646 0.222 41.116);
92+
--chart-2: oklch(0.6 0.118 184.704);
93+
--chart-3: oklch(0.398 0.07 227.392);
94+
--chart-4: oklch(0.828 0.189 84.429);
95+
--chart-5: oklch(0.769 0.188 70.08);
96+
--radius: 0.625rem;
97+
--sidebar: oklch(0.985 0 0);
98+
--sidebar-foreground: oklch(0.145 0 0);
99+
--sidebar-primary: oklch(0.205 0 0);
100+
--sidebar-primary-foreground: oklch(0.985 0 0);
101+
--sidebar-accent: oklch(0.97 0 0);
102+
--sidebar-accent-foreground: oklch(0.205 0 0);
103+
--sidebar-border: oklch(0.922 0 0);
104+
--sidebar-ring: oklch(0.708 0 0);
105+
106+
--vis-tooltip-background-color: none !important;
107+
--vis-tooltip-border-color: none !important;
108+
--vis-tooltip-text-color: none !important;
109+
--vis-tooltip-shadow-color: none !important;
110+
--vis-tooltip-backdrop-filter: none !important;
111+
--vis-tooltip-padding: none !important;
112+
113+
--vis-primary-color: 158 64% 52%;
114+
--vis-secondary-color: 198 93% 60%;
115+
/* --vis-secondary-color: 160 81% 40%; */
116+
/* --vis-secondary-color: var(--primary); */
117+
--vis-text-color: var(--muted-foreground);
118+
}
119+
/*
120+
---break---
121+
*/
122+
.dark {
123+
--background: oklch(0.145 0 0);
124+
--foreground: oklch(0.985 0 0);
125+
--card: oklch(0.145 0 0);
126+
--card-foreground: oklch(0.985 0 0);
127+
--popover: oklch(0.145 0 0);
128+
--popover-foreground: oklch(0.985 0 0);
129+
--primary: oklch(0.985 0 0);
130+
--primary-foreground: oklch(0.205 0 0);
131+
--secondary: oklch(0.269 0 0);
132+
--secondary-foreground: oklch(0.985 0 0);
133+
--muted: oklch(0.269 0 0);
134+
--muted-foreground: oklch(0.708 0 0);
135+
--accent: oklch(0.269 0 0);
136+
--accent-foreground: oklch(0.985 0 0);
137+
--destructive: oklch(0.396 0.141 25.723);
138+
--destructive-foreground: oklch(0.637 0.237 25.331);
139+
--border: oklch(0.269 0 0);
140+
--input: oklch(0.269 0 0);
141+
--ring: oklch(0.439 0 0);
142+
--chart-1: oklch(0.488 0.243 264.376);
143+
--chart-2: oklch(0.696 0.17 162.48);
144+
--chart-3: oklch(0.769 0.188 70.08);
145+
--chart-4: oklch(0.627 0.265 303.9);
146+
--chart-5: oklch(0.645 0.246 16.439);
147+
--sidebar: oklch(0.205 0 0);
148+
--sidebar-foreground: oklch(0.985 0 0);
149+
--sidebar-primary: oklch(0.488 0.243 264.376);
150+
--sidebar-primary-foreground: oklch(0.985 0 0);
151+
--sidebar-accent: oklch(0.269 0 0);
152+
--sidebar-accent-foreground: oklch(0.985 0 0);
153+
--sidebar-border: oklch(0.269 0 0);
154+
--sidebar-ring: oklch(0.439 0 0);
155+
}
156+
/*
157+
---break---
158+
*/
84159
@layer base {
85160
* {
86-
@apply border-border;
161+
@apply border-border outline-ring/50;
87162
}
88163
body {
89164
@apply bg-background text-foreground;
90165
}
166+
167+
button:not(:disabled),
168+
[role='button']:not(:disabled) {
169+
@apply cursor-pointer;
170+
}
171+
}
172+
173+
@layer utilities {
174+
.container {
175+
@apply 2xl:max-w-[1400px] mx-auto px-4;
176+
}
91177
}

‎app/components/SwitchLanguage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ watch(currentLocale, (newLocale) => {
1515
<DropdownMenu>
1616
<DropdownMenuTrigger as-child>
1717
<Button variant="ghost">
18-
<Languages class="w-5 h-5" />
18+
<Languages class="h-5 w-5" />
1919
<span class="sr-only">{{ $t('theme.toggle') }}</span>
2020
</Button>
2121
</DropdownMenuTrigger>

‎app/components/SwitchTheme.vue‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,16 @@ const colorMode = useColorMode()
99
<DropdownMenuTrigger as-child>
1010
<Button variant="ghost">
1111
<Sun
12-
class="absolute w-5 h-5 transition-all scale-100 dark:scale-0"
12+
class="
13+
absolute h-5 w-5 scale-100 transition-all
14+
dark:scale-0
15+
"
1316
/>
1417
<Moon
15-
class="w-5 h-5 transition-all scale-0 dark:scale-100"
18+
class="
19+
h-5 w-5 scale-0 transition-all
20+
dark:scale-100
21+
"
1622
/>
1723
<span class="sr-only">{{ $t('theme.toggle') }}</span>
1824
</Button>
@@ -25,21 +31,21 @@ const colorMode = useColorMode()
2531
class="cursor-pointer"
2632
@click="colorMode.preference = 'light'"
2733
>
28-
<Sun class="w-4 h-4 mr-1" />
34+
<Sun class="mr-1 h-4 w-4" />
2935
{{ $t('theme.light') }}
3036
</DropdownMenuItem>
3137
<DropdownMenuItem
3238
class="cursor-pointer"
3339
@click="colorMode.preference = 'dark'"
3440
>
35-
<Moon class="w-4 h-4 mr-1" />
41+
<Moon class="mr-1 h-4 w-4" />
3642
{{ $t('theme.dark') }}
3743
</DropdownMenuItem>
3844
<DropdownMenuItem
3945
class="cursor-pointer"
4046
@click="colorMode.preference = 'system'"
4147
>
42-
<Laptop class="w-4 h-4 mr-1" />
48+
<Laptop class="mr-1 h-4 w-4" />
4349
{{ $t('theme.system') }}
4450
</DropdownMenuItem>
4551
</DropdownMenuContent>

‎app/components/dashboard/DatePicker.vue‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,12 @@ onBeforeMount(() => {
128128
</Select>
129129

130130
<Dialog v-model:open="openCustomDateRange">
131-
<DialogContent class="w-auto max-w-[95svw] max-h-[95svh] md:max-w-screen-md grid-rows-[auto_minmax(0,1fr)_auto]">
131+
<DialogContent
132+
class="
133+
max-h-[95svh] w-auto max-w-[95svw] grid-rows-[auto_minmax(0,1fr)_auto]
134+
md:max-w-(--breakpoint-md)
135+
"
136+
>
132137
<DialogHeader>
133138
<DialogTitle>{{ $t('dashboard.date_picker.custom_title') }}</DialogTitle>
134139
</DialogHeader>
@@ -147,7 +152,7 @@ onBeforeMount(() => {
147152
</div>
148153
<TabsContent
149154
value="date"
150-
class="overflow-y-auto h-80"
155+
class="h-80 overflow-y-auto"
151156
>
152157
<Calendar
153158
:model-value="customDate"
@@ -158,7 +163,7 @@ onBeforeMount(() => {
158163
</TabsContent>
159164
<TabsContent
160165
value="range"
161-
class="overflow-y-auto h-80"
166+
class="h-80 overflow-y-auto"
162167
>
163168
<RangeCalendar
164169
:model-value="customDateRange"

0 commit comments

Comments
 (0)