opui-css 5.4.2 → 6.0.0-rc.1

package/components/Select/Select.vue

@@ -1,85 +1,157 @@
 <script setup lang="ts">
-import { useId } from "vue"
-import type { Props, Slots } from "./types.d.vue"
+import {
+  computed,
+  inject,
+  type SelectHTMLAttributes,
+  useAttrs,
+  useId,
+} from "vue"
+import { useInputAttrs } from "../vue"
+import type { Props, Slots } from "./types.vue-props"
+import { FieldGroupKey } from "../FieldGroup/context.vue"
+import { idRefs } from "../id"
+import { initialValue } from "./selection"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<Props>(), {
-  items: () => [],
-  variant: "outlined",
-})
+const {
+  autoFit,
+  dense,
+  endText,
+  error,
+  hideLabel,
+  id,
+  items = [],
+  label,
+  size,
+  spread,
+  startText,
+  value,
+  variant = "outlined",
+} = defineProps<Props>()
 defineSlots<Slots>()
+const attrs = useAttrs() as SelectHTMLAttributes
+const inputAttrs = useInputAttrs()
 const modelValue = defineModel<string | number | (string | number)[]>()
 
-const selectId = props.id || useId()
-const labelId = useId()
-const endTextId = useId()
+const multiple = computed(
+  () => attrs.multiple !== undefined && attrs.multiple !== false,
+)
+const model = computed({
+  get: () => modelValue.value ?? value ?? initialValue(items, multiple.value),
+  set: (value) => {
+    modelValue.value = value
+  },
+})
+
+const vSeed = {
+  beforeMount: (el: HTMLSelectElement) => {
+    model.value ??= el.multiple
+      ? [...el.selectedOptions].map((option) => option.value)
+      : el.value
+  },
+}
+
+const isSelected = (value: unknown) =>
+  Array.isArray(model.value)
+    ? model.value.includes(value as string | number)
+    : model.value === value
+
+const uid = useId()
+const labelId = `select-label-${uid}`
+const startTextId = `start-text-${uid}`
+const endTextId = `end-text-${uid}`
+const topId = `top-${uid}`
+const bottomId = `bottom-${uid}`
+const field = inject(FieldGroupKey, undefined)
 </script>
 
 <template>
   <label
     :class="[
       'ui-select',
-      props.size && `ui-${props.size}`,
       {
-        'ui-filled': props.variant === 'filled',
-        'ui-spread': props.spread,
+        'ui-auto-fit': autoFit,
+        'ui-filled': variant === 'filled',
+        'ui-spread': spread,
       },
-      props.class,
+      size && size !== 'medium' && `ui-${size}`,
+      $props.class,
     ]"
-    :data-invalid="props.error || undefined"
+    :style="$attrs.style"
   >
-    <span v-if="props.label || $slots.label" class="ui-label" :id="labelId">
-      <slot name="label">{{ props.label }}</slot>
+    <span
+      v-if="label || $slots.label"
+      :class="[hideLabel ? 'ui-sr-only' : 'ui-label']"
+      :id="labelId"
+    >
+      {{ label }}<slot name="label"></slot>
     </span>
 
-    <span v-if="props.description || $slots.description" class="ui-start-text">
-      <slot name="description">{{ props.description }}</slot>
+    <span
+      v-if="startText || $slots['start-text']"
+      class="ui-start-text"
+      :id="startTextId"
+    >
+      {{ startText }}<slot name="start-text"></slot>
     </span>
 
     <span class="ui-field">
       <select
-        :aria-labelledby="props.label ? labelId : undefined"
-        :id="selectId"
-        v-bind="$attrs"
-        v-model="modelValue"
+        v-bind="inputAttrs"
+        v-seed
+        v-model="model"
+        :aria-describedby="
+          idRefs(
+            $slots.top && topId,
+            (startText || $slots['start-text']) && startTextId,
+            (endText || $slots['end-text']) && endTextId,
+            $slots.bottom && bottomId,
+            attrs['aria-describedby'],
+          )
+        "
+        :aria-invalid="error ? 'true' : attrs['aria-invalid']"
+        :aria-labelledby="
+          label || $slots.label ? labelId : attrs['aria-labelledby']
+        "
+        :id="id"
+        :name="attrs.name ?? field?.name"
       >
         <button v-pre>
           <selectedcontent></selectedcontent>
         </button>
-        <div :class="['ui-list', { 'ui-dense': props.dense }]">
+        <div :class="['ui-list', { 'ui-dense': dense }]">
           <option
-            v-for="item in props.items"
+            v-for="item in items"
             :key="item.value"
+            :selected="isSelected(item.value) || undefined"
             :value="item.value"
           >
-            {{ item.text }}
+            {{ item.label }}
           </option>
           <slot></slot>
         </div>
       </select>
