opui-css 5.4.3 → 6.0.0-rc.1

package/components/Range/Range.react.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import { useCallback, useEffect, useId, useRef, useState } from "react"
+import { cx } from "../cx"
+import { useFieldGroupContext } from "../FieldGroup/context.react"
+import { idRefs } from "../id"
+import type { Props } from "./types.react"
+import { defaultValue, resetValue } from "./value"
+
+export default function Range({
+  className,
+  defaultValue: defaultValueProp,
+  endText,
+  error,
+  hideLabel,
+  id,
+  items,
+  list,
+  max,
+  min,
+  name,
+  onChange,
+  ref,
+  size,
+  spread,
+  startText,
+  step,
+  style,
+  value,
+  valueSuffix,
+  variant,
+  datalist,
+  label,
+  valueText,
+  ...rest
+}: Props) {
+  const uid = useId()
+  const field = useFieldGroupContext()
+  const [current, setCurrent] = useState(defaultValueProp)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    const form = inputRef.current?.form
+    if (!form) return
+    const sync = (event: Event) =>
+      setTimeout(() => {
+        if (inputRef.current && !event.defaultPrevented)
+          setCurrent(resetValue(inputRef.current))
+      })
+    form.addEventListener("reset", sync)
+    return () => form.removeEventListener("reset", sync)
+  }, [])
+
+  const setRef = useCallback(
+    (input: HTMLInputElement | null) => {
+      inputRef.current = input
+      if (typeof ref === "function") return ref(input)
+      if (ref) ref.current = input
+    },
+    [ref],
+  )
+
+  const hasLabel = !!label
+  const hasValue = valueSuffix !== undefined || !!valueText
+  const hasDatalist = !!items || !!datalist
+  const middle = () => defaultValue({ max, min, step })
+  const shown = value ?? current ?? middle()
+
+  const inputId = id || (hasValue ? `range-${uid}` : undefined)
+  const labelId = hasLabel ? `range-label-${uid}` : undefined
+  const startTextId = startText ? `range-start-${uid}` : undefined
+  const endTextId = endText ? `range-end-${uid}` : undefined
+  const listId = list ?? (hasDatalist ? `range-list-${uid}` : undefined)
+  const describedBy = idRefs(startTextId, endTextId, rest["aria-describedby"])
+
+  return (
+    <label
+      className={cx([
+        "ui-range",
+        { "ui-spread": spread },
+        size && size !== "medium" && `ui-${size}`,
+        variant && variant !== "outlined" && `ui-${variant}`,
+        className,
+      ])}
+      htmlFor={hasValue ? inputId : undefined}
+      style={style}
+    >
+      {hasLabel && (
+        <span className={hideLabel ? "ui-sr-only" : "ui-label"} id={labelId}>
+          {label}
+        </span>
+      )}
+      {hasValue && (
+        <output
+          aria-live="off"
+          className="ui-value"
+          data-suffix={valueSuffix}
+          htmlFor={inputId}
+        >
+          {valueText
+            ? valueText(Number(shown))
+            : `${shown}${valueSuffix ?? ""}`}
+        </output>
+      )}
+      {startText && (
+        <span className="ui-start-text" id={startTextId}>
+          {startText}
+        </span>
+      )}
+      <input
+        {...rest}
+        aria-describedby={describedBy}
+        aria-invalid={error ? "true" : rest["aria-invalid"]}
+        aria-labelledby={labelId ?? rest["aria-labelledby"]}
+        aria-valuetext={
+          rest["aria-valuetext"] ??
+          (valueSuffix && !valueText ? `${shown}${valueSuffix}` : undefined)
+        }
+        defaultValue={defaultValueProp}
+        id={inputId}
+        list={listId}
+        max={max}
+        min={min}
+        name={name ?? field?.name}
+        onChange={(event) => {
+          setCurrent(event.target.valueAsNumber)
+          onChange?.(event)
+        }}
+        ref={setRef}
+        step={step}
+        type="range"
+        value={value}
+      />
+      {hasDatalist && (
+        <datalist aria-hidden="true" id={listId}>
+          {items?.map((option) =>
+            typeof option === "object" ? (
+              <option
+                key={option.value}
+                label={option.label}
+                value={option.value}
+              />
+            ) : (
+              <option key={option} value={option} />
+            ),
+          )}
+          {datalist}
+        </datalist>
+      )}
+      {endText && (
+        <span className="ui-end-text" id={endTextId}>
+          {endText}
+        </span>
+      )}
+    </label>
+  )
+}

