20260720172840

code/fms/.claude/skills/antdv-next/references/components/notification/demo/_semantic.md

@@ -0,0 +1,77 @@
+# _semantic
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { Button, notification } from 'antdv-next'
+import { computed, h } from 'vue'
+import { SemanticPreview } from '@/components/semantic'
+import { useComponentLocale } from '@/composables/use-locale'
+import { locales } from '../locales'
+
+const { _InternalListDoNotUseOrYouWillBeFired: InternalList } = notification
+
+const { t } = useComponentLocale(locales)
+
+const previewListStyle = {
+  position: 'relative',
+  inset: 'auto',
+  width: '432px',
+  maxWidth: '100%',
+  height: 'auto',
+  padding: '24px',
+  transform: 'none',
+} as const
+
+const semantics = computed(() => [
+  { name: 'root', desc: t('root'), version: '1.0.0' },
+  { name: 'wrapper', desc: t('wrapper'), version: '1.3.0' },
+  { name: 'icon', desc: t('icon'), version: '1.0.0' },
+  { name: 'section', desc: t('section'), version: '1.3.0' },
+  { name: 'title', desc: t('title'), version: '1.0.0' },
+  { name: 'description', desc: t('description'), version: '1.0.0' },
+  { name: 'close', desc: t('close'), version: '1.3.0' },
+  { name: 'actions', desc: t('actions'), version: '1.0.0' },
+  { name: 'progress', desc: t('progress'), version: '1.3.0' },
+  { name: 'list', desc: t('list'), version: '1.3.0' },
+  { name: 'listContent', desc: t('listContent'), version: '1.3.0' },
+])
+
+const items = computed(() => [
+  {
+    key: 'semantic-notification-1',
+    title: 'Hello World!',
+    description: 'Hello World?',
+    type: 'success' as const,
+    duration: false as const,
+    actions: h(Button, { type: 'primary', size: 'small' }, () => 'My Button'),
+  },
+  {
+    key: 'semantic-notification-2',
+    title: 'Welcome back!',
+    description: 'This is another notification.',
+    type: 'info' as const,
+    duration: 999999,
+    showProgress: true,
+  },
+])
+</script>
+
+<template>
+  <SemanticPreview
+    component-name="Notification"
+    :height="320"
+    :semantics="semantics"
+  >
+    <template #default="{ classes }">
+      <InternalList
+        placement="topRight"
+        :style="previewListStyle"
+        :items="items"
+        :classes="classes"
+      />
+    </template>
+  </SemanticPreview>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/demo/basic.md

@@ -0,0 +1,29 @@
+# Static method (deprecated)
+
+## Description (en-US)
+
+Static methods cannot consume Context provided by `ConfigProvider`. When enable `layer`, they may also cause style errors. Please use hooks version or `App` provided instance first.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { notification } from 'antdv-next'
+
+function openNotification() {
+  notification.open({
+    title: 'Notification Title',
+    description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+    onClick: () => {
+      console.log('Notification Clicked!')
+    },
+  })
+}
+</script>
+
+<template>
+  <a-button type="primary" @click="openNotification">
+    Open the notification box
+  </a-button>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/demo/custom-icon.md

@@ -0,0 +1,33 @@
+# Customized icon
+
+## Description (en-US)
+
+The icon can be customized to any VueNode.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { SmileOutlined } from '@antdv-next/icons'
+import { notification } from 'antdv-next'
+import { h } from 'vue'
+
+const [api, ContextHolder] = notification.useNotification()
+
+function openNotification() {
+  api.open({
+    title: 'Notification Title',
+    description:
+      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+    icon: h(SmileOutlined, { style: { color: '#108ee9' } }),
+  })
+}
+</script>
+
+<template>
+  <ContextHolder />
+  <a-button type="primary" @click="openNotification">
+    Open the notification box
+  </a-button>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/demo/custom-style.md

