flowbite-svelte 0.15.26 → 0.15.29

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 (13) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/alerts/Alert.svelte +1 -1
  3. package/buttons/Button.svelte +1 -1
  4. package/cards/EcommerceCard.svelte +17 -8
  5. package/cards/EcommerceCard.svelte.d.ts +6 -2
  6. package/footer/LogoFooter.svelte +1 -1
  7. package/footer/SimpleFooter.svelte +1 -1
  8. package/footer/SitemapFooter.svelte +1 -1
  9. package/footer/SocialMediaFooter.svelte +1 -1
  10. package/forms/Iconinput.svelte +1 -1
  11. package/forms/Input.svelte +2 -13
  12. package/forms/Toggle.svelte +1 -1
  13. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,22 @@
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.29](https://github.com/themesberg/flowbite-svelte/compare/v0.15.28...v0.15.29) (2022-05-13)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * 28115props.class returns undefined if class is not given ([c1d4ab8](https://github.com/themesberg/flowbite-svelte/commit/c1d4ab8eb6b379078a3fb3fc51952d94c31cf452))
11
+
12
+ ### [0.15.28](https://github.com/themesberg/flowbite-svelte/compare/v0.15.27...v0.15.28) (2022-05-13)
13
+
14
+
15
+ ### Features
16
+
17
+ * add slot to EcommerceCard ([d777c87](https://github.com/themesberg/flowbite-svelte/commit/d777c87d3097998e840a9e2ed79cafc036c74713))
18
+
19
+ ### [0.15.27](https://github.com/themesberg/flowbite-svelte/compare/v0.15.26...v0.15.27) (2022-05-13)
20
+
5
21
  ### [0.15.26](https://github.com/themesberg/flowbite-svelte/compare/v0.15.25...v0.15.26) (2022-05-13)
6
22
 
7
23
 
package/alerts/Alert.svelte CHANGED
@@ -78,7 +78,7 @@ else {
78
78
  }
79
79
  </script>
80
80
 
81
- <div id={$$props.id} class:hidden class="{divClass} {$$props.class}" role="alert">
81
+ <div id={$$props.id} class:hidden class="{divClass} {$$props.class ? $$props.class : ''}" role="alert">
82
82
  <div class="flex">
83
83
  {#if icon}
84
84
  <svelte:component this={icon} class="flex-shrink-0 w-5 h-5 {contentClass} mr-3" />
package/buttons/Button.svelte CHANGED
@@ -87,6 +87,6 @@ switch (btnColor) {
87
87
  buttonClass += ' items-center inline-flex';
88
88
  </script>
89
89
 
90
- <button {type} class="{buttonClass} {$$props.class}" on:click>
90
+ <button {type} class="{buttonClass} {$$props.class ? $$props.class : ''}" on:click>
91
91
  <slot>Read more</slot>
92
92
  </button>
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
+ <span class={spanClass}>{stars}</span>
64
+ {/if}
61
65
  </div>
66
+ <slot />
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,15 +7,19 @@ 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>;
17
19
  };
18
- slots: {};
20
+ slots: {
21
+ default: {};
22
+ };
19
23
  };
20
24
  export declare type EcommerceCardProps = typeof __propDef.props;
21
25
  export declare type EcommerceCardEvents = typeof __propDef.events;
package/footer/LogoFooter.svelte CHANGED
@@ -14,7 +14,7 @@ export let copyrightYear = '© 2022';
14
14
  export let allRightsReserved = 'All Rights Reserved.';
15
15
  </script>
16
16
 
17
- <footer class="{footerClass} {$$props.class}">
17
+ <footer class="{footerClass} {$$props.class ? $$props.class : ''}">
18
18
  <div class={divClass}>
19
19
  <a href={site.href} class={siteNameLinkClass}>
20
20
  <img src={site.img} class={imgClass} alt={site.name} />
package/footer/SimpleFooter.svelte CHANGED
@@ -9,7 +9,7 @@ export let copyrightYear = '© 2022';
9
9
  export let allRightsReserved = 'All Rights Reserved.';
10
10
  </script>
11
11
 
12
- <footer class="{footerClass} {$$props.class}">
12
+ <footer class="{footerClass} {$$props.class ? $$props.class : ''}">
13
13
  <span class={siteNameClass}
14
14
  >{copyrightYear}
15
15
  <a href={site.href} class={siteNameLinkClass} target="_blank">{site.name}</a>. {allRightsReserved}
package/footer/SitemapFooter.svelte CHANGED
@@ -16,7 +16,7 @@ export let copyrightYear = '© 2022';
16
16
  export let allRightsReserved = 'All Rights Reserved.';
17
17
  </script>
18
18
 
19
- <footer class="{footerClass} {$$props.class}">
19
+ <footer class="{footerClass} {$$props.class ? $$props.class : ''}">
20
20
  <div class={linksClass}>
21
21
  {#each links as { parent, children }}
22
22
  <div>
package/footer/SocialMediaFooter.svelte CHANGED
@@ -22,7 +22,7 @@ export let copyrightYear = '© 2022';
22
22
  export let allRightsReserved = 'All Rights Reserved.';
23
23
  </script>
24
24
 
25
- <footer class="{footerClass} {$$props.class}">
25
+ <footer class="{footerClass} {$$props.class ? $$props.class : ''}">
26
26
  <div class={divClass}>
27
27
  <div class={divClass2}>
28
28
  <a href={site.href} class={siteLinkClass}>
package/forms/Iconinput.svelte CHANGED
@@ -20,7 +20,7 @@ function setType(node) {
20
20
  }
21
21
  </script>
22
22
 
23
- <div class={$$props.class}>
23
+ <div class={$$props.class ? $$props.class : ''}>
24
24
  <label for={id} class={labelClass}>{label}</label>
25
25
  {#if noBorder}
26
26
  <div class="relative">
package/forms/Input.svelte CHANGED
@@ -30,22 +30,11 @@ function setType(node) {
30
30
  }
31
31
  </script>
32
32
 
33
- <div class={$$props.class}>
33
+ <div class={$$props.class ? $$props.class : ''}>
34
34
  {#if label}
35
35
  <label for={id} class={labelClass}>{label}</label>
36
36
  {/if}
37
- <input
38
- bind:value
39
- bind:this={ref}
40
- {name}
41
- use:setType
42
- {id}
43
- class={inputClass}
44
- {placeholder}
45
- {required}
46
- {disabled}
47
- {readonly}
48
- />
37
+ <input bind:value bind:this={ref} {name} use:setType {id} class={inputClass} {placeholder} {required} {disabled} {readonly} />
49
38
  {#if helper}
50
39
  <p class={helperClass}>{@html helper}</p>
51
40
  {/if}
package/forms/Toggle.svelte CHANGED
@@ -42,6 +42,6 @@ else if (size === 'large') {
42
42
 
43
43
  <label for={id} class={labelClass}>
44
44
  <input type="checkbox" {id} class={inputClass} {value} {checked} {name} {disabled} />
45
- <div class="{divClass} {$$props.class}" />
45
+ <div class="{divClass} {$$props.class ? $$props.class : ''}" />
46
46
  <span class={spanClass}>{label}</span>
47
47
  </label>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.15.26",
3
+ "version": "0.15.29",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {
@@ -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",