Skip to content

Commit

Permalink
feat(Accordion): new component (#301)
Browse files Browse the repository at this point in the history 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
  • Loading branch information
@Haythamasalama @benjamincanac
Haythamasalama and benjamincanac authored Jun 27, 2023
1 parent 0bfe4b0 commit e50f377
Show file tree
Hide file tree
Showing 12 changed files with 541 additions and 6 deletions.
1 change: 1 addition & 0 deletions .eslintrc.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ module.exports = {
extends: ['@nuxt/eslint-config'],
rules: {
'semi': ['error', 'never'],
'quotes': ['error', 'single'],
'comma-dangle': ['error', 'never'],
'space-before-function-paren': ['error', 'always'],
'vue/multi-word-component-names': 0,
Expand Down
33 changes: 33 additions & 0 deletions docs/components/content/examples/AccordionExampleBasic.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<script setup>
const items = [{
label: 'Getting Started',
icon: 'i-heroicons-information-circle',
defaultOpen: true,
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Installation',
icon: 'i-heroicons-arrow-down-tray',
disabled: true,
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Theming',
icon: 'i-heroicons-eye-dropper',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Layouts',
icon: 'i-heroicons-rectangle-group',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Components',
icon: 'i-heroicons-square-3-stack-3d',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Utilities',
icon: 'i-heroicons-wrench-screwdriver',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}]
</script>

<template>
<UAccordion :items="items" />
</template>
52 changes: 52 additions & 0 deletions docs/components/content/examples/AccordionExampleDefaultSlot.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<script setup>
const items = [{
label: 'Getting Started',
icon: 'i-heroicons-information-circle',
defaultOpen: true,
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Installation',
icon: 'i-heroicons-arrow-down-tray',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Theming',
icon: 'i-heroicons-eye-dropper',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Layouts',
icon: 'i-heroicons-rectangle-group',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Components',
icon: 'i-heroicons-square-3-stack-3d',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Utilities',
icon: 'i-heroicons-wrench-screwdriver',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}]
</script>

<template>
<UAccordion :items="items" :ui="{ wrapper: 'flex flex-col w-full' }">
<template #default="{ item, index, open }">
<UButton color="gray" variant="ghost" class="border-b border-gray-200 dark:border-gray-700" :ui="{ rounded :'rounded-none', padding: { sm:'p-3' } }">
<template #leading>
<div class="w-6 h-6 rounded-full bg-primary-500 dark:bg-primary-400 flex items-center justify-center -my-1">
<UIcon :name="item.icon" class="w-4 h-4 text-white dark:text-gray-900" />
</div>
</template>

<span class="truncate">{{ index + 1 }}. {{ item.label }}</span>

<template #trailing>
<UIcon
name="i-heroicons-chevron-right-20-solid"
class="w-5 h-5 ms-auto transform transition-transform duration-200"
:class="[open && 'rotate-90']"
/>
</template>
</UButton>
</template>
</UAccordion>
</template>
74 changes: 74 additions & 0 deletions docs/components/content/examples/AccordionExampleItemSlot.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<script setup>
const items = [{
label: 'Getting Started',
icon: 'i-heroicons-information-circle',
defaultOpen: true,
slot: 'getting-started'
}, {
label: 'Installation',
icon: 'i-heroicons-arrow-down-tray',
defaultOpen: true,
slot: 'installation'
}, {
label: 'Theming',
icon: 'i-heroicons-eye-dropper',
defaultOpen: true,
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Layouts',
icon: 'i-heroicons-rectangle-group',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Components',
icon: 'i-heroicons-square-3-stack-3d',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Utilities',
icon: 'i-heroicons-wrench-screwdriver',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}]
</script>

<template>
<UAccordion :items="items">
<template #item="{ item }">
<p class="italic text-gray-900 dark:text-white text-center">
{{ item.description }}
</p>
</template>

<template #getting-started>
<div class="flex flex-col justify-center items-center gap-1">
<NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
<Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />

<span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary-500 dark:sm:text-primary-400">UI</span>
</NuxtLink>

<p class="text-sm text-gray-500 dark:text-gray-400">
Fully styled and customizable components for Nuxt.
</p>
</div>
</template>

<template #installation="{ description }">
<div class="flex flex-col justify-center items-center gap-1 mb-4">
<h3 class="text-xl font-bold text-gray-900 dark:text-white">
Installation
</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">
Install <code>@nuxthq/ui</code> dependency to your project:
</p>
<p>
{{ description }}
</p>
</div>

<div class="flex flex-col items-center">
<code>$ npm install @nuxtlabs/ui</code>
<code>$ nnpm install -D @nuxthq/ui</code>
<code>$ pnpm i -D @nuxthq/ui</code>
</div>
</template>
</UAccordion>
</template>
2 changes: 1 addition & 1 deletion docs/components/content/examples/CommandPaletteExampleAsync.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const groups = computed(() => {
return []
}
const users = await $fetch(`https://jsonplaceholder.typicode.com/users`, { params: { q } })
const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
}
Expand Down
Loading

1 comment on commit e50f377

@vercel
Copy link

@vercel vercel bot commented on e50f377 Jun 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ui – ./

ui.nuxtlabs.com
ui-git-dev-nuxtlabs.vercel.app
ui-nuxtlabs.vercel.app

Please sign in to comment.