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

package/.playground/content/3.components/2.docs/code-snippet.md

@@ -0,0 +1,129 @@
+---
+title: Code Snippet
+icon: lucide:clipboard
+badges:
+  - value: 0.8.11
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeSnippet.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+::div{class="p-4"}
+  ::code-snippet
+  ---
+  file: /components/DarkModeToggle.vue
+  language: vue
+  ---
+  ::
+::
+```mdc
+::code-snippet
+---
+file: /components/DarkModeToggle.vue
+language: vue
+---
+::
+```
+::
+
+### Highlighting Lines
+
+::stack
+::div{class="p-4"}
+  ::code-snippet
+  ---
+  file: /composables/useBreadcrumb.ts
+  language: ts
+  title: useBreadcrumb
+  highlights: 9-11
+  meta: line-numbers height=300
+  ---
+  ::
+::
+```mdc
+::code-snippet
+---
+file: /composables/useBreadcrumb.ts
+language: ts
+title: useBreadcrumb
+highlights: 9-11
+meta: line-numbers height=300
+---
+::
+```
+::
+
+Translates to:
+
+`````md
+````ts [useBreadcrumb] {9-11} line-numbers height=300
+// code imported from /composables/useBreadcrumb.ts
+````
+`````
+
+### Using Offset Props
+
+::stack
+::div{class="p-4"}
+  ::code-snippet
+  ---
+  file: /composables/useBreadcrumb.ts
+  language: ts
+  start: 6
+  offset: 4
+  ---
+  ::
+::
+```mdc
+::code-snippet
+---
+file: /composables/useBreadcrumb.ts
+language: ts
+start: 6
+offset: 4
+---
+::
+```
+::
+
+### Fetching From a Remote URL
+
+::stack
+::div{class="p-4"}
+  ::code-snippet
+  ---
+  url: https://raw.githubusercontent.com/ZTL-UwU/shadcn-docs-nuxt/refs/heads/main/pages/index.vue
+  language: vue
+  ---
+  ::
+::
+```mdc
+::code-snippet
+---
+url: https://raw.githubusercontent.com/ZTL-UwU/shadcn-docs-nuxt/refs/heads/main/pages/index.vue
+language: vue
+---
+::
+```
+::
+
+## Props
+
+::alert{icon="lucide:info"}
+The `/nuxt.config.ts` file can not be imported due to framework constraints
+::
+
+::field-group
+  :field{name="file" type="string"}[The path to the imported file]
+  :field{name="url" type="string"}[A remote URL to fetch the code from]
+  :field{name="title" type="string"}[Code block title]
+  :field{name="language" type="string"}[Code block highlight language]
+  :field{name="highlights" type="string"}[Code block highlights lines]
+  :field{name="meta" type="string"}[Code block meta]
+  :field{name="start" type="number"}[Starting line index]
+  :field{name="offset" type="number"}[Number of lines to display from start]
+::

package/.playground/content/3.components/2.docs/field-group.md

@@ -0,0 +1,62 @@
+---
+title: Field Group
+icon: lucide:settings-2
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/field-group
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FieldGroup.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    ::field-group
+      ::field{name="withDefault" type="boolean" defaultValue="true"}
+      A field with a default value.
+      ::
+      ::field{name="requiredField" type="boolean" required}
+      A required field.
+      ::
+      ::field{name="clear (path?: string)" type="void"}
+      Clears form errors associated with a specific path. If no path is provided, clears all form errors.
+      ::
+      ::field{name="getErrors (path?: string)" type="FormError[]"}
+      Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
+      ::
+      ::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
+      Sets form errors for a given path. If no path is provided, overrides all errors.
+      ::
+      ::field{name="errors" type="Ref<FormError[]>"}
+      A reference to the array containing validation errors. Use this to access or manipulate the error information.
+      ::
+    ::
+  ::
+
+  ```mdc
+  ::field-group
+    ::field{name="withDefault" type="boolean" defaultValue="true"}
+    A field with a default value.
+    ::
+    ::field{name="requiredField" type="boolean" required}
+    A required field.
+    ::
+    ::field{name="clear (path?: string)" type="void"}
+    Clears form errors associated with a specific path. If no path is provided, clears all form errors.
+    ::
+    ::field{name="getErrors (path?: string)" type="FormError[]"}
+    Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
+    ::
+    ::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
+    Sets form errors for a given path. If no path is provided, overrides all errors.
+    ::
+    ::field{name="errors" type="Ref<FormError[]>"}
+    A reference to the array containing validation errors. Use this to access or manipulate the error information.
+    ::
+  ::
+  ```
+::

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

