Slider

<!--
  Radix `Slider` → Reka UI `SliderRoot`/`SliderTrack`/`SliderRange`/`SliderThumb`,
  тот же примитив.
-->
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { computed } from "vue"
import { SliderRange, SliderRoot, SliderThumb, SliderTrack, type SliderRootEmits, type SliderRootProps, useForwardPropsEmits } from "reka-ui"
import { cn } from "@/lib/utils"

const props = withDefaults(
  defineProps<
    SliderRootProps & {
      /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
      class?: HTMLAttributes["class"]
    }
  >(),
  {
    min: 0,
    max: 100,
  }
)
const emits = defineEmits<SliderRootEmits>()

const delegatedProps = computed(() => {
  const { class: _class, ...delegated } = props
  return delegated
})

const forwarded = useForwardPropsEmits(delegatedProps, emits)

const _values = computed(() =>
  Array.isArray(props.modelValue)
    ? props.modelValue
    : Array.isArray(props.defaultValue)
      ? props.defaultValue
      : [props.min, props.max]
)
</script>

<template>
  <SliderRoot
    data-slot="slider"
    v-bind="forwarded"
    :min="props.min"
    :max="props.max"
    :class="
      cn(
        'cn-slider relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col',
        props.class
      )
    "
  >
    <SliderTrack
      data-slot="slider-track"
      class="cn-slider-track relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full"
    >
      <SliderRange
        data-slot="slider-range"
        class="cn-slider-range absolute select-none data-horizontal:h-full data-vertical:w-full"
      />
    </SliderTrack>
    <SliderThumb
      v-for="(_, index) in _values"
      :key="index"
      data-slot="slider-thumb"
      class="cn-slider-thumb block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
    />
  </SliderRoot>
</template>

export { default as Slider } from "./Slider.vue"