@@ -0,0 +1,34 @@
+# Customized style
+
+## Description (en-US)
+
+The style and class are available to customize Notification.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { notification } from 'antdv-next'
+
+const [api, ContextHolder] = notification.useNotification()
+
+function openNotification() {
+  api.open({
+    title: 'Notification Title',
+    description:
+      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+    class: 'custom-class',
+    style: {
+      width: '600px',
+    },
+  })
+}
+</script>
+
+<template>
+  <ContextHolder />
+  <a-button type="primary" @click="openNotification">
+    Open the notification box
+  </a-button>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/demo/duration.md

@@ -0,0 +1,31 @@
+# Duration after which the notification box is closed
+
+## Description (en-US)
+
+`Duration` can be used to specify how long the notification stays open. After the duration time elapses, the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0, the notification box will never close automatically.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { notification } from 'antdv-next'
+
+const [api, ContextHolder] = notification.useNotification()
+
+function openNotification() {
+  api.open({
+    title: 'Notification Title',
+    description:
+      'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
+    duration: 0,
+  })
+}
+</script>
+
+<template>
+  <ContextHolder />
+  <a-button type="primary" @click="openNotification">
+    Open the notification box
+  </a-button>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/demo/hooks.md

@@ -0,0 +1,78 @@
+# Hooks usage (recommended)
+
+## Description (en-US)
+
+Use `notification.useNotification` to get `contextHolder` with context accessible issue. Please note that, we recommend to use top level registration instead of `notification` static method, because static method cannot consume context, and ConfigProvider data will not work.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import {
+  RadiusBottomleftOutlined,
+  RadiusBottomrightOutlined,
+  RadiusUpleftOutlined,
+  RadiusUprightOutlined,
+} from '@antdv-next/icons'
+import { notification } from 'antdv-next'
+import { defineComponent, h, inject, provide, reactive } from 'vue'
+
+const ContextKey = Symbol('notification-context')
+const contextValue = reactive({ name: 'Antdv Next' })
+
+provide(ContextKey, contextValue)
+
+const ContextText = defineComponent(() => {
+  const context = inject(ContextKey, { name: 'Default' }) as { name: string }
+  return () => `Hello, ${context.name}!`
+})
+
+const [api, ContextHolder] = notification.useNotification()
+
+// eslint-disable-next-line unused-imports/no-unused-vars
+const placements = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'] as const
+
+type NotificationPlacement = (typeof placements)[number]
+
+function openNotification(placement: NotificationPlacement) {
+  api.info({
+    title: `Notification ${placement}`,
+    description: h(ContextText),
+    placement,
+  })
+}
+</script>
+
+<template>
+  <ContextHolder />
+  <a-space>
+    <a-button type="primary" @click="openNotification('topLeft')">
+      <template #icon>
+        <RadiusUpleftOutlined />
+      </template>
+      topLeft
+    </a-button>
+    <a-button type="primary" @click="openNotification('topRight')">
+      <template #icon>
+        <RadiusUprightOutlined />
+      </template>
+      topRight
+    </a-button>
+  </a-space>
+  <a-divider />
+  <a-space>
+    <a-button type="primary" @click="openNotification('bottomLeft')">
+      <template #icon>
+        <RadiusBottomleftOutlined />
+      </template>
+      bottomLeft
+    </a-button>
+    <a-button type="primary" @click="openNotification('bottomRight')">
+      <template #icon>
+        <RadiusBottomrightOutlined />
+      </template>
+      bottomRight
+    </a-button>
+  </a-space>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/demo/placement.md

