mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
docs: update
This commit is contained in:
Benjamin Canac
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="bg-tw-gray-50">
|
||||
<UContainer class="py-8 min-h-screen">
|
||||
<UContainer class="pt-8 min-h-screen">
|
||||
<div class="lg:grid lg:grid-cols-12 lg:gap-10 lg:relative">
|
||||
<aside class="lg:flex lg:flex-col lg:relative pb-8 lg:pb-0 lg:sticky lg:top-0 px-4 sm:px-6 lg:px-0 lg:pt-8 lg:-mt-8 lg:self-start lg:col-span-3 lg:overflow-hidden lg:h-[calc(100vh-2rem)]" style="position: sticky;height: calc(100vh - 2rem);">
|
||||
<aside class="lg:flex lg:flex-col lg:relative pb-8 lg:pb-0 lg:sticky lg:top-0 px-4 sm:px-6 lg:px-0 lg:pt-8 lg:-mt-8 lg:self-start lg:col-span-3 lg:overflow-hidden lg:h-[calc(100vh-2rem)]" style="position: sticky;height: calc(100vh - 0rem);">
|
||||
<NuxtLink to="/" class="block font-bold text-lg mb-6">
|
||||
@nuxthq/ui
|
||||
</NuxtLink>
|
||||
|
||||
<nav class="overflow-y-auto h-auto">
|
||||
<nav class="overflow-y-auto h-auto pb-12">
|
||||
<ul class="space-y-6">
|
||||
<li v-for="section of sections" :key="section">
|
||||
<h5 class="mb-3 uppercase tracking-wide font-semibold text-xs text-tw-gray-900">
|
||||
@@ -31,7 +31,7 @@
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div class="space-y-6 sm:px-6 lg:px-0 lg:col-span-9">
|
||||
<div class="space-y-6 sm:px-6 lg:px-0 lg:col-span-9 pb-80">
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
337
docs/pages/examples.vue
Normal file
337
docs/pages/examples.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div class="pb-10 border-b border-gray-200 mb-10">
|
||||
<div>
|
||||
<h1 class="inline-block text-3xl font-extrabold text-gray-900 tracking-tight">
|
||||
Examples
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<p class="mt-1 text-lg text-gray-500">
|
||||
Examples of real-life usage of components.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Avatar:
|
||||
</div>
|
||||
|
||||
<UAvatar src="https://picsum.photos/200/300" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Button:
|
||||
</div>
|
||||
|
||||
<UButton variant="primary" icon="heroicons-outline:mail">
|
||||
Button text
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Modal:
|
||||
</div>
|
||||
|
||||
<UButton @click="toggleModalIsOpen()">
|
||||
Toggle modal!
|
||||
</UButton>
|
||||
|
||||
<UModal v-model="isModalOpen">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<UIcon name="heroicons-outline:exclamation" class="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Deactivate account
|
||||
</h3>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm" @click="open = false">
|
||||
Deactivate
|
||||
</button>
|
||||
<button ref="cancelButtonRef" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm" @click="open = false">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</UModal>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Dropdown:
|
||||
</div>
|
||||
|
||||
<UDropdown v-slot="{ open }" :items="dropdownItems" placement="bottom-start">
|
||||
<UButton variant="white" :icon="open ? 'heroicons-solid:chevron-up' : 'heroicons-solid:chevron-down'" trailing icon-class="transition">
|
||||
Open menu!
|
||||
</UButton>
|
||||
</UDropdown>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Dropdown with avatar:
|
||||
</div>
|
||||
|
||||
<UDropdown :items="customDropdownItems" placement="bottom-end">
|
||||
<button class="flex">
|
||||
<UAvatar src="https://picsum.photos/200/300" />
|
||||
</button>
|
||||
|
||||
<template #item-with-avatar="{ item }">
|
||||
<UAvatar v-if="item.avatar" :src="item.avatar" size="xxs" class="mr-3" />
|
||||
{{ item.label }}
|
||||
</template>
|
||||
</UDropdown>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Popover:
|
||||
</div>
|
||||
|
||||
<UPopover panel-class="w-screen max-w-sm px-4 sm:px-0 transform" wrapper-class="inline-block relative">
|
||||
<template #default="{ open }">
|
||||
<UButton variant="secondary" :icon="open ? 'heroicons-solid:chevron-up' : 'heroicons-solid:chevron-down'" trailing icon-class="transition">
|
||||
Open popover!
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<template #panel>
|
||||
<div
|
||||
class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
|
||||
>
|
||||
<div class="relative grid gap-8 bg-white p-7">
|
||||
<a
|
||||
v-for="item in solutions"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
class="flex items-center p-2 -m-3 transition duration-150 ease-in-out rounded-lg hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-center flex-shrink-0 w-10 h-10 text-white sm:h-12 sm:w-12"
|
||||
>
|
||||
<div v-html="item.icon" />
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
{{ item.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ item.description }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-4 bg-gray-50">
|
||||
<a
|
||||
href="##"
|
||||
class="flow-root px-2 py-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
|
||||
>
|
||||
<span class="flex items-center">
|
||||
<span class="text-sm font-medium text-gray-900">
|
||||
Documentation
|
||||
</span>
|
||||
</span>
|
||||
<span class="block text-sm text-gray-500">
|
||||
Start integrating products and tools
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UPopover>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Tooltip:
|
||||
</div>
|
||||
|
||||
<UTooltip>
|
||||
<UIcon name="heroicons-outline:information-circle" class="w-6 h-6 text-black cursor-pointer" />
|
||||
</UTooltip>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Toggle:
|
||||
</div>
|
||||
<UToggle v-model="isSwitchEnabled" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Card:
|
||||
</div>
|
||||
|
||||
<UCard @submit.prevent="onSubmit">
|
||||
<UInputGroup label="Email" name="email" class="mb-3">
|
||||
<UInput type="email" name="email" />
|
||||
</UInputGroup>
|
||||
<UButton type="submit" label="Submit" />
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<!-- <UPopover v-slot="{ open }">
|
||||
<UButton trailing variant="white" :icon="open ? 'heroicons-outline:chevron-up' : 'heroicons-outline:chevron-down'">
|
||||
toto
|
||||
</UButton>
|
||||
</UPopover> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const isModalOpen = ref(false)
|
||||
const isSwitchEnabled = ref(false)
|
||||
|
||||
function toggleModalIsOpen () {
|
||||
isModalOpen.value = !isModalOpen.value
|
||||
}
|
||||
|
||||
function onClick () {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn('click')
|
||||
}
|
||||
|
||||
function onSubmit () {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn('submit')
|
||||
}
|
||||
|
||||
const dropdownItems = [
|
||||
[{
|
||||
label: 'Edit',
|
||||
icon: 'heroicons-solid:pencil',
|
||||
click: () => onClick()
|
||||
}, {
|
||||
label: 'Duplicate',
|
||||
icon: 'heroicons-solid:duplicate'
|
||||
}],
|
||||
[{
|
||||
label: 'Archive',
|
||||
icon: 'heroicons-solid:archive'
|
||||
}, {
|
||||
label: 'Move',
|
||||
icon: 'heroicons-solid:external-link'
|
||||
}],
|
||||
[{
|
||||
label: 'Delete',
|
||||
icon: 'heroicons-solid:trash'
|
||||
}]
|
||||
]
|
||||
|
||||
const customDropdownItems = [
|
||||
[{
|
||||
label: 'benjamincanac',
|
||||
avatar: 'https://picsum.photos/200/300',
|
||||
href: 'https://google.fr',
|
||||
target: '_blank',
|
||||
slot: 'item-with-avatar'
|
||||
}],
|
||||
[{
|
||||
label: 'About',
|
||||
icon: 'heroicons-solid:plus',
|
||||
to: '/about'
|
||||
}]
|
||||
]
|
||||
|
||||
const solutions = [
|
||||
{
|
||||
name: 'Insights',
|
||||
description: 'Measure actions your users take',
|
||||
href: '##',
|
||||
icon: `
|
||||
<svg
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
aria-hidden='true'
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="48" height="48" rx="8" fill="#FFEDD5" />
|
||||
<path
|
||||
d="M24 11L35.2583 17.5V30.5L24 37L12.7417 30.5V17.5L24 11Z"
|
||||
stroke="#FB923C"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M16.7417 19.8094V28.1906L24 32.3812L31.2584 28.1906V19.8094L24 15.6188L16.7417 19.8094Z"
|
||||
stroke="#FDBA74"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M20.7417 22.1196V25.882L24 27.7632L27.2584 25.882V22.1196L24 20.2384L20.7417 22.1196Z"
|
||||
stroke="#FDBA74"
|
||||
stroke-width="2"
|
||||
/>
|
||||
</svg>
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'Automations',
|
||||
description: 'Create your own targeted content',
|
||||
href: '##',
|
||||
icon: `
|
||||
<svg
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="48" height="48" rx="8" fill="#FFEDD5" />
|
||||
<path
|
||||
d="M28.0413 20L23.9998 13L19.9585 20M32.0828 27.0001L36.1242 34H28.0415M19.9585 34H11.8755L15.9171 27"
|
||||
stroke="#FB923C"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M18.804 30H29.1963L24.0001 21L18.804 30Z"
|
||||
stroke="#FDBA74"
|
||||
stroke-width="2"
|
||||
/>
|
||||
</svg>
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'Reports',
|
||||
description: 'Keep track of your growth',
|
||||
href: '##',
|
||||
icon: `
|
||||
<svg
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="48" height="48" rx="8" fill="#FFEDD5" />
|
||||
<rect x="13" y="32" width="2" height="4" fill="#FDBA74" />
|
||||
<rect x="17" y="28" width="2" height="8" fill="#FDBA74" />
|
||||
<rect x="21" y="24" width="2" height="12" fill="#FDBA74" />
|
||||
<rect x="25" y="20" width="2" height="16" fill="#FDBA74" />
|
||||
<rect x="29" y="16" width="2" height="20" fill="#FB923C" />
|
||||
<rect x="33" y="12" width="2" height="24" fill="#FB923C" />
|
||||
</svg>
|
||||
`
|
||||
}
|
||||
]
|
||||
</script>
|
||||
@@ -93,137 +93,8 @@ export default defineNuxtConfig({
|
||||
})</code>
|
||||
</pre>
|
||||
|
||||
<h2 class="font-bold text-2xl text-tw-gray-900">
|
||||
<NuxtLink to="/examples" class="font-bold text-2xl text-tw-gray-900 hover:underline block">
|
||||
Examples
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Button:
|
||||
</div>
|
||||
<UButton variant="primary" icon="heroicons-outline:bell">
|
||||
toto
|
||||
</UButton>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Avatar:
|
||||
</div>
|
||||
<UAvatar src="https://picsum.photos/200/300" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Card:
|
||||
</div>
|
||||
<UCard @submit.prevent="onSubmit">
|
||||
<UInputGroup label="Email" name="email" class="mb-3">
|
||||
<UInput type="email" name="email" />
|
||||
</UInputGroup>
|
||||
<UButton type="submit" label="Submit" />
|
||||
</UCard>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Modal:
|
||||
</div>
|
||||
<UButton @click="toggleModalIsOpen()">
|
||||
Toggle modal!
|
||||
</UButton>
|
||||
|
||||
<UModal v-model="isModalOpen" title="Modal">
|
||||
Body
|
||||
</UModal>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Dropdown:
|
||||
</div>
|
||||
<UDropdown v-slot="{ open }" :items="dropdownItems" placement="bottom-start">
|
||||
<UButton variant="white" :icon="open ? 'heroicons-solid:chevron-up' : 'heroicons-solid:chevron-down'" trailing icon-class="transition">
|
||||
Open menu!
|
||||
</UButton>
|
||||
</UDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Dropdown with avatar:
|
||||
</div>
|
||||
<UDropdown :items="customDropdownItems" placement="bottom-end">
|
||||
<button>
|
||||
<UAvatar src="https://picsum.photos/200/300" />
|
||||
</button>
|
||||
<template #item-with-avatar="{ item }">
|
||||
<UAvatar v-if="item.avatar" :src="item.avatar" size="xxs" class="mr-3" />
|
||||
{{ item.label }}
|
||||
</template>
|
||||
</UDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-sm mb-1 text-tw-gray-700">
|
||||
Toggle:
|
||||
</div>
|
||||
<UToggle v-model="isSwitchEnabled" />
|
||||
</div>
|
||||
<!-- <UPopover v-slot="{ open }">
|
||||
<UButton trailing variant="white" :icon="open ? 'heroicons-outline:chevron-up' : 'heroicons-outline:chevron-down'">
|
||||
toto
|
||||
</UButton>
|
||||
</UPopover> -->
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const isModalOpen = ref(false)
|
||||
const isSwitchEnabled = ref(false)
|
||||
|
||||
function toggleModalIsOpen () {
|
||||
isModalOpen.value = !isModalOpen.value
|
||||
}
|
||||
|
||||
function onClick () {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn('click')
|
||||
}
|
||||
|
||||
function onSubmit () {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn('submit')
|
||||
}
|
||||
|
||||
const dropdownItems = [
|
||||
[{
|
||||
label: 'Edit',
|
||||
icon: 'heroicons-solid:pencil',
|
||||
click: () => onClick()
|
||||
}, {
|
||||
label: 'Duplicate',
|
||||
icon: 'heroicons-solid:duplicate'
|
||||
}],
|
||||
[{
|
||||
label: 'Archive',
|
||||
icon: 'heroicons-solid:archive'
|
||||
}, {
|
||||
label: 'Move',
|
||||
icon: 'heroicons-solid:external-link'
|
||||
}],
|
||||
[{
|
||||
label: 'Delete',
|
||||
icon: 'heroicons-solid:trash'
|
||||
}]
|
||||
]
|
||||
|
||||
const customDropdownItems = [
|
||||
[{
|
||||
label: 'benjamincanac',
|
||||
avatar: 'https://picsum.photos/200/300',
|
||||
href: 'https://google.fr',
|
||||
target: '_blank',
|
||||
slot: 'item-with-avatar'
|
||||
}],
|
||||
[{
|
||||
label: 'About',
|
||||
icon: 'heroicons-solid:plus',
|
||||
to: '/about'
|
||||
}]
|
||||
]
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user