flowbite-svelte 0.24.2 → 0.24.5

package/CHANGELOG.md

@@ -2,6 +2,50 @@
 
 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.
 
+### [0.24.5](https://github.com/themesberg/flowbite-svelte/compare/v0.24.4...v0.24.5) (2022-08-11)
+
+
+### Features
+
+* add rating count and update app.css ([e5d642b](https://github.com/themesberg/flowbite-svelte/commit/e5d642b4a246c1716db8461e6ecbc26a7abad9d0))
+
+
+### Bug Fixes
+
+* h3 change, modal page update ([945762f](https://github.com/themesberg/flowbite-svelte/commit/945762f325736ac316a7d1cb68d546f0c8acd982))
+* RatingComment component ([032aa24](https://github.com/themesberg/flowbite-svelte/commit/032aa24925f082459992104d5040804e0d532153))
+* update rating page for AdvancedRating ([f1dc978](https://github.com/themesberg/flowbite-svelte/commit/f1dc978b5775e0089cc6c8aa1fac1c5ed8b97dca))
+
+### [0.24.4](https://github.com/themesberg/flowbite-svelte/compare/v0.24.3...v0.24.4) (2022-08-09)
+
+
+### Bug Fixes
+
+* remove custom from Button component ([6114f4c](https://github.com/themesberg/flowbite-svelte/commit/6114f4c9f5d9ad0848d5e7c000db6c4c9661ad39))
+* remove h-4 w-4 from Iconinput example in the input-field page ([4d5f396](https://github.com/themesberg/flowbite-svelte/commit/4d5f396ea80389b88ec6a8437228d5dbadd46877))
+* update Button component ([330aae9](https://github.com/themesberg/flowbite-svelte/commit/330aae91c6c1b19cbbd1f35177f5e4bac9de3904))
+* update Iconinput ([2b4a7b5](https://github.com/themesberg/flowbite-svelte/commit/2b4a7b55f7db35f3e5b0cc042aa27a84ff741194))
+
+### [0.24.3](https://github.com/themesberg/flowbite-svelte/compare/v0.24.2...v0.24.3) (2022-08-09)
+
+
+### Features
+
+* add size to Iconinput component ([f041953](https://github.com/themesberg/flowbite-svelte/commit/f04195350a179d55a7315a127d5b116deaac1f41))
+
+
+### Bug Fixes
+
+* add rel=external and / to links to form page ([a237d18](https://github.com/themesberg/flowbite-svelte/commit/a237d1811eb1d6d6f3af545f109c71b8cadbd014))
+* breadcrumb and add rel=external to pages in the forms dir. ([509d72a](https://github.com/themesberg/flowbite-svelte/commit/509d72ae703a0d844653da87aea9119a90cc1018))
+* change package.json>engines>node to 16.0.0 since Verce does not accept. But use local node v16.16.0 for playwright test ([08130e9](https://github.com/themesberg/flowbite-svelte/commit/08130e988c1243b6a248737ed604223c694d5981))
+* clean up ref ([9e8427b](https://github.com/themesberg/flowbite-svelte/commit/9e8427bdbe7ee397a8c5c123a75e48abca298781))
+* done type check for all pages ([d91b018](https://github.com/themesberg/flowbite-svelte/commit/d91b018c3a66a6ac4cef2317651e1821083ab033))
+* remove utils/OptsButton ([04ebd83](https://github.com/themesberg/flowbite-svelte/commit/04ebd83aae8a3f3efabac8f3f144b65fabb04da1))
+* Toggle props and typo update ([9a40224](https://github.com/themesberg/flowbite-svelte/commit/9a40224fc26bfefd9d28ec5d364bf4d7430da6f0))
+* type and layout footer padding fix ([999d291](https://github.com/themesberg/flowbite-svelte/commit/999d29158fde736dbf4e19c9545fff6ba41dc7e7))
+* typo ([ec6f019](https://github.com/themesberg/flowbite-svelte/commit/ec6f019501acf4ba2fb105b8cc04a6d347d0dcf1))
+
 ### [0.24.2](https://github.com/themesberg/flowbite-svelte/compare/v0.24.1...v0.24.2) (2022-08-07)
 
 

package/buttons/Button.svelte

@@ -5,6 +5,7 @@ export let outline = false;
 export let gradient = false;
 export let size = 'md';
 export let href = undefined;
+export let btnClass = undefined;
 export let color = 'blue';
 export let shadow = null;
 const background = getContext('background');
@@ -61,10 +62,14 @@ const sizeClasses = {
     xl: 'px-6 py-3.5 text-base'
 };
 let buttonClass;
-$: buttonClass = classNames('group text-center font-medium focus:ring-4 focus:outline-none', outline && gradient ? 'p-0.5' : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
-    (background
-        ? 'dark:bg-transparent dark:border-gray-700 dark:hover:border-gray-600'
-        : 'dark:bg-transparent dark:border-gray-800 dark:hover:border-gray-700'), pill ? 'rounded-full' : 'rounded-lg', shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+$: buttonClass = btnClass
+    ? btnClass
+    : classNames('group text-center font-medium focus:ring-4 focus:outline-none', outline && gradient
+        ? 'p-0.5'
+        : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
+        (background
+            ? 'dark:bg-transparent dark:border-gray-700 dark:hover:border-gray-600'
+            : 'dark:bg-transparent dark:border-gray-800 dark:hover:border-gray-700'), pill ? 'rounded-full' : 'rounded-lg', shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 let gradientOutlineClass;
 $: gradientOutlineClass = classNames('inline-flex items-center justify-center', sizeClasses[size], pill ? 'rounded-full' : 'rounded-md', 'bg-white text-gray-900 dark:bg-gray-900 dark:text-white', // this is limitation - no transparency
 'transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit');

package/buttons/Button.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         gradient?: boolean;
         size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         href?: string;
+        btnClass?: string;
         color?: 'alternative' | 'blue' | 'cyan' | 'dark' | 'light' | 'lime' | 'green' | 'pink' | 'red' | 'teal' | 'yellow' | 'purple' | 'purpleToBlue' | 'cyanToBlue' | 'greenToBlue' | 'purpleToPink' | 'pinkToOrange' | 'tealToLime' | 'redToYellow';
         shadow?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
     };

package/datepicker/Datepicker.svelte

@@ -1,5 +1,4 @@
-<script>// import { onMount } from 'svelte';
-import Calendar from './Calender.svelte';
+<script>import Calendar from './Calender.svelte';
 export let range = false;
 // autoHide not working
 // export let autoHide: boolean = false;

package/forms/FloatingLabelInput.svelte

@@ -7,7 +7,6 @@ export let size = 'default';
 export let color = 'base';
 export let value = '';
 export let label = '';
-export let ref = null;
 const divClasses = {
     filled: 'relative',
     outlined: 'relative',
@@ -83,7 +82,6 @@ function setType(node) {
 		on:mouseleave
 		on:mouseover
 		on:paste
-		bind:this={ref}
 		use:setType
 		placeholder=" "
 		class={classNames(

package/forms/FloatingLabelInput.svelte.d.ts

@@ -10,7 +10,6 @@ declare const __propDef: {
         color?: 'base' | 'green' | 'red';
         value?: string;
         label?: string;
-        ref?: HTMLElement;
     };
     events: {
         blur: FocusEvent;

package/forms/Iconinput.svelte

@@ -1,14 +1,14 @@
 <script>import classNames from 'classnames';
 export let type = 'text';
 export let value = '';
+export let size = 'md';
 export let icon;
 export let noBorder = false;
-export let inputClass = 'rounded-none rounded-r-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+export let inputClass = 'rounded-none rounded-r-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 export let spanClass = 'inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 rounded-l-md border border-r-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600';
-export let noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+export let noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10   dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
-export let iconClass = 'h-4 w-4 mr-2';
-export let iconSize = 18;
+export let iconClass = 'mr-2';
 function setType(node) {
     node.type = type;
 }
@@ -16,21 +16,63 @@ function setType(node) {
 
 {#if noBorder}
 	<div class="relative">
-		<div class={noBorderDivClass}>
-			<svelte:component this={icon} size={iconSize} class={iconClass} />
+		<div
+			class={classNames(noBorderDivClass, {
+				'p-2 sm:text-xs': size === 'sm',
+				'p-2.5 text-sm': size === 'md',
+				'sm:text-md p-4': size === 'lg'
+			})}
+		>
+			<svelte:component
+				this={icon}
+				size={classNames({
+					16: size === 'sm',
+					18: size === 'md',
+					20: size === 'lg'
+				})}
+				class={iconClass}
+			/>
 		</div>
 		<input
 			{...$$restProps}
 			bind:value
 			use:setType
-			class={classNames(noBorderInputClass, $$props.class)}
+			class={classNames(
+				noBorderInputClass,
+				{
+					'p-2 sm:text-xs': size === 'sm',
+					'p-2.5 text-sm': size === 'md',
+					'sm:text-md p-4': size === 'lg'
+				},
+				$$props.class
+			)}
 		/>
 	</div>
 {:else}
 	<div class="flex">
 		<span class={spanClass}>
-			<svelte:component this={icon} size={iconSize} class={iconClass} />
+			<svelte:component
+				this={icon}
+				size={classNames({
+					16: size === 'sm',
+					18: size === 'md',
+					20: size === 'lg'
+				})}
+				class={iconClass}
+			/>
 		</span>
-		<input {...$$restProps} {type} class={classNames(inputClass, $$props.class)} />
+		<input
+			{...$$restProps}
+			{type}
+			class={classNames(
+				inputClass,
+				{
+					'p-2 sm:text-xs': size === 'sm',
+					'p-2.5 text-sm': size === 'md',
+					'sm:text-md p-4': size === 'lg'
+				},
+				$$props.class
+			)}
+		/>
 	</div>
 {/if}

package/forms/Iconinput.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         [x: string]: any;
         type?: InputType;
         value?: string;
+        size?: 'sm' | 'md' | 'lg';
         icon: typeof SvelteComponent;
         noBorder?: boolean;
         inputClass?: string;
@@ -13,7 +14,6 @@ declare const __propDef: {
         noBorderInputClass?: string;
         noBorderDivClass?: string;
         iconClass?: string;
-        iconSize?: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Input.svelte

@@ -5,7 +5,6 @@ export let value = '';
 export let size = 'md';
 export let inputClass = 'block w-full border disabled:cursor-not-allowed disabled:opacity-50 rounded-lg';
 export let color = 'base';
-export let ref = null;
 const colorClasses = {
     base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
     green: 'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
@@ -22,7 +21,6 @@ function setType(node) {
 <input
 	{...$$restProps}
 	bind:value
-	bind:this={ref}
 	on:blur
 	on:change
 	on:click

package/forms/Input.svelte.d.ts

@@ -8,7 +8,6 @@ declare const __propDef: {
         size?: 'sm' | 'md' | 'lg';
         inputClass?: string;
         color?: 'base' | 'green' | 'red';
-        ref?: HTMLElement;
     };
     events: {
         blur: FocusEvent;

package/forms/Textarea.svelte

@@ -4,7 +4,6 @@ export let id = generateId();
 export let name = 'message';
 export let label = 'Your message';
 export let rows = 4;
-export let ref = null;
 export let placeholder = 'Leave a comment...';
 export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400';
 export let textareaClass = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
@@ -15,7 +14,6 @@ export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
 <label for={id} class={labelClass}>{label}</label>
 <textarea
 	bind:value
-	bind:this={ref}
 	on:blur
 	on:change
 	on:click

package/forms/Textarea.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         name?: string;
         label?: string;
         rows?: number;
-        ref?: HTMLElement;
         placeholder?: string;
         labelClass?: string;
         textareaClass?: string;

package/index.d.ts

@@ -64,6 +64,7 @@ export { default as Progressbar } from './progressbars/Progressbar.svelte';
 export { default as Rating } from './ratings/Rating.svelte';
 export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
 export { default as ScoreRating } from './ratings/ScoreRating.svelte';
+export { default as RatingComment } from './ratings/RatingComment.svelte';
 export { default as Sidebar } from './sidebars/Sidebar.svelte';
 export { default as SidebarItem } from './sidebars/SidebarItem.svelte';
 export { default as SidebarBrand } from './sidebars/SidebarBrand.svelte';

package/index.js

@@ -87,6 +87,7 @@ export { default as Progressbar } from './progressbars/Progressbar.svelte';
 export { default as Rating } from './ratings/Rating.svelte';
 export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
 export { default as ScoreRating } from './ratings/ScoreRating.svelte';
+export { default as RatingComment } from './ratings/RatingComment.svelte';
 // Sidebar
 export { default as Sidebar } from './sidebars/Sidebar.svelte';
 export { default as SidebarItem } from './sidebars/SidebarItem.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.24.2",
+  "version": "0.24.5",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -86,7 +86,7 @@
   },
   "engines": {
     "npm": ">=7.0.0",
-    "node": ">=16.16.0"
+    "node": ">=16.0.0"
   },
   "contributors": [
     "Zoltán Szőgyényi <zoltan@themesberg.com>",
@@ -218,7 +218,6 @@
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
-    "./utils/OptsButton.svelte": "./utils/OptsButton.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/focusTrap": "./utils/focusTrap.js",
     "./utils/generateId": "./utils/generateId.js"

package/paginations/TableData.svelte

@@ -1,5 +1,5 @@
 <script>import { createEventDispatcher } from 'svelte';
-export let helper;
+export let helper = undefined;
 export let btnPreClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-l hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 export let btnNextClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-r border-0 border-l border-gray-700 hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 const dispatch = createEventDispatcher();

package/paginations/TableData.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        helper: {
+        helper?: {
             start: number;
             end: number;
             total: number;
-        };
+        } | undefined;
         btnPreClass?: string;
         btnNextClass?: string;
     };

package/ratings/Rating.svelte

@@ -4,22 +4,29 @@ export let total = 5;
 export let rating = 4;
 // default is floor
 export let ceil = false;
+export let count = false;
 let roundedRating = ceil ? Math.ceil(rating) : Math.floor(rating);
 let grayStars = total - roundedRating;
 </script>
 
 <div class={divClass}>
-	{#each Array(roundedRating) as _, star}
-		<slot name="ratingUp">
-			<Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
-		</slot>
-	{/each}
-	{#each Array(grayStars) as _, star}
-		<slot name="ratingDown">
-			<Star size="26" class="px-0.5 text-gray-300 dark:text-gray-500" />
-		</slot>
-	{/each}
-	{#if $$slots.text}
-		<slot name="text" />
+	{#if count}
+		<Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
+		<p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
+		<slot />
+	{:else}
+		{#each Array(roundedRating) as _, star}
+			<slot name="ratingUp">
+				<Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
+			</slot>
+		{/each}
+		{#each Array(grayStars) as _, star}
+			<slot name="ratingDown">
+				<Star size="24" class="text-gray-300 dark:text-gray-500" />
+			</slot>
+		{/each}
+		{#if $$slots.text}
+			<slot name="text" />
+		{/if}
 	{/if}
 </div>

package/ratings/Rating.svelte.d.ts

@@ -5,11 +5,13 @@ declare const __propDef: {
         total?: number;
         rating?: number;
         ceil?: boolean;
+        count?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        default: {};
         ratingUp: {};
         ratingDown: {};
         text: {};

package/ratings/RatingComment.svelte

@@ -1,91 +1,66 @@
-<script>export let comment;
+<script>import Button from '../buttons/Button.svelte';
+import { Star } from 'svelte-heros';
+// default is floor
+export let ceil = false;
+export let helpfullink = '';
+export let abuselink = '';
+export let comment;
+let roundedRating = ceil ? Math.ceil(comment.rating) : Math.floor(comment.rating);
+let grayStars = comment.total - roundedRating;
 </script>
 
 <article>
 	<div class="flex items-center mb-4 space-x-4">
-		<img class="w-10 h-10 rounded-full" src={user.img.src} alt={user.img.alt} />
+		<img class="w-10 h-10 rounded-full" src={comment.user.img.src} alt={comment.user.img.alt} />
 		<div class="space-y-1 font-medium dark:text-white">
-			<p>{user.name} {user.desc}</p>
+			<p>
+				{comment.user.name}
+				<time datetime="2014-08-16 19:00" class="block text-sm text-gray-500 dark:text-gray-400"
+					>{comment.user.joined}</time
+				>
+			</p>
 		</div>
 	</div>
 	<div class="flex items-center mb-1">
-		<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
-		>
-		<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
-		>
-		<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
-		>
-		<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
-		>
-		<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
-		>
-		<h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
-			Thinking to buy another one!
-		</h3>
+		{#each Array(roundedRating) as _, star}
+			<slot name="ratingUp">
+				<Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
+			</slot>
+		{/each}
+		{#each Array(grayStars) as _, star}
+			<slot name="ratingDown">
+				<Star size="26" class="px-0.5 text-gray-300 dark:text-gray-500" />
+			</slot>
+		{/each}
+		{#if comment.heading}
+			<h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
+				{comment.heading}
+			</h3>
+		{/if}
 	</div>
-	<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>
-	<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>
-	<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>
-	<a
-		href="/"
-		class="block mb-5 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-		>Read more</a
-	>
+	{#if comment.address || comment.datetime}
+		<footer class="mb-5 text-sm text-gray-500 dark:text-gray-400">
+			<p>Reviewed in {comment.address} on {comment.datetime}</p>
+		</footer>
+	{/if}
+	<slot />
 	<aside>
-		<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">19 people found this helpful</p>
-		<div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
-			<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
-			>
-			<a href="/" class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-				>Report abuse</a
-			>
-		</div>
+		<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+			<slot name="evaluation" />
+		</p>
+		{#if helpfullink || abuselink}
+			<div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
+				{#if helpfullink}
+					<Button size="xs" href="/" color="dark">Helpful</Button>
+				{/if}
+				{#if abuselink}
+					<a
+						href={abuselink}
+						class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+						>Report abuse</a
+					>
+				{/if}
+			</div>
+		{/if}
 	</aside>
 </article>

package/ratings/RatingComment.svelte.d.ts

@@ -1,6 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        ceil?: boolean;
+        helpfullink?: string;
+        abuselink?: string;
         comment: {
             id: string;
             user: {
@@ -9,16 +12,24 @@ declare const __propDef: {
                     src: string;
                     alt: string;
                 };
-                desc: string;
+                joined: string;
             };
+            total: number;
             rating: number;
-            comment: string;
+            heading: string;
+            address: string;
+            datetime: number;
         };
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        ratingUp: {};
+        ratingDown: {};
+        default: {};
+        evaluation: {};
+    };
 };
 export declare type RatingCommentProps = typeof __propDef.props;
 export declare type RatingCommentEvents = typeof __propDef.events;

package/utils/OptsButton.svelte

@@ -1,18 +0,0 @@
-<script>
-	import CloseButton from './CloseButton.svelte';
-</script>
-
-<CloseButton on:click {...$$props}>
-	<span class="sr-only">Open options</span>
-	<svg
-		class="w-6 h-6"
-		aria-hidden="true"
-		fill="currentColor"
-		viewBox="0 0 20 20"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"
-		/>
-	</svg>
-</CloseButton>

package/utils/OptsButton.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  OptsButtonProps */
-/** @typedef {typeof __propDef.events}  OptsButtonEvents */
-/** @typedef {typeof __propDef.slots}  OptsButtonSlots */
-export default class OptsButton extends SvelteComponentTyped<{
-    [x: string]: any;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type OptsButtonProps = typeof __propDef.props;
-export type OptsButtonEvents = typeof __propDef.events;
-export type OptsButtonSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};