feat(Toast): expose toast duration in slot

cyyynthia · Jul 10, 2024 · d39d1c6 · d39d1c6
1 parent 1c850cc
commit d39d1c6
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/docs/content/meta/ToastRoot.md b/docs/content/meta/ToastRoot.md
@@ -101,5 +101,10 @@
  'name': 'remaining',
  'description': '<p>Remaining time (in ms)</p>\n',
  'type': 'number'
+ },
+ {
+ 'name': 'duration',
+ 'description': '<p>Total time the toast will remain visible for (in ms)</p>\n',
+ 'type': 'number'
  }
 ]" />
diff --git a/packages/radix-vue/src/Toast/Toast.test.ts b/packages/radix-vue/src/Toast/Toast.test.ts
@@ -8,7 +8,7 @@ import Toast from './story/_Toast.vue'
 
 const CLOSE_TEXT = 'Close'
 
-describe('given a default Dialog', () => {
+describe('given a default Toast', () => {
  let wrapper: VueWrapper<InstanceType<typeof Toast>>
  let trigger: DOMWrapper<HTMLElement>
  let closeButton: HTMLElement

diff --git a/packages/radix-vue/src/Toast/ToastRoot.vue b/packages/radix-vue/src/Toast/ToastRoot.vue
@@ -39,6 +39,8 @@ defineSlots<{
  open: typeof open.value
  /** Remaining time (in ms) */
  remaining: number
+ /** Total time the toast will remain visible for (in ms) */
+ duration: number
  }) => any
 }>()
 
@@ -53,7 +55,7 @@ const open = useVModel(props, 'open', emits, {
  <Presence :present="forceMount || open">
  <ToastRootImpl
  :ref="forwardRef"
- v-slot="{ remaining }"
+ v-slot="{ remaining, duration: _duration }"
  :open="open"
  :type="type"
  :as="as"
@@ -96,6 +98,7 @@ const open = useVModel(props, 'open', emits, {
  >
  <slot
  :remaining="remaining"
+ :duration="_duration"
  :open="open"
  />
  </ToastRootImpl>

diff --git a/packages/radix-vue/src/Toast/ToastRootImpl.vue b/packages/radix-vue/src/Toast/ToastRootImpl.vue
@@ -240,7 +240,10 @@ provideToastRootContext({ onClose: handleClose })
  }
  }"
  >
- <slot :remaining="remainingTime" />
+ <slot
+ :remaining="remainingTime"
+ :duration="duration"
+ />
  </Primitive>
  </Teleport>
 </template>