@@ -0,0 +1,72 @@
+# Placement
+
+## Description (en-US)
+
+A notification box can appear from the `top` `bottom` `topLeft` `topRight` `bottomLeft` or `bottomRight` of the viewport via `placement`.
+
+## Source
+
+```vue
+<script lang="ts" setup>
+import { BorderBottomOutlined, BorderTopOutlined, RadiusBottomleftOutlined, RadiusBottomrightOutlined, RadiusUpleftOutlined, RadiusUprightOutlined } from '@antdv-next/icons'
+import { notification } from 'antdv-next'
+
+const [api, ContextHolder] = notification.useNotification()
+
+function openNotification(placement: string) {
+  api.info({
+    title: `Notification ${placement}`,
+    description: 'This is the content of the notification.',
+    placement: placement as any,
+  })
+}
+</script>
+
+<template>
+  <ContextHolder />
+  <a-space>
+    <a-button type="primary" @click="openNotification('top')">
+      <template #icon>
+        <BorderTopOutlined />
+      </template>
+      top
+    </a-button>
+    <a-button type="primary" @click="openNotification('bottom')">
+      <template #icon>
+        <BorderBottomOutlined />
+      </template>
+      bottom
+    </a-button>
+  </a-space>
+  <a-divider />
+  <a-space>
+    <a-button type="primary" @click="openNotification('topLeft')">
+      <template #icon>
+        <RadiusUpleftOutlined />
+      </template>
+      topLeft
+    </a-button>
+    <a-button type="primary" @click="openNotification('topRight')">
+      <template #icon>
+        <RadiusUprightOutlined />
+      </template>
+      topRight
+    </a-button>
+  </a-space>
+  <a-divider />
+  <a-space>
+    <a-button type="primary" @click="openNotification('bottomLeft')">
+      <template #icon>
+        <RadiusBottomleftOutlined />
+      </template>
+      bottomLeft
+    </a-button>
+    <a-button type="primary" @click="openNotification('bottomRight')">
+      <template #icon>
+        <RadiusBottomrightOutlined />
+      </template>
+      bottomRight
+    </a-button>
+  </a-space>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/demo/progress-color.md

@@ -0,0 +1,54 @@
+# Customize progress bar color
+
+## Description (en-US)
+
+Customize the progress bar color by configuring the component token.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { notification } from 'antdv-next'
+
+const COLOR_BG = 'linear-gradient(135deg, #6253e1, #04befe)'
+
+const [api, ContextHolder] = notification.useNotification()
+
+function openNotification() {
+  api.open({
+    title: 'Customize progress bar color',
+    description: 'You can use component token to customize the progress bar color',
+    showProgress: true,
+    duration: 20,
+  })
+}
+</script>
+
+<template>
+  <a-config-provider
+    :theme="{
+      components: {
+        Notification: {
+          progressBg: COLOR_BG,
+        },
+      },
+    }"
+  >
+    <ContextHolder />
+    <a-button class="linear-gradient-button" type="primary" @click="openNotification">
+      Show custom progress color
+    </a-button>
+  </a-config-provider>
+</template>
+
+<style>
+.linear-gradient-button {
+  background: linear-gradient(135deg, #6253e1, #04befe);
+  border-color: transparent;
+}
+
+.linear-gradient-button:hover {
+  background: linear-gradient(135deg, #6f60e8, #2fc9ff);
+}
+</style>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/demo/show-with-progress.md

@@ -0,0 +1,37 @@
+# Show with progress
+
+## Description (en-US)
+
+Show progress bar for auto-closing notification.
+
+## Source
+
+```vue
+<script lang="ts" setup>
+import { notification } from 'antdv-next'
+
+const [api, ContextHolder] = notification.useNotification()
+
+function openNotification(pauseOnHover: boolean) {
+  api.open({
+    title: 'Notification Title',
+    description:
+        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+    showProgress: true,
+    pauseOnHover,
+  })
+}
+</script>
+
+<template>
+  <ContextHolder />
+  <a-space>
+    <a-button type="primary" @click="openNotification(true)">
+      Pause on hover
+    </a-button>
+    <a-button type="primary" @click="openNotification(false)">
+      Don't pause on hover
+    </a-button>
+  </a-space>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/demo/stack.md

