mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-02-03 13:47:55 +01:00
chore(Provider): add props
This commit is contained in:
@@ -1,14 +1,31 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { ConfigProviderProps, ToastProviderProps, TooltipProviderProps } from 'radix-vue'
|
||||||
|
|
||||||
|
export interface ProviderProps extends ConfigProviderProps {
|
||||||
|
tooltip?: TooltipProviderProps
|
||||||
|
toast?: ToastProviderProps
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ConfigProvider, ToastProvider, TooltipProvider } from 'radix-vue'
|
import { toRef } from 'vue'
|
||||||
|
import { ConfigProvider, ToastProvider, TooltipProvider, useForwardProps } from 'radix-vue'
|
||||||
|
import { reactivePick } from '@vueuse/core'
|
||||||
import { useId } from '#imports'
|
import { useId } from '#imports'
|
||||||
|
|
||||||
const useIdFunction = () => useId()
|
const props = withDefaults(defineProps<ProviderProps>(), {
|
||||||
|
useId: () => useId()
|
||||||
|
})
|
||||||
|
|
||||||
|
const configProps = useForwardProps(reactivePick(props, 'dir', 'scrollBody', 'useId'))
|
||||||
|
const tooltipProps = toRef(() => props.tooltip as TooltipProviderProps)
|
||||||
|
const toastProps = toRef(() => props.toast as ToastProviderProps)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ConfigProvider :use-id="useIdFunction">
|
<ConfigProvider v-bind="configProps">
|
||||||
<TooltipProvider>
|
<TooltipProvider v-bind="tooltipProps">
|
||||||
<ToastProvider>
|
<ToastProvider v-bind="toastProps">
|
||||||
<slot />
|
<slot />
|
||||||
</ToastProvider>
|
</ToastProvider>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
|
|||||||
Reference in New Issue
Block a user