mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
feat(Divider): new component (#757)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Haytham A. Salama
committed by
Benjamin Canac
Benjamin Canac
parent
0c807db005
commit
eb9ce6a0dd
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<UDivider>
|
||||
<Logo class="w-28 h-6" />
|
||||
</UDivider>
|
||||
</template>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script setup>
|
||||
const form = reactive({ email: 'mail@example.com', password: 'password' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full flex flex-col gap-y-4">
|
||||
<UCard :ui="{ body: { base: 'grid grid-cols-3' } }">
|
||||
<div class="space-y-4">
|
||||
<UFormGroup label="Email" name="email">
|
||||
<UInput v-model="form.email" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Password" name="password">
|
||||
<UInput v-model="form.password" type="password" />
|
||||
</UFormGroup>
|
||||
|
||||
<UButton label="Login" color="gray" block />
|
||||
</div>
|
||||
|
||||
<UDivider label="OR" color="gray" orientation="vertical" />
|
||||
|
||||
<div class="space-y-4 flex flex-col justify-center">
|
||||
<UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
|
||||
<UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<div class="space-y-4">
|
||||
<UFormGroup label="Email" name="email">
|
||||
<UInput v-model="form.email" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Password" name="password">
|
||||
<UInput v-model="form.password" type="password" />
|
||||
</UFormGroup>
|
||||
|
||||
<UButton label="Login" color="gray" block />
|
||||
|
||||
<UDivider label="OR" color="gray" />
|
||||
|
||||
<UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
|
||||
<UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</template>
|
||||
184
docs/content/7.layout/4.divider.md
Normal file
184
docs/content/7.layout/4.divider.md
Normal file
@@ -0,0 +1,184 @@
|
||||
---
|
||||
description: Display a separator between content.
|
||||
links:
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Divider.vue
|
||||
navigation:
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
You can pass `label`, `icon` or `avatar` to the divider component.
|
||||
|
||||
### Label
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
label: OR
|
||||
---
|
||||
::
|
||||
|
||||
### Icon
|
||||
|
||||
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
icon: 'i-simple-icons-github'
|
||||
excludedProps:
|
||||
- icon
|
||||
---
|
||||
::
|
||||
|
||||
### Avatar
|
||||
|
||||
Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
avatar:
|
||||
src: https://avatars.githubusercontent.com/u/739984?v=4
|
||||
excludedProps:
|
||||
- avatar
|
||||
---
|
||||
::
|
||||
|
||||
### Orientation
|
||||
|
||||
You can change the orientation of the divider by setting the `orientation` prop to `horizontal` or `vertical`. Defaults to `horizontal`.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:divider-example-orientation
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const form = reactive({ email: 'mail@example.com', password: 'password' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full flex flex-col gap-y-4">
|
||||
<UCard :ui="{ body: { base: 'grid grid-cols-3' } }">
|
||||
<div class="space-y-4">
|
||||
<UFormGroup label="Email" name="email">
|
||||
<UInput v-model="form.email" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Password" name="password">
|
||||
<UInput v-model="form.password" type="password" />
|
||||
</UFormGroup>
|
||||
|
||||
<UButton label="Login" color="gray" block />
|
||||
</div>
|
||||
|
||||
<UDivider label="OR" color="gray" orientation="vertical" />
|
||||
|
||||
<div class="space-y-4 flex flex-col justify-center">
|
||||
<UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
|
||||
<UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<div class="space-y-4">
|
||||
<UFormGroup label="Email" name="email">
|
||||
<UInput v-model="form.email" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Password" name="password">
|
||||
<UInput v-model="form.password" type="password" />
|
||||
</UFormGroup>
|
||||
|
||||
<UButton label="Login" color="gray" block />
|
||||
|
||||
<UDivider label="OR" color="gray" />
|
||||
|
||||
<UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
|
||||
<UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Type
|
||||
|
||||
You can change the type of the divider by setting the `type` prop to `solid`, `dotted` or `dashed`. Defaults to `solid`.
|
||||
|
||||
::component-card{class="w-full"}
|
||||
---
|
||||
props:
|
||||
label: Nuxt UI
|
||||
type: dashed
|
||||
excludedProps:
|
||||
- label
|
||||
---
|
||||
::
|
||||
|
||||
### Size
|
||||
|
||||
You can change the size of the divider by using the `ui` prop
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
label: Nuxt UI
|
||||
ui:
|
||||
border:
|
||||
size:
|
||||
horizontal: border-t-2
|
||||
excludedProps:
|
||||
- label
|
||||
- ui
|
||||
---
|
||||
::
|
||||
|
||||
### Color
|
||||
|
||||
You can change the color of the content by using the `ui` prop
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
label: Nuxt UI
|
||||
ui:
|
||||
label: text-primary-500 dark:text-primary-400
|
||||
excludedProps:
|
||||
- label
|
||||
- ui
|
||||
---
|
||||
::
|
||||
|
||||
## Slots
|
||||
|
||||
### `default`
|
||||
|
||||
Use the `default` slot to add content to the divider.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:divider-example-default-slot
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<UDivider>
|
||||
<Logo class="w-28 h-6" />
|
||||
</UDivider>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
@@ -5,7 +5,7 @@
|
||||
<UPageBody prose>
|
||||
<ContentRenderer v-if="page.body" :value="page" />
|
||||
|
||||
<UDivider v-if="surround?.length" />
|
||||
<hr v-if="surround?.length">
|
||||
|
||||
<UDocsSurround :surround="(surround as ParsedContent[])" />
|
||||
</UPageBody>
|
||||
@@ -14,7 +14,7 @@
|
||||
<UDocsToc :links="page.body.toc.links">
|
||||
<template #bottom>
|
||||
<div class="hidden lg:block space-y-6 !mt-6">
|
||||
<UDivider v-if="page.body?.toc?.links?.length" dashed />
|
||||
<UDivider v-if="page.body?.toc?.links?.length" type="dashed" />
|
||||
|
||||
<UPageLinks title="Community" :links="links" />
|
||||
</div>
|
||||
|
||||
116
src/runtime/components/layout/Divider.vue
Normal file
116
src/runtime/components/layout/Divider.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div :class="wrapperClass" v-bind="attrs">
|
||||
<div :class="borderClass" />
|
||||
|
||||
<div v-if="label || icon || avatar || $slots.default" :class="containerClass">
|
||||
<slot>
|
||||
<span v-if="label" :class="ui.label">
|
||||
{{ label }}
|
||||
</span>
|
||||
<UIcon v-else-if="icon" :name="icon" :class="ui.icon.base" />
|
||||
<UAvatar v-else-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div :class="borderClass" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRef, computed, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import UAvatar from '../elements/Avatar.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { Avatar, Strategy } from '../../types'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
import { divider } from '#ui/ui.config'
|
||||
|
||||
const config = mergeConfig<typeof divider>(appConfig.ui.strategy, appConfig.ui.divider, divider)
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UIcon,
|
||||
UAvatar
|
||||
},
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
avatar: {
|
||||
type: Object as PropType<Avatar>,
|
||||
default: null
|
||||
},
|
||||
orientation: {
|
||||
type: String as PropType<'horizontal' | 'vertical'>,
|
||||
default: 'horizontal',
|
||||
validator: (value: string) => ['horizontal', 'vertical'].includes(value)
|
||||
},
|
||||
type: {
|
||||
type: String as PropType<'solid' | 'dotted' | 'dashed'>,
|
||||
default: 'solid',
|
||||
validator: (value: string) => ['solid', 'dotted', 'dashed'].includes(value)
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const { ui, attrs } = useUI('divider', toRef(props, 'ui'), config)
|
||||
|
||||
const isHorizontal = computed(() => props.orientation === 'horizontal' )
|
||||
|
||||
const wrapperClass = computed(() => {
|
||||
return twMerge(twJoin(
|
||||
ui.value.wrapper.base,
|
||||
isHorizontal.value ? ui.value.wrapper.horizontal : ui.value.wrapper.vertical
|
||||
), props.class)
|
||||
})
|
||||
|
||||
const containerClass = computed(() => {
|
||||
return twJoin(
|
||||
ui.value.container.base,
|
||||
isHorizontal.value ? ui.value.container.horizontal : ui.value.container.vertical
|
||||
)
|
||||
})
|
||||
|
||||
const borderClass = computed(() => {
|
||||
const typeClass = ({
|
||||
solid: 'border-solid',
|
||||
dotted: 'border-dotted',
|
||||
dashed: 'border-dashed'
|
||||
})[props.type]
|
||||
|
||||
return twJoin(
|
||||
ui.value.border.base,
|
||||
isHorizontal.value ? ui.value.border.horizontal : ui.value.border.vertical,
|
||||
isHorizontal.value ? ui.value.border.size.horizontal : ui.value.border.size.vertical,
|
||||
typeClass
|
||||
)
|
||||
})
|
||||
|
||||
return {
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
ui,
|
||||
attrs,
|
||||
wrapperClass,
|
||||
containerClass,
|
||||
borderClass
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -721,6 +721,36 @@ export const skeleton = {
|
||||
rounded: 'rounded-md'
|
||||
}
|
||||
|
||||
export const divider = {
|
||||
wrapper: {
|
||||
base: 'flex items-center align-center text-center w-full',
|
||||
horizontal: 'flex-row',
|
||||
vertical: 'flex-col'
|
||||
},
|
||||
container: {
|
||||
base: 'font-medium text-gray-700 dark:text-gray-200 flex',
|
||||
horizontal: 'mx-3 whitespace-nowrap',
|
||||
vertical: 'my-2'
|
||||
},
|
||||
border: {
|
||||
base: 'flex border-gray-200 dark:border-gray-800',
|
||||
horizontal: 'w-full',
|
||||
vertical: 'h-full',
|
||||
size: {
|
||||
horizontal: 'border-t',
|
||||
vertical: 'border-s'
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
base: 'flex-shrink-0 w-5 h-5'
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0',
|
||||
size: '2xs'
|
||||
},
|
||||
label: 'text-sm'
|
||||
}
|
||||
|
||||
// Navigation
|
||||
|
||||
export const verticalNavigation = {
|
||||
|
||||
Reference in New Issue
Block a user