base-ui-vue 0.1.0 → 0.2.0

package/src/slider/indicator/SliderIndicator.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { SliderRootState } from '../root/SliderRoot.vue'
+import { computed, onMounted, ref, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { valueToPercent } from '../../utils/valueToPercent'
+import { useSliderRootContext } from '../root/SliderRootContext'
+import { sliderStateAttributesMapping } from '../root/stateAttributesMapping'
+
+export interface SliderIndicatorState extends SliderRootState {}
+export interface SliderIndicatorProps extends BaseUIComponentProps<SliderIndicatorState> {}
+
+/**
+ * Visualizes the current value of the slider.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Slider](https://baseui-vue.com/docs/components/slider)
+ */
+defineOptions({
+  name: 'SliderIndicator',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SliderIndicatorProps>(), {
+  as: 'div',
+})
+
+function getInsetStyles(
+  vertical: boolean,
+  range: boolean,
+  start: number | undefined,
+  end: number | undefined,
+  renderBeforeHydration: boolean,
+  mounted: boolean,
+): CSSProperties & Record<string, unknown> {
+  const visibility
+    = start === undefined || (range && end === undefined) ? 'hidden' : undefined
+
+  const startEdge = vertical ? 'bottom' : 'insetInlineStart'
+  const mainSide = vertical ? 'height' : 'width'
+  const crossSide = vertical ? 'width' : 'height'
+
+  const styles: CSSProperties & Record<string, unknown> = {
+    visibility: renderBeforeHydration && !mounted ? 'hidden' : visibility,
+    position: vertical ? 'absolute' : 'relative',
+    [crossSide]: 'inherit',
+  }
+
+  styles['--start-position'] = `${start ?? 0}%`
+
+  if (!range) {
+    styles[startEdge] = 0
+    styles[mainSide] = 'var(--start-position)'
+    return styles
+  }
+
+  styles['--relative-size'] = `${(end ?? 0) - (start ?? 0)}%`
+  styles[startEdge] = 'var(--start-position)'
+  styles[mainSide] = 'var(--relative-size)'
+  return styles
+}
+
+function getCenteredStyles(
+  vertical: boolean,
+  range: boolean,
+  start: number,
+  end: number,
+): CSSProperties {
+  const startEdge = vertical ? 'bottom' : 'insetInlineStart'
+  const mainSide = vertical ? 'height' : 'width'
+  const crossSide = vertical ? 'width' : 'height'
+
+  const styles: CSSProperties = {
+    position: vertical ? 'absolute' : 'relative',
+    [crossSide]: 'inherit',
+  }
+
+  if (!range) {
+    styles[startEdge] = 0
+    styles[mainSide] = `${start}%`
+    return styles
+  }
+
+  styles[startEdge] = `${start}%`
+  styles[mainSide] = `${end - start}%`
+  return styles
+}
+
+const attrs = useAttrs()
+const rootContext = useSliderRootContext()
+const isMounted = ref(false)
+onMounted(() => {
+  isMounted.value = true
+})
+
+const vertical = computed(() => rootContext.orientation.value === 'vertical')
+const range = computed(() => rootContext.values.value.length > 1)
+
+const style = computed(() => rootContext.inset.value
+  ? getInsetStyles(
+      vertical.value,
+      range.value,
+      rootContext.indicatorPosition.value[0],
+      rootContext.indicatorPosition.value[1],
+      rootContext.renderBeforeHydration.value,
+      isMounted.value,
+    )
+  : getCenteredStyles(
+      vertical.value,
+      range.value,
+      valueToPercent(rootContext.values.value[0], rootContext.min.value, rootContext.max.value),
+      valueToPercent(
+        rootContext.values.value[rootContext.values.value.length - 1],
+        rootContext.min.value,
+        rootContext.max.value,
+      ),
+    ))
+
+const indicatorProps = computed(() => mergeProps(
+  attrs as Record<string, unknown>,
+  {
+    'data-base-ui-slider-indicator': rootContext.renderBeforeHydration.value ? '' : undefined,
+    'style': style.value,
+    'suppressHydrationWarning': rootContext.renderBeforeHydration.value || undefined,
+  },
+))
+
+const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+  componentProps: props,
+  state: rootContext.state,
+  props: indicatorProps,
+  defaultTagName: 'div',
+  stateAttributesMapping: sliderStateAttributesMapping,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="rootContext.state" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot />
+  </component>
+</template>

package/src/slider/indicator/SliderIndicatorDataAttributes.ts

@@ -0,0 +1,35 @@
+export enum SliderIndicatorDataAttributes {
+  /**
+   * Present while the user is dragging.
+   */
+  dragging = 'data-dragging',
+  /**
+   * Indicates the orientation of the slider.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = 'data-orientation',
+  /**
+   * Present when the slider is disabled.
+   */
+  disabled = 'data-disabled',
+  /**
+   * Present when the slider is in valid state (when wrapped in Field.Root).
+   */
+  valid = 'data-valid',
+  /**
+   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   */
+  invalid = 'data-invalid',
+  /**
+   * Present when the slider has been touched (when wrapped in Field.Root).
+   */
+  touched = 'data-touched',
+  /**
+   * Present when the slider's value has changed (when wrapped in Field.Root).
+   */
+  dirty = 'data-dirty',
+  /**
+   * Present when the slider is focused (when wrapped in Field.Root).
+   */
+  focused = 'data-focused',
+}

package/src/slider/label/SliderLabel.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { SliderRootState } from '../root/SliderRoot.vue'
+import { isHTMLElement } from '@floating-ui/utils/dom'
+import { computed, useAttrs } from 'vue'
+import { focusElementWithVisible, useLabel } from '../../labelable-provider/useLabel'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { ownerDocument } from '../../utils/owner'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useSliderRootContext } from '../root/SliderRootContext'
+import { sliderStateAttributesMapping } from '../root/stateAttributesMapping'
+
+export type SliderLabelState = SliderRootState
+export interface SliderLabelProps extends BaseUIComponentProps<SliderLabelState> {}
+
+/**
+ * An accessible label that is automatically associated with the slider thumbs.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Slider](https://baseui-vue.com/docs/components/slider)
+ */
+defineOptions({
+  name: 'SliderLabel',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SliderLabelProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+const rootContext = useSliderRootContext()
+const label = useLabel({
+  id: computed(() => rootContext.rootLabelId.value),
+  fallbackControlId: computed(() => rootContext.controlRef.value?.id),
+  setLabelId: rootContext.setLabelId,
+  focusControl(_event, controlId) {
+    if (controlId) {
+      const controlElement = rootContext.controlRef.value
+        ? ownerDocument(rootContext.controlRef.value)?.getElementById(controlId)
+        : null
+      if (isHTMLElement(controlElement)) {
+        focusElementWithVisible(controlElement)
+        return
+      }
+    }
+
+    const fallbackInputs = rootContext.controlRef.value?.querySelectorAll('input[type="range"]')
+    const fallbackInput = fallbackInputs?.length === 1 ? fallbackInputs[0] : null
+    if (isHTMLElement(fallbackInput)) {
+      focusElementWithVisible(fallbackInput)
+    }
+  },
+})
+
+const labelProps = computed(() => mergeProps(
+  attrs as Record<string, unknown>,
+  label.props.value,
+))
+
+const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+  componentProps: props,
+  state: rootContext.state,
+  props: labelProps,
+  defaultTagName: 'div',
+  stateAttributesMapping: sliderStateAttributesMapping,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="rootContext.state" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot />
+  </component>
+</template>