reka-ui 2.8.0 → 2.9.0

package/src/Splitter/utils/units.ts

@@ -0,0 +1,161 @@
+import type { PanelConstraints, PanelData } from '../SplitterPanel.vue'
+
+export type SizeUnit = '%' | 'px'
+
+type ConvertConstraintsToPercentOptions = {
+  panelDataArray: PanelData[]
+  groupSizeInPixels: number | null
+}
+
+type ConvertValueOptions = {
+  sizeUnit: SizeUnit
+  groupSizeInPixels: number | null
+  value: number | undefined
+}
+
+function convertValueToPercent({ sizeUnit, groupSizeInPixels, value }: ConvertValueOptions): number | undefined {
+  if (value == null)
+    return value
+
+  if (sizeUnit === '%')
+    return value
+
+  if (groupSizeInPixels == null || groupSizeInPixels === 0)
+    return undefined
+
+  return (value / groupSizeInPixels) * 100
+}
+
+export function convertPanelConstraintsToPercent({
+  panelDataArray,
+  groupSizeInPixels,
+}: ConvertConstraintsToPercentOptions): PanelConstraints[] | null {
+  const requiresMeasurement = panelDataArray.some(
+    panelData => (panelData.constraints.sizeUnit ?? '%') === 'px',
+  )
+
+  if (requiresMeasurement && (!groupSizeInPixels || Number.isNaN(groupSizeInPixels)))
+    return null
+
+  return panelDataArray.map((panelData) => {
+    const constraints = panelData.constraints
+    const sizeUnit = constraints.sizeUnit ?? '%'
+
+    const collapsedSize = convertValueToPercent({
+      groupSizeInPixels,
+      sizeUnit,
+      value: constraints.collapsedSize,
+    })
+
+    const defaultSize = convertValueToPercent({
+      groupSizeInPixels,
+      sizeUnit,
+      value: constraints.defaultSize,
+    })
+
+    const maxSize = convertValueToPercent({
+      groupSizeInPixels,
+      sizeUnit,
+      value: constraints.maxSize,
+    })
+
+    const minSize = convertValueToPercent({
+      groupSizeInPixels,
+      sizeUnit,
+      value: constraints.minSize,
+    })
+
+    return {
+      ...constraints,
+      collapsedSize: collapsedSize ?? constraints.collapsedSize ?? 0,
+      defaultSize,
+      maxSize: maxSize ?? 100,
+      minSize: minSize ?? 0,
+      sizeUnit: '%',
+    }
+  })
+}
+
+type RecalculateLayoutOptions = {
+  layout: number[]
+  panelDataArray: PanelData[]
+  prevGroupSize: number | null
+  nextGroupSize: number | null
+}
+
+export function hasPixelSizedPanel(panelDataArray: PanelData[]): boolean {
+  return panelDataArray.some(panelData => (panelData.constraints.sizeUnit ?? '%') === 'px')
+}
+
+export function recalculateLayoutForPixelPanels({
+  layout,
+  panelDataArray,
+  prevGroupSize,
+  nextGroupSize,
+}: RecalculateLayoutOptions): number[] | null {
+  if (!hasPixelSizedPanel(panelDataArray)) {
+    return null
+  }
+
+  if (
+    prevGroupSize == null
+    || nextGroupSize == null
+    || prevGroupSize === 0
+    || nextGroupSize === 0
+    || Number.isNaN(prevGroupSize)
+    || Number.isNaN(nextGroupSize)
+  ) {
+    return null
+  }
+
+  const pixelPanelIndices = panelDataArray.reduce<number[]>((indices, panelData, index) => {
+    if ((panelData.constraints.sizeUnit ?? '%') === 'px')
+      indices.push(index)
+
+    return indices
+  }, [])
+
+  if (pixelPanelIndices.length === 0) {
+    return null
+  }
+
+  const pixelIndexSet = new Set(pixelPanelIndices)
+
+  const nextLayout = layout.map(size => size ?? 0)
+
+  const prevPercentForPixelPanels = pixelPanelIndices.reduce((sum, index) => sum + (layout[index] ?? 0), 0)
+
+  const nextPixelPercents = pixelPanelIndices.map((index) => {
+    const prevPercent = layout[index] ?? 0
+    const prevPixelSize = (prevPercent / 100) * prevGroupSize
+    return (prevPixelSize / nextGroupSize) * 100
+  })
+
+  const totalNextPixelPercent = nextPixelPercents.reduce((sum, value) => sum + value, 0)
+
+  const prevPercentForPercentPanels = layout.reduce((sum, size, index) => {
+    if (pixelIndexSet.has(index))
+      return sum
+
+    return sum + (size ?? 0)
+  }, 0)
+
+  const availableNextPercent = Math.max(0, 100 - totalNextPixelPercent)
+  const scaleFactor = prevPercentForPercentPanels > 0
+    ? availableNextPercent / prevPercentForPercentPanels
+    : 0
+
+  pixelPanelIndices.forEach((panelIndex, arrayIndex) => {
+    nextLayout[panelIndex] = nextPixelPercents[arrayIndex]
+  })
+
+  for (let index = 0; index < nextLayout.length; index++) {
+    if (pixelIndexSet.has(index))
+      continue
+
+    const prevSize = layout[index] ?? 0
+    nextLayout[index] = prevSize * scaleFactor
+  }
+
+  return nextLayout
+}

