Skip to content

Commit 9d42f5a

Browse files
hunterliu1003hunterliu1003
committed
docs: add CodeBlockFile component, @nuxt/ui, Playground
1 parent daf56a0 commit 9d42f5a

Some content is hidden

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

49 files changed

+3439
-758
lines changed

‎packages/docs/components/content/CodeBlockFile.vue‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<script setup lang="ts">
2+
import { parse } from '../../markdown-parser'
3+
import { useShiki } from '../../editor/useShiki'
4+
import { useAsyncData } from '#imports'
5+
6+
const props = defineProps<{
7+
path?: string
8+
language?: string
9+
filename?: string
10+
}>()
11+
12+
const modules = import.meta.glob('./*.vue', { as: 'raw' })
13+
14+
function prepareContent(content: string) {
15+
return `\`\`\`${props.language || ''}${props.filename ? ` [${props.filename}]` : ''}\n${content}\n\`\`\``
16+
}
17+
18+
const module = modules[props.path]
19+
if (!module)
20+
console.error('Component Not Found.')
21+
22+
const content = prepareContent(await module() as any)
23+
// console.log(content)
24+
25+
const shiki = await useShiki()
26+
27+
const { data: doc } = await useAsyncData(`playground-${content}`, async () => {
28+
try {
29+
// const startParse = Date.now()
30+
let parsed = await parse(content)
31+
// const startHighlight = Date.now()
32+
parsed = await shiki(parsed as any) as any
33+
34+
// console.log(`Parsed: ${startHighlight - startParse}ms, Highlighted: ${Date.now() - startHighlight}ms`)
35+
36+
return {
37+
_id: 'content:index.md',
38+
_path: '/',
39+
_file: 'index.md',
40+
_extension: 'md',
41+
_draft: false,
42+
_type: 'markdown',
43+
updatedAt: new Date().toISOString(),
44+
...parsed.meta || {},
45+
...parsed,
46+
meta: undefined,
47+
}
48+
}
49+
catch (e) {
50+
return doc.value
51+
}
52+
})
53+
</script>
54+
55+
<template>
56+
<ContentRenderer :key="doc.updatedAt" class="docus-content" :value="doc">
57+
<template #empty>
58+
<div class="p-8">
59+
<Alert type="warning">
60+
<p class="font-semibold">
61+
Content is empty!
62+
</p>
63+
<br><br>
64+
<p>
65+
Type any <span class="font-semibold">Markdown</span> or <span class="font-semibold">MDC code</span> in
66+
editor to see it replaced by rendered nodes in this panel.
67+
</p>
68+
</Alert>
69+
</div>
70+
</template>
71+
</ContentRenderer>
72+
</template>
73+
74+
<style scoped>
75+
.docus-content :deep(.filename) {
76+
display: block;
77+
}
78+
</style>

