opui-css 5.4.2 → 6.0.0-rc.1

package/components/ListItem/ListItem.vue

@@ -1,8 +1,20 @@
 <script setup lang="ts">
 import { computed, useAttrs } from "vue"
-import type { Props, Slots } from "./types.d.vue"
+import { tagAttrs } from "../tag"
+import type { Props, Slots } from "./types.vue-props"
 
-const props = defineProps<Props>()
+const {
+  as,
+  borderTop,
+  color,
+  description,
+  disabled,
+  for: htmlFor,
+  href,
+  inset,
+  label,
+  type,
+} = defineProps<Props>()
 const slots = defineSlots<Slots>()
 const attrs = useAttrs()
 
@@ -10,64 +22,45 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const hasLabel = computed(
-  () =>
-    props.type &&
-    (props.type === "checkbox" ||
-      props.type === "radio" ||
-      props.type === "switch"),
+const hasControl = computed(
+  () => type === "checkbox" || type === "radio" || type === "switch",
+)
+const Tag = computed(() =>
+  hasControl.value ? "label" : (as ?? (href ? "a" : undefined)),
 )
-const labelClass = computed(() => props.type || "")
-const Tag = computed(() => props.as)
 
-const liAttrs = computed(() => (Tag.value ? {} : attrs))
-const innerAttrs = computed(() => (Tag.value ? attrs : {}))
+const liAttrs = computed(() => (hasControl.value || !Tag.value ? attrs : {}))
+const tagProps = computed(() =>
+  hasControl.value
+    ? { class: `ui-${type}`, for: htmlFor }
+    : { ...tagAttrs(Tag.value ?? "", disabled, href), ...attrs },
+)
 </script>
 
 <template>
   <li
     :class="[
       {
-        'ui-border-top': props.borderTop,
-        'ui-inset': props.inset,
+        'ui-border-top': borderTop,
+        'ui-inset': inset,
       },
-      props.class,
+      color && `ui-${color}`,
+      $props.class,
     ]"
     v-bind="liAttrs"
   >
-    <label
-      v-if="hasLabel"
-      :class="labelClass && `ui-${labelClass}`"
-      :for="props.for"
-    >
-      <div v-if="slots.start" class="ui-start">
-        <slot name="start"></slot>
-      </div>
-      <div
-        v-if="slots.text || props.headline || props.description"
-        class="ui-text"
-      >
-        <p v-if="props.headline">{{ props.headline }}</p>
-        <p v-if="props.description">{{ props.description }}</p>
-        <slot name="text"></slot>
-      </div>
-      <div v-if="slots.end" class="ui-end">
-        <slot name="end"></slot>
-      </div>
-      <slot></slot>
-    </label>
-
-    <component :is="Tag" v-else-if="Tag" v-bind="innerAttrs">
+    <component :is="Tag" v-if="Tag" v-bind="tagProps">
       <div v-if="slots.start" class="ui-start">
         <slot name="start"></slot>
       </div>
       <div
-        v-if="props.headline || props.description || slots.text"
+        v-if="label || description || slots.label || slots.description"
         class="ui-text"
       >
-        <p v-if="props.headline">{{ props.headline }}</p>
-        <p v-if="props.description">{{ props.description }}</p>
-        <slot name="text"></slot>
+        <p v-if="label || slots.label">{{ label }}<slot name="label"></slot></p>
+        <p v-if="description || slots.description">
+          {{ description }}<slot name="description"></slot>
+        </p>
         <slot></slot>
       </div>
       <slot v-else></slot>
@@ -81,12 +74,13 @@ const innerAttrs = computed(() => (Tag.value ? attrs : {}))
         <slot name="start"></slot>
       </div>
       <div
-        v-if="props.headline || props.description || slots.text"
+        v-if="label || description || slots.label || slots.description"
         class="ui-text"
       >
-        <p v-if="props.headline">{{ props.headline }}</p>
-        <p v-if="props.description">{{ props.description }}</p>
-        <slot name="text"></slot>
+        <p v-if="label || slots.label">{{ label }}<slot name="label"></slot></p>
+        <p v-if="description || slots.description">
+          {{ description }}<slot name="description"></slot>
+        </p>
         <slot></slot>
       </div>
       <slot v-else></slot>
@@ -94,5 +88,6 @@ const innerAttrs = computed(() => (Tag.value ? attrs : {}))
         <slot name="end"></slot>
       </div>
     </template>
+    <slot name="submenu"></slot>
   </li>
 </template>

package/components/ListItem/types.astro.ts

