flowbite-svelte 0.9.5 → 0.9.8

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 (20) hide show
  1. package/auth/ForgotPassword.svelte +5 -5
  2. package/auth/ForgotPassword.svelte.d.ts +5 -5
  3. package/auth/Login.svelte +24 -36
  4. package/auth/Login.svelte.d.ts +7 -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/cards/CtaCard.svelte +2 -3
  10. package/cards/CtaCard.svelte.d.ts +1 -0
  11. package/cards/EcommerceCard.svelte +2 -1
  12. package/cards/EcommerceCard.svelte.d.ts +1 -0
  13. package/cards/HorizontalCard.svelte +11 -14
  14. package/cards/HorizontalCard.svelte.d.ts +5 -0
  15. package/cards/InteractiveCard.svelte +2 -3
  16. package/cards/InteractiveCard.svelte.d.ts +1 -0
  17. package/cards/ListCard.svelte +2 -3
  18. package/cards/ListCard.svelte.d.ts +1 -0
  19. package/package.json +1 -1
  20. package/types.d.ts +7 -1
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,14 @@
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 = '';
9
+ export let submitText = 'Login to your account';
11
10
  let submitClass;
11
+ export let fields;
12
12
  if (btnSignInColor === 'blue') {
13
13
  submitClass =
14
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';
@@ -52,41 +52,29 @@ else {
52
52
  >
53
53
  <form class="space-y-6" on:submit|preventDefault={login}>
54
54
  <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>
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}
83
72
  <div class="flex items-start">
84
73
  {#if rememberMe}
85
74
  <div class="flex items-start">
86
75
  <div class="flex items-center h-5">
87
76
  <input
88
77
  id="remember"
89
- aria-describedby="remember"
90
78
  type="checkbox"
91
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"
92
80
  />
@@ -114,7 +102,7 @@ else {
114
102
  </Alert>
115
103
  </div>
116
104
  {/if}
117
- <button type="submit" class={submitClass}>Login to your account</button>
105
+ <button type="submit" class={submitClass}>{submitText}</button>
118
106
  {#if signup}
119
107
  <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
120
108
  Not registered? <a
package/auth/Login.svelte.d.ts CHANGED
@@ -1,16 +1,16 @@
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
+ submitText?: string;
13
+ fields: AuthFieldType[];
14
14
  };
15
15
  events: {
16
16
  [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/cards/CtaCard.svelte CHANGED
@@ -2,6 +2,7 @@
2
2
  export let title = 'Work fast from anywhere';
3
3
  export let headColor = 'gray';
4
4
  export let btns;
5
+ export let divClass = 'p-4 w-full text-center bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700';
5
6
  let headClass;
6
7
  if (headColor === 'blue') {
7
8
  headClass = 'mb-2 text-3xl font-bold text-blue-900 dark:text-white';
@@ -32,9 +33,7 @@ else {
32
33
  }
33
34
  </script>
34
35
 
35
- <div
36
- class="p-4 w-full text-center bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700"
37
- >
36
+ <div class={divClass}>
38
37
  <h3 class={headClass}>
39
38
  {title}
40
39
  </h3>
package/cards/CtaCard.svelte.d.ts CHANGED
@@ -5,6 +5,7 @@ declare const __propDef: {
5
5
  title?: string;
6
6
  headColor?: Colors;
7
7
  btns: CardButtonType[];
8
+ divClass?: string;
8
9
  };
9
10
  events: {
10
11
  [evt: string]: CustomEvent<any>;
package/cards/EcommerceCard.svelte CHANGED
@@ -8,6 +8,7 @@ export let rel = '';
8
8
  export let title = 'Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport';
9
9
  export let stars = 5;
10
10
  export let price = '$555';
11
+ export let divClass = 'max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700';
11
12
  let spanClass;
12
13
  let linkClass;
13
14
  if (btnColor === 'blue') {
@@ -66,7 +67,7 @@ else {
66
67
  }
67
68
  </script>
68
69
 
69
- <div class="max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
70
+ <div class={divClass}>
70
71
  <a href={link} {rel}>
71
72
  <img class="p-8 rounded-t-lg" src={img.src} alt={img.alt} />
72
73
  </a>
package/cards/EcommerceCard.svelte.d.ts CHANGED
@@ -9,6 +9,7 @@ declare const __propDef: {
9
9
  title?: string;
10
10
  stars?: number;
11
11
  price?: string;
12
+ divClass?: string;
12
13
  };
13
14
  events: {
14
15
  [evt: string]: CustomEvent<any>;
package/cards/HorizontalCard.svelte CHANGED
@@ -3,23 +3,20 @@ export let rel = '';
3
3
  export let img = '/images/image-4.jpeg';
4
4
  export let alt = '';
5
5
  export let header = 'Lorem ipsum dolor sit ametit.';
6
+ export let linkClass = 'flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700';
7
+ export let imgClass = 'object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg';
8
+ export let textClass = 'flex flex-col justify-between p-4 leading-normal';
9
+ export let h3Class = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
10
+ export let pClass = 'mb-3 font-normal text-gray-700 dark:text-gray-400';
6
11
  </script>
7
12
 
8
- <a
9
- href={link}
10
- {rel}
11
- class="flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
12
- >
13
- <img
14
- class="object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
15
- src={img}
16
- {alt}
17
- />
18
- <div class="flex flex-col justify-between p-4 leading-normal">
19
- <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
13
+ <a href={link} {rel} class={linkClass}>
14
+ <img class={imgClass} src={img} {alt} />
15
+ <div class={textClass}>
16
+ <h3 class={h3Class}>
20
17
  {header}
21
- </h5>
22
- <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
18
+ </h3>
19
+ <p class={pClass}>
23
20
  <slot />
24
21
  </p>
25
22
  </div>
package/cards/HorizontalCard.svelte.d.ts CHANGED
@@ -6,6 +6,11 @@ declare const __propDef: {
6
6
  img?: string;
7
7
  alt?: string;
8
8
  header?: string;
9
+ linkClass?: string;
10
+ imgClass?: string;
11
+ textClass?: string;
12
+ h3Class?: string;
13
+ pClass?: string;
9
14
  };
10
15
  events: {
11
16
  [evt: string]: CustomEvent<any>;
package/cards/InteractiveCard.svelte CHANGED
@@ -9,6 +9,7 @@ export let content = 'Proin efficitur purus felis.';
9
9
  export let buttonColor = 'blue';
10
10
  export let link1;
11
11
  export let link2;
12
+ export let divClass = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700';
12
13
  let linkClass;
13
14
  if (buttonColor === 'blue') {
14
15
  linkClass =
@@ -48,9 +49,7 @@ else {
48
49
  }
49
50
  </script>
50
51
 
51
- <div
52
- class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
53
- >
52
+ <div class={divClass}>
54
53
  <div class="flex justify-end px-4 pt-4">
55
54
  <button
56
55
  id="dropdownButton"
package/cards/InteractiveCard.svelte.d.ts CHANGED
@@ -9,6 +9,7 @@ declare const __propDef: {
9
9
  buttonColor?: string;
10
10
  link1: LinkType;
11
11
  link2: LinkType;
12
+ divClass?: string;
12
13
  };
13
14
  events: {
14
15
  [evt: string]: CustomEvent<any>;
package/cards/ListCard.svelte CHANGED
@@ -1,11 +1,10 @@
1
1
  <script >export let lists;
2
2
  export let title = 'Latest Customers';
3
3
  export let action;
4
+ export let divClass = 'p-4 max-w-md bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700';
4
5
  </script>
5
6
 
6
- <div
7
- class="p-4 max-w-md bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700"
8
- >
7
+ <div class={divClass}>
9
8
  <div class="flex justify-between items-center mb-4">
10
9
  <h3 class="text-xl font-bold leading-none text-gray-900 dark:text-white">
11
10
  {title}
package/cards/ListCard.svelte.d.ts CHANGED
@@ -5,6 +5,7 @@ declare const __propDef: {
5
5
  lists: ListCardType[];
6
6
  title?: string;
7
7
  action: LinkType;
8
+ divClass?: string;
8
9
  };
9
10
  events: {
10
11
  [evt: string]: CustomEvent<any>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.9.5",
3
+ "version": "0.9.8",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "author": {
6
6
  "name": "Shinichi Okada",
package/types.d.ts CHANGED
@@ -75,5 +75,11 @@ export interface ListCardType {
75
75
  field2?: string;
76
76
  field3?: string;
77
77
  }
78
- export declare type AuthFunctionType = () => Promise<string>;
78
+ export declare type AuthFunctionType = () => Promise<void>;
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
+ }