opui-css 5.1.2 → 5.3.0

package/components/Range/Range.astro

@@ -1,27 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  disabled?: boolean
-  endText?: string
-  id?: string
-  label?: string
-  max?: number | string
-  min?: number | string
-  name?: string
-  spread?: boolean
-  startText?: string
-  step?: number | string
-  value?: number | string
-  valueSuffix?: string
-  variant?: "filled" | "default" | "tonal"
-} & (
-  | { list?: never; options?: never }
-  | {
-      list: string
-      options: (string | number | { value: string | number; label?: string })[]
-    }
-)
+import type { RangeProps as Props } from "./types.astro"
 
 export const title = "Range"
 
@@ -57,14 +35,24 @@ const labelId = hasLabel ? $id("range-label") : undefined
 const startTextId = hasStartText ? $id("range-start") : undefined
 const endTextId = hasEndText ? $id("range-end") : undefined
 
-const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefined
+const describedBy =
+  [startTextId, endTextId].filter(Boolean).join(" ") || undefined
 ---
 
-<label class:list={["ui-range", variant && `ui-${variant}`, { "ui-spread": spread }, className]}>
+<label
+  class:list={[
+    "ui-range",
+    variant && `ui-${variant}`,
+    { "ui-spread": spread },
+    className,
+  ]}
+>
   {
     hasLabel && (
-      <!-- prettier-ignore -->
-      <span class="ui-label" id={labelId}>{label}<slot /></span>
+      <span class="ui-label" id={labelId}>
+        {label}
+        <slot />
+      </span>
     )
   }
   {
@@ -77,7 +65,8 @@ const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefi
   {
     hasStartText && (
       <span class="ui-start-text" id={startTextId}>
-        {startText}<slot name="start-text" />
+        {startText}
+        <slot name="start-text" />
       </span>
     )
   }
@@ -103,7 +92,7 @@ const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefi
             <option value={option.value} label={option.label} />
           ) : (
             <option value={option} />
-          )
+          ),
         )}
         <slot name="datalist" />
       </datalist>
@@ -112,7 +101,8 @@ const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefi
   {
     hasEndText && (
       <span class="ui-end-text" id={endTextId}>
-        {endText}<slot name="end-text" />
+        {endText}
+        <slot name="end-text" />
       </span>
     )
   }
@@ -124,7 +114,9 @@ const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefi
   // without a value display.
   for (const range of document.querySelectorAll<HTMLElement>(".ui-range")) {
     const input = range.querySelector<HTMLInputElement>('input[type="range"]')
-    const output = range.querySelector<HTMLOutputElement>(":scope > output.ui-value")
+    const output = range.querySelector<HTMLOutputElement>(
+      ":scope > output.ui-value",
+    )
     if (!input || !output) continue
     const suffix = output.dataset.suffix ?? ""
     const update = () => {

package/components/Range/Range.vue

@@ -0,0 +1,85 @@
+<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>

package/components/Range/types.astro.ts

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

package/components/Range/types.d.vue.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { RangeProps as BaseRangeProps } from "./types"
+
+export type RangeProps = BaseRangeProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  datalist?: Slot
+  default?: Slot
+  "end-text"?: Slot
+  "start-text"?: Slot
+  value?: Slot
+}

package/components/Range/types.solid.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type RangeProps = Base.RangeProps &
+  Partial<Base.RangeSlots<JSX.Element>> &
+  JSX.InputHTMLAttributes<HTMLInputElement>

package/components/Range/types.svelte.ts

@@ -0,0 +1,9 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type Snippets = Base.RangeSlots<Snippet>
+
+export type RangeProps = Omit<Base.RangeProps, keyof Snippets> &
+  Snippets &
+  SvelteHTMLElements["input"]

package/components/Range/types.ts

@@ -0,0 +1,25 @@
+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
+}

package/components/Select/Select.astro

@@ -1,34 +1,11 @@
 ---
