flowbite-svelte 0.14.12 → 0.14.15
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 +21 -0
- package/carousels/Carousel.svelte +15 -59
- package/carousels/Carousel.svelte.d.ts +2 -0
- package/carousels/CarouselTransition.svelte +15 -59
- package/carousels/CarouselTransition.svelte.d.ts +2 -0
- package/index.js +8 -3
- 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,27 @@
|
|
|
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.15](https://github.com/themesberg/flowbite-svelte/compare/v0.14.14...v0.14.15) (2022-04-23)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add loop to carousel components ([0ae0d66](https://github.com/themesberg/flowbite-svelte/commit/0ae0d66aaf74c7b588978ce88ab7c5117ee4a4e2))
|
|
11
|
+
|
|
12
|
+
### [0.14.14](https://github.com/themesberg/flowbite-svelte/compare/v0.14.13...v0.14.14) (2022-04-21)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* add Rating, AdvancedRating, and ScoreRating components ([8c91712](https://github.com/themesberg/flowbite-svelte/commit/8c91712d703364948b00c387a2b3f1d42be6159f))
|
|
18
|
+
|
|
19
|
+
### [0.14.13](https://github.com/themesberg/flowbite-svelte/compare/v0.14.12...v0.14.13) (2022-04-20)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Bug Fixes
|
|
23
|
+
|
|
24
|
+
* update index.js by adding .js to all store files ([1b1adcd](https://github.com/themesberg/flowbite-svelte/commit/1b1adcdd11dba6c3f37507f91f17795a9f605e25))
|
|
25
|
+
|
|
5
26
|
### [0.14.12](https://github.com/themesberg/flowbite-svelte/compare/v0.14.11...v0.14.12) (2022-04-19)
|
|
6
27
|
|
|
7
28
|
|
|
@@ -7,6 +7,8 @@ export let showCaptions = true;
|
|
|
7
7
|
export let showThumbs = true;
|
|
8
8
|
export let images;
|
|
9
9
|
export let slideControls = true;
|
|
10
|
+
export let loop = false;
|
|
11
|
+
export let duration = 2000;
|
|
10
12
|
// Carousel
|
|
11
13
|
export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
|
|
12
14
|
export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
|
|
@@ -37,6 +39,11 @@ const prevSlide = () => {
|
|
|
37
39
|
};
|
|
38
40
|
const goToSlide = (number) => (imageShowingIndex = number);
|
|
39
41
|
let thumbWidth = 100 / images.length;
|
|
42
|
+
if (loop) {
|
|
43
|
+
setInterval(() => {
|
|
44
|
+
nextSlide();
|
|
45
|
+
}, duration);
|
|
46
|
+
}
|
|
40
47
|
</script>
|
|
41
48
|
|
|
42
49
|
<div id="default-carousel" class="relative">
|
|
@@ -47,64 +54,21 @@ let thumbWidth = 100 / images.length;
|
|
|
47
54
|
<!-- Slider indicators -->
|
|
48
55
|
<div class={indicatorDivClass}>
|
|
49
56
|
{#each images as { id, imgurl, name, attribution }}
|
|
50
|
-
<Indicator
|
|
51
|
-
{name}
|
|
52
|
-
selected={imageShowingIndex === id}
|
|
53
|
-
on:click={() => goToSlide(id)}
|
|
54
|
-
{indicatorClass}
|
|
55
|
-
/>
|
|
57
|
+
<Indicator {name} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} {indicatorClass} />
|
|
56
58
|
{/each}
|
|
57
59
|
</div>
|
|
58
60
|
{/if}
|
|
59
61
|
{#if slideControls}
|
|
60
62
|
<!-- Slider controls -->
|
|
61
|
-
<button
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
|
|
65
|
-
data-carousel-prev
|
|
66
|
-
>
|
|
67
|
-
<span
|
|
68
|
-
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
|
|
69
|
-
>
|
|
70
|
-
<svg
|
|
71
|
-
class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
|
|
72
|
-
fill="none"
|
|
73
|
-
stroke="currentColor"
|
|
74
|
-
viewBox="0 0 24 24"
|
|
75
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
76
|
-
><path
|
|
77
|
-
stroke-linecap="round"
|
|
78
|
-
stroke-linejoin="round"
|
|
79
|
-
stroke-width="2"
|
|
80
|
-
d="M15 19l-7-7 7-7"
|
|
81
|
-
/></svg
|
|
82
|
-
>
|
|
63
|
+
<button on:click={prevSlide} type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
|
|
64
|
+
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
|
65
|
+
<svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
|
|
83
66
|
<span class="hidden">Previous</span>
|
|
84
67
|
</span>
|
|
85
68
|
</button>
|
|
86
|
-
<button
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
|
|
90
|
-
data-carousel-next
|
|
91
|
-
>
|
|
92
|
-
<span
|
|
93
|
-
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
|
|
94
|
-
>
|
|
95
|
-
<svg
|
|
96
|
-
class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
|
|
97
|
-
fill="none"
|
|
98
|
-
stroke="currentColor"
|
|
99
|
-
viewBox="0 0 24 24"
|
|
100
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
101
|
-
><path
|
|
102
|
-
stroke-linecap="round"
|
|
103
|
-
stroke-linejoin="round"
|
|
104
|
-
stroke-width="2"
|
|
105
|
-
d="M9 5l7 7-7 7"
|
|
106
|
-
/></svg
|
|
107
|
-
>
|
|
69
|
+
<button on:click={nextSlide} type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
|
|
70
|
+
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
|
71
|
+
<svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
|
108
72
|
<span class="hidden">Next</span>
|
|
109
73
|
</span>
|
|
110
74
|
</button>
|
|
@@ -118,15 +82,7 @@ let thumbWidth = 100 / images.length;
|
|
|
118
82
|
{#if showThumbs}
|
|
119
83
|
<div class="flex flex-row justify-center bg-gray-100">
|
|
120
84
|
{#each images as { id, imgurl, name, attribution }}
|
|
121
|
-
<Thumbnail
|
|
122
|
-
{thumbWidth}
|
|
123
|
-
thumbImg={imgurl}
|
|
124
|
-
altTag={name}
|
|
125
|
-
titleLink={attribution}
|
|
126
|
-
{id}
|
|
127
|
-
selected={imageShowingIndex === id}
|
|
128
|
-
on:click={() => goToSlide(id)}
|
|
129
|
-
/>
|
|
85
|
+
<Thumbnail {thumbWidth} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
|
|
130
86
|
{/each}
|
|
131
87
|
</div>
|
|
132
88
|
{/if}
|
|
@@ -10,6 +10,8 @@ export let images;
|
|
|
10
10
|
export let slideControls = true;
|
|
11
11
|
export let transitionType;
|
|
12
12
|
export let transitionParams = {};
|
|
13
|
+
export let loop = false;
|
|
14
|
+
export let duration = 2000;
|
|
13
15
|
// have a custom transition function that returns the desired transition
|
|
14
16
|
function multiple(node, params) {
|
|
15
17
|
switch (transitionType) {
|
|
@@ -53,6 +55,11 @@ const prevSlide = () => {
|
|
|
53
55
|
};
|
|
54
56
|
const goToSlide = (number) => (imageShowingIndex = number);
|
|
55
57
|
let thumbWidth = 100 / images.length;
|
|
58
|
+
if (loop) {
|
|
59
|
+
setInterval(() => {
|
|
60
|
+
nextSlide();
|
|
61
|
+
}, duration);
|
|
62
|
+
}
|
|
56
63
|
</script>
|
|
57
64
|
|
|
58
65
|
<div id="default-carousel" class="relative">
|
|
@@ -70,64 +77,21 @@ let thumbWidth = 100 / images.length;
|
|
|
70
77
|
<!-- Slider indicators -->
|
|
71
78
|
<div class={indicatorDivClass}>
|
|
72
79
|
{#each images as { id, imgurl, name, attribution }}
|
|
73
|
-
<Indicator
|
|
74
|
-
{name}
|
|
75
|
-
selected={imageShowingIndex === id}
|
|
76
|
-
on:click={() => goToSlide(id)}
|
|
77
|
-
{indicatorClass}
|
|
78
|
-
/>
|
|
80
|
+
<Indicator {name} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} {indicatorClass} />
|
|
79
81
|
{/each}
|
|
80
82
|
</div>
|
|
81
83
|
{/if}
|
|
82
84
|
{#if slideControls}
|
|
83
85
|
<!-- Slider controls -->
|
|
84
|
-
<button
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
|
|
88
|
-
data-carousel-prev
|
|
89
|
-
>
|
|
90
|
-
<span
|
|
91
|
-
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
|
|
92
|
-
>
|
|
93
|
-
<svg
|
|
94
|
-
class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
|
|
95
|
-
fill="none"
|
|
96
|
-
stroke="currentColor"
|
|
97
|
-
viewBox="0 0 24 24"
|
|
98
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
99
|
-
><path
|
|
100
|
-
stroke-linecap="round"
|
|
101
|
-
stroke-linejoin="round"
|
|
102
|
-
stroke-width="2"
|
|
103
|
-
d="M15 19l-7-7 7-7"
|
|
104
|
-
/></svg
|
|
105
|
-
>
|
|
86
|
+
<button on:click={prevSlide} type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
|
|
87
|
+
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
|
88
|
+
<svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
|
|
106
89
|
<span class="hidden">Previous</span>
|
|
107
90
|
</span>
|
|
108
91
|
</button>
|
|
109
|
-
<button
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
|
|
113
|
-
data-carousel-next
|
|
114
|
-
>
|
|
115
|
-
<span
|
|
116
|
-
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
|
|
117
|
-
>
|
|
118
|
-
<svg
|
|
119
|
-
class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
|
|
120
|
-
fill="none"
|
|
121
|
-
stroke="currentColor"
|
|
122
|
-
viewBox="0 0 24 24"
|
|
123
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
124
|
-
><path
|
|
125
|
-
stroke-linecap="round"
|
|
126
|
-
stroke-linejoin="round"
|
|
127
|
-
stroke-width="2"
|
|
128
|
-
d="M9 5l7 7-7 7"
|
|
129
|
-
/></svg
|
|
130
|
-
>
|
|
92
|
+
<button on:click={nextSlide} type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
|
|
93
|
+
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
|
94
|
+
<svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
|
131
95
|
<span class="hidden">Next</span>
|
|
132
96
|
</span>
|
|
133
97
|
</button>
|
|
@@ -141,15 +105,7 @@ let thumbWidth = 100 / images.length;
|
|
|
141
105
|
{#if showThumbs}
|
|
142
106
|
<div class="flex flex-row justify-center bg-gray-100">
|
|
143
107
|
{#each images as { id, imgurl, name, attribution }}
|
|
144
|
-
<Thumbnail
|
|
145
|
-
{thumbWidth}
|
|
146
|
-
thumbImg={imgurl}
|
|
147
|
-
altTag={name}
|
|
148
|
-
titleLink={attribution}
|
|
149
|
-
{id}
|
|
150
|
-
selected={imageShowingIndex === id}
|
|
151
|
-
on:click={() => goToSlide(id)}
|
|
152
|
-
/>
|
|
108
|
+
<Thumbnail {thumbWidth} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
|
|
153
109
|
{/each}
|
|
154
110
|
</div>
|
|
155
111
|
{/if}
|
package/index.js
CHANGED
|
@@ -55,7 +55,7 @@ export { default as DarkMode } from'./darkmode/DarkMode.svelte'
|
|
|
55
55
|
// Dropdown
|
|
56
56
|
export { default as Dropdown } from './dropdowns/DropdownDefault.svelte'
|
|
57
57
|
export { default as ImgDropdown } from './dropdowns/ImgDropdown.svelte'
|
|
58
|
-
export { dropdownIdStore } from './dropdowns/dropdownStores'
|
|
58
|
+
export { dropdownIdStore } from './dropdowns/dropdownStores.js'
|
|
59
59
|
|
|
60
60
|
// Footers
|
|
61
61
|
export { default as SimpleFooter } from'./footer/SimpleFooter.svelte'
|
|
@@ -79,7 +79,7 @@ export { default as Toggle } from './forms/Toggle.svelte'
|
|
|
79
79
|
export { default as List } from'./list-group/List.svelte'
|
|
80
80
|
|
|
81
81
|
// Modals
|
|
82
|
-
export { modalIdStore } from './modals/modalStores'
|
|
82
|
+
export { modalIdStore } from './modals/modalStores.js'
|
|
83
83
|
export { default as ExtraLargeModal } from'./modals/ExtraLargeModal.svelte'
|
|
84
84
|
export { default as LargeModal } from'./modals/LargeModal.svelte'
|
|
85
85
|
export { default as MediumModal } from'./modals/MediumModal.svelte'
|
|
@@ -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
|
|
|
@@ -113,7 +118,7 @@ export { default as TableDefaultRow } from './tables/TableDefaultRow.svelte'
|
|
|
113
118
|
export { default as TableSearch } from './tables/TableSearch.svelte'
|
|
114
119
|
|
|
115
120
|
// Tabs
|
|
116
|
-
export { tabStore } from './tabs/tabStores'
|
|
121
|
+
export { tabStore } from './tabs/tabStores.js'
|
|
117
122
|
export { default as InteractiveTabHead } from './tabs/InteractiveTabHead.svelte'
|
|
118
123
|
export { default as InteractiveTabs } from'./tabs/InteractiveTabs.svelte'
|
|
119
124
|
export { default as DefaultTabs } from './tabs/DefaultTabs.svelte'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.15",
|
|
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 {};
|