opui-css 5.4.3 → 6.0.0-rc.2

package/components/Table/TableHead.svelte

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

package/components/Table/TableHead.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { classAttrs } from "../cx"
+import type { TableHeadProps as Props, Slots } from "./types.vue-props"
+
+defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <thead v-bind="classAttrs($props.class)">
+    <slot></slot>
+  </thead>
+</template>

package/components/Table/TableHeaderCell.astro

@@ -0,0 +1,19 @@
+---
+import type { TableHeaderCellProps as Props } from "./types.astro"
+
+const { class: className, numeric, sortable, ...rest } = Astro.props
+---
+
+<th
+  class:list={[{ "ui-numeric": numeric }, className]}
+  data-sort={sortable ? "" : undefined}
+  {...rest}
+>
+  {sortable ? (
+    <button type="button">
+      <slot />
+    </button>
+  ) : (
+    <slot />
+  )}
+</th>

package/components/Table/TableHeaderCell.react.tsx

@@ -0,0 +1,21 @@
+import { defined } from "../attrs"
+import { cx } from "../cx"
+import type { TableHeaderCellProps as Props } from "./types.react"
+
+export default function TableHeaderCell({
+  className,
+  numeric,
+  sortable,
+  children,
+  ...rest
+}: Props) {
+  return (
+    <th
+      className={cx([{ "ui-numeric": numeric }, className])}
+      data-sort={sortable ? "" : undefined}
+      {...defined(rest)}
+    >
+      {sortable ? <button type="button">{children}</button> : children}
+    </th>
+  )
+}

package/components/Table/TableHeaderCell.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { defined } from "../attrs"
+  import { classAttrs } from "../cx"
+  import type { TableHeaderCellProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+    numeric,
+    sortable,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<th
+  {...classAttrs([{ "ui-numeric": numeric }, className])}
+  data-sort={sortable ? "" : undefined}
+  {...defined(rest)}
+>
+  {#if sortable}
+    <button type="button">
+      {@render children?.()}
+    </button>
+  {:else}
+    {@render children?.()}
+  {/if}
+</th>

package/components/Table/TableHeaderCell.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type HTMLAttributes, useAttrs } from "vue"
+import { defined } from "../attrs"
+import { classAttrs } from "../cx"
+import type { TableHeaderCellProps as Props, Slots } from "./types.vue-props"
+
+const { numeric, sortable } = defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs() as HTMLAttributes
+</script>
+
+<template>
+  <th
+    :data-sort="sortable ? '' : undefined"
+    v-bind="{
+      ...defined(attrs),
+      ...classAttrs([{ 'ui-numeric': numeric }, $props.class]),
+    }"
+  >
+    <button v-if="sortable" type="button">
+      <slot></slot>
+    </button>
+    <slot v-else></slot>
+  </th>
+</template>

package/components/Table/TableRow.astro

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

package/components/Table/TableRow.react.tsx

@@ -0,0 +1,5 @@
+import type { TableRowProps as Props } from "./types.react"
+
+export default function TableRow({ children, ...rest }: Props) {
+  return <tr {...rest}>{children}</tr>
+}

package/components/Table/TableRow.svelte

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

package/components/Table/TableRow.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { classAttrs } from "../cx"
+import type { TableRowProps as Props, Slots } from "./types.vue-props"
+
+defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <tr v-bind="classAttrs($props.class)">
+    <slot></slot>
+  </tr>
+</template>

package/components/Table/types.astro.ts

@@ -1,16 +1,23 @@
-import type * as Base from "./types"
-import type { HTMLAttributes } from "astro/types"
-
-export type Props = Base.Props & HTMLAttributes<"table">
-
-export type SectionProps = Base.SectionProps &
-  (
-    | HTMLAttributes<"tr">
-    | HTMLAttributes<"tbody">
-    | HTMLAttributes<"thead">
-    | HTMLAttributes<"th">
-    | HTMLAttributes<"td">
-    | HTMLAttributes<"colgroup">
-  )
-
-export type ColumnProps = Base.ColumnProps & HTMLAttributes<"col">
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"table">
+
+export type TableBodyProps = HTMLAttributes<"tbody">
+
+export type TableCaptionProps = HTMLAttributes<"caption">
+
+export type TableCellProps = Base.TableCellProps & HTMLAttributes<"td">
+
+export type TableColumnGroupProps = HTMLAttributes<"colgroup">
+
+export type TableColumnProps = Base.TableColumnProps & HTMLAttributes<"col">
+
+export type TableFootProps = HTMLAttributes<"tfoot">
+
+export type TableHeaderCellProps = Base.TableHeaderCellProps &
+  HTMLAttributes<"th">
+
+export type TableHeadProps = HTMLAttributes<"thead">
+
+export type TableRowProps = HTMLAttributes<"tr">

