opui-css 5.1.2 → 5.3.0

package/components/Chip/Chip.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const {
+  as,
+  label,
+  multiline,
+  size,
+  variant = "tonal",
+  href,
+} = defineProps<Props>()
+defineSlots<Slots>()
+
+const tag = computed(() => as || (href ? "a" : "div"))
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :class="[
+      'ui-chip',
+      {
+        'ui-multiline': multiline,
+      },
+      size && `ui-${size}`,
+      variant && `ui-${variant}`,
+      $props.class,
+    ]"
+    :href="tag === 'a' ? href : undefined"
+  >
+    <slot name="start"></slot>
+    <slot></slot>
+    <span v-if="label" class="ui-text">{{ label }}</span>
+    <slot name="end"></slot>
+  </component>
+</template>

package/components/Chip/types.astro.ts

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

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

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

package/components/Chip/types.solid.ts

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

package/components/Chip/types.svelte.ts

@@ -0,0 +1,14 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type Snippets = Base.Slots<Snippet>
+
+// prettier-ignore
+export type Props = Base.Props &
+  Snippets &
+  (
+    | ({ as?: "a" } & SvelteHTMLElements["a"])
+    | ({ as?: "button" } & SvelteHTMLElements["button"])
+    | ({ as?: "div" } & SvelteHTMLElements["div"])
+  )

package/components/Chip/types.ts

@@ -0,0 +1,13 @@
+export type Props = {
+  [key: string]: any
+  as?: "a" | "button" | "div" | string
+  label?: string
+  multiline?: boolean
+  size?: "small"
+  variant?: "tonal" | "outlined"
+}
+
+export type Slots<S> = {
+  end?: S
+  start?: S
+}

package/components/ClassicSelect/ClassicSelect.astro

@@ -1,24 +1,5 @@
 ---
-type Item = {
-  text: string
-  value: any
-}
-
-type Props = {
-  [key: string]: any
-  class?: string
-  disabled?: boolean
-  error?: boolean
-  id?: string
-  items?: Item[]
-  label?: string
-  name?: string
-  required?: boolean
-  size?: "small"
-  endText?: string
-  value?: any
-  variant?: "outlined" | "filled"
-}
+import type { ClassicSelectProps as Props } from "./types.astro"
 
 export const title = "Classic Select"
 
@@ -56,8 +37,9 @@ const labelId = $id("select-label")
 >
   {
     label && (
-      <!-- prettier-ignore -->
-      <span class="ui-label" id={labelId}>{label}</span>
+      <span class="ui-label" id={labelId}>
+        {label}
+      </span>
     )
   }
   <span class="ui-field">
@@ -74,10 +56,5 @@ const labelId = $id("select-label")
       <slot />
     </select>
   </span>
-  {
-    endText && (
-      <!-- prettier-ignore -->
-      <span class="ui-end-text">{endText}</span>
-    )
-  }
+  {endText && <span class="ui-end-text">{endText}</span>}
 </label>

package/components/ClassicSelect/ClassicSelect.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { ClassicSelectProps, Slots } from "./types.d.vue"
+import { useId } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ClassicSelectProps>(), {
+  items: () => [],
+  variant: "outlined",
+})
+defineSlots<Slots>()
+const modelValue = defineModel<string | number | (string | number)[]>()
+
+const selectId = props.id || useId()
+const labelId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-select',
+      props.size && `ui-${props.size}`,
+      {
+        'ui-filled': props.variant === 'filled',
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span v-if="props.label" class="ui-label" :id="labelId">{{
+      props.label
+    }}</span>
+    <span class="ui-field">
+      <select
+        :aria-labelledby="props.label ? labelId : undefined"
+        :id="selectId"
+        v-bind="$attrs"
+        v-model="modelValue"
+      >
+        <option
+          v-for="item in props.items"
+          :key="item.value"
+          :value="item.value"
+        >
+          {{ item.text }}
+        </option>
+        <slot></slot>
+      </select>
+    </span>
+    <span v-if="props.endText" class="ui-end-text">{{ props.endText }}</span>
+  </label>
+</template>

package/components/ClassicSelect/types.astro.ts

@@ -0,0 +1,8 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type { Item } from "./types"
+
+export type ClassicSelectProps = Base.ClassicSelectProps &
+  HTMLAttributes<"label"> &
+  HTMLAttributes<"select">

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

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

package/components/ClassicSelect/types.solid.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type ClassicSelectProps = Base.ClassicSelectProps &
+  Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, "size">

package/components/ClassicSelect/types.svelte.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type ClassicSelectProps = Base.ClassicSelectProps &
+  Omit<SvelteHTMLElements["select"], "size">

package/components/ClassicSelect/types.ts

@@ -0,0 +1,15 @@
+export type Item = {
+  text: string
+  value: any
+}
+
+export type ClassicSelectProps = {
+  [key: string]: any
+  error?: boolean
+  id?: string
+  items?: Item[]
+  label?: string
+  size?: "small"
+  endText?: string
+  variant?: "outlined" | "filled"
+}

package/components/DescriptionList/Description.astro

@@ -1,8 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-}
+import type { DescriptionProps as Props } from "./types.astro"
 
 const { class: className, ...rest } = Astro.props
 ---

