opui-css 5.4.2 → 5.4.3

package/components/Dialog/Dialog.astro

@@ -1,38 +1,38 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Dialog"
-
-const { actionsAlign, class: className, closedby, ...rest } = Astro.props
----
-
-<dialog
-  class:list={["ui-dialog ui-card ui-elevated", className]}
-  closedby={closedby}
-  {...rest}
->
-  {
-    Astro.slots.has("header") && (
-      <hgroup>
-        <slot name="header" />
-      </hgroup>
-    )
-  }
-  {
-    Astro.slots.has("content") && (
-      <div class="ui-content">
-        <slot name="content" />
-      </div>
-    )
-  }
-  <slot />
-  {
-    Astro.slots.has("actions") && (
-      <div
-        class:list={["ui-actions", actionsAlign && `ui-align-${actionsAlign}`]}
-      >
-        <slot name="actions" />
-      </div>
-    )
-  }
-</dialog>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Dialog"
+
+const { actionsAlign, class: className, closedby, ...rest } = Astro.props
+---
+
+<dialog
+  class:list={["ui-dialog ui-card ui-elevated", className]}
+  closedby={closedby}
+  {...rest}
+>
+  {
+    Astro.slots.has("header") && (
+      <hgroup>
+        <slot name="header" />
+      </hgroup>
+    )
+  }
+  {
+    Astro.slots.has("content") && (
+      <div class="ui-content">
+        <slot name="content" />
+      </div>
+    )
+  }
+  <slot />
+  {
+    Astro.slots.has("actions") && (
+      <div
+        class:list={["ui-actions", actionsAlign && `ui-align-${actionsAlign}`]}
+      >
+        <slot name="actions" />
+      </div>
+    )
+  }
+</dialog>

package/components/Dialog/Dialog.vue

@@ -1,35 +1,35 @@
-<script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
-
-const { actionsAlign } = defineProps<Props>()
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const slots = defineSlots<Slots>()
-</script>
-
-<template>
-  <dialog
-    :class="['ui-dialog', 'ui-card', 'ui-elevated', $props.class]"
-    v-bind="$attrs"
-  >
-    <hgroup v-if="slots.header">
-      <slot name="header"></slot>
-    </hgroup>
-
-    <div v-if="slots.content" class="ui-content">
-      <slot name="content"></slot>
-    </div>
-
-    <slot></slot>
-
-    <div
-      v-if="slots.actions"
-      :class="['ui-actions', actionsAlign && `ui-align-${actionsAlign}`]"
-    >
-      <slot name="actions"></slot>
-    </div>
-  </dialog>
-</template>
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const { actionsAlign } = defineProps<Props>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const slots = defineSlots<Slots>()
+</script>
+
+<template>
+  <dialog
+    :class="['ui-dialog', 'ui-card', 'ui-elevated', $props.class]"
+    v-bind="$attrs"
+  >
+    <hgroup v-if="slots.header">
+      <slot name="header"></slot>
+    </hgroup>
+
+    <div v-if="slots.content" class="ui-content">
+      <slot name="content"></slot>
+    </div>
+
+    <slot></slot>
+
+    <div
+      v-if="slots.actions"
+      :class="['ui-actions', actionsAlign && `ui-align-${actionsAlign}`]"
+    >
+      <slot name="actions"></slot>
+    </div>
+  </dialog>
+</template>

package/components/Dialog/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<"dialog">
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"dialog">

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

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

package/components/Dialog/types.solid.ts

@@ -1,8 +1,8 @@
-import type * as Base from "./types"
-import type { JSX } from "solid-js"
-
-export type Props = Base.Props &
-  Partial<Base.Slots<JSX.Element>> &
-  JSX.DialogHtmlAttributes<HTMLDialogElement> & {
-    closedby?: "any" | "none" | "closerequest"
-  }
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Partial<Base.Slots<JSX.Element>> &
+  JSX.DialogHtmlAttributes<HTMLDialogElement> & {
+    closedby?: "any" | "none" | "closerequest"
+  }

package/components/Dialog/types.svelte.ts

@@ -1,7 +1,7 @@
-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 & Snippets & SvelteHTMLElements["dialog"]
+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 & Snippets & SvelteHTMLElements["dialog"]

package/components/Dialog/types.ts

@@ -1,10 +1,10 @@
-export type Props = {
-  actionsAlign?: "start" | "end"
-}
-
-export type Slots<S> = {
-  actions?: S
-  children?: S
-  content?: S
-  header?: string | S
-}
+export type Props = {
+  actionsAlign?: "start" | "end"
+}
+
+export type Slots<S> = {
+  actions?: S
+  children?: S
+  content?: S
+  header?: string | S
+}

