opui-css 5.1.2 → 5.3.0

package/components/Drawer/DrawerFooter.vue

@@ -0,0 +1,16 @@
+<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>

package/components/Drawer/DrawerHeader.astro

@@ -1,11 +1,7 @@
 ---
 import IconButton from "../IconButton/IconButton.astro"
 
-type Props = {
-  [key: string]: any
-  class?: string
-  heading?: string
-}
+import type { DrawerHeaderProps as Props } from "./types.astro"
 
 export const title = "Drawer Header"
 

package/components/Drawer/DrawerHeader.vue

@@ -0,0 +1,36 @@
+<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>

package/components/Drawer/types.astro.ts

@@ -0,0 +1,8 @@
+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">

package/components/Drawer/types.d.vue.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type {
+  DrawerFooterProps as BaseDrawerFooterProps,
+  DrawerHeaderProps as BaseDrawerHeaderProps,
+  Props as BaseProps,
+  Slots as BaseSlots,
+} from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type DrawerHeaderProps = BaseDrawerHeaderProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type DrawerFooterProps = BaseDrawerFooterProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type DrawerSlots = BaseSlots<Slot> & {
+  default?: Slot
+}
+
+export type DrawerHeaderSlots = {
+  default?: Slot
+}
+
+export type DrawerFooterSlots = {
+  default?: Slot
+}

package/components/Drawer/types.solid.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Omit<JSX.DialogHtmlAttributes<HTMLDialogElement>, "id"> &
+  Partial<Base.Slots<JSX.Element>>
+
+export type DrawerFooterProps = Base.DrawerFooterProps &
+  JSX.HTMLAttributes<HTMLDivElement>
+
+export type DrawerHeaderProps = Base.DrawerHeaderProps &
+  JSX.HTMLAttributes<HTMLDivElement>

package/components/Drawer/types.svelte.ts

@@ -0,0 +1,15 @@
+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"]

package/components/Drawer/types.ts

@@ -0,0 +1,20 @@
+export type Props = {
+  backdrop?: "transparent" | "blurred"
+  closedby?: "any" | "closerequest" | "none"
+  id?: string
+  scrollLock?: boolean
+  side?: "inline-start" | "inline-end" | "block-start" | "block-end"
+}
+
+export type DrawerHeaderProps = {
+  heading?: string
+}
+
+export type DrawerFooterProps = {}
+
+export type Slots<S> = {
+  children?: S
+  content?: S
+  footer?: S
+  header?: S
+}

package/components/FieldDescription/FieldDescription.astro

@@ -1,13 +1,9 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-}
+import type { Props } from "./types.astro"
 
 export const title = "Field Description"
 
 const { class: className, ...rest } = Astro.props
 ---
 
-<!-- prettier-ignore -->
 <p class:list={["ui-field-description", className]} {...rest}><slot /></p>

package/components/FieldDescription/FieldDescription.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const props = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <p :class="['ui-field-description', props.class]" v-bind="$attrs">
+    <slot></slot>
+  </p>
+</template>

package/components/FieldDescription/types.astro.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"p">

package/components/FieldDescription/types.d.vue.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/FieldDescription/types.solid.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  JSX.HTMLAttributes<any> & { as?: keyof JSX.IntrinsicElements }

package/components/FieldDescription/types.svelte.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["p"]

package/components/FieldDescription/types.ts

@@ -0,0 +1 @@
+export type Props = {}

package/components/FieldGroup/FieldGroup.astro

@@ -1,15 +1,8 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  direction?: "row" | "column"
-  name?: string
-}
-
+import type { Props } from "./types.astro"
 export const title = "Field Group"
 
 const { class: className, direction, name, ...rest } = Astro.props
-
 const originalName = Astro.locals.currentFieldName
 if (name) {
   Astro.locals.currentFieldName = name

package/components/FieldGroup/FieldGroup.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { provide } from "vue"
+import { CurrentFieldNameKey, type Props, type Slots } from "./types.d.vue"
+
+const props = defineProps<Props>()
+defineSlots<Slots>()
+
+if (props.name) {
+  provide(CurrentFieldNameKey, props.name)
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui-field-group',
+      props.direction && `ui-${props.direction}`,
+      props.class,
+    ]"
+    v-bind="$attrs"
+    role="group"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/FieldGroup/types.astro.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"div">

package/components/FieldGroup/types.d.vue.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, InjectionKey, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}
+
+export const CurrentFieldNameKey = Symbol() as InjectionKey<string>

package/components/FieldGroup/types.solid.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  JSX.HTMLAttributes<any> & { as?: keyof JSX.IntrinsicElements }

package/components/FieldGroup/types.svelte.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["div"]

package/components/FieldGroup/types.ts

@@ -0,0 +1,4 @@
+export type Props = {
+  direction?: "row" | "column"
+  name?: string
+}

package/components/FieldLegend/FieldLegend.astro

@@ -1,15 +1,11 @@
 ---
-type Props = {
-  [key: string]: any
-  as?: "legend" | "p" | string
-  class?: string
-}
-
+import type { Props } from "./types.astro"
 export const title = "Field Legend"
 
 const { as: Tag = "legend", class: className, ...rest } = Astro.props
 const isLegend = Tag === "legend"
 ---
 
-<!-- prettier-ignore -->
-<Tag class:list={[{ "ui-legend": !isLegend }, className]} {...rest}><slot /></Tag>
+<Tag class:list={[{ "ui-legend": !isLegend }, className]} {...rest}
+  ><slot /></Tag
+>

package/components/FieldLegend/FieldLegend.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "legend",
+})
+defineSlots<Slots>()
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :class="[{ 'ui-legend': props.as !== 'legend' }, props.class]"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </component>
+</template>

