From e537b44f9817f210559735a2d64238cc9cad70ae Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Sat, 23 Nov 2024 13:30:41 +0800
Subject: [PATCH] feat(components): package managers

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 components/content/CodeGroup.vue              |  4 +-
 components/content/PmInstall.vue              | 32 ++++++++++
 components/content/PmRun.vue                  | 28 +++++++++
 components/content/PmX.vue                    | 28 +++++++++
 components/content/TabsInner.vue              |  7 +--
 composables/useConfig.ts                      |  2 +
 composables/usePm.ts                          | 58 ++++++++++++++++++
 content/1.getting-started/2.installation.md   | 42 +------------
 content/2.components/2.docs/code-group.md     | 60 +++++++++++--------
 content/2.components/2.docs/pm.md             | 50 ++++++++++++++++
 content/2.components/2.docs/stack.md          | 33 ++--------
 content/2.components/2.docs/tabs.md           |  5 +-
 .../3.api/1.configuration/1.shadcn-docs.md    |  3 +
 types/index.d.ts                              |  1 +
 14 files changed, 251 insertions(+), 102 deletions(-)
 create mode 100644 components/content/PmInstall.vue
 create mode 100644 components/content/PmRun.vue
 create mode 100644 components/content/PmX.vue
 create mode 100644 composables/usePm.ts
 create mode 100644 content/2.components/2.docs/pm.md

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;
     };