opui-css 5.1.2 → 5.3.0

package/components/IconButton/types.ts

@@ -0,0 +1,16 @@
+export type Props = {
+  color?: "critical" | "primary"
+  size?: "small"
+  variant?: "outlined" | "tonal" | "filled"
+} & (
+  | {
+      as: "a"
+      href: string
+      disabled?: never
+    }
+  | {
+      as?: "button"
+      href?: never
+      disabled?: boolean
+    }
+)

package/components/List/List.astro

@@ -1,12 +1,5 @@
 ---
-type Props = {
-  bordered?: boolean
-  dense?: boolean
-  gutterless?: boolean
-  variant?: "default" | "tonal" | "transparent"
-  [key: string]: any
-}
-
+import type { Props } from "./types.astro"
 export const title = "List"
 
 const {

package/components/List/List.vue

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

package/components/List/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<"ul">

package/components/List/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/List/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<HTMLUListElement>

package/components/List/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["ul"]

package/components/List/types.ts

@@ -0,0 +1,7 @@
+export type Props = {
+  bordered?: boolean
+  dense?: boolean
+  divided?: boolean
+  gutterless?: boolean
+  variant?: "default" | "tonal" | "transparent"
+}

package/components/ListItem/ListItem.astro

@@ -1,15 +1,5 @@
 ---
-type Props = {
-  as?: "a" | "button" | "div"
-  borderTop?: boolean
-  class?: string
-  description?: string
-  for?: string
-  headline?: string
-  inset?: boolean
-  type?: "checkbox" | "radio" | "switch"
-  [key: string]: any
-}
+import type { Props } from "./types.astro"
 
 export const title = "List Item"
 
@@ -40,7 +30,7 @@ const innerProps = Tag ? rest : {}
     },
     className,
   ]}
-  {...liProps}
+  {...liProps as any}
 >
   {
     // Label + checkbox/radio/switch
@@ -67,7 +57,7 @@ const innerProps = Tag ? rest : {}
       </label>
     ) : // With custom tag
     Tag ? (
-      <Tag {...innerProps}>
+      <Tag {...(innerProps as any)}>
         {Astro.slots.start && (
           <div class="ui-start">
             <slot name="start" />

package/components/ListItem/ListItem.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const props = defineProps<Props>()
+const slots = defineSlots<Slots>()
+const attrs = useAttrs()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const hasLabel = computed(
+  () =>
+    props.type &&
+    (props.type === "checkbox" ||
+      props.type === "radio" ||
+      props.type === "switch"),
+)
+const labelClass = computed(() => props.type || "")
+const Tag = computed(() => props.as)
+
+const liAttrs = computed(() => (Tag.value ? {} : attrs))
+const innerAttrs = computed(() => (Tag.value ? attrs : {}))
+</script>
+
+<template>
+  <li
+    :class="[
+      {
+        'ui-border-top': props.borderTop,
+        'ui-inset': props.inset,
+      },
+      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">
+      <div v-if="slots.start" class="ui-start">
+        <slot name="start"></slot>
+      </div>
+      <div
+        v-if="props.headline || props.description || slots.text"
+        class="ui-text"
+      >
+        <p v-if="props.headline">{{ props.headline }}</p>
+        <p v-if="props.description">{{ props.description }}</p>
+        <slot name="text"></slot>
+        <slot></slot>
+      </div>
+      <slot v-else></slot>
+      <div v-if="slots.end" class="ui-end">
+        <slot name="end"></slot>
+      </div>
+    </component>
+
+    <template v-else>
+      <div v-if="slots.start" class="ui-start">
+        <slot name="start"></slot>
+      </div>
+      <div
+        v-if="props.headline || props.description || slots.text"
+        class="ui-text"
+      >
+        <p v-if="props.headline">{{ props.headline }}</p>
+        <p v-if="props.description">{{ props.description }}</p>
+        <slot name="text"></slot>
+        <slot></slot>
+      </div>
+      <slot v-else></slot>
+      <div v-if="slots.end" class="ui-end">
+        <slot name="end"></slot>
+      </div>
+    </template>
+  </li>
+</template>

package/components/ListItem/types.astro.ts

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

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

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

package/components/ListItem/types.svelte.ts

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

package/components/ListItem/types.ts

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

package/components/Progress/Progress.astro

@@ -1,15 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  "aria-busy"?: "true" | "false" | boolean
-  "aria-describedby"?: string
-  "aria-label"?: string
-  class?: string
-  id?: string
-  max?: number | string
-  value?: number | string
-  variant?: "filled" | "default" | "tonal"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Progress"
 

package/components/Progress/Progress.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineSlots<Slots>()
+const {
+  "aria-busy": ariaBusy,
+  "aria-describedby": ariaDescribedby,
+  "aria-label": ariaLabel,
+  id,
+  max,
+  value,
+  variant,
+} = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['ui-progress', variant && `ui-${variant}`, $props.class]">
+    <progress
+      v-bind="$attrs"
+      :aria-busy="ariaBusy"
+      :aria-describedby="ariaDescribedby"
+      :aria-label="ariaLabel"
+      :id="id"
+      :max="max"
+      :value="value"
+    >
+      <slot></slot>
+    </progress>
+  </div>
+</template>

package/components/Progress/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<"progress">

package/components/Progress/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/Progress/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<HTMLProgressElement>

package/components/Progress/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["progress"]

package/components/Progress/types.ts

@@ -0,0 +1,10 @@
+export type Props = {
+  [key: string]: any
+  "aria-busy"?: "true" | "false" | boolean
+  "aria-describedby"?: string
+  "aria-label"?: string
+  id?: string
+  max?: number | string
+  value?: number | string
+  variant?: "filled" | "default" | "tonal"
+}

package/components/Radio/Radio.astro

@@ -1,35 +1,17 @@
 ---
+import type { RadioProps as Props } from "./types.astro"
 import RadioInput from "./RadioInput.astro"
 
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  class?: string
-  disabled?: boolean
-  error?: boolean
-  hideLabel?: boolean
-  id?: string
-  name?: string
-  required?: boolean
-  size?: "small" | "large"
-  stack?: boolean
-  value?: string
-}
-
 export const title = "Radio"
 
 const {
-  checked,
   class: className,
   disabled,
   error,
   hideLabel,
-  id,
   name,
-  required,
   size,
   stack,
-  value,
   ...rest
 } = Astro.props
 
@@ -50,21 +32,13 @@ const finalName = name || currentFieldName
   ]}
   data-invalid={error || undefined}
 >