‎packages/docs/components/content/ConfirmModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const emit = defineEmits<{
1414
<template>
1515
<VueFinalModal
1616
class="flex justify-center items-center"
17-
content-class="flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-black border dark:border-gray-700 rounded-lg space-y-2"
17+
content-class="flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2"
1818
@update:model-value="val => emit('update:modelValue', val)"
1919
>
2020
<h1 class="text-xl">

‎packages/docs/components/content/FormLogin.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ const { value: remember, attrs: rememberAttrs } = register('remember')
7777
<style>
7878
form {
7979
background: #344951;
80+
color: rgb(63, 63, 70, var(--tw-text-opacity));
8081
}
8182
8283
.field + .field {

‎packages/docs/components/content/Playground.vue‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<script setup lang="ts">
2+
import type { TeleportProps, TransitionProps } from 'vue'
3+
import { ModalsContainer, VueFinalModal, useModal } from 'vue-final-modal'
4+
5+
const initValues = {
6+
teleportTo: 'body',
7+
modelValue: false,
8+
displayDirective: 'if',
9+
hideOverlay: false,
10+
overlayTransition: { name: 'vfm' },
11+
contentTransition: { name: 'vfm' },
12+
clickToClose: true,
13+
escToClose: true,
14+
background: 'non-interactive',
15+
lockScroll: true,
16+
} as const
17+
18+
const modalId = Symbol('modalId')
19+
20+
const modelValue = ref<boolean>(initValues.modelValue)
21+
const teleportTo = ref<string>(initValues.teleportTo)
22+
const displayDirective = ref<'if' | 'show'>(initValues.displayDirective)
23+
const hideOverlay = ref(initValues.hideOverlay)
24+
const overlayTransition = ref<TransitionProps>(initValues.overlayTransition)
25+
const contentTransition = ref<TransitionProps>(initValues.contentTransition)
26+
const clickToClose = ref(initValues.clickToClose)
27+
const escToClose = ref(initValues.escToClose)
28+
const background = ref<'non-interactive' | 'interactive'>(initValues.background)
29+
const lockScroll = ref(initValues.lockScroll)
30+
31+
function reset() {
32+
modelValue.value = initValues.modelValue
33+
teleportTo.value = initValues.teleportTo
34+
displayDirective.value = initValues.displayDirective
35+
hideOverlay.value = initValues.hideOverlay
36+
overlayTransition.value = initValues.overlayTransition
37+
contentTransition.value = initValues.contentTransition
38+
clickToClose.value = initValues.clickToClose
39+
escToClose.value = initValues.escToClose
40+
background.value = initValues.background
41+
lockScroll.value = initValues.lockScroll
42+
}
43+
</script>
44+
45+
<template>
46+
<div class="grid grid-cols-[150px_1fr] gap-y-2">
47+
<h3>modelValue:</h3>
48+
<NSwitch v-model="modelValue" />
49+
50+
<h3>hideOverlay:</h3>
51+
<NSwitch v-model="hideOverlay" />
52+
53+
<h3>clickToClose:</h3>
54+
<NSwitch v-model="clickToClose" />
55+
56+
<h3>escToClose:</h3>
57+
<NSwitch v-model="escToClose" />
58+
59+
<h3>lockScroll:</h3>
60+
<NSwitch v-model="lockScroll" />
61+
62+
<h3>displayDirective: </h3>
63+
<div class="flex space-x-4 whitespace-nowrap">
64+
<NRadio v-model="displayDirective" name="name" value="if">
65+
if
66+
</NRadio>
67+
<NRadio
68+
v-model="displayDirective"
69+
name="name"
70+
value="show"
71+
>
72+
show
73+
</NRadio>
74+
</div>
75+
76+
<h3>background: </h3>
77+
<div class="flex space-x-4 whitespace-nowrap">
78+
<NRadio v-model="background" name="name" value="interactive">
79+
interactvie
80+
</NRadio>
81+
<NRadio
82+
v-model="background"
83+
name="name"
84+
value="non-interactive"
85+
>
86+
non-interactvie
87+
</NRadio>
88+
</div>
89+
</div>
90+
91+
<div class="mt-4 space-x-4">
92+
<NButton n="sm" class="ml-auto" @click="modelValue = true">
93+
Open modal
94+
</NButton>
95+
<NButton n="sm" @click="reset">
96+
Reset
97+
</NButton>
98+
</div>
99+
100+
<VueFinalModal
101+
v-model="modelValue"
102+
:modal-id="modalId"
103+
:teleport-to="teleportTo"
104+
:display-directive="displayDirective"
105+
:hide-overlay="hideOverlay"
106+
:overlay-transition="overlayTransition"
107+
:content-transition="contentTransition"
108+
:click-to-close="clickToClose"
109+
:esc-to-close="escToClose"
110+
:background="background"
111+
:lock-scroll="lockScroll"
112+
class="flex justify-center items-center"
113+
content-class="max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2"
114+
>
115+
<h1 class="text-xl">
116+
Hello World!
117+
</h1>
118+
<p>Magna deserunt nulla aliquip velit aute. Et occaecat elit nulla excepteur labore cupidatat. Duis culpa mollit commodo dolor qui Lorem qui laborum elit elit Lorem occaecat. Commodo eiusmod esse voluptate officia amet quis occaecat aliqua. Proident do irure amet ut occaecat dolor laboris consectetur.</p>
119+
<NButton @click="modelValue = false">
120+
Close
121+
</NButton>
122+
</VueFinalModal>
123+
124+
<ModalsContainer />
125+
</template>

‎packages/docs/content/4.use-cases/1.playground.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
head.title: 'Playground | Examples'
3+
---
4+
5+
# Playground
6+
7+
::code-group
8+
::code-block{label="Preview" preview}
9+
:playground
10+
::
11+
12+
::code-block{label="Playground.vue"}
13+
:code-block-file{path="./Playground.vue" language="vue"}
14+
::
15+
::

‎packages/docs/content/4.use-cases/1.use-cases/1.basic.md‎

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

‎packages/docs/content/4.use-cases/1.use-cases/_dir.yml‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/docs/content/4.use-cases/1.use-cases/2.step-by-step.md‎ renamed to ‎packages/docs/content/4.use-cases/2.step-by-step.md‎

File renamed without changes.

‎packages/docs/content/4.use-cases/1.use-cases/3.confirm-modal.md‎ renamed to ‎packages/docs/content/4.use-cases/3.confirm-modal.md‎

File renamed without changes.

‎packages/docs/content/4.use-cases/1.use-cases/4.form-modal.md‎ renamed to ‎packages/docs/content/4.use-cases/4.form-modal.md‎

File renamed without changes.

0 commit comments

Comments
 (0)