flowbite-svelte 0.24.4 → 0.24.5

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 (8) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/index.d.ts +1 -0
  3. package/index.js +1 -0
  4. package/package.json +1 -1
  5. package/ratings/Rating.svelte +19 -12
  6. package/ratings/Rating.svelte.d.ts +2 -0
  7. package/ratings/RatingComment.svelte +54 -79
  8. package/ratings/RatingComment.svelte.d.ts +14 -3
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
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.24.5](https://github.com/themesberg/flowbite-svelte/compare/v0.24.4...v0.24.5) (2022-08-11)
6
+
7
+
8
+ ### Features
9
+
10
+ * add rating count and update app.css ([e5d642b](https://github.com/themesberg/flowbite-svelte/commit/e5d642b4a246c1716db8461e6ecbc26a7abad9d0))
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * h3 change, modal page update ([945762f](https://github.com/themesberg/flowbite-svelte/commit/945762f325736ac316a7d1cb68d546f0c8acd982))
16
+ * RatingComment component ([032aa24](https://github.com/themesberg/flowbite-svelte/commit/032aa24925f082459992104d5040804e0d532153))
17
+ * update rating page for AdvancedRating ([f1dc978](https://github.com/themesberg/flowbite-svelte/commit/f1dc978b5775e0089cc6c8aa1fac1c5ed8b97dca))
18
+
5
19
  ### [0.24.4](https://github.com/themesberg/flowbite-svelte/compare/v0.24.3...v0.24.4) (2022-08-09)
6
20
 
7
21
 
package/index.d.ts CHANGED
@@ -64,6 +64,7 @@ export { default as Progressbar } from './progressbars/Progressbar.svelte';
64
64
  export { default as Rating } from './ratings/Rating.svelte';
65
65
  export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
66
66
  export { default as ScoreRating } from './ratings/ScoreRating.svelte';
67
+ export { default as RatingComment } from './ratings/RatingComment.svelte';
67
68
  export { default as Sidebar } from './sidebars/Sidebar.svelte';
68
69
  export { default as SidebarItem } from './sidebars/SidebarItem.svelte';
69
70
  export { default as SidebarBrand } from './sidebars/SidebarBrand.svelte';
package/index.js CHANGED
@@ -87,6 +87,7 @@ export { default as Progressbar } from './progressbars/Progressbar.svelte';
87
87
  export { default as Rating } from './ratings/Rating.svelte';
88
88
  export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
89
89
  export { default as ScoreRating } from './ratings/ScoreRating.svelte';
90
+ export { default as RatingComment } from './ratings/RatingComment.svelte';
90
91
  // Sidebar
91
92
  export { default as Sidebar } from './sidebars/Sidebar.svelte';
92
93
  export { default as SidebarItem } from './sidebars/SidebarItem.svelte';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.24.4",
3
+ "version": "0.24.5",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {
package/ratings/Rating.svelte CHANGED
@@ -4,22 +4,29 @@ export let total = 5;
4
4
  export let rating = 4;
5
5
  // default is floor
6
6
  export let ceil = false;
7
+ export let count = false;
7
8
  let roundedRating = ceil ? Math.ceil(rating) : Math.floor(rating);
8
9
  let grayStars = total - roundedRating;
9
10
  </script>
10
11
 
11
12
  <div class={divClass}>
12
- {#each Array(roundedRating) as _, star}
13
- <slot name="ratingUp">
14
- <Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
15
- </slot>
16
- {/each}
17
- {#each Array(grayStars) as _, star}
18
- <slot name="ratingDown">
19
- <Star size="26" class="px-0.5 text-gray-300 dark:text-gray-500" />
20
- </slot>
21
- {/each}
22
- {#if $$slots.text}
23
- <slot name="text" />
13
+ {#if count}
14
+ <Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
15
+ <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
16
+ <slot />
17
+ {:else}
18
+ {#each Array(roundedRating) as _, star}
19
+ <slot name="ratingUp">
20
+ <Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
21
+ </slot>
22
+ {/each}
23
+ {#each Array(grayStars) as _, star}
24
+ <slot name="ratingDown">
25
+ <Star size="24" class="text-gray-300 dark:text-gray-500" />
26
+ </slot>
27
+ {/each}
28
+ {#if $$slots.text}
29
+ <slot name="text" />
30
+ {/if}
24
31
  {/if}
25
32
  </div>
package/ratings/Rating.svelte.d.ts CHANGED
@@ -5,11 +5,13 @@ declare const __propDef: {
5
5
  total?: number;
6
6
  rating?: number;
7
7
  ceil?: boolean;
8
+ count?: boolean;
8
9
  };
9
10
  events: {
10
11
  [evt: string]: CustomEvent<any>;
11
12
  };
12
13
  slots: {
14
+ default: {};
13
15
  ratingUp: {};
14
16
  ratingDown: {};
15
17
  text: {};
package/ratings/RatingComment.svelte CHANGED
@@ -1,91 +1,66 @@
1
- <script>export let comment;
1
+ <script>import Button from '../buttons/Button.svelte';
2
+ import { Star } from 'svelte-heros';
3
+ // default is floor
4
+ export let ceil = false;
5
+ export let helpfullink = '';
6
+ export let abuselink = '';
7
+ export let comment;
8
+ let roundedRating = ceil ? Math.ceil(comment.rating) : Math.floor(comment.rating);
9
+ let grayStars = comment.total - roundedRating;
2
10
  </script>
3
11
 
4
12
  <article>
5
13
  <div class="flex items-center mb-4 space-x-4">
6
- <img class="w-10 h-10 rounded-full" src={user.img.src} alt={user.img.alt} />
14
+ <img class="w-10 h-10 rounded-full" src={comment.user.img.src} alt={comment.user.img.alt} />
7
15
  <div class="space-y-1 font-medium dark:text-white">
8
- <p>{user.name} {user.desc}</p>
16
+ <p>
17
+ {comment.user.name}
18
+ <time datetime="2014-08-16 19:00" class="block text-sm text-gray-500 dark:text-gray-400"
19
+ >{comment.user.joined}</time
20
+ >
21
+ </p>
9
22
  </div>
10
23
  </div>
11
24
  <div class="flex items-center mb-1">
12
- <svg
13
- class="w-5 h-5 text-yellow-400"
14
- fill="currentColor"
15
- viewBox="0 0 20 20"
16
- xmlns="http://www.w3.org/2000/svg"
17
- ><path
18
- 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"
19
- /></svg
20
- >
21
- <svg
22
- class="w-5 h-5 text-yellow-400"
23
- fill="currentColor"
24
- viewBox="0 0 20 20"
25
- xmlns="http://www.w3.org/2000/svg"
26
- ><path
27
- 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"
28
- /></svg
29
- >
30
- <svg
31
- class="w-5 h-5 text-yellow-400"
32
- fill="currentColor"
33
- viewBox="0 0 20 20"
34
- xmlns="http://www.w3.org/2000/svg"
35
- ><path
36
- 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"
37
- /></svg
38
- >
39
- <svg
40
- class="w-5 h-5 text-yellow-400"
41
- fill="currentColor"
42
- viewBox="0 0 20 20"
43
- xmlns="http://www.w3.org/2000/svg"
44
- ><path
45
- 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"
46
- /></svg
47
- >
48
- <svg
49
- class="w-5 h-5 text-yellow-400"
50
- fill="currentColor"
51
- viewBox="0 0 20 20"
52
- xmlns="http://www.w3.org/2000/svg"
53
- ><path
54
- 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"
55
- /></svg
56
- >
57
- <h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
58
- Thinking to buy another one!
59
- </h3>
25
+ {#each Array(roundedRating) as _, star}
26
+ <slot name="ratingUp">
27
+ <Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
28
+ </slot>
29
+ {/each}
30
+ {#each Array(grayStars) as _, star}
31
+ <slot name="ratingDown">
32
+ <Star size="26" class="px-0.5 text-gray-300 dark:text-gray-500" />
33
+ </slot>
34
+ {/each}
35
+ {#if comment.heading}
36
+ <h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
37
+ {comment.heading}
38
+ </h3>
39
+ {/if}
60
40
  </div>
61
- <footer class="mb-5 text-sm text-gray-500 dark:text-gray-400">
62
- <p>Reviewed in the United Kingdom on <time datetime="2017-03-03 19:00">March 3, 2017</time></p>
63
- </footer>
64
- <p class="mb-2 font-light text-gray-500 dark:text-gray-400">
65
- This is my third Invicta Pro Diver. They are just fantastic value for money. This one arrived
66
- yesterday and the first thing I did was set the time, popped on an identical strap from another
67
- Invicta and went in the shower with it to test the waterproofing.... No problems.
68
- </p>
69
- <p class="mb-3 font-light text-gray-500 dark:text-gray-400">
70
- It is obviously not the same build quality as those very expensive watches. But that is like
71
- comparing a Citroën to a Ferrari. This watch was well under £100! An absolute bargain.
72
- </p>
73
- <a
74
- href="/"
75
- class="block mb-5 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
76
- >Read more</a
77
- >
41
+ {#if comment.address || comment.datetime}
42
+ <footer class="mb-5 text-sm text-gray-500 dark:text-gray-400">
43
+ <p>Reviewed in {comment.address} on {comment.datetime}</p>
44
+ </footer>
45
+ {/if}
46
+ <slot />
78
47
  <aside>
79
- <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">19 people found this helpful</p>
80
- <div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
81
- <a
82
- href="/"
83
- class="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 rounded-lg text-xs px-2 py-1.5 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"
84
- >Helpful</a
85
- >
86
- <a href="/" class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
87
- >Report abuse</a
88
- >
89
- </div>
48
+ <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
49
+ <slot name="evaluation" />
50
+ </p>
51
+ {#if helpfullink || abuselink}
52
+ <div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
53
+ {#if helpfullink}
54
+ <Button size="xs" href="/" color="dark">Helpful</Button>
55
+ {/if}
56
+ {#if abuselink}
57
+ <a
58
+ href={abuselink}
59
+ class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
60
+ >Report abuse</a
61
+ >
62
+ {/if}
63
+ </div>
64
+ {/if}
90
65
  </aside>
91
66
  </article>
package/ratings/RatingComment.svelte.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
+ ceil?: boolean;
5
+ helpfullink?: string;
6
+ abuselink?: string;
4
7
  comment: {
5
8
  id: string;
6
9
  user: {
@@ -9,16 +12,24 @@ declare const __propDef: {
9
12
  src: string;
10
13
  alt: string;
11
14
  };
12
- desc: string;
15
+ joined: string;
13
16
  };
17
+ total: number;
14
18
  rating: number;
15
- comment: string;
19
+ heading: string;
20
+ address: string;
21
+ datetime: number;
16
22
  };
17
23
  };
18
24
  events: {
19
25
  [evt: string]: CustomEvent<any>;
20
26
  };
21
- slots: {};
27
+ slots: {
28
+ ratingUp: {};
29
+ ratingDown: {};
30
+ default: {};
31
+ evaluation: {};
32
+ };
22
33
  };
23
34
  export declare type RatingCommentProps = typeof __propDef.props;
24
35
  export declare type RatingCommentEvents = typeof __propDef.events;