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

package/.playground/content/3.components/1.index.md

@@ -0,0 +1,187 @@
+---
+title: MDC Syntax
+icon: i-zondicons:dots-horizontal-double
+description: MarkDown Components (MDC) supercharges regular Markdown to write
+  interactive components.
+---
+
+## `:` Inline Components
+
+Inline components are entries that will stick inside the parent paragraph. Like spans, emojis, icons, etc. Inline components can be defined by a single `:` followed by the component name.
+
+```md
+A simple :inline-component
+```
+
+You may want to pass some text into an inline component; you can do it using the `[TEXT]` syntax.
+
+```md
+A simple :inline-component[John Doe]
+```
+
+If you want to use an inline component followed by specific characters like `-`, `_`, or `:`, you can use a dummy props specifier after it.
+
+```md
+How to say :hello{}-world in Markdown
+```
+
+In this example, `:hello{}` will search for the `<Hello />` component, and `-world` will be plain text.
+
+::alert
+Note: If you put an inline component alone in a single line, it will be transformed into a block component. This is sugar syntax for block components.
+
+```md
+Paragraph a
+
+:block-component
+
+Paragraph b
+```
+::
+
+## `::` Block Components
+
+Block components are components that accept Markdown content or another component as a slot.
+
+Block components are defined by the `::` identifier.
+
+```md
+::card
+The content of the card
+::
+```
+
+Block components can be used without any content.
+
+```md
+::card
+::
+```
+
+Or with sugar syntax. Note that in sugar syntax, it is important to put the component alone on a separate line.
+
+```md
+A paragraph
+
+:card
+```
+
+## `#` Slots
+
+Block components can accept slots (like Vue slots) with different names. The content of these slots can be anything from a normal markdown paragraph to a nested block component.
+
+- The `default` slot renders the top-level content inside the block component.
+- Named slots use the `#` identifier to render the corresponding content.
+
+```md
+::hero
+Default slot text
+
+#description
+This will be rendered inside the `description` slot.
+::
+```
+
+## `:::` Nesting
+
+MDC supports nested components inside slots by indenting them. To make nested components visually distinguishable, you can indent nested components and add more `:` when you define them.
+
+```md
+::hero
+  :::card
+    A nested card
+
+    ::::card
+      A super nested card
+    ::::
+  :::
+::
+```
+
+## `[]` Span
+
+To create inline spans in your text, you can use the `[]` identifier.
+
+```md
+Hello [World]
+```
+
+This syntax is useful in combination with inline props to make text visually different from the rest of the paragraph. Check out the inline props section to read more about props.
+
+```md
+Hello [World]{.bg-blue-500}!
+```
+
+## `{}` Inline Props
+
+Using the inline props syntax, you can pass props and attributes to your components. MDC goes a step further and allows you to pass attributes to markdown native elements like images, links, bold texts, and more.
+
+To define properties for a component or a markdown element, you need to create a props scope `{}` exactly after the component/element definition. Then you can define the properties inline within this scope using a `key=value` syntax.
+
+```md
+Inline :component{key="value" key2=value2}
+
+::block-component{no-border title="My Component"}
+::
+
+[Link](https://nuxt.com){class="nuxt"}
+
+![Nuxt Logo](https://nuxt.com/assets/design-kit/logo/icon-green.svg){class=".nuxt-logo"}
+
+`code`{style="color: red"}
+
+_italic_{style="color: blue"}
+
+**bold**{style="color: blue"}
+```
+
+There are also a couple of sugar syntaxes for common use-cases:
+
+- `id` attribute: `_italic_{#the_italic_text}`
+- `class` attribute: `**bold**{.bold .text.with_attribute}`
+- No value (boolean props): `:component{no-border}`
+- Single string without any space: `**bold**{class=red}`
+
+If you want to pass arrays or objects as props to components, you can pass them as a JSON string and prefix the prop key with a colon to automatically decode the JSON string. Note that in this case, you should use single quotes for the value string so you can use double quotes to pass a valid JSON string:
+
+```md
+::dropdown{:items='["Nuxt", "Vue", "React"]'}
+String Array
+::
+
+::dropdown{:items='[1,2,3.5]'}
+Number Array
+::
+
+::chart{:options='{"responsive": true, "scales": {"y": {"beginAtZero": true}}}'}
+Object
+::
+```
+
+## `---` Yaml Props
+
+The YAML method uses the `---` identifier to declare one prop per line, which can be useful for readability.
+
+```md
+::icon-card
+---
+icon: IconNuxt
+description: Harness the full power of Nuxt and the Nuxt ecosystem.
+title: Nuxt Architecture.
+---
+::
+```
+
+## `{{}}` Binding Variables
+
+The `{{ $doc.variable || 'defaultValue' }}` syntax allows you to bind variables in your Markdown content. This is especially useful when you want to dynamically insert values into your document.
+
+To use this syntax, simply enclose the variable name within double curly braces, like so:
+
+```md
+---
+color: blue
+---
+
+# The color is {{ $doc.color || 'red' }}.
+```