@@ -3,8 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 
 export type Props = Base.Props &
   (
-    | ({ as?: "li" } & HTMLAttributes<"li">)
-    | ({ as: "a" } & HTMLAttributes<"a">)
+    | ({ as?: never; href?: never } & HTMLAttributes<"li">)
+    | ({ as?: "a"; href: string } & HTMLAttributes<"a">)
     | ({ as: "button" } & HTMLAttributes<"button">)
-    | ({ as: "div" } & HTMLAttributes<"div">)
   )

package/components/ListItem/types.react.ts

@@ -0,0 +1,17 @@
+import type * as Base from "./types"
+import type { ComponentProps, ReactNode } from "react"
+
+type WithoutFor<T> = T extends unknown
+  ? Omit<T, "description" | "for" | "label">
+  : never
+
+// prettier-ignore
+export type Props =
+  WithoutFor<Base.Props> &
+  { htmlFor?: string } &
+  Base.Slots<ReactNode> &
+  (
+    | ({ as?: never; href?: never } & ComponentProps<"li">)
+    | ({ as?: "a"; href: string } & ComponentProps<"a">)
+    | ({ as: "button" } & ComponentProps<"button">)
+  )

package/components/ListItem/types.svelte.ts

@@ -2,13 +2,16 @@ import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
 import type { Snippet } from "svelte"
 
+type WithoutText<T> = T extends unknown
+  ? Omit<T, "description" | "label">
+  : never
+
 // prettier-ignore
 export type Props =
-  Base.Props &
+  WithoutText<Base.Props> &
   Base.Slots<Snippet> &
   (
-    | ({ as?: "li" } & SvelteHTMLElements["li"])
-    | ({ as: "a" } & SvelteHTMLElements["a"])
+    | ({ as?: never; href?: never } & SvelteHTMLElements["li"])
+    | ({ as?: "a"; href: string } & SvelteHTMLElements["a"])
     | ({ as: "button" } & SvelteHTMLElements["button"])
-    | ({ as: "div" } & SvelteHTMLElements["div"])
   )

package/components/ListItem/types.ts

@@ -1,32 +1,35 @@
 export type Props = {
   borderTop?: boolean
-  class?: string
+  color?: "critical"
   description?: string
   for?: string
-  headline?: string
   inset?: boolean
-  type?: "checkbox" | "radio" | "switch" | "button"
+  label?: string
 } & (
   | {
       as?: "a"
+      disabled?: boolean
       href: string
-      disabled?: never
+      type?: never
     }
   | {
-      as?: "button"
-      href?: never
+      as: "button"
       disabled?: boolean
+      href?: never
+      type?: never
     }
   | {
-      as?: string
+      as?: never
+      disabled?: never
       href?: never
+      type?: "checkbox" | "radio" | "switch"
     }
 )
 
 export type Slots<S> = {
   description?: string | S
-  end?: string | S
-  headline?: string | S
-  start?: string | S
-  text?: string | S
+  end?: S
+  label?: string | S
+  start?: S
+  submenu?: S
 }

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

@@ -0,0 +1,14 @@
+import type { Slot } from "vue"
+import type { Class } from "../vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & Class
+
+export type Slots = {
+  default?: Slot
+  description?: Slot
+  end?: Slot
+  label?: Slot
+  start?: Slot
+  submenu?: Slot
+}

package/components/Menu/Menu.astro

@@ -0,0 +1,86 @@
+---
+import type { Props } from "./types.astro"
+import { menuContext } from "./context.astro"
+import { warnMissingId } from "../dev"
+import { tagAttrs } from "../tag"
+
+export const title = "Menu"
+
+const {
+  align,
+  bordered,
+  class: className,
+  dense,
+  id,
+  items,
+  popover = "auto",
+  side,
+  ...rest
+} = Astro.props
+
+warnMissingId("Menu", id)
+const rootId = menuContext.get()?.rootId ?? id
+const html = await menuContext.provide({ rootId }, () =>
+  Astro.slots.render("default"),
+)
+---
+
+<menu
+  class:list={[
+    "ui-menu",
+    {
+      "ui-align-end": align === "end",
+      "ui-bordered": bordered,
+      "ui-dense": dense,
+    },
+    side && side !== "block-end" && `ui-${side}`,
+    className,
+  ]}
+  id={id}
+  popover={popover === "auto" ? "" : popover}
+  {...rest}
+>
+  {
+    items?.map(
+      ({
+        borderTop,
+        color,
+        disabled,
+        href,
+        keepOpen,
+        label,
+        shortcut,
+        ...itemRest
+      }) => {
+        const Tag = href ? "a" : "button"
+        const closes = !href && !keepOpen && !disabled
+
+        return (
+          <li
+            class:list={[
+              { "ui-border-top": borderTop },
+              color && `ui-${color}`,
+            ]}
+          >
+            <Tag
+              {...tagAttrs(Tag, disabled, href)}
+              command={closes ? "hide-popover" : undefined}
+              commandfor={closes ? rootId : undefined}
+              {...itemRest}
+            >
+              <div class="ui-text">
+                <p>{label}</p>
+              </div>
+              {shortcut && (
+                <div class="ui-end">
+                  <kbd>{shortcut}</kbd>
+                </div>
+              )}
+            </Tag>
+          </li>
+        )
+      },
+    )
+  }
+  <Fragment set:html={html} />
+</menu>

