@wordup-md/nuxt-layer-shadcn-unocss 0.2.0

package/.playground/content/3.components/2.docs/steps.md

@@ -0,0 +1,148 @@
+---
+title: Steps
+icon: lucide:arrow-down-0-1
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Steps.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4 md:p-6"}
+    ::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
+        ```
+      ::
+
+      ::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
+        ```
+      ::
+
+      ### Development Server
+
+      ::code-group
+        ```bash [npm]
+        npm run dev -- -o
+        ```
+        ```bash [pnpm]
+        pnpm dev -o
+        ```
+        ```bash [bun]
+        bun run dev -o
+        ```
+      ::
+    ::
+  ::
+  ```mdc height=400
+  ::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
+      ```
+    ::
+
+    ::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
+      ```
+    ::
+
+    ### Development Server
+
+    ::code-group
+      ```bash [npm]
+      npm run dev -- -o
+      ```
+      ```bash [pnpm]
+      pnpm dev -o
+      ```
+      ```bash [bun]
+      bun run dev -o
+      ```
+    ::
+  ::
+  ```
+::
+
+### Multi-level headings
+:badge[0.4.6]{variant="outline"}
+
+::stack
+  ::div{class="p-4 md:p-6"}
+    ::steps{level=5}
+      ##### Specify the level of headings to use
+
+      ```mdc
+      ::steps{level=5}
+      ```
+
+      ##### Available Headings
+
+      `h1` through `h6`. Defaults to `h3`.
+    ::
+  ::
+  ```mdc
+  ::steps{level=5}
+    ##### Multi-level headings
+
+    ```mdc
+    ::steps{level=5}
+    ```
+
+    ##### Available Headings
+
+    `h1` through `h6`. Defaults to `h3`.
+  ::
+  ```
+::
+
+## Props
+
+:field{name="level" type="number"}[Specify the level of headings to use]

package/.playground/content/3.components/2.docs/tabs.md

