arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-25 01:10:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: update

Browse Source
This commit is contained in:
Benjamin Canac
2021-12-10 16:07:46 +01:00
parent 550fb9dc1d
commit 437be462a2
5 changed files with 133 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/app.vue
View File

@@ -17,8 +17,8 @@
</nav>
<UContainer class="mt-16">
<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-16 lg:-mt-16 lg:self-start lg:col-span-3 lg:overflow-hidden lg:sticky lg:h-screen">
<div class="lg:grid lg:grid-cols-10 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-16 lg:-mt-16 lg:self-start lg:col-span-2 lg:overflow-hidden lg:sticky lg:h-screen">
<nav class="overflow-y-auto h-auto pt-8 lg:py-12">
<ul class="space-y-6">
<li v-for="section of sections" :key="section">
@@ -43,7 +43,7 @@
</nav>
</aside>
<div class="space-y-6 sm:px-6 lg:px-0 lg:col-span-9 lg:py-12">
<div class="space-y-6 sm:px-6 lg:px-0 lg:col-span-8 lg:py-12">
<NuxtPage />
</div>
</div>
@@ -62,7 +62,7 @@ const sections = [
{ label: 'Getting Started', links: [{ label: 'Usage', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
{ label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }] },
{ label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }] },
{ label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'FormGroup', to: '/components/FormGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'RadioGroup', to: '/components/RadioGroup' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }] },
{ label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'FormGroup', to: '/components/FormGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }] },
{ label: 'Layout', links: [{ label: 'Card', to: '/components/Card' }, { label: 'Container', to: '/components/Container' }] },
{ label: 'Navigation', links: [{ label: 'Pills', to: '/components/Pills' }, { label: 'Tabs', to: '/components/Tabs' }, { label: 'VerticalNavigation', to: '/components/VerticalNavigation' }] },
{ label: 'Overlays', links: [{ label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }

8
docs/nuxt.config.ts
View File

@@ -26,10 +26,18 @@ export default defineNuxtConfig({
colors: {
primary: 'blue'
},
preset: {
container: {
constrained: 'max-w-8xl'
}
},
unocss: {
theme: {
fontFamily: {
sans: '"Inter var", sans-serif'
},
maxWidth: {
'8xl': '90rem'
}
}
}

82
docs/pages/components/[component].vue
View File

@@ -1,6 +1,8 @@
<template>
<UCard v-if="component" class="relative flex flex-col lg:max-h-[calc(100vh-10rem)]" body-class="px-4 py-5 sm:p-6 relative" footer-class="px-4 py-4 sm:px-6 flex-1 lg:overflow-y-auto">
<UCard v-if="component" class="relative flex flex-col lg:h-[calc(100vh-10rem)]" body-class="px-4 py-5 sm:p-6 relative" footer-class="flex flex-col flex-1 overflow-hidden">
<div class="flex justify-center">
<component :is="`U${defaultProps[params.component].component.name}`" v-if="defaultProps[params.component] && defaultProps[params.component].component" v-bind="defaultProps[params.component].component.props" />
<component :is="is" v-bind="{ ...boundProps, ...eventProps }">
<template v-for="[key, slot] of Object.entries(defaultProps[params.component]?.slots || {}) || []" #[key]>
<template v-if="Array.isArray(slot)">
@@ -23,7 +25,7 @@
</div>
<template v-if="props.length" #footer>
<div class="space-y-3">
<div class="flex-1 px-4 py-5 sm:p-6 space-y-3 lg:overflow-y-auto">
<UFormGroup
v-for="prop of props"
:key="prop.key"
@@ -69,6 +71,21 @@
/>
</UFormGroup>
</div>
<div class="border-t u-border-gray-200 u-bg-gray-50">
<pre class="text-sm leading-6 u-text-gray-900 flex-1 relative flex ligatures-none lg:overflow-y-auto overflow-x-hidden px-4 sm:px-6 py-5 sm:py-6">
<code class="flex-none min-w-full whitespace-pre-wrap break-all">{{ code }}</code>
<UButton
class="absolute top-0 right-0"
:icon="copied ? 'heroicons-outline:clipboard-check' : 'heroicons-outline:clipboard'"
variant="transparent"
size="sm"
:custom-class="copied && '!text-green-500'"
@click="onCopy"
/>
</pre>
</div>
</template>
</UCard>
</template>
@@ -154,20 +171,6 @@ const defaultProps = {
Radio: {
name: 'radio'
},
RadioGroup: {
name: 'radio',
label: 'Radio group',
options: [
{
label: 'Option 1',
value: 'option-1'
},
{
label: 'Option 2',
value: 'option-2'
}
]
},
Select: {
name: 'select',
options: ['English', 'Spanish', 'French', 'German', 'Chinese']
@@ -186,6 +189,14 @@ const defaultProps = {
Modal: {
modelValue: modal,
'onUpdate:modelValue': (v) => { modal.value = v },
component: {
name: 'Button',
props: {
variant: 'secondary',
label: 'Open modal',
onClick: () => { modal.value = true }
}
},
slots: {
default: {
tag: 'div',
@@ -216,7 +227,8 @@ const { props: componentProps } = await component.__asyncLoader()
const refProps = Object.entries(componentProps).map(([key, prop]) => {
const defaultValue = componentDefaultProps[key]
let value = defaultValue || (typeof prop.default === 'function' ? prop.default() : prop.default)
const propDefault = (typeof prop.default === 'function' ? prop.default() : prop.default)
let value = defaultValue || propDefault
let type = prop.type
if (Array.isArray(type)) {
type = type[0].name
@@ -249,7 +261,8 @@ const refProps = Object.entries(componentProps).map(([key, prop]) => {
key,
type,
value,
values
values,
default: propDefault
}
})
@@ -265,7 +278,7 @@ const boundProps = computed(() => {
const bound = {}
for (const prop of props.value) {
let value = prop.value
if (!value) {
if (value === null) {
continue
}
@@ -286,4 +299,35 @@ const boundProps = computed(() => {
}
return bound
})
function toKebabCase (str) {
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
}
const copied = ref(false)
const onCopy = () => {
navigator.clipboard.writeText(code.value).then(() => {
copied.value = true
setTimeout(() => {
copied.value = false
}, 2000)
})
}
const code = computed(() => {
let code = `<U${params.component}`
for (const prop of props.value) {
if (prop.value === null) {
continue
}
if (prop.value === prop.default) {
continue
}
const key = toKebabCase(prop.key)
code += `\n ${prop.type === 'Boolean' ? ':' : ''}${key === 'model-value' ? 'v-model' : key}="${prop.value}"`
}
code += '\n/>'
return code
})
</script>

51
docs/pages/examples.vue
View File

@@ -175,20 +175,47 @@
Card:
</div>
<UCard @submit.prevent="onSubmit">
<UFormGroup label="Email" name="email" class="mb-3" required>
<UInput type="email" name="email" required />
</UFormGroup>
<UCard body-class="flex" @submit.prevent="onSubmit">
<div class="flex-1 px-4 py-5 sm:p-6 space-y-3">
<UFormGroup label="Email" name="email" required>
<UInput v-model="form.email" type="email" name="email" required />
</UFormGroup>
<UFormGroup label="Description" name="description" class="mb-3">
<UTextarea type="description" name="description" autoresize />
</UFormGroup>
<UFormGroup label="Description" name="description">
<UTextarea v-model="form.description" type="description" name="description" autoresize />
</UFormGroup>
<UFormGroup label="Toggle" name="toggle" class="mb-3">
<UToggle v-model="isSwitchEnabled" name="toggle" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
</UFormGroup>
<UFormGroup label="Toggle" name="toggle">
<UToggle v-model="form.toggle" name="toggle" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
</UFormGroup>
<UButton type="submit" label="Submit" />
<UFormGroup label="Notifications" label-class="text-base font-medium u-text-gray-900" description="How do you prefer to receive notifications?">
<div class="space-y-4 mt-3">
<URadio v-model="form.notification" value="email" label="Email" help="Email" />
<URadio v-model="form.notification" value="phone" label="Phone (SMS)" help="Phone (SMS)" />
<URadio v-model="form.notification" value="push" label="Push notification" help="Push notification" />
</div>
</UFormGroup>
<UCard body-class="px-4 py-5 space-y-5">
<UCheckbox v-model="form.notifications" name="comments" value="comments" label="Comments" help="Get notified when someones posts a comment on a posting." />
<UCheckbox v-model="form.notifications" name="candidates" value="candidates" label="Candidates" help="Get notified when a candidate applies for a job." />
<UCheckbox v-model="form.notifications" name="offers" value="offers" label="Offers" help="Get notified when a candidate accepts or rejects an offer." />
</UCard>
<div>
<UCheckbox v-model="form.terms" label="I agree to the terms and conditions" name="terms" />
</div>
<div class="flex justify-end">
<UButton type="submit" label="Submit" class="ml-auto" />
</div>
</div>
<div class="w-1/3 px-4 py-5 sm:p-6 border-l u-border-gray-200 u-bg-gray-50">
<pre>
{{ form }}
</pre>
</div>
</UCard>
</div>
</div>
@@ -196,7 +223,7 @@
<script setup>
const isModalOpen = ref(false)
const isSwitchEnabled = ref(false)
const form = reactive({ email: '', description: '', toggle: false, notification: 'email', notifications: [], terms: false })
const { $toast } = useNuxtApp()

31
docs/pages/migration.vue
View File

@@ -65,7 +65,8 @@ const components = [
},
{
label: 'AvatarGroup',
to: '/components/AvatarGroup'
to: '/components/AvatarGroup',
nuxt3: true
},
{
label: 'Badge',
@@ -105,10 +106,6 @@ const components = [
label: 'Alert',
to: '/components/Alert'
},
{
label: 'Checkbox',
to: '/components/Checkbox'
},
{
label: 'Input',
to: '/components/Input',
@@ -123,12 +120,18 @@ const components = [
preset: true
},
{
label: 'Radio',
to: '/components/Radio'
label: 'Checkbox',
to: '/components/Checkbox',
nuxt3: true,
capi: true,
preset: true
},
{
label: 'RadioGroup',
to: '/components/RadioGroup'
label: 'Radio',
to: '/components/Radio',
nuxt3: true,
capi: true,
preset: true
},
{
label: 'Select',
@@ -152,12 +155,14 @@ const components = [
label: 'Card',
to: '/components/Card',
nuxt3: true,
capi: true
capi: true,
preset: true
},
{
label: 'Container',
to: '/components/Container',
nuxt3: true,
preset: true,
capi: true
},
{
@@ -186,7 +191,8 @@ const components = [
{
label: 'Notifications',
to: '/components/Notifications',
nuxt3: true
nuxt3: true,
capi: true
},
{
label: 'Popover',
@@ -197,7 +203,8 @@ const components = [
{
label: 'Tooltip',
to: '/components/Tooltip',
nuxt3: true
nuxt3: true,
capi: true
}
]
</script>