opui-css 5.4.2 → 6.0.0-rc.1

package/components/Tabs/TabsPanel.vue

@@ -1,31 +1,12 @@
 <script setup lang="ts">
-import { inject } from "vue"
-import {
-  CurrentPanelIdKey,
-  CurrentTabIdKey,
-  type Slots,
-  type TabsPanelProps,
-} from "./types.d.vue"
+import type { Slots, TabsPanelProps } from "./types.vue-props"
 
-const { panelId, tabId } = defineProps<TabsPanelProps>()
+defineProps<TabsPanelProps>()
 defineSlots<Slots>()
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const currentPanelId = inject(CurrentPanelIdKey, undefined)
-const currentTabId = inject(CurrentTabIdKey, undefined)
 </script>
 
 <template>
-  <div
-    :id="panelId || currentPanelId"
-    :class="['ui-tab-panel', $props.class]"
-    role="tabpanel"
-    :aria-labelledby="tabId || currentTabId"
-    v-bind="$attrs"
-  >
+  <div :class="['ui-panel', $props.class]">
     <slot></slot>
   </div>
 </template>

package/components/Tabs/context.astro.ts

@@ -0,0 +1,4 @@
+import { createContext } from "../context.astro"
+import type { Context } from "./types"
+
+export const tabsContext = createContext<Context>()

package/components/Tabs/context.react.ts

@@ -0,0 +1,8 @@
+"use client"
+
+import { createContext, useContext } from "react"
+import type { Context } from "./types"
+
+export const TabsContext = createContext<Context | undefined>(undefined)
+
+export const useTabsContext = () => useContext(TabsContext)

package/components/Tabs/context.svelte.ts

@@ -0,0 +1,7 @@
+import { getContext, setContext } from "svelte"
+import type { Context } from "./types"
+
+const key = Symbol()
+
+export const getTabsContext = () => getContext<Context | undefined>(key)
+export const setTabsContext = (context: Context) => setContext(key, context)

package/components/Tabs/context.vue.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from "vue"
+import type { Context } from "./types"
+
+export const TabsKey = Symbol() as InjectionKey<Context>

package/components/Tabs/types.astro.ts

@@ -1,11 +1,13 @@
 import type * as Base from "./types"
 import type { HTMLAttributes } from "astro/types"
 
-export type Props = Base.Props & HTMLAttributes<"div">
+export type Props = Base.Props & {
+  value?: string
+} & HTMLAttributes<"div">
 
 export type TabsItemProps = Base.TabsItemProps &
   Omit<HTMLAttributes<"input">, "type">
 
-export type TabsTabProps = Base.TabsTabProps & HTMLAttributes<"label">
-
 export type TabsPanelProps = Base.TabsPanelProps & HTMLAttributes<"div">
+
+export type TabsLabelProps = Base.TabsLabelProps & HTMLAttributes<"label">

package/components/Tabs/types.react.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props & {
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  value?: string
+} & Omit<ComponentProps<"div">, "defaultValue">
+export type TabsItemProps = Base.TabsItemProps &
+  Omit<ComponentProps<"input">, "type">
+export type TabsPanelProps = Base.TabsPanelProps & ComponentProps<"div">
+export type TabsLabelProps = Base.TabsLabelProps & ComponentProps<"label">

package/components/Tabs/types.svelte.ts

@@ -1,10 +1,10 @@
 import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
 
-export type Props = Base.Props & SvelteHTMLElements["div"]
-export type TabsItemProps = Base.TabsItemProps & SvelteHTMLElements["input"]
+export type Props = Base.Props & {
+  value?: string
+} & SvelteHTMLElements["div"]
+export type TabsItemProps = Base.TabsItemProps &
+  Omit<SvelteHTMLElements["input"], "type">
 export type TabsPanelProps = Base.TabsPanelProps & SvelteHTMLElements["div"]
