Skip to content

Commit aa2b408

Browse files
timhanlontimhanlon
authored
feat: tailwind variants (#7)
* feat: tailwind variants * more css variables * tweaks * cleanup playgrounds * chore: lint
1 parent 9d6e72d commit aa2b408

26 files changed

+8103
-107
lines changed

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"scripts": {
2121
"prepack": "nuxt-module-build build",
2222
"dev": "nuxi dev playground",
23+
"dev:custom": "nuxi dev playground-custom",
2324
"dev:build": "nuxi build playground",
2425
"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
2526
"release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
@@ -32,7 +33,9 @@
3233
"@nuxt/kit": "^3.15.0",
3334
"@vue/compiler-sfc": "^3.3.0",
3435
"defu": "^6.1.4",
35-
"pathe": "^2.0.0"
36+
"lucide-vue-next": "^0.471.0",
37+
"pathe": "^2.0.0",
38+
"tailwind-variants": "^0.3.0"
3639
},
3740
"devDependencies": {
3841
"@nuxt/devtools": "^1.7.0",

‎playground-custom/app.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<UApp>
3+
<NuxtLayout>
4+
<NuxtPage />
5+
</NuxtLayout>
6+
</UApp>
7+
</template>

‎playground-custom/assets/css/main.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import "tailwindcss";
2+
@import "@nuxt/ui";
3+
@source "../../nuxt.config.ts";

‎playground-custom/components/NuxtAvatar.story.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<Story title="Avatar">
3+
<UChip inset>
4+
<UAvatar
5+
src="https://github.com/benjamincanac.png"
6+
alt="Benjamin Canac"
7+
/>
8+
</UChip>
9+
</Story>
10+
</template>

‎playground-custom/components/NuxtBadge.story.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<Story title="Badge">
3+
<Variant title="Default">
4+
<UBadge>Badge</UBadge>
5+
</Variant>
6+
7+
<Variant title="Class Overrides">
8+
<UBadge class="font-bold rounded-full">
9+
Badge
10+
</UBadge>
11+
</Variant>
12+
</Story>
13+
</template>

‎playground-custom/components/NuxtButton.story.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<Story
3+
title="Button"
4+
:classes="{ content: 'grid grid-cols-2 gap-4' }"
5+
>
6+
<Variant title="Default">
7+
<UButton>Button</UButton>
8+
</Variant>
9+
10+
<Variant title="Class Overrides">
11+
<UButton class="font-bold rounded-full">
12+
Button
13+
</UButton>
14+
</Variant>
15+
</Story>
16+
</template>

‎playground-custom/components/NuxtSelect.story.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
4+
const drinks = [
5+
'Coke Zero',
6+
'Pepsi Max',
7+
]
8+
9+
const selected = ref(drinks[0])
10+
</script>
11+
12+
<template>
13+
<Story title="Select">
14+
<USelect
15+
v-model="selected"
16+
:items="drinks"
17+
/>
18+
</Story>
19+
</template>

‎playground/pages/custom/[[slug]].vue renamed to ‎playground-custom/layouts/CustomViewer.vue

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@ const navigationMenuItems = [searchMenuItem, ...stories
1616
label: s.pascalName,
1717
icon: 'i-lucide-file-text',
1818
to: `/custom/${s.kebabName}`,
19+
// children: s.variants
20+
// ? Object.keys(s.variants).map(variant => ({
21+
// label: variant,
22+
// onSelect: () => {
23+
24+
// },
25+
// }))
26+
// : [],
1927
})),
2028
]
2129
@@ -39,14 +47,6 @@ const groups = ref([
3947
},
4048
])
4149
42-
const route = useRoute()
43-
const slug = computed(() => route.params.slug)
44-
const story = stories.find(s => s.kebabName === slug.value)
45-
46-
useHead({
47-
title: story?.pascalName,
48-
})
49-
5050
defineShortcuts({
5151
meta_k: () => commandPaletteOpen.value = true,
5252
})
@@ -64,11 +64,9 @@ defineShortcuts({
6464

6565
<div
6666
class="p-2 flex-grow"
67-
data-bedtime-theme="default"
67+
data-bedtime-theme="false"
6868
>
69-
<component
70-
:is="story?.component"
71-
/>
69+
<NuxtPage />
7270
</div>
7371
<UModal
7472
v-model:open="commandPaletteOpen"

‎playground-custom/nuxt.config.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
export default defineNuxtConfig({
2+
modules: ['../src/module', '@nuxt/ui'],
3+
4+
css: ['~/assets/css/main.css'],
5+
6+
colorMode: {
7+
preference: 'light',
8+
fallback: 'light',
9+
storageKey: 'bedtime-color-mode',
10+
},
11+
12+
compatibilityDate: '2025-01-03',
13+
14+
bedtime: {
15+
classes: {
16+
story: {
17+
actions: 'flex items-center gap-2',
18+
container: 'space-y-2',
19+
content: 'space-y-4',
20+
header: 'flex items-center gap-2',
21+
title: 'text-lg font-medium tracking-tight',
22+
},
23+
variant: {
24+
actions: 'flex items-center gap-2',
25+
container: 'space-y-2',
26+
content: 'p-4 border border-gray-200 rounded-md',
27+
header: 'flex items-center gap-2',
28+
title: 'text-md font-medium tracking-tight',
29+
},
30+
},
31+
viewer: {
32+
enabled: false,
33+
theme: false,
34+
},
35+
},
36+
})

‎playground-custom/package.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"private": true,
3+
"name": "bedtime-playground",
4+
"type": "module",
5+
"scripts": {
6+
"dev": "nuxi dev",
7+
"build": "nuxi build",
8+
"generate": "nuxi generate"
9+
},
10+
"dependencies": {
11+
"nuxt": "^3.15.0"
12+
}
13+
}

0 commit comments

Comments
 (0)