Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add helpers to inputs

Browse Source
This commit is contained in:
Arman
2022-08-03 10:42:36 +02:00
parent 62d998b4f8
commit 3ed1463a42
7 changed files with 94 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/elements/forms/helper.svelte
+9 -3
View File
@@ -1,8 +1,14 @@
<script lang="ts">
export let type: false | 'success' | 'warning' | 'error' = 'warning';
export let type: false | 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
let icon = '';
switch (type) {
case 'neutral':
icon = 'info';
break;
case 'info':
icon = 'info';
break;
case 'success':
icon = 'check-circle';
break;
@@ -20,11 +26,11 @@
}
</script>
<li class={`helper u-${type} u-margin-block-start-8"`}>
<p class={`helper u-${type} u-margin-block-start-12"`}>
{#if icon !== ''}
<span class={`icon-${icon}`} aria-hidden="true" />
{/if}
<span class="text">
<slot />
</span>
</li>
</p>
src/lib/elements/forms/inputEmail.svelte
-1
View File
@@ -13,7 +13,6 @@
export let autocomplete = false;
export let errorMessage = 'Your email should be formatted as: name@example.com';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLInputElement;
src/lib/elements/forms/inputNumber.svelte
+17 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { FormItem } from '.';
import { FormItem, Helper } from '.';
export let label: string;
export let showLabel = true;
@@ -12,6 +12,9 @@
export let autofocus = false;
export let maxlength: number = null;
export let minlength: number = null;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLInputElement;
@@ -20,12 +23,22 @@
element.focus();
}
});
const handleInvalid = (event: Event) => {
event.preventDefault();
showHelper = true;
};
$: if (value) {
showHelper = false;
}
</script>
<FormItem>
<label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
<div class="input-text-wrapper">
<input
on:invalid={handleInvalid}
{id}
{placeholder}
{disabled}
@@ -37,4 +50,7 @@
bind:value
bind:this={element} />
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputPassword.svelte
+17 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { FormItem } from '.';
import { FormItem, Helper } from '.';
export let id: string;
export let label: string;
@@ -13,6 +13,9 @@
export let meter = true;
export let autocomplete = false;
export let showPasswordButton = false;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLInputElement;
let showInPlainText = false;
@@ -23,6 +26,14 @@
}
});
const handleInvalid = (event: Event) => {
event.preventDefault();
showHelper = true;
};
$: if (value) {
showHelper = false;
}
$: strength = value ? value.length * 10 : 0;
</script>
@@ -31,6 +42,7 @@
<div class="input-text-wrapper">
{#if showInPlainText}
<input
on:invalid={handleInvalid}
type="text"
{id}
name={id}
@@ -43,6 +55,7 @@
bind:this={element} />
{:else}
<input
on:invalid={handleInvalid}
{id}
{placeholder}
{disabled}
@@ -77,4 +90,7 @@
</button>
{/if}
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputPhone.svelte
+17 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { FormItem } from '.';
import { FormItem, Helper } from '.';
export let label: string;
export let showLabel = true;
@@ -12,6 +12,9 @@
export let autofocus = false;
export let autocomplete = false;
export let maxlength: number = null;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLInputElement;
@@ -20,12 +23,22 @@
element.focus();
}
});
const handleInvalid = (event: Event) => {
event.preventDefault();
showHelper = true;
};
$: if (value) {
showHelper = false;
}
</script>
<FormItem>
<label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
<div class="input-text-wrapper">
<input
on:invalid={handleInvalid}
{id}
{placeholder}
{disabled}
@@ -37,4 +50,7 @@
bind:value
bind:this={element} />
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputText.svelte
+17 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { FormItem } from '.';
import { FormItem, Helper } from '.';
export let label: string;
export let showLabel = true;
@@ -12,6 +12,9 @@
export let autofocus = false;
export let autocomplete = false;
export let maxlength: number = null;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLInputElement;
@@ -20,12 +23,22 @@
element.focus();
}
});
const handleInvalid = (event: Event) => {
event.preventDefault();
showHelper = true;
};
$: if (value) {
showHelper = false;
}
</script>
<FormItem>
<label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
<div class="input-text-wrapper">
<input
on:invalid={handleInvalid}
{id}
{placeholder}
{disabled}
@@ -37,4 +50,7 @@
bind:value
bind:this={element} />
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{/if}
</FormItem>
src/lib/elements/forms/inputTextarea.svelte
+17 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { FormItem } from '.';
import { FormItem, Helper } from '.';
export let label: string;
export let showLabel = true;
@@ -11,6 +11,9 @@
export let disabled = false;
export let autofocus = false;
export let maxlength: number = null;
export let errorMessage = 'An error occurred';
export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
export let showHelper = false;
let element: HTMLTextAreaElement;
@@ -19,12 +22,22 @@
element.focus();
}
});
const handleInvalid = (event: Event) => {
event.preventDefault();
showHelper = true;
};
$: if (value) {
showHelper = false;
}
</script>
<FormItem>
<label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
<div class="input-text-wrapper">
<textarea
on:invalid={handleInvalid}
{id}
{placeholder}
{disabled}
@@ -34,4 +47,7 @@
bind:value
bind:this={element} />
</div>
{#if showHelper}
<Helper type={errorType}>{errorMessage}</Helper>
{/if}
</FormItem>