opui-css 5.4.3 → 6.0.0-rc.1

package/components/Drawer/Drawer.vue

@@ -1,46 +1,41 @@
-<script setup lang="ts">
-import { useId } from "vue"
-import type { DrawerSlots, Props } from "./types.d.vue"
-
-const {
-  backdrop = "blurred",
-  closedby = "any",
-  id,
-  scrollLock = true,
-  side = "inline-start",
-} = defineProps<Props>()
-const slots = defineSlots<DrawerSlots>()
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const drawerId = id || useId()
-</script>
-
-<template>
-  <dialog
-    :id="drawerId"
-    :class="[
-      'ui-drawer',
-      side && `ui-${side}`,
-      {
-        'ui-backdrop-transparent': backdrop === 'transparent',
-        'ui-scroll-lock': scrollLock,
-      },
-      $props.class,
-    ]"
-    :closedby="closedby"
-    v-bind="$attrs"
-  >
-    <slot v-if="slots.header" name="header"></slot>
-
-    <div v-if="slots.content" class="ui-content">
-      <slot name="content"></slot>
-    </div>
-
-    <slot></slot>
-
-    <slot v-if="slots.footer" name="footer"></slot>
-  </dialog>
-</template>
+<script setup lang="ts">
+import { computed, provide, reactive, useAttrs } from "vue"
+import { warnMissingId } from "../dev"
+import { autoLabelledBy } from "../id"
+import { DrawerKey } from "./context.vue"
+import type { Props, Slots } from "./types.vue-props"
+
+const {
+  backdrop = "blurred",
+  closedby = "any",
+  id,
+  scrollLock,
+  side = "inline-start",
+} = defineProps<Props>()
+defineSlots<Slots>()
+
+warnMissingId("Drawer", id)
+const attrs = useAttrs()
+const labelledBy = computed(() => autoLabelledBy(attrs, `${id}-heading`))
+
+provide(DrawerKey, reactive({ id: computed(() => id), titleId: labelledBy }))
+</script>
+
+<template>
+  <dialog
+    :id="id"
+    :aria-labelledby="labelledBy"
+    :class="[
+      'ui-drawer',
+      {
+        'ui-backdrop-transparent': backdrop === 'transparent',
+        'ui-scroll-lock': scrollLock,
+      },
+      side && side !== 'inline-start' && `ui-${side}`,
+      $props.class,
+    ]"
+    :closedby="closedby"
+  >
+    <slot></slot>
+  </dialog>
+</template>

package/components/Drawer/DrawerContent.astro

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

package/components/Drawer/DrawerContent.react.tsx

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

package/components/Drawer/DrawerContent.svelte

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

package/components/Drawer/DrawerContent.vue

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

package/components/Drawer/DrawerFooter.astro

