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

chore: update

Browse Source
This commit is contained in:
Benjamin Canac
2021-12-10 11:44:22 +01:00
parent f666ff19d1
commit 9d9098ca9f
9 changed files with 102 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/app.vue
View File

@@ -62,10 +62,10 @@ 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: 'InputGroup', to: '/components/InputGroup' }, { 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: 'ToggleGroup', to: '/components/ToggleGroup' }] },
{ 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: '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: 'Slideover', to: '/components/Slideover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }
{ label: 'Overlays', links: [{ label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }
]
</script>

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

@@ -1,17 +1,30 @@
<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">
<div class="flex justify-center">
<component :is="is" v-bind="boundProps">
<template v-if="defaultProps[params.component].slot" #default>
<component :is="`U${defaultProps[params.component].slot}`" v-bind="defaultProps[defaultProps[params.component].slot]" />
<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)">
<div :key="key">
<component
:is="slot.component ? `U${slot.component}` : slot.tag"
v-for="(slot, index) of slot"
:key="index"
:class="slot.class"
v-bind="slot.props || defaultProps[slot.component]"
v-html="slot.html"
/>
</div>
</template>
<template v-else>
<component :is="slot.component ? `U${slot.component}` : slot.tag" :key="key" :class="slot.class" v-bind="slot.props || defaultProps[slot.component]" v-html="slot.html" />
</template>
</template>
</component>
</div>
<template v-if="props.length" #footer>
<div class="space-y-3">
<component
:is="prop.type === 'Boolean' ? 'UToggleGroup' : 'UInputGroup'"
<UFormGroup
v-for="prop of props"
:key="prop.key"
class="capitalize"
@@ -54,7 +67,7 @@
:rows="8"
autoresize
/>
</component>
</UFormGroup>
</div>
</template>
</UCard>
@@ -70,6 +83,9 @@ const is = `U${params.component}`
const component = nuxtApp.vueApp.component(is)
const toggle = ref(false)
const modal = ref(false)
const defaultProps = {
Button: {
label: 'Button text'
@@ -115,14 +131,22 @@ const defaultProps = {
name: 'input',
placeholder: 'Enter text'
},
InputGroup: {
FormGroup: {
name: 'input',
label: 'Input group',
slot: 'Input'
slots: {
default: {
component: 'Input',
props: {
name: 'input',
placeholder: 'Works with every form element'
}
}
}
},
ToggleGroup: {
name: 'input',
label: 'Toggle group'
Toggle: {
modelValue: toggle,
'onUpdate:modelValue': (v) => { toggle.value = v }
},
Checkbox: {
name: 'checkbox'
@@ -130,6 +154,20 @@ 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']
@@ -144,13 +182,40 @@ const defaultProps = {
id: '1',
title: 'Notification title',
callback: 'alert(\'Timer expired\')'
},
Modal: {
modelValue: modal,
'onUpdate:modelValue': (v) => { modal.value = v },
slots: {
default: {
tag: 'div',
html: 'Modal content'
},
footer: {
component: 'Button',
props: {
label: 'Close',
onClick: () => { modal.value = false }
}
}
}
},
Popover: {
slots: {
panel: {
tag: 'div',
class: 'u-bg-gray-100 rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 p-6',
html: 'Popover content'
}
}
}
}
const componentDefaultProps = defaultProps[params.component] || {}
const { props: componentProps } = await component.__asyncLoader()
const refProps = Object.entries(componentProps).map(([key, prop]) => {
const defaultValue = (defaultProps[params.component] || {})[key]
const defaultValue = componentDefaultProps[key]
let value = defaultValue || (typeof prop.default === 'function' ? prop.default() : prop.default)
let type = prop.type
if (Array.isArray(type)) {
@@ -188,6 +253,13 @@ const refProps = Object.entries(componentProps).map(([key, prop]) => {
}
})
const eventProps = Object.entries(componentDefaultProps)
.filter(([key]) => !refProps.find(prop => prop.key === key))
.reduce((acc, [key, value]) => {
acc[key] = value
return acc
}, {})
const props = ref(refProps)
const boundProps = computed(() => {
const bound = {}

33
docs/pages/examples.vue
View File

@@ -153,21 +153,14 @@
</UPopover>
</div>
<!-- <div>
<div>
<div class="font-medium text-sm mb-1 u-text-gray-700">
Tooltip:
</div>
<UTooltip>
<UTooltip text="Hello tooltip!">
<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 u-text-gray-700">
Toggle:
</div>
<UToggle v-model="isSwitchEnabled" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
</div>
<div>
@@ -183,23 +176,21 @@
</div>
<UCard @submit.prevent="onSubmit">
<UInputGroup label="Email" name="email" class="mb-3">
<UInput type="email" name="email" autofocus />
</UInputGroup>
<UFormGroup label="Email" name="email" class="mb-3" required>
<UInput type="email" name="email" required />
</UFormGroup>
<UInputGroup label="Description" name="description" class="mb-3">
<UTextarea v-model="description" type="description" name="description" autoresize />
</UInputGroup>
<UFormGroup label="Description" name="description" class="mb-3">
<UTextarea 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>
<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>

15
docs/pages/migration.vue
View File

@@ -101,13 +101,6 @@ const components = [
nuxt3: true,
capi: true
},
{
label: 'ToggleGroup',
to: '/components/ToggleGroup',
nuxt3: true,
capi: true,
preset: true
},
{
label: 'Alert',
to: '/components/Alert'
@@ -123,8 +116,8 @@ const components = [
preset: true
},
{
label: 'InputGroup',
to: '/components/InputGroup',
label: 'FormGroup',
to: '/components/FormGroup',
nuxt3: true,
capi: true,
preset: true
@@ -201,10 +194,6 @@ const components = [
nuxt3: true,
capi: true
},
{
label: 'Slideover',
to: '/components/Slideover'
},
{
label: 'Tooltip',
to: '/components/Tooltip',