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

feat(Alert/CommandPalette/Modal/Slideover/Toast): handle closeIcon and uniformize close prop

Browse Source
This commit is contained in:
Benjamin Canac
2024-06-11 15:48:45 +02:00
parent d160278283
commit e4eef89767
17 changed files with 574 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/runtime/components/Alert.vue
View File

@@ -21,7 +21,17 @@ export interface AlertProps extends Omit<PrimitiveProps, 'asChild'> {
color?: AlertVariants['color']
variant?: AlertVariants['variant']
actions?: ButtonProps[]
/**
* Display a close button to dismiss the alert.
* @emits `close`
* @defaultValue `false` (`{ size: 'md', color: 'gray', variant: 'link' }`)
*/
close?: ButtonProps | boolean
/**
* The icon displayed in the close button.
* @defaultValue `appConfig.ui.icons.close`
*/
closeIcon?: string
class?: any
ui?: Partial<typeof alert.slots>
}
@@ -98,12 +108,12 @@ const ui = computed(() => tv({ extend: alert, slots: props.ui })({
<slot name="close" :class="ui.close()">
<UButton
v-if="close"
:icon="appConfig.ui.icons.close"
:icon="closeIcon || appConfig.ui.icons.close"
size="md"
color="gray"
variant="link"
aria-label="Close"
v-bind="typeof close === 'object' ? close : {}"
v-bind="typeof close === 'object' ? close : undefined"
:class="ui.close()"
@click="emits('close')"
/>

14
src/runtime/components/CommandPalette.vue
View File

@@ -52,8 +52,16 @@ export interface CommandPaletteProps<G, T> extends Pick<ComboboxRootProps, 'as'
* @defaultValue `'Type a command or search...'`
*/
placeholder?: InputProps['placeholder']
/** Display a close button in the input, clicking it will emit the `close` event. */
/**
* Display a close button in the input (useful when inside a `UModal`).
* @defaultValue `false` (`{ size: 'md', color: 'gray', variant: 'ghost' }`)
*/
close?: ButtonProps | boolean
/**
* The icon displayed in the close button.
* @defaultValue `appConfig.ui.icons.close`
*/
closeIcon?: string
groups?: G[]
/**
* Options for [useFuse](https://vueuse.org/integrations/useFuse).
@@ -179,12 +187,12 @@ const groups = computed(() => {
<slot name="close" :class="ui.close()">
<UButton
v-if="close"
:icon="appConfig.ui.icons.close"
:icon="closeIcon || appConfig.ui.icons.close"
size="md"
color="gray"
variant="ghost"
aria-label="Close"
v-bind="typeof close === 'object' ? close : {}"
v-bind="typeof close === 'object' ? close : undefined"
:class="ui.close()"
@click="emits('update:open', false)"
/>

23
src/runtime/components/Modal.vue
View File

@@ -17,9 +17,19 @@ export interface ModalProps extends DialogRootProps {
overlay?: boolean
transition?: boolean
fullscreen?: boolean
preventClose?: boolean
portal?: boolean
close?: ButtonProps | null
/**
* Display a close button to dismiss the modal.
* @defaultValue `true` (`{ size: 'md', color: 'gray', variant: 'ghost' }`)
*/
close?: ButtonProps | boolean
/**
* The icon displayed in the close button.
* @defaultValue `appConfig.ui.icons.close`
*/
closeIcon?: string
/** When `true`, the modal will not close when clicking outside. */
preventClose?: boolean
class?: any
ui?: Partial<typeof modal.slots>
}
@@ -46,6 +56,7 @@ import { useAppConfig } from '#imports'
import { UButton } from '#components'
const props = withDefaults(defineProps<ModalProps>(), {
close: true,
portal: true,
overlay: true,
transition: true
@@ -85,7 +96,7 @@ const ui = computed(() => tv({ extend: modal, slots: props.ui })({
<DialogContent :class="ui.content({ class: props.class })" v-bind="contentProps" v-on="contentEvents">
<slot name="content">
<div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close !== null || !!slots.close)" :class="ui.header()">
<div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header()">
<slot name="header">
<DialogTitle v-if="title || !!slots.title" :class="ui.title()">
<slot name="title">
@@ -102,13 +113,13 @@ const ui = computed(() => tv({ extend: modal, slots: props.ui })({
<DialogClose as-child>
<slot name="close" :class="ui.close()">
<UButton
v-if="close !== null"
:icon="appConfig.ui.icons.close"
v-if="close"
:icon="closeIcon || appConfig.ui.icons.close"
size="md"
color="gray"
variant="ghost"
aria-label="Close"
v-bind="close"
v-bind="typeof close === 'object' ? close : undefined"
:class="ui.close()"
/>
</slot>

23
src/runtime/components/Slideover.vue
View File

@@ -19,9 +19,19 @@ export interface SlideoverProps extends DialogRootProps {
overlay?: boolean
transition?: boolean
side?: SlideoverVariants['side']
preventClose?: boolean
portal?: boolean
close?: ButtonProps | null
/**
* Display a close button to dismiss the slideover.
* @defaultValue `true` (`{ size: 'md', color: 'gray', variant: 'ghost' }`)
*/
close?: ButtonProps | boolean
/**
* The icon displayed in the close button.
* @defaultValue `appConfig.ui.icons.close`
*/
closeIcon?: string
/** When `true`, the slideover will not close when clicking outside. */
preventClose?: boolean
class?: any
ui?: Partial<typeof slideover.slots>
}
@@ -48,6 +58,7 @@ import { useAppConfig } from '#imports'
import { UButton } from '#components'
const props = withDefaults(defineProps<SlideoverProps>(), {
close: true,
portal: true,
overlay: true,
transition: true,
@@ -88,7 +99,7 @@ const ui = computed(() => tv({ extend: slideover, slots: props.ui })({
<DialogContent :data-side="side" :class="ui.content({ class: props.class })" v-bind="contentProps" v-on="contentEvents">
<slot name="content">
<div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close !== null || !!slots.close)" :class="ui.header()">
<div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header()">
<slot name="header">
<DialogTitle v-if="title || !!slots.title" :class="ui.title()">
<slot name="title">
@@ -105,13 +116,13 @@ const ui = computed(() => tv({ extend: slideover, slots: props.ui })({
<DialogClose as-child>
<slot name="close" :class="ui.close()">
<UButton
v-if="close !== null"
:icon="appConfig.ui.icons.close"
v-if="close"
:icon="closeIcon || appConfig.ui.icons.close"
size="md"
color="gray"
variant="ghost"
aria-label="Close"
v-bind="close"
v-bind="typeof close === 'object' ? close : undefined"
:class="ui.close()"
/>
</slot>

19
src/runtime/components/Toast.vue
View File

@@ -20,7 +20,16 @@ export interface ToastProps extends Omit<ToastRootProps, 'asChild' | 'forceMount
avatar?: AvatarProps
color?: ToastVariants['color']
actions?: ButtonProps[]
close?: ButtonProps | null
/**
* Display a close button to dismiss the toast.
* @defaultValue `true` (`{ size: 'md', color: 'gray', variant: 'link' }`)
*/
close?: ButtonProps | boolean
/**
* The icon displayed in the close button.
* @defaultValue `appConfig.ui.icons.close`
*/
closeIcon?: string
class?: any
ui?: Partial<typeof toast.slots>
}
@@ -43,7 +52,7 @@ import { reactivePick } from '@vueuse/core'
import { useAppConfig } from '#imports'
import { UIcon, UAvatar } from '#components'
const props = defineProps<ToastProps>()
const props = withDefaults(defineProps<ToastProps>(), { close: true })
const emits = defineEmits<ToastEmits>()
const slots = defineSlots<ToastSlots>()
@@ -124,13 +133,13 @@ defineExpose({
<ToastClose as-child>
<slot name="close" :class="ui.close()">
<UButton
v-if="close !== null"
:icon="appConfig.ui.icons.close"
v-if="close"
:icon="closeIcon || appConfig.ui.icons.close"
size="md"
color="gray"
variant="link"
aria-label="Close"
v-bind="close"
v-bind="typeof close === 'object' ? close : undefined"
:class="ui.close()"
@click.stop
/>