-export type TabsTabProps = Base.TabsTabProps &
-  Omit<SvelteHTMLElements["label"], "for"> & {
-    for?: string
-  }
+export type TabsLabelProps = Base.TabsLabelProps & SvelteHTMLElements["label"]

package/components/Tabs/types.ts

@@ -1,19 +1,21 @@
 export type Props = {
   name?: string
+  overflow?: "scroll" | "wrap"
+  variant?: "filled" | "line" | "outlined" | "tonal"
 }
 
 export type TabsItemProps = {
+  checked?: boolean
   name?: string
-  open?: boolean
-  panelId?: string
-  tabId?: string
 }
 
-export type TabsTabProps = {
-  tabId?: string
-}
+export type TabsPanelProps = {}
+
+export type TabsLabelProps = {}
 
-export type TabsPanelProps = {
-  panelId?: string
+export type Context = {
+  change?: (input: HTMLInputElement) => void
+  groupName?: string
   tabId?: string
+  value?: string
 }

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

@@ -0,0 +1,25 @@
+import type { InputHTMLAttributes, LabelHTMLAttributes } from "vue"
+import type { Class, DefaultSlots } from "../vue"
+import type {
+  Props as BaseProps,
+  TabsItemProps as BaseTabsItemProps,
+  TabsPanelProps as BaseTabsPanelProps,
+  TabsLabelProps as BaseTabsLabelProps,
+} from "./types"
+
+export type Props = BaseProps & Class
+
+export type TabsItemProps = BaseTabsItemProps &
+  Class & {
+    id?: InputHTMLAttributes["id"]
+    value?: InputHTMLAttributes["value"]
+  }
+
+export type TabsPanelProps = BaseTabsPanelProps & Class
+
+export type TabsLabelProps = BaseTabsLabelProps &
+  Class & {
+    for?: LabelHTMLAttributes["for"]
+  }
+
+export type Slots = DefaultSlots

package/components/TextField/TextField.astro

@@ -1,37 +1,31 @@
 ---
 import type { Props } from "./types.astro"
+import { fieldGroupContext } from "../FieldGroup/context.astro"
 
 export const title = "Text Field"
 
 const {
+  "aria-invalid": ariaInvalid,
   autoFit,
   class: className,
-  error,
-  description,
-  disabled,
   endText,
-  filled,
+  error,
+  hideLabel,
   id,
+  inputmode,
   label,
-  list,
-  max,
-  min,
   name,
-  placeholder,
-  required,
-  small,
+  pattern,
+  size,
   spread,
   startText,
-  step,
+  style,
   type = "text",
-  value,
+  variant,
   ...rest
 } = Astro.props
 
-const startTextValue = description || startText
-const { $id, currentFieldName } = Astro.locals
-const fieldId = id || $id("text-field")
-const fieldName = name || currentFieldName
+const field = fieldGroupContext.get()
 ---
 
 <label
@@ -39,84 +33,74 @@ const fieldName = name || currentFieldName
     "ui-text-field",
     {
       "ui-auto-fit": autoFit,
-      "ui-filled": filled,
+      "ui-filled": variant === "filled",
       "ui-spread": spread,
-      "ui-small": small,
     },
+    size && size !== "medium" && `ui-${size}`,
     className,
   ]}
