style raw input: fix class prop

This commit is contained in:
Elijah Duffy
2025-07-07 15:49:30 -07:00
parent a5aeabebbd
commit 645320d335

View File

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import type { HTMLInputAttributes } from 'svelte/elements'; import type { ClassValue, HTMLInputAttributes } from 'svelte/elements';
import { import {
validate, validate,
type InputValidatorEvent, type InputValidatorEvent,
@@ -8,7 +8,7 @@
import { generateIdentifier } from './util'; import { generateIdentifier } from './util';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
type $Props = Omit<HTMLInputAttributes, 'name' | 'value'> & { type $Props = Omit<HTMLInputAttributes, 'name' | 'value' | 'class'> & {
name?: string; name?: string;
value?: string; value?: string;
validate?: ValidatorOptions; validate?: ValidatorOptions;
@@ -16,6 +16,7 @@
use?: (node: HTMLInputElement) => void; use?: (node: HTMLInputElement) => void;
ref?: HTMLInputElement | null; ref?: HTMLInputElement | null;
onvalidate?: (e: InputValidatorEvent) => void; onvalidate?: (e: InputValidatorEvent) => void;
class?: ClassValue | null | undefined;
}; };
let { let {
@@ -28,6 +29,7 @@
use, use,
ref = $bindable<HTMLInputElement | null>(null), ref = $bindable<HTMLInputElement | null>(null),
onvalidate, onvalidate,
class: classValue,
...others ...others
}: $Props = $props(); }: $Props = $props();
@@ -66,7 +68,7 @@
'dark:text-sui-background dark:placeholder:text-sui-background/60 dark:sm:bg-slate-800', 'dark:text-sui-background dark:placeholder:text-sui-background/60 dark:sm:bg-slate-800',
'ring-sui-primary ring-offset-1 placeholder-shown:text-ellipsis focus:ring-2', 'ring-sui-primary ring-offset-1 placeholder-shown:text-ellipsis focus:ring-2',
!valid && 'border-red-500!', !valid && 'border-red-500!',
others.class classValue
]} ]}
use:validate={validateOpts} use:validate={validateOpts}
use:conditionalUse use:conditionalUse