-      <span class="ui-prefix" v-if="$slots.prefix"
-        ><slot name="prefix"></slot
-      ></span>
-      <span class="ui-suffix" v-if="$slots.suffix"
-        ><slot name="suffix"></slot
+      <span class="ui-start" v-if="$slots.start"
+        ><slot name="start"></slot
       ></span>
-      <span class="ui-header" v-if="$slots.header"
-        ><slot name="header"></slot
+      <span class="ui-end" v-if="$slots.end"><slot name="end"></slot></span>
+      <span class="ui-top" :id="topId" v-if="$slots.top"
+        ><slot name="top"></slot
       ></span>
-      <span class="ui-footer" v-if="$slots.footer"
-        ><slot name="footer"></slot
+      <span class="ui-bottom" :id="bottomId" v-if="$slots.bottom"
+        ><slot name="bottom"></slot
       ></span>
     </span>
 
     <span
-      v-if="props.endText || $slots['end-text']"
+      v-if="endText || $slots['end-text']"
       :id="endTextId"
       class="ui-end-text"
     >
-      <slot name="end-text">{{ props.endText }}</slot>
+      {{ endText }}<slot name="end-text"></slot>
     </span>
   </label>
 </template>

package/components/Select/selection.ts

@@ -0,0 +1,11 @@
+import type { SelectItem } from "./types"
+
+export const initialValue = (
+  items: SelectItem[],
+  multiple?: boolean | null,
+) => {
+  const selected = items
+    .filter((item) => item.selected)
+    .map((item) => item.value)
+  return multiple ? selected : selected[0]
+}

package/components/Select/types.react.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { ComponentProps, ReactNode } from "react"
+
+export type Props = Omit<Base.Props, keyof Base.Slots<ReactNode>> &
+  Base.Slots<ReactNode> &
+  Omit<ComponentProps<"select">, "size">

package/components/Select/types.svelte.ts

@@ -4,4 +4,4 @@ import type { Snippet } from "svelte"
 
 export type Props = Omit<Base.Props, keyof Base.Slots<Snippet>> &
   Base.Slots<Snippet> &
-  Omit<SvelteHTMLElements["select"], "prefix" | "size">
+  Omit<SvelteHTMLElements["select"], "size">

package/components/Select/types.ts

@@ -1,27 +1,30 @@
 export type Props = {
-  error?: boolean
+  autoFit?: boolean
   dense?: boolean
-  description?: string
-  items?: Item[]
+  endText?: string
+  error?: boolean
+  hideLabel?: boolean
+  items?: SelectItem[]
   label?: string
+  size?: "x-small" | "small" | "medium" | "large"
   spread?: boolean
-  size?: "small"
-  endText?: string
+  startText?: string
   variant?: "outlined" | "filled"
 }
 
-export type Item = {
-  text: string
-  value: any
+export type SelectItem = {
+  label: string
+  selected?: boolean
+  value: number | string
 }
 
 export type Slots<S> = {
+  bottom?: string | S
   children?: S
-  description?: string | S
+  end?: string | S
   endText?: string | S
-  footer?: string | S
-  header?: string | S
   label?: string | S
-  prefix?: string | S
-  suffix?: string | S
+  start?: string | S
+  startText?: string | S
+  top?: string | S
 }

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

@@ -0,0 +1,20 @@
+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"]
+    value?: string | number | (string | number)[]
+  }
+
+export type Slots = {
+  bottom?: Slot
+  default?: Slot
+  end?: Slot
+  "end-text"?: Slot
+  label?: Slot
+  start?: Slot
+  "start-text"?: Slot
+  top?: Slot
+}

package/components/Switch/Switch.astro

@@ -1,48 +1,42 @@
 ---
 import SwitchInput from "./SwitchInput.astro"
-import type { SwitchProps as Props } from "./types.astro"
+import type { Props } from "./types.astro"
+import { hasName, warnUnnamed } from "../dev"
 
 export const title = "Switch"
 
 const {
+  "aria-invalid": ariaInvalid,
+  card,
   class: className,
+  endText,
   error,
   hideLabel,
-  name,
-  small,
+  label,
+  orientation,
+  size,
   spread,
-  stack,
+  style,
+  variant,
   ...rest
 } = Astro.props
 
-const { $id, currentFieldName } = Astro.locals
-const endTextId = Astro.slots.has("end-text") ? $id("end-text") : undefined
-
-const finalName = name || currentFieldName
-
-if (
-  import.meta.env.DEV &&
-  !Astro.slots.has("default") &&
-  !Astro.props["aria-label"] &&
-  !Astro.props["aria-labelledby"]
-) {
-  console.warn(
-    "[OPUI Switch] Missing accessible name. Provide a default slot, `aria-label`, or `aria-labelledby`.",
-  )
-}
+warnUnnamed("Switch", hasName(Astro.props, Astro.slots.has("default")))
 ---
 
 <label
   class:list={[
     "ui-switch",
     {
-      "ui-small": small,
-      "ui-stack": stack,
+      "ui-card": card,
       "ui-spread": spread,
     },
+    card && variant && variant !== "outlined" && `ui-${variant}`,
+    orientation && orientation !== "horizontal" && `ui-${orientation}`,
+    size && size !== "medium" && `ui-${size}`,
     className,
   ]}
