opui-css 5.1.2 → 5.3.0

package/components/TextField/TextField.astro

@@ -1,42 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  autoFit?: boolean
-  class?: string
-  error?: boolean
-  description?: string
-  disabled?: boolean
-  endText?: string
-  filled?: boolean
-  id?: string
-  label?: string
-  list?: string
-  max?: number | string
-  min?: number | string
-  name?: string
-  placeholder?: string
-  required?: boolean
-  small?: boolean
-  spread?: boolean
-  startText?: string
-  step?: number | string
-  type?:
-    | "color"
-    | "date"
-    | "datetime-local"
-    | "email"
-    | "file"
-    | "month"
-    | "numeric"
-    | "password"
-    | "search"
-    | "tel"
-    | "text"
-    | "time"
-    | "url"
-    | "week"
-  value?: string | number
-}
+import type { Props } from "./types.astro"
 
 export const title = "Text Field"
 
@@ -87,14 +50,18 @@ const fieldName = name || currentFieldName
 >
   {
     (label || Astro.slots.has("label")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-label">{label}<slot name="label" /></span>
+      <span class="ui-label">
+        {label}
+        <slot name="label" />
+      </span>
     )
   }
   {
     (startTextValue || Astro.slots.has("description")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-start-text">{startTextValue}<slot name="description" /></span>
+      <span class="ui-start-text">
+        {startTextValue}
+        <slot name="description" />
+      </span>
     )
   }
   <span class="ui-field">
@@ -113,15 +80,44 @@ const fieldName = name || currentFieldName
       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>}
+    {
+      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")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-end-text">{endText}<slot name="end-text" /><slot name="supporting-text" /></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 />

package/components/TextField/TextField.vue

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

package/components/TextField/types.astro.ts

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

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

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, InputHTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+  id?: HTMLAttributes["id"]
+  type?: InputHTMLAttributes["type"] | "numeric"
+}
+
+export type Slots = {
+  default?: Slot
+  description?: Slot
+  "end-text"?: Slot
+  footer?: Slot
+  header?: Slot
+  label?: Slot
+  prefix?: Slot
+  "supporting-text"?: Slot
+  suffix?: Slot
+}

package/components/TextField/types.solid.ts

@@ -0,0 +1,22 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    type?:
+      | "text"
+      | "password"
+      | "email"
+      | "number"
+      | "numeric"
+      | "search"
+      | "tel"
+      | "url"
+      | "date"
+      | "time"
+      | "datetime-local"
+      | "month"
+      | "week"
+      | "color"
+      | string
+  } & Partial<Base.Slots<JSX.Element>>

package/components/TextField/types.svelte.ts

@@ -0,0 +1,22 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type InputProps = {
+  // Add 'numeric' as valid input type
+  type?: SvelteHTMLElements["input"]["type"] | "numeric"
+} &
+  // include the rest
+  Pick<SvelteHTMLElements["input"], Exclude<Base.InputProps, "type">>
+
+type Snippets = Base.Slots<Snippet>
+
+export type Props =
+  // Unique component props, except snippets
+  Omit<Base.Props, keyof Snippets> &
+    // All html label attributes, (except prefix)
+    Omit<SvelteHTMLElements["label"], "prefix"> &
+    // Input attributes
+    InputProps &
+    // Snippets
+    Snippets

package/components/TextField/types.ts

@@ -0,0 +1,35 @@
+export type Props = {
+  autoFit?: boolean
+  error?: boolean
+  description?: string
+  endText?: string
+  filled?: boolean
+  label?: string
+  small?: boolean
+  spread?: boolean
+  startText?: string
+}
+
+export type Slots<S> = {
+  description: string | S
+  endText: string | S
+  footer: string | S
+  header: string | S
+  label: string | S
+  prefix: string | S
+  startText: string | S
+  suffix: string | S
+  supportingText: string | S
+}
+
+export type InputProps =
+  | "disabled"
+  | "list"
+  | "max"
+  | "min"
+  | "name"
+  | "placeholder"
+  | "required"
+  | "step"
+  | "type"
+  | "value"

package/components/Textarea/Textarea.astro

@@ -1,26 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  autoFit?: boolean
-  class?: string
-  cols?: number
-  description?: string
-  disabled?: boolean
-  error?: boolean
-  filled?: boolean
-  id?: string
-  label?: string
-  maxlength?: number
-  minlength?: number
-  name?: string
-  spread?: boolean
-  placeholder?: string
-  required?: boolean
-  rows?: number
-  small?: boolean
-  endText?: string
-  value?: string
-}
+import type { Props } from "./types.astro"
 
 export const title = "Textarea"
 
@@ -66,17 +45,21 @@ const fieldName = name || currentFieldName
   data-invalid={error || undefined}
   {...rest}
 >