@@ -0,0 +1,73 @@
+# Stack
+
+## Description (en-US)
+
+Stack configuration, enabled by default. More than 3 notifications will be automatically stacked, and could be changed by `threshold`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { notification } from 'antdv-next'
+import { computed, ref } from 'vue'
+
+const enabled = ref(true)
+const threshold = ref(3)
+
+const notificationConfig = computed(() => {
+  return {
+    stack: enabled.value
+      ? {
+          threshold: threshold.value,
+        }
+      : false,
+  }
+})
+
+const [api, ContextHolder] = notification.useNotification(notificationConfig)
+
+function openNotification() {
+  api.open({
+    title: 'Notification Title',
+    description: Array.from(
+      { length: Math.round(Math.random() * 5) + 1 },
+      () => 'This is the content of the notification.',
+    ).join('\n'),
+    duration: false,
+  })
+}
+
+function toggleEnabled(value: boolean) {
+  enabled.value = value
+}
+
+function updateThreshold(value: number | null) {
+  threshold.value = value || 1
+}
+</script>
+
+<template>
+  <ContextHolder />
+  <a-space size="large">
+    <a-space :style="{ width: '100%' }">
+      <span>Enabled:</span>
+      <a-switch :checked="enabled" @change="toggleEnabled" />
+    </a-space>
+    <a-space :style="{ width: '100%' }">
+      <span>Threshold:</span>
+      <a-input-number
+        :value="threshold"
+        :min="1"
+        :max="10"
+        :step="1"
+        :disabled="!enabled"
+        @change="updateThreshold"
+      />
+    </a-space>
+  </a-space>
+  <a-divider />
+  <a-button type="primary" @click="openNotification">
+    Open the notification box
+  </a-button>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/demo/style-class.md

@@ -0,0 +1,90 @@
+# Custom semantic dom styling
+
+## Description (en-US)
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import { notification } from 'antdv-next'
+
+const [api, ContextHolder] = notification.useNotification()
+
+const defaultStyles: Record<string, CSSProperties> = {
+  root: {
+    backgroundColor: '#f6ffed',
+    border: '2px solid #95de64',
+    borderRadius: '16px',
+    boxShadow: '4px 4px 0 #d9f7be',
+  },
+  icon: {
+    color: '#237804',
+  },
+  title: {
+    color: '#237804',
+    fontWeight: 600,
+  },
+  description: {
+    color: '#3f6600',
+  },
+}
+
+function styleFn(info: { props: any }): Record<string, CSSProperties> {
+  if (info.props.type === 'error') {
+    return {
+      ...defaultStyles,
+      root: {
+        ...defaultStyles.root,
+        backgroundColor: '#fff2f0',
+        borderColor: '#ffccc7',
+        boxShadow: '4px 4px 0 #ffccc7',
+      },
+      icon: {
+        color: '#cf1322',
+      },
+      title: {
+        color: '#cf1322',
+      },
+      description: {
+        color: '#5c0011',
+      },
+    }
+  }
+  return defaultStyles
+}
+
+const sharedProps = {
+  title: 'Notification Title',
+  description: 'This is a notification description.',
+  duration: false as const,
+}
+
+function openDefault() {
+  api.info({
+    ...sharedProps,
+    styles: defaultStyles,
+  })
+}
+
+function openError() {
+  api.error({
+    ...sharedProps,
+    type: 'error',
+    styles: styleFn as any,
+  })
+}
+</script>
+
+<template>
+  <ContextHolder />
+  <a-space>
+    <a-button type="primary" @click="openDefault">
+      Default Notification
+    </a-button>
+    <a-button @click="openError">
+      Error Notification
+    </a-button>
+  </a-space>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/demo/update.md