-  data-invalid={error || undefined}
-  {...rest}
+  style={style}
 >
   {
     (label || Astro.slots.has("label")) && (
-      <span class="ui-label">
+      <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}>
         {label}
         <slot name="label" />
       </span>
     )
   }
   {
-    (startTextValue || Astro.slots.has("description")) && (
+    (startText || Astro.slots.has("start-text")) && (
       <span class="ui-start-text">
-        {startTextValue}
-        <slot name="description" />
+        {startText}
+        <slot name="start-text" />
       </span>
     )
   }
   <span class="ui-field">
     <input
-      disabled={disabled}
-      id={fieldId}
-      inputmode={type === "numeric" ? "numeric" : undefined}
-      list={list}
-      max={max}
-      min={min}
-      name={fieldName}
-      pattern={type === "numeric" ? "[0-9]*" : undefined}
-      placeholder={placeholder}
-      required={required}
-      step={step}
+      {...rest}
+      aria-invalid={error ? "true" : ariaInvalid}
+      id={id}
+      inputmode={inputmode ?? (type === "numeric" ? "numeric" : undefined)}
+      name={name ?? field?.name}
+      pattern={pattern ?? (type === "numeric" ? "[0-9]*" : undefined)}
       type={type === "numeric" ? "text" : type}
-      value={value}
     />
     {
-      Astro.slots.has("prefix") && (
-        <span class="ui-prefix">
-          <slot name="prefix" />
+      Astro.slots.has("start") && (
+        <span class="ui-start">
+          <slot name="start" />
         </span>
       )
     }
     {
-      Astro.slots.has("suffix") && (
-        <span class="ui-suffix">
-          <slot name="suffix" />
+      Astro.slots.has("end") && (
+        <span class="ui-end">
+          <slot name="end" />
         </span>
       )
     }
     {
-      Astro.slots.has("header") && (
-        <span class="ui-header">
-          <slot name="header" />
+      Astro.slots.has("top") && (
+        <span class="ui-top">
+          <slot name="top" />
         </span>
       )
     }
     {
-      Astro.slots.has("footer") && (
-        <span class="ui-footer">
-          <slot name="footer" />
+      Astro.slots.has("bottom") && (
+        <span class="ui-bottom">
+          <slot name="bottom" />
         </span>
       )
     }
   </span>
   {
-    (endText ||
-      Astro.slots.has("end-text") ||
-      Astro.slots.has("supporting-text")) && (
+    (endText || Astro.slots.has("end-text")) && (
       <span class="ui-end-text">
         {endText}
         <slot name="end-text" />
-        <slot name="supporting-text" />
       </span>
     )
   }

package/components/TextField/TextField.react.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import { cx } from "../cx"
+import { useFieldGroupContext } from "../FieldGroup/context.react"
+import type { Props } from "./types.react"
+
+export default function TextField({
+  autoFit,
+  className,
+  error,
+  hideLabel,
+  id,
+  name,
+  size,
+  spread,
+  style,
+  type = "text",
+  variant,
+  children,
+  bottom,
+  end,
+  endText,
+  label,
+  start,
+  startText,
+  top,
+  ...rest
+}: Props) {
+  const field = useFieldGroupContext()
+
+  return (
+    <label
+      className={cx([
+        "ui-text-field",
+        {
+          "ui-auto-fit": autoFit,
+          "ui-filled": variant === "filled",
+          "ui-spread": spread,
+        },
+        size && size !== "medium" && `ui-${size}`,
+        className,
+      ])}
+      style={style}
+    >
+      {label && (
+        <span className={hideLabel ? "ui-sr-only" : "ui-label"}>{label}</span>
+      )}
+      {startText && <span className="ui-start-text">{startText}</span>}
+      <span className="ui-field">
+        <input
+          {...rest}
+          aria-invalid={error ? "true" : rest["aria-invalid"]}
+          id={id}
+          inputMode={
+            rest.inputMode ?? (type === "numeric" ? "numeric" : undefined)
+          }
+          name={name ?? field?.name}
+          pattern={rest.pattern ?? (type === "numeric" ? "[0-9]*" : undefined)}
+          type={type === "numeric" ? "text" : type}
+        />
+        {start && <span className="ui-start">{start}</span>}
+        {end && <span className="ui-end">{end}</span>}
+        {top && <span className="ui-top">{top}</span>}
+        {bottom && <span className="ui-bottom">{bottom}</span>}
+      </span>
+      {endText && <span className="ui-end-text">{endText}</span>}
+      {children}
+    </label>
+  )
+}

package/components/TextField/TextField.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { content } from "../content.svelte"
+  import { getFieldGroupContext } from "../FieldGroup/context.svelte"
+  import type { Props } from "./types.svelte"
+
+  let {
+    autoFit,
+    class: className,
+    error,
+    hideLabel,
+    id,
+    name,
+    size,
+    spread,
+    style,
+    type = "text",
+    value = $bindable(),
+    variant,
+
+    // Snippets
+    children,
+    bottom,
+    end,
+    endText,
+    label,
+    start,
+    startText,
+    top,
+    ...rest
+  }: Props = $props()
+
+  const field = getFieldGroupContext()
+</script>
+
+<label
+  class={[
+    "ui-text-field",
+    {
+      "ui-auto-fit": autoFit,
+      "ui-filled": variant === "filled",
+      "ui-spread": spread,
+    },
+    size && size !== "medium" && `ui-${size}`,
+    className,
+  ]}
+  {style}
+>
+  {#if label}
+    <span class={[hideLabel ? "ui-sr-only" : "ui-label"]}
+      >{@render content(label)}</span
+    >
+  {/if}
+  {#if startText}
+    <span class="ui-start-text">{@render content(startText)}</span>
+  {/if}
+  <span class="ui-field">
+    <input
+      {...rest}
+      aria-invalid={error ? "true" : rest["aria-invalid"]}
+      bind:value
+      {id}
+      inputmode={rest.inputmode ?? (type === "numeric" ? "numeric" : undefined)}
+      name={name ?? field?.name}
+      pattern={rest.pattern ?? (type === "numeric" ? "[0-9]*" : undefined)}
+      type={type === "numeric" ? "text" : type}
+    />
+    {#if start}
+      <span class="ui-start">{@render content(start)}</span>
+    {/if}
+    {#if end}
+      <span class="ui-end">{@render content(end)}</span>
+    {/if}
+    {#if top}
+      <span class="ui-top">{@render content(top)}</span>
+    {/if}
+    {#if bottom}
+      <span class="ui-bottom">{@render content(bottom)}</span>
+    {/if}
+  </span>
+  {#if endText}
+    <span class="ui-end-text">{@render content(endText)}</span>
+  {/if}
+  {@render children?.()}
+</label>

package/components/TextField/TextField.vue

@@ -1,19 +1,40 @@
 <script setup lang="ts">
-import { useId, computed } from "vue"
-import type { Props, Slots } from "./types.d.vue"
+import { computed, inject, type InputHTMLAttributes, useAttrs } from "vue"
+import { useInputAttrs } from "../vue"
+import type { Props, Slots } from "./types.vue-props"
+import { FieldGroupKey } from "../FieldGroup/context.vue"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<Props>(), {
-  type: "text",
-})
+const {
+  autoFit,
+  endText,
+  error,
+  hideLabel,
+  id,
+  label,
+  size,
+  spread,
+  startText,
+  type = "text",
+  value,
+  variant,
+} = defineProps<Props>()
 defineSlots<Slots>()
+const attrs = useAttrs() as InputHTMLAttributes
+const inputAttrs = useInputAttrs()
 const modelValue = defineModel<string | number>()
 
-const fieldId = props.id || useId()
-const startTextValue = computed(() => props.description || props.startText)
+const model = computed({
+  get: () => modelValue.value ?? value,
+  set: (value) => {
+    modelValue.value = value
+  },
+})
+
+const field = inject(FieldGroupKey, undefined)
 </script>
 
 <template>
@@ -21,52 +42,51 @@ const startTextValue = computed(() => props.description || props.startText)
     :class="[
       'ui-text-field',
       {
-        'ui-auto-fit': props.autoFit,
-        'ui-filled': props.filled,
-        'ui-spread': props.spread,
-        'ui-small': props.small,
+        '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">
-      <slot name="label">{{ props.label }}</slot>
+    <span
+      v-if="label || $slots.label"
+      :class="[hideLabel ? 'ui-sr-only' : 'ui-label']"
+    >
+      {{ label }}<slot name="label"></slot>
     </span>
 
-    <span v-if="startTextValue || $slots.description" class="ui-start-text">
-      <slot name="description">{{ startTextValue }}</slot>
+    <span v-if="startText || $slots['start-text']" class="ui-start-text">
+      {{ startText }}<slot name="start-text"></slot>
     </span>
 
     <span class="ui-field">
       <input
-        :id="fieldId"
-        :inputmode="props.type === 'numeric' ? 'numeric' : undefined"
-        :pattern="props.type === 'numeric' ? '[0-9]*' : undefined"
-        :type="props.type === 'numeric' ? 'text' : props.type"
-        v-bind="$attrs"
-        v-model="modelValue"
+        v-bind="inputAttrs"
+        v-model="model"
+        :aria-invalid="error ? 'true' : attrs['aria-invalid']"
+        :id="id"
+        :inputmode="
+          attrs.inputmode ?? (type === 'numeric' ? 'numeric' : undefined)
+        "
+        :name="attrs.name ?? field?.name"
+        :pattern="attrs.pattern ?? (type === 'numeric' ? '[0-9]*' : undefined)"
+        :type="type === 'numeric' ? 'text' : type"
       />
-      <span class="ui-prefix" v-if="$slots.prefix"
-        ><slot name="prefix"></slot
+      <span class="ui-start" v-if="$slots.start"
+        ><slot name="start"></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 class="ui-end" v-if="$slots.end"><slot name="end"></slot></span>
+      <span class="ui-top" v-if="$slots.top"><slot name="top"></slot></span>
+      <span class="ui-bottom" v-if="$slots.bottom"
+        ><slot name="bottom"></slot
       ></span>
     </span>
 
-    <span
-      v-if="props.endText || $slots['end-text'] || $slots['supporting-text']"
-      class="ui-end-text"
-    >
-      <slot name="end-text">{{ props.endText }}</slot
-      ><slot name="supporting-text"></slot>
+    <span v-if="endText || $slots['end-text']" class="ui-end-text">
+      {{ endText }}<slot name="end-text"></slot>
     </span>
 
     <slot></slot>

package/components/TextField/types.astro.ts

@@ -6,12 +6,10 @@ type InputProps = {
   type?: HTMLAttributes<"input">["type"] | "numeric"
 } &
   // include the rest
-  Pick<HTMLAttributes<"input">, Exclude<Base.InputProps, "type">>
+  Omit<HTMLAttributes<"input">, "size" | "type">
 
 export type Props =
   // Unique component props
   Base.Props &
-    // All html label attributes
-    HTMLAttributes<"label"> &
     // Input attributes
     InputProps

package/components/TextField/types.react.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { ComponentProps, ReactNode } from "react"
+
+type InputProps = {
+  type?: ComponentProps<"input">["type"] | "numeric"
+} & Omit<ComponentProps<"input">, "size" | "type">
+
+type Slots = Base.Slots<ReactNode>
+
+export type Props = Omit<Base.Props, keyof Slots> &
+  Omit<InputProps, keyof Slots> &
+  Slots

package/components/TextField/types.svelte.ts

@@ -7,16 +7,14 @@ type InputProps = {
   type?: SvelteHTMLElements["input"]["type"] | "numeric"
 } &
   // include the rest
-  Pick<SvelteHTMLElements["input"], Exclude<Base.InputProps, "type">>
+  Omit<SvelteHTMLElements["input"], "size" | "type">
 
 type Snippets = Base.Slots<Snippet>
 
 export type Props =
   // Unique component props, except snippets
   Omit<Base.Props, keyof Snippets> &
-    // All html label attributes, (except prefix)
-    Omit<SvelteHTMLElements["label"], "prefix"> &
     // Input attributes
-    InputProps &
+    Omit<InputProps, keyof Snippets> &
     // Snippets
     Snippets