package/.playground/content/3.components/2.docs/_dir.yml

@@ -0,0 +1,3 @@
+title: Docs Components
+icon: lucide:book
+navigation.redirect: /components/docs/alert

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

@@ -0,0 +1,152 @@
+---
+title: Alert
+icon: lucide:triangle-alert
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#alert
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Alert.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+  ::alert{icon="lucide:info"}
+    A **default** alert with `code` and a [link](/).
+  ::
+
+  ::alert{type="success" icon="lucide:info"}
+    A **success** alert with `code` and a [link](/).
+  ::
+  ::
+  ```mdc
+  ::alert{icon="lucide:info"}
+    A **default** alert with `code` and a [link](/).
+  ::
+
+  ::alert{type="success" icon="lucide:info"}
+    A **success** alert with `code` and a [link](/).
+  ::
+  ```
+::
+
+### Link
+
+::stack
+  ::div{class="p-4"}
+  ::alert{to="/getting-started/introduction" icon="lucide:rocket"}
+    An **internal link** alert.
+  ::
+  ::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
+    An **external link** alert.
+  ::
+  ::
+  ```mdc
+  ::alert{to="/getting-started/introduction" icon="lucide:rocket"}
+    An **internal link** alert.
+  ::
+  ::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
+    An **external link** alert.
+  ::
+  ```
+::
+
+### Variants
+
+::tabs{variant="line"}
+  ::stack{label="info" icon="lucide:info"}
+    ::div{class="p-3"}
+    ::alert{type="info" icon="lucide:info"}
+      An **info** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
+    ::alert{type="info" icon="lucide:info"}
+      An **info** alert with `code` and a [link](/).
+    ::
+    ```
+  ::
+
+  ::stack{label="success" icon="lucide:lightbulb"}
+    ::div{class="p-3"}
+    ::alert{type="success" icon="lucide:lightbulb"}
+      A **success** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
+    ::alert{type="success" icon="lucide:lightbulb"}
+      A **success** alert with `code` and a [link](/).
+    ::
+    ```
+  ::
+
+  ::stack{label="warning" icon="lucide:triangle-alert"}
+    ::div{class="p-3"}
+    ::alert{type="warning" icon="lucide:triangle-alert"}
+      A **warning** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
+    ::alert{type="warning" icon="lucide:triangle-alert"}
+      A **warning** alert with `code` and a [link](/).
+    ::
+    ```
+  ::
+
+  ::stack{label="danger" icon="lucide:circle-x"}
+    ::div{class="p-3"}
+    ::alert{type="danger" icon="lucide:circle-x"}
+      A **danger** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
+    ::alert{type="danger" icon="lucide:circle-x"}
+      A **danger** alert with `code` and a [link](/).
+    ::
+    ```
+  ::
+
+  ::stack{label="example" icon="lucide:test-tube"}
+    ::div{class="p-3"}
+    ::alert{type="example" icon="lucide:test-tube"}
+      An **example** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
+    ::alert{type="example" icon="lucide:test-tube"}
+      An **example** alert with `code` and a [link](/).
+    ::
+    ```
+  ::
+::
+
+### Title
+
+::stack
+  ::div{class="p-4"}
+  ::alert{title="Title" icon="lucide:layout-list" type="info"}
+    An alert with a title.
+  ::
+  ::
+  ```mdc
+  ::alert{title="Title" icon="lucide:layout-list" type="info"}
+    An alert with a title.
+  ::
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="title" type="string"}[Alert title]
+  :field{name="icon" type="string"}[Alert icon]
+  :field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'secondary'" default-value="'default'"}
+  :field{name="to" type="string"}[Link URL]
+  :field{name="target" type="Target"}[A `target` attribute value to apply on the link]
+  :field{name="external" type="boolean"}[Alias to `target='_blank'`]
+  :field{name="showLinkIcon" type="boolean" default-value="true"}[Whether to show the link indicator :icon{name="lucide:arrow-up-right"}]
+::

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

