flowbite-svelte 0.15.23 → 0.15.27

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 (6) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/buttons/Button.svelte +13 -13
  3. package/cards/EcommerceCard.svelte +17 -8
  4. package/cards/EcommerceCard.svelte.d.ts +3 -1
  5. package/forms/Input.svelte +5 -3
  6. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,26 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [0.15.27](https://github.com/themesberg/flowbite-svelte/compare/v0.15.26...v0.15.27) (2022-05-13)
6
+
7
+ ### [0.15.26](https://github.com/themesberg/flowbite-svelte/compare/v0.15.25...v0.15.26) (2022-05-13)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * change from ./package/index.js to index.js for main in package.json ([785fe2c](https://github.com/themesberg/flowbite-svelte/commit/785fe2cd88feded7a2872e85248c84b001c1e3b4))
13
+
14
+ ### [0.15.25](https://github.com/themesberg/flowbite-svelte/compare/v0.15.24...v0.15.25) (2022-05-13)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * demo page issues ([268db3c](https://github.com/themesberg/flowbite-svelte/commit/268db3ca3db363ee8bbd6eec69d9f622350050ee))
20
+ * input label margin on empty labels ([e08bb0d](https://github.com/themesberg/flowbite-svelte/commit/e08bb0d5caaf10b2c14a852cc68047be7c9e6fdc))
21
+ * remove button margin ([9cc1795](https://github.com/themesberg/flowbite-svelte/commit/9cc179505bd77ed775fee1879415f191f36b4764))
22
+
23
+ ### [0.15.24](https://github.com/themesberg/flowbite-svelte/compare/v0.15.23...v0.15.24) (2022-05-12)
24
+
5
25
  ### [0.15.23](https://github.com/themesberg/flowbite-svelte/compare/v0.15.22...v0.15.23) (2022-05-11)
6
26
 
7
27
 
package/buttons/Button.svelte CHANGED
@@ -21,67 +21,67 @@ let round = rounded ? 'rounded-full' : 'rounded-lg';
21
21
  switch (btnColor) {
22
22
  default:
23
23
  case 'blue':
24
- buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings} mr-2 mb-2`;
24
+ buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
25
25
  if (disabled)
26
26
  buttonClass += ' bg-blue-400 dark:bg-blue-500 cursor-not-allowed';
27
27
  else
28
28
  buttonClass += ' bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
29
29
  break;
30
30
  case 'blue-outline':
31
- 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`;
31
+ 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 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
32
32
  break;
33
33
  case 'dark':
34
- buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings} mr-2 mb-2`;
34
+ buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
35
35
  if (disabled)
36
36
  buttonClass += ' bg-gray-400 dark:bg-gray-500 cursor-not-allowed';
37
37
  else
38
38
  buttonClass += ' bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700';
39
39
  break;
40
40
  case 'dark-outline':
41
- 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`;
41
+ 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 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
42
42
  break;
43
43
  case 'light':
44
- buttonClass = `text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700`;
44
+ buttonClass = `text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700`;
45
45
  break;
46
46
  case 'green':
47
- buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings} mr-2 mb-2`;
47
+ buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
48
48
  if (disabled)
49
49
  buttonClass += ' bg-green-400 dark:bg-green-500 cursor-not-allowed';
50
50
  else
51
51
  buttonClass += ' bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
52
52
  break;
53
53
  case 'green-outline':
54
- 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`;
54
+ 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 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
55
55
  break;
56
56
  case 'red':
57
- buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings} mr-2 mb-2`;
57
+ buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
58
58
  if (disabled)
59
59
  buttonClass += ' bg-red-400 dark:bg-red-500 cursor-not-allowed';
60
60
  else
61
61
  buttonClass += ' bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900';
62
62
  break;
63
63
  case 'red-outline':
64
- 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`;
64
+ 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 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
65
65
  break;
66
66
  case 'yellow':
67
- buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings} mr-2 mb-2`;
67
+ buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
68
68
  if (disabled)
69
69
  buttonClass += ' bg-yellow-400 dark:bg-yellow-500 cursor-not-allowed';
70
70
  else
71
71
  buttonClass += ' bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900';
72
72
  break;
73
73
  case 'yellow-outline':
74
- 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`;
74
+ 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 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
75
75
  break;
76
76
  case 'purple':
77
- buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings} mr-2 mb-2`;
77
+ buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
78
78
  if (disabled)
79
79
  buttonClass += ' bg-purple-400 dark:bg-purple-500 cursor-not-allowed';
80
80
  else
81
81
  buttonClass += ' bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900';
82
82
  break;
83
83
  case 'purple-outline':
84
- 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`;
84
+ 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 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
85
85
  break;
