mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-06 00:02:13 +00:00
Diego Imbert
8aafb63d51
* nullable by default * unrelated nits * native timezone input postgres * Fix timestamptz NaiveDateTime conversion is pg_executor * remove consolelog
56 lines
1.5 KiB
Svelte
56 lines
1.5 KiB
Svelte
<script module lang="ts">
|
|
export function inputBorderClass({
|
|
error,
|
|
forceFocus
|
|
}: {
|
|
error?: boolean
|
|
forceFocus?: boolean
|
|
} = {}) {
|
|
return twMerge(
|
|
'transition-colors border',
|
|
forceFocus
|
|
? '!border-nord-900 dark:!border-nord-900'
|
|
: '!border-nord-400 dark:!border-nord-300 hover:!border-nord-900/50 hover:dark:!border-nord-900/50 focus:!border-nord-900 dark:focus:!border-nord-900',
|
|
error
|
|
? '!border-red-300 focus:!border-red-400 hover:!border-red-500 dark:!border-red-400/40 dark:hover:!border-red-600/40'
|
|
: ''
|
|
)
|
|
}
|
|
|
|
export const inputBaseClass =
|
|
'rounded-md focus:ring-0 no-default-style text-sm text-tertiary dark:text-secondary !bg-surface-secondary disabled:!bg-surface-disabled disabled:!border-none disabled:!text-hint disabled:cursor-not-allowed shadow-none py-2 px-3 placeholder-hint'
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { HTMLInputAttributes } from 'svelte/elements'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
type Props = {
|
|
inputProps?: HTMLInputAttributes
|
|
value?: string
|
|
class?: string
|
|
error?: string | boolean
|
|
}
|
|
|
|
export function focus() {
|
|
inputEl?.focus()
|
|
}
|
|
|
|
let inputEl: HTMLInputElement | undefined = $state()
|
|
|
|
let { inputProps, value = $bindable(), class: className = '', error }: Props = $props()
|
|
</script>
|
|
|
|
<input
|
|
{...inputProps}
|
|
class={twMerge(
|
|
inputBaseClass,
|
|
'w-full',
|
|
'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
|
|
inputBorderClass({ error: !!error }),
|
|
className
|
|
)}
|
|
bind:this={inputEl}
|
|
bind:value
|
|
/>
|