@@ -0,0 +1,40 @@
+# Update message content
+
+## Description (en-US)
+
+Update content with a unique key.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { notification } from 'antdv-next'
+
+const key = 'updatable'
+
+const [api, ContextHolder] = notification.useNotification()
+
+function openNotification() {
+  api.open({
+    key,
+    title: 'Notification Title',
+    description: 'description.',
+  })
+
+  setTimeout(() => {
+    api.open({
+      key,
+      title: 'New Title',
+      description: 'New description.',
+    })
+  }, 1000)
+}
+</script>
+
+<template>
+  <ContextHolder />
+  <a-button type="primary" @click="openNotification">
+    Open the notification box
+  </a-button>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/demo/with-btn.md

@@ -0,0 +1,64 @@
+# Custom close button
+
+## Description (en-US)
+
+To customize the style or font of the close button.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { Button, notification, Space } from 'antdv-next'
+import { h } from 'vue'
+
+const [api, ContextHolder] = notification.useNotification()
+
+function close() {
+  console.log('Notification was closed. Either the close button was clicked or duration time elapsed.')
+}
+
+function openNotification() {
+  const key = `open${Date.now()}`
+  const actions = h(
+    Space,
+    { size: 8 },
+    () => [
+      h(
+        Button,
+        {
+          type: 'link',
+          size: 'small',
+          onClick: () => api.destroy(),
+        },
+        { default: () => 'Destroy All' },
+      ),
+      h(
+        Button,
+        {
+          type: 'primary',
+          size: 'small',
+          onClick: () => api.destroy(key),
+        },
+        { default: () => 'Confirm' },
+      ),
+    ],
+  )
+
+  api.open({
+    title: 'Notification Title',
+    description:
+      'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
+    key,
+    onClose: close,
+    actions,
+  })
+}
+</script>
+
+<template>
+  <ContextHolder />
+  <a-button type="primary" @click="openNotification">
+    Open the notification box
+  </a-button>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/demo/with-icon.md

@@ -0,0 +1,43 @@
+# Notification with icon
+
+## Description (en-US)
+
+A notification box with a icon at the left side.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { notification } from 'antdv-next'
+
+const [api, ContextHolder] = notification.useNotification()
+
+type NotificationType = 'success' | 'info' | 'warning' | 'error'
+
+function openNotificationWithIcon(type: NotificationType) {
+  api[type]({
+    title: 'Notification Title',
+    description:
+      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+  })
+}
+</script>
+
+<template>
+  <ContextHolder />
+  <a-flex gap="8" wrap="wrap">
+    <a-button color="green" variant="outlined" @click="openNotificationWithIcon('success')">
+      Success
+    </a-button>
+    <a-button color="blue" variant="outlined" @click="openNotificationWithIcon('info')">
+      Info
+    </a-button>
+    <a-button color="yellow" variant="outlined" @click="openNotificationWithIcon('warning')">
+      Warning
+    </a-button>
+    <a-button color="red" variant="outlined" @click="openNotificationWithIcon('error')">
+      Error
+    </a-button>
+  </a-flex>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/notification/docs.md

