opui-css 5.4.2 → 6.0.0-rc.1

package/components/Range/types.ts

@@ -1,25 +1,24 @@
-export type RangeProps = {
-  [key: string]: any
+export type RangeItem =
+  string | number | { label?: string; value: string | number }
+
+export type Props = {
   endText?: string
-  id?: 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" | "default" | "tonal"
-} & (
-  | { list?: never; options?: never }
-  | {
-      list: string
-      options: (string | number | { value: string | number; label?: string })[]
-    }
-)
+  variant?: "filled" | "outlined" | "tonal"
+}
 
-export type RangeSlots<S> = {
+export type Slots<S> = {
   datalist?: S
   endText?: string | S
+  label?: string | S
   startText?: string | S
-  valueSuffix?: string | S
-  valueText?: 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
+}

package/components/Select/Select.astro

@@ -1,105 +1,144 @@
 ---
+import type { SelectItem } from "./types"
 import type { Props } from "./types.astro"
+import { createId, idRefs } from "../id"
+import { fieldGroupContext } from "../FieldGroup/context.astro"
 
 export const title = "Select"
 
 const {
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-labelledby": ariaLabelledBy,
+  autoFit,
   class: className,
-  description,
-  error,
   dense,
+  endText,
+  error,
+  hideLabel,
   id,
   items = [],
   label,
   name,
-  spread,
   size,
-  endText,
+  spread,
+  startText,
+  style,
+  value,
   variant = "outlined",
   ...rest
 } = Astro.props
 
-const { $id, currentFieldName } = Astro.locals
-const selectId = id || $id("select")
-const fieldName = name || currentFieldName
+const field = fieldGroupContext.get()
+const $id = createId(Astro.locals)
 const labelId = $id("select-label")
+const startTextId =
+  startText || Astro.slots.has("start-text") ? $id("start-text") : undefined
+const endTextId =
+  endText || Astro.slots.has("end-text") ? $id("end-text") : undefined
+const topId = Astro.slots.has("top") ? $id("top") : undefined
+const bottomId = Astro.slots.has("bottom") ? $id("bottom") : undefined
+const describedBy = idRefs(
+  topId,
+  startTextId,
+  endTextId,
+  bottomId,
+  ariaDescribedBy,
+)
+const isSelected = (item: SelectItem) =>
+  value === undefined
+    ? item.selected
+    : Array.isArray(value)
+      ? value.some((selected) => selected === item.value)
+      : item.value === value
 ---
 
 <label
   class:list={[
     "ui-select",
-    size && `ui-${size}`,
     {
+      "ui-auto-fit": autoFit,
       "ui-filled": variant === "filled",
       "ui-spread": spread,
     },
+    size && size !== "medium" && `ui-${size}`,
     className,
   ]}
-  data-invalid={error || undefined}
+  style={style}
 >
   {
     (label || Astro.slots.has("label")) && (
-      <span class="ui-label" id={labelId}>
+      <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]} id={labelId}>
         {label}
         <slot name="label" />
       </span>
     )
   }
   {
-    (description || Astro.slots.has("description")) && (
-      <span class="ui-start-text">
-        {description}
-        <slot name="description" />
+    (startText || Astro.slots.has("start-text")) && (
+      <span class="ui-start-text" id={startTextId}>
+        {startText}
+        <slot name="start-text" />
       </span>
     )
   }
   <span class="ui-field">
     <select
-      aria-labelledby={label ? labelId : undefined}
-      id={selectId}
-      name={fieldName}
       {...rest}
+      aria-describedby={describedBy}
+      aria-invalid={error ? "true" : ariaInvalid}
+      aria-labelledby={label || Astro.slots.has("label")
+        ? labelId
+        : ariaLabelledBy}
+      id={id}
+      name={name ?? field?.name}
     >
       <button>
         <selectedcontent></selectedcontent>
       </button>
       <div class:list={["ui-list", { "ui-dense": dense }]}>
-        {items.map((item) => <option value={item.value}>{item.text}</option>)}
+        {
+          items.map((item) => (
+            <option selected={isSelected(item) || undefined} value={item.value}>
+              {item.label}
+            </option>
+          ))
+        }
         <slot />
       </div>
     </select>
     {
-      Astro.slots.has("prefix") && (
-        <span class="ui-prefix">
-          <slot name="prefix" />
+      Astro.slots.has("start") && (
+        <span class="ui-start">
+          <slot name="start" />
         </span>
       )
     }
     {
-      Astro.slots.has("suffix") && (
-        <span class="ui-suffix">
-          <slot name="suffix" />
+      Astro.slots.has("end") && (
+        <span class="ui-end">
+          <slot name="end" />
         </span>
       )
     }
     {
-      Astro.slots.has("header") && (
-        <span class="ui-header">
-          <slot name="header" />
+      Astro.slots.has("top") && (
+        <span class="ui-top" id={topId}>
+          <slot name="top" />
         </span>
       )
     }
     {
-      Astro.slots.has("footer") && (
-        <span class="ui-footer">
-          <slot name="footer" />
+      Astro.slots.has("bottom") && (
+        <span class="ui-bottom" id={bottomId}>
+          <slot name="bottom" />
         </span>
       )
     }
   </span>
   {
     (endText || Astro.slots.has("end-text")) && (
-      <span id={$id("end-text")} class="ui-end-text">
+      <span id={endTextId} class="ui-end-text">
         {endText}
         <slot name="end-text" />
       </span>

package/components/Select/Select.react.tsx

@@ -0,0 +1,124 @@
+"use client"
+
+import { createElement, useId } from "react"
+import { cx } from "../cx"
+import { useFieldGroupContext } from "../FieldGroup/context.react"
+import { idRefs } from "../id"
+import { initialValue } from "./selection"
+import type { Props } from "./types.react"
+
+export default function Select({
+  autoFit,
+  className,
+  defaultValue,
+  dense,
+  error,
+  hideLabel,
+  id,
+  items = [],
+  multiple,
+  name,
+  size,
+  spread,
+  style,
+  value,
+  variant = "outlined",
+  children,
+  bottom,
+  end,
+  endText,
+  label,
+  start,
+  startText,
+  top,
+  ...rest
+}: Props) {
+  const uid = useId()
+  const field = useFieldGroupContext()
+  const labelId = `select-label-${uid}`
+  const startTextId = startText ? `start-text-${uid}` : undefined
+  const endTextId = endText ? `end-text-${uid}` : undefined
+  const topId = top ? `top-${uid}` : undefined
+  const bottomId = bottom ? `bottom-${uid}` : undefined
+  const describedBy = idRefs(
+    topId,
+    startTextId,
+    endTextId,
+    bottomId,
+    rest["aria-describedby"],
+  )
+
+  const selected = initialValue(items, multiple)
+
+  return (
+    <label
+      className={cx([
+        "ui-select",
+        {
+          "ui-auto-fit": autoFit,
+          "ui-filled": variant === "filled",
+          "ui-spread": spread,
+        },
+        size && size !== "medium" && `ui-${size}`,
+        className,
+      ])}
+      style={style}
+    >
+      {label && (
+        <span className={hideLabel ? "ui-sr-only" : "ui-label"} id={labelId}>
+          {label}
+        </span>
+      )}
+      {startText && (
+        <span className="ui-start-text" id={startTextId}>
+          {startText}
+        </span>
+      )}
+      <span className="ui-field">
+        <select
+          {...rest}
+          aria-describedby={describedBy}
+          aria-invalid={error ? "true" : rest["aria-invalid"]}
+          aria-labelledby={label ? labelId : rest["aria-labelledby"]}
+          defaultValue={
+            value === undefined
+              ? (defaultValue ??
+                (Array.isArray(selected) ? selected.map(String) : selected))
+              : undefined
+          }
+          id={id}
+          multiple={multiple}
+          name={name ?? field?.name}
+          value={value}
+        >
+          <button>{createElement("selectedcontent")}</button>
+          <div className={cx(["ui-list", { "ui-dense": dense }])}>
+            {items.map((item) => (
+              <option key={item.value} value={item.value}>
+                {item.label}
+              </option>
+            ))}
+            {children}
+          </div>
+        </select>
+        {start && <span className="ui-start">{start}</span>}
+        {end && <span className="ui-end">{end}</span>}
+        {top && (
+          <span className="ui-top" id={topId}>
+            {top}
+          </span>
+        )}
+        {bottom && (
+          <span className="ui-bottom" id={bottomId}>
+            {bottom}
+          </span>
+        )}
+      </span>
+      {endText && (
+        <span className="ui-end-text" id={endTextId}>
+          {endText}
+        </span>
+      )}
+    </label>
+  )
+}

package/components/Select/Select.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { content } from "../content.svelte"
+  import { getFieldGroupContext } from "../FieldGroup/context.svelte"
+  import { idRefs } from "../id"
+  import { initialValue } from "./selection"
+  import type { SelectItem } from "./types"
+  import type { Props } from "./types.svelte"
+  import { untrack } from "svelte"
+
+  let {
+    autoFit,
+    class: className,
+    dense,
+    error,
+    hideLabel,
+    id,
+    items = [],
+    name,
+    size,
+    spread,
+    style,
+    value = $bindable(),
+    variant = "outlined",
+
+    // Snippets
+    children,
+    bottom,
+    end,
+    endText,
+    label,
+    start,
+    startText,
+    top,
+    ...rest
+  }: Props = $props()
+
+  untrack(() => {
+    value ??= initialValue(items, rest.multiple)
+  })
+
+  const uid = $props.id()
+  const field = getFieldGroupContext()
+  const labelId = `select-label-${uid}`
+  const startTextId = $derived(startText ? `start-text-${uid}` : undefined)
+  const endTextId = $derived(endText ? `end-text-${uid}` : undefined)
+  const topId = $derived(top ? `top-${uid}` : undefined)
+  const bottomId = $derived(bottom ? `bottom-${uid}` : undefined)
+  const describedBy = $derived(
+    idRefs(topId, startTextId, endTextId, bottomId, rest["aria-describedby"]),
+  )
+
+  const isSelected = (item: SelectItem) =>
+    value === undefined
+      ? item.selected
+      : Array.isArray(value)
+        ? value.includes(item.value)
+        : item.value === value
+</script>
+
+<label
+  class={[
+    "ui-select",
+    {
+      "ui-auto-fit": autoFit,
+      "ui-filled": variant === "filled",
+      "ui-spread": spread,
+    },
+    size && size !== "medium" && `ui-${size}`,
+    className,
+  ]}
+  {style}
+>
+  {#if label}
+    <span class={[hideLabel ? "ui-sr-only" : "ui-label"]} id={labelId}>
+      {@render content(label)}
+    </span>
+  {/if}
+  {#if startText}
+    <span class="ui-start-text" id={startTextId}>
+      {@render content(startText)}
+    </span>
+  {/if}
+  <span class="ui-field">
+    <select
+      {...rest}
+      aria-describedby={describedBy}
+      aria-invalid={error ? "true" : rest["aria-invalid"]}
+      aria-labelledby={label ? labelId : rest["aria-labelledby"]}
+      bind:value
+      {id}
+      name={name ?? field?.name}
+    >
+      <button>
+        <selectedcontent></selectedcontent>
+      </button>
+      <div class={["ui-list", { "ui-dense": dense }]}>
+        {#each items as item (item.value)}
+          <option selected={isSelected(item) || undefined} value={item.value}
+            >{item.label}</option
+          >
+        {/each}
+        {@render children?.()}
+      </div>
+    </select>
+    {#if start}
+      <span class="ui-start">{@render content(start)}</span>
+    {/if}
+    {#if end}
+      <span class="ui-end">{@render content(end)}</span>
+    {/if}
+    {#if top}
+      <span class="ui-top" id={topId}>{@render content(top)}</span>
+    {/if}
+    {#if bottom}
+      <span class="ui-bottom" id={bottomId}>{@render content(bottom)}</span>
+    {/if}
+  </span>
+  {#if endText}
+    <span id={endTextId} class="ui-end-text">
+      {@render content(endText)}
+    </span>
+  {/if}
+</label>