package/components/Table/types.react.ts

@@ -0,0 +1,24 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props & ComponentProps<"table">
+
+export type TableBodyProps = ComponentProps<"tbody">
+
+export type TableCaptionProps = ComponentProps<"caption">
+
+export type TableCellProps = Base.TableCellProps & ComponentProps<"td">
+
+export type TableColumnGroupProps = ComponentProps<"colgroup">
+
+export type TableColumnProps = Base.TableColumnProps &
+  Omit<ComponentProps<"col">, "children">
+
+export type TableFootProps = ComponentProps<"tfoot">
+
+export type TableHeaderCellProps = Base.TableHeaderCellProps &
+  ComponentProps<"th">
+
+export type TableHeadProps = ComponentProps<"thead">
+
+export type TableRowProps = ComponentProps<"tr">

package/components/Table/types.svelte.ts

@@ -1,11 +1,24 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-
-export type ColumnProps = Base.ColumnProps & SvelteHTMLElements["col"]
-export type Props = Base.Props & SvelteHTMLElements["table"]
-export type SectionProps = Base.SectionProps &
-  (
-    | SvelteHTMLElements["tbody"]
-    | SvelteHTMLElements["tfoot"]
-    | SvelteHTMLElements["thead"]
-  )
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["table"]
+
+export type TableBodyProps = SvelteHTMLElements["tbody"]
+
+export type TableCaptionProps = SvelteHTMLElements["caption"]
+
+export type TableCellProps = Base.TableCellProps & SvelteHTMLElements["td"]
+
+export type TableColumnGroupProps = SvelteHTMLElements["colgroup"]
+
+export type TableColumnProps = Base.TableColumnProps &
+  Omit<SvelteHTMLElements["col"], "children">
+
+export type TableFootProps = SvelteHTMLElements["tfoot"]
+
+export type TableHeaderCellProps = Base.TableHeaderCellProps &
+  SvelteHTMLElements["th"]
+
+export type TableHeadProps = SvelteHTMLElements["thead"]
+
+export type TableRowProps = SvelteHTMLElements["tr"]

package/components/Table/types.ts

@@ -1,9 +1,18 @@
-export type Props = {
-  variant?: "dense" | "spacious"
-}
-
-export type SectionProps = {}
-
-export type ColumnProps = {
-  width?: string
-}
+export type Props = {
+  density?: "dense" | "normal" | "spacious"
+  flush?: boolean
+  overflow?: "scroll" | "wrap"
+  stickyHeader?: boolean
+}
+
+export type TableCellProps = {
+  numeric?: boolean
+}
+
+export type TableColumnProps = {
+  width?: string
+}
+
+export type TableHeaderCellProps = TableCellProps & {
+  sortable?: boolean
+}

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

@@ -0,0 +1,29 @@
+import type { Class, DefaultSlots } from "../vue"
+import type {
+  Props as BaseProps,
+  TableCellProps as BaseTableCellProps,
+  TableColumnProps as BaseTableColumnProps,
+  TableHeaderCellProps as BaseTableHeaderCellProps,
+} from "./types"
+
+export type Props = BaseProps & Class
+
+export type TableBodyProps = Class
+
+export type TableCaptionProps = Class
+
+export type TableCellProps = BaseTableCellProps & Class
+
+export type TableColumnGroupProps = Class
+
+export type TableColumnProps = BaseTableColumnProps & Class
+
+export type TableFootProps = Class
+
+export type TableHeaderCellProps = BaseTableHeaderCellProps & Class
+
+export type TableHeadProps = Class
+
+export type TableRowProps = Class
+
+export type Slots = DefaultSlots

package/components/Tabs/Tabs.astro