@@ -0,0 +1,169 @@
+---
+title: Notification
+description: Prompt notification message globally.
+---
+
+## When To Use 
+To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:
+
+- A notification with complex content.
+- A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.
+- A notification that is pushed by the application.
+
+## Demos
+
+| Demo | Path |
+| --- | --- |
+| Hooks usage (recommended) | demo/hooks.md |
+| Duration after which the notification box is closed | demo/duration.md |
+| Notification with icon | demo/with-icon.md |
+| Custom close button | demo/with-btn.md |
+| Customized icon | demo/custom-icon.md |
+| Placement | demo/placement.md |
+| Customized style | demo/custom-style.md |
+| Update message content | demo/update.md |
+| Stack | demo/stack.md |
+| Show with progress | demo/show-with-progress.md |
+| Static method (deprecated) | demo/basic.md |
+| Customize progress bar color | demo/progress-color.md |
+| Custom semantic dom styling | demo/style-class.md |
+
+## API
+
+Common props ref：[Common props](../../docs/vue/common-props.md)
+
+### Static Methods 
+- `notification.success(config)`
+- `notification.error(config)`
+- `notification.info(config)`
+- `notification.warning(config)`
+- `notification.open(config)`
+- `notification.destroy(key?: Key)`
+- `notification.config(options)`
+- `notification.useNotification(config)`
+
+### ArgsProps 
+The properties of `config` are as follows:
+
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| title | The title of notification box | VueNode | - | - | × |
+| description | The content of notification box | VueNode | - | - | × |
+| actions | Customized button group | VueNode | - | - | × |
+| key | The unique identifier of the Notification | Key | - | - | × |
+| duration | Time in seconds before Notification is closed. When set to `0` or `false`, it will never be closed automatically | number \| false | 4.5 | - | × |
+| showProgress | Show progress bar for auto-closing notification | boolean | - | - | × |
+| pauseOnHover | Keep the timer running or not on hover | boolean | true | - | × |
+| icon | Customized icon | VueNode | - | - | × |
+| placement | Position of Notification, can be one of `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | NotificationPlacement | `topRight` | - | × |
+| class | Customized CSS class | string | - | - | ✓ |
+| style | Customized inline style | CSSProperties | - | - | ✓ |
+| classes | Customize class for each semantic structure inside the component. Supports object or function. | NotificationClassNamesType | - | - | ✓ |
+| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | NotificationStylesType | - | - | ✓ |
+| type | Notification type | IconType | - | - | × |
+| onClick | Specify a function that will be called when the notification is clicked | () => void | - | - | × |
+| onClose | Trigger when notification closed | () => void | - | - | × |
+| closeIcon | Custom close icon. Set to null or false to hide close button | VueNode | true | - | ✓ |
+| closable | Whether to show close button | boolean \| ClosableType | true | - | × |
+| props | Props passed to the notification `div`, supports `data-testid`, `aria-*`, or `role` | DivProps | - | - | × |
+| role | The semantics of notification content recognized by screen readers | 'alert' \| 'status' | `alert` | - | × |
+
+### notification.useNotification 
+The properties of `config` are as follows:
+
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| top | Distance from the top of the viewport, when `placement` is `top` `topRight` or `topLeft` (unit: pixels) | number | 24 | - | × |
+| bottom | Distance from the bottom of the viewport, when `placement` is `bottom` `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 | - | × |
+| placement | Position of Notification, can be one of `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | NotificationPlacement | `topRight` | - | × |
+| getContainer | Return the mount node for Notification | () => HTMLElement \| ShadowRoot | () => document.body | - | × |
+| duration | Time in seconds before Notification is closed. When set to `0` or `false`, it will never be closed automatically | number \| false | 4.5 | - | × |
+| maxCount | Max Notification show, drop oldest if exceed limit | number | - | - | × |
+| rtl | Whether to enable RTL mode | boolean | false | - | × |
+| stack | Notifications will be stacked when amount is over threshold | boolean \| { threshold?: number } | { threshold: 3 } | - | × |
+| showProgress | Show progress bar for auto-closing notification | boolean | - | - | × |
+| pauseOnHover | Keep the timer running or not on hover | boolean | true | - | × |
+| closeIcon | Custom close icon. Set to null or false to hide close button | VueNode | true | - | ✓ |
+| prefixCls | - | string | `ant-notification` | - | × |
+| classes | Customize class for each semantic structure inside the component. Supports object or function. | NotificationClassNamesType | - | - | ✓ |
+| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | NotificationStylesType | - | - | ✓ |
+
+### ClosableType 
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| closeIcon | Custom close icon | VueNode | - | - |
+| onClose | Trigger when notification close | () => void | - | - |
+| disabled | Whether the close button is disabled | boolean | - | - |
+
+### Global configuration 
+`notification.config(options)`
+
+```js
+notification.config({
+  placement: 'bottomRight',
+  bottom: 50,
+  duration: 3,
+  rtl: true,
+})
+```
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| top | Distance from the top of the viewport, when `placement` is `top` `topRight` or `topLeft` (unit: pixels) | number | 24 | - |
+| bottom | Distance from the bottom of the viewport, when `placement` is `bottom` `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 | - |
+| duration | Time in seconds before Notification is closed. When set to `0` or `false`, it will never be closed automatically | number \| false | 4.5 | - |
+| showProgress | Show progress bar for auto-closing notification | boolean | - | - |
+| pauseOnHover | Keep the timer running or not on hover | boolean | true | - |
+| prefixCls | - | string | `ant-notification` | - |
+| getContainer | Return the mount node for Notification | () => HTMLElement \| ShadowRoot | () => document.body | - |
+| placement | Position of Notification, can be one of `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | NotificationPlacement | `topRight` | - |
+| closeIcon | Custom close icon. Set to null or false to hide close button | VueNode | true | - |
+| closable | Whether to show close button | ClosableType | - | - |
+| rtl | Whether to enable RTL mode | boolean | false | - |
+| maxCount | Max Notification show, drop oldest if exceed limit | number | - | - |
+| props | Props passed to the notification `div`, supports `data-testid`, `aria-*`, or `role` | DivProps | - | - |
+
+## Semantic DOM
+
+| _semantic | demo/_semantic.md |
+
+## FAQ
+
+### Why I can not access context, ConfigProvider `locale/prefixCls/theme` in notification? 
+Calling `notification` methods will render a new instance which does not inherit the current context. When you need context info, use `notification.useNotification` to get `api` and `ContextHolder`, then render it inside your component tree:
+
+```vue
+<script setup>
+import { notification } from 'antdv-next'
+
+const [api, ContextHolder] = notification.useNotification()
+</script>
+
+<template>
+  <ContextHolder />
+</template>
+```
+
+**Note:** You must insert `ContextHolder` into your children with hooks. You can use static methods if you do not need context connection.
+
+> [App Package Component](../app/docs.md) can be used to simplify `useNotification` and other methods that need to manually implant ContextHolder.
+
+If you still need to use static methods and want them to read `locale`, `theme`, or other ConfigProvider settings, configure a global `holderRender` once:
+
+```ts
+import { App, ConfigProvider } from 'antdv-next'
+import { h } from 'vue'
+import zhCN from 'antdv-next/locale/zh_CN'
+
+ConfigProvider.config({
+  holderRender: children =>
+    h(ConfigProvider, { locale: zhCN }, {
+      default: () => h(App, null, () => children),
+    }),
+})
+```
+
+Then `notification.open`, `notification.success` and other static methods will render with that wrapped context.
+
+### How to set static methods prefixCls? 
+You can config with [`ConfigProvider.config`](../config-provider/docs.md#configproviderconfig-4130).

code/fms/.claude/skills/antdv-next/references/components/notification/token.md

@@ -0,0 +1,32 @@
+# notification Token
+
+Use these variables through `theme.components.Notification`. This document lists definitions only and does not include values.
+
+```vue
+<a-config-provider
+  :theme="{
+    token: {
+      // Global token configuration
+    },
+    components: {
+      Notification: {
+        // Token name: value
+      },
+    },
+  }"
+>
+  ...
+</a-config-provider>
+```
+
+## Token List
+
+| Token | Type | Description |
+| --- | --- | --- |
+| `zIndexPopup` | `number` | z-index of Notification |
+| `width` | `string \| number` | Width of Notification |
+| `progressBg` | `string` | Background color of Notification progress bar |
+| `colorSuccessBg` | `string \| undefined` | Background color of success notification container |
+| `colorErrorBg` | `string \| undefined` | Background color of error notification container |
+| `colorInfoBg` | `string \| undefined` | Background color of info notification container |
+| `colorWarningBg` | `string \| undefined` | Background color of warning notification container |