-type Item = {
-  text: string
-  value: any
-}
-
-type Props = {
-  [key: string]: any
-  class?: string
-  description?: string
-  disabled?: boolean
-  error?: boolean
-  dense?: boolean
-  id?: string
-  items?: Item[]
-  label?: string
-  name?: string
-  spread?: boolean
-  required?: boolean
-  size?: "small"
-  endText?: string
-  value?: any
-  variant?: "outlined" | "filled"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Select"
 
 const {
   class: className,
   description,
-  disabled,
   error,
   dense,
   id,
@@ -36,10 +13,8 @@ const {
   label,
   name,
   spread,
-  required,
   size,
   endText,
-  value,
   variant = "outlined",
   ...rest
 } = Astro.props
@@ -64,24 +39,25 @@ const labelId = $id("select-label")
 >
   {
     (label || Astro.slots.has("label")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-label" id={labelId}>{label}<slot name="label" /></span>
+      <span class="ui-label" id={labelId}>
+        {label}
+        <slot name="label" />
+      </span>
     )
   }
   {
     (description || Astro.slots.has("description")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-start-text">{description}<slot name="description" /></span>
+      <span class="ui-start-text">
+        {description}
+        <slot name="description" />
+      </span>
     )
   }
   <span class="ui-field">
     <select
       aria-labelledby={label ? labelId : undefined}
-      disabled={disabled}
       id={selectId}
       name={fieldName}
-      required={required}
-      value={value}
       {...rest}
     >
       <button>
@@ -92,15 +68,41 @@ const labelId = $id("select-label")
         <slot />
       </div>
     </select>
-    {Astro.slots.has("prefix") && <span class="ui-prefix"><slot name="prefix" /></span>}
-    {Astro.slots.has("suffix") && <span class="ui-suffix"><slot name="suffix" /></span>}
-    {Astro.slots.has("header") && <span class="ui-header"><slot name="header" /></span>}
-    {Astro.slots.has("footer") && <span class="ui-footer"><slot name="footer" /></span>}
+    {
+      Astro.slots.has("prefix") && (
+        <span class="ui-prefix">
+          <slot name="prefix" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("suffix") && (
+        <span class="ui-suffix">
+          <slot name="suffix" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("header") && (
+        <span class="ui-header">
+          <slot name="header" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("footer") && (
+        <span class="ui-footer">
+          <slot name="footer" />
+        </span>
+      )
+    }
   </span>
   {
     (endText || Astro.slots.has("end-text")) && (
-      <!-- prettier-ignore -->
-      <span id={$id("end-text")} class="ui-end-text">{endText}<slot name="end-text" /></span>
+      <span id={$id("end-text")} class="ui-end-text">
+        {endText}
+        <slot name="end-text" />
+      </span>
     )
   }
 </label>

package/components/Select/Select.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useId } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  variant: "outlined",
+})
+defineSlots<Slots>()
+const modelValue = defineModel<string | number | (string | number)[]>()
+
+const selectId = props.id || useId()
+const labelId = useId()
+const endTextId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-select',
+      props.size && `ui-${props.size}`,
+      {
+        'ui-filled': props.variant === 'filled',
+        'ui-spread': props.spread,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span v-if="props.label || $slots.label" class="ui-label" :id="labelId">
+      <slot name="label">{{ props.label }}</slot>
+    </span>
+
+    <span v-if="props.description || $slots.description" class="ui-start-text">
+      <slot name="description">{{ props.description }}</slot>
+    </span>
+
+    <span class="ui-field">
+      <select
+        :aria-labelledby="props.label ? labelId : undefined"
+        :id="selectId"
+        v-bind="$attrs"
+        v-model="modelValue"
+      >
+        <button v-pre>
+          <selectedcontent></selectedcontent>
+        </button>
+        <div :class="['ui-list', { 'ui-dense': props.dense }]">
+          <option
+            v-for="item in props.items"
+            :key="item.value"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </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>
+      <span class="ui-header" v-if="$slots.header"
+        ><slot name="header"></slot
+      ></span>
+      <span class="ui-footer" v-if="$slots.footer"
+        ><slot name="footer"></slot
+      ></span>
+    </span>
+
+    <span
+      v-if="props.endText || $slots['end-text']"
+      :id="endTextId"
+      class="ui-end-text"
+    >
+      <slot name="end-text">{{ props.endText }}</slot>
+    </span>
+  </label>
+</template>

package/components/Select/types.astro.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"select">

package/components/Select/types.d.vue.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+  description?: Slot
+  "end-text"?: Slot
+  footer?: Slot
+  header?: Slot
+  label?: Slot
+  prefix?: Slot
+  suffix?: Slot
+}

package/components/Select/types.solid.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, "size"> &
+  Base.Slots<JSX.Element>

package/components/Select/types.svelte.ts

@@ -0,0 +1,7 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+export type Props = Omit<Base.Props, keyof Base.Slots<Snippet>> &
+  Base.Slots<Snippet> &
+  Omit<SvelteHTMLElements["select"], "prefix" | "size">

package/components/Select/types.ts

@@ -0,0 +1,27 @@
+export type Props = {
+  error?: boolean
+  dense?: boolean
+  description?: string
+  items?: Item[]
+  label?: string
+  spread?: boolean
+  size?: "small"
+  endText?: string
+  variant?: "outlined" | "filled"
+}
+
+export type Item = {
+  text: string
+  value: any
+}
+
+export type Slots<S> = {
+  children?: S
+  description?: string | S
+  endText?: string | S
+  footer?: string | S
+  header?: string | S
+  label?: string | S
+  prefix?: string | S
+  suffix?: string | S
+}

package/components/Switch/Switch.astro

@@ -1,37 +1,17 @@
 ---
 import SwitchInput from "./SwitchInput.astro"
-
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  class?: string
-  disabled?: boolean
-  error?: boolean
-  hideLabel?: boolean
-  id?: string
-  name?: string
-  required?: boolean
-  small?: boolean
-  spread?: boolean
-  stack?: boolean
-  value?: string
-}
+import type { SwitchProps as Props } from "./types.astro"
 
 export const title = "Switch"
 
 const {
-  checked,
   class: className,
-  disabled,
   error,
   hideLabel,
-  id,
   name,
-  required,
   small,
   spread,
   stack,
-  value,
   ...rest
 } = Astro.props
 
@@ -47,7 +27,7 @@ if (
   !Astro.props["aria-labelledby"]
 ) {
   console.warn(
-    "[OPUI Switch] Missing accessible name. Provide a default slot, `aria-label`, or `aria-labelledby`."
+    "[OPUI Switch] Missing accessible name. Provide a default slot, `aria-label`, or `aria-labelledby`.",
   )
 }
 ---
@@ -78,24 +58,19 @@ if (
       </span>
     )
   }