86
86
  }
87
87
  buttonClass += ' items-center inline-flex';
package/cards/EcommerceCard.svelte CHANGED
@@ -3,10 +3,12 @@ export let href = '/';
3
3
  export let btnColor = 'blue';
4
4
  export let rel = '';
5
5
  export let title = 'Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport';
6
- export let stars = 5;
7
- export let price = '$555';
6
+ export let stars;
7
+ export let price = '';
8
+ export let btnText = '';
8
9
  export let headerClass = 'text-xl font-semibold tracking-tight text-gray-900 dark:text-white';
9
10
  export let divClass = 'max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700';
11
+ export let priceClass = 'text-3xl font-bold text-gray-900 dark:text-white';
10
12
  let spanClass = 'text-xs font-semibold mr-2 px-2.5 py-0.5 rounded ml-3 ';
11
13
  let linkClass = 'text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center ';
12
14
  if (btnColor === 'gray') {
@@ -54,14 +56,21 @@ else {
54
56
  </h3>
55
57
  </a>
56
58
  <div class="flex items-center mt-2.5 mb-5">
57
- {#each { length: stars } as _, i}
58
- <svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
59
- {/each}
60
- <span class={spanClass}>{stars}</span>
59
+ {#if stars}
60
+ {#each { length: stars } as _, i}
61
+ <svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
62
+ {/each}
63
+
64
+ <span class={spanClass}>{stars}</span>
65
+ {/if}
61
66
  </div>
62
67
  <div class="flex justify-between items-center">
63
- <span class="text-3xl font-bold text-gray-900 dark:text-white">{price}</span>
64
- <a {href} {rel} class={linkClass}>Add to cart</a>
68
+ {#if price}
69
+ <span class={priceClass}>{price}</span>
70
+ {/if}
71
+ {#if btnText}
72
+ <a {href} {rel} class={linkClass}>{btnText}</a>
73
+ {/if}
65
74
  </div>
66
75
  </div>
67
76
  </div>
package/cards/EcommerceCard.svelte.d.ts CHANGED
@@ -7,10 +7,12 @@ declare const __propDef: {
7
7
  btnColor?: Colors;
8
8
  rel?: string;
9
9
  title?: string;
10
- stars?: number;
10
+ stars: number;
11
11
  price?: string;
12
+ btnText?: string;
12
13
  headerClass?: string;
13
14
  divClass?: string;
15
+ priceClass?: string;
14
16
  };
15
17
  events: {
16
18
  [evt: string]: CustomEvent<any>;
package/forms/Input.svelte CHANGED
@@ -18,11 +18,11 @@ else {
18
18
  padding = 'p-2';
19
19
  }
20
20
  export let inputClass = `bg-gray-50 border border-gray-300 text-gray-900 ${size} rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ${padding} 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`;
21
- export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300';
21
+ export let labelClass = 'block mb-4 text-sm font-medium text-gray-900 dark:text-gray-300';
22
22
  export let disabled = false;
23
23
  export let readonly = false;
24
24
  export let helper = '';
25
- export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
25
+ export let helperClass = 'text-sm text-gray-500 dark:text-gray-400';
26
26
  export let ref = null;
27
27
  // you need to this to avoid 2-way binding
28
28
  function setType(node) {
@@ -31,7 +31,9 @@ function setType(node) {
31
31
  </script>
32
32
 
33
33
  <div class={$$props.class}>
34
- <label for={id} class={labelClass}>{label}</label>
34
+ {#if label}
35
+ <label for={id} class={labelClass}>{label}</label>
36
+ {/if}
35
37
  <input
36
38
  bind:value
37
39
  bind:this={ref}
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.15.23",
3
+ "version": "0.15.27",
4
4
  "description": "Flowbite components for Svelte",
5
- "main": "./package/index.js",
5
+ "main": "index.js",
6
6
  "author": {
7
7
  "name": "Shinichi Okada",
8
8
  "email": "connect@codewithshin.com",
@@ -18,6 +18,7 @@
18
18
  "@typescript-eslint/eslint-plugin": "^5.10.1",
19
19
  "@typescript-eslint/parser": "^5.10.1",
20
20
  "autoprefixer": "^10.4.4",
21
+ "createprops": "^0.1.1",
21
22
  "eslint": "^7.32.0",
22
23
  "eslint-config-prettier": "^8.3.0",
23
24
  "eslint-plugin-svelte3": "^3.2.1",