-  <RadioInput
-    aria-describedby={endTextId}
-    {checked}
-    {disabled}
-    {id}
-    name={finalName}
-    {required}
-    {value}
-    {...rest}
-  />
-  <!-- prettier-ignore --><span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
+  <RadioInput aria-describedby={endTextId} name={finalName} {...rest} />
+  <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
   {
     Astro.slots.has("end-text") && (
-      <!-- prettier-ignore -->
-      <span id={endTextId} class="ui-end-text"><slot name="end-text" /></span>
+      <span id={endTextId} class="ui-end-text">
+        <slot name="end-text" />
+      </span>
     )
   }
 </label>

package/components/Radio/Radio.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import RadioInput from "./RadioInput.vue"
+import type { RadioProps, Slots } from "./types.d.vue"
+import { useId } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<RadioProps>()
+defineSlots<Slots>()
+const modelValue = defineModel<string | number | boolean>()
+
+const endTextId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-radio',
+      props.size && `ui-${props.size}`,
+      {
+        'ui-stack': props.stack,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <RadioInput
+      v-bind="$attrs"
+      v-model="modelValue"
+      :aria-describedby="endTextId"
+    />
+    <span :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
+      ><slot></slot
+    ></span>
+    <span :id="endTextId" class="ui-end-text" v-if="$slots['end-text']">
+      <slot name="end-text"></slot>
+    </span>
+  </label>
+</template>

package/components/Radio/RadioInput.astro

@@ -1,24 +1,7 @@
 ---
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  disabled?: boolean
-  id?: string
-  name?: string
-  required?: boolean
-  value?: string
-}
+import type { RadioInputProps as Props } from "./types.astro"
 
-const { checked, disabled, id, name, required, value, ...rest } = Astro.props
+const { ...props } = Astro.props
 ---
 
-<input
-  type="radio"
-  {checked}
-  {disabled}
-  {id}
-  {name}
-  {required}
-  {value}
-  {...rest}
-/>
+<input type="radio" {...props} />

package/components/Radio/RadioInput.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { RadioInputProps } from "./types"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<RadioInputProps>()
+const modelValue = defineModel<string | number | boolean>()
+</script>
+
+<template>
+  <input type="radio" v-bind="$attrs" v-model="modelValue" />
+</template>

package/components/Radio/types.astro.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type RadioProps = Base.RadioProps & HTMLAttributes<"input">
+export type RadioInputProps = Base.RadioInputProps &
+  Omit<HTMLAttributes<"input">, "type">

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

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

package/components/Radio/types.solid.ts

@@ -0,0 +1,9 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type RadioInputProps = Base.RadioInputProps &
+  JSX.InputHTMLAttributes<HTMLInputElement>
+
+export type RadioProps = Base.RadioProps &
+  Partial<Base.RadioSlots<JSX.Element>> &
+  Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "size">

package/components/Radio/types.svelte.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type Snippets = Base.RadioSlots<Snippet>
+
+export type RadioInputProps = Base.RadioInputProps &
+  Omit<SvelteHTMLElements["input"], "type">
+
+export type RadioProps = Omit<Base.RadioProps, keyof Snippets> &
+  Snippets &
+  Omit<SvelteHTMLElements["input"], "size">

package/components/Radio/types.ts

@@ -0,0 +1,12 @@
+export type RadioProps = {
+  error?: boolean
+  hideLabel?: boolean
+  size?: "small" | "large"
+  stack?: boolean
+}
+
+export type RadioInputProps = {}
+
+export type RadioSlots<S> = {
+  endText?: string | S
+}