flowbite-svelte 0.10.8 → 0.10.9

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 (12) hide show
  1. package/buttons/Button.svelte +19 -16
  2. package/buttons/Button.svelte.d.ts +5 -3
  3. package/buttons/ColorShadowButton.svelte +2 -2
  4. package/buttons/ColorShadowButton.svelte.d.ts +1 -1
  5. package/buttons/GradientDuotoneButton.svelte +2 -2
  6. package/buttons/GradientDuotoneButton.svelte.d.ts +1 -1
  7. package/buttons/GradientMonochromeButton.svelte +2 -2
  8. package/buttons/GradientMonochromeButton.svelte.d.ts +1 -1
  9. package/buttons/GradientOutlineButton.svelte +2 -2
  10. package/buttons/GradientOutlineButton.svelte.d.ts +1 -1
  11. package/cards/Card.svelte +6 -2
  12. package/package.json +1 -1
package/buttons/Button.svelte CHANGED
@@ -1,8 +1,8 @@
1
1
  <script >export let rounded = false;
2
2
  export let textSize = 'text-sm';
3
3
  export let name = 'Read more';
4
- export let buttonType = 'blue';
5
- export let type = 'button';
4
+ export let btnColor = 'blue';
5
+ export let btnType = 'button';
6
6
  let paddings;