package/components/Menu/Menu.react.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import { cx } from "../cx"
+import { warnMissingId } from "../dev"
+import { tagAttrs } from "../tag"
+import { MenuContext, useMenuContext } from "./context.react"
+import type { Props } from "./types.react"
+
+export default function Menu({
+  align,
+  bordered,
+  className,
+  dense,
+  id,
+  items,
+  popover = "auto",
+  side,
+  children,
+  ...rest
+}: Props) {
+  warnMissingId("Menu", id)
+  const rootId = useMenuContext()?.rootId ?? id
+
+  return (
+    <menu
+      className={cx([
+        "ui-menu",
+        {
+          "ui-align-end": align === "end",
+          "ui-bordered": bordered,
+          "ui-dense": dense,
+        },
+        side && side !== "block-end" && `ui-${side}`,
+        className,
+      ])}
+      id={id}
+      popover={popover === "auto" ? "" : popover}
+      {...rest}
+    >
+      {items?.map(
+        (
+          {
+            borderTop,
+            color,
+            disabled,
+            href,
+            keepOpen,
+            label,
+            shortcut,
+            ...itemRest
+          },
+          index,
+        ) => {
+          const Tag = href ? "a" : "button"
+          const closes = !href && !keepOpen && !disabled
+
+          return (
+            <li
+              className={cx([
+                { "ui-border-top": borderTop },
+                color && `ui-${color}`,
+              ])}
+              key={index}
+            >
+              <Tag
+                {...tagAttrs(Tag, disabled, href)}
+                command={closes ? "hide-popover" : undefined}
+                commandfor={closes ? rootId : undefined}
+                {...itemRest}
+              >
+                <div className="ui-text">
+                  <p>{label}</p>
+                </div>
+                {shortcut && (
+                  <div className="ui-end">
+                    <kbd>{shortcut}</kbd>
+                  </div>
+                )}
+              </Tag>
+            </li>
+          )
+        },
+      )}
+      <MenuContext value={{ rootId }}>{children}</MenuContext>
+    </menu>
+  )
+}

