flowbite-svelte 0.9.6 → 0.9.7

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.
Files changed (10) hide show
  1. package/auth/ForgotPassword.svelte +5 -5
  2. package/auth/ForgotPassword.svelte.d.ts +5 -5
  3. package/auth/Login.svelte +35 -35
  4. package/auth/Login.svelte.d.ts +6 -7
  5. package/auth/Register.svelte +48 -48
  6. package/auth/Register.svelte.d.ts +8 -10
  7. package/auth/Reset.svelte +6 -6
  8. package/auth/Reset.svelte.d.ts +6 -6
  9. package/package.json +1 -1
  10. package/types.d.ts +6 -0
package/auth/ForgotPassword.svelte CHANGED
@@ -1,9 +1,9 @@
1
1
  <script >import { Alert } from '../index';
2
- export let forgot;
3
- export let email;
4
- export let error;
5
- export let message;
6
- export let data;
2
+ export let forgot = undefined;
3
+ export let email = '';
4
+ export let error = '';
5
+ export let message = '';
6
+ export let data = '';
7
7
  </script>
8
8
 
9
9
  <div
package/auth/ForgotPassword.svelte.d.ts CHANGED
@@ -2,11 +2,11 @@ import { SvelteComponentTyped } from "svelte";
2
2
  import type { AuthFunctionType } from '../types';