package/components/FieldLegend/types.astro.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props =
+  | (Base.Props & { as?: "legend" } & HTMLAttributes<"legend">)
+  | (Base.Props & { as: "p" } & HTMLAttributes<"p">)

package/components/FieldLegend/types.d.vue.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  as?: string
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/FieldLegend/types.solid.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  JSX.HTMLAttributes<any> & { as?: keyof JSX.IntrinsicElements }

package/components/FieldLegend/types.svelte.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+// prettier-ignore
+export type Props<T extends keyof SvelteHTMLElements= "legend"> =
+  | (Base.Props & { as?: T } & SvelteHTMLElements[T])

package/components/FieldLegend/types.ts

@@ -0,0 +1 @@
+export type Props = {}

package/components/FieldSet/FieldSet.astro

@@ -1,9 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  as?: "fieldset" | "div" | string
-  class?: string
-}
+import type { Props } from "./types.astro"
 
 export const title = "Field Set"
 

package/components/FieldSet/FieldSet.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "fieldset",
+})
+defineSlots<Slots>()
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :class="['ui-fieldset', props.class]"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </component>
+</template>

package/components/FieldSet/types.astro.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props =
+  | (Base.Props & { as?: "fieldset" } & HTMLAttributes<"fieldset">)
+  | (Base.Props & { as: "div" } & HTMLAttributes<"div">)

package/components/FieldSet/types.d.vue.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  as?: string
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/FieldSet/types.solid.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  JSX.HTMLAttributes<any> & { as?: keyof JSX.IntrinsicElements }

package/components/FieldSet/types.svelte.ts

@@ -0,0 +1,8 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+// prettier-ignore
+export type Props<T extends keyof SvelteHTMLElements= "fieldset"> =
+  | (Base.Props & { as?: T } & SvelteHTMLElements[T])
+
+export type Context = Base.Context

package/components/FieldSet/types.ts

@@ -0,0 +1,5 @@
+export type Props = {}
+export type Context = {
+  name?: string | null
+  description?: string | null
+}

package/components/Form/Form.astro

@@ -1,10 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  as?: "form" | "div" | string
-  class?: string
-}
-
+import type { Props } from "./types.astro"
 export const title = "Form"
 
 const { as: Tag = "form", class: className, ...rest } = Astro.props

package/components/Form/Form.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "form",
+})
+defineSlots<Slots>()
+</script>
+
+<template>
+  <component :is="props.as" :class="['ui-form', props.class]" v-bind="$attrs">
+    <slot></slot>
+  </component>
+</template>

package/components/Form/types.astro.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props =
+  | (Base.Props & { as?: "form" } & HTMLAttributes<"form">)
+  | (Base.Props & { as: "div" } & HTMLAttributes<"div">)

package/components/Form/types.d.vue.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  as?: string
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/Form/types.solid.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  JSX.HTMLAttributes<any> & { as?: keyof JSX.IntrinsicElements }

package/components/Form/types.svelte.ts

@@ -0,0 +1,7 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+// prettier-ignore
+export type Props<T extends keyof SvelteHTMLElements = keyof SvelteHTMLElements> =
+  | (Base.Props & { as?: "form" } & SvelteHTMLElements['form'])
+  | (Base.Props & { as: T } & SvelteHTMLElements[T])

package/components/Form/types.ts

@@ -0,0 +1 @@
+export type Props = {}

package/components/IconButton/IconButton.astro

@@ -1,26 +1,24 @@
 ---
-type Props = {
-  [key: string]: any
-  as?: "a" | "button" | string
-  class?: string
-  color?: "critical" | "primary"
-  href?: string
-  size?: "small"
-  variant?: "outlined" | "tonal" | "filled"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Icon Button"
 
-const {
-  as: Tag = Astro.props.href ? "a" : "button",
-  class: className,
-  color,
-  href,
-  size,
-  variant,
-  ...rest
-} = Astro.props
+const props = Astro.props as Props
+const { as, class: className, color, size, variant, href, ...rest } = props
+
+const Tag = as || (href ? "a" : "button")
 ---
 
-<!-- prettier-ignore -->
-<Tag class:list={["ui-icon-button", size && `ui-${size}`, variant && `ui-${variant}`, color && `ui-${color}`, className]} href={href} {...rest}><slot /></Tag>
+<Tag
+  class:list={[
+    "ui-icon-button",
+    size && `ui-${size}`,
+    variant && `ui-${variant}`,
+    color && `ui-${color}`,
+    className,
+  ]}
+  href={href}
+  {...rest as any}
+>
+  <slot />
+</Tag>

package/components/IconButton/IconButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const { as, color, href, size, variant } = defineProps<Props>()
+defineSlots<Slots>()
+
+const Tag = as || (href ? "a" : "button")
+</script>
+
+<template>
+  <component
+    :is="Tag"
+    :class="[
+      'ui-icon-button',
+      size && `ui-${size}`,
+      variant && `ui-${variant}`,
+      color && `ui-${color}`,
+      $props.class,
+    ]"
+    :href="href"
+  >
+    <slot></slot>
+  </component>
+</template>

package/components/IconButton/types.astro.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props =
+  | (Base.Props & { as?: "button" } & HTMLAttributes<"button">)
+  | (Base.Props & { as?: "a" } & HTMLAttributes<"a">)

package/components/IconButton/types.d.vue.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/IconButton/types.solid.ts

@@ -0,0 +1,8 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  (
+    | ({ as?: "button" } & JSX.ButtonHTMLAttributes<HTMLButtonElement>)
+    | ({ as: "a" } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>)
+  )

package/components/IconButton/types.svelte.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props =
+  | (Base.Props & { as?: "button" } & SvelteHTMLElements["button"])
+  | (Base.Props & { as?: "a" } & SvelteHTMLElements["a"])