refac: textarea

This commit is contained in:
Timothy Jaeryang Baek 2024-11-26 14:14:26 -08:00
parent 4383306770
commit 789e1db260
2 changed files with 275 additions and 281 deletions

View File

@ -55,13 +55,14 @@
};
</script>
<form
{#if taskConfig}
<form
class="flex flex-col h-full justify-between space-y-3 text-sm"
on:submit|preventDefault={() => {
updateInterfaceHandler();
dispatch('save');
}}
>
>
<div class=" overflow-y-scroll scrollbar-hidden h-full pr-1.5">
<div>
<div class=" mb-2.5 text-sm font-medium flex items-center">
@ -130,7 +131,9 @@
>
<Textarea
bind:value={taskConfig.TITLE_GENERATION_PROMPT_TEMPLATE}
placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
placeholder={$i18n.t(
'Leave empty to use the default prompt, or enter a custom prompt'
)}
/>
</Tooltip>
</div>
@ -190,7 +193,9 @@
>
<Textarea
bind:value={taskConfig.QUERY_GENERATION_PROMPT_TEMPLATE}
placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
placeholder={$i18n.t(
'Leave empty to use the default prompt, or enter a custom prompt'
)}
/>
</Tooltip>
</div>
@ -245,7 +250,8 @@
required
>
{#if banner.type == ''}
<option value="" selected disabled class="text-gray-900">{$i18n.t('Type')}</option
<option value="" selected disabled class="text-gray-900"
>{$i18n.t('Type')}</option
>
{/if}
<option value="info" class="text-gray-900">{$i18n.t('Info')}</option>
@ -387,4 +393,5 @@
{$i18n.t('Save')}
</button>
</div>
</form>
</form>
{/if}

View File

@ -13,28 +13,15 @@
// Adjust height on mount and after setting the element.
onMount(async () => {
await tick();
adjustHeight();
});
// This reactive statement runs whenever `value` changes
$: adjustHeight();
// Adjust height to match content
const adjustHeight = () => {
if (textareaElement) {
// Reset height to calculate the correct scroll height
textareaElement.style.height = 'auto';
textareaElement.style.height = `${textareaElement.scrollHeight}px`;
}
};
</script>
<textarea
bind:this={textareaElement}
bind:value
{placeholder}
on:input={adjustHeight}
class={className}
style="field-sizing: content;"
{rows}
{required}
/>