51 lines
1.1 KiB
Svelte
51 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
export let id: string | null = null;
|
|
export let name: string | null = null;
|
|
export let value: string | null = null;
|
|
export let label: string | null = null;
|
|
export let notice: string | null = null;
|
|
export let required = false;
|
|
export let disabled = false;
|
|
export let readonly = false;
|
|
export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
|
|
export let rows = 2;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
</script>
|
|
|
|
<div>
|
|
{#if label}
|
|
<label class="label" for={id}>
|
|
<span class="label-text">
|
|
{label}
|
|
{#if required}
|
|
<span class="text-red-700">*</span>
|
|
{/if}
|
|
</span>
|
|
</label>
|
|
{/if}
|
|
<textarea
|
|
class="textarea w-full"
|
|
class:textarea-xs={size === 'xs'}
|
|
class:textarea-sm={size === 'sm'}
|
|
class:textarea-md={size === 'md'}
|
|
class:textarea-lg={size === 'lg'}
|
|
class:textarea-bordered={!readonly}
|
|
{id}
|
|
{name}
|
|
{required}
|
|
{disabled}
|
|
{readonly}
|
|
{rows}
|
|
bind:value
|
|
on:click={(e) => dispatch('click', e)}
|
|
/>
|
|
{#if notice}
|
|
<label class="label" for={id}>
|
|
<span class="label-text-alt">{notice}</span>
|
|
</label>
|
|
{/if}
|
|
</div>
|