opui-css 5.4.1 → 5.4.3

package/components/TextField/TextField.astro

@@ -1,124 +1,124 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Text Field"
-
-const {
-  autoFit,
-  class: className,
-  error,
-  description,
-  disabled,
-  endText,
-  filled,
-  id,
-  label,
-  list,
-  max,
-  min,
-  name,
-  placeholder,
-  required,
-  small,
-  spread,
-  startText,
-  step,
-  type = "text",
-  value,
-  ...rest
-} = Astro.props
-
-const startTextValue = description || startText
-const { $id, currentFieldName } = Astro.locals
-const fieldId = id || $id("text-field")
-const fieldName = name || currentFieldName
----
-
-<label
-  class:list={[
-    "ui-text-field",
-    {
-      "ui-auto-fit": autoFit,
-      "ui-filled": filled,
-      "ui-spread": spread,
-      "ui-small": small,
-    },
-    className,
-  ]}
-  data-invalid={error || undefined}
-  {...rest}
->
-  {
-    (label || Astro.slots.has("label")) && (
-      <span class="ui-label">
-        {label}
-        <slot name="label" />
-      </span>
-    )
-  }
-  {
-    (startTextValue || Astro.slots.has("description")) && (
-      <span class="ui-start-text">
-        {startTextValue}
-        <slot name="description" />
-      </span>
-    )
-  }
-  <span class="ui-field">
-    <input
-      disabled={disabled}
-      id={fieldId}
-      inputmode={type === "numeric" ? "numeric" : undefined}
-      list={list}
-      max={max}
-      min={min}
-      name={fieldName}
-      pattern={type === "numeric" ? "[0-9]*" : undefined}
-      placeholder={placeholder}
-      required={required}
-      step={step}
-      type={type === "numeric" ? "text" : type}
-      value={value}
-    />
-    {
-      Astro.slots.has("prefix") && (
-        <span class="ui-prefix">
-          <slot name="prefix" />
-        </span>
-      )
-    }
-    {
-      Astro.slots.has("suffix") && (
-        <span class="ui-suffix">
-          <slot name="suffix" />
-        </span>
-      )
-    }
-    {
-      Astro.slots.has("header") && (
-        <span class="ui-header">
-          <slot name="header" />
-        </span>
-      )
-    }
-    {
-      Astro.slots.has("footer") && (
-        <span class="ui-footer">
-          <slot name="footer" />
-        </span>
-      )
-    }
-  </span>
-  {
-    (endText ||
-      Astro.slots.has("end-text") ||
-      Astro.slots.has("supporting-text")) && (
-      <span class="ui-end-text">
-        {endText}
-        <slot name="end-text" />
-        <slot name="supporting-text" />
-      </span>
-    )
-  }
-  <slot />
-</label>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Text Field"
+
+const {
+  autoFit,
+  class: className,
+  error,
+  description,
+  disabled,
+  endText,
+  filled,
+  id,
+  label,
+  list,
+  max,
+  min,
+  name,
+  placeholder,
+  required,
+  small,
+  spread,
+  startText,
+  step,
+  type = "text",
+  value,
+  ...rest
+} = Astro.props
+
+const startTextValue = description || startText
+const { $id, currentFieldName } = Astro.locals
+const fieldId = id || $id("text-field")
+const fieldName = name || currentFieldName
+---
+
+<label
+  class:list={[
+    "ui-text-field",
+    {
+      "ui-auto-fit": autoFit,
+      "ui-filled": filled,
+      "ui-spread": spread,
+      "ui-small": small,
+    },
+    className,
+  ]}
+  data-invalid={error || undefined}
+  {...rest}
+>
+  {
+    (label || Astro.slots.has("label")) && (
+      <span class="ui-label">
+        {label}
+        <slot name="label" />
+      </span>
+    )
+  }
+  {
+    (startTextValue || Astro.slots.has("description")) && (
+      <span class="ui-start-text">
+        {startTextValue}
+        <slot name="description" />
+      </span>
+    )
+  }
+  <span class="ui-field">
+    <input
+      disabled={disabled}
+      id={fieldId}
+      inputmode={type === "numeric" ? "numeric" : undefined}
+      list={list}
+      max={max}
+      min={min}
+      name={fieldName}
+      pattern={type === "numeric" ? "[0-9]*" : undefined}
+      placeholder={placeholder}
+      required={required}
+      step={step}
+      type={type === "numeric" ? "text" : type}
+      value={value}
+    />
+    {
+      Astro.slots.has("prefix") && (
+        <span class="ui-prefix">
+          <slot name="prefix" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("suffix") && (
+        <span class="ui-suffix">
+          <slot name="suffix" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("header") && (
+        <span class="ui-header">
+          <slot name="header" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("footer") && (
+        <span class="ui-footer">
+          <slot name="footer" />
+        </span>
+      )
+    }
+  </span>
+  {
+    (endText ||
+      Astro.slots.has("end-text") ||
+      Astro.slots.has("supporting-text")) && (
+      <span class="ui-end-text">
+        {endText}
+        <slot name="end-text" />
+        <slot name="supporting-text" />
+      </span>
+    )
+  }
+  <slot />
+</label>

package/components/TextField/TextField.vue

@@ -1,74 +1,74 @@
-<script setup lang="ts">
-import { useId, computed } from "vue"
-import type { Props, Slots } from "./types.d.vue"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<Props>(), {
-  type: "text",
-})
-defineSlots<Slots>()
-const modelValue = defineModel<string | number>()
-
-const fieldId = props.id || useId()
-const startTextValue = computed(() => props.description || props.startText)
-</script>
-
-<template>
-  <label
-    :class="[
-      'ui-text-field',
-      {
-        'ui-auto-fit': props.autoFit,
-        'ui-filled': props.filled,
-        'ui-spread': props.spread,
-        'ui-small': props.small,
-      },
-      props.class,
-    ]"
-    :data-invalid="props.error || undefined"
-  >
-    <span v-if="props.label || $slots.label" class="ui-label">
-      <slot name="label">{{ props.label }}</slot>
-    </span>
-
-    <span v-if="startTextValue || $slots.description" class="ui-start-text">
-      <slot name="description">{{ startTextValue }}</slot>
-    </span>
-
-    <span class="ui-field">
-      <input
-        :id="fieldId"
-        :inputmode="props.type === 'numeric' ? 'numeric' : undefined"
-        :pattern="props.type === 'numeric' ? '[0-9]*' : undefined"
-        :type="props.type === 'numeric' ? 'text' : props.type"
-        v-bind="$attrs"
-        v-model="modelValue"
-      />
-      <span class="ui-prefix" v-if="$slots.prefix"
-        ><slot name="prefix"></slot
-      ></span>
-      <span class="ui-suffix" v-if="$slots.suffix"
-        ><slot name="suffix"></slot
-      ></span>
-      <span class="ui-header" v-if="$slots.header"
-        ><slot name="header"></slot
-      ></span>
-      <span class="ui-footer" v-if="$slots.footer"
-        ><slot name="footer"></slot
-      ></span>
-    </span>
-
-    <span
-      v-if="props.endText || $slots['end-text'] || $slots['supporting-text']"
-      class="ui-end-text"
-    >
-      <slot name="end-text">{{ props.endText }}</slot
-      ><slot name="supporting-text"></slot>
-    </span>
-
-    <slot></slot>
-  </label>
-</template>
+<script setup lang="ts">
+import { useId, computed } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "text",
+})
+defineSlots<Slots>()
+const modelValue = defineModel<string | number>()
+
+const fieldId = props.id || useId()
+const startTextValue = computed(() => props.description || props.startText)
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-text-field',
+      {
+        'ui-auto-fit': props.autoFit,
+        'ui-filled': props.filled,
+        'ui-spread': props.spread,
+        'ui-small': props.small,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span v-if="props.label || $slots.label" class="ui-label">
+      <slot name="label">{{ props.label }}</slot>
+    </span>
+
+    <span v-if="startTextValue || $slots.description" class="ui-start-text">
+      <slot name="description">{{ startTextValue }}</slot>
+    </span>
+
+    <span class="ui-field">
+      <input
+        :id="fieldId"
+        :inputmode="props.type === 'numeric' ? 'numeric' : undefined"
+        :pattern="props.type === 'numeric' ? '[0-9]*' : undefined"
+        :type="props.type === 'numeric' ? 'text' : props.type"
+        v-bind="$attrs"
+        v-model="modelValue"
+      />
+      <span class="ui-prefix" v-if="$slots.prefix"
+        ><slot name="prefix"></slot
+      ></span>
+      <span class="ui-suffix" v-if="$slots.suffix"
+        ><slot name="suffix"></slot
+      ></span>
+      <span class="ui-header" v-if="$slots.header"
+        ><slot name="header"></slot
+      ></span>
+      <span class="ui-footer" v-if="$slots.footer"
+        ><slot name="footer"></slot
+      ></span>
+    </span>
+
+    <span
+      v-if="props.endText || $slots['end-text'] || $slots['supporting-text']"
+      class="ui-end-text"
+    >
+      <slot name="end-text">{{ props.endText }}</slot
+      ><slot name="supporting-text"></slot>
+    </span>
+
+    <slot></slot>
+  </label>
+</template>

package/components/TextField/types.astro.ts

@@ -1,17 +1,17 @@
-import type * as Base from "./types"
-import type { HTMLAttributes } from "astro/types"
-
-type InputProps = {
-  // Add 'numeric' as valid input type
-  type?: HTMLAttributes<"input">["type"] | "numeric"
-} &
-  // include the rest
-  Pick<HTMLAttributes<"input">, Exclude<Base.InputProps, "type">>
-
-export type Props =
-  // Unique component props
-  Base.Props &
-    // All html label attributes
-    HTMLAttributes<"label"> &
-    // Input attributes
-    InputProps
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+type InputProps = {
+  // Add 'numeric' as valid input type
+  type?: HTMLAttributes<"input">["type"] | "numeric"
+} &
+  // include the rest
+  Pick<HTMLAttributes<"input">, Exclude<Base.InputProps, "type">>
+
+export type Props =
+  // Unique component props
+  Base.Props &
+    // All html label attributes
+    HTMLAttributes<"label"> &
+    // Input attributes
+    InputProps

package/components/Textarea/Textarea.astro

@@ -1,118 +1,118 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Textarea"
-
-const {
-  autoFit,
-  class: className,
-  cols,
-  description,
-  disabled,
-  error,
-  filled,
-  id,
-  label,
-  maxlength,
-  minlength,
-  name,
-  spread,
-  placeholder,
-  required,
-  rows,
-  small,
-  endText,
-  value,
-  ...rest
-} = Astro.props
-
-const { $id, currentFieldName } = Astro.locals
-const fieldId = id || $id("textarea")
-const fieldName = name || currentFieldName
----
-
-<label
-  class:list={[
-    "ui-textarea",
-    {
-      "ui-auto-fit": autoFit,
-      "ui-filled": filled,
-      "ui-spread": spread,
-      "ui-small": small,
-    },
-    className,
-  ]}
-  data-invalid={error || undefined}
-  {...rest}
->
-  {
-    (label || Astro.slots.has("label")) && (
-      <span class="ui-label">
-        {label}
-        <slot name="label" />
-      </span>
-    )
-  }
-
-  {
-    (description || Astro.slots.has("description")) && (
-      <span class="ui-start-text">
-        {description}
-        <slot name="description" />
-      </span>
-    )
-  }
-  <span class="ui-field">
-    <textarea
-      cols={cols}
-      disabled={disabled}
-      id={fieldId}
-      maxlength={maxlength}
-      minlength={minlength}
-      name={fieldName}
-      placeholder={placeholder}
-      required={required}
-      rows={rows}
-      value={value}></textarea>
-    {
-      Astro.slots.has("prefix") && (
-        <span class="ui-prefix">
-          <slot name="prefix" />
-        </span>
-      )
-    }
-    {
-      Astro.slots.has("suffix") && (
-        <span class="ui-suffix">
-          <slot name="suffix" />
-        </span>
-      )
-    }
-    {
-      Astro.slots.has("header") && (
-        <span class="ui-header">
-          <slot name="header" />
-        </span>
-      )
-    }
-    {
-      Astro.slots.has("footer") && (
-        <span class="ui-footer">
-          <slot name="footer" />
-        </span>
-      )
-    }
-  </span>
-  {
-    (endText ||
-      Astro.slots.has("end-text") ||
-      Astro.slots.has("supporting-text")) && (
-      <span class="ui-end-text">
-        {endText}
-        <slot name="end-text" />
-        <slot name="supporting-text" />
-      </span>
-    )
-  }
-  <slot />
-</label>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Textarea"
+
+const {
+  autoFit,
+  class: className,
+  cols,
+  description,
+  disabled,
+  error,
+  filled,
+  id,
+  label,
+  maxlength,
+  minlength,
+  name,
+  spread,
+  placeholder,
+  required,
+  rows,
+  small,
+  endText,
+  value,
+  ...rest
+} = Astro.props
+
+const { $id, currentFieldName } = Astro.locals
+const fieldId = id || $id("textarea")
+const fieldName = name || currentFieldName
+---
+
+<label
+  class:list={[
+    "ui-textarea",
+    {
+      "ui-auto-fit": autoFit,
+      "ui-filled": filled,
+      "ui-spread": spread,
+      "ui-small": small,
+    },
+    className,
+  ]}
+  data-invalid={error || undefined}
+  {...rest}
+>
+  {
+    (label || Astro.slots.has("label")) && (
+      <span class="ui-label">
+        {label}
+        <slot name="label" />
+      </span>
+    )
+  }
+
+  {
+    (description || Astro.slots.has("description")) && (
+      <span class="ui-start-text">
+        {description}
+        <slot name="description" />
+      </span>
+    )
+  }
+  <span class="ui-field">
+    <textarea
+      cols={cols}
+      disabled={disabled}
+      id={fieldId}
+      maxlength={maxlength}
+      minlength={minlength}
+      name={fieldName}
+      placeholder={placeholder}
+      required={required}
+      rows={rows}
+      value={value}></textarea>
+    {
+      Astro.slots.has("prefix") && (
+        <span class="ui-prefix">
+          <slot name="prefix" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("suffix") && (
+        <span class="ui-suffix">
+          <slot name="suffix" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("header") && (
+        <span class="ui-header">
+          <slot name="header" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("footer") && (
+        <span class="ui-footer">
+          <slot name="footer" />
+        </span>
+      )
+    }
+  </span>
+  {
+    (endText ||
+      Astro.slots.has("end-text") ||
+      Astro.slots.has("supporting-text")) && (
+      <span class="ui-end-text">
+        {endText}
+        <slot name="end-text" />
+        <slot name="supporting-text" />
+      </span>
+    )
+  }
+  <slot />
+</label>