-
Notifications
You must be signed in to change notification settings - Fork 624
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- v3.0.0-alpha.12
- v3.0.0-alpha.11
- v3.0.0-alpha.10
- v3.0.0-alpha.9
- v3.0.0-alpha.8
- v3.0.0-alpha.7
- v3.0.0-alpha.6
- v3.0.0-alpha.5
- v3.0.0-alpha.4
- v3.0.0-alpha.3
- v3.0.0-alpha.2
- v3.0.0-alpha.1
- v3.0.0-alpha.0
- v2.21.0
- v2.20.0
- v2.19.2
- v2.19.1
- v2.19.0
- v2.18.7
- v2.18.6
- v2.18.5
- v2.18.4
- v2.18.3
- v2.18.2
- v2.18.1
- v2.18.0
- v2.17.0
- v2.16.0
- v2.15.2
- v2.15.1
- v2.15.0
- v2.14.2
- v2.14.1
- v2.14.0
- v2.13.0
- v2.12.3
- v2.12.2
- v2.12.1
- v2.12.0
- v2.11.1
- v2.11.0
- v2.10.0
- v2.9.0
- v2.8.1
- v2.8.0
- v2.7.0
1 parent
8298b62
commit ab2abae
Showing
14 changed files
with
392 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<template> | ||
<UAlert title="Heads <i>up</i>!" icon="i-heroicons-command-line"> | ||
<template #title="{ title }"> | ||
<span v-html="title" /> | ||
</template> | ||
|
||
<template #description> | ||
You can add <b>components</b> to your app using the <u>cli</u>. | ||
</template> | ||
</UAlert> | ||
</template> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,188 @@ | ||
--- | ||
description: Display an alert element to draw attention. | ||
links: | ||
- label: GitHub | ||
icon: i-simple-icons-github | ||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Alert.vue | ||
navigation.badge: Edge | ||
--- | ||
|
||
## Usage | ||
|
||
Pass a `title` to your Alert. | ||
|
||
::component-card | ||
--- | ||
props: | ||
title: 'Heads up!' | ||
--- | ||
:: | ||
|
||
### Description | ||
|
||
You can add a `description` in addition of the `title`. | ||
|
||
::component-card | ||
--- | ||
baseProps: | ||
title: 'Heads up!' | ||
props: | ||
description: 'You can add components to your app using the cli.' | ||
--- | ||
:: | ||
|
||
### 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 | ||
--- | ||
baseProps: | ||
title: 'Heads up!' | ||
props: | ||
icon: 'i-heroicons-command-line' | ||
description: 'You can add components to your app using the cli.' | ||
excludedProps: | ||
- icon | ||
--- | ||
:: | ||
|
||
### Avatar | ||
|
||
Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props. | ||
|
||
::component-card | ||
--- | ||
baseProps: | ||
title: 'Heads up!' | ||
props: | ||
description: 'You can add components to your app using the cli.' | ||
avatar: | ||
src: 'https://avatars.githubusercontent.com/u/739984?v=4' | ||
excludedProps: | ||
- avatar | ||
--- | ||
:: | ||
|
||
### Style | ||
|
||
Use the `color` and `variant` props to change the visual style of the Alert. | ||
|
||
- `color` can be any color from the `ui.colors` object or `white` (default). | ||
- `variant` can be `solid` (default), `outline`, `soft` or `subtle`. | ||
|
||
::component-card | ||
--- | ||
baseProps: | ||
title: 'Heads up!' | ||
description: 'You can add components to your app using the cli.' | ||
props: | ||
icon: 'i-heroicons-command-line' | ||
color: 'primary' | ||
variant: 'solid' | ||
extraColors: | ||
- white | ||
excludedProps: | ||
- icon | ||
--- | ||
:: | ||
|
||
### Close | ||
|
||
Use the `close-button` prop to hide or customize the close button on the Alert. | ||
|
||
You can pass all the props of the [Button](/elements/button) component to customize it through the `close-button` prop or globally through `ui.alert.default.closeButton`. | ||
|
||
It defaults to `null` which means no close button will be displayed. A `close` event will be emitted when the close button is clicked. | ||
|
||
::component-card | ||
--- | ||
baseProps: | ||
title: 'Heads up!' | ||
props: | ||
closeButton: | ||
icon: 'i-heroicons-x-mark-20-solid' | ||
color: 'gray' | ||
variant: 'link' | ||
padded: false | ||
excludedProps: | ||
- closeButton | ||
--- | ||
:: | ||
|
||
### Actions | ||
|
||
Use the `actions` prop to add actions to the Alert. | ||
|
||
Like for `closeButton`, you can pass all the props of the [Button](/elements/button) component plus a `click` function in the action but also customize the default style for the actions globally through `ui.alert.default.actionButton`. | ||
|
||
::component-card | ||
--- | ||
baseProps: | ||
title: 'Heads up!' | ||
props: | ||
actions: | ||
- label: Action 1 | ||
- variant: 'ghost' | ||
color: 'gray' | ||
label: Action 2 | ||
excludedProps: | ||
- actions | ||
--- | ||
:: | ||
|
||
Actions will render differently whether you have a `description` set. | ||
|
||
::component-card | ||
--- | ||
baseProps: | ||
title: 'Heads up!' | ||
description: 'You can add components to your app using the cli.' | ||
props: | ||
actions: | ||
- variant: 'solid' | ||
color: 'primary' | ||
label: Action 1 | ||
- variant: 'outline' | ||
color: 'primary' | ||
label: Action 2 | ||
excludedProps: | ||
- actions | ||
--- | ||
:: | ||
|
||
## Slots | ||
|
||
### `title` / `description` | ||
|
||
Use the `#title` and `#description` slots to customize the Alert. | ||
|
||
This can be handy when you want to display HTML content. To achieve this, you can define those slots and use the `v-html` directive. | ||
|
||
::component-example | ||
#default | ||
:alert-example-html | ||
|
||
#code | ||
```vue | ||
<template> | ||
<UAlert title="Heads <i>up</i>!" icon="i-heroicons-command-line"> | ||
<template #title="{ title }"> | ||
<span v-html="title" /> | ||
</template> | ||
<template #description> | ||
You can add <b>components</b> to your app using the <u>cli</u>. | ||
</template> | ||
</UAlert> | ||
</template> | ||
``` | ||
:: | ||
|
||
## Props | ||
|
||
:component-props | ||
|
||
## Preset | ||
|
||
:component-preset |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,130 @@ | ||
<template> | ||
<div :class="alertClass"> | ||
<div class="flex gap-3" :class="{ 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }"> | ||
<UIcon v-if="icon" :name="icon" :class="ui.icon.base" /> | ||
<UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" /> | ||
|
||
<div class="w-0 flex-1"> | ||
<p :class="ui.title"> | ||
<slot name="title" :title="title"> | ||
{{ title }} | ||
</slot> | ||
</p> | ||
<p v-if="description || $slots.description" :class="ui.description"> | ||
<slot name="description" :description="description"> | ||
{{ description }} | ||
</slot> | ||
</p> | ||
|
||
<div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2"> | ||
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" /> | ||
</div> | ||
</div> | ||
<div class="flex-shrink-0 flex items-center gap-3"> | ||
<div v-if="!description && !$slots.description && actions.length" class="flex items-center gap-2"> | ||
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" /> | ||
</div> | ||
|
||
<UButton v-if="closeButton" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="$emit('close')" /> | ||
</div> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { computed, defineComponent } from 'vue' | ||
import type { PropType } from 'vue' | ||
import { defu } from 'defu' | ||
import UIcon from '../elements/Icon.vue' | ||
import UAvatar from '../elements/Avatar.vue' | ||
import UButton from '../elements/Button.vue' | ||
import type { Avatar} from '../../types/avatar' | ||
import type { Button } from '../../types/button' | ||
import { classNames } from '../../utils' | ||
import { useAppConfig } from '#imports' | ||
// TODO: Remove | ||
// @ts-expect-error | ||
import appConfig from '#build/app.config' | ||
// const appConfig = useAppConfig() | ||
export default defineComponent({ | ||
components: { | ||
UIcon, | ||
UAvatar, | ||
UButton | ||
}, | ||
props: { | ||
title: { | ||
type: String, | ||
required: true | ||
}, | ||
description: { | ||
type: String, | ||
default: null | ||
}, | ||
icon: { | ||
type: String, | ||
default: () => appConfig.ui.alert.default.icon | ||
}, | ||
avatar: { | ||
type: Object as PropType<Avatar>, | ||
default: null | ||
}, | ||
closeButton: { | ||
type: Object as PropType<Button>, | ||
default: () => appConfig.ui.alert.default.closeButton | ||
}, | ||
actions: { | ||
type: Array as PropType<Button & { click: Function }[]>, | ||
default: () => [] | ||
}, | ||
color: { | ||
type: String, | ||
default: () => appConfig.ui.alert.default.color, | ||
validator (value: string) { | ||
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.alert.color)].includes(value) | ||
} | ||
}, | ||
variant: { | ||
type: String, | ||
default: () => appConfig.ui.alert.default.variant, | ||
validator (value: string) { | ||
return [ | ||
...Object.keys(appConfig.ui.alert.variant), | ||
...Object.values(appConfig.ui.alert.color).flatMap(value => Object.keys(value)) | ||
].includes(value) | ||
} | ||
}, | ||
ui: { | ||
type: Object as PropType<Partial<typeof appConfig.ui.alert>>, | ||
default: () => appConfig.ui.alert | ||
} | ||
}, | ||
emits: ['close'], | ||
setup (props) { | ||
// TODO: Remove | ||
const appConfig = useAppConfig() | ||
const ui = computed<Partial<typeof appConfig.ui.alert>>(() => defu({}, props.ui, appConfig.ui.alert)) | ||
const alertClass = computed(() => { | ||
const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant] | ||
return classNames( | ||
ui.value.wrapper, | ||
ui.value.rounded, | ||
ui.value.shadow, | ||
ui.value.padding, | ||
variant?.replaceAll('{color}', props.color) | ||
) | ||
}) | ||
return { | ||
// eslint-disable-next-line vue/no-dupe-keys | ||
ui, | ||
alertClass | ||
} | ||
} | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ab2abae
There was a problem hiding this comment.
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-git-dev-nuxtlabs.vercel.app
ui.nuxtlabs.com
ui-nuxtlabs.vercel.app