@@ -0,0 +1,131 @@
+---
+title: Badge
+icon: lucide:badge
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#badge
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Badge.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-3"}
+  ::badge
+    Default
+  ::
+  ::badge{size="sm"}
+    Small
+  ::
+  ::badge{size="lg"}
+    Large
+  ::
+  ::
+  ```mdc
+  ::badge
+    Default
+  ::
+  ::badge{size="sm"}
+    Small
+  ::
+  ::badge{size="lg"}
+    Large
+  ::
+  ```
+::
+
+### Types
+
+::stack{label="default"}
+  ::div{class="p-3"}
+    :badge[Default]
+    :badge[Primary]{type="primary"}
+    :badge[Secondary]{type="secondary"}
+    :badge[Info]{type="info"}
+    :badge[Warning]{type="warning"}
+    :badge[Success]{type="success"}
+    :badge[Danger]{type="danger"}
+    :badge[New]{type="new"}
+  ::
+
+  ```mdc
+  :badge[Default]
+  :badge[Info]{type="info"}
+  :badge[Warning]{type="warning"}
+  :badge[Success]{type="success"}
+  :badge[Danger]{type="danger"}
+  :badge[New]{type="new"}
+  ```
+::
+
+### Variants
+
+::stack{label="default"}
+  ::div{class="p-3"}
+    :badge[Default]{variant="fill"}
+    :badge[Primary]{type="primary" variant="fill"}
+    :badge[Secondary]{type="secondary" variant="fill"}
+    :badge[Info]{type="info" variant="fill"}
+    :badge[Warning]{type="warning" variant="fill"}
+    :badge[Success]{type="success" variant="fill"}
+    :badge[Danger]{type="danger" variant="fill"}
+    :badge[New]{type="new" variant="fill"}
+  ::
+
+  ::div{class="p-3"}
+    :badge[Default]{variant="outline"}
+    :badge[Primary]{type="primary" variant="outline"}
+    :badge[Secondary]{type="secondary" variant="outline"}
+    :badge[Info]{type="info" variant="outline"}
+    :badge[Warning]{type="warning" variant="outline"}
+    :badge[Success]{type="success" variant="outline"}
+    :badge[Danger]{type="danger" variant="outline"}
+    :badge[New]{type="new" variant="outline"}
+  ::
+
+  ::div{class="p-3"}
+    :badge[Default]{variant="text"}
+    :badge[Primary]{type="primary" variant="text"}
+    :badge[Secondary]{type="secondary" variant="text"}
+    :badge[Info]{type="info" variant="text"}
+    :badge[Warning]{type="warning" variant="text"}
+    :badge[Success]{type="success" variant="text"}
+    :badge[Danger]{type="danger" variant="text"}
+    :badge[New]{type="new" variant="text"}
+  ::
+
+  ```mdc
+  :badge[...]{type="..." variant="fill"}
+  :badge[...]{type="..." variant="outline"}
+  :badge[...]{type="..." variant="text"}
+  ```
+::
+
+### Link
+
+::stack
+  ::div{class="p-3"}
+  ::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+  Link
+  ::
+  ::
+  ```mdc
+  ::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+  Link
+  ::
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'lime'" default-value="'default'"}
+  :field{name="variant" type="'default' | 'secondary' | 'destructive' | 'outline'" default-value="'default'"}
+  :field{name="size" type="'md' | 'sm'" default-value="'md'"}
+  :field{name="to" type="string"}[Link URL]
+  :field{name="target" type="Target"}[A `target` attribute value to apply on the link]
+::

package/.playground/content/3.components/2.docs/button-link.md

@@ -0,0 +1,53 @@
+---
+title: Button Link
+icon: lucide:external-link
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#buttonlink
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/ButtonLink.vue
+    target: _blank
+  - value: 0.6.5
+---
+
+## Usage
+
+::stack
+  ::div{class="p-3 flex gap-4"}
+  ::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
+    Get Started
+  ::
+  ::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+    GitHub
+  ::
+  ::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
+    Ghost
+  ::
+  ::
+  ```mdc
+  ::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
+    Get Started
+  ::
+  ::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+    GitHub
+  ::
+  ::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
+    Ghost
+  ::
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="variant" type="'default' | 'secondary' | 'link' | 'destructive' | 'outline' | 'ghost'" default-value="'default'"}
+  :field{name="size" type="'default' | 'icon' | 'sm' | 'xs' | 'lg'" default-value="'default'"}
+  :field{name="leftIcon" type="string"}[Icon on the left]
+  :field{name="rightIcon" type="string"}[Icon on the right]
+  :field{name="to" type="string"}[Link URL]
+  :field{name="href" type="string"}[Alias to `to`]
+  :field{name="target" type="Target"}[A `target` attribute value to apply on the link]
+  :field{name="blank" type="boolean"}[Alias to `target='_blank'`]
+::

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

