mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-30 12:13:48 +02:00
57 lines
2.6 KiB
Vue
57 lines
2.6 KiB
Vue
<script setup>
|
|
import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';
|
|
import { cn } from '@/lib/utils';
|
|
import { reactiveOmit } from '@vueuse/core';
|
|
|
|
const props = defineProps({
|
|
defaultValue: { type: Array, required: false },
|
|
modelValue: { type: [Array, null], required: false },
|
|
disabled: { type: Boolean, required: false },
|
|
orientation: { type: String, required: false },
|
|
dir: { type: String, required: false },
|
|
inverted: { type: Boolean, required: false },
|
|
min: { type: Number, required: false },
|
|
max: { type: Number, required: false },
|
|
step: { type: Number, required: false },
|
|
minStepsBetweenThumbs: { type: Number, required: false },
|
|
thumbAlignment: { type: String, required: false },
|
|
asChild: { type: Boolean, required: false },
|
|
as: { type: null, required: false },
|
|
name: { type: String, required: false },
|
|
required: { type: Boolean, required: false },
|
|
class: { type: null, required: false }
|
|
});
|
|
const emits = defineEmits(['update:modelValue', 'valueCommit']);
|
|
|
|
const delegatedProps = reactiveOmit(props, 'class');
|
|
|
|
const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|
</script>
|
|
|
|
<template>
|
|
<SliderRoot
|
|
v-slot="{ modelValue }"
|
|
data-slot="slider"
|
|
:class="
|
|
cn(
|
|
'relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
|
|
props.class
|
|
)
|
|
"
|
|
v-bind="forwarded">
|
|
<SliderTrack
|
|
data-slot="slider-track"
|
|
class="bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5">
|
|
<SliderRange
|
|
data-slot="slider-range"
|
|
class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
|
|
</SliderTrack>
|
|
|
|
<SliderThumb
|
|
v-for="(_, key) in modelValue"
|
|
:key="key"
|
|
data-slot="slider-thumb"
|
|
class="bg-white border-primary ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
|
|
</SliderRoot>
|
|
</template>
|