7
7
  if (textSize === 'text-xs') {
8
8
  paddings = 'py-2 px-3';
@@ -18,44 +18,44 @@ else {
18
18
  }
19
19
  let buttonClass;
20
20
  let round = rounded ? 'rounded-full' : 'rounded-lg';
21
- if (buttonType === 'blue') {
21
+ if (btnColor === 'blue') {
22
22
  buttonClass = `text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
23
23
  }
24
- else if (buttonType === 'blue-outline') {
24
+ else if (btnColor === 'blue-outline') {
25
25
  buttonClass = `text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
26
26
  }
27
- else if (buttonType === 'dark') {
27
+ else if (btnColor === 'dark') {
28
28
  buttonClass =
29
29
  buttonClass = `text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700`;
30
30
  }
31
- else if (buttonType === 'dark-outline') {
31
+ else if (btnColor === 'dark-outline') {
32
32
  buttonClass = `text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
33
33
  }
34
- else if (buttonType === 'light') {
34
+ else if (btnColor === 'light') {
35
35
  buttonClass = `text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800`;
36
36
  }
37
- else if (buttonType === 'green') {
37
+ else if (btnColor === 'green') {
38
38
  buttonClass = `text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800`;
39
39
  }
40
- else if (buttonType === 'green-outline') {
40
+ else if (btnColor === 'green-outline') {
41
41
  buttonClass = `text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
42
42
  }
43
- else if (buttonType === 'red') {
43
+ else if (btnColor === 'red') {
44
44
  buttonClass = `text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900`;
45
45
  }
46
- else if (buttonType === 'red-outline') {
46
+ else if (btnColor === 'red-outline') {
47
47
  buttonClass = `text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
48
48
  }
49
- else if (buttonType === 'yellow') {
49
+ else if (btnColor === 'yellow') {
50
50
  buttonClass = `text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:focus:ring-yellow-900`;
51
51
  }
52
- else if (buttonType === 'yellow-outline') {
52
+ else if (btnColor === 'yellow-outline') {
53
53
  buttonClass = `text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
54
54
  }
55
- else if (buttonType === 'purple') {
55
+ else if (btnColor === 'purple') {
56
56
  buttonClass = `text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium ${round} ${textSize} ${paddings} text-center mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900`;
57
57
  }
58
- else if (buttonType === 'purple-outline') {
58
+ else if (btnColor === 'purple-outline') {
59
59
  buttonClass = `text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
60
60
  }
61
61
  else {
@@ -64,4 +64,7 @@ else {
64
64
  }
65
65
  </script>
66
66
 
67
- <button {type} class={buttonClass} on:click>{name}</button>
67
+ <button type={btnType} class={buttonClass} on:click>
68
+ {name}
69
+ <slot />
70
+ </button>
package/buttons/Button.svelte.d.ts CHANGED
@@ -5,15 +5,17 @@ declare const __propDef: {
5
5
  rounded?: boolean;
6
6
  textSize?: Textsize;
7
7
  name?: string;
8
- buttonType?: Buttontypes;
9
- type?: ButtonType;
8
+ btnColor?: Buttontypes;
9
+ btnType?: ButtonType;
10
10
  };
11
11
  events: {
12
12
  click: MouseEvent;
13
13
  } & {
14
14
  [evt: string]: CustomEvent<any>;
15
15
  };
16
- slots: {};
16
+ slots: {
17
+ default: {};
18
+ };
17
19
  };
18
20
  export declare type ButtonProps = typeof __propDef.props;
19
21
  export declare type ButtonEvents = typeof __propDef.events;
package/buttons/ColorShadowButton.svelte CHANGED
@@ -2,7 +2,7 @@
2
2
  export let color = 'blue';
3
3
  export let name = 'Read more';
4
4
  let btnClass;
5
- export let type = 'button';
5
+ export let btnType = 'button';
6
6
  if (color === 'blue') {
7
7
  btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
8
8
  }
@@ -32,4 +32,4 @@ else {
32
32
  }
33
33
  </script>
34
34
 
35
- <button {type} class={btnClass} on:click>{name}</button>
35
+ <button type={btnType} class={btnClass} on:click>{name}</button>
package/buttons/ColorShadowButton.svelte.d.ts CHANGED
@@ -5,7 +5,7 @@ declare const __propDef: {
5
5
  textSize?: Textsize;
6
6
  color?: Buttonshadows;
7
7
  name?: string;
8
- type?: ButtonType;
8
+ btnType?: ButtonType;
9
9
  };
10
10
  events: {
11
11
  click: MouseEvent;
package/buttons/GradientDuotoneButton.svelte CHANGED
@@ -2,7 +2,7 @@
2
2
  export let color = 'purple2blue';
3
3
  export let name = 'Read more';
4
4
  let btnClass;
5
- export let type = 'button';
5
+ export let btnType = 'button';
6
6
  if (color === 'purple2blue') {
7
7
  btnClass = `text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
8
8
  }
@@ -29,4 +29,4 @@ else {
29
29
  }
30
30
  </script>
31
31
 
32
- <button {type} class={btnClass} on:click>{name}</button>
32
+ <button type={btnType} class={btnClass} on:click>{name}</button>
package/buttons/GradientDuotoneButton.svelte.d.ts CHANGED
@@ -5,7 +5,7 @@ declare const __propDef: {
5
5
  textSize?: Textsize;
6
6
  color?: Gradientduotones;
7
7
  name?: string;
8
- type?: ButtonType;
8
+ btnType?: ButtonType;
9
9
  };
10
10
  events: {
11
11
  click: MouseEvent;
package/buttons/GradientMonochromeButton.svelte CHANGED
@@ -2,7 +2,7 @@
2
2
  export let color = 'blue';
3
3
  export let name = 'Read more';
4
4
  let btnClass;
5
- export let type = 'button';
5
+ export let btnType = 'button';
6
6
  if (color === 'blue') {
7
7
  btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
8
8
  }
@@ -32,4 +32,4 @@ else {
32
32
  }
33
33
  </script>
34
34
 
35
- <button {type} class={btnClass} on:click>{name}</button>
35
+ <button type={btnType} class={btnClass} on:click>{name}</button>
package/buttons/GradientMonochromeButton.svelte.d.ts CHANGED
@@ -5,7 +5,7 @@ declare const __propDef: {
5
5
  textSize?: Textsize;
6
6
  color?: Buttonshadows;
7
7
  name?: string;
8
- type?: ButtonType;
8
+ btnType?: ButtonType;
9
9
  };
10
10
  events: {
11
11
  click: MouseEvent;
package/buttons/GradientOutlineButton.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script >export let textSize = 'text-sm';
2
2
  export let color = 'purple2blue';
3
3
  export let name = 'Read more';
4
- export let type = 'button';
4
+ export let btnType = 'button';
5
5
  let btnClass;
6
6
  let spanClass;
7
7
  if (color === 'purple2blue') {
@@ -46,6 +46,6 @@ else {
46
46
  }
47
47
  </script>
48
48
 
49
- <button class={btnClass} {type}>
49
+ <button class={btnClass} type={btnType}>
50
50
  <span class={spanClass} on:click>{name}</span>
51
51
  </button>
package/buttons/GradientOutlineButton.svelte.d.ts CHANGED
@@ -5,7 +5,7 @@ declare const __propDef: {
5
5
  textSize?: Textsize;
6
6
  color?: Gradientduotones;
7
7
  name?: string;
8
- type?: ButtonType;
8
+ btnType?: ButtonType;
9
9
  };
10
10
  events: {
11
11
  click: MouseEvent;
package/cards/Card.svelte CHANGED
@@ -50,9 +50,13 @@ else {
50
50
 
51
51
  <div class={divClass} class:has-paragraph={$$slots.paragraph}>
52
52
  {#if img}
53
- <a href={link} {rel}>
53
+ {#if link}
54
+ <a href={link} {rel}>
55
+ <img class="rounded-t-lg" src={img} {alt} />
56
+ </a>
57
+ {:else}
54
58
  <img class="rounded-t-lg" src={img} {alt} />
55
- </a>
59
+ {/if}
56
60
  {/if}
57
61
  <div class={textdivClass}>
58
62
  {#if link}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.10.8",
3
+ "version": "0.10.9",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "author": {
6
6
  "name": "Shinichi Okada",