Skip to content

Commit 92706a3

Browse files
sfxcodesfxcode
committed
feat: enhance components with default slot content and update props
1 parent 6eace18 commit 92706a3

File tree

8 files changed

+35
-107
lines changed

8 files changed

+35
-107
lines changed

‎app/components/AdvertiseBox.vue‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,15 @@ defineProps({
44
type: String,
55
required: true,
66
},
7-
icon: {
8-
type: String,
9-
required: true,
10-
},
117
color: {
128
type: String,
13-
default: null,
9+
default: 'text-primary',
1410
},
1511
})
1612
</script>
1713

1814
<template>
1915
<div class="mb-4 p-4 px-5 shadow-xs">
20-
<span class="mb-1 p-3 inline-block" style="border-radius: 10px">
21-
<span :class="`text-2xl text-${color} i-${icon}`" />
22-
</span>
2316
<div :class="`mb-3 text-2xl text-${color}`">
2417
{{ header }}
2518
</div>

‎app/components/BaseButton.vue‎

Lines changed: 0 additions & 75 deletions
This file was deleted.

‎app/components/ExternalLink.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
defineProps({
33
text: {
44
type: String,
5-
default: '',
5+
default: 'Nuxt',
66
},
77
href: {
88
type: String,
9-
default: '#',
9+
default: 'https://nuxt.com',
1010
},
1111
})
1212
</script>

‎app/components/tiptap/TipTap.vue‎ renamed to ‎app/components/TipTap.vue‎

File renamed without changes.

‎app/components/ToDo.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,25 @@ defineProps({
44
type: String,
55
default: 'TODO',
66
},
7+
icon: {
8+
type: String,
9+
default: 'i-mdi-information',
10+
},
711
})
812
</script>
913

1014
<template>
1115
<div>
1216
<div class="todo m-4 flex gap-2">
13-
<i class="i-mdi-information text-3xl text-primary" />
17+
<i :class="icon" class="text-3xl text-primary" />
1418
<div data-testid="test_todo" class="text-2xl">
1519
{{ text }}
1620
</div>
1721
</div>
18-
<div class="pl-1 pt-4">
19-
<slot />
22+
<div class="m-2 p-2">
23+
<slot>
24+
TODO
25+
</slot>
2026
</div>
2127
</div>
2228
</template>

‎app/components/content/HeroCard.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
<template>
22
<section>
3-
<h1 class="text-4xl">
4-
<slot />
3+
<h1 class="text-4xl mb-4">
4+
<slot>
5+
Hero Title
6+
</slot>
57
</h1>
68
<span class="text-gray-300">
7-
<slot name="description" />
9+
<slot name="description">
10+
Hero Description
11+
</slot>
812
</span>
913
</section>
1014
</template>

