opui-css 5.4.1 → 5.4.3

package/components/Drawer/DrawerHeader.vue

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

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

@@ -1,31 +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
-}
+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

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

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

@@ -1,20 +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
-}
+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,9 +1,9 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Field Description"
-
-const { class: className, ...rest } = Astro.props
----
-
-<p class:list={["ui-field-description", className]} {...rest}><slot /></p>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Field Description"
+
+const { class: className, ...rest } = Astro.props
+---
+
+<p class:list={["ui-field-description", className]} {...rest}><slot /></p>

package/components/FieldDescription/FieldDescription.vue

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

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

@@ -1,10 +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
-}
+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

@@ -1,5 +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 }
+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

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

package/components/FieldDescription/types.ts

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

package/components/FieldGroup/FieldGroup.astro

@@ -1,24 +1,24 @@
----
-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
-}
-
-let html = ""
-try {
-  html = await Astro.slots.render("default")
-} finally {
-  Astro.locals.currentFieldName = originalName
-}
----
-
-<div
-  class:list={["ui-field-group", direction && `ui-${direction}`, className]}
-  {...rest}
-  role="group"
-  set:html={html}
-/>
+---
+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
+}
+
+let html = ""
+try {
+  html = await Astro.slots.render("default")
+} finally {
+  Astro.locals.currentFieldName = originalName
+}
+---
+
+<div
+  class:list={["ui-field-group", direction && `ui-${direction}`, className]}
+  {...rest}
+  role="group"
+  set:html={html}
+/>

package/components/FieldGroup/FieldGroup.vue

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

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

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

@@ -1,5 +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 }
+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

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

package/components/FieldGroup/types.ts

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

package/components/FieldLegend/FieldLegend.astro

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

package/components/FieldLegend/FieldLegend.vue

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

@@ -1,6 +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">)
+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

@@ -1,11 +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
-}
+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

@@ -1,5 +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 }
+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

@@ -1,6 +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])
+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])