@@ -0,0 +1,16 @@
+---
+title: Callout
+icon: lucide:megaphone
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/callout
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Callout.vue
+    target: _blank
+---
+
+::alert{to="/components/docs/alert"}
+`::callout`{lang="mdc"} is an alias to `::alert`{lang="mdc"}.
+::

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

@@ -0,0 +1,77 @@
+---
+title: Code Group
+icon: lucide:code-xml
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/code-group
+    target: _blank
+  - value: Docus
+    to: https://docus.dev/api/components#codegroup
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeGroup.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    ::code-group
+      ```vue [app.vue]
+      <template>
+        <div>
+          <NuxtLayout>
+            <NuxtPage />
+          </NuxtLayout>
+        </div>
+      </template>
+      ```
+
+      ```vue [pages/index.vue]
+      <template>
+        <div>
+          <h1>Welcome to the homepage</h1>
+          <AppAlert>
+            This is an auto-imported component
+          </AppAlert>
+        </div>
+      </template>
+      ```
+    ::
+  ::
+
+  ```mdc
+  ::code-group
+    ```vue [app.vue]
+    <template>
+      <div>
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
+      </div>
+    </template>
+    ```
+
+    ```vue [pages/index.vue]
+    <template>
+      <div>
+        <h1>Welcome to the homepage</h1>
+        <AppAlert>
+          This is an auto-imported component
+        </AppAlert>
+      </div>
+    </template>
+    ```
+  ::
+  ```
+::
+
+::alert{to="/components/docs/tabs"}
+`::code-group`{lang="mdc"} is a wrapper around `::tabs{variant="card"}`{lang="mdc"}.
+::
+
+## Props
+
+:field{name="sync" type="string"}[Sync scope for `::tabs`]