Skip to content

Commit 72c43f0

Browse files
megaarmosmegaarmos
committed
chore: add demo app showcasing features
1 parent 170bfb5 commit 72c43f0

30 files changed

+1769
-285
lines changed

‎apps/demo/.env.example‎

Whitespace-only changes.

‎apps/demo/.gitignore‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Nuxt dev/build outputs
2+
.output
3+
.data
4+
.nuxt
5+
.nitro
6+
.cache
7+
dist
8+
9+
# Node dependencies
10+
node_modules
11+
12+
# Logs
13+
logs
14+
*.log
15+
16+
# Misc
17+
.DS_Store
18+
.fleet
19+
.idea
20+
21+
# Local env files
22+
.env
23+
.env.*
24+
!.env.example
25+
26+
pnpm-lock.yaml

‎apps/demo/README.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Nuxt Content Starter
2+
3+
Look at the [Nuxt Content documentation](https://content.nuxt.com) to learn more.
4+
5+
## Setup
6+
7+
Make sure to install dependencies:
8+
9+
```bash
10+
# npm
11+
npm install
12+
13+
# pnpm
14+
pnpm install
15+
16+
# yarn
17+
yarn install
18+
19+
# bun
20+
bun install
21+
```
22+
23+
## Development Server
24+
25+
Start the development server on `http://localhost:3000`:
26+
27+
```bash
28+
# npm
29+
npm run dev
30+
31+
# pnpm
32+
pnpm dev
33+
34+
# yarn
35+
yarn dev
36+
37+
# bun
38+
bun run dev
39+
```
40+
41+
## Production
42+
43+
Build the application for production:
44+
45+
```bash
46+
# npm
47+
npm run build
48+
49+
# pnpm
50+
pnpm build
51+
52+
# yarn
53+
yarn build
54+
55+
# bun
56+
bun run build
57+
```
58+
59+
Locally preview production build:
60+
61+
```bash
62+
# npm
63+
npm run preview
64+
65+
# pnpm
66+
pnpm preview
67+
68+
# yarn
69+
yarn preview
70+
71+
# bun
72+
bun run preview
73+
```
74+
75+
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

‎apps/demo/app.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
useHead({
3+
title: 'Vue Spring Bottom Sheet',
4+
meta: [
5+
{
6+
name: 'description',
7+
content: 'Vue Spring Bottom Sheet',
8+
},
9+
{
10+
name: 'author',
11+
content: 'Arion Paul',
12+
},
13+
],
14+
})
15+
</script>
16+
17+
<template>
18+
<UApp>
19+
<NuxtPage />
20+
</UApp>
21+
</template>

‎apps/demo/app/app.config.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default defineAppConfig({
2+
// https://ui3.nuxt.dev/getting-started/theme#design-system
3+
ui: {
4+
colorMode: false,
5+
colors: {
6+
primary: 'indigo',
7+
neutral: 'zinc',
8+
},
9+
},
10+
})

‎apps/demo/app/assets/css/main.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
@import 'tailwindcss';
2+
@import '@nuxt/ui';
3+
4+
body {
5+
@apply bg-gray-100 dark:bg-zinc-950;
6+
}
7+
8+
.vue-code-block pre[class*='language-'] {
9+
@apply bg-zinc-50;
10+
}
11+
12+
.vue-code-block {
13+
--neon-bunny-white: #292929;
14+
--neon-bunny-name: #437f48;
15+
--neon-bunny-tag: #7e7e7e;
16+
--neon-bunny-string: #906c34;
17+
--neon-bunny-html-tag-attr: #3678a0;
18+
--neon-bunny-literal: #3678a0;
19+
--neon-bunny-title-function: #3678a0;
20+
--neon-bunny-keyword: #b35650;
21+
22+
--neon-bunny-js: #292929;
23+
--neon-bunny-js-title-class: #292929;
24+
--neon-bunny-params: #a2641c;
25+
--neon-bunny-property: #a2641c;
26+
--v-cb-tab-neon-bunny-icon: 239, 84%, 67%;
27+
--v-cb-tab-neon-bunny-carrot-icon: 239, 84%, 67%;
28+
}
29+
30+
&:where(.dark, .dark *) {
31+
body {
32+
--vsbs-handle-background: var(--color-zinc-500);
33+
--vsbs-background: var(--color-zinc-900);
34+
--vsbs-border-color: var(--color-zinc-800);
35+
}
36+
37+
.vue-code-block pre[class*='language-'] {
38+
@apply bg-zinc-950;
39+
}
40+
41+
.vue-code-block {
42+
--neon-bunny-white: #e0e0e0;
43+
--neon-bunny-name: #8bc34a;
44+
--neon-bunny-tag: #e0e0e0;
45+
--neon-bunny-string: #e0a751;
46+
--neon-bunny-html-tag-attr: #4fc3f7;
47+
--neon-bunny-literal: #4fc3f7;
48+
49+
--neon-bunny-title-function: #4fc3f7;
50+
--neon-bunny-keyword: #ff5252;
51+
52+
--neon-bunny-js: #e0e0e0;
53+
--neon-bunny-js-title-class: #e0e0e0;
54+
--neon-bunny-params: #ffb74d;
55+
--neon-bunny-property: #ffb74d;
56+
--v-cb-tab-neon-bunny-carrot-icon: 239, 84%, 67%;
57+
}
58+
}

‎apps/demo/app/components/Alert.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div class="alert" :style="{ 'border-color': color }">
3+
<slot></slot>
4+
</div>
5+
</template>
6+
7+
<script setup lang="ts">
8+
const { color } = defineProps({
9+
color: {
10+
type: String,
11+
default: 'orange'
12+
}
13+
})
14+
</script>
15+
16+
<style scoped>
17+
.alert {
18+
display: flex;
19+
align-items: center;
20+
padding: 1rem;
21+
border: 2px solid;
22+
border-radius: 0.5rem;
23+
background-color: #fff;
24+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
25+
transition: transform 0.2s ease, box-shadow 0.2s ease;
26+
}
27+
28+
.alert:hover {
29+
transform: translateY(-2px);
30+
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
31+
}
32+
</style>

‎apps/demo/app/components/Counter.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div>
3+
<h3>Counter: {{ count }}</h3>
4+
<button @click="increment">
5+
Increment
6+
</button>
7+
<button @click="decrement">
8+
Decrement
9+
</button>
10+
</div>
11+
</template>
12+
13+
<script setup lang="ts">
14+
const count = ref(0)
15+
16+
const increment = () => {
17+
count.value++
18+
}
19+
20+
const decrement = () => {
21+
count.value--
22+
}
23+
</script>
24+
25+
<style scoped>
26+
button {
27+
margin: 5px;
28+
}
29+
</style>

‎apps/demo/app/components/ExampleSnippet.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script lang="ts" setup>
2+
const showExample = ref(false)
3+
4+
defineProps<{
5+
description: string
6+
code: string
7+
to: string
8+
}>()
9+
</script>
10+
11+
<template>
12+
<UCard class="mt-10">
13+
<template #header>
14+
<div class="flex justify-between">
15+
<h2 class="text-xl font-bold text-pretty"><slot name="title" /></h2>
16+
<UButton variant="soft" size="lg" :to="to"> Open Example </UButton>
17+
</div>
18+
</template>
19+
<slot />
20+
<p class="mb-8 leading-loose text-pretty xl:text-lg" v-html="description" />
21+
<div class="grid lg:grid-cols-[1fr_384px] gap-8">
22+
<ClientOnly>
23+
<div class="overflow-x-auto">
24+
<VCodeBlock
25+
class="vue-code-block"
26+
:browser-window="true"
27+
:code="code"
28+
highlightjs
29+
lang="html"
30+
theme="neon-bunny-carrot"
31+
/>
32+
</div>
33+
</ClientOnly>
34+
<div class="shrink-0">
35+
<div
36+
class="rounded-4xl aspect-[9/18.5] border-13 max-w-[384px] mx-auto border-black overflow-hidden"
37+
>
38+
<iframe v-if="to && showExample" class="w-full h-full" :src="to" frameborder="0" />
39+
<button
40+
v-else
41+
type="button"
42+
class="w-full h-full bg-white dark:bg-zinc-800 hover:bg-zinc-900 hover:text-white transition-colors hover:cursor-pointer"
43+
@click="showExample = true"
44+
>
45+
<div class="flex flex-col gap-5 items-center justify-center h-full">
46+
<Icon name="lucide-circle-play" class="size-40" mode="svg" />
47+
<span class="text-xl">Load Example</span>
48+
</div>
49+
</button>
50+
</div>
51+
</div>
52+
</div>
53+
</UCard>
54+
</template>

‎apps/demo/app/components/Placeholder.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div
3+
class="relative overflow-hidden rounded-[var(--ui-radius)] border border-dashed border-[var(--ui-border-accented)] opacity-75 px-4 flex items-center justify-center h-8"
4+
>
5+
<svg class="absolute inset-0 h-full w-full stroke-[var(--ui-border-inverted)]/10" fill="none">
6+
<defs>
7+
<pattern
8+
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
9+
x="0"
10+
y="0"
11+
width="10"
12+
height="10"
13+
patternUnits="userSpaceOnUse"
14+
>
15+
<path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
16+
</pattern>
17+
</defs>
18+
<rect
19+
stroke="none"
20+
fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
21+
width="100%"
22+
height="100%"
23+
/>
24+
</svg>
25+
</div>
26+
</template>

0 commit comments

Comments
 (0)