-{
-  (label || Astro.slots.has("label")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-label">{label}<slot name="label" /></span>
+  {
+    (label || Astro.slots.has("label")) && (
+      <span class="ui-label">
+        {label}
+        <slot name="label" />
+      </span>
     )
   }
 
-{
-  (description || Astro.slots.has("description")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-start-text">{description}<slot name="description" /></span>
+  {
+    (description || Astro.slots.has("description")) && (
+      <span class="ui-start-text">
+        {description}
+        <slot name="description" />
+      </span>
     )
   }
   <span class="ui-field">
@@ -91,15 +74,44 @@ const fieldName = name || currentFieldName
       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")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-end-text">{endText}<slot name="end-text" /><slot name="supporting-text" /></span>
+      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 />

package/components/Textarea/Textarea.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useId } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<Props>()
+defineSlots<Slots>()
+const modelValue = defineModel<string>()
+
+const fieldId = props.id || useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-textarea',
+      {
+        '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="props.description || $slots.description" class="ui-start-text">
+      <slot name="description">{{ props.description }}</slot>
+    </span>
+
+    <span class="ui-field">
+      <textarea :id="fieldId" v-bind="$attrs" v-model="modelValue"></textarea>
+      <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/Textarea/types.astro.ts

@@ -0,0 +1,10 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props =
+  // Unique component props
+  Base.Props &
+    // All html label attributes
+    HTMLAttributes<"label"> &
+    // Some input attributes for spreading
+    Pick<HTMLAttributes<"textarea">, Base.TextareaProps>

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

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+  id?: HTMLAttributes["id"]
+}
+
+export type Slots = {
+  default?: Slot
+  description?: Slot
+  "end-text"?: Slot
+  footer?: Slot
+  header?: Slot
+  label?: Slot
+  prefix?: Slot
+  "supporting-text"?: Slot
+  suffix?: Slot
+}

package/components/Textarea/types.solid.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  JSX.TextareaHTMLAttributes<HTMLTextAreaElement> &
+  Partial<Base.Slots<JSX.Element>>

package/components/Textarea/types.svelte.ts

@@ -0,0 +1,21 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type InputProps = {
+  type?: SvelteHTMLElements["input"]["type"] | "numeric"
+}
+
+type Snippets = Base.Slots<Snippet>
+
+export type Props =
+  // Unique component props, except snippets
+  Omit<Base.Props, keyof Snippets> &
+    // All html label attributes, (except prefix)
+    Omit<SvelteHTMLElements["label"], "prefix"> &
+    // Some input attributes for spreading
+    Pick<SvelteHTMLElements["textarea"], Base.TextareaProps> &
+    // Special input type attribute with 'numeric'
+    InputProps &
+    // Snippets
+    Snippets

package/components/Textarea/types.ts

@@ -0,0 +1,33 @@
+export type Props = {
+  autoFit?: boolean
+  description?: string
+  error?: boolean
+  filled?: boolean
+  label?: string
+  spread?: boolean
+  small?: boolean
+  endText?: string
+}
+
+export type Slots<S> = {
+  description?: string | S
+  footer?: string | S
+  header?: string | S
+  label?: string | S
+  prefix?: string | S
+  startText?: string | S
+  suffix?: string | S
+  endText?: string | S
+  supportingText?: string | S
+}
+
+export type TextareaProps =
+  | "cols"
+  | "disabled"
+  | "maxlength"
+  | "minlength"
+  | "name"
+  | "placeholder"
+  | "required"
+  | "rows"
+  | "value"

package/components/Toast/Toast.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { onMounted } from "vue"
+import { initToastManager } from "../../css/js/toast.js"
+
+onMounted(() => {
+  initToastManager()
+})
+</script>
+
+<template>
+  <output
+    aria-live="polite"
+    id="toast-manager"
+    popover="manual"
+    role="status"
+  ></output>
+
+  <template id="toast-template">
+    <div class="ui-toast" role="alert">
+      <span class="ui-icon" data-toast-icon></span>
+      <div class="ui-content">
+        <div class="ui-title" data-toast-title></div>
+        <div class="ui-description" data-toast-description></div>
+      </div>
+      <button
+        aria-label="Close"
+        class="ui-close-button"
+        data-toast-close
+        type="button"
+      >
+        <svg
+          fill="none"
+          height="20"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M18 6 6 18"></path>
+          <path d="m6 6 12 12"></path>
+        </svg>
+      </button>
+    </div>
+  </template>
+</template>

package/components/ToggleButton/ToggleButton.astro

@@ -1,15 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  disabled?: boolean
-  label?: string
-  name?: string
-  pressed?: boolean
-  size?: "small" | "x-small"
-  type?: "checkbox" | "radio"
-  value?: string
-}
+import type { Props } from "./types.astro"
 
 export const title = "Toggle Button"