@@ -0,0 +1,375 @@
+---
+title: Tabs
+icon: lucide:table-2
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/tabs
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Tabs.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    ::tabs
+      ::div{label="PostgreSQL" icon="lucide:database"}
+      ### PostgreSQL column types
+
+      ```ts
+      import { integer, pgTable } from 'drizzle-orm/pg-core';
+
+      export const table = pgTable('table', {
+        int: integer('int')
+      });
+      ```
+      ::
+      ::div{label="MySQL"}
+      ### MySQL column types
+
+      ```ts
+      import { int, mysqlTable } from 'drizzle-orm/mysql-core';
+
+      const table = mysqlTable('table', {
+        int: int('int')
+      });
+      ```
+      ::
+      ::div{label="SQLite"}
+      ### SQLite column types
+
+      ```ts
+      import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
+
+      const table = sqliteTable('table', {
+        id: integer('id')
+      });
+
+      // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
+      integer('id', { mode: 'number' });
+      integer('id', { mode: 'boolean' });
+      integer('id', { mode: 'timestamp_ms' });
+      integer('id', { mode: 'timestamp' }); // Date
+      ```
+      ::
+    ::
+  ::
+  ```mdc height=300
+  ::tabs
+    ::div{label="PostgreSQL" icon="lucide:database"}
+    ### PostgreSQL column types
+
+    ```ts
+    import { integer, pgTable } from 'drizzle-orm/pg-core';
+
+    export const table = pgTable('table', {
+      int: integer('int')
+    });
+    ```
+    ::
+    ::div{label="MySQL"}
+    ### MySQL column types
+
+    ```ts
+    import { int, mysqlTable } from 'drizzle-orm/mysql-core';
+
+    const table = mysqlTable('table', {
+      int: int('int')
+    });
+    ```
+    ::
+    ::div{label="SQLite"}
+    ### SQLite column types
+
+    ```ts
+    import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
+
+    const table = sqliteTable('table', {
+      id: integer('id')
+    });
+
+    // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
+    integer('id', { mode: 'number' });
+    integer('id', { mode: 'boolean' });
+    integer('id', { mode: 'timestamp_ms' });
+    integer('id', { mode: 'timestamp' }); // Date
+    ```
+    ::
+  ::
+  ```
+::
+
+### Card Style
+
+::stack
+  ::div{class="p-4"}
+    ::tabs{variant="card"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ::div{label="Tab 2" icon="lucide:atom"}
+      This is Tab #2
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+  ::
+  ```mdc
+  ::tabs{variant="card"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ::div{label="Tab 2" icon="lucide:atom"}
+    This is Tab #2
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+  ```
+::
+
+### Line Style
+:badge[0.6.4]{variant="outline"}
+
+::stack
+  ::div{class="p-4"}
+    ::tabs{variant="line"}
+      ::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-sm"}
+        :badge[Badge]
+      ::
+      ::div{label="Code"}
+        ```tsx
+        import { Badge } from "@/components/ui/badge"
+
+        export function BadgeDemo() {
+          return <Badge>Badge</Badge>
+        }
+        ```
+      ::
+    ::
+  ::
+  ```mdc
+  ::tabs{variant="line"}
+    ::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-sm"}
+      :badge[Badge]
+    ::
+    ::div{label="Code"}
+      ```tsx
+      import { Badge } from "@/components/ui/badge"
+
+      export function BadgeDemo() {
+        return <Badge>Badge</Badge>
+      }
+      ```
+    ::
+  ::
+  ```
+::
+
+### Combobox Style
+:badge[0.7.5]{variant="outline"}
+
+::stack
+  ::div{class="p-4"}
+    ::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
+      ::div{label="PostgreSQL"}
+      ### PostgreSQL column types
+
+      ```ts
+      import { integer, pgTable } from 'drizzle-orm/pg-core';
+
+      export const table = pgTable('table', {
+        int: integer('int')
+      });
+      ```
+      ::
+      ::div{label="MySQL"}
+      ### MySQL column types
+
+      ```ts
+      import { int, mysqlTable } from 'drizzle-orm/mysql-core';
+
+      const table = mysqlTable('table', {
+        int: int('int')
+      });
+      ```
+      ::
+      ::div{label="SQLite"}
+      ### SQLite column types
+
+      ```ts
+      import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
+
+      const table = sqliteTable('table', {
+        id: integer('id')
+      });
+
+      // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
+      integer('id', { mode: 'number' });
+      integer('id', { mode: 'boolean' });
+      integer('id', { mode: 'timestamp_ms' });
+      integer('id', { mode: 'timestamp' }); // Date
+      ```
+      ::
+    ::
+  ::
+  ```mdc height=300
+  ::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
+    ::div{label="PostgreSQL"}
+    ### PostgreSQL column types
+
+    ```ts
+    import { integer, pgTable } from 'drizzle-orm/pg-core';
+
+    export const table = pgTable('table', {
+      int: integer('int')
+    });
+    ```
+    ::
+    ::div{label="MySQL"}
+    ### MySQL column types
+
+    ```ts
+    import { int, mysqlTable } from 'drizzle-orm/mysql-core';
+
+    const table = mysqlTable('table', {
+      int: int('int')
+    });
+    ```
+    ::
+    ::div{label="SQLite"}
+    ### SQLite column types
+
+    ```ts
+    import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
+
+    const table = sqliteTable('table', {
+      id: integer('id')
+    });
+
+    // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
+    integer('id', { mode: 'number' });
+    integer('id', { mode: 'boolean' });
+    integer('id', { mode: 'timestamp_ms' });
+    integer('id', { mode: 'timestamp' }); // Date
+    ```
+    ::
+  ::
+  ```
+::
+
+### Synced Tabs
+:badge[0.8.0]{variant="outline"}
+
+:read-more{to="/components/docs/pm"}
+
+::stack
+  ::div{class="p-4 md:p-8"}
+    #### Scope 1
+    ::tabs{variant="card" sync="your-scope-name"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+    ::tabs{variant="card" sync="your-scope-name"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ::div{label="Tab 2" icon="lucide:atom"}
+      This is Tab #2
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+
+    #### Scope 2
+    ::tabs{variant="line" sync="scope2"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ::div{label="Tab 2" icon="lucide:atom"}
+      This is Tab #2
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+    ::tabs{variant="separate" sync="scope2"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ::div{label="Tab 2" icon="lucide:atom"}
+      This is Tab #2
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+  ::
+  ```mdc height=400
+  #### Scope 1
+  ::tabs{variant="card" sync="your-scope-name"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+  ::tabs{variant="card" sync="your-scope-name"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ::div{label="Tab 2" icon="lucide:atom"}
+    This is Tab #2
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+
+  #### Scope 2
+  ::tabs{variant="line" sync="scope2"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ::div{label="Tab 2" icon="lucide:atom"}
+    This is Tab #2
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+  ::tabs{variant="separate" sync="scope2"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ::div{label="Tab 2" icon="lucide:atom"}
+    This is Tab #2
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="variant" type="'separate' | 'card' | 'line' | 'combobox'" default-value="'separate'"}
+  :field{name="padded" type="boolean" default-value="true"}
+  :field{name="disableSearch" type="boolean" default-value="false"}[For combobox variant]
+  :field{name="searchPlaceholder" type="string" default-value="'Search Tab...'"}[For combobox variant]
+  :field{name="searchEmpty" type="string" default-value="'No tab found.'"}[For combobox variant]
+  :field{name="sync" type="string"}[Sync scope]
+::

package/.playground/content/3.components/3.page/_dir.yml

@@ -0,0 +1,2 @@
+title: Page Components
+icon: lucide:laptop-minimal

package/.playground/content/3.components/3.page/accordion.md

@@ -0,0 +1,74 @@
+---
+title: Accordion
+icon: lucide:layout-list
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Accordion.vue
+    target: _blank
+  - value: 0.5.0
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    ::accordion{default-value="first-item" collapsible}
+      ::accordion-item{value="first-item"}
+      #title
+      Is it accessible?
+
+      #content
+      Yes. It adheres to the WAI-ARIA design pattern.
+      ::
+      ::accordion-item
+      #title
+      Is it unstyled?
+
+      #content
+      Yes. It's unstyled by default, giving you freedom over the look and feel.
+      ::
+      :accordion-item{title="Can it be animated?" content="Yes! You can use the transition prop to configure the animation."}
+    ::
+  ::
+  ```mdc
+  ::accordion{default-value="first-item" collapsible}
+    ::accordion-item{value="first-item"}
+    #title
+    Is it accessible?
+
+    #content
+    Yes. It adheres to the WAI-ARIA design pattern.
+    ::
+
+    ::accordion-item
+    #title
+    Is it unstyled?
+
+    #content
+    Yes. It's unstyled by default, giving you freedom over the look and feel.
+    ::
+    :accordion-item{title="Can it be animated?" content="Yes! You can use the transition prop to configure the animation."}
+  ::
+  ```
+::
+
+The `value` prop in `::accordion-item`{lang="mdc"} is auto-generated by default. You can set them to other _unique_ values and put them in the `default-value` prop of `::accordion`{lang="mdc"}.
+
+## Props
+
+#### `::accordion-item`{lang="mdc"}
+
+::field-group
+  :field{name="type" type="'single' | 'multiple'" default-value="'single'"}
+  :field{name="collapsible" type="boolean" default-value="undefined"}[Whether the items can be collapsed]
+  :field{name="defaultValue" type="string | string[]"}[Default open item]
+::
+
+#### `::accordion`{lang="mdc"}
+
+::field-group
+  :field{name="value" type="string"}[Item value]
+  :field{name="title" type="string"}[Item title]
+  :field{name="content" type="string"}[Item content]
+::

package/.playground/content/3.components/3.page/card-group.md

@@ -0,0 +1,115 @@
+---
+title: Card Group
+icon: lucide:layout-grid
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/card-group
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CardGroup.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    ::card-group
+      ::card
+      ---
+      title: Components
+      icon: lucide:box
+      to: https://nuxt.com/docs/api/components/client-only
+      target: _blank
+      ---
+      Explore Nuxt built-in components for pages, layouts, head, and more.
+      ::
+      ::card
+      ---
+      title: Composables
+      icon: lucide:arrow-right-left
+      to: https://nuxt.com/docs/api/composables/use-app-config
+      target: _blank
+      ---
+      Discover Nuxt composable functions for data-fetching, head management and more.
+      ::
+      ::card
+      ---
+      title: Utils
+      icon: lucide:scissors
+      to: https://nuxt.com/docs/api/utils/dollarfetch
+      target: _blank
+      ---
+      Learn about Nuxt utility functions for navigation, error handling and more.
+      ::
+      ::card
+      ---
+      title: Commands
+      icon: lucide:square-terminal
+      to: https://nuxt.com/docs/api/commands/add
+      target: _blank
+      ---
+      List of Nuxt CLI commands to init, analyze, build, and preview your application.
+      ::
+    ::
+  ::
+  ```mdc
+  ::card-group
+    ::card
+    ---
+    title: Components
+    icon: lucide:box
+    to: https://nuxt.com/docs/api/components/client-only
+    target: _blank
+    ---
+    Explore Nuxt built-in components for pages, layouts, head, and more.
+    ::
+
+    ::card
+    ---
+    title: Composables
+    icon: lucide:arrow-right-left
+    to: https://nuxt.com/docs/api/composables/use-app-config
+    target: _blank
+    ---
+    Discover Nuxt composable functions for data-fetching, head management and more.
+    ::
+
+    ::card
+    ---
+    title: Utils
+    icon: lucide:scissors
+    to: https://nuxt.com/docs/api/utils/dollarfetch
+    target: _blank
+    ---
+    Learn about Nuxt utility functions for navigation, error handling and more.
+    ::
+
+    ::card
+    ---
+    title: Commands
+    icon: lucide:square-terminal
+    to: https://nuxt.com/docs/api/commands/add
+    target: _blank
+    ---
+    List of Nuxt CLI commands to init, analyze, build, and preview your application.
+    ::
+  ::
+  ```
+::
+
+## Automatically bind data from route
+
+You can automatically bind data from route by using the `data` prop.
+
+::stack
+  ::div{class="p-4"}
+  ::card-group{data="/components/page/"}
+  ::
+  ::
+  ```mdc
+  ::card-group{data="/components/page/"}
+  ::
+  ```
+::