flowbite-svelte 0.15.9 → 0.15.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -0
- package/README.md +303 -162
- package/cards/Card.svelte +10 -29
- package/dropdowns/DropdownDefault.svelte +1 -1
- package/forms/RadioInline.svelte +5 -0
- package/forms/RadioInline.svelte.d.ts +16 -0
- package/forms/RadioItem.svelte +56 -0
- package/forms/RadioItem.svelte.d.ts +30 -0
- package/forms/Search.svelte +17 -0
- package/forms/Search.svelte.d.ts +23 -0
- package/index.js +3 -1
- package/package.json +5 -9
- package/types.d.ts +5 -1
- package/auth/Confirm.svelte +0 -23
- package/auth/Confirm.svelte.d.ts +0 -19
- package/auth/ForgotPassword.svelte +0 -57
- package/auth/ForgotPassword.svelte.d.ts +0 -21
- package/auth/Input.svelte +0 -0
- package/auth/Input.svelte.d.ts +0 -19
- package/auth/Login.svelte +0 -116
- package/auth/Login.svelte.d.ts +0 -25
- package/auth/Register.svelte +0 -118
- package/auth/Register.svelte.d.ts +0 -23
- package/auth/Reset.svelte +0 -57
- package/auth/Reset.svelte.d.ts +0 -22
- package/forms/Radio.svelte +0 -19
- package/forms/Radio.svelte.d.ts +0 -22
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<script>export let divClass = 'flex items-center mr-4';
|
|
2
|
+
export let inputClass = 'w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600';
|
|
3
|
+
export let labelClass = 'block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300';
|
|
4
|
+
export let name = '';
|
|
5
|
+
export let options;
|
|
6
|
+
export let divHelperClass = 'flex items-center h-5';
|
|
7
|
+
export let labelHelperClass = 'font-medium text-gray-900 dark:text-gray-300';
|
|
8
|
+
export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
|
|
9
|
+
export let color = 'blue';
|
|
10
|
+
if (color === 'red') {
|
|
11
|
+
inputClass = 'w-4 h-4 text-red-600 bg-gray-100 border-gray-300 focus:ring-red-500 dark:focus:ring-red-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
|
|
12
|
+
}
|
|
13
|
+
else if (color === 'green') {
|
|
14
|
+
inputClass = 'w-4 h-4 text-green-600 bg-gray-100 border-gray-300 focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
|
|
15
|
+
}
|
|
16
|
+
else if (color === 'purple') {
|
|
17
|
+
inputClass = 'w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
|
|
18
|
+
}
|
|
19
|
+
else if (color === 'teal') {
|
|
20
|
+
inputClass = 'w-4 h-4 text-teal-600 bg-gray-100 border-gray-300 focus:ring-teal-500 dark:focus:ring-teal-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
|
|
21
|
+
}
|
|
22
|
+
else if (color === 'yellow') {
|
|
23
|
+
inputClass = 'w-4 h-4 text-yellow-400 bg-gray-100 border-gray-300 focus:ring-yellow-500 dark:focus:ring-yellow-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
|
|
24
|
+
}
|
|
25
|
+
else if (color === 'orange') {
|
|
26
|
+
inputClass = 'w-4 h-4 text-orange-500 bg-gray-100 border-gray-300 focus:ring-orange-500 dark:focus:ring-orange-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
inputClass = 'w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600';
|
|
30
|
+
}
|
|
31
|
+
export let helper;
|
|
32
|
+
export let id;
|
|
33
|
+
export let value;
|
|
34
|
+
export let label;
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
{#if helper}
|
|
38
|
+
<div class="flex">
|
|
39
|
+
<div class={divHelperClass}>
|
|
40
|
+
<input {id} type="radio" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {...$$restProps} />
|
|
41
|
+
</div>
|
|
42
|
+
<div class="ml-2 text-sm">
|
|
43
|
+
<label for={id} class={labelHelperClass}>
|
|
44
|
+
{@html label}
|
|
45
|
+
</label>
|
|
46
|
+
<p id="{id}-helper-radio-text" class={helperClass}>{helper}</p>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
{:else}
|
|
50
|
+
<div class={divClass}>
|
|
51
|
+
<input {id} type="radio" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {...$$restProps} />
|
|
52
|
+
<label for={id} class={labelClass}>
|
|
53
|
+
{@html label}
|
|
54
|
+
</label>
|
|
55
|
+
</div>
|
|
56
|
+
{/if}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
import type { RadioType, RadioColorType } from '../types';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
[x: string]: any;
|
|
6
|
+
divClass?: string;
|
|
7
|
+
inputClass?: string;
|
|
8
|
+
labelClass?: string;
|
|
9
|
+
name?: string;
|
|
10
|
+
options: RadioType[];
|
|
11
|
+
divHelperClass?: string;
|
|
12
|
+
labelHelperClass?: string;
|
|
13
|
+
helperClass?: string;
|
|
14
|
+
color?: RadioColorType;
|
|
15
|
+
helper: string;
|
|
16
|
+
id: string;
|
|
17
|
+
value: string;
|
|
18
|
+
label: string;
|
|
19
|
+
};
|
|
20
|
+
events: {
|
|
21
|
+
[evt: string]: CustomEvent<any>;
|
|
22
|
+
};
|
|
23
|
+
slots: {};
|
|
24
|
+
};
|
|
25
|
+
export declare type RadioItemProps = typeof __propDef.props;
|
|
26
|
+
export declare type RadioItemEvents = typeof __propDef.events;
|
|
27
|
+
export declare type RadioItemSlots = typeof __propDef.slots;
|
|
28
|
+
export default class RadioItem extends SvelteComponentTyped<RadioItemProps, RadioItemEvents, RadioItemSlots> {
|
|
29
|
+
}
|
|
30
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script>export let id = '';
|
|
2
|
+
export let labelClass = 'mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300';
|
|
3
|
+
export let inputClass = 'block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
|
|
4
|
+
export let btnClass = 'text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
|
|
5
|
+
export let placeholder = 'Search';
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<form on:submit>
|
|
9
|
+
<label for={id} class={labelClass}>Search</label>
|
|
10
|
+
<div class="relative">
|
|
11
|
+
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
|
12
|
+
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
|
|
13
|
+
</div>
|
|
14
|
+
<input type="search" {id} class={inputClass} {placeholder} {...$$restProps} />
|
|
15
|
+
<button type="submit" class={btnClass}>Search</button>
|
|
16
|
+
</div>
|
|
17
|
+
</form>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
id?: string;
|
|
6
|
+
labelClass?: string;
|
|
7
|
+
inputClass?: string;
|
|
8
|
+
btnClass?: string;
|
|
9
|
+
placeholder?: string;
|
|
10
|
+
};
|
|
11
|
+
events: {
|
|
12
|
+
submit: SubmitEvent;
|
|
13
|
+
} & {
|
|
14
|
+
[evt: string]: CustomEvent<any>;
|
|
15
|
+
};
|
|
16
|
+
slots: {};
|
|
17
|
+
};
|
|
18
|
+
export declare type SearchProps = typeof __propDef.props;
|
|
19
|
+
export declare type SearchEvents = typeof __propDef.events;
|
|
20
|
+
export declare type SearchSlots = typeof __propDef.slots;
|
|
21
|
+
export default class Search extends SvelteComponentTyped<SearchProps, SearchEvents, SearchSlots> {
|
|
22
|
+
}
|
|
23
|
+
export {};
|
package/index.js
CHANGED
|
@@ -62,9 +62,11 @@ export { default as Fileupload } from './forms/Fileupload.svelte'
|
|
|
62
62
|
export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte'
|
|
63
63
|
export { default as Iconinput } from './forms/Iconinput.svelte'
|
|
64
64
|
export { default as Input } from './forms/Input.svelte'
|
|
65
|
-
export { default as
|
|
65
|
+
export { default as RadioInline } from './forms/RadioInline.svelte'
|
|
66
|
+
export { default as RadioItem } from './forms/RadioItem.svelte'
|
|
66
67
|
export { default as Range } from './forms/Range.svelte'
|
|
67
68
|
export { default as SingleCheckbox } from './forms/SingleCheckbox.svelte'
|
|
69
|
+
export { default as Search } from './forms/Search.svelte'
|
|
68
70
|
export { default as Select } from './forms/Select.svelte'
|
|
69
71
|
export { default as Textarea } from './forms/Textarea.svelte'
|
|
70
72
|
export { default as Toggle } from './forms/Toggle.svelte'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.15.
|
|
3
|
+
"version": "0.15.12",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "./package/index.js",
|
|
6
6
|
"author": {
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"devDependencies": {
|
|
15
15
|
"@codewithshin/svelte-feathericons": "^0.1.9",
|
|
16
|
-
"@codewithshin/svelte-sidebar": "^0.
|
|
16
|
+
"@codewithshin/svelte-sidebar": "^0.5.7",
|
|
17
17
|
"@codewithshin/svelte-utterances": "^0.2.2",
|
|
18
18
|
"@playwright/test": "^1.21.0",
|
|
19
19
|
"@sveltejs/adapter-auto": "next",
|
|
@@ -90,12 +90,6 @@
|
|
|
90
90
|
"./alerts/Alert.svelte": "./alerts/Alert.svelte",
|
|
91
91
|
"./alerts/BorderAlert.svelte": "./alerts/BorderAlert.svelte",
|
|
92
92
|
"./alerts/InfoAlert.svelte": "./alerts/InfoAlert.svelte",
|
|
93
|
-
"./auth/Confirm.svelte": "./auth/Confirm.svelte",
|
|
94
|
-
"./auth/ForgotPassword.svelte": "./auth/ForgotPassword.svelte",
|
|
95
|
-
"./auth/Input.svelte": "./auth/Input.svelte",
|
|
96
|
-
"./auth/Login.svelte": "./auth/Login.svelte",
|
|
97
|
-
"./auth/Register.svelte": "./auth/Register.svelte",
|
|
98
|
-
"./auth/Reset.svelte": "./auth/Reset.svelte",
|
|
99
93
|
"./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
|
|
100
94
|
"./badges/Badge.svelte": "./badges/Badge.svelte",
|
|
101
95
|
"./badges/BadgeIcon.svelte": "./badges/BadgeIcon.svelte",
|
|
@@ -134,8 +128,10 @@
|
|
|
134
128
|
"./forms/FloatingLabelInput.svelte": "./forms/FloatingLabelInput.svelte",
|
|
135
129
|
"./forms/Iconinput.svelte": "./forms/Iconinput.svelte",
|
|
136
130
|
"./forms/Input.svelte": "./forms/Input.svelte",
|
|
137
|
-
"./forms/
|
|
131
|
+
"./forms/RadioInline.svelte": "./forms/RadioInline.svelte",
|
|
132
|
+
"./forms/RadioItem.svelte": "./forms/RadioItem.svelte",
|
|
138
133
|
"./forms/Range.svelte": "./forms/Range.svelte",
|
|
134
|
+
"./forms/Search.svelte": "./forms/Search.svelte",
|
|
139
135
|
"./forms/Select.svelte": "./forms/Select.svelte",
|
|
140
136
|
"./forms/SingleCheckbox.svelte": "./forms/SingleCheckbox.svelte",
|
|
141
137
|
"./forms/Textarea.svelte": "./forms/Textarea.svelte",
|
package/types.d.ts
CHANGED
|
@@ -117,12 +117,16 @@ export interface PillTabType {
|
|
|
117
117
|
selected: boolean;
|
|
118
118
|
href: string;
|
|
119
119
|
}
|
|
120
|
+
export declare type RadioColorType = 'blue' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'orange';
|
|
120
121
|
export interface RadioType {
|
|
121
122
|
id: string;
|
|
122
|
-
|
|
123
|
+
name: string;
|
|
124
|
+
label: string | HTMLElement;
|
|
123
125
|
value: string;
|
|
124
126
|
checked?: boolean;
|
|
125
127
|
disabled?: boolean;
|
|
128
|
+
helper?: string;
|
|
129
|
+
color?: RadioColorType;
|
|
126
130
|
}
|
|
127
131
|
export declare type SelectOptionType = {
|
|
128
132
|
name: string;
|
package/auth/Confirm.svelte
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
<script>import { Button, Alert, Spinner } from '../index';
|
|
2
|
-
export let loginLink;
|
|
3
|
-
export let success;
|
|
4
|
-
export let error;
|
|
5
|
-
</script>
|
|
6
|
-
|
|
7
|
-
<div
|
|
8
|
-
class="p-4 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700 w-full"
|
|
9
|
-
>
|
|
10
|
-
{#if success}
|
|
11
|
-
<h1 class="text-xl w-full mb-4 font-medium text-gray-900 dark:text-white">
|
|
12
|
-
Your email is confirmed.
|
|
13
|
-
</h1>
|
|
14
|
-
<a href={loginLink.href} class="py-4">
|
|
15
|
-
<Button textSize="text-sm" >{loginLink.name}</Button>
|
|
16
|
-
</a>
|
|
17
|
-
{:else}
|
|
18
|
-
<Spinner />
|
|
19
|
-
{/if}
|
|
20
|
-
{#if error}
|
|
21
|
-
<Alert alertId="alert-red" color="red" closeBtn>{error}</Alert>
|
|
22
|
-
{/if}
|
|
23
|
-
</div>
|
package/auth/Confirm.svelte.d.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { LinkType } from '../types';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
loginLink: LinkType;
|
|
6
|
-
success: string;
|
|
7
|
-
error: string;
|
|
8
|
-
};
|
|
9
|
-
events: {
|
|
10
|
-
[evt: string]: CustomEvent<any>;
|
|
11
|
-
};
|
|
12
|
-
slots: {};
|
|
13
|
-
};
|
|
14
|
-
export declare type ConfirmProps = typeof __propDef.props;
|
|
15
|
-
export declare type ConfirmEvents = typeof __propDef.events;
|
|
16
|
-
export declare type ConfirmSlots = typeof __propDef.slots;
|
|
17
|
-
export default class Confirm extends SvelteComponentTyped<ConfirmProps, ConfirmEvents, ConfirmSlots> {
|
|
18
|
-
}
|
|
19
|
-
export {};
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
<script>import { Alert } from '../index';
|
|
2
|
-
export let forgot = undefined;
|
|
3
|
-
export let email = '';
|
|
4
|
-
export let error = '';
|
|
5
|
-
export let message = '';
|
|
6
|
-
export let data = '';
|
|
7
|
-
</script>
|
|
8
|
-
|
|
9
|
-
<div
|
|
10
|
-
class="p-4 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700 w-full"
|
|
11
|
-
>
|
|
12
|
-
<form class="space-y-6" on:submit|preventDefault={forgot}>
|
|
13
|
-
<div class="heading">
|
|
14
|
-
<a class="back" href="/"><i class="bi bi-arrow-left dark:text-white" /></a>
|
|
15
|
-
<h2 class="text-xl font-medium text-gray-900 dark:text-white">Forgot password</h2>
|
|
16
|
-
</div>
|
|
17
|
-
<div>
|
|
18
|
-
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
19
|
-
>Email</label
|
|
20
|
-
>
|
|
21
|
-
<input
|
|
22
|
-
type="email"
|
|
23
|
-
required
|
|
24
|
-
name="email"
|
|
25
|
-
placeholder="Enter your email"
|
|
26
|
-
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
|
|
27
|
-
bind:value={email}
|
|
28
|
-
/>
|
|
29
|
-
{#if data}
|
|
30
|
-
<div class="mt-6">
|
|
31
|
-
<Alert alertId="alert-green" color="yellow" closeBtn>
|
|
32
|
-
{data}
|
|
33
|
-
</Alert>
|
|
34
|
-
</div>
|
|
35
|
-
{/if}
|
|
36
|
-
{#if message}
|
|
37
|
-
<div class="mt-6">
|
|
38
|
-
<Alert alertId="alert-green" color="green" closeBtn>
|
|
39
|
-
{message}
|
|
40
|
-
</Alert>
|
|
41
|
-
</div>
|
|
42
|
-
{/if}
|
|
43
|
-
{#if error}
|
|
44
|
-
<div class="mt-6">
|
|
45
|
-
<Alert alertId="alert-green" color="red" closeBtn>
|
|
46
|
-
{error}
|
|
47
|
-
</Alert>
|
|
48
|
-
</div>
|
|
49
|
-
{/if}
|
|
50
|
-
</div>
|
|
51
|
-
<button
|
|
52
|
-
type="submit"
|
|
53
|
-
class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
|
54
|
-
>Send recovery email</button
|
|
55
|
-
>
|
|
56
|
-
</form>
|
|
57
|
-
</div>
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { AuthFunctionType } from '../types';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
forgot?: AuthFunctionType;
|
|
6
|
-
email?: string;
|
|
7
|
-
error?: string;
|
|
8
|
-
message?: string;
|
|
9
|
-
data?: string;
|
|
10
|
-
};
|
|
11
|
-
events: {
|
|
12
|
-
[evt: string]: CustomEvent<any>;
|
|
13
|
-
};
|
|
14
|
-
slots: {};
|
|
15
|
-
};
|
|
16
|
-
export declare type ForgotPasswordProps = typeof __propDef.props;
|
|
17
|
-
export declare type ForgotPasswordEvents = typeof __propDef.events;
|
|
18
|
-
export declare type ForgotPasswordSlots = typeof __propDef.slots;
|
|
19
|
-
export default class ForgotPassword extends SvelteComponentTyped<ForgotPasswordProps, ForgotPasswordEvents, ForgotPasswordSlots> {
|
|
20
|
-
}
|
|
21
|
-
export {};
|
package/auth/Input.svelte
DELETED
|
File without changes
|
package/auth/Input.svelte.d.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} InputProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} InputEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} InputSlots */
|
|
4
|
-
export default class Input extends SvelteComponentTyped<{}, {
|
|
5
|
-
[evt: string]: CustomEvent<any>;
|
|
6
|
-
}, {}> {
|
|
7
|
-
}
|
|
8
|
-
export type InputProps = typeof __propDef.props;
|
|
9
|
-
export type InputEvents = typeof __propDef.events;
|
|
10
|
-
export type InputSlots = typeof __propDef.slots;
|
|
11
|
-
import { SvelteComponentTyped } from "svelte";
|
|
12
|
-
declare const __propDef: {
|
|
13
|
-
props: {};
|
|
14
|
-
events: {
|
|
15
|
-
[evt: string]: CustomEvent<any>;
|
|
16
|
-
};
|
|
17
|
-
slots: {};
|
|
18
|
-
};
|
|
19
|
-
export {};
|
package/auth/Login.svelte
DELETED
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
<script>import { Alert } from '../index';
|
|
2
|
-
export let login = undefined;
|
|
3
|
-
export let title = 'Sign in';
|
|
4
|
-
export let btnSignInColor = 'blue';
|
|
5
|
-
export let rememberMe = false;
|
|
6
|
-
export let signup = undefined;
|
|
7
|
-
export let lostPassword = undefined;
|
|
8
|
-
export let error = '';
|
|
9
|
-
export let submitText = 'Login to your account';
|
|
10
|
-
let submitClass;
|
|
11
|
-
export let fields;
|
|
12
|
-
if (btnSignInColor === 'blue') {
|
|
13
|
-
submitClass =
|
|
14
|
-
'w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
|
|
15
|
-
}
|
|
16
|
-
else if (btnSignInColor === 'gray') {
|
|
17
|
-
submitClass =
|
|
18
|
-
'w-full text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
|
|
19
|
-
}
|
|
20
|
-
else if (btnSignInColor === 'red') {
|
|
21
|
-
submitClass =
|
|
22
|
-
'w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
|
|
23
|
-
}
|
|
24
|
-
else if (btnSignInColor === 'yellow') {
|
|
25
|
-
submitClass =
|
|
26
|
-
'w-full text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
|
|
27
|
-
}
|
|
28
|
-
else if (btnSignInColor === 'green') {
|
|
29
|
-
submitClass =
|
|
30
|
-
'w-full text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
|
|
31
|
-
}
|
|
32
|
-
else if (btnSignInColor === 'indigo') {
|
|
33
|
-
submitClass =
|
|
34
|
-
'w-full text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
|
|
35
|
-
}
|
|
36
|
-
else if (btnSignInColor === 'purple') {
|
|
37
|
-
submitClass =
|
|
38
|
-
'w-full text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
|
|
39
|
-
}
|
|
40
|
-
else if (btnSignInColor === 'pink') {
|
|
41
|
-
submitClass =
|
|
42
|
-
'w-full text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
|
|
43
|
-
}
|
|
44
|
-
else {
|
|
45
|
-
submitClass =
|
|
46
|
-
'w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
|
|
47
|
-
}
|
|
48
|
-
</script>
|
|
49
|
-
|
|
50
|
-
<div
|
|
51
|
-
class="p-4 max-w-sm w-full bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700"
|
|
52
|
-
>
|
|
53
|
-
<form class="space-y-6" on:submit|preventDefault={login}>
|
|
54
|
-
<h3 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h3>
|
|
55
|
-
{#each fields as field}
|
|
56
|
-
<div>
|
|
57
|
-
<label
|
|
58
|
-
for={field.label}
|
|
59
|
-
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
60
|
-
>{field.label}</label
|
|
61
|
-
>
|
|
62
|
-
<input
|
|
63
|
-
type={field.fieldtype}
|
|
64
|
-
name={field.label}
|
|
65
|
-
id={field.label}
|
|
66
|
-
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
|
|
67
|
-
placeholder={field.placeholder}
|
|
68
|
-
required={field.required}
|
|
69
|
-
/>
|
|
70
|
-
</div>
|
|
71
|
-
{/each}
|
|
72
|
-
<div class="flex items-start">
|
|
73
|
-
{#if rememberMe}
|
|
74
|
-
<div class="flex items-start">
|
|
75
|
-
<div class="flex items-center h-5">
|
|
76
|
-
<input
|
|
77
|
-
id="remember"
|
|
78
|
-
type="checkbox"
|
|
79
|
-
class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
|
|
80
|
-
/>
|
|
81
|
-
</div>
|
|
82
|
-
<div class="ml-3 text-sm">
|
|
83
|
-
<label for="remember" class="font-medium text-gray-900 dark:text-gray-300"
|
|
84
|
-
>Remember me</label
|
|
85
|
-
>
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
88
|
-
{/if}
|
|
89
|
-
{#if lostPassword}
|
|
90
|
-
<a
|
|
91
|
-
href={lostPassword.href}
|
|
92
|
-
rel={lostPassword.rel}
|
|
93
|
-
class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500"
|
|
94
|
-
>{lostPassword.name}</a
|
|
95
|
-
>
|
|
96
|
-
{/if}
|
|
97
|
-
</div>
|
|
98
|
-
{#if error}
|
|
99
|
-
<div class="mt-6">
|
|
100
|
-
<Alert alertId="alert-red" color="red" closeBtn>
|
|
101
|
-
{error}
|
|
102
|
-
</Alert>
|
|
103
|
-
</div>
|
|
104
|
-
{/if}
|
|
105
|
-
<button type="submit" class={submitClass}>{submitText}</button>
|
|
106
|
-
{#if signup}
|
|
107
|
-
<div class="text-sm font-medium text-gray-500 dark:text-gray-300">
|
|
108
|
-
Not registered? <a
|
|
109
|
-
href={signup.href}
|
|
110
|
-
rel={signup.rel}
|
|
111
|
-
class="text-blue-700 hover:underline dark:text-blue-500">{signup.name}</a
|
|
112
|
-
>
|
|
113
|
-
</div>
|
|
114
|
-
{/if}
|
|
115
|
-
</form>
|
|
116
|
-
</div>
|
package/auth/Login.svelte.d.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { AuthFunctionType, LinkType, AuthFieldType } from '../types';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
login?: AuthFunctionType;
|
|
6
|
-
title?: string;
|
|
7
|
-
btnSignInColor?: string;
|
|
8
|
-
rememberMe?: boolean;
|
|
9
|
-
signup?: LinkType;
|
|
10
|
-
lostPassword?: LinkType;
|
|
11
|
-
error?: string;
|
|
12
|
-
submitText?: string;
|
|
13
|
-
fields: AuthFieldType[];
|
|
14
|
-
};
|
|
15
|
-
events: {
|
|
16
|
-
[evt: string]: CustomEvent<any>;
|
|
17
|
-
};
|
|
18
|
-
slots: {};
|
|
19
|
-
};
|
|
20
|
-
export declare type LoginProps = typeof __propDef.props;
|
|
21
|
-
export declare type LoginEvents = typeof __propDef.events;
|
|
22
|
-
export declare type LoginSlots = typeof __propDef.slots;
|
|
23
|
-
export default class Login extends SvelteComponentTyped<LoginProps, LoginEvents, LoginSlots> {
|
|
24
|
-
}
|
|
25
|
-
export {};
|
package/auth/Register.svelte
DELETED
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
<script>import { Alert } from '../index';
|
|
2
|
-
import { createEventDispatcher } from 'svelte';
|
|
3
|
-
const dispatch = createEventDispatcher();
|
|
4
|
-
export let register = undefined;
|
|
5
|
-
export let error = '';
|
|
6
|
-
export let login = undefined;
|
|
7
|
-
export let rememberMe = false;
|
|
8
|
-
export let lostPassword = undefined;
|
|
9
|
-
export let message = '';
|
|
10
|
-
// Variables bound to respective inputs via bind:value
|
|
11
|
-
// export let email: string = 'email';
|
|
12
|
-
// export let password: string = '';
|
|
13
|
-
// export let name: string = '';
|
|
14
|
-
//
|
|
15
|
-
// export let nameField: string = 'username';
|
|
16
|
-
// field names password, name, email
|
|
17
|
-
export let fields = [
|
|
18
|
-
{
|
|
19
|
-
label: 'name',
|
|
20
|
-
fieldtype: 'text',
|
|
21
|
-
required: true,
|
|
22
|
-
placeholder: 'Your name'
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
label: 'email',
|
|
26
|
-
fieldtype: 'email',
|
|
27
|
-
required: true,
|
|
28
|
-
placeholder: 'Your email'
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
label: 'password',
|
|
32
|
-
fieldtype: 'password',
|
|
33
|
-
required: true,
|
|
34
|
-
placeholder: 'Your password'
|
|
35
|
-
}
|
|
36
|
-
];
|
|
37
|
-
</script>
|
|
38
|
-
|
|
39
|
-
<div
|
|
40
|
-
class="p-4 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700 w-full"
|
|
41
|
-
>
|
|
42
|
-
<form class="space-y-6" on:submit|preventDefault={register}>
|
|
43
|
-
{#if message}
|
|
44
|
-
<div class="mt-6">
|
|
45
|
-
<Alert alertId="alert-green" color="green" closeBtn>
|
|
46
|
-
{message}
|
|
47
|
-
</Alert>
|
|
48
|
-
</div>
|
|
49
|
-
{/if}
|
|
50
|
-
<div class="heading">
|
|
51
|
-
<a class="back" href="/"><i class="bi bi-arrow-left dark:text-white" /></a>
|
|
52
|
-
<h3 class="text-xl font-medium text-gray-900 dark:text-white">Register</h3>
|
|
53
|
-
</div>
|
|
54
|
-
{#each fields as field}
|
|
55
|
-
<div>
|
|
56
|
-
<label
|
|
57
|
-
for={field.label}
|
|
58
|
-
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
59
|
-
>{field.label}</label
|
|
60
|
-
>
|
|
61
|
-
<input
|
|
62
|
-
type={field.fieldtype}
|
|
63
|
-
required={field.required}
|
|
64
|
-
name={field.label}
|
|
65
|
-
placeholder={field.placeholder}
|
|
66
|
-
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
|
|
67
|
-
/>
|
|
68
|
-
</div>
|
|
69
|
-
{/each}
|
|
70
|
-
{#if error}
|
|
71
|
-
<div class="mt-6">
|
|
72
|
-
<Alert alertId="alert-green" color="red" closeBtn>
|
|
73
|
-
{error}
|
|
74
|
-
</Alert>
|
|
75
|
-
</div>
|
|
76
|
-
{/if}
|
|
77
|
-
<div class="flex items-start">
|
|
78
|
-
{#if rememberMe}
|
|
79
|
-
<div class="flex items-start">
|
|
80
|
-
<div class="flex items-center h-5">
|
|
81
|
-
<input
|
|
82
|
-
id="remember"
|
|
83
|
-
aria-describedby="remember"
|
|
84
|
-
type="checkbox"
|
|
85
|
-
class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
|
|
86
|
-
required
|
|
87
|
-
/>
|
|
88
|
-
</div>
|
|
89
|
-
<div class="ml-3 text-sm">
|
|
90
|
-
<label for="remember" class="font-medium text-gray-900 dark:text-gray-300"
|
|
91
|
-
>Remember me</label
|
|
92
|
-
>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
{/if}
|
|
96
|
-
{#if lostPassword}
|
|
97
|
-
<a
|
|
98
|
-
href={lostPassword.href}
|
|
99
|
-
rel={lostPassword.rel}
|
|
100
|
-
class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500"
|
|
101
|
-
>{lostPassword.name}</a
|
|
102
|
-
>
|
|
103
|
-
{/if}
|
|
104
|
-
</div>
|
|
105
|
-
<button
|
|
106
|
-
type="submit"
|
|
107
|
-
class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
|
108
|
-
>Register</button
|
|
109
|
-
>
|
|
110
|
-
{#if login}
|
|
111
|
-
<a
|
|
112
|
-
href={login.href}
|
|
113
|
-
rel={login.rel}
|
|
114
|
-
class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500">{login.name}</a
|
|
115
|
-
>
|
|
116
|
-
{/if}
|
|
117
|
-
</form>
|
|
118
|
-
</div>
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { AuthFunctionType, LinkType, AuthFieldType } from '../types';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
register?: AuthFunctionType;
|
|
6
|
-
error?: string;
|
|
7
|
-
login?: LinkType;
|
|
8
|
-
rememberMe?: boolean;
|
|
9
|
-
lostPassword?: LinkType;
|
|
10
|
-
message?: string;
|
|
11
|
-
fields?: AuthFieldType[];
|
|
12
|
-
};
|
|
13
|
-
events: {
|
|
14
|
-
[evt: string]: CustomEvent<any>;
|
|
15
|
-
};
|
|
16
|
-
slots: {};
|
|
17
|
-
};
|
|
18
|
-
export declare type RegisterProps = typeof __propDef.props;
|
|
19
|
-
export declare type RegisterEvents = typeof __propDef.events;
|
|
20
|
-
export declare type RegisterSlots = typeof __propDef.slots;
|
|
21
|
-
export default class Register extends SvelteComponentTyped<RegisterProps, RegisterEvents, RegisterSlots> {
|
|
22
|
-
}
|
|
23
|
-
export {};
|