package/components/DescriptionList/Description.vue

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

package/components/DescriptionList/DescriptionList.astro

@@ -1,9 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  bordered?: boolean | "dotted"
-  class?: string
-}
+import type { Props } from "./types.astro"
 
 export const title = "Description List"
 

package/components/DescriptionList/DescriptionList.vue

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

package/components/DescriptionList/Item.astro

@@ -1,8 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-}
+import type { ItemProps as Props } from "./types.astro"
 
 const { class: className, ...rest } = Astro.props
 ---

package/components/DescriptionList/Item.vue

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

package/components/DescriptionList/Term.astro

@@ -1,8 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-}
+import type { TermProps as Props } from "./types.astro"
 
 const { class: className, ...rest } = Astro.props
 ---

package/components/DescriptionList/Term.vue

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

package/components/DescriptionList/types.astro.ts

@@ -0,0 +1,10 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"dl">
+
+export type TermProps = Base.Props & HTMLAttributes<"dt">
+
+export type DescriptionProps = Base.Props & HTMLAttributes<"dd">
+
+export type ItemProps = Base.Props & HTMLAttributes<"div">

package/components/DescriptionList/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/DescriptionList/types.solid.ts

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

package/components/DescriptionList/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["dl"]

package/components/DescriptionList/types.ts

@@ -0,0 +1,3 @@
+export type Props = {
+  bordered?: boolean | "dotted"
+}

package/components/Dialog/Dialog.astro

@@ -1,10 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  actionsAlign?: "start" | "end"
-  class?: string
-  closedby?: "any" | "closerequest" | "none"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Dialog"
 

package/components/Dialog/Dialog.vue

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

package/components/Dialog/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<"dialog">

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

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

package/components/Dialog/types.solid.ts

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

package/components/Dialog/types.svelte.ts

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

package/components/Dialog/types.ts

@@ -0,0 +1,10 @@
+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,11 +1,6 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  variant?: "tonal" | "filled" | "primary"
-}
-
 export const title = "Divider"
+import type { Props } from "./types.astro"
 
 const { class: className, variant, ...rest } = Astro.props
 const variantClass = variant ? `border-${variant}` : ""

package/components/Divider/Divider.vue

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

package/components/Divider/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<"hr">

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

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

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

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

package/components/Divider/types.ts

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

package/components/Drawer/Drawer.astro

@@ -1,13 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  backdrop?: "transparent" | "blurred"
-  class?: string
-  closedby?: "any" | "closerequest" | "none"
-  id?: string
-  scrollLock?: boolean
-  side?: "inline-start" | "inline-end" | "block-start" | "block-end"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Drawer"
 
@@ -41,9 +33,15 @@ const drawerId = id || $id("drawer")
 >
   {Astro.slots.has("header") && <slot name="header" />}
 
-  <div class="ui-content">
-    <slot name="content" />
-  </div>
+  {
+    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

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

package/components/Drawer/DrawerFooter.astro

@@ -1,8 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-}
+import type { DrawerFooterProps as Props } from "./types.astro"
 
 export const title = "Drawer Footer"