package/components/Divider/Divider.astro

@@ -1,12 +1,12 @@
----
-export const title = "Divider"
-import type { Props } from "./types.astro"
-
-const { class: className, variant, ...rest } = Astro.props
-const variantClass = variant ? `border-${variant}` : ""
----
-
-<hr
-  class:list={["ui-divider", className, variantClass && `ui-${variantClass}`]}
-  {...rest}
-/>
+---
+export const title = "Divider"
+import type { Props } from "./types.astro"
+
+const { class: className, variant, ...rest } = Astro.props
+const variantClass = variant ? `border-${variant}` : ""
+---
+
+<hr
+  class:list={["ui-divider", className, variantClass && `ui-${variantClass}`]}
+  {...rest}
+/>

package/components/Divider/Divider.vue

@@ -1,12 +1,12 @@
-<script setup lang="ts">
-import type { Props } from "./types.d.vue"
-
-const { variant } = defineProps<Props>()
-const variantClass = variant ? `border-${variant}` : ""
-</script>
-
-<template>
-  <hr
-    :class="['ui-divider', $props.class, variantClass && `ui-${variantClass}`]"
-  />
-</template>
+<script setup lang="ts">
+import type { Props } from "./types.d.vue"
+
+const { variant } = defineProps<Props>()
+const variantClass = variant ? `border-${variant}` : ""
+</script>
+
+<template>
+  <hr
+    :class="['ui-divider', $props.class, variantClass && `ui-${variantClass}`]"
+  />
+</template>

package/components/Divider/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<"hr">
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"hr">

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

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

package/components/Divider/types.solid.ts

@@ -1,4 +1,4 @@
-import type * as Base from "./types"
-import type { JSX } from "solid-js"
-
-export type Props = Base.Props & JSX.HTMLAttributes<HTMLHRElement>
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props & JSX.HTMLAttributes<HTMLHRElement>

package/components/Divider/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["hr"]
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["hr"]

package/components/Divider/types.ts

@@ -1,3 +1,3 @@
-export type Props = {
-  variant?: "tonal" | "filled" | "primary"
-}
+export type Props = {
+  variant?: "tonal" | "filled" | "primary"
+}

package/components/Drawer/Drawer.astro

@@ -1,47 +1,47 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Drawer"
-
-const {
-  backdrop = "blurred",
-  class: className,
-  closedby = "any",
-  id,
-  scrollLock = true,
-  side = "inline-start",
-  ...rest
-} = Astro.props
-
-const { $id } = Astro.locals
-const drawerId = id || $id("drawer")
----
-
-<dialog
-  closedby={closedby}
-  class:list={[
-    "ui-drawer",
-    side && `ui-${side}`,
-    {
-      "ui-backdrop-transparent": backdrop === "transparent",
-      "ui-scroll-lock": scrollLock,
-    },
-    className,
-  ]}
-  id={drawerId}
-  {...rest}
->
-  {Astro.slots.has("header") && <slot name="header" />}
-
-  {
-    Astro.slots.has("content") && (
-      <div class="ui-content">
-        <slot name="content" />
-      </div>
-    )
-  }
-
-  <slot />
-
-  {Astro.slots.has("footer") && <slot name="footer" />}
-</dialog>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Drawer"
+
+const {
+  backdrop = "blurred",
+  class: className,
+  closedby = "any",
+  id,
+  scrollLock = true,
+  side = "inline-start",
+  ...rest
+} = Astro.props
+
+const { $id } = Astro.locals
+const drawerId = id || $id("drawer")
+---
+
+<dialog
+  closedby={closedby}
+  class:list={[
+    "ui-drawer",
+    side && `ui-${side}`,
+    {
+      "ui-backdrop-transparent": backdrop === "transparent",
+      "ui-scroll-lock": scrollLock,
+    },
+    className,
+  ]}
+  id={drawerId}
+  {...rest}
+>
+  {Astro.slots.has("header") && <slot name="header" />}
+
+  {
+    Astro.slots.has("content") && (
+      <div class="ui-content">
+        <slot name="content" />
+      </div>
+    )
+  }
+
+  <slot />
+
+  {Astro.slots.has("footer") && <slot name="footer" />}
+</dialog>

package/components/Drawer/Drawer.vue

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

package/components/Drawer/DrawerFooter.astro

@@ -1,11 +1,11 @@
----
-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"
+
+export const title = "Drawer Footer"
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div class:list={["ui-footer", className]} {...rest}>
+  <slot />
+</div>

package/components/Drawer/DrawerFooter.vue

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