@@ -1,24 +1,36 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Tabs"
-
-const { $id } = Astro.locals
-const { class: className, name, ...rest } = Astro.props
-
-const groupName = name || $id("tabs")
-
-const originalGroupName = Astro.locals.tabsGroupName
-Astro.locals.tabsGroupName = groupName
-
-const html = await Astro.slots.render("default")
-
-Astro.locals.tabsGroupName = originalGroupName
----
-
-<div
-  class:list={["ui-tabs", className]}
-  role="tablist"
-  {...rest}
-  set:html={html}
-/>
+---
+import type { Props } from "./types.astro"
+import { createId } from "../id"
+import { tabsContext } from "./context.astro"
+
+export const title = "Tabs"
+
+const idOf = createId(Astro.locals)
+const {
+  class: className,
+  name,
+  orientation,
+  overflow,
+  value,
+  variant,
+  ...rest
+} = Astro.props
+
+const groupName = name || idOf("tabs")
+const html = await tabsContext.provide({ groupName, value }, () =>
+  Astro.slots.render("default"),
+)
+---
+
+<div
+  class:list={[
+    "ui-tabs",
+    orientation === "vertical" && "ui-vertical",
+    overflow && overflow !== "scroll" && `ui-overflow-${overflow}`,
+    variant && variant !== "tonal" && `ui-${variant}`,
+    className,
+  ]}
+  {...rest}
+>
+  <Fragment set:html={html} />
+</div>

package/components/Tabs/Tabs.react.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { useId, useState } from "react"
+import { cx } from "../cx"
+import { TabsContext } from "./context.react"
+import type { Props } from "./types.react"
+
+export default function Tabs({
+  className,
+  defaultValue,
+  name,
+  onValueChange,
+  orientation,
+  overflow,
+  value,
+  variant,
+  children,
+  ...rest
+}: Props) {
+  const uid = useId()
+  const [inner, setInner] = useState(defaultValue)
+  const change = (input: HTMLInputElement) => {
+    const next = input.value
+    if (inner !== undefined) setInner(next)
+    onValueChange?.(next)
+  }
+  const groupName = name || `tabs-${uid}`
+
+  return (
+    <TabsContext value={{ change, groupName, value: value ?? inner }}>
+      <div
+        className={cx([
+          "ui-tabs",
+          orientation === "vertical" && "ui-vertical",
+          overflow && overflow !== "scroll" && `ui-overflow-${overflow}`,
+          variant && variant !== "tonal" && `ui-${variant}`,
+          className,
+        ])}
+        {...rest}
+      >
+        {children}
+      </div>
+    </TabsContext>
+  )
+}

package/components/Tabs/Tabs.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { setTabsContext } from "./context.svelte"
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    name,
+    orientation,
+    overflow,
+    value = $bindable(),
+    variant,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const uid = $props.id()
+  const groupName = $derived(name || `tabs-${uid}`)
+  setTabsContext({
+    change(input) {
+      if (value !== undefined) value = input.value
+    },
+    get groupName() {
+      return groupName
+    },
+    get value() {
+      return value
+    },
+  })
+</script>
+
+<div
+  class={[
+    "ui-tabs",
+    orientation === "vertical" && "ui-vertical",
+    overflow && overflow !== "scroll" && `ui-overflow-${overflow}`,
+    variant && variant !== "tonal" && `ui-${variant}`,
+    className,
+  ]}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/components/Tabs/Tabs.vue

@@ -1,20 +1,34 @@
-<script setup lang="ts">
-import { provide, useId } from "vue"
-import { TabsGroupNameKey, type Props, type Slots } from "./types.d.vue"
-
-const { name } = defineProps<Props>()
-defineSlots<Slots>()
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const groupName = name || useId()
-provide(TabsGroupNameKey, groupName)
-</script>
-
-<template>
-  <div :class="['ui-tabs', $props.class]" role="tablist" v-bind="$attrs">
-    <slot></slot>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed, provide, reactive, useId } from "vue"
+import { TabsKey } from "./context.vue"
+import type { Props, Slots } from "./types.vue-props"
+
+const { name, orientation, overflow, variant } = defineProps<Props>()
+defineSlots<Slots>()
+
+const model = defineModel<string>()
+
+const change = (input: HTMLInputElement) => {
+  if (model.value !== undefined) model.value = input.value
+}
+
+const uid = useId()
+
+const groupName = computed(() => name || `tabs-${uid}`)
+
+provide(TabsKey, reactive({ change, groupName, value: model }))
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui-tabs',
+      orientation === 'vertical' && 'ui-vertical',
+      overflow && overflow !== 'scroll' && `ui-overflow-${overflow}`,
+      variant && variant !== 'tonal' && `ui-${variant}`,
+      $props.class,
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/Tabs/TabsItem.astro

