diff --git a/components/content/CodeGroup.vue b/components/content/CodeGroup.vue index 62ebd8a1..56547663 100644 --- a/components/content/CodeGroup.vue +++ b/components/content/CodeGroup.vue @@ -5,8 +5,9 @@ <script setup lang="ts"> import Tabs from './Tabs.vue'; -const { inStack = false } = defineProps<{ +const { inStack = false, sync } = defineProps<{ inStack?: boolean; + sync?: string; }>(); const _slots = useSlots(); @@ -17,6 +18,7 @@ function render() { { variant: 'card', inStack, + sync, }, () => slots, ); diff --git a/components/content/PmInstall.vue b/components/content/PmInstall.vue new file mode 100644 index 00000000..82063f06 --- /dev/null +++ b/components/content/PmInstall.vue @@ -0,0 +1,32 @@ +<template> + <MDC :value="md" class="[&:not(:first-child)]:mt-5" /> +</template> + +<script setup lang="ts"> +const { + inStack = false, + name, + sync = '_pm', + saveDev = false, + noSync, +} = defineProps<{ + inStack?: boolean; + name?: string; + sync?: string; + saveDev?: boolean; + noSync?: boolean; +}>(); + +const md = ` +::code-group{${inStack ? 'in-stack' : ''} ${noSync ? '' : `sync="${sync}"`}} +${ + usePm().packageManagers.value.map((pm) => { + const code = name + ? `${pm.command}${pm.install}${saveDev ? pm.saveDev : ''}${name}` + : `${pm.command}${pm.installEmpty}`; + return `\`\`\`bash [${pm.name}]\n${code}\n\`\`\`\n`; + }).join('\n') +} +:: +`; +</script> diff --git a/components/content/PmRun.vue b/components/content/PmRun.vue new file mode 100644 index 00000000..a154ae8b --- /dev/null +++ b/components/content/PmRun.vue @@ -0,0 +1,28 @@ +<template> + <MDC :value="md" class="[&:not(:first-child)]:mt-5" /> +</template> + +<script setup lang="ts"> +const { + inStack = false, + script, + sync = '_pm', + noSync, +} = defineProps<{ + inStack?: boolean; + script: string; + sync?: string; + noSync?: boolean; +}>(); + +const md = ` +::code-group{${inStack ? 'in-stack' : ''} ${noSync ? '' : `sync="${sync}"`}} +${ + usePm().packageManagers.value.map((pm) => { + const code = `${pm.command}${pm.run}${script}`; + return `\`\`\`bash [${pm.name}]\n${code}\n\`\`\`\n`; + }).join('\n') +} +:: +`; +</script> diff --git a/components/content/PmX.vue b/components/content/PmX.vue new file mode 100644 index 00000000..a6728424 --- /dev/null +++ b/components/content/PmX.vue @@ -0,0 +1,28 @@ +<template> + <MDC :value="md" class="[&:not(:first-child)]:mt-5" /> +</template> + +<script setup lang="ts"> +const { + inStack = false, + command, + sync = '_pm', + noSync, +} = defineProps<{ + inStack?: boolean; + command: string; + sync?: string; + noSync?: boolean; +}>(); + +const md = ` +::code-group{${inStack ? 'in-stack' : ''} ${noSync ? '' : `sync="${sync}"`}} +${ + usePm().packageManagers.value.map((pm) => { + const code = `${pm.x}${command}`; + return `\`\`\`bash [${pm.name}]\n${code}\n\`\`\`\n`; + }).join('\n') +} +:: +`; +</script> diff --git a/components/content/TabsInner.vue b/components/content/TabsInner.vue index d233dbd8..b907bf8d 100644 --- a/components/content/TabsInner.vue +++ b/components/content/TabsInner.vue @@ -203,11 +203,8 @@ const activeTabIndex = computed<number>({ if (sync === undefined || syncScopeIndex.value === -1) return activeTabIndexData.value; - for (const slot of slotsData) { - if (syncState.value[syncScopeIndex.value]?.value === slot.label) - return slot.index; - } - return activeTabIndexData.value; + return slotsData.find(x => x.label === syncState.value[syncScopeIndex.value]?.value)?.index + || activeTabIndexData.value; }, set(index: number) { if (sync === undefined) { diff --git a/composables/useConfig.ts b/composables/useConfig.ts index 8ee6c456..257b0635 100644 --- a/composables/useConfig.ts +++ b/composables/useConfig.ts @@ -51,6 +51,7 @@ const defaultConfig: DefaultConfig = { icon: 'lucide:square-pen', placement: ['docsFooter'], }, + pm: ['npm', 'pnpm', 'bun', 'yarn'], codeIcon: { 'package.json': 'vscode-icons:file-type-node', 'tsconfig.json': 'vscode-icons:file-type-tsconfig', @@ -90,6 +91,7 @@ const defaultConfig: DefaultConfig = { 'npx': 'vscode-icons:file-type-npm', 'yarn': 'vscode-icons:file-type-yarn', 'bun': 'vscode-icons:file-type-bun', + 'deno': 'vscode-icons:file-type-deno', 'yml': 'vscode-icons:file-type-yaml', 'json': 'vscode-icons:file-type-json', 'terminal': 'lucide:terminal', diff --git a/composables/usePm.ts b/composables/usePm.ts new file mode 100644 index 00000000..bea93198 --- /dev/null +++ b/composables/usePm.ts @@ -0,0 +1,58 @@ +const packageManagersCode: { + name: 'npm' | 'pnpm' | 'bun' | 'yarn'; + command: string; + install: string; + installEmpty: string; + run: string; + x: string; + saveDev: string; +}[] = [ + { + name: 'npm', + command: 'npm ', + install: 'i ', + installEmpty: 'install', + run: 'run ', + x: 'npx ', + saveDev: '-D ', + }, + { + name: 'pnpm', + command: 'pnpm ', + install: 'i ', + installEmpty: 'install', + run: 'run ', + x: 'pnpm dlx ', + saveDev: '-D ', + }, + { + name: 'bun', + command: 'bun ', + install: 'add ', + installEmpty: 'install', + run: 'run ', + x: 'bun x ', + saveDev: '-d ', + }, + { + name: 'yarn', + command: 'yarn ', + install: 'add ', + installEmpty: 'install', + run: 'run ', + x: 'yarn dlx ', + saveDev: '-D ', + }, +]; + +export function usePm() { + const { pm } = useConfig().value.main; + + const packageManagers = computed( + () => packageManagersCode.filter(x => pm.includes(x.name)), + ); + + return { + packageManagers, + }; +} diff --git a/content/1.getting-started/2.installation.md b/content/1.getting-started/2.installation.md index b5d70121..55e09813 100644 --- a/content/1.getting-started/2.installation.md +++ b/content/1.getting-started/2.installation.md @@ -9,17 +9,7 @@ icon: 'lucide:play' ::steps ### Get Starter Template -::code-group - ```bash [npm] - npx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter - ``` - ```bash [pnpm] - pnpm dlx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter - ``` - ```bash [bun] - bunx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter - ``` -:: +:pm-x{command="nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter"} ::alert Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/ZTL-UwU/shadcn-docs-nuxt-starter). @@ -27,37 +17,11 @@ Alternatively, you can clone or download the template from the [GitHub repo](htt ### Install Dependencies -::code-group - ```bash [npm] - npm install - ``` - ```bash [pnpm] - pnpm install - ``` - ```bash [bun] - bun install - ``` - ```bash [yarn] - yarn install - ``` -:: +:pm-install ### Development Server -::code-group - ```bash [npm] - npm run dev -- -o - ``` - ```bash [pnpm] - pnpm dev -o - ``` - ```bash [bun] - bun run dev -o - ``` - ```bash [yarn] - yarn dev --open - ``` -:: +:pm-run{script="dev"} ::alert{type="success" icon="lucide:circle-check"} Well done! A browser window should automatically open for http://localhost:3000. diff --git a/content/2.components/2.docs/code-group.md b/content/2.components/2.docs/code-group.md index a6c2f31f..c8985bb9 100644 --- a/content/2.components/2.docs/code-group.md +++ b/content/2.components/2.docs/code-group.md @@ -17,40 +17,48 @@ badges: ::code-group ::div{label="Preview" class="md:p-4"} ::code-group - ```bash [npm] - npm run dev + ```vue [app.vue] + <template> + <div> + <NuxtLayout> + <NuxtPage /> + </NuxtLayout> + </div> + </template> ``` - - ```bash [pnpm] - pnpm dev - ``` - - ```bash [yarn] - yarn dev - ``` - - ```bash [bun] - bun run dev + ```vue [pages/index.vue] + <template> + <div> + <h1>Welcome to the homepage</h1> + <AppAlert> + This is an auto-imported component + </AppAlert> + </div> + </template> ``` :: :: ```mdc [Code] ::code-group - ```bash [npm] - npm run dev + ```vue [app.vue] + <template> + <div> + <NuxtLayout> + <NuxtPage /> + </NuxtLayout> + </div> + </template> ``` - - ```bash [pnpm] - pnpm dev - ``` - - ```bash [yarn] - yarn dev - ``` - - ```bash [bun] - bun run dev + ```vue [pages/index.vue] + <template> + <div> + <h1>Welcome to the homepage</h1> + <AppAlert> + This is an auto-imported component + </AppAlert> + </div> + </template> ``` :: ``` diff --git a/content/2.components/2.docs/pm.md b/content/2.components/2.docs/pm.md new file mode 100644 index 00000000..d65358c9 --- /dev/null +++ b/content/2.components/2.docs/pm.md @@ -0,0 +1,50 @@ +--- +title: Package Manager +icon: lucide:package +description: '' +badges: + - value: Source + icon: lucide:code + to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/PmInstall.vue + target: _blank + - value: 0.8.0 +--- + +::code-group + ::div{label="Preview" class="md:p-4"} + #### Install + :pm-install{name="shadcn-docs-nuxt"} + :pm-install{name="shadcn-docs-nuxt" save-dev} + :pm-install + :pm-install{name="-g nuxi@latest"} + + #### Run + :pm-run{script="dev"} + :pm-run{script="build --watch -o"} + + #### X + :pm-x{command="nuxi@latest init <project-name>"} + + #### No Sync + :pm-x{command="nuxi@latest init <project-name>" no-sync} + :: + ```mdc [Code] + #### Install + :pm-install{name="shadcn-docs-nuxt"} + :pm-install{name="shadcn-docs-nuxt" save-dev} + :pm-install + :pm-install{name="-g nuxi@latest"} + + #### Run + :pm-run{script="dev"} + :pm-run{script="build --watch -o"} + + #### X + :pm-x{command="nuxi@latest init <project-name>"} + + #### No Sync + :pm-x{command="nuxi@latest init <project-name>" no-sync} + ``` +:: + +The package managers shown can be configured in [`main.pm`](/api/configuration/shadcn-docs#main). diff --git a/content/2.components/2.docs/stack.md b/content/2.components/2.docs/stack.md index 7ceccca4..877e8148 100644 --- a/content/2.components/2.docs/stack.md +++ b/content/2.components/2.docs/stack.md @@ -25,20 +25,7 @@ badges: </RadiantText> </template> ``` - ::code-group - ```bash [npm] - npm install -D @inspira-ui/plugins - ``` - ```bash [pnpm] - pnpm install -D @inspira-ui/plugins - ``` - ```bash [bun] - bun add -d @inspira-ui/plugins - ``` - ```bash [yarn] - yarn add --dev @inspira-ui/plugins - ``` - :: + :pm-install{name="@inspira-ui/plugins" save-dev} :read-more{title="Inspira UI Docs" to="https://inspira-ui.com/components/radiant-text"} ::card --- @@ -64,20 +51,7 @@ badges: </RadiantText> </template> ``` - ::code-group - ```bash [npm] - npm install -D @inspira-ui/plugins - ``` - ```bash [pnpm] - pnpm install -D @inspira-ui/plugins - ``` - ```bash [bun] - bun add -d @inspira-ui/plugins - ``` - ```bash [yarn] - yarn add --dev @inspira-ui/plugins - ``` - :: + :pm-install{name="@inspira-ui/plugins" save-dev} :read-more{title="Inspira UI Docs" to="https://inspira-ui.com/components/radiant-text"} ::card --- @@ -100,3 +74,6 @@ Stackable components: - `code-group` - `card` - `tabs` +- `pm-install` +- `pm-run` +- `pm-x` diff --git a/content/2.components/2.docs/tabs.md b/content/2.components/2.docs/tabs.md index b3605794..5384d6d7 100644 --- a/content/2.components/2.docs/tabs.md +++ b/content/2.components/2.docs/tabs.md @@ -1,9 +1,6 @@ --- title: Tabs icon: lucide:table-2 -navBadges: - - value: Update - type: lime badges: - value: Nuxt UI Pro to: https://ui.nuxt.com/pro/prose/tabs @@ -269,6 +266,8 @@ badges: ### Synced Tabs :badge[0.8.0]{variant="outline"} +:read-more{to="/components/docs/pm"} + ::code-group ::div{label="Preview" class="md:p-4"} #### Scope 1 diff --git a/content/3.api/1.configuration/1.shadcn-docs.md b/content/3.api/1.configuration/1.shadcn-docs.md index 9f7ac682..4c08b8c3 100644 --- a/content/3.api/1.configuration/1.shadcn-docs.md +++ b/content/3.api/1.configuration/1.shadcn-docs.md @@ -165,6 +165,9 @@ All configurable icons can be set to iconify icons, emojis and urls, using [smar ::field{name="fieldRequiredText" type="string" defaultValue="'required'"} The text shown in the [field](/getting-started/writing/components#field) component when a field is required. :: + ::field{name="pm" type="('npm' | 'pnpm' | 'bun' | 'yarn')[]" default-value="['npm', 'pnpm', 'bun', 'yarn']"} + Package managers shown in the [pm components](/components/docs/pm). + :: ::field{name="codeIcon" type="Record<string, string>"} The icon mapping for language / filename in the [code group](/getting-started/writing/components#code-group) header. :: diff --git a/types/index.d.ts b/types/index.d.ts index 0bd1d93b..d045a30e 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -63,6 +63,7 @@ interface DefaultConfig { icon: string; placement: ('docsFooter' | 'toc')[]; }; + pm: ('npm' | 'pnpm' | 'bun' | 'yarn')[]; codeIcon: { [key: string]: string; };