opui-css 5.4.1 → 5.4.3

package/components/ClassicSelect/ClassicSelect.astro

@@ -1,60 +1,60 @@
----
-import type { ClassicSelectProps as Props } from "./types.astro"
-
-export const title = "Classic Select"
-
-const {
-  class: className,
-  disabled,
-  error,
-  id,
-  items = [],
-  label,
-  name,
-  required,
-  size,
-  endText,
-  value,
-  variant = "outlined",
-  ...rest
-} = Astro.props
-
-const { $id } = Astro.locals
-const selectId = id || $id("select")
-const labelId = $id("select-label")
----
-
-<label
-  class:list={[
-    "ui-select",
-    size && `ui-${size}`,
-    {
-      "ui-filled": variant === "filled",
-    },
-    className,
-  ]}
-  data-invalid={error || undefined}
->
-  {
-    label && (
-      <span class="ui-label" id={labelId}>
-        {label}
-      </span>
-    )
-  }
-  <span class="ui-field">
-    <select
-      aria-labelledby={label ? labelId : undefined}
-      disabled={disabled}
-      id={selectId}
-      name={name}
-      required={required}
-      value={value}
-      {...rest}
-    >
-      {items.map((item) => <option value={item.value}>{item.text}</option>)}
-      <slot />
-    </select>
-  </span>
-  {endText && <span class="ui-end-text">{endText}</span>}
-</label>
+---
+import type { ClassicSelectProps as Props } from "./types.astro"
+
+export const title = "Classic Select"
+
+const {
+  class: className,
+  disabled,
+  error,
+  id,
+  items = [],
+  label,
+  name,
+  required,
+  size,
+  endText,
+  value,
+  variant = "outlined",
+  ...rest
+} = Astro.props
+
+const { $id } = Astro.locals
+const selectId = id || $id("select")
+const labelId = $id("select-label")
+---
+
+<label
+  class:list={[
+    "ui-select",
+    size && `ui-${size}`,
+    {
+      "ui-filled": variant === "filled",
+    },
+    className,
+  ]}
+  data-invalid={error || undefined}
+>
+  {
+    label && (
+      <span class="ui-label" id={labelId}>
+        {label}
+      </span>
+    )
+  }
+  <span class="ui-field">
+    <select
+      aria-labelledby={label ? labelId : undefined}
+      disabled={disabled}
+      id={selectId}
+      name={name}
+      required={required}
+      value={value}
+      {...rest}
+    >
+      {items.map((item) => <option value={item.value}>{item.text}</option>)}
+      <slot />
+    </select>
+  </span>
+  {endText && <span class="ui-end-text">{endText}</span>}
+</label>

package/components/ClassicSelect/ClassicSelect.vue

@@ -1,54 +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>
+<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.d.vue.ts

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

@@ -1,15 +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"
-}
+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,9 +1,9 @@
----
-import type { DescriptionProps as Props } from "./types.astro"
-
-const { class: className, ...rest } = Astro.props
----
-
-<dd class:list={["ui-description", className]} {...rest}>
-  <slot />
-</dd>
+---
+import type { DescriptionProps as Props } from "./types.astro"
+
+const { class: className, ...rest } = Astro.props
+---
+
+<dd class:list={["ui-description", className]} {...rest}>
+  <slot />
+</dd>

package/components/DescriptionList/Description.vue

@@ -1,12 +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>
+<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,18 +1,18 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Description List"
-
-const { bordered, class: className, ...rest } = Astro.props
----
-
-<dl
-  class:list={[
-    "ui-description-list",
-    { "ui-bordered": bordered, "ui-dotted": bordered === "dotted" },
-    className,
-  ]}
-  {...rest}
->
-  <slot />
-</dl>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Description List"
+
+const { bordered, class: className, ...rest } = Astro.props
+---
+
+<dl
+  class:list={[
+    "ui-description-list",
+    { "ui-bordered": bordered, "ui-dotted": bordered === "dotted" },
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</dl>

package/components/DescriptionList/DescriptionList.vue

@@ -1,23 +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>
+<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,9 +1,9 @@
----
-import type { ItemProps as Props } from "./types.astro"
-
-const { class: className, ...rest } = Astro.props
----
-
-<div class:list={["ui-item", className]} {...rest}>
-  <slot />
-</div>
+---
+import type { ItemProps as Props } from "./types.astro"
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div class:list={["ui-item", className]} {...rest}>
+  <slot />
+</div>

package/components/DescriptionList/Item.vue

@@ -1,12 +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>
+<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,9 +1,9 @@
----
-import type { TermProps as Props } from "./types.astro"
-
-const { class: className, ...rest } = Astro.props
----
-
-<dt class:list={["ui-term", className]} {...rest}>
-  <slot />
-</dt>
+---
+import type { TermProps as Props } from "./types.astro"
+
+const { class: className, ...rest } = Astro.props
+---
+
+<dt class:list={["ui-term", className]} {...rest}>
+  <slot />
+</dt>

package/components/DescriptionList/Term.vue

@@ -1,12 +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>
+<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/index.ts

@@ -1,12 +1,12 @@
-import DescriptionList from "./DescriptionList.astro"
-import Item from "./Item.astro"
-import Term from "./Term.astro"
-import Description from "./Description.astro"
-
-export { Item, Term, Description }
-
-export default Object.assign(DescriptionList, {
-  Item,
-  Term,
-  Description,
-})
+import DescriptionList from "./DescriptionList.astro"
+import Item from "./Item.astro"
+import Term from "./Term.astro"
+import Description from "./Description.astro"
+
+export { Item, Term, Description }
+
+export default Object.assign(DescriptionList, {
+  Item,
+  Term,
+  Description,
+})

package/components/DescriptionList/types.astro.ts

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

@@ -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/DescriptionList/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<HTMLDListElement>
+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

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

package/components/DescriptionList/types.ts

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