opui-css 5.4.3 → 6.0.0-rc.1

package/components/Switch/Switch.vue

@@ -1,63 +1,81 @@
-<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>
+<script setup lang="ts">
+import SwitchInput from "./SwitchInput.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 {
+  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,
+})
+
+warnUnnamed("Switch", hasName({ ...attrs, label }, slots.default))
+</script>
+
+<template>
+  <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}`,
+      $props.class,
+    ]"
+    :style="$attrs.style"
+  >
+    <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="inputAttrs"
+      v-model="modelValue"
+      :aria-invalid="error ? 'true' : attrs['aria-invalid']"
+    />
+
+    <span
+      v-if="label || $slots.default"
+      :class="[hideLabel ? 'ui-sr-only' : 'ui-label']"
+    >
+      {{ label }}<slot></slot>
+    </span>
+
+    <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"
-
-const { ...rest } = Astro.props
----
-
-<input type="checkbox" role="switch" {...rest} />
+---
+import type { SwitchInputProps as Props } from "./types.astro"
+import { fieldGroupContext } from "../FieldGroup/context.astro"
+
+const { name, ...rest } = Astro.props as Props
+
+const field = fieldGroupContext.get()
+---
+
+<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}
+/>

package/components/Switch/SwitchInput.vue

@@ -1,14 +1,36 @@
-<script setup lang="ts">
-import type { SwitchInputProps } from "./types"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-defineProps<SwitchInputProps>()
-const modelValue = defineModel<boolean | (string | number)[]>()
-</script>
-
-<template>
-  <input type="checkbox" role="switch" v-bind="$attrs" v-model="modelValue" />
-</template>
+<script setup lang="ts">
+import { computed, inject, type InputHTMLAttributes, useAttrs } from "vue"
+import type { SwitchInputProps } from "./types.vue-props"
+import { FieldGroupKey } from "../FieldGroup/context.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<SwitchInputProps>()
+const attrs = useAttrs() as InputHTMLAttributes
+const modelValue = defineModel<boolean | (string | number)[] | undefined>({
+  default: undefined,
+})
+const field = inject(FieldGroupKey, undefined)
+
+const model = computed({
+  get: () =>
+    modelValue.value ??
+    (attrs.checked !== undefined && attrs.checked !== false),
+  set: (value) => {
+    modelValue.value = value
+  },
+})
+</script>
+
+<template>
+  <input
+    type="checkbox"
+    role="switch"
+    :class="$props.class"
+    v-bind="$attrs"
+    :name="attrs.name ?? field?.name"
+    v-model="model"
+  />
+</template>

package/components/Switch/types.astro.ts

@@ -1,5 +1,7 @@
-import type * as Base from "./types"
-import type { HTMLAttributes } from "astro/types"
-
-export type SwitchProps = Base.SwitchProps & HTMLAttributes<"input">
-export type SwitchInputProps = Base.SwitchInputProps & HTMLAttributes<"input">
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & Omit<HTMLAttributes<"input">, "size" | "type">
+
+export type SwitchInputProps = Base.SwitchInputProps &
+  Omit<HTMLAttributes<"input">, "type">

package/components/Switch/types.react.ts

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

package/components/Switch/types.svelte.ts

@@ -1,9 +1,16 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-import type { Snippet } from "svelte"
-
-export type SwitchProps = Base.SwitchProps &
-  Base.SwitchSlots<Snippet> &
-  SvelteHTMLElements["input"]
-export type SwitchInputProps = Base.SwitchInputProps &
-  SvelteHTMLElements["input"]
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type Snippets = Base.Slots<Snippet>
+
+type Group = { group?: (string | number)[] }
+
+export type Props = Omit<Base.Props, keyof Snippets> &
+  Snippets &
+  Group &
+  Omit<SvelteHTMLElements["input"], "size" | "type">
+
+export type SwitchInputProps = Base.SwitchInputProps &
+  Group &
+  Omit<SvelteHTMLElements["input"], "type">

package/components/Switch/types.ts

@@ -1,16 +1,19 @@
-export type SwitchProps = {
-  error?: boolean
-  hideLabel?: boolean
-  small?: boolean
-  spread?: boolean
-  stack?: boolean
-}
-
-export type SwitchSlots<S> = {
-  children?: S
-  endText?: string | S
-  iconUnchecked?: S
-  iconChecked?: S
-}
-
-export type SwitchInputProps = {}
+export type Props = {
+  card?: boolean
+  endText?: string
+  error?: boolean
+  hideLabel?: boolean
+  label?: string
+  orientation?: "horizontal" | "vertical"
+  size?: "x-small" | "small" | "medium" | "large"
+  spread?: boolean
+  variant?: "elevated" | "outlined" | "tonal"
+}
+
+export type Slots<S> = {
+  endText?: string | S
+  iconChecked?: S
+  iconUnchecked?: S
+}
+
+export type SwitchInputProps = {}

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

@@ -0,0 +1,17 @@
+import type { Slot } from "vue"
+import type { Class } from "../vue"
+import type {
+  Props as BaseProps,
+  SwitchInputProps as BaseSwitchInputProps,
+} from "./types"
+
+export type Props = BaseProps & Class
+
+export type SwitchInputProps = BaseSwitchInputProps & Class
+
+export type Slots = {
+  default?: Slot
+  "end-text"?: Slot
+  "icon-checked"?: Slot
+  "icon-unchecked"?: Slot
+}

package/components/Table/Table.astro

@@ -1,14 +1,27 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Table"
-
-const { class: className, variant, ...rest } = Astro.props
----
-
-<table
-  class:list={["ui-table", className, variant && `ui-${variant}`]}
-  {...rest}
->
-  <slot />
-</table>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Table"
+
+const {
+  class: className,
+  density,
+  flush,
+  overflow,
+  stickyHeader,
+  ...rest
+} = Astro.props
+---
+
+<table
+  class:list={[
+    "ui-table",
+    { "ui-flush": flush, "ui-sticky-header": stickyHeader },
+    density && density !== "normal" && `ui-${density}`,
+    overflow && overflow !== "wrap" && `ui-overflow-${overflow}`,
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</table>

package/components/Table/Table.react.tsx

@@ -0,0 +1,24 @@
+import { cx } from "../cx"
+import type { Props } from "./types.react"
+
+export default function Table({
+  className,
+  density,
+  flush,
+  overflow,
+  stickyHeader,
+  ...rest
+}: Props) {
+  return (
+    <table
+      className={cx([
+        "ui-table",
+        { "ui-flush": flush, "ui-sticky-header": stickyHeader },
+        density && density !== "normal" && `ui-${density}`,
+        overflow && overflow !== "wrap" && `ui-overflow-${overflow}`,
+        className,
+      ])}
+      {...rest}
+    />
+  )
+}

package/components/Table/Table.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    density,
+    flush,
+    overflow,
+    stickyHeader,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<table
+  class={[
+    "ui-table",
+    { "ui-flush": flush, "ui-sticky-header": stickyHeader },
+    density && density !== "normal" && `ui-${density}`,
+    overflow && overflow !== "wrap" && `ui-overflow-${overflow}`,
+    className,
+  ]}
+  {...rest}
+>
+  {@render children?.()}
+</table>

package/components/Table/Table.vue

@@ -1,19 +1,20 @@
-<script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
-
-const { variant } = defineProps<Props>()
-defineSlots<Slots>()
-
-defineOptions({
-  inheritAttrs: false,
-})
-</script>
-
-<template>
-  <table
-    :class="['ui-table', variant && `ui-${variant}`, $props.class]"
-    v-bind="$attrs"
-  >
-    <slot></slot>
-  </table>
-</template>
+<script setup lang="ts">
+import type { Props, Slots } from "./types.vue-props"
+
+const { density, flush, overflow, stickyHeader } = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <table
+    :class="[
+      'ui-table',
+      { 'ui-flush': flush, 'ui-sticky-header': stickyHeader },
+      density && density !== 'normal' && `ui-${density}`,
+      overflow && overflow !== 'wrap' && `ui-overflow-${overflow}`,
+      $props.class,
+    ]"
+  >
+    <slot></slot>
+  </table>
+</template>

package/components/Table/TableBody.astro

@@ -0,0 +1,9 @@
+---
+import type { TableBodyProps as Props } from "./types.astro"
+
+const { ...rest } = Astro.props
+---
+
+<tbody {...rest}>
+  <slot />
+</tbody>

package/components/Table/TableBody.react.tsx

@@ -0,0 +1,5 @@
+import type { TableBodyProps as Props } from "./types.react"
+
+export default function TableBody(props: Props) {
+  return <tbody {...props} />
+}

package/components/Table/TableBody.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { TableBodyProps as Props } from "./types.svelte"
+
+  let { children, ...rest }: Props = $props()
+</script>
+
+<tbody {...rest}>
+  {@render children?.()}
+</tbody>

package/components/Table/TableBody.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TableBodyProps as Props, Slots } from "./types.vue-props"
+
+defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <tbody :class="$props.class">
+    <slot></slot>
+  </tbody>
+</template>

package/components/Table/TableCaption.astro

@@ -0,0 +1,9 @@
+---
+import type { TableCaptionProps as Props } from "./types.astro"
+
+const { ...rest } = Astro.props
+---
+
+<caption {...rest}>
+  <slot />
+</caption>

package/components/Table/TableCaption.react.tsx

@@ -0,0 +1,5 @@
+import type { TableCaptionProps as Props } from "./types.react"
+
+export default function TableCaption(props: Props) {
+  return <caption {...props} />
+}

package/components/Table/TableCaption.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { TableCaptionProps as Props } from "./types.svelte"
+
+  let { children, ...rest }: Props = $props()
+</script>
+
+<caption {...rest}>
+  {@render children?.()}
+</caption>

package/components/Table/TableCaption.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TableCaptionProps as Props, Slots } from "./types.vue-props"
+
+defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <caption :class="$props.class">
+    <slot></slot>
+  </caption>
+</template>

package/components/Table/TableCell.astro

@@ -0,0 +1,9 @@
+---
+import type { TableCellProps as Props } from "./types.astro"
+
+const { class: className, numeric, ...rest } = Astro.props
+---
+
+<td class:list={[{ "ui-numeric": numeric }, className]} {...rest}>
+  <slot />
+</td>

package/components/Table/TableCell.react.tsx

@@ -0,0 +1,6 @@
+import { cx } from "../cx"
+import type { TableCellProps as Props } from "./types.react"
+
+export default function TableCell({ className, numeric, ...rest }: Props) {
+  return <td className={cx([{ "ui-numeric": numeric }, className])} {...rest} />
+}

package/components/Table/TableCell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { TableCellProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+    numeric,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<td class={[{ "ui-numeric": numeric }, className]} {...rest}>
+  {@render children?.()}
+</td>

package/components/Table/TableCell.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TableCellProps as Props, Slots } from "./types.vue-props"
+
+const { numeric } = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <td :class="[{ 'ui-numeric': numeric }, $props.class]">
+    <slot></slot>
+  </td>
+</template>

package/components/Table/TableColumn.astro

@@ -0,0 +1,8 @@
+---
+import { mergeStyle } from "../style"
+import type { TableColumnProps as Props } from "./types.astro"
+
+const { style, width, ...rest } = Astro.props
+---
+
+<col style={mergeStyle({ width }, style)} {...rest} />

package/components/Table/TableColumn.react.tsx

@@ -0,0 +1,7 @@
+import type { TableColumnProps as Props } from "./types.react"
+
+export default function TableColumn({ style, width, ...rest }: Props) {
+  return (
+    <col style={width || style ? { width, ...style } : undefined} {...rest} />
+  )
+}