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

View File

@ -32,10 +32,10 @@
"moment": "^2.29.1",
"sass": "^1.52.2",
"svelecte": "^3.4.5",
"svelte-autosize": "^1.0.1",
"svelte-icons": "^2.1.0",
"svelte-navigator": "^3.1.5",
"svelte-preprocess": "^4.10.6",
"svelte-textarea-autoresize": "^1.0.0",
"sveltestrap": "^5.6.3",
"twemoji": "^13.1.0"
}

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}

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>

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}

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>

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}

View File

@ -1,7 +1,7 @@
<script lang="ts">
import { Card, CardHeader, CardBody, Container, Row, Col, CardTitle, Tooltip, Button } from 'sveltestrap';
import Toggle from 'svelte-toggle';
import autosize from 'svelte-autosize';
import { autoresize } from 'svelte-textarea-autoresize';
import FaCogs from 'svelte-icons/fa/FaCogs.svelte'
import { Config } from '../api/types';
import api from '../api';
@ -109,13 +109,13 @@
<CardBody>
<p>Templates allow you to quickly set up a member description with a specific layout. Put in the template in one of the below fields, and access it whenever you create or edit a member. You can set up to 3 templates.</p>
<b>Template 1</b>
<textarea class="form-control" bind:value={descriptions[0]} maxlength={1000} use:autosize placeholder={descriptions[0]} aria-label="Description template 1"/>
<textarea class="form-control" bind:value={descriptions[0]} maxlength={1000} use:autoresize placeholder={descriptions[0]} aria-label="Description template 1"/>
<br>
<b>Template 2</b>
<textarea class="form-control" bind:value={descriptions[1]} maxlength={1000} use:autosize placeholder={descriptions[1]} aria-label="Description template 2"/>
<textarea class="form-control" bind:value={descriptions[1]} maxlength={1000} use:autoresize placeholder={descriptions[1]} aria-label="Description template 2"/>
<br>
<b>Template 3</b>
<textarea class="form-control" bind:value={descriptions[2]} maxlength={1000} use:autosize placeholder={descriptions[2]} aria-label="Description template 3"/>
<textarea class="form-control" bind:value={descriptions[2]} maxlength={1000} use:autoresize placeholder={descriptions[2]} aria-label="Description template 3"/>
<br>
<Button on:click={saveDescriptionTemplates}>Save</Button>
</CardBody>

View File

@ -191,11 +191,6 @@ async@^2.6.1:
dependencies:
lodash "^4.17.14"
autosize@*:
version "5.0.1"
resolved "https://registry.yarnpkg.com/autosize/-/autosize-5.0.1.tgz#ed269b0fa9b7eb47627048a1bb3299e99e003a0f"
integrity sha512-UIWUlE4TOVPNNj2jjrU39wI4hEYbneUypEqcyRmRFIx5CC2gNdg3rQr+Zh7/3h6egbBvm33TDQjNQKtj9Tk1HA==
axios@^0.24.0:
version "0.24.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
@ -1079,13 +1074,6 @@ svelecte@^3.4.5:
dependencies:
svelte-tiny-virtual-list "^1.1.7"
svelte-autosize@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/svelte-autosize/-/svelte-autosize-1.0.1.tgz#2121b2373ab89191a58aaa9a3aec957ca475e812"
integrity sha512-HBk7Xrt5bS0rpp5zSUZvuXNKc0UhAxvJGLNy1eTHMDK/KkHb0UsgWpbyn60jW3tE2ZfuXfLttnHvvb1H4zZZ0Q==
dependencies:
autosize "*"
svelte-check@^2.2.7:
version "2.2.10"
resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-2.2.10.tgz#ca2e4fde2d077e703792d8301a643c36375f646c"
@ -1142,6 +1130,11 @@ svelte-preprocess@^4.10.6:
sorcery "^0.10.0"
strip-indent "^3.0.0"
svelte-textarea-autoresize@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/svelte-textarea-autoresize/-/svelte-textarea-autoresize-1.0.0.tgz#31c161e9f5109fbe20bbb6c429ae11a7520bde97"
integrity sha512-n+t7GnkhLkKHJokrcSNlH8PiiLvu5bTgEwhpEsvVdAb4gpQ21rbyyHqvRYYa4quFv5vnQVjgxhYR6oq0yDdhdw==
svelte-tiny-virtual-list@^1.1.7:
version "1.1.7"
resolved "https://registry.yarnpkg.com/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-1.1.7.tgz#7ba8ee1fc23372512de2aba50d9674972a35c6f7"