feat(components): package managers

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · Nov 23, 2024 · e537b44 · e537b44
1 parent c12bb0f
commit e537b44
Show file tree

Hide file tree

Showing 14 changed files with 251 additions and 102 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,55 +9,19 @@ 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).
 ::
 
 ### 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
@@ -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
@@ -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).