Skip to content

Commit

Permalink
feat(component): collapsible
Browse files Browse the repository at this point in the history
Signed-off-by: ZTL-UwU <[email protected]>
  • Loading branch information
ZTL-UwU committed Oct 7, 2024
1 parent a314deb commit 8b659d8
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 14 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ MIT
[npm-version-src]: https://img.shields.io/npm/v/shadcn-docs-nuxt?style=flat&colorA=18181b&colorB=18181b
[npm-version-href]: https://npmjs.com/package/shadcn-docs-nuxt
[npm-downloads-src]: https://img.shields.io/npm/dm/shadcn-docs-nuxt?style=flat&colorA=18181b&colorB=18181b
[npm-downloads-href]: https://npmjs.com/package/shadcn-docs-nuxt
[npm-downloads-href]: https://npm.chart.dev/shadcn-docs-nuxt?primary=neutral&gray=zinc&theme=light
[license-src]: https://img.shields.io/github/license/ZTL-UwU/shadcn-docs-nuxt.svg?style=flat&colorA=18181b&colorB=18181b
[license-href]: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/LICENSE
[nuxt-src]: https://img.shields.io/badge/Built%20With%20Nuxt-18181B?logo=nuxt.js
Expand Down
Binary file modified bun.lockb
Binary file not shown.
53 changes: 53 additions & 0 deletions components/content/Collapsible.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<template>
<UiCollapsible v-if="variant === 'card'" v-model:open="isOpen" class="space-y-2">
<div class="flex items-center justify-between space-x-4">
<h4 class="text-sm font-semibold">
<ContentSlot :use="$slots.title" unwrap="p" />
{{ title }}
</h4>
<UiCollapsibleTrigger as-child>
<UiButton variant="ghost" size="sm" class="w-9 p-0">
<Icon name="lucide:chevrons-up-down" />
<span class="sr-only">Toggle</span>
</UiButton>
</UiCollapsibleTrigger>
</div>

<UiCollapsibleContent class="space-y-2">
<div class="rounded-md border px-4 py-3 font-mono text-sm">
<ContentSlot :use="$slots.content" unwrap="p" />
<ContentSlot unwrap="p" />
</div>
</UiCollapsibleContent>
</UiCollapsible>

<UiCollapsible v-else-if="variant === 'simple'" v-model:open="isOpen">
<UiCollapsibleTrigger class="w-full text-left">
<div class="flex w-full gap-1">
<SmartIcon
name="lucide:chevron-down"
class="self-center transition-all"
:class="[!isOpen && '-rotate-90']"
/>
<span>
<ContentSlot :use="$slots.title" unwrap="p" />
{{ title }}
</span>
</div>
</UiCollapsibleTrigger>
<UiCollapsibleContent>
<div class="ml-2 border-l py-2 pl-4">
<ContentSlot :use="$slots.content" unwrap="p" />
<ContentSlot unwrap="p" />
</div>
</UiCollapsibleContent>
</UiCollapsible>
</template>

<script setup lang="ts">
const { variant = 'simple' } = defineProps<{
variant?: 'simple' | 'card';
title?: string;
}>();
const isOpen = ref(false);
</script>
7 changes: 3 additions & 4 deletions components/content/Field.vue
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
<template>
<div class="[&:not(:first-child)]:mt-4 [&:not(:first-child)]:pt-4">
<div class="mb-2">
<div class="flex space-x-2">
<div class="flex items-center gap-2">
<span class="text-md font-bold text-primary">
{{ name }}
</span>
<span v-if="required" class="self-center font-mono text-sm text-muted-foreground">
<span v-if="required" class="font-mono text-sm text-muted-foreground">
{{ fieldRequiredText }}
</span>
<span class="flex-1" />
<span class="self-center font-mono text-sm text-muted-foreground">
<span class="ml-auto font-mono text-sm text-muted-foreground">
{{ type }}
</span>
</div>
Expand Down
47 changes: 45 additions & 2 deletions content/1.getting-started/3.writing/2.components.md
Original file line number Diff line number Diff line change
Expand Up @@ -582,12 +582,12 @@ You can put iconify icons, emojis and urls in `smart-icon`. Smart icon will rend

::code-group
::div{label="Preview" class="md:p-4"}
::field{name="Field" type="string" defaultValue="undefined" required}
::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 [Code]
::field{name="Field" type="string" defaultValue="undefined" required}
::field{name="Field" type="string" defaultValue="'default'" required}
The _description_ can be set as prop or in the default slot with full **markdown** support.
::
```
Expand Down Expand Up @@ -924,3 +924,46 @@ The text `required` is configurable in [`main.fieldRequiredText`](/api/configura
::

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"}.

### Collapsible
:badge[0.5.8]{variant="outline"}

#### Simple

:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/callout" target="_blank"}

::code-group
::div{label="Preview" class="md:p-4"}
::collapsible
#title
Show properties

#content
This is a **Simple** style collapsible.
::
::
```mdc[Code]
::collapsible
#title
Show properties
#content
This is a **Simple** style collapsible.
::
```
::

#### Card

::code-group
::div{label="Preview" class="md:p-4"}
::collapsible{variant="card" title="@peduarte starred 3 repositories"}
@radix-ui/primitives
::
::
```mdc[Code]
::collapsible{variant="card" title="@peduarte starred 3 repositories"}
@radix-ui/primitives
::
```
::
15 changes: 8 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{
"name": "shadcn-docs-nuxt",
"type": "module",
"version": "0.5.7",
"version": "0.5.8",
"description": "Effortless and beautiful docs template built with Nuxt Content & shadcn-vue.",
"author": "Tony Zhang <[email protected]>",
"license": "MIT",
"homepage": "https://shadcn-docs.nuxt.dev/",
Expand Down Expand Up @@ -44,9 +45,9 @@
"lint:fix": "eslint . --fix"
},
"dependencies": {
"@iconify-json/lucide": "^1.2.6",
"@iconify-json/lucide": "^1.2.7",
"@nuxt/content": "^2.13.2",
"@nuxt/icon": "^1.5.2",
"@nuxt/icon": "^1.5.4",
"@nuxt/image": "^1.8.1",
"@nuxtjs/color-mode": "^3.5.1",
"@nuxtjs/tailwindcss": "^6.12.1",
Expand All @@ -55,20 +56,20 @@
"nuxt": "^3.13.2",
"radix-vue": "^1.9.6",
"shadcn-nuxt": "^0.10.4",
"tailwind-merge": "^2.5.2",
"tailwind-merge": "^2.5.3",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.6.2",
"vue": "^3.5.10",
"vue": "^3.5.11",
"vue-router": "^4.4.5"
},
"devDependencies": {
"@antfu/eslint-config": "^3.7.3",
"@nuxt/devtools": "^1.5.2",
"@vueuse/core": "^11.1.0",
"@vueuse/nuxt": "^11.1.0",
"eslint": "^9.11.1",
"eslint": "^9.12.0",
"eslint-plugin-tailwindcss": "^3.17.4",
"shiki": "^1.21.0",
"shiki": "^1.21.1",
"vue-tsc": "^2.1.6"
}
}

0 comments on commit 8b659d8

Please sign in to comment.