remove select component
This commit is contained in:
@@ -1,66 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Label from './Label.svelte';
|
||||
import { validate } from '@svelte-toolkit/validate';
|
||||
|
||||
let {
|
||||
name,
|
||||
label,
|
||||
value = $bindable(''),
|
||||
required,
|
||||
missingMessage,
|
||||
node = $bindable(),
|
||||
options,
|
||||
placeholder
|
||||
}: {
|
||||
name: string;
|
||||
label?: string;
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
required?: boolean;
|
||||
missingMessage?: string;
|
||||
node?: HTMLSelectElement;
|
||||
options: {
|
||||
label: string;
|
||||
value: string;
|
||||
}[];
|
||||
} = $props();
|
||||
|
||||
let valid: boolean = $state(true);
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<Label for={name}>{label}</Label>
|
||||
<select
|
||||
id={name}
|
||||
{name}
|
||||
bind:value
|
||||
class={[
|
||||
'border-accent w-full rounded-sm border bg-white px-[1.125rem] py-3.5 font-normal transition-colors',
|
||||
'text-text placeholder:text-text/60 dark:border-accent/50 dark:bg-text-800 placeholder:font-normal',
|
||||
'dark:text-background dark:placeholder:text-background/60 dark:sm:bg-slate-800',
|
||||
!valid && 'border-red-500!'
|
||||
]}
|
||||
use:validate={{ required }}
|
||||
onvalidate={(e) => {
|
||||
valid = e.detail.valid;
|
||||
}}
|
||||
bind:this={node}
|
||||
>
|
||||
{#if placeholder}
|
||||
<option value="" disabled selected={value === '' || value === undefined}>
|
||||
{placeholder}
|
||||
</option>
|
||||
{/if}
|
||||
{#each options as opt}
|
||||
<option value={opt.value} selected={opt.value === value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
|
||||
<Label for={name} error>
|
||||
{missingMessage !== undefined && missingMessage !== '' ? missingMessage : 'Field is required'}
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -8,7 +8,6 @@
|
||||
import PhoneInput from '$lib/PhoneInput.svelte';
|
||||
import PinInput from '$lib/PinInput.svelte';
|
||||
import RadioGroup from '$lib/RadioGroup.svelte';
|
||||
import Select from '$lib/Select.svelte';
|
||||
import StyledRawInput from '$lib/StyledRawInput.svelte';
|
||||
import TextInput from '$lib/TextInput.svelte';
|
||||
import TimeInput from '$lib/TimeInput.svelte';
|
||||
@@ -115,19 +114,6 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="component">
|
||||
<p class="title">Select</p>
|
||||
<Select
|
||||
name="example-select"
|
||||
label="Select an option"
|
||||
options={[
|
||||
{ label: 'Option 1', value: 'option1' },
|
||||
{ label: 'Option 2', value: 'option2' },
|
||||
{ label: 'Option 3', value: 'option3' }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="component">
|
||||
<p class="title">Styled Raw Input, Text Input</p>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user