package/components/Menu/Menu.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { warnMissingId } from "../dev"
+  import { getMenuContext, setMenuContext } from "./context.svelte"
+  import { tagAttrs } from "../tag"
+  import type { Props } from "./types.svelte"
+
+  let {
+    align,
+    bordered,
+    class: className,
+    dense,
+    id,
+    items,
+    popover = "auto",
+    side,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  untrack(() => warnMissingId("Menu", id))
+  const parent = getMenuContext()
+  const rootId = $derived(parent?.rootId ?? id)
+
+  setMenuContext({
+    get rootId() {
+      return rootId
+    },
+  })
+</script>
+
+<menu
+  class={[
+    "ui-menu",
+    {
+      "ui-align-end": align === "end",
+      "ui-bordered": bordered,
+      "ui-dense": dense,
+    },
+    side && side !== "block-end" && `ui-${side}`,
+    className,
+  ]}
+  {id}
+  popover={popover === "auto" ? "" : popover}
+  {...rest}
+>
+  {#each items ?? [] as { borderTop, color, disabled, href, keepOpen, label, shortcut, ...itemRest }, index (index)}
+    {@const closes = !href && !keepOpen && !disabled}
+    <li class={[{ "ui-border-top": borderTop }, color && `ui-${color}`]}>
+      <svelte:element
+        this={href ? "a" : "button"}
+        {...tagAttrs(href ? "a" : "button", disabled, href)}
+        command={closes ? "hide-popover" : undefined}
+        commandfor={closes ? rootId : undefined}
+        {...itemRest}
+      >
+        <div class="ui-text">
+          <p>{label}</p>
+        </div>
+        {#if shortcut}
+          <div class="ui-end">
+            <kbd>{shortcut}</kbd>
+          </div>
+        {/if}
+      </svelte:element>
+    </li>
+  {/each}
+  {@render children?.()}
+</menu>

package/components/Menu/Menu.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, inject, provide, reactive } from "vue"
+import { warnMissingId } from "../dev"
+import { MenuKey } from "./context.vue"
+import { tagAttrs } from "../tag"
+import type { Props, Slots } from "./types.vue-props"
+
+const {
+  align,
+  bordered,
+  dense,
+  id,
+  items,
+  popover = "auto",
+  side,
+} = defineProps<Props>()
+defineSlots<Slots>()
+
+warnMissingId("Menu", id)
+const parent = inject(MenuKey, undefined)
+const rootId = computed(() => parent?.rootId ?? id)
+provide(MenuKey, reactive({ rootId }))
+</script>
+
+<template>
+  <menu
+    :id="id"
+    :class="[
+      'ui-menu',
+      {
+        'ui-align-end': align === 'end',
+        'ui-bordered': bordered,
+        'ui-dense': dense,
+      },
+      side && side !== 'block-end' && `ui-${side}`,
+      $props.class,
+    ]"
+    :popover="popover === 'auto' ? '' : popover"
+  >
+    <li
+      v-for="(
+        {
+          borderTop,
+          color,
+          disabled,
+          href,
+          keepOpen,
+          label,
+          shortcut,
+          ...itemRest
+        },
+        index
+      ) in items"
+      :key="index"
+      :class="[{ 'ui-border-top': borderTop }, color && `ui-${color}`]"
+    >
+      <component
+        :is="href ? 'a' : 'button'"
+        :command="!href && !keepOpen && !disabled ? 'hide-popover' : undefined"
+        :commandfor="!href && !keepOpen && !disabled ? rootId : undefined"
+        v-bind="{
+          ...tagAttrs(href ? 'a' : 'button', disabled, href),
+          ...itemRest,
+        }"
+      >
+        <div class="ui-text">
+          <p>{{ label }}</p>
+        </div>
+        <div v-if="shortcut" class="ui-end">
+          <kbd>{{ shortcut }}</kbd>
+        </div>
+      </component>
+    </li>
+    <slot></slot>
+  </menu>
+</template>

package/components/Menu/context.astro.ts

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

package/components/Menu/context.react.ts

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

package/components/Menu/context.svelte.ts

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

package/components/Menu/context.vue.ts

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

package/components/Menu/types.astro.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type MenuItem = Base.MenuItem &
+  Omit<
+    HTMLAttributes<"a"> & HTMLAttributes<"button">,
+    keyof Base.MenuItem | "children"
+  >
+
+export type Props = Omit<Base.Props, "items"> & {
+  items?: MenuItem[]
+} & Omit<HTMLAttributes<"menu">, "id" | "popover">

package/components/Menu/types.react.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type MenuItem = Base.MenuItem &
+  Omit<
+    ComponentProps<"a"> & ComponentProps<"button">,
+    keyof Base.MenuItem | "children"
+  >
+
+export type Props = Omit<Base.Props, "items"> & {
+  items?: MenuItem[]
+} & Omit<ComponentProps<"menu">, "id" | "popover">

package/components/Menu/types.svelte.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type MenuItem = Base.MenuItem &
+  Omit<
+    SvelteHTMLElements["a"] & SvelteHTMLElements["button"],
+    keyof Base.MenuItem | "children"
+  >
+
+export type Props = Omit<Base.Props, "items"> & {
+  items?: MenuItem[]
+} & Omit<SvelteHTMLElements["menu"], "id" | "popover">

package/components/Menu/types.ts

@@ -0,0 +1,23 @@
+export type MenuItem = {
+  borderTop?: boolean
+  color?: "critical"
+  disabled?: boolean
+  href?: string
+  keepOpen?: boolean
+  label: string
+  shortcut?: string
+}
+
+export type Props = {
+  align?: "start" | "end"
+  bordered?: boolean
+  dense?: boolean
+  id: string
+  items?: MenuItem[]
+  popover?: "auto" | "manual"
+  side?: "block-end" | "block-start" | "inline-end" | "inline-start"
+}
+
+export type Context = {
+  rootId?: string
+}

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

@@ -0,0 +1,16 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from "vue"
+import type { Class, DefaultSlots } from "../vue"
+import type { MenuItem as BaseMenuItem, Props as BaseProps } from "./types"
+
+export type MenuItem = BaseMenuItem &
+  Omit<
+    AnchorHTMLAttributes & ButtonHTMLAttributes,
+    keyof BaseMenuItem | "children"
+  >
+
+export type Props = Omit<BaseProps, "items"> &
+  Class & {
+    items?: MenuItem[]
+  }
+
+export type Slots = DefaultSlots