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

fix(useComponentIcons): reactivity when using defu

Browse Source
This commit is contained in:
Benjamin Canac
2024-05-10 17:57:53 +02:00
parent 52cf471099
commit 45454fae45
5 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/runtime/composables/useComponentIcons.ts
View File

@@ -1,9 +1,8 @@
import { computed } from 'vue'
import { computed, toValue, type MaybeRefOrGetter } from 'vue'
import { useAppConfig } from '#imports'
import type { GetObjectField } from '#ui/types/utils'
export interface UseComponentIconsProps {
/** Display an icon based on the `leading` and `trailing` props. */
/** Display an icon based on the `leading` and `trailing` props.value. */
icon?: string
/** When `true`, the icon will be displayed on the left side. */
leading?: boolean
@@ -22,25 +21,27 @@ export interface UseComponentIconsProps {
loadingIcon?: string
}
export function useComponentIcons<T>(props: UseComponentIconsProps & { size: GetObjectField<T, 'size'> }) {
export function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>) {
const appConfig = useAppConfig()
const isLeading = computed(() => (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing && !props.trailingIcon) || !!props.leadingIcon)
const isTrailing = computed(() => (props.icon && props.trailing) || (props.loading && props.trailing) || !!props.trailingIcon)
const props = computed(() => toValue(componentProps))
const isLeading = computed(() => (props.value.icon && props.value.leading) || (props.value.icon && !props.value.trailing) || (props.value.loading && !props.value.trailing && !props.value.trailingIcon) || !!props.value.leadingIcon)
const isTrailing = computed(() => (props.value.icon && props.value.trailing) || (props.value.loading && props.value.trailing) || !!props.value.trailingIcon)
const leadingIconName = computed(() => {
if (props.loading) {
return props.loadingIcon || appConfig.ui.icons.loading
if (props.value.loading) {
return props.value.loadingIcon || appConfig.ui.icons.loading
}
return props.leadingIcon || props.icon
return props.value.leadingIcon || props.value.icon
})
const trailingIconName = computed(() => {
if (props.loading && !isLeading.value) {
return props.loadingIcon || appConfig.ui.icons.loading
if (props.value.loading && !isLeading.value) {
return props.value.loadingIcon || appConfig.ui.icons.loading
}
return props.trailingIcon || props.icon
return props.value.trailingIcon || props.value.icon
})
return {