opui-css 5.4.1 → 5.4.3

package/components/Range/Range.astro

@@ -1,128 +1,128 @@
----
-import type { RangeProps as Props } from "./types.astro"
-
-export const title = "Range"
-
-const {
-  class: className,
-  disabled,
-  endText,
-  id,
-  label,
-  list,
-  max,
-  min,
-  name,
-  options,
-  spread,
-  startText,
-  step,
-  value,
-  valueSuffix,
-  variant,
-  ...rest
-} = Astro.props
-
-const { $id } = Astro.locals
-
-const hasLabel = !!label || Astro.slots.has("default")
-const hasStartText = !!startText || Astro.slots.has("start-text")
-const hasEndText = !!endText || Astro.slots.has("end-text")
-const hasValue = valueSuffix !== undefined || Astro.slots.has("value")
-
-const inputId = id || $id("range")
-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
----
-
-<label
-  class:list={[
-    "ui-range",
-    variant && `ui-${variant}`,
-    { "ui-spread": spread },
-    className,
-  ]}
->
-  {
-    hasLabel && (
-      <span class="ui-label" id={labelId}>
-        {label}
-        <slot />
-      </span>
-    )
-  }
-  {
-    hasValue && (
-      <output class="ui-value" for={inputId} data-suffix={valueSuffix}>
-        <slot name="value">{value}</slot>
-      </output>
-    )
-  }
-  {
-    hasStartText && (
-      <span class="ui-start-text" id={startTextId}>
-        {startText}
-        <slot name="start-text" />
-      </span>
-    )
-  }
-  <input
-    aria-describedby={describedBy}
-    aria-labelledby={labelId}
-    disabled={disabled}
-    id={inputId}
-    list={list}
-    max={max}
-    min={min}
-    name={name}
-    step={step}
-    type="range"
-    value={value}
-    {...rest}
-  />
-  {
-    (options || Astro.slots.has("datalist")) && (
-      <datalist id={list}>
-        {options?.map((option) =>
-          typeof option === "object" ? (
-            <option value={option.value} label={option.label} />
-          ) : (
-            <option value={option} />
-          ),
-        )}
-        <slot name="datalist" />
-      </datalist>
-    )
-  }
-  {
-    hasEndText && (
-      <span class="ui-end-text" id={endTextId}>
-        {endText}
-        <slot name="end-text" />
-      </span>
-    )
-  }
-</label>
-
-<script>
-  // Mirror the slider's current value into its associated <output> on every
-  // input event. Idempotent: each .ui-range is wired once, and ignores ranges
-  // 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",
-    )
-    if (!input || !output) continue
-    const suffix = output.dataset.suffix ?? ""
-    const update = () => {
-      output.textContent = `${input.value}${suffix}`
-    }
-    input.addEventListener("input", update)
-    update()
-  }
-</script>
+---
+import type { RangeProps as Props } from "./types.astro"
+
+export const title = "Range"
+
+const {
+  class: className,
+  disabled,
+  endText,
+  id,
+  label,
+  list,
+  max,
+  min,
+  name,
+  options,
+  spread,
+  startText,
+  step,
+  value,
+  valueSuffix,
+  variant,
+  ...rest
+} = Astro.props
+
+const { $id } = Astro.locals
+
+const hasLabel = !!label || Astro.slots.has("default")
+const hasStartText = !!startText || Astro.slots.has("start-text")
+const hasEndText = !!endText || Astro.slots.has("end-text")
+const hasValue = valueSuffix !== undefined || Astro.slots.has("value")
+
+const inputId = id || $id("range")
+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
+---
+
+<label
+  class:list={[
+    "ui-range",
+    variant && `ui-${variant}`,
+    { "ui-spread": spread },
+    className,
+  ]}
+>
+  {
+    hasLabel && (
+      <span class="ui-label" id={labelId}>
+        {label}
+        <slot />
+      </span>
+    )
+  }
+  {
+    hasValue && (
+      <output class="ui-value" for={inputId} data-suffix={valueSuffix}>
+        <slot name="value">{value}</slot>
+      </output>
+    )
+  }
+  {
+    hasStartText && (
+      <span class="ui-start-text" id={startTextId}>
+        {startText}
+        <slot name="start-text" />
+      </span>
+    )
+  }
+  <input
+    aria-describedby={describedBy}
+    aria-labelledby={labelId}
+    disabled={disabled}
+    id={inputId}
+    list={list}
+    max={max}
+    min={min}
+    name={name}
+    step={step}
+    type="range"
+    value={value}
+    {...rest}
+  />
+  {
+    (options || Astro.slots.has("datalist")) && (
+      <datalist id={list}>
+        {options?.map((option) =>
+          typeof option === "object" ? (
+            <option value={option.value} label={option.label} />
+          ) : (
+            <option value={option} />
+          ),
+        )}
+        <slot name="datalist" />
+      </datalist>
+    )
+  }
+  {
+    hasEndText && (
+      <span class="ui-end-text" id={endTextId}>
+        {endText}
+        <slot name="end-text" />
+      </span>
+    )
+  }
+</label>
+
+<script>
+  // Mirror the slider's current value into its associated <output> on every
+  // input event. Idempotent: each .ui-range is wired once, and ignores ranges
+  // 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",
+    )
+    if (!input || !output) continue
+    const suffix = output.dataset.suffix ?? ""
+    const update = () => {
+      output.textContent = `${input.value}${suffix}`
+    }
+    input.addEventListener("input", update)
+    update()
+  }
+</script>

package/components/Range/Range.vue

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

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