arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-19 22:41:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(components): use useId from vue

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-05 16:00:30 +02:00
parent 9c4e8f2dba
commit de0133e177
6 changed files with 12 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/runtime/components/App.vue
View File

@@ -2,7 +2,7 @@
import type { ConfigProviderProps, TooltipProviderProps } from 'radix-vue'
import type { ToasterProps } from '../types'
export interface AppProps extends ConfigProviderProps {
export interface AppProps extends Omit<ConfigProviderProps, 'useId'> {
tooltip?: TooltipProviderProps
toaster?: ToasterProps | null
}
@@ -13,26 +13,23 @@ export interface AppSlots {
</script>
<script setup lang="ts">
import { toRef } from 'vue'
import { toRef, useId } from 'vue'
import { ConfigProvider, TooltipProvider, useForwardProps } from 'radix-vue'
import { reactivePick } from '@vueuse/core'
import { useId } from '#imports'
import UToaster from './Toaster.vue'
import UModalProvider from './ModalProvider.vue'
import USlideoverProvider from './SlideoverProvider.vue'
const props = withDefaults(defineProps<AppProps>(), {
useId: () => useId()
})
const props = defineProps<AppProps>()
defineSlots<AppSlots>()
const configProviderProps = useForwardProps(reactivePick(props, 'dir', 'scrollBody', 'useId'))
const configProviderProps = useForwardProps(reactivePick(props, 'dir', 'scrollBody'))
const tooltipProps = toRef(() => props.tooltip)
const toasterProps = toRef(() => props.toaster)
</script>
<template>
<ConfigProvider v-bind="configProviderProps">
<ConfigProvider :use-id="() => useId() as string" v-bind="configProviderProps">
<TooltipProvider v-bind="tooltipProps">
<UToaster v-if="toaster !== null" v-bind="toasterProps">
<slot />

4
src/runtime/components/Checkbox.vue
View File

@@ -46,10 +46,10 @@ export interface CheckboxSlots {
</script>
<script setup lang="ts">
import { computed } from 'vue'
import { computed, useId } from 'vue'
import { CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'radix-vue'
import { reactivePick } from '@vueuse/core'
import { useId, useAppConfig } from '#imports'
import { useAppConfig } from '#imports'
import { useFormField } from '../composables/useFormField'
const props = defineProps<CheckboxProps>()

3
src/runtime/components/Form.vue
View File

@@ -31,9 +31,8 @@ export interface FormSlots {
</script>
<script lang="ts" setup generic="T extends object">
import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed } from 'vue'
import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId } from 'vue'
import { useEventBus } from '@vueuse/core'
import { useId } from '#imports'
import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey } from '../composables/useFormField'
import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '../utils/form'
import { FormValidationException } from '../types/form'

3
src/runtime/components/FormField.vue
View File

@@ -36,9 +36,8 @@ export interface FormFieldSlots {
</script>
<script setup lang="ts">
import { computed, ref, inject, provide, type Ref } from 'vue'
import { computed, ref, inject, provide, type Ref, useId } from 'vue'
import { Label } from 'radix-vue'
import { useId } from '#imports'
import { formFieldInjectionKey } from '../composables/useFormField'
import type { FormError } from '../types/form'

3
src/runtime/components/RadioGroup.vue
View File

@@ -55,10 +55,9 @@ export interface RadioGroupSlots<T> {
</script>
<script setup lang="ts" generic="T extends RadioGroupItem | AcceptableValue">
import { computed } from 'vue'
import { computed, useId } from 'vue'
import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
import { reactivePick } from '@vueuse/core'
import { useId } from '#imports'
import { useFormField } from '../composables/useFormField'
const props = withDefaults(defineProps<RadioGroupProps<T>>(), {

4
src/runtime/components/Switch.vue
View File

@@ -51,10 +51,10 @@ export interface SwitchSlots {
</script>
<script setup lang="ts">
import { computed } from 'vue'
import { computed, useId } from 'vue'
import { SwitchRoot, SwitchThumb, useForwardProps, Label } from 'radix-vue'
import { reactivePick } from '@vueuse/core'
import { useId, useAppConfig } from '#imports'
import { useAppConfig } from '#imports'
import { useFormField } from '../composables/useFormField'
const props = defineProps<SwitchProps>()