-  data-invalid={error || undefined}
+  style={style}
 >
   {
     Astro.slots.has("icon-unchecked") && (
@@ -58,17 +52,19 @@ if (
       </span>
     )
   }
-  <SwitchInput aria-describedby={endTextId} name={finalName} {...rest} />
+  <SwitchInput {...rest} aria-invalid={error ? "true" : ariaInvalid} />
   {
-    Astro.slots.has("default") && (
+    (label || Astro.slots.has("default")) && (
       <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}>
+        {label}
         <slot />
       </span>
     )
   }
   {
-    Astro.slots.has("end-text") && (
-      <span id={endTextId} class="ui-end-text">
+    (endText || Astro.slots.has("end-text")) && (
+      <span class="ui-end-text">
+        {endText}
         <slot name="end-text" />
       </span>
     )

package/components/Switch/Switch.react.tsx

@@ -0,0 +1,63 @@
+import { cx } from "../cx"
+import { hasName, warnUnnamed } from "../dev"
+import SwitchInput from "./SwitchInput.react"
+import type { Props } from "./types.react"
+
+export default function Switch({
+  card,
+  className,
+  error,
+  hideLabel,
+  label,
+  orientation,
+  size,
+  spread,
+  style,
+  variant,
+  children,
+  endText,
+  iconChecked,
+  iconUnchecked,
+  ...rest
+}: Props) {
+  warnUnnamed("Switch", hasName({ ...rest, label }, children))
+
+  return (
+    <label
+      className={cx([
+        "ui-switch",
+        {
+          "ui-card": card,
+          "ui-spread": spread,
+        },
+        card && variant && variant !== "outlined" && `ui-${variant}`,
+        orientation && orientation !== "horizontal" && `ui-${orientation}`,
+        size && size !== "medium" && `ui-${size}`,
+        className,
+      ])}
+      style={style}
+    >
+      {iconUnchecked && (
+        <span className="ui-icon-unchecked" aria-hidden="true">
+          {iconUnchecked}
+        </span>
+      )}
+      {iconChecked && (
+        <span className="ui-icon-checked" aria-hidden="true">
+          {iconChecked}
+        </span>
+      )}
+      <SwitchInput
+        {...rest}
+        aria-invalid={error ? "true" : rest["aria-invalid"]}
+      />
+      {(label || children) && (
+        <span className={hideLabel ? "ui-sr-only" : "ui-label"}>
+          {label}
+          {children}
+        </span>
+      )}
+      {endText && <span className="ui-end-text">{endText}</span>}
+    </label>
+  )
+}

package/components/Switch/Switch.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { content } from "../content.svelte"
+  import { hasName, warnUnnamed } from "../dev"
+  import SwitchInput from "./SwitchInput.svelte"
+  import type { Props } from "./types.svelte"
+
+  let {
+    card,
+    checked = $bindable(),
+    class: className,
+    error,
+    group = $bindable(),
+    hideLabel,
+    label,
+    orientation,
+    size,
+    spread,
+    style,
+    variant,
+
+    // Snippets
+    children,
+    endText,
+    iconChecked,
+    iconUnchecked,
+    ...rest
+  }: Props = $props()
+
+  untrack(() => warnUnnamed("Switch", hasName({ ...rest, label }, children)))
+</script>
+
+<label
+  class={[
+    "ui-switch",
+    {
+      "ui-card": card,
+      "ui-spread": spread,
+    },
+    card && variant && variant !== "outlined" && `ui-${variant}`,
+    orientation && orientation !== "horizontal" && `ui-${orientation}`,
+    size && size !== "medium" && `ui-${size}`,
+    className,
+  ]}
+  {style}
+>
+  {#if iconUnchecked}
+    <span class="ui-icon-unchecked" aria-hidden="true">
+      {@render iconUnchecked()}
+    </span>
+  {/if}
+  {#if iconChecked}
+    <span class="ui-icon-checked" aria-hidden="true">
+      {@render iconChecked()}
+    </span>
+  {/if}
+  <SwitchInput
+    {...rest}
+    aria-invalid={error ? "true" : rest["aria-invalid"]}
+    bind:checked
+    bind:group
+  />
+  {#if label || children}
+    <span class={[hideLabel ? "ui-sr-only" : "ui-label"]}>
+      {label}{@render children?.()}
+    </span>
+  {/if}
+  {#if endText}
+    <span class="ui-end-text">
+      {@render content(endText)}
+    </span>
+  {/if}
+</label>

package/components/Switch/Switch.vue

@@ -1,17 +1,33 @@
 <script setup lang="ts">
 import SwitchInput from "./SwitchInput.vue"
-import type { Slots, SwitchProps } from "./types.d.vue"
-import { useId } from "vue"
+import type { Props, Slots } from "./types.vue-props"
+import { type InputHTMLAttributes, useAttrs } from "vue"
+import { useInputAttrs } from "../vue"
+import { hasName, warnUnnamed } from "../dev"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<SwitchProps>()
-defineSlots<Slots>()
-const modelValue = defineModel<boolean | (string | number)[]>()
+const {
+  card,
+  endText,
+  error,
+  hideLabel,
+  label,
+  orientation,
+  size,
+  spread,
+  variant,
+} = defineProps<Props>()
+const slots = defineSlots<Slots>()
+const attrs = useAttrs() as InputHTMLAttributes
+const inputAttrs = useInputAttrs()
+const modelValue = defineModel<boolean | (string | number)[] | undefined>({
+  default: undefined,
+})
 
-const endTextId = useId()
+warnUnnamed("Switch", hasName({ ...attrs, label }, slots.default))
 </script>
 
 <template>
@@ -19,13 +35,15 @@ const endTextId = useId()
     :class="[
       'ui-switch',
       {
-        'ui-small': props.small,
-        'ui-stack': props.stack,
-        'ui-spread': props.spread,
+        'ui-card': card,
+        'ui-spread': spread,
       },
-      props.class,
+      card && variant && variant !== 'outlined' && `ui-${variant}`,
+      orientation && orientation !== 'horizontal' && `ui-${orientation}`,
+      size && size !== 'medium' && `ui-${size}`,
+      $props.class,
     ]"
-    :data-invalid="props.error || undefined"
+    :style="$attrs.style"
   >
     <span
       v-if="$slots['icon-unchecked']"
@@ -44,20 +62,20 @@ const endTextId = useId()
     </span>
 
     <SwitchInput
-      v-bind="$attrs"
+      v-bind="inputAttrs"
       v-model="modelValue"
-      :aria-describedby="endTextId"
+      :aria-invalid="error ? 'true' : attrs['aria-invalid']"
     />
 
     <span
-      v-if="$slots.default"
-      :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
+      v-if="label || $slots.default"
+      :class="[hideLabel ? 'ui-sr-only' : 'ui-label']"
     >
-      <slot></slot>
+      {{ label }}<slot></slot>
     </span>
 
-    <span v-if="$slots['end-text']" :id="endTextId" class="ui-end-text">
-      <slot name="end-text"></slot>
+    <span v-if="endText || $slots['end-text']" class="ui-end-text">
+      {{ endText }}<slot name="end-text"></slot>
     </span>
   </label>
 </template>

package/components/Switch/SwitchInput.astro

@@ -1,7 +1,10 @@
 ---
 import type { SwitchInputProps as Props } from "./types.astro"
+import { fieldGroupContext } from "../FieldGroup/context.astro"
 
-const { ...rest } = Astro.props
+const { name, ...rest } = Astro.props as Props
+
+const field = fieldGroupContext.get()
 ---
 
-<input type="checkbox" role="switch" {...rest} />
+<input type="checkbox" role="switch" name={name ?? field?.name} {...rest} />

package/components/Switch/SwitchInput.react.tsx

@@ -0,0 +1,12 @@
+"use client"
+
+import { useFieldGroupContext } from "../FieldGroup/context.react"
+import type { SwitchInputProps as Props } from "./types.react"
+
+export default function SwitchInput({ name, ...rest }: Props) {
+  const field = useFieldGroupContext()
+
+  return (
+    <input type="checkbox" role="switch" name={name ?? field?.name} {...rest} />
+  )
+}

package/components/Switch/SwitchInput.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { getFieldGroupContext } from "../FieldGroup/context.svelte"
+  import { toggleInGroup } from "../group"
+  import type { SwitchInputProps as Props } from "./types.svelte"
+
+  let {
+    checked = $bindable(),
+    group = $bindable(),
+    name,
+    value,
+    ...rest
+  }: Props = $props()
+
+  const field = getFieldGroupContext()
+
+  const getChecked = () => (group ? group.includes(value) : !!checked)
+  const setChecked = (isChecked: boolean) => {
+    if (group) group = toggleInGroup(group, value, isChecked)
+    else checked = isChecked
+  }
+</script>
+
+<input
+  type="checkbox"
+  role="switch"
+  bind:checked={getChecked, setChecked}
+  name={name ?? field?.name}
+  {value}
+  {...rest}
+/>