74 lines
1.8 KiB
Svelte
74 lines
1.8 KiB
Svelte
<svelte:options accessors={true} />
|
|
|
|
<script lang="ts">
|
|
import { IconSolid } from 'svelte-heros-v2';
|
|
|
|
export let id: string;
|
|
export let name: string | null = null;
|
|
export let type: string;
|
|
export let value: string | null = null;
|
|
export let required = false;
|
|
export let disabled = false;
|
|
|
|
export let inputElement: HTMLInputElement | undefined = undefined;
|
|
|
|
let initialType = type;
|
|
</script>
|
|
|
|
<!-- the cursor-not-allowed class must be set here because a disabled button does not respect the 'cursor' css property -->
|
|
<div class={type === 'submit' && disabled ? 'cursor-not-allowed' : ''}>
|
|
{#if type === 'submit'}
|
|
<input class="btn" {id} type="submit" {value} {disabled} bind:this={inputElement} />
|
|
{:else}
|
|
<div>
|
|
{#if $$slots.label}
|
|
<label class="label" for={id}>
|
|
<span class="label-text">
|
|
<slot name="label" />
|
|
{#if required}
|
|
<span class="text-red-700">*</span>
|
|
{/if}
|
|
</span>
|
|
</label>
|
|
{/if}
|
|
<div class="flex items-center">
|
|
<input
|
|
class={type === 'checkbox'
|
|
? 'checkbox'
|
|
: `input input-bordered w-[100%] sm:max-w-[16rem] ${
|
|
initialType === 'password' ? 'pr-11' : ''
|
|
}`}
|
|
{id}
|
|
{name}
|
|
{type}
|
|
{value}
|
|
{required}
|
|
{disabled}
|
|
autocomplete="off"
|
|
bind:this={inputElement}
|
|
/>
|
|
{#if initialType === 'password'}
|
|
<button
|
|
class="relative right-9"
|
|
type="button"
|
|
on:click={() => {
|
|
type = type === 'password' ? 'text' : 'password';
|
|
}}
|
|
>
|
|
{#if type === 'password'}
|
|
<IconSolid name="eye-slash-solid" />
|
|
{:else}
|
|
<IconSolid name="eye-solid" />
|
|
{/if}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{#if $$slots.notice}
|
|
<label class="label" for={id}>
|
|
<span class="label-text-alt"><slot name="notice" /></span>
|
|
</label>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|