fix(dashboard): swap svelte-autosize for svelte-textarea-autoresize

This commit is contained in:
Jake Fulmine
2022-08-17 21:40:10 +02:00
parent 3a7e8422af
commit 7aa4d49a97
8 changed files with 20 additions and 29 deletions
+2 -4
View File
@@ -3,7 +3,7 @@
import { createEventDispatcher, tick } from 'svelte';
import { Group } from '../../api/types';
import api from '../../api';
import autosize from 'svelte-autosize';
import { autoresize } from 'svelte-textarea-autoresize';
const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
@@ -80,8 +80,6 @@
loading = false;
deletion();
} catch (error) {
console.log(error);
deleteErr = error.message;
loading = false;
}
}
@@ -132,7 +130,7 @@
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
{/if}
<br>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={group.description} aria-label="group description"/>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={group.description} aria-label="group description"/>
</div>
{#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits">Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal} aria-label="delete group">Delete</Button>
{:else}<Button style="flex: 0" color="primary" disabled aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" disabled aria-label="delete group">Delete</Button>{/if}
+2 -2
View File
@@ -2,7 +2,7 @@
import { Row, Col, Input, Button, Label, Alert, Spinner, Accordion, AccordionItem, CardTitle } from 'sveltestrap';
import { Group } from '../../api/types';
import api from '../../api';
import autosize from 'svelte-autosize';
import { autoresize } from 'svelte-textarea-autoresize';
import { createEventDispatcher } from 'svelte';
import FaPlus from 'svelte-icons/fa/FaPlus.svelte';
@@ -167,7 +167,7 @@
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
{/if}
<br>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize />
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize />
</div>
{#if !loading && input.name}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button>
{:else if !input.name }<Button style="flex: 0" color="primary" disabled>Submit</Button>
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { Row, Col, Input, Button, Label, Alert, Spinner, Modal, ModalHeader, ModalBody } from 'sveltestrap';
import { createEventDispatcher, tick } from 'svelte';
import autosize from 'svelte-autosize';
import { autoresize } from 'svelte-textarea-autoresize';
import moment from 'moment';
import { Member } from '../../api/types'
@@ -162,7 +162,7 @@
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
{/if}
<br>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={member.description} aria-label="member description"/>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={member.description} aria-label="member description"/>
</div>
{#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits" >Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal} aria-label="delete member">Delete</Button>
{:else}<Button style="flex: 0" color="primary" disabled aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" disabled aria-label="delete member">Delete</Button>{/if}
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { Accordion, AccordionItem, Row, Col, Input, Button, Label, Alert, Spinner, CardTitle, InputGroup } from 'sveltestrap';
import { createEventDispatcher } from 'svelte';
import autosize from 'svelte-autosize';
import { autoresize } from 'svelte-textarea-autoresize';
import moment from 'moment';
import FaPlus from 'svelte-icons/fa/FaPlus.svelte';
import { Member } from '../../api/types';
@@ -242,7 +242,7 @@
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
{/if}
<br>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={input.description}/>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={input.description}/>
</div>
{#if !loading && input.name}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button>
{:else if !input.name }<Button style="flex: 0" color="primary" disabled>Submit</Button>
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { Row, Col, Input, Button, Label, Alert, Spinner } from 'sveltestrap';
import autosize from 'svelte-autosize';
import { autoresize } from 'svelte-textarea-autoresize';
// import moment from 'moment-timezone';
import { currentUser } from '../../stores';
@@ -94,7 +94,7 @@
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
{/if}
<br>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description} aria-label="system description"/>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={user.description} aria-label="system description"/>
</div>
{#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits" >Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button>
{:else}<Button style="flex: 0" color="primary" disabled aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button>{/if}