@@ -1,40 +1,30 @@
----
-import type { TabsItemProps as Props } from "./types.astro"
-
-const { $id } = Astro.locals
-const {
-  class: className,
-  name,
-  open,
-  tabId = $id("tab"),
-  panelId = $id("panel"),
-  ...rest
-} = Astro.props
-
-const tabsGroupName = name || Astro.locals.tabsGroupName
-const originalGroupName = Astro.locals.tabsGroupName
-Astro.locals.tabsGroupName = tabsGroupName
-
-const originalTabId = Astro.locals.currentTabId
-const originalPanelId = Astro.locals.currentPanelId
-
-Astro.locals.currentTabId = tabId
-Astro.locals.currentPanelId = panelId
-
-const html = await Astro.slots.render("default")
-
-Astro.locals.currentTabId = originalTabId
-Astro.locals.currentPanelId = originalPanelId
-Astro.locals.tabsGroupName = originalGroupName
----
-
-<input
-  aria-controls={panelId}
-  checked={open}
-  class:list={["ui-tab-input", className]}
-  id={tabId}
-  name={tabsGroupName}
-  type="radio"
-  {...rest}
-/>
-<Fragment set:html={html} />
+---
+import type { TabsItemProps as Props } from "./types.astro"
+import { createId } from "../id"
+import { isSelected } from "../ToggleGroup/selection"
+import { warnGroupedChecked } from "../dev"
+import { tabsContext } from "./context.astro"
+
+const idOf = createId(Astro.locals)
+const { checked, class: className, id, name, value, ...rest } = Astro.props
+
+const parent = tabsContext.get()
+const groupName = name || parent?.groupName || idOf("tabs")
+const tabId = id || idOf("tab")
+const grouped = isSelected(parent?.value, value)
+warnGroupedChecked("TabsItem", grouped, checked, "Tabs")
+const html = await tabsContext.provide({ groupName, tabId }, () =>
+  Astro.slots.render("default"),
+)
+---
+
+<input
+  checked={grouped ?? checked}
+  class:list={["ui-input", className]}
+  id={tabId}
+  name={groupName}
+  type="radio"
+  value={value}
+  {...rest}
+/>
+<Fragment set:html={html} />

package/components/Tabs/TabsItem.react.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import { useId } from "react"
+import { defined } from "../attrs"
+import { cx } from "../cx"
+import { TabsContext, useTabsContext } from "./context.react"
+import { isSelected } from "../ToggleGroup/selection"
+import { warnGroupedChecked } from "../dev"
+import type { TabsItemProps as Props } from "./types.react"
+
+export default function TabsItem({
+  checked,
+  className,
+  defaultChecked,
+  id,
+  name,
+  onChange,
+  value,
+  children,
+  ...rest
+}: Props) {
+  const parent = useTabsContext()
+  const uid = useId()
+  const groupName = name || parent?.groupName || `tabs-${uid}`
+  const tabId = id || `tab-${uid}`
+  const grouped = isSelected(parent?.value, value)
+  warnGroupedChecked("TabsItem", grouped, checked ?? defaultChecked, "Tabs")
+
+  return (
+    <TabsContext value={{ groupName, tabId }}>
+      <input
+        checked={grouped ?? checked}
+        defaultChecked={grouped === undefined ? defaultChecked : undefined}
+        className={cx(["ui-input", className])}
+        id={tabId}
+        name={groupName}
+        type="radio"
+        value={value}
+        {...defined(rest)}
+        onChange={(event) => {
+          parent?.change?.(event.currentTarget)
+          onChange?.(event)
+        }}
+      />
+      {children}
+    </TabsContext>
+  )
+}