package/src/Splitter/utils/validation.ts

@@ -112,11 +112,12 @@ export function validatePanelConstraints({
       defaultSize,
       maxSize = 100,
       minSize = 0,
+      sizeUnit = '%',
     } = panelConstraints
 
     if (minSize > maxSize) {
       warnings.push(
-        `min size (${minSize}%) should not be greater than max size (${maxSize}%)`,
+        `min size (${minSize}${sizeUnit}) should not be greater than max size (${maxSize}${sizeUnit})`,
       )
     }
 
@@ -131,7 +132,7 @@ export function validatePanelConstraints({
         warnings.push('default size should not be less than min size')
       }
 
-      if (defaultSize > 100)
+      if (sizeUnit === '%' && defaultSize > 100)
         warnings.push('default size should not be greater than 100')
       else if (defaultSize > maxSize)
         warnings.push('default size should not be greater than max size')

package/src/Switch/SwitchRoot.vue

@@ -1,28 +1,36 @@
 <script lang="ts">
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
 import type { FormFieldProps } from '@/shared/types'
 import { createContext, useFormControl, useForwardExpose } from '@/shared'
 
-export interface SwitchRootProps extends PrimitiveProps, FormFieldProps {
+export interface SwitchRootProps<T = boolean> extends PrimitiveProps, FormFieldProps {
   /** The state of the switch when it is initially rendered. Use when you do not need to control its state. */
-  defaultValue?: boolean
+  defaultValue?: T
   /** The controlled state of the switch. Can be bind as `v-model`. */
-  modelValue?: boolean | null
+  modelValue?: T | null
   /** When `true`, prevents the user from interacting with the switch. */
   disabled?: boolean
   id?: string
   /** The value given as data when submitted with a `name`. */
   value?: string
+  /**
+   * The value used when the switch is on. Defaults to `true`.
+   */
+  trueValue?: T
+  /**
+   * The value used when the switch is off. Defaults to `false`.
+   */
+  falseValue?: T
 }
 
-export type SwitchRootEmits = {
+export type SwitchRootEmits<T = boolean> = {
   /** Event handler called when the value of the switch changes. */
-  'update:modelValue': [payload: boolean]
+  'update:modelValue': [payload: T]
 }
 
 export interface SwitchRootContext {
-  modelValue?: Ref<boolean>
+  checked: ComputedRef<boolean>
   toggleCheck: () => void
   disabled: Ref<boolean>
 }
@@ -31,38 +39,44 @@ export const [injectSwitchRootContext, provideSwitchRootContext]
   = createContext<SwitchRootContext>('SwitchRoot')
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T = boolean">
 import { useVModel } from '@vueuse/core'
 import { computed, toRefs } from 'vue'
 import { Primitive } from '@/Primitive'
 import { VisuallyHiddenInput } from '@/VisuallyHidden'
 
-const props = withDefaults(defineProps<SwitchRootProps>(), {
+const props = withDefaults(defineProps<SwitchRootProps<T>>(), {
   as: 'button',
   modelValue: undefined,
   value: 'on',
+  trueValue: (() => true) as unknown as undefined,
+  falseValue: (() => false) as unknown as undefined,
 })
-const emit = defineEmits<SwitchRootEmits>()
+const emit = defineEmits<SwitchRootEmits<T>>()
 
 defineSlots<{
   default?: (props: {
     /** Current value */
     modelValue: typeof modelValue.value
+    /** Whether the switch is checked */
+    checked: typeof checked.value
   }) => any
 }>()
 
 const { disabled } = toRefs(props)
 
-const modelValue = useVModel(props, 'modelValue', emit, {
-  defaultValue: props.defaultValue,
+const modelValue = useVModel(props as any, 'modelValue', emit as any, {
+  defaultValue: props.defaultValue ?? props.falseValue,
   passive: (props.modelValue === undefined) as false,
-}) as Ref<boolean>
+}) as Ref<T>
+
+const checked = computed(() => modelValue.value === props.trueValue)
 
 function toggleCheck() {
   if (disabled.value)
     return
 
-  modelValue.value = !modelValue.value
+  modelValue.value = checked.value ? props.falseValue as T : props.trueValue as T
 }
 
 const { forwardRef, currentElement } = useForwardExpose()
@@ -70,7 +84,7 @@ const isFormControl = useFormControl(currentElement)
 const ariaLabel = computed(() => props.id && currentElement.value ? (document.querySelector(`[for="${props.id}"]`) as HTMLLabelElement)?.innerText : undefined)
 
 provideSwitchRootContext({
-  modelValue,
+  checked,
   toggleCheck,
   disabled,
 })
@@ -85,9 +99,9 @@ provideSwitchRootContext({
     :type="as === 'button' ? 'button' : undefined"
     :value="value"
     :aria-label="$attrs['aria-label'] || ariaLabel"
-    :aria-checked="modelValue"
+    :aria-checked="checked"
     :aria-required="required"
-    :data-state="modelValue ? 'checked' : 'unchecked'"
+    :data-state="checked ? 'checked' : 'unchecked'"
     :data-disabled="disabled ? '' : undefined"
     :as-child="asChild"
     :as="as"
@@ -95,7 +109,10 @@ provideSwitchRootContext({
     @click="toggleCheck"
     @keydown.enter.prevent="toggleCheck"
   >
-    <slot :model-value="modelValue" />
+    <slot
+      :model-value="modelValue"
+      :checked="checked"
+    />
 
     <VisuallyHiddenInput
       v-if="isFormControl && name"
@@ -104,7 +121,7 @@ provideSwitchRootContext({
       :disabled="disabled"
       :required="required"
       :value="value"
-      :checked="!!modelValue"
+      :checked="checked"
     />
   </Primitive>
 </template>

package/src/Switch/SwitchThumb.vue

@@ -18,7 +18,7 @@ useForwardExpose()
 
 <template>
   <Primitive
-    :data-state="rootContext.modelValue?.value ? 'checked' : 'unchecked'"
+    :data-state="rootContext.checked.value ? 'checked' : 'unchecked'"
     :data-disabled="rootContext.disabled.value ? '' : undefined"
     :as-child="asChild"
     :as="as"

package/src/TimeField/TimeFieldRoot.vue

@@ -12,14 +12,11 @@ import {
   createContent,
   getDefaultTime,
   getTimeFieldSegmentElements,
-
   initializeTimeSegmentValues,
   isSegmentNavigationKey,
   normalizeDateStep,
   normalizeHourCycle,
-
   syncTimeSegmentValues,
-
 } from '@/shared/date'
 
 type TimeFieldRootContext = {

package/src/TimeRangeField/TimeRangeFieldInput.vue

@@ -0,0 +1,74 @@
+<script lang="ts">
+import type { DateRangeType } from '@/DateRangeField/DateRangeFieldRoot.vue'
+import type { PrimitiveProps } from '@/Primitive'
+import type { SegmentPart } from '@/shared/date'
+import { computed, ref } from 'vue'
+import { Primitive } from '@/Primitive'
+import { useDateField } from '@/shared/date/useDateField'
+import { injectTimeRangeFieldRootContext } from './TimeRangeFieldRoot.vue'
+
+export interface TimeRangeFieldInputProps extends PrimitiveProps {
+  /** The part of the date to render */
+  part: SegmentPart
+  /** The type of field to render (start or end) */
+  type: DateRangeType
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<TimeRangeFieldInputProps>()
+
+const rootContext = injectTimeRangeFieldRootContext()
+
+const hasLeftFocus = ref(true)
+const lastKeyZero = ref(false)
+
+const {
+  handleSegmentClick,
+  handleSegmentKeydown,
+  attributes,
+} = useDateField({
+  hasLeftFocus,
+  lastKeyZero,
+  placeholder: rootContext.placeholder,
+  hourCycle: rootContext.hourCycle,
+  step: rootContext.step,
+  segmentValues: rootContext.segmentValues[props.type],
+  formatter: rootContext.formatter,
+  part: props.part,
+  disabled: rootContext.disabled,
+  readonly: rootContext.readonly,
+  focusNext: rootContext.focusNext,
+  modelValue: props.type === 'start' ? rootContext.startValue : rootContext.endValue,
+})
+
+const disabled = computed(() => rootContext.disabled.value)
+const readonly = computed(() => rootContext.readonly.value)
+const isInvalid = computed(() => rootContext.isInvalid.value)
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    v-bind="attributes"
+    :contenteditable="disabled || readonly ? false : part !== 'literal'"
+    :data-reka-time-field-segment="part"
+    :data-reka-time-range-field-segment-type="type"
+    :aria-disabled="disabled ? true : undefined"
+    :aria-readonly="readonly ? true : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :data-invalid="isInvalid ? '' : undefined"
+    :aria-invalid="isInvalid ? true : undefined"
+    v-on="part !== 'literal' ? {
+      mousedown: handleSegmentClick,
+      keydown: handleSegmentKeydown,
+      focusout: () => { hasLeftFocus = true },
+      focusin: (e: FocusEvent) => {
+        rootContext.setFocusedElement(e.target as HTMLElement)
+      },
+    } : {}"
+  >
+    <slot />
+  </Primitive>
+</template>