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">
import type { HTMLInputAttributes } from 'svelte/elements';
import type { ClassValue, HTMLInputAttributes } from 'svelte/elements';
import {
validate,
type InputValidatorEvent,
@@ -8,7 +8,7 @@
import { generateIdentifier } from './util';
import { onMount } from 'svelte';
type $Props = Omit<HTMLInputAttributes, 'name' | 'value'> & {
type $Props = Omit<HTMLInputAttributes, 'name' | 'value' | 'class'> & {
name?: string;
value?: string;
validate?: ValidatorOptions;
@@ -16,6 +16,7 @@
use?: (node: HTMLInputElement) => void;
ref?: HTMLInputElement | null;
onvalidate?: (e: InputValidatorEvent) => void;
class?: ClassValue | null | undefined;
};
let {
@@ -28,6 +29,7 @@
use,
ref = $bindable<HTMLInputElement | null>(null),
onvalidate,
class: classValue,
...others
}: $Props = $props();
@@ -66,7 +68,7 @@
'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',
!valid && 'border-red-500!',
others.class
classValue
]}
use:validate={validateOpts}
use:conditionalUse