3
3
  declare const __propDef: {
4
4
  props: {
5
- forgot: AuthFunctionType;
6
- email: string;
7
- error: string;
8
- message: string;
9
- data: string;
5
+ forgot?: AuthFunctionType;
6
+ email?: string;
7
+ error?: string;
8
+ message?: string;
9
+ data?: string;
10
10
  };
11
11
  events: {
12
12
  [evt: string]: CustomEvent<any>;
package/auth/Login.svelte CHANGED
@@ -1,14 +1,26 @@
1
1
  <script >import { Alert } from '../index';
2
- export let login;
2
+ export let login = undefined;
3
3
  export let title = 'Sign in';
4
4
  export let btnSignInColor = 'blue';
5
5
  export let rememberMe = false;
6
- export let signup;
7
- export let lostPassword;
8
- export let email;
9
- export let password;
10
- export let error;
6
+ export let signup = undefined;
7
+ export let lostPassword = undefined;
8
+ export let error = '';
11
9
  let submitClass;
10
+ export let fields = [
11
+ {
12
+ label: 'email',
13
+ fieldtype: 'email',
14
+ required: true,
15
+ placeholder: 'Your email'
16
+ },
17
+ {
18
+ label: 'password',
19
+ fieldtype: 'password',
20
+ required: true,
21
+ placeholder: 'Your password'
22
+ }
23
+ ];
12
24
  if (btnSignInColor === 'blue') {
13
25
  submitClass =
14
26
  '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';
@@ -52,41 +64,29 @@ else {
52
64
  >
53
65
  <form class="space-y-6" on:submit|preventDefault={login}>
54
66
  <h3 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h3>
55
- <div>
56
- <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
57
- >Email</label
58
- >
59
- <input
60
- type="email"
61
- name="email"
62
- id="email"
63
- bind:value={email}
64
- 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"
65
- placeholder="name@company.com"
66
- required
67
- />
68
- </div>
69
- <div>
70
- <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
71
- >Your password</label
72
- >
73
- <input
74
- type="password"
75
- name="password"
76
- id="password"
77
- placeholder="••••••••"
78
- bind:value={password}
79
- 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"
80
- required
81
- />
82
- </div>
67
+ {#each fields as field}
68
+ <div>
69
+ <label
70
+ for={field.label}
71
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
72
+ >{field.label}</label
73
+ >
74
+ <input
75
+ type={field.fieldtype}
76
+ name={field.label}
77
+ id={field.label}
78
+ 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"
79
+ placeholder={field.placeholder}
80
+ required={field.required}
81
+ />
82
+ </div>
83
+ {/each}
83
84
  <div class="flex items-start">
84
85
  {#if rememberMe}
85
86
  <div class="flex items-start">
86
87
  <div class="flex items-center h-5">
87
88
  <input
88
89
  id="remember"
89
- aria-describedby="remember"
90
90
  type="checkbox"
91
91
  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"
92
92
  />
package/auth/Login.svelte.d.ts CHANGED
@@ -1,16 +1,15 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import type { AuthFunctionType, LinkType } from '../types';
2
+ import type { AuthFunctionType, LinkType, AuthFieldType } from '../types';
3
3
  declare const __propDef: {
4
4
  props: {
5
- login: AuthFunctionType;
5
+ login?: AuthFunctionType;
6
6
  title?: string;
7
7
  btnSignInColor?: string;
8
8
  rememberMe?: boolean;
9
- signup: LinkType;
10
- lostPassword: LinkType;
11
- email: string;
12
- password: string;
13
- error: string;
9
+ signup?: LinkType;
10
+ lostPassword?: LinkType;
11
+ error?: string;
12
+ fields?: AuthFieldType[];
14
13
  };
15
14
  events: {
16
15
  [evt: string]: CustomEvent<any>;
package/auth/Register.svelte CHANGED
@@ -1,14 +1,37 @@
1
1
  <script >import { Alert } from '../index';
2
- export let register;
3
- export let error;
4
- export let login;
5
- export let rememberMe;
6
- export let lostPassword;
7
- export let message;
2
+ export let register = undefined;
3
+ export let error = '';
4
+ export let login = undefined;
5
+ export let rememberMe = false;
6
+ export let lostPassword = undefined;
7
+ export let message = '';
8
8
  // Variables bound to respective inputs via bind:value
9
- export let email;
10
- export let password;
11
- export let name;
9
+ // export let email: string = 'email';
10
+ // export let password: string = '';
11
+ // export let name: string = '';
12
+ //
13
+ // export let nameField: string = 'username';
14
+ // field names password, name, email
15
+ export let fields = [
16
+ {
17
+ label: 'name',
18
+ fieldtype: 'text',
19
+ required: true,
20
+ placeholder: 'Your name'
21
+ },
22
+ {
23
+ label: 'email',
24
+ fieldtype: 'email',
25
+ required: true,
26
+ placeholder: 'Your email'
27
+ },
28
+ {
29
+ label: 'password',
30
+ fieldtype: 'password',
31
+ required: true,
32
+ placeholder: 'Your password'
33
+ }
34
+ ];
12
35
  </script>
13
36
 
14
37
  <div
@@ -26,45 +49,22 @@ export let name;
26
49
  <a class="back" href="/"><i class="bi bi-arrow-left dark:text-white" /></a>
27
50
  <h3 class="text-xl font-medium text-gray-900 dark:text-white">Register</h3>
28
51
  </div>
29
- <div>
30
- <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
31
- >Name</label
32
- >
33
- <input
34
- type="text"
35
- required
36
- name="name"
37
- placeholder="Enter your name"
38
- 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"
39
- bind:value={name}
40
- />
41
- </div>
42
- <div>
43
- <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
44
- >Email</label
45
- >
46
- <input
47
- type="email"
48
- required
49
- name="email"
50
- placeholder="Enter your email"
51
- 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"
52
- bind:value={email}
53
- />
54
- </div>
55
- <div>
56
- <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
57
- >Your password</label
58
- >
59
- <input
60
- type="password"
61
- required
62
- name="password"
63
- placeholder="Enter your password"
64
- 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"
65
- bind:value={password}
66
- />
67
- </div>
52
+ {#each fields as field}
53
+ <div>
54
+ <label
55
+ for={field.label}
56
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
57
+ >{field.label}</label
58
+ >
59
+ <input
60
+ type={field.fieldtype}
61
+ required={field.required}
62
+ name={field.label}
63
+ placeholder={field.placeholder}
64
+ 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"
65
+ />
66
+ </div>
67
+ {/each}
68
68
  {#if error}
69
69
  <div class="mt-6">
70
70
  <Alert alertId="alert-green" color="red" closeBtn>
package/auth/Register.svelte.d.ts CHANGED
@@ -1,16 +1,14 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import type { AuthFunctionType, LinkType } from '../types';
2
+ import type { AuthFunctionType, LinkType, AuthFieldType } from '../types';
3
3
  declare const __propDef: {
4
4
  props: {
5
- register: AuthFunctionType;
6
- error: string;
7
- login: LinkType;
8
- rememberMe: boolean;
9
- lostPassword: LinkType;
10
- message: string;
11
- email: string;
12
- password: string;
13
- name: string;
5
+ register?: AuthFunctionType;
6
+ error?: string;
7
+ login?: LinkType;
8
+ rememberMe?: boolean;
9
+ lostPassword?: LinkType;
10
+ message?: string;
11
+ fields?: AuthFieldType[];
14
12
  };
15
13
  events: {
16
14
  [evt: string]: CustomEvent<any>;
package/auth/Reset.svelte CHANGED
@@ -1,10 +1,10 @@
1
1
  <script >import { Alert } from '../index';
2
- export let resetpw;
3
- export let password;
4
- export let email;
5
- export let confirmpw;
6
- export let error;
7
- export let message;
2
+ export let resetpw = undefined;
3
+ export let password = '';
4
+ export let email = '';
5
+ export let confirmpw = '';
6
+ export let error = '';
7
+ export let message = '';
8
8
  </script>
9
9
 
10
10
  <div
package/auth/Reset.svelte.d.ts CHANGED
@@ -2,12 +2,12 @@ import { SvelteComponentTyped } from "svelte";
2
2
  import type { AuthFunctionType } from '../types';
3
3
  declare const __propDef: {
4
4
  props: {
5
- resetpw: AuthFunctionType;
6
- password: string;
7
- email: string;
8
- confirmpw: string;
9
- error: string;
10
- message: string;
5
+ resetpw?: AuthFunctionType;
6
+ password?: string;
7
+ email?: string;
8
+ confirmpw?: string;
9
+ error?: string;
10
+ message?: string;
11
11
  };
12
12
  events: {
13
13
  [evt: string]: CustomEvent<any>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.9.6",
3
+ "version": "0.9.7",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "author": {
6
6
  "name": "Shinichi Okada",
package/types.d.ts CHANGED
@@ -77,3 +77,9 @@ export interface ListCardType {
77
77
  }
78
78
  export declare type AuthFunctionType = () => Promise<string>;
79
79
  export declare type ButtonType = 'button' | 'submit' | 'reset';
80
+ export interface AuthFieldType {
81
+ label: string;
82
+ fieldtype: string;
83
+ required?: boolean;
84
+ placeholder?: string;
85
+ }