@@ -0,0 +1,39 @@
+---
+title: Field
+icon: lucide:settings-2
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/field
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Field.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    ::field{name="Field" type="string" defaultValue="'default'" required}
+    The _description_ can be set as prop or in the default slot with full **markdown** support.
+    ::
+  ::
+  ```mdc
+  ::field{name="Field" type="string" defaultValue="'default'" required}
+  The _description_ can be set as prop or in the default slot with full **markdown** support.
+  ::
+  ```
+::
+
+The text `required` is configurable in [`main.fieldRequiredText`](/development/configuration/overview#main).
+
+## Props
+
+::field-group
+  :field{name="name" type="string"}[Field name]
+  :field{name="type" type="string"}[Field type]
+  :field{name="description" type="string"}[Field description]
+  :field{name="defaultValue" type="string"}[Field default value]
+  :field{name="required" type="boolean"}[Whether the field is required]
+::

package/.playground/content/3.components/2.docs/file-tree.md

@@ -0,0 +1,144 @@
+---
+title: File Tree
+icon: lucide:folder-tree
+badges:
+  - value: 0.8.10
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FileTree.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+::div{class="p-4"}
+  ::file-tree
+  ---
+  tree:
+    - app:
+      - components:
+        - Header.vue
+        - Footer.vue
+      - composables:
+        - useErrorHandler.ts
+      - ^app.vue^
+    - docs:
+      - index.md
+  ---
+  ::
+::
+```mdc
+::file-tree
+---
+tree:
+  - app:
+    - components:
+      - Header.vue
+      - Footer.vue
+    - composables:
+      - useErrorHandler.ts
+    - ^app.vue^ # This is highlighted
+  - docs:
+    - index.md
+---
+::
+```
+::
+
+### Customizations
+
+::stack
+::div{class="p-4"}
+  ::file-tree
+  ---
+  title: File Tree Title
+  icon: lucide:folder-tree
+  autoSlash: false   # Whether to add a slash after every folder automatically
+  showArrow: true    # Whether to show the guide arrow
+  tree:
+    - components:
+      - layout:
+        - Header.vue
+        - Footer.vue
+        - ...
+      - content:
+        - Accordion.vue
+        - Alert.vue
+        - ProseCode.vue
+        - ...
+  ---
+  ::
+::
+```mdc
+::file-tree
+---
+title: File Tree Title
+icon: lucide:folder-tree
+autoSlash: false   # Whether to add a slash after every folder automatically
+showArrow: true    # Whether to show the collapse arrow
+tree:
+  - components:
+    - layout:
+      - Header.vue
+      - Footer.vue
+      - ...
+    - content:
+      - Accordion.vue
+      - Alert.vue
+      - ProseCode.vue
+      - ...
+---
+::
+```
+::
+
+### Disable Icons
+
+::stack
+::div{class="p-4"}
+  ::file-tree
+  ---
+  showIcon: false
+  tree:
+    - app:
+      - components:
+        - Header.vue
+        - Footer.vue
+      - composables:
+        - useErrorHandler.ts
+      - ^app.vue^
+    - docs:
+      - index.md
+  ---
+  ::
+::
+```mdc
+::file-tree
+---
+showIcon: false
+tree:
+  - app:
+    - components:
+      - Header.vue
+      - Footer.vue
+    - composables:
+      - useErrorHandler.ts
+    - ^app.vue^
+  - docs:
+    - index.md
+---
+::
+```
+::
+
+## Props
+
+::field-group
+  :field{name="tree"}[The file tree]
+  :field{name="title" type="string"}[File tree title]
+  :field{name="icon" type="string"}[File tree title icon]
+  :field{name="autoSlash" type="boolean" default-value="true"}[Whether to add a slash after every folder automatically]
+  :field{name="showArrow" type="boolean" default-value="false"}[Whether to show the collapse arrow]
+  :field{name="showIcon" type="boolean" default-value="true"}[Whether to show file & folder icons]
+::

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

@@ -0,0 +1,94 @@
+---
+title: Icon
+icon: /iconesjs.svg
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#icon
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Icon.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4 space-x-2"}
+    :icon{name="lucide:box"}
+    :icon{name="vscode-icons:file-type-js-official"}
+    :icon{name="vscode-icons:file-type-vue"}
+    :icon{name="vscode-icons:file-type-nuxt" size="30"}
+  ::
+
+  ```mdc
+  :icon{name="lucide:box"}
+  :icon{name="vscode-icons:file-type-js-official"}
+  :icon{name="vscode-icons:file-type-vue"}
+  :icon{name="vscode-icons:file-type-nuxt" size="30"}
+  ```
+::
+
+If you want to use other icons, it is highly recommended to install them locally, which is faster and more reliable on both SSR and client-side.
+
+```bash [Terminal]
+npm i -D @iconify-json/collection-name
+```
+
+`@iconify-json/lucide` and `@iconify-json/vscode-icons` are installed by default.
+
+### Smart Icon
+
+:badge[0.5.3]{variant="outline"}
+
+You can put iconify icons, emojis and urls in `icon`. Smart icon will render them automatically.
+
+::stack
+  ::div{class="p-4"}
+    **Iconify**
+    <div class="space-x-2">
+
+    :icon{name="lucide:box"}
+    :icon{name="vscode-icons:file-type-js-official"}
+    :icon{name="vscode-icons:file-type-vue" size=30}
+
+    </div>
+
+    **Emojis**
+    <div class="space-x-2">
+
+    :icon{name="😍"}
+    :icon{name="🚀"}
+    :icon{name="🎉" size=30}
+
+    </div>
+
+    **URL**
+    <div class="space-x-2">
+
+    :icon{name="/logo.svg"}
+    :icon{name="https://vueuse.org/favicon.svg" size=40}
+
+    </div>
+  ::
+
+  ```mdc
+  **Iconify**
+  :icon{name="lucide:box"}
+  :icon{name="vscode-icons:file-type-js-official"}
+  :icon{name="vscode-icons:file-type-vue"}
+
+  **Emojis**
+  :icon{name="😍"}
+  :icon{name="🚀"}
+  :icon{name="🎉" size=30}
+
+  **URL**
+  :icon{name="/logo.svg"}
+  :icon{name="https://vueuse.org/favicon.svg" size=40}
+  ```
+::
+
+::alert{to="https://github.com/nuxt-modules/icon" target="_blank"}
+The icon component uses **Nuxt Icon** under the hood. Check out the usage guide from Nuxt Icon.
+::

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

@@ -0,0 +1,67 @@
+---
+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
+---
+
+## Usage
+
+The package managers shown can be configured in [`main.pm`](/development/configuration/overview#main).
+
+### Install
+
+::stack
+  ::div{class="p-4"}
+    :pm-install{name="shadcn-docs-nuxt"}
+    :pm-install{name="shadcn-docs-nuxt" save-dev}
+    :pm-install
+    :pm-install{name="-g nuxi@latest"}
+  ::
+  ```mdc
+  :pm-install{name="shadcn-docs-nuxt"}
+  :pm-install{name="shadcn-docs-nuxt" save-dev}
+  :pm-install
+  :pm-install{name="-g nuxi@latest"}
+  ```
+::
+
+### Run
+
+::stack
+  ::div{class="p-4"}
+    :pm-run{script="dev"}
+    :pm-run{script="build --watch -o"}
+  ::
+  ```mdc
+  :pm-run{script="dev"}
+  :pm-run{script="build --watch -o"}
+  ```
+::
+
+### X
+
+::stack
+  ::div{class="p-4"}
+  :pm-x{command="nuxi@latest init <project-name>"}
+  ::
+  ```mdc
+  :pm-x{command="nuxi@latest init <project-name>"}
+  ```
+::
+
+### No Sync
+
+::stack
+  ::div{class="p-4"}
+    :pm-x{command="nuxi@latest init <project-name>" no-sync}
+  ::
+  ```mdc
+  :pm-x{command="nuxi@latest init <project-name>" no-sync}
+  ```
+::

package/.playground/content/3.components/2.docs/read-more.md

@@ -0,0 +1,44 @@
+---
+title: Read More
+icon: lucide:bookmark
+badges:
+  - value: undocs
+    to: https://undocs.pages.dev/guide/components#read-more
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/ReadMore.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  :::div{.p-5}
+  :read-more{to="/getting-started/writing/markdown"}
+  
+  :read-more{title="Nuxt website" to="https://nuxt.com/"}
+  
+  :read-more{icon="lucide:link" prefix="More information on" to="https://nuxt.com/"}
+  :::
+
+```mdc
+:read-more{to="/getting-started/writing/markdown"}
+:read-more{title="Nuxt website" to="https://nuxt.com/"}
+:read-more{icon="lucide:link" prefix="More information on" to="https://nuxt.com/"}
+```
+::
+
+## Props
+
+::field-group
+:field[Read More icon]{name="icon" type="string"}
+
+:field[Prefix text]{default-value="Read more at" name="prefix" type="string"}
+
+:field[Link URL]{name="to" type="string"}
+
+:field[Read More title]{name="title" type="string"}
+
+:field[A `target` attribute value to apply on the link]{name="target" type="Target"}
+::

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

@@ -0,0 +1,36 @@
+---
+title: Shortcut
+icon: lucide:keyboard
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/shortcut
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Shortcut.vue
+    target: _blank
+  - value: 0.6.3
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    :shortcut{value="meta"} :shortcut{value="K"} :br
+    :shortcut{value="xs" size="xs"} :shortcut{value="sm"} :shortcut{value="md" size="md"}
+  ::
+  ```mdc
+  :shortcut{value="meta"} :shortcut{value="K"}
+
+  :shortcut{value="xs" size="xs"} :shortcut{value="sm"} :shortcut{value="md" size="md"}
+  ```
+::
+
+You can put `meta` in the `value` field to automatically display either :shortcut{value="⌘"} or :shortcut{value="Ctrl"} based on the platform.
+
+## Props
+
+::field-group
+  :field{name="value" type="string"}[Text in the shortcut]
+  :field{name="size" type="'xs' | 'sm' | 'md'" default-value="'sm'"}
+::

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

@@ -0,0 +1,81 @@
+---
+title: Stack
+icon: lucide:rows-3
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Stack.vue
+    target: _blank
+  - value: 0.6.2
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4 md:p-8"}
+    ::stack
+      ::div{class="p-6 text-3xl font-bold"}
+      ✨ Introducing Inspira UI
+      ::
+      ```vue
+      <template>
+        <RadiantText
+          class="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400"
+          :duration="5"
+        >
+          <span class="text-3xl font-bold">✨ Introducing Inspira UI</span>
+        </RadiantText>
+      </template>
+      ```
+      :pm-install{name="@inspira-ui/plugins" save-dev}
+      :read-more{title="Inspira UI Docs" to="https://inspira-ui.com/components/radiant-text"}
+      ::card
+      ---
+      title: Commands
+      icon: lucide:square-terminal
+      ---
+      List of Nuxt CLI commands to init, analyze, build, and preview your application.
+      ::
+    ::
+  ::
+  ```mdc
+  ::stack
+    ::div{class="p-6 text-3xl font-bold"}
+    ✨ Introducing Inspira UI
+    ::
+    ```vue
+    <template>
+      <RadiantText
+        class="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400"
+        :duration="5"
+      >
+        <span class="text-3xl font-bold">✨ Introducing Inspira UI</span>
+      </RadiantText>
+    </template>
+    ```
+    :pm-install{name="@inspira-ui/plugins" save-dev}
+    :read-more{title="Inspira UI Docs" to="https://inspira-ui.com/components/radiant-text"}
+    ::card
+    ---
+    title: Commands
+    icon: lucide:square-terminal
+    ---
+    List of Nuxt CLI commands to init, analyze, build, and preview your application.
+    ::
+  ::
+  ```
+::
+
+Stackable components:
+
+- `div`
+- Code Blocks
+- `alert`
+- `callout`
+- `read-more`
+- `code-group`
+- `card`
+- `tabs`
+- `pm-install`
+- `pm-run`
+- `pm-x`