‎app/pages/index.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,49 +13,49 @@ import AdvertiseBox from '@/components/AdvertiseBox.vue'
1313
Starter for Vue.js Development with Nuxt 3.
1414
</h2>
1515
<div class="gap-2 grid grid-cols-2 lg:grid-cols-3">
16-
<AdvertiseBox header="PrimeVue 4.4.x" icon="prime-check-circle" color="green-600">
16+
<AdvertiseBox header="PrimeVue 4.4.x" color="green-600">
1717
Excellent <ExternalLink href="https://github.com/sfxcode/formkit-primevue" text="Component Library" /> for VUE
1818
</AdvertiseBox>
19-
<AdvertiseBox header="PrimeVue Theme" icon="prime-check-circle" color="green-600">
19+
<AdvertiseBox header="PrimeVue Theme" color="green-600">
2020
<ExternalLink href="https://primevue.org/theming/styled" text="Styled Mode" /> with preset: Aura
2121
</AdvertiseBox>
22-
<AdvertiseBox header="FormKit" icon="prime-check-circle" color="purple-500">
22+
<AdvertiseBox header="FormKit" color="purple-500">
2323
<ExternalLink href="https://formkit.com" text="Formkit" /> 1.6.x support by <ExternalLink href="https://formkit-primevue.netlify.app/" text="PrimeVue-FormKit" />
2424
</AdvertiseBox>
25-
<AdvertiseBox header="UnoCSS" icon="prime-check-circle" color="green-600">
25+
<AdvertiseBox header="UnoCSS" color="green-600">
2626
<ExternalLink href="https://unocss.dev/" text="UnoCSS" /> for rapid styling
2727
</AdvertiseBox>
28-
<AdvertiseBox header="VUE 3.5.x" icon="prime-check-circle" color="green-600">
28+
<AdvertiseBox header="VUE 3.5.x" color="green-600">
2929
<ExternalLink href="https://vuejs.org/guide/introduction.html" text="Composition Api" /> with Script Setup
3030
</AdvertiseBox>
31-
<AdvertiseBox header="Typescript 5" icon="prime-check-circle" color="blue-400">
31+
<AdvertiseBox header="Typescript 5" color="blue-400">
3232
Typesafe by default
3333
</AdvertiseBox>
34-
<AdvertiseBox header="Nuxt 4.0.x" icon="prime-check-circle" color="green-400">
34+
<AdvertiseBox header="Nuxt 4.0.x" color="green-400">
3535
<ExternalLink href="https://nuxt.com/" text="Nuxt" /> with Pages, Layouts, ...
3636
</AdvertiseBox>
37-
<AdvertiseBox header="Nuxt Content 3.7.x" icon="prime-check-circle" color="green-400">
37+
<AdvertiseBox header="Nuxt Content 3.7.x" color="green-400">
3838
<ExternalLink href="https://content.nuxt.com/" text="Content" />: Markdown, YML, CSV or JSON and MDC Syntax
3939
</AdvertiseBox>
40-
<AdvertiseBox header="Nuxt Modules" icon="prime-check-circle" color="green-600">
40+
<AdvertiseBox header="Nuxt Modules" color="green-600">
4141
includes <ExternalLink href="https://nuxt.com/modules/image" text="Nuxt Images" />, <ExternalLink href="https://nuxt.com/modules/fonts" text="Nuxt Fonts" />
4242
</AdvertiseBox>
43-
<AdvertiseBox header="VueUse" icon="prime-check-circle" color="green-600">
43+
<AdvertiseBox header="VueUse" color="green-600">
4444
<ExternalLink href="https://vueuse.org/" text="VueUse" /> included
4545
</AdvertiseBox>
46-
<AdvertiseBox header="Pinia 2.x" icon="prime-check-circle" color="blue-400">
46+
<AdvertiseBox header="Pinia 2.x" color="blue-400">
4747
<ExternalLink href="https://pinia.vuejs.org/" text="Pinia (Colada)" />: Vue Store Implementation
4848
</AdvertiseBox>
49-
<AdvertiseBox header="TipTap 3.x" icon="prime-check-circle" color="green-600">
49+
<AdvertiseBox header="TipTap 3.x" color="green-600">
5050
<ExternalLink href="https://tiptap.dev/" text="TipTap" /> Editor
5151
</AdvertiseBox>
52-
<AdvertiseBox header="Vue Sidebar" icon="prime-check-circle" color="green-600">
52+
<AdvertiseBox header="Vue Sidebar" color="green-600">
5353
<ExternalLink href="https://github.com/yaminncco/vue-sidebar-menu" text="Sidebar" /> component
5454
</AdvertiseBox>
55-
<AdvertiseBox header="Nitro" icon="prime-check-circle" color="green-400">
55+
<AdvertiseBox header="Nitro" color="green-400">
5656
<ExternalLink href="https://nitro.unjs.io/" text="Nitro" />: Next Generation Server Toolkit
5757
</AdvertiseBox>
58-
<AdvertiseBox header="Vitest" icon="prime-check-circle" color="blue-600">
58+
<AdvertiseBox header="Vitest" color="blue-600">
5959
Testing with Vitest
6060
</AdvertiseBox>
6161
</div>

‎app/pages/ui/tiptap.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import TipTap from '~/components/tiptap/TipTap.vue'
2+
import TipTap from '~/components/TipTap.vue'
33
44
const startText = '<p>I’m running <strong>Tiptap</strong> with <strong>Vue.js</strong> and <strong>Nuxt</strong>. 🎉</p><hr><blockquote><p>Use TipTap ...</p></blockquote>\n'
55
const editorValue = ref(startText)

0 commit comments

Comments
 (0)