flowbite-svelte 0.14.13 → 0.14.14
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 +7 -0
- package/index.js +5 -0
- package/package.json +5 -1
- package/ratings/AdvancedRating.svelte +24 -0
- package/ratings/AdvancedRating.svelte.d.ts +28 -0
- package/ratings/Rating.svelte +25 -0
- package/ratings/Rating.svelte.d.ts +23 -0
- package/ratings/RatingComment.svelte +30 -0
- package/ratings/RatingComment.svelte.d.ts +28 -0
- package/ratings/ScoreRating.svelte +52 -0
- package/ratings/ScoreRating.svelte.d.ts +36 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
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.14.14](https://github.com/themesberg/flowbite-svelte/compare/v0.14.13...v0.14.14) (2022-04-21)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add Rating, AdvancedRating, and ScoreRating components ([8c91712](https://github.com/themesberg/flowbite-svelte/commit/8c91712d703364948b00c387a2b3f1d42be6159f))
|
|
11
|
+
|
|
5
12
|
### [0.14.13](https://github.com/themesberg/flowbite-svelte/compare/v0.14.12...v0.14.13) (2022-04-20)
|
|
6
13
|
|
|
7
14
|
|
package/index.js
CHANGED
|
@@ -100,6 +100,11 @@ export { default as TableData } from './paginations/TableData.svelte'
|
|
|
100
100
|
// Progressbar
|
|
101
101
|
export { default as Progressbar } from'./progressbars/Progressbar.svelte'
|
|
102
102
|
|
|
103
|
+
// Rating
|
|
104
|
+
export { default as Rating } from './ratings/Rating.svelte'
|
|
105
|
+
export { default as AdvancedRating } from './ratings/AdvancedRating.svelte'
|
|
106
|
+
export { default as ScoreRating } from './ratings/ScoreRating.svelte'
|
|
107
|
+
|
|
103
108
|
// Sidebar
|
|
104
109
|
export { default as Sidebar } from './sidebars/Sidebar.svelte'
|
|
105
110
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.14",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "./package/index.js",
|
|
6
6
|
"author": {
|
|
@@ -155,6 +155,10 @@
|
|
|
155
155
|
"./paginations/Previous.svelte": "./paginations/Previous.svelte",
|
|
156
156
|
"./paginations/TableData.svelte": "./paginations/TableData.svelte",
|
|
157
157
|
"./progressbars/Progressbar.svelte": "./progressbars/Progressbar.svelte",
|
|
158
|
+
"./ratings/AdvancedRating.svelte": "./ratings/AdvancedRating.svelte",
|
|
159
|
+
"./ratings/Rating.svelte": "./ratings/Rating.svelte",
|
|
160
|
+
"./ratings/RatingComment.svelte": "./ratings/RatingComment.svelte",
|
|
161
|
+
"./ratings/ScoreRating.svelte": "./ratings/ScoreRating.svelte",
|
|
158
162
|
"./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
|
|
159
163
|
"./sidebars/SidebarDropdown.svelte": "./sidebars/SidebarDropdown.svelte",
|
|
160
164
|
"./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<script >export let ratings = [];
|
|
2
|
+
export let divClass = 'flex items-center mt-4';
|
|
3
|
+
export let labelClass = 'text-sm font-medium text-blue-600 dark:text-blue-500';
|
|
4
|
+
export let ratingDivClass = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
|
|
5
|
+
export let ratingClass = 'h-5 bg-yellow-400 rounded';
|
|
6
|
+
export let rightLabelClass = 'text-sm font-medium text-blue-600 dark:text-blue-500';
|
|
7
|
+
export let unit = '%';
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
{#if $$slots.rating}
|
|
11
|
+
<slot name="rating" />
|
|
12
|
+
{/if}
|
|
13
|
+
{#if $$slots.globalText}
|
|
14
|
+
<slot name="globalText" />
|
|
15
|
+
{/if}
|
|
16
|
+
{#each ratings as { label, rating }}
|
|
17
|
+
<div class={divClass}>
|
|
18
|
+
<span class={labelClass}>{label}</span>
|
|
19
|
+
<div class={ratingDivClass}>
|
|
20
|
+
<div class={ratingClass} style="width: {rating}%" />
|
|
21
|
+
</div>
|
|
22
|
+
<span class={rightLabelClass}>{rating}{unit}</span>
|
|
23
|
+
</div>
|
|
24
|
+
{/each}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
ratings?: {
|
|
5
|
+
label: string;
|
|
6
|
+
rating: number;
|
|
7
|
+
}[];
|
|
8
|
+
divClass?: string;
|
|
9
|
+
labelClass?: string;
|
|
10
|
+
ratingDivClass?: string;
|
|
11
|
+
ratingClass?: string;
|
|
12
|
+
rightLabelClass?: string;
|
|
13
|
+
unit?: string;
|
|
14
|
+
};
|
|
15
|
+
events: {
|
|
16
|
+
[evt: string]: CustomEvent<any>;
|
|
17
|
+
};
|
|
18
|
+
slots: {
|
|
19
|
+
rating: {};
|
|
20
|
+
globalText: {};
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
export declare type AdvancedRatingProps = typeof __propDef.props;
|
|
24
|
+
export declare type AdvancedRatingEvents = typeof __propDef.events;
|
|
25
|
+
export declare type AdvancedRatingSlots = typeof __propDef.slots;
|
|
26
|
+
export default class AdvancedRating extends SvelteComponentTyped<AdvancedRatingProps, AdvancedRatingEvents, AdvancedRatingSlots> {
|
|
27
|
+
}
|
|
28
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script >import { StarIconSolid } from '@codewithshin/svelte-heroicons';
|
|
2
|
+
export let divClass = 'flex items-center';
|
|
3
|
+
export let total = 5;
|
|
4
|
+
export let rating = 4;
|
|
5
|
+
// default is floor
|
|
6
|
+
export let ceil = false;
|
|
7
|
+
let roundedRating = ceil ? Math.ceil(rating) : Math.floor(rating);
|
|
8
|
+
let grayStars = total - roundedRating;
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<div class={divClass}>
|
|
12
|
+
{#each Array(roundedRating) as _, star}
|
|
13
|
+
<slot name="ratingUp">
|
|
14
|
+
<StarIconSolid className="h-5 w-5 text-yellow-300 dark:text-yellow-200" />
|
|
15
|
+
</slot>
|
|
16
|
+
{/each}
|
|
17
|
+
{#each Array(grayStars) as _, star}
|
|
18
|
+
<slot name="ratingDown">
|
|
19
|
+
<StarIconSolid className="h-5 w-5 text-gray-300 dark:text-gray-500" />
|
|
20
|
+
</slot>
|
|
21
|
+
{/each}
|
|
22
|
+
{#if $$slots.text}
|
|
23
|
+
<slot name="text" />
|
|
24
|
+
{/if}
|
|
25
|
+
</div>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
divClass?: string;
|
|
5
|
+
total?: number;
|
|
6
|
+
rating?: number;
|
|
7
|
+
ceil?: boolean;
|
|
8
|
+
};
|
|
9
|
+
events: {
|
|
10
|
+
[evt: string]: CustomEvent<any>;
|
|
11
|
+
};
|
|
12
|
+
slots: {
|
|
13
|
+
ratingUp: {};
|
|
14
|
+
ratingDown: {};
|
|
15
|
+
text: {};
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export declare type RatingProps = typeof __propDef.props;
|
|
19
|
+
export declare type RatingEvents = typeof __propDef.events;
|
|
20
|
+
export declare type RatingSlots = typeof __propDef.slots;
|
|
21
|
+
export default class Rating extends SvelteComponentTyped<RatingProps, RatingEvents, RatingSlots> {
|
|
22
|
+
}
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script >export let comment;
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<article>
|
|
5
|
+
<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} />
|
|
7
|
+
<div class="space-y-1 font-medium dark:text-white">
|
|
8
|
+
<p>{user.name} {user.desc}</p>
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="flex items-center mb-1">
|
|
12
|
+
<svg class="w-5 h-5 text-yellow-400" 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>
|
|
13
|
+
<svg class="w-5 h-5 text-yellow-400" 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>
|
|
14
|
+
<svg class="w-5 h-5 text-yellow-400" 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>
|
|
15
|
+
<svg class="w-5 h-5 text-yellow-400" 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>
|
|
16
|
+
<svg class="w-5 h-5 text-yellow-400" 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>
|
|
17
|
+
<h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">Thinking to buy another one!</h3>
|
|
18
|
+
</div>
|
|
19
|
+
<footer class="mb-5 text-sm text-gray-500 dark:text-gray-400"><p>Reviewed in the United Kingdom on <time datetime="2017-03-03 19:00">March 3, 2017</time></p></footer>
|
|
20
|
+
<p class="mb-2 font-light text-gray-500 dark:text-gray-400">This is my third Invicta Pro Diver. They are just fantastic value for money. This one arrived yesterday and the first thing I did was set the time, popped on an identical strap from another Invicta and went in the shower with it to test the waterproofing.... No problems.</p>
|
|
21
|
+
<p class="mb-3 font-light text-gray-500 dark:text-gray-400">It is obviously not the same build quality as those very expensive watches. But that is like comparing a Citroën to a Ferrari. This watch was well under £100! An absolute bargain.</p>
|
|
22
|
+
<a href="#" class="block mb-5 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500">Read more</a>
|
|
23
|
+
<aside>
|
|
24
|
+
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">19 people found this helpful</p>
|
|
25
|
+
<div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
|
|
26
|
+
<a href="#" 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">Helpful</a>
|
|
27
|
+
<a href="#" class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500">Report abuse</a>
|
|
28
|
+
</div>
|
|
29
|
+
</aside>
|
|
30
|
+
</article>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
comment: {
|
|
5
|
+
id: string;
|
|
6
|
+
user: {
|
|
7
|
+
name: string;
|
|
8
|
+
img: {
|
|
9
|
+
src: string;
|
|
10
|
+
alt: string;
|
|
11
|
+
};
|
|
12
|
+
desc: string;
|
|
13
|
+
};
|
|
14
|
+
rating: number;
|
|
15
|
+
comment: string;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
};
|
|
23
|
+
export declare type RatingCommentProps = typeof __propDef.props;
|
|
24
|
+
export declare type RatingCommentEvents = typeof __propDef.events;
|
|
25
|
+
export declare type RatingCommentSlots = typeof __propDef.slots;
|
|
26
|
+
export default class RatingComment extends SvelteComponentTyped<RatingCommentProps, RatingCommentEvents, RatingCommentSlots> {
|
|
27
|
+
}
|
|
28
|
+
export {};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<script >export let ratings = [];
|
|
2
|
+
export let ratings2 = [];
|
|
3
|
+
export let headerLabel;
|
|
4
|
+
export let desc1Class = 'bg-blue-100 w-8 text-blue-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-blue-200 dark:text-blue-800';
|
|
5
|
+
export let desc2Class = 'ml-2 w-24 font-medium text-gray-900 dark:text-white';
|
|
6
|
+
export let desc3spanClass = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
|
|
7
|
+
export let desc3pClass = 'text-sm w-24 font-medium text-gray-500 dark:text-gray-400';
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<div class="flex items-center mb-5">
|
|
11
|
+
{#if headerLabel.desc1}
|
|
12
|
+
<p class={desc1Class}>{headerLabel.desc1}</p>
|
|
13
|
+
{/if}
|
|
14
|
+
{#if headerLabel.desc2}
|
|
15
|
+
<p class={desc2Class}>{headerLabel.desc2}</p>
|
|
16
|
+
{/if}
|
|
17
|
+
{#if headerLabel.desc3}
|
|
18
|
+
<span class={desc3spanClass} />
|
|
19
|
+
<p class={desc3pClass}>{headerLabel.desc3}</p>
|
|
20
|
+
{/if}
|
|
21
|
+
{#if headerLabel.link}
|
|
22
|
+
<a href={headerLabel.link.url} class="ml-auto w-32 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500">{headerLabel.link.label}</a>
|
|
23
|
+
{/if}
|
|
24
|
+
</div>
|
|
25
|
+
<div class="gap-8 sm:grid sm:grid-cols-2">
|
|
26
|
+
<div>
|
|
27
|
+
{#each ratings as { label, rating }}
|
|
28
|
+
<dl>
|
|
29
|
+
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
|
|
30
|
+
<dd class="flex items-center mb-3">
|
|
31
|
+
<div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 mr-2">
|
|
32
|
+
<div class="bg-blue-600 h-2.5 rounded dark:bg-blue-500" style="width: {rating * 10}%" />
|
|
33
|
+
</div>
|
|
34
|
+
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
|
|
35
|
+
</dd>
|
|
36
|
+
</dl>
|
|
37
|
+
{/each}
|
|
38
|
+
</div>
|
|
39
|
+
<div>
|
|
40
|
+
{#each ratings2 as { label, rating }}
|
|
41
|
+
<dl>
|
|
42
|
+
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
|
|
43
|
+
<dd class="flex items-center mb-3">
|
|
44
|
+
<div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 mr-2">
|
|
45
|
+
<div class="bg-blue-600 h-2.5 rounded dark:bg-blue-500" style="width: {rating * 10}%" />
|
|
46
|
+
</div>
|
|
47
|
+
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
|
|
48
|
+
</dd>
|
|
49
|
+
</dl>
|
|
50
|
+
{/each}
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
ratings?: {
|
|
5
|
+
label: string;
|
|
6
|
+
rating: number;
|
|
7
|
+
}[];
|
|
8
|
+
ratings2?: {
|
|
9
|
+
label: string;
|
|
10
|
+
rating: number;
|
|
11
|
+
}[];
|
|
12
|
+
headerLabel: {
|
|
13
|
+
desc1: string;
|
|
14
|
+
desc2: string;
|
|
15
|
+
desc3: string;
|
|
16
|
+
link: {
|
|
17
|
+
label: string;
|
|
18
|
+
url: string;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
desc1Class?: string;
|
|
22
|
+
desc2Class?: string;
|
|
23
|
+
desc3spanClass?: string;
|
|
24
|
+
desc3pClass?: string;
|
|
25
|
+
};
|
|
26
|
+
events: {
|
|
27
|
+
[evt: string]: CustomEvent<any>;
|
|
28
|
+
};
|
|
29
|
+
slots: {};
|
|
30
|
+
};
|
|
31
|
+
export declare type ScoreRatingProps = typeof __propDef.props;
|
|
32
|
+
export declare type ScoreRatingEvents = typeof __propDef.events;
|
|
33
|
+
export declare type ScoreRatingSlots = typeof __propDef.slots;
|
|
34
|
+
export default class ScoreRating extends SvelteComponentTyped<ScoreRatingProps, ScoreRatingEvents, ScoreRatingSlots> {
|
|
35
|
+
}
|
|
36
|
+
export {};
|