-  <SwitchInput
-    aria-describedby={endTextId}
-    {checked}
-    {disabled}
-    {id}
-    name={finalName}
-    {required}
-    {value}
-    {...rest}
-  />
+  <SwitchInput aria-describedby={endTextId} name={finalName} {...rest} />
   {
     Astro.slots.has("default") && (
-    <!-- prettier-ignore --><span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>)
+      <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}>
+        <slot />
+      </span>
+    )
+  }
+  {
+    Astro.slots.has("end-text") && (
+      <span id={endTextId} class="ui-end-text">
+        <slot name="end-text" />
+      </span>
+    )
   }
-    {
-      Astro.slots.has("end-text") && (
-        <!-- prettier-ignore -->
-        <span id={endTextId} class="ui-end-text"><slot name="end-text" /></span>
-      )
-    }
 </label>

package/components/Switch/Switch.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import SwitchInput from "./SwitchInput.vue"
+import type { Slots, SwitchProps } from "./types.d.vue"
+import { useId } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SwitchProps>()
+defineSlots<Slots>()
+const modelValue = defineModel<boolean | (string | number)[]>()
+
+const endTextId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-switch',
+      {
+        'ui-small': props.small,
+        'ui-stack': props.stack,
+        'ui-spread': props.spread,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span
+      v-if="$slots['icon-unchecked']"
+      class="ui-icon-unchecked"
+      aria-hidden="true"
+    >
+      <slot name="icon-unchecked"></slot>
+    </span>
+
+    <span
+      v-if="$slots['icon-checked']"
+      class="ui-icon-checked"
+      aria-hidden="true"
+    >
+      <slot name="icon-checked"></slot>
+    </span>
+
+    <SwitchInput
+      v-bind="$attrs"
+      v-model="modelValue"
+      :aria-describedby="endTextId"
+    />
+
+    <span
+      v-if="$slots.default"
+      :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
+    >
+      <slot></slot>
+    </span>
+
+    <span v-if="$slots['end-text']" :id="endTextId" class="ui-end-text">
+      <slot name="end-text"></slot>
+    </span>
+  </label>
+</template>