flowbite-svelte 0.24.4 → 0.24.7

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.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,36 @@
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.7](https://github.com/themesberg/flowbite-svelte/compare/v0.24.5...v0.24.7) (2022-08-11)
6
+
7
+
8
+ ### Features
9
+
10
+ * add Review component ([67af517](https://github.com/themesberg/flowbite-svelte/commit/67af517e32dfc19c6079e5d1925a234f0162cc34))
11
+ * add Review component ([d41b11d](https://github.com/themesberg/flowbite-svelte/commit/d41b11d4ef00d1d6d0d824d4fcdc9c964a78a7d2))
12
+ * add Review component, page, and prop ([4446e1e](https://github.com/themesberg/flowbite-svelte/commit/4446e1eba3706e291f0cb3812b4ffb61df48eb46))
13
+
14
+ ### [0.24.6](https://github.com/themesberg/flowbite-svelte/compare/v0.24.5...v0.24.6) (2022-08-11)
15
+
16
+
17
+ ### Features
18
+
19
+ * add Review component ([d41b11d](https://github.com/themesberg/flowbite-svelte/commit/d41b11d4ef00d1d6d0d824d4fcdc9c964a78a7d2))
20
+
21
+ ### [0.24.5](https://github.com/themesberg/flowbite-svelte/compare/v0.24.4...v0.24.5) (2022-08-11)
22
+
23
+
24
+ ### Features
25
+
26
+ * add rating count and update app.css ([e5d642b](https://github.com/themesberg/flowbite-svelte/commit/e5d642b4a246c1716db8461e6ecbc26a7abad9d0))
27
+
28
+
29
+ ### Bug Fixes
30
+
31
+ * h3 change, modal page update ([945762f](https://github.com/themesberg/flowbite-svelte/commit/945762f325736ac316a7d1cb68d546f0c8acd982))
32
+ * RatingComment component ([032aa24](https://github.com/themesberg/flowbite-svelte/commit/032aa24925f082459992104d5040804e0d532153))
33
+ * update rating page for AdvancedRating ([f1dc978](https://github.com/themesberg/flowbite-svelte/commit/f1dc978b5775e0089cc6c8aa1fac1c5ed8b97dca))
34
+
5
35
  ### [0.24.4](https://github.com/themesberg/flowbite-svelte/compare/v0.24.3...v0.24.4) (2022-08-09)
6
36
 
7
37
 
package/index.d.ts CHANGED
@@ -64,6 +64,8 @@ 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';
68
+ export { default as Review } from './ratings/Review.svelte';
67
69
  export { default as Sidebar } from './sidebars/Sidebar.svelte';
68
70
  export { default as SidebarItem } from './sidebars/SidebarItem.svelte';
69
71
  export { default as SidebarBrand } from './sidebars/SidebarBrand.svelte';
package/index.js CHANGED
@@ -87,6 +87,8 @@ 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';
91
+ export { default as Review } from './ratings/Review.svelte';
90
92
  // Sidebar
91
93
  export { default as Sidebar } from './sidebars/Sidebar.svelte';
92
94
  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.7",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {
@@ -30,6 +30,7 @@
30
30
  "prism-themes": "^1.9.0",
31
31
  "svelte": "^3.47.0",
32
32
  "svelte-check": "^2.8.0",
33
+ "svelte-flag-icons": "^0.1.0",
33
34
  "svelte-heros": "^2.3.3",
34
35
  "svelte-preprocess": "^4.10.7",
35
36
  "svelte-sidebar-menu": "^0.8.4",
@@ -171,6 +172,7 @@
171
172
  "./ratings/AdvancedRating.svelte": "./ratings/AdvancedRating.svelte",
172
173
  "./ratings/Rating.svelte": "./ratings/Rating.svelte",
173
174
  "./ratings/RatingComment.svelte": "./ratings/RatingComment.svelte",
175
+ "./ratings/Review.svelte": "./ratings/Review.svelte",
174
176
  "./ratings/ScoreRating.svelte": "./ratings/ScoreRating.svelte",
175
177
  "./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
176
178
  "./sidebars/SidebarBrand.svelte": "./sidebars/SidebarBrand.svelte",
@@ -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>
@@ -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: {};
@@ -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>
@@ -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: string;
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;
@@ -0,0 +1,63 @@
1
+ <script>import classNames from 'classnames';
2
+ export let review;
3
+ </script>
4
+
5
+ <article class="md:gap-8 md:grid md:grid-cols-3">
6
+ <div>
7
+ <div class="flex items-center mb-6 space-x-4">
8
+ <img class="w-10 h-10 rounded-full" src={review.imgSrc} alt={review.imgAlt} />
9
+ <div class="space-y-1 font-medium dark:text-white">
10
+ <p>{review.name}</p>
11
+ {#if review.address}
12
+ <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
13
+ {#if review.addressIcon}
14
+ <svelte:component this={review.addressIcon} size="16" class="mr-2" />
15
+ {/if}
16
+ {review.address}
17
+ </div>
18
+ {/if}
19
+ </div>
20
+ </div>
21
+ {#if $$slots.item || $$slots.option1 || $$slots.option2}
22
+ <ul class="space-y-4 text-sm text-gray-500 dark:text-gray-400">
23
+ {#if $$slots.item}
24
+ <li class="flex items-center">
25
+ <slot name="item" />
26
+ </li>
27
+ {/if}
28
+ {#if $$slots.option1}
29
+ <li class="flex items-center">
30
+ <slot name="option1" />
31
+ </li>
32
+ {/if}
33
+ {#if $$slots.option2}
34
+ <li class="flex items-center">
35
+ <slot name="option2" />
36
+ </li>
37
+ {/if}
38
+ </ul>
39
+ {/if}
40
+ </div>
41
+ <div class="col-span-2 mt-6 md:mt-0">
42
+ <div class="flex items-start mb-5">
43
+ <div class="pr-4">
44
+ {#if review.reviewDate}
45
+ <footer>
46
+ <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
47
+ Reviewed: {review.reviewDate}
48
+ </p>
49
+ </footer>
50
+ {/if}
51
+ <h4 class="text-xl font-bold text-gray-900 dark:text-white">
52
+ {review.title}
53
+ </h4>
54
+ </div>
55
+ <p
56
+ class="bg-blue-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded"
57
+ >
58
+ {review.rating}
59
+ </p>
60
+ </div>
61
+ <slot />
62
+ </div>
63
+ </article>
@@ -0,0 +1,37 @@
1
+ import { SvelteComponentTyped } from "svelte";
2
+ import type { SvelteComponent } from 'svelte';
3
+ declare const __propDef: {
4
+ props: {
5
+ review: {
6
+ name: string;
7
+ imgSrc: string;
8
+ imgAlt: string;
9
+ address: string | undefined;
10
+ addressIcon: typeof SvelteComponent | undefined;
11
+ reviewDate: string | undefined;
12
+ title: string;
13
+ rating: number;
14
+ item: string | undefined;
15
+ itemIcon: typeof SvelteComponent | undefined;
16
+ option1: string | undefined;
17
+ option1Icon: typeof SvelteComponent | undefined;
18
+ option2: string | undefined;
19
+ option2Icon: typeof SvelteComponent | undefined;
20
+ };
21
+ };
22
+ events: {
23
+ [evt: string]: CustomEvent<any>;
24
+ };
25
+ slots: {
26
+ item: {};
27
+ option1: {};
28
+ option2: {};
29
+ default: {};
30
+ };
31
+ };
32
+ export declare type ReviewProps = typeof __propDef.props;
33
+ export declare type ReviewEvents = typeof __propDef.events;
34
+ export declare type ReviewSlots = typeof __propDef.slots;
35
+ export default class Review extends SvelteComponentTyped<ReviewProps, ReviewEvents, ReviewSlots> {
36
+ }
37
+ export {};