@@ -1,11 +1,16 @@
----
-import type { DrawerFooterProps as Props } from "./types.astro"
-
-export const title = "Drawer Footer"
-
-const { class: className, ...rest } = Astro.props
----
-
-<div class:list={["ui-footer", className]} {...rest}>
-  <slot />
-</div>
+---
+import type { DrawerFooterProps as Props } from "./types.astro"
+
+const { align, class: className, ...rest } = Astro.props
+---
+
+<div
+  class:list={[
+    "ui-footer",
+    align && align !== "end" && `ui-align-${align}`,
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</div>

package/components/Drawer/DrawerFooter.react.tsx

@@ -0,0 +1,15 @@
+import { cx } from "../cx"
+import type { DrawerFooterProps as Props } from "./types.react"
+
+export default function DrawerFooter({ align, className, ...rest }: Props) {
+  return (
+    <div
+      className={cx([
+        "ui-footer",
+        align && align !== "end" && `ui-align-${align}`,
+        className,
+      ])}
+      {...rest}
+    />
+  )
+}

package/components/Drawer/DrawerFooter.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { DrawerFooterProps as Props } from "./types.svelte"
+
+  let {
+    align,
+    class: className,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<div
+  class={[
+    "ui-footer",
+    align && align !== "end" && `ui-align-${align}`,
+    className,
+  ]}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/components/Drawer/DrawerFooter.vue

@@ -1,16 +1,18 @@
-<script setup lang="ts">
-import type { DrawerFooterProps, DrawerFooterSlots } from "./types.d.vue"
-
-defineProps<DrawerFooterProps>()
-defineSlots<DrawerFooterSlots>()
-
-defineOptions({
-  inheritAttrs: false,
-})
-</script>
-
-<template>
-  <div :class="['ui-footer', $props.class]" v-bind="$attrs">
-    <slot></slot>
-  </div>
-</template>
+<script setup lang="ts">
+import type { DrawerFooterProps as Props, Slots } from "./types.vue-props"
+
+const { align } = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui-footer',
+      align && align !== 'end' && `ui-align-${align}`,
+      $props.class,
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/Drawer/DrawerHeader.astro

@@ -1,27 +1,35 @@
----
-import IconButton from "../IconButton/IconButton.astro"
-
-import type { DrawerHeaderProps as Props } from "./types.astro"
-
-export const title = "Drawer Header"
-
-const { class: className, heading, ...rest } = Astro.props
----
-
-<div class:list={["ui-header", className]} {...rest}>
-  {heading && <span>{heading}</span>}
-  <slot />
-  <IconButton onclick="this.closest('dialog').close()" title="Close">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="32"
-      height="32"
-      viewBox="0 0 32 32"
-    >
-      <path
-        fill="currentColor"
-        d="M26.29 4.293a1 1 0 1 1 1.414 1.414L17.413 16l10.291 10.29a1 1 0 1 1-1.414 1.414L16 17.413L5.707 27.704a1 1 0 0 1-1.414-1.414L14.585 16L4.293 5.707a1 1 0 0 1 1.414-1.414L16 14.584z"
-      ></path>
-    </svg>
-  </IconButton>
-</div>
+---
+import Button from "../Button/Button.astro"
+
+import type { DrawerHeaderProps as Props } from "./types.astro"
+import { drawerContext } from "./context.astro"
+import { closePath } from "./icons"
+
+const {
+  class: className,
+  closeLabel = "Close",
+  commandfor,
+  ...rest
+} = Astro.props
+
+const drawer = drawerContext.get()
+const closeAttrs =
+  commandfor || drawer
+    ? { command: "close", commandfor: commandfor ?? drawer?.id }
+    : { onclick: "this.closest('dialog')?.close()" }
+---
+
+<div class:list={["ui-header", className]} {...rest}>
+  <slot />
+  <Button aria-label={closeLabel} round size="small" {...closeAttrs}>
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+    >
+      <path fill="currentColor" d={closePath}></path>
+    </svg>
+  </Button>
+</div>

package/components/Drawer/DrawerHeader.react.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import Button from "../Button/Button.react"
+import { cx } from "../cx"
+import { useDrawerContext } from "./context.react"
+import { closePath } from "./icons"
+import type { DrawerHeaderProps as Props } from "./types.react"
+
+export default function DrawerHeader({
+  className,
+  closeLabel = "Close",
+  commandfor,
+  children,
+  ...rest
+}: Props) {
+  const drawer = useDrawerContext()
+  const closeProps =
+    commandfor || drawer
+      ? { command: "close", commandfor: commandfor ?? drawer?.id }
+      : {
+          onClick: (event: { currentTarget: HTMLElement }) =>
+            event.currentTarget.closest("dialog")?.close(),
+        }
+
+  return (
+    <div className={cx(["ui-header", className])} {...rest}>
+      {children}
+      <Button aria-label={closeLabel} round size="small" {...closeProps}>
+        <svg
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+        >
+          <path fill="currentColor" d={closePath}></path>
+        </svg>
+      </Button>
+    </div>
+  )
+}

package/components/Drawer/DrawerHeader.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import Button from "../Button/Button.svelte"
+  import { getDrawerContext } from "./context.svelte"
+  import { closePath } from "./icons"
+  import type { DrawerHeaderProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+    closeLabel = "Close",
+    commandfor,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const drawer = getDrawerContext()
+
+  const closeAttrs = $derived(
+    commandfor || drawer
+      ? { command: "close", commandfor: commandfor ?? drawer?.id }
+      : {
+          onclick: (event: MouseEvent) =>
+            (event.currentTarget as HTMLElement).closest("dialog")?.close(),
+        },
+  )
+</script>
+
+<div class={["ui-header", className]} {...rest}>
+  {@render children?.()}
+  <Button aria-label={closeLabel} round size="small" {...closeAttrs}>
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+    >
+      <path fill="currentColor" d={closePath}></path>
+    </svg>
+  </Button>
+</div>

package/components/Drawer/DrawerHeader.vue

@@ -1,36 +1,35 @@
-<script setup lang="ts">
-import IconButton from "../IconButton/IconButton.vue"
-import type { DrawerHeaderProps, DrawerHeaderSlots } from "./types.d.vue"
-
-const { heading } = defineProps<DrawerHeaderProps>()
-defineSlots<DrawerHeaderSlots>()
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const closeDrawer = (event: MouseEvent) => {
-  const target = event.currentTarget as HTMLElement | null
-  target?.closest("dialog")?.close()
-}
-</script>
-
-<template>
-  <div :class="['ui-header', $props.class]" v-bind="$attrs">
-    <span v-if="heading">{{ heading }}</span>
-    <slot></slot>
-    <IconButton title="Close" @click="closeDrawer">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="32"
-        height="32"
-        viewBox="0 0 32 32"
-      >
-        <path
-          fill="currentColor"
-          d="M26.29 4.293a1 1 0 1 1 1.414 1.414L17.413 16l10.291 10.29a1 1 0 1 1-1.414 1.414L16 17.413L5.707 27.704a1 1 0 0 1-1.414-1.414L14.585 16L4.293 5.707a1 1 0 0 1 1.414-1.414L16 14.584z"
-        ></path>
-      </svg>
-    </IconButton>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed, inject } from "vue"
+import Button from "../Button/Button.vue"
+import { DrawerKey } from "./context.vue"
+import { closePath } from "./icons"
+import type { DrawerHeaderProps, Slots } from "./types.vue-props"
+
+const { closeLabel = "Close", commandfor } = defineProps<DrawerHeaderProps>()
+defineSlots<Slots>()
+
+const drawer = inject(DrawerKey, undefined)
+
+const closeAttrs = computed(() =>
+  commandfor || drawer
+    ? { command: "close", commandfor: commandfor ?? drawer?.id }
+    : { onclick: "this.closest('dialog')?.close()" },
+)
+</script>
+
+<template>
+  <div :class="['ui-header', $props.class]">
+    <slot></slot>
+    <Button :aria-label="closeLabel" round size="small" v-bind="closeAttrs">
+      <svg
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+      >
+        <path fill="currentColor" :d="closePath"></path>
+      </svg>
+    </Button>
+  </div>
+</template>

package/components/Drawer/DrawerTitle.astro

@@ -0,0 +1,14 @@
+---
+import type { DrawerTitleProps as Props } from "./types.astro"
+import { drawerContext } from "./context.astro"
+import { warnReplacedId } from "../dev"
+
+const { class: className, id, ...rest } = Astro.props
+
+const drawer = drawerContext.get()
+warnReplacedId("DrawerTitle", "Drawer", id, drawer?.titleId)
+---
+
+<h2 class:list={[className]} id={drawer?.titleId ?? id} {...rest}>
+  <slot />
+</h2>

package/components/Drawer/DrawerTitle.react.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { cx } from "../cx"
+import { warnReplacedId } from "../dev"
+import { useDrawerContext } from "./context.react"
+import type { DrawerTitleProps as Props } from "./types.react"
+
+export default function DrawerTitle({ className, id, ...rest }: Props) {
+  const drawer = useDrawerContext()
+  warnReplacedId("DrawerTitle", "Drawer", id, drawer?.titleId)
+
+  return <h2 className={cx([className])} id={drawer?.titleId ?? id} {...rest} />
+}

package/components/Drawer/DrawerTitle.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { warnReplacedId } from "../dev"
+  import { getDrawerContext } from "./context.svelte"
+  import type { DrawerTitleProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+    id,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const drawer = getDrawerContext()
+
+  untrack(() => warnReplacedId("DrawerTitle", "Drawer", id, drawer?.titleId))
+</script>
+
+<h2 class={[className]} id={drawer?.titleId ?? id} {...rest}>
+  {@render children?.()}
+</h2>

package/components/Drawer/DrawerTitle.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { inject } from "vue"
+import { warnReplacedId } from "../dev"
+import { DrawerKey } from "./context.vue"
+import type { DrawerTitleProps as Props, Slots } from "./types.vue-props"
+
+const { id } = defineProps<Props>()
+defineSlots<Slots>()
+
+const drawer = inject(DrawerKey, undefined)
+warnReplacedId("DrawerTitle", "Drawer", id, drawer?.titleId)
+</script>
+
+<template>
+  <h2 :class="[$props.class]" :id="drawer?.titleId ?? id">
+    <slot></slot>
+  </h2>
+</template>

package/components/Drawer/context.astro.ts

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

package/components/Drawer/context.react.ts

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

package/components/Drawer/context.svelte.ts

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

package/components/Drawer/context.vue.ts

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

package/components/Drawer/icons.ts

@@ -0,0 +1,2 @@
+export const closePath =
+  "M26.29 4.293a1 1 0 1 1 1.414 1.414L17.413 16l10.291 10.29a1 1 0 1 1-1.414 1.414L16 17.413L5.707 27.704a1 1 0 0 1-1.414-1.414L14.585 16L4.293 5.707a1 1 0 0 1 1.414-1.414L16 14.584z"

package/components/Drawer/types.astro.ts

@@ -1,8 +1,12 @@
-import type * as Base from "./types"
-import type { HTMLAttributes } from "astro/types"
-
-export type Props = Base.Props & HTMLAttributes<"dialog">
-
-export type DrawerHeaderProps = Base.DrawerHeaderProps & HTMLAttributes<"div">
-
-export type DrawerFooterProps = Base.DrawerFooterProps & HTMLAttributes<"div">
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"dialog">
+
+export type DrawerContentProps = Base.DrawerContentProps & HTMLAttributes<"div">
+
+export type DrawerFooterProps = Base.DrawerFooterProps & HTMLAttributes<"div">
+
+export type DrawerHeaderProps = Base.DrawerHeaderProps & HTMLAttributes<"div">
+
+export type DrawerTitleProps = Base.DrawerTitleProps & HTMLAttributes<"h2">

package/components/Drawer/types.react.ts

@@ -0,0 +1,13 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props &
+  Omit<ComponentProps<"dialog">, "closedby" | "id">
+
+export type DrawerContentProps = Base.DrawerContentProps & ComponentProps<"div">
+
+export type DrawerFooterProps = Base.DrawerFooterProps & ComponentProps<"div">
+
+export type DrawerHeaderProps = Base.DrawerHeaderProps & ComponentProps<"div">
+
+export type DrawerTitleProps = Base.DrawerTitleProps & ComponentProps<"h2">

package/components/Drawer/types.svelte.ts

@@ -1,15 +1,16 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-import type { Snippet } from "svelte"
-
-type Snippets = Base.Slots<Snippet>
-
-export type Props = Base.Props &
-  Omit<SvelteHTMLElements["dialog"], "id"> &
-  Snippets
-
-export type DrawerFooterProps = Base.DrawerFooterProps &
-  SvelteHTMLElements["div"]
-
-export type DrawerHeaderProps = Base.DrawerHeaderProps &
-  SvelteHTMLElements["div"]
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props &
+  Omit<SvelteHTMLElements["dialog"], "closedby" | "id">
+
+export type DrawerContentProps = Base.DrawerContentProps &
+  SvelteHTMLElements["div"]
+
+export type DrawerFooterProps = Base.DrawerFooterProps &
+  SvelteHTMLElements["div"]
+
+export type DrawerHeaderProps = Base.DrawerHeaderProps &
+  SvelteHTMLElements["div"]
+
+export type DrawerTitleProps = Base.DrawerTitleProps & SvelteHTMLElements["h2"]