diff --git a/packages/devui-vue/devui/notification/__tests__/notification.spec.tsx b/packages/devui-vue/devui/notification/__tests__/notification.spec.tsx index 7bb6b625e5..dba2ec6d0b 100644 --- a/packages/devui-vue/devui/notification/__tests__/notification.spec.tsx +++ b/packages/devui-vue/devui/notification/__tests__/notification.spec.tsx @@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'; import { nextTick, ref } from 'vue'; import DNotification from '../src/notification'; import NotificationService from '../src/notification-service'; -import { useNamespace } from '../../shared/hooks/use-namespace'; +import { useNamespace } from '@devui/shared/utils'; const ns = useNamespace('notification', true); describe('d-notification', () => { diff --git a/packages/devui-vue/devui/notification/src/notification-icon-close.tsx b/packages/devui-vue/devui/notification/src/notification-icon-close.tsx index f49ddc2607..3a3e7e75ab 100644 --- a/packages/devui-vue/devui/notification/src/notification-icon-close.tsx +++ b/packages/devui-vue/devui/notification/src/notification-icon-close.tsx @@ -1,6 +1,6 @@ import { defineComponent } from 'vue'; import { Icon } from '../../icon'; -import { useNamespace } from '../../shared/hooks/use-namespace'; +import { useNamespace } from '@devui/shared/utils'; export default defineComponent({ emits: ['click'], @@ -8,7 +8,26 @@ export default defineComponent({ const ns = useNamespace('notification'); return () => (
emit('click', e)}> - + + + + + + + + + + +
); }, diff --git a/packages/devui-vue/devui/notification/src/notification-icons.tsx b/packages/devui-vue/devui/notification/src/notification-icons.tsx index a6ae216b13..a4bf4f59ba 100644 --- a/packages/devui-vue/devui/notification/src/notification-icons.tsx +++ b/packages/devui-vue/devui/notification/src/notification-icons.tsx @@ -1,4 +1,4 @@ -import { useNamespace } from '../../shared/hooks/use-namespace'; +import { useNamespace } from '@devui/shared/utils'; const ns = useNamespace('notification'); @@ -58,19 +58,20 @@ export function InfoIcon(): JSX.Element { export function ErrorIcon(): JSX.Element { return ( - - - - - - - - + + + + + ); } diff --git a/packages/devui-vue/devui/notification/src/notification-image.tsx b/packages/devui-vue/devui/notification/src/notification-image.tsx index a418528624..926bbf1dc4 100644 --- a/packages/devui-vue/devui/notification/src/notification-image.tsx +++ b/packages/devui-vue/devui/notification/src/notification-image.tsx @@ -2,7 +2,7 @@ import { computed, defineComponent, toRefs } from 'vue'; import type { PropType } from 'vue'; import { NotificationType } from './notification-types'; import { SuccessIcon, WarningIcon, InfoIcon, ErrorIcon } from './notification-icons'; -import { useNamespace } from '../../shared/hooks/use-namespace'; +import { useNamespace } from '@devui/shared/utils'; export default defineComponent({ props: { diff --git a/packages/devui-vue/devui/notification/src/notification.scss b/packages/devui-vue/devui/notification/src/notification.scss index 762cce4297..85ca9f2c7d 100644 --- a/packages/devui-vue/devui/notification/src/notification.scss +++ b/packages/devui-vue/devui/notification/src/notification.scss @@ -22,7 +22,7 @@ } } -.#{$devui-prefix}-notification-item-container { +.#{$devui-prefix}-notification__item-container { position: relative; margin: 0 0 8px 0; opacity: 0.95; @@ -45,16 +45,17 @@ right: 10px; cursor: pointer; - & i.icon { - color: $devui-light-text !important; + .devui-toast-close-icon { + fill: $devui-light-text ; } } .#{$devui-prefix}-notification__title { - font-size: $devui-font-size-card-title; - padding: 0 0 calc(0.5em - 2px) 0; + font-size: $devui-font-size-lg; + padding: 0 0 4px 0; display: block; font-weight: 700; + line-height: 1.5; } .#{$devui-prefix}-notification__image { @@ -101,9 +102,21 @@ .#{$devui-prefix}-notification__message { margin-left: 20px; + &.no-title { + margin-left: 0; + + .#{$devui-prefix}-notification__title { + padding: 0; + } + + .#{$devui-prefix}-notification__content { + margin-top: 0; + } + } + .#{$devui-prefix}-notification__content { - font-size: $devui-font-size; margin-top: 4px; + line-height: 1.5; } } @@ -112,8 +125,9 @@ } .#{$devui-prefix}-notification__message p { - font-size: $devui-font-size; + margin: 0; margin-top: 4px; + line-height: 1.5; } .notification-fade { diff --git a/packages/devui-vue/devui/notification/src/notification.tsx b/packages/devui-vue/devui/notification/src/notification.tsx index 83b4cdfa50..147cac260d 100644 --- a/packages/devui-vue/devui/notification/src/notification.tsx +++ b/packages/devui-vue/devui/notification/src/notification.tsx @@ -3,14 +3,15 @@ import { notificationProps, NotificationProps } from './notification-types'; import Close from './notification-icon-close'; import TypeIcon from './notification-image'; import { useNotification, useEvent } from './use-notification'; -import { useNamespace } from '../../shared/hooks/use-namespace'; +import { useNamespace } from '@devui/shared/utils'; import './notification.scss'; export default defineComponent({ name: 'DNotification', + inheritAttrs:false, props: notificationProps, emits: ['update:modelValue', 'destroy'], - setup(props: NotificationProps, { emit, slots }) { + setup(props: NotificationProps, { emit, slots ,attrs}) { const { modelValue, title, type } = toRefs(props); const { classes } = useNotification(props); const { interrupt, removeReset, close, handleDestroy } = useEvent(props, emit); @@ -18,14 +19,14 @@ export default defineComponent({ return () => ( {modelValue.value && ( -
({}), ['stop'])} onPointerup={withModifiers(() => ({}), ['stop'])}> +
({}), [''])} onPointerup={withModifiers(() => ({}), ['stop'])} {...attrs}>
{title.value && } -
+
{title.value} - {slots.default?.()} +

{slots.default?.()}

diff --git a/packages/devui-vue/devui/notification/src/use-notification.ts b/packages/devui-vue/devui/notification/src/use-notification.ts index d14c8b6eba..0fead1f6fa 100644 --- a/packages/devui-vue/devui/notification/src/use-notification.ts +++ b/packages/devui-vue/devui/notification/src/use-notification.ts @@ -1,11 +1,13 @@ import { computed, watch } from 'vue'; import type { ComputedRef } from 'vue'; import { NotificationProps, EmitEventFn, VoidFn } from './notification-types'; +import { useNamespace } from '@devui/shared/utils'; +const ns= useNamespace('notification') export function useNotification(props: NotificationProps): { classes: ComputedRef> } { const classes = computed(() => ({ - 'devui-notification-item-container': true, - [`devui-notification-message-${props.type}`]: true, + [ns.e('item-container')]:true, + [ns.em('message',props.type)]:true, })); return { classes };