mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-25 09:20:36 +01:00
fix(components): refactor types after @nuxt/module-builder upgrade (#3855)
This commit is contained in:
@@ -1,16 +1,10 @@
|
||||
<script lang="ts">
|
||||
import type { VariantProps } from 'tailwind-variants'
|
||||
import type { SliderRootProps } from 'reka-ui'
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import _appConfig from '#build/app.config'
|
||||
import theme from '#build/ui/slider'
|
||||
import { tv } from '../utils/tv'
|
||||
import type { ComponentConfig } from '../types/utils'
|
||||
|
||||
const appConfigSlider = _appConfig as AppConfig & { ui: { slider: Partial<typeof theme> } }
|
||||
|
||||
const slider = tv({ extend: tv(theme), ...(appConfigSlider.ui?.slider || {}) })
|
||||
|
||||
type SliderVariants = VariantProps<typeof slider>
|
||||
type Slider = ComponentConfig<typeof theme, AppConfig, 'slider'>
|
||||
|
||||
export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
|
||||
/**
|
||||
@@ -21,11 +15,11 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
|
||||
/**
|
||||
* @defaultValue 'md'
|
||||
*/
|
||||
size?: SliderVariants['size']
|
||||
size?: Slider['variants']['size']
|
||||
/**
|
||||
* @defaultValue 'primary'
|
||||
*/
|
||||
color?: SliderVariants['color']
|
||||
color?: Slider['variants']['color']
|
||||
/**
|
||||
* The orientation of the slider.
|
||||
* @defaultValue 'horizontal'
|
||||
@@ -34,7 +28,7 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
|
||||
/** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */
|
||||
defaultValue?: number | number[]
|
||||
class?: any
|
||||
ui?: Partial<typeof slider.slots>
|
||||
ui?: Slider['slots']
|
||||
}
|
||||
|
||||
export interface SliderEmits {
|
||||
@@ -47,7 +41,9 @@ export interface SliderEmits {
|
||||
import { computed } from 'vue'
|
||||
import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'reka-ui'
|
||||
import { reactivePick } from '@vueuse/core'
|
||||
import { useAppConfig } from '#imports'
|
||||
import { useFormField } from '../composables/useFormField'
|
||||
import { tv } from '../utils/tv'
|
||||
|
||||
const props = withDefaults(defineProps<SliderProps>(), {
|
||||
min: 0,
|
||||
@@ -59,6 +55,8 @@ const emits = defineEmits<SliderEmits>()
|
||||
|
||||
const modelValue = defineModel<number | number[]>()
|
||||
|
||||
const appConfig = useAppConfig() as Slider['AppConfig']
|
||||
|
||||
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
|
||||
|
||||
const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<SliderProps>(props)
|
||||
@@ -84,7 +82,7 @@ const sliderValue = computed({
|
||||
|
||||
const thumbsCount = computed(() => sliderValue.value?.length ?? 1)
|
||||
|
||||
const ui = computed(() => slider({
|
||||
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) })({
|
||||
disabled: disabled.value,
|
||||
size: size.value,
|
||||
color: color.value,
|
||||
|
||||
Reference in New Issue
Block a user