package/components/Range/Range.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { content } from "../content.svelte"
+  import { getFieldGroupContext } from "../FieldGroup/context.svelte"
+  import { idRefs } from "../id"
+  import type { Props } from "./types.svelte"
+  import { defaultValue, resetValue } from "./value"
+
+  let {
+    class: className,
+    endText,
+    error,
+    hideLabel,
+    id,
+    items,
+    list,
+    max,
+    min,
+    name,
+    size,
+    spread,
+    startText,
+    step,
+    style,
+    value = $bindable(),
+    valueSuffix,
+    variant,
+
+    // Snippets
+    datalist,
+    label,
+    valueText,
+    ...rest
+  }: Props = $props()
+
+  const uid = $props.id()
+  const field = getFieldGroupContext()
+  const initialValue = untrack(() => value)
+
+  const hasLabel = $derived(!!label)
+  const hasValue = $derived(valueSuffix !== undefined || !!valueText)
+  const hasDatalist = $derived(!!items || !!datalist)
+  const middle = $derived(defaultValue({ max, min, step }))
+
+  const inputId = $derived(id || (hasValue ? `range-${uid}` : undefined))
+  const labelId = $derived(hasLabel ? `range-label-${uid}` : undefined)
+  const startTextId = $derived(startText ? `range-start-${uid}` : undefined)
+  const endTextId = $derived(endText ? `range-end-${uid}` : undefined)
+  const listId = $derived(
+    list ?? (hasDatalist ? `range-list-${uid}` : undefined),
+  )
+  const describedBy = $derived(
+    idRefs(startTextId, endTextId, rest["aria-describedby"]),
+  )
+</script>
+
+<label
+  class={[
+    "ui-range",
+    { "ui-spread": spread },
+    size && size !== "medium" && `ui-${size}`,
+    variant && variant !== "outlined" && `ui-${variant}`,
+    className,
+  ]}
+  for={hasValue ? inputId : undefined}
+  {style}
+>
+  {#if label}
+    <span class={[hideLabel ? "ui-sr-only" : "ui-label"]} id={labelId}>
+      {@render content(label)}
+    </span>
+  {/if}
+  {#if hasValue}
+    <output
+      aria-live="off"
+      class="ui-value"
+      for={inputId}
+      data-suffix={valueSuffix}
+    >
+      {#if valueText}{@render valueText(
+          Number(value ?? middle),
+        )}{:else}{value ?? middle}{valueSuffix ?? ""}{/if}
+    </output>
+  {/if}
+  {#if startText}
+    <span class="ui-start-text" id={startTextId}>
+      {@render content(startText)}
+    </span>
+  {/if}
+  <input
+    {...rest}
+    aria-describedby={describedBy}
+    aria-invalid={error ? "true" : rest["aria-invalid"]}
+    aria-labelledby={labelId ?? rest["aria-labelledby"]}
+    aria-valuetext={rest["aria-valuetext"] ??
+      (valueSuffix && !valueText
+        ? `${value ?? middle}${valueSuffix}`
+        : undefined)}
+    id={inputId}
+    list={listId}
+    {max}
+    {min}
+    name={name ?? field?.name}
+    {step}
+    type="range"
+    bind:value
+    {@attach (input) => {
+      if (!input.hasAttribute("value") && initialValue != null)
+        input.defaultValue = String(initialValue)
+      const form = input.form
+      const sync = (event: Event) =>
+        setTimeout(() => {
+          if (!event.defaultPrevented) value = resetValue(input)
+        })
+      form?.addEventListener("reset", sync)
+      return () => form?.removeEventListener("reset", sync)
+    }}
+  />
+  {#if hasDatalist}
+    <datalist aria-hidden="true" id={listId}>
+      {#each items ?? [] as option (typeof option === "object" ? option.value : option)}
+        {#if typeof option === "object"}
+          <option value={option.value} label={option.label}></option>
+        {:else}
+          <option value={option}></option>
+        {/if}
+      {/each}
+      {@render datalist?.()}
+    </datalist>
+  {/if}
+  {#if endText}
+    <span class="ui-end-text" id={endTextId}>
+      {@render content(endText)}
+    </span>
+  {/if}
+</label>

package/components/Range/Range.vue

@@ -1,85 +1,169 @@
-<script setup lang="ts">
-import type { RangeProps, Slots } from "./types.d.vue"
-import { useId } from "vue"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<RangeProps>()
-defineSlots<Slots>()
-const modelValue = defineModel<number | string>()
-
-const inputId = props.id || useId()
-const labelId = useId()
-const startTextId = useId()
-const endTextId = useId()
-</script>
-
-<template>
-  <label
-    :class="[
-      'ui-range',
-      props.variant && `ui-${props.variant}`,
-      { 'ui-spread': props.spread },
-      props.class,
-    ]"
-  >
-    <span v-if="props.label || $slots.default" class="ui-label" :id="labelId">
-      <slot>{{ props.label }}</slot>
-    </span>
-    <output
-      v-if="props.valueSuffix !== undefined || $slots.value"
-      class="ui-value"
-      :for="inputId"
-      :data-suffix="props.valueSuffix"
-    >
-      <slot name="value">{{ modelValue ?? props.value }}</slot>
-    </output>
-    <span
-      v-if="props.startText || $slots['start-text']"
-      class="ui-start-text"
-      :id="startTextId"
-    >
-      <slot name="start-text">{{ props.startText }}</slot>
-    </span>
-
-    <input
-      :aria-describedby="
-        [
-          props.startText || $slots['start-text'] ? startTextId : undefined,
-          props.endText || $slots['end-text'] ? endTextId : undefined,
-        ]
-          .filter(Boolean)
-          .join(' ') || undefined
-      "
-      :aria-labelledby="labelId"
-      :id="inputId"
-      :list="props.list"
-      type="range"
-      v-bind="$attrs"
-      v-model="modelValue"
-    />
-
-    <datalist v-if="props.options || $slots.datalist" :id="props.list">
-      <template
-        v-for="option in props.options"
-        :key="typeof option === 'object' ? option.value : option"
-      >
-        <option
-          :value="typeof option === 'object' ? option.value : option"
-          :label="typeof option === 'object' ? option.label : undefined"
-        />
-      </template>
-      <slot name="datalist"></slot>
-    </datalist>
-
-    <span
-      v-if="props.endText || $slots['end-text']"
-      class="ui-end-text"
-      :id="endTextId"
-    >
-      <slot name="end-text">{{ props.endText }}</slot>
-    </span>
-  </label>
-</template>
+<script setup lang="ts">
+import type { Props, Slots } from "./types.vue-props"
+import {
+  computed,
+  inject,
+  type InputHTMLAttributes,
+  onBeforeUnmount,
+  onMounted,
+  useAttrs,
+  useId,
+  useTemplateRef,
+} from "vue"
+import { useInputAttrs } from "../vue"
+import { FieldGroupKey } from "../FieldGroup/context.vue"
+import { idRefs } from "../id"
+import { defaultValue, resetValue } from "./value"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const {
+  endText,
+  error,
+  hideLabel,
+  id,
+  items,
+  label,
+  list,
+  size,
+  spread,
+  startText,
+  value,
+  valueSuffix,
+  variant,
+} = defineProps<Props>()
+const slots = defineSlots<Slots>()
+const modelValue = defineModel<number | string>()
+
+const model = computed({
+  get: () => modelValue.value ?? value,
+  set: (value) => {
+    modelValue.value = value
+  },
+})
+
+const input = useTemplateRef<HTMLInputElement>("input")
+let form: HTMLFormElement | null | undefined
+const syncAfterReset = (event: Event) =>
+  setTimeout(() => {
+    if (input.value && !event.defaultPrevented)
+      model.value = resetValue(input.value)
+  })
+onMounted(() => {
+  if (input.value && !input.value.hasAttribute("value") && model.value != null)
+    input.value.defaultValue = String(model.value)
+  form = input.value?.form
+  form?.addEventListener("reset", syncAfterReset)
+})
+onBeforeUnmount(() => form?.removeEventListener("reset", syncAfterReset))
+
+const attrs = useAttrs() as InputHTMLAttributes
+const inputAttrs = useInputAttrs()
+const middle = computed(() => defaultValue(attrs))
+
+const uid = useId()
+const field = inject(FieldGroupKey, undefined)
+const hasValue = computed(
+  () => valueSuffix !== undefined || !!slots["value-text"],
+)
+const inputId = computed(
+  () => id || (hasValue.value ? `range-${uid}` : undefined),
+)
+const listId = computed(
+  () => list ?? (items || slots.datalist ? `range-list-${uid}` : undefined),
+)
+
+const labelId = `range-label-${uid}`
+const startTextId = `range-start-${uid}`
+const endTextId = `range-end-${uid}`
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-range',
+      { 'ui-spread': spread },
+      size && size !== 'medium' && `ui-${size}`,
+      variant && variant !== 'outlined' && `ui-${variant}`,
+      $props.class,
+    ]"
+    :for="hasValue ? inputId : undefined"
+    :style="$attrs.style"
+  >
+    <span
+      v-if="label || $slots.label"
+      :class="[hideLabel ? 'ui-sr-only' : 'ui-label']"
+      :id="labelId"
+    >
+      {{ label }}<slot name="label"></slot>
+    </span>
+    <output
+      v-if="valueSuffix !== undefined || $slots['value-text']"
+      aria-live="off"
+      class="ui-value"
+      :for="inputId"
+      :data-suffix="valueSuffix"
+    >
+      <slot name="value-text" :value="Number(model ?? middle)"
+        >{{ model ?? middle }}{{ valueSuffix }}</slot
+      >
+    </output>
+    <span
+      v-if="startText || $slots['start-text']"
+      class="ui-start-text"
+      :id="startTextId"
+    >
+      {{ startText }}<slot name="start-text"></slot>
+    </span>
+
+    <input
+      v-bind="inputAttrs"
+      v-model.number="model"
+      :aria-describedby="
+        idRefs(
+          (startText || $slots['start-text']) && startTextId,
+          (endText || $slots['end-text']) && endTextId,
+          attrs['aria-describedby'],
+        )
+      "
+      :aria-invalid="error ? 'true' : attrs['aria-invalid']"
+      :aria-labelledby="
+        label || $slots.label ? labelId : attrs['aria-labelledby']
+      "
+      :aria-valuetext="
+        attrs['aria-valuetext'] ??
+        (valueSuffix && !$slots['value-text']
+          ? `${model ?? middle}${valueSuffix}`
+          : undefined)
+      "
+      :id="inputId"
+      :list="listId"
+      :name="attrs.name ?? field?.name"
+      ref="input"
+      type="range"
+    />
+
+    <datalist v-if="items || $slots.datalist" aria-hidden="true" :id="listId">
+      <template
+        v-for="option in items"
+        :key="typeof option === 'object' ? option.value : option"
+      >
+        <option
+          :value="typeof option === 'object' ? option.value : option"
+          :label="typeof option === 'object' ? option.label : undefined"
+        />
+      </template>
+      <slot name="datalist"></slot>
+    </datalist>
+
+    <span
+      v-if="endText || $slots['end-text']"
+      class="ui-end-text"
+      :id="endTextId"
+    >
+      {{ endText }}<slot name="end-text"></slot>
+    </span>
+  </label>
+</template>

package/components/Range/types.astro.ts

@@ -1,6 +1,4 @@
 import type * as Base from "./types"
 import type { HTMLAttributes } from "astro/types"
 
-export type RangeProps = Base.RangeProps &
-  HTMLAttributes<"label"> &
-  HTMLAttributes<"input">
+export type Props = Base.Props & Omit<HTMLAttributes<"input">, "size">

package/components/Range/types.react.ts

@@ -0,0 +1,10 @@
+import type * as Base from "./types"
+import type { ComponentProps, ReactNode } from "react"
+
+type Slots = Base.Slots<ReactNode> & {
+  valueText?: (value: number) => ReactNode
+}
+
+export type Props = Omit<Base.Props, keyof Slots> &
+  Slots &
+  Omit<ComponentProps<"input">, keyof Base.Props | keyof Slots | "children">

package/components/Range/types.svelte.ts

@@ -2,8 +2,13 @@ import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
 import type { Snippet } from "svelte"
 
-type Snippets = Base.RangeSlots<Snippet>
+type Snippets = Base.Slots<Snippet> & {
+  valueText?: Snippet<[number]>
+}
 
-export type RangeProps = Omit<Base.RangeProps, keyof Snippets> &
+export type Props = Omit<Base.Props, keyof Snippets> &
   Snippets &
-  SvelteHTMLElements["input"]
+  Omit<
+    SvelteHTMLElements["input"],
+    keyof Base.Props | keyof Snippets | "children"
+  >

package/components/Range/types.ts

@@ -1,25 +1,24 @@
-export type RangeProps = {
-  [key: string]: any
-  endText?: string
-  id?: string
-  label?: string
-  spread?: boolean
-  startText?: string
-  value?: number | string
-  valueSuffix?: string
-  variant?: "filled" | "default" | "tonal"
-} & (
-  | { list?: never; options?: never }
-  | {
-      list: string
-      options: (string | number | { value: string | number; label?: string })[]
-    }
-)
-
-export type RangeSlots<S> = {
-  datalist?: S
-  endText?: string | S
-  startText?: string | S
-  valueSuffix?: string | S
-  valueText?: S
-}
+export type RangeItem =
+  string | number | { label?: string; value: string | number }
+
+export type Props = {
+  endText?: string
+  error?: boolean
+  hideLabel?: boolean
+  items?: RangeItem[]
+  label?: string
+  list?: string
+  size?: "x-small" | "small" | "medium" | "large"
+  spread?: boolean
+  startText?: string
+  value?: number | string
+  valueSuffix?: string
+  variant?: "filled" | "outlined" | "tonal"
+}
+
+export type Slots<S> = {
+  datalist?: S
+  endText?: string | S
+  label?: string | S
+  startText?: string | S
+}

package/components/Range/types.vue-props.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Class } from "../vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps &
+  Class & {
+    id?: HTMLAttributes["id"]
+  }
+
+export type Slots = {
+  datalist?: Slot
+  "end-text"?: Slot
+  label?: Slot
+  "start-text"?: Slot
+  "value-text"?: Slot<{ value: number }>
+}

package/components/Range/value.ts

@@ -0,0 +1,27 @@
+export const resetValue = (input: HTMLInputElement) => {
+  const probe = document.createElement("input")
+  for (const name of ["type", "min", "max", "step", "value"]) {
+    const value = input.getAttribute(name)
+    if (value !== null) probe.setAttribute(name, value)
+  }
+  return probe.valueAsNumber
+}
+
+export const defaultValue = ({
+  max,
+  min,
+  step,
+}: {
+  max?: number | string | null
+  min?: number | string | null
+  step?: number | string | null
+}) => {
+  const minValue = Number(min ?? 0)
+  const maxValue = Math.max(minValue, Number(max ?? 100))
+  const stepValue = step === "any" ? 0 : Number(step ?? 1)
+  const middle = minValue + (maxValue - minValue) / 2
+  if (!stepValue) return middle
+  const stepped =
+    minValue + Math.round((middle - minValue) / stepValue) * stepValue
+  return stepped > maxValue ? stepped - stepValue : stepped
+}