flowbite-svelte 0.24.7 → 0.24.8

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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.8](https://github.com/themesberg/flowbite-svelte/compare/v0.24.7...v0.24.8) (2022-08-12)
+
+
+### Bug Fixes
+
+* change function clickOutside to arrow function ([71e71e0](https://github.com/themesberg/flowbite-svelte/commit/71e71e0e482ad9939f9d135b1608b5cc8d31d899))
+* update createprops and update props ([0739b92](https://github.com/themesberg/flowbite-svelte/commit/0739b9296caddcba85f849b222e6548a961dbd34))
+
 ### [0.24.7](https://github.com/themesberg/flowbite-svelte/compare/v0.24.5...v0.24.7) (2022-08-11)
 
 

package/accordions/AccordionFlush.svelte

@@ -5,6 +5,8 @@ import { ChevronDown, ChevronUp } from 'svelte-heros';
 export let id = '';
 export let btnClass = 'flex justify-between items-center py-5 w-full font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400';
 export let slotClass = 'py-5 border-b border-gray-200 dark:border-gray-700';
+export let iconSize = 24;
+export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
 export let isOpen = false;
 export let icons = {
     up: ChevronUp,
@@ -18,8 +20,6 @@ onMount(() => {
 const handleToggle = (id) => {
     isOpen = !isOpen;
 };
-export let iconSize = 24;
-export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
 </script>
 
 <h2 aria-expanded={isOpen}>

package/accordions/AccordionFlush.svelte.d.ts

@@ -6,10 +6,10 @@ declare const __propDef: {
         id?: string;
         btnClass?: string;
         slotClass?: string;
-        isOpen?: boolean;
-        icons?: AccordionIconType;
         iconSize?: number;
         iconClass?: string;
+        isOpen?: boolean;
+        icons?: AccordionIconType;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/carousels/CarouselTransition.svelte

@@ -28,7 +28,7 @@ export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2
 // Indicator
 export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
 // have a custom transition function that returns the desired transition
-function multiple(node, params) {
+const multiple = (node, params) => {
     switch (transitionType) {
         case 'slide':
             return slide(node, params);
@@ -39,7 +39,7 @@ function multiple(node, params) {
         case 'fade':
             return fade(node, params);
     }
-}
+};
 // Slide
 // export let slideClass: string = 'hidden';
 let imageShowingIndex = 1;

package/forms/Iconinput.svelte

@@ -9,9 +9,9 @@ export let spanClass = 'inline-flex items-center px-3 text-sm text-gray-900 bg-g
 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 = 'mr-2';
-function setType(node) {
+const setType = (node) => {
     node.type = type;
-}
+};
 </script>
 
 {#if noBorder}

package/forms/Input.svelte

@@ -13,9 +13,9 @@ const colorClasses = {
 // tinted if put in component having its own background
 let background = getContext('background');
 // you need to this to avoid 2-way binding
-function setType(node) {
+const setType = (node) => {
     node.type = type;
-}
+};
 </script>
 
 <input

package/megamenu/MegaMenu.svelte

@@ -7,11 +7,11 @@ let wrapperClass;
 $: wrapperClass = classNames('border-gray-100 shadow-md dark:border-gray-700', full ? 'border-y' : 'rounded-lg border', full ? 'bg-white dark:bg-gray-800' : 'bg-white dark:bg-gray-700', $$props.class);
 let ulClass;
 $: ulClass = classNames('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max', full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3', 'text-sm font-medium', 'text-gray-500 dark:text-gray-400', full && $$slots.extra && 'md:w-2/3');
-function init(node) {
+const init = (node) => {
     if (full) {
         node.parentElement.classList.add('inset-x-0');
     }
-}
+};
 </script>
 
 <div class={wrapperClass} use:init>

package/modals/Modal.svelte

@@ -18,7 +18,7 @@ const allPlacementClasses = [
     'items-end'
 ];
 let backdropEl;
-function init(node, _open) {
+const init = (node, _open) => {
     getPlacementClasses().map((c) => node.classList.add(c));
     _open && createBackdrop(node);
     return {
@@ -31,12 +31,12 @@ function init(node, _open) {
             destroyBackdrop(node);
         }
     };
-}
-function handleEscape(e) {
+};
+const handleEscape = (e) => {
     if (open && e.key === 'Escape')
         open = false;
-}
-function createBackdrop(node) {
+};
+const createBackdrop = (node) => {
     if (!backdropEl) {
         backdropEl = document.createElement('div');
         backdropEl.classList.add(...backdropClasses.split(' '));
@@ -46,8 +46,8 @@ function createBackdrop(node) {
         document.addEventListener('keydown', handleEscape, true);
     }
     dispatch('show', node);
-}
-function destroyBackdrop(node) {
+};
+const destroyBackdrop = (node) => {
     const body = document.querySelector('body');
     body.style.overflow = 'auto';
     if (backdropEl)
@@ -55,8 +55,8 @@ function destroyBackdrop(node) {
     backdropEl = undefined;
     document.removeEventListener('keydown', handleEscape, true);
     dispatch('hide', node);
-}
-function getPlacementClasses() {
+};
+const getPlacementClasses = () => {
     switch (placement) {
         // top
         case 'top-left':
@@ -82,7 +82,7 @@ function getPlacementClasses() {
         default:
             return ['justify-center', 'items-center'];
     }
-}
+};
 const sizes = {
     xs: 'max-w-md',
     sm: 'max-w-lg',
@@ -90,13 +90,13 @@ const sizes = {
     lg: 'max-w-4xl',
     xl: 'max-w-7xl'
 };
-function onButtonsClick({ target }) {
+const onButtonsClick = ({ target }) => {
     if (autoclose && target.tagName === 'BUTTON')
         open = !open;
-}
-function hide() {
+};
+const hide = () => {
     open = false;
-}
+};
 </script>
 
 <!-- Main modal -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.24.7",
+  "version": "0.24.8",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -12,33 +12,33 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@playwright/test": "^1.23.4",
+    "@playwright/test": "^1.25.0",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
-    "@typescript-eslint/eslint-plugin": "^5.30.7",
-    "@typescript-eslint/parser": "^5.30.7",
-    "autoprefixer": "^10.4.4",
-    "createprops": "^0.4.4",
-    "eslint": "^8.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/parser": "^5.33.0",
+    "autoprefixer": "^10.4.8",
+    "createprops": "^0.4.9",
+    "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "mdsvex": "^0.10.6",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.16",
     "postcss-load-config": "3.1.4",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
     "prism-themes": "^1.9.0",
-    "svelte": "^3.47.0",
+    "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
-    "svelte-flag-icons": "^0.1.0",
+    "svelte-flag-icons": "^0.1.1",
     "svelte-heros": "^2.3.3",
     "svelte-preprocess": "^4.10.7",
-    "svelte-sidebar-menu": "^0.8.4",
-    "svelte2tsx": "^0.5.11",
-    "tailwindcss": "^3.1.6",
-    "tslib": "^2.3.1",
+    "svelte-sidebar-menu": "^0.8.11",
+    "svelte2tsx": "^0.5.13",
+    "tailwindcss": "^3.1.8",
+    "tslib": "^2.4.0",
     "typescript": "~4.7.4",
-    "vite": "^3.0.2"
+    "vite": "^3.0.7"
   },
   "type": "module",
   "keywords": [
@@ -81,9 +81,9 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@floating-ui/dom": "^0.5.3",
+    "@floating-ui/dom": "^0.5.4",
     "classnames": "^2.3.1",
-    "flowbite": "^1.4.2"
+    "flowbite": "^1.5.2"
   },
   "engines": {
     "npm": ">=7.0.0",

package/paginations/TableData.svelte

@@ -1,7 +1,7 @@
 <script>import { createEventDispatcher } from 'svelte';
-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';
+export let helper = undefined;
 const dispatch = createEventDispatcher();
 const previous = () => {
     dispatch('previous');

package/paginations/TableData.svelte.d.ts

@@ -1,13 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { TableDataHelperType } from '../types';
 declare const __propDef: {
     props: {
-        helper?: {
-            start: number;
-            end: number;
-            total: number;
-        } | undefined;
         btnPreClass?: string;
         btnNextClass?: string;
+        helper?: TableDataHelperType | undefined;
     };
     events: {
         blur: FocusEvent;

package/ratings/Review.svelte

@@ -1,11 +1,16 @@
 <script>import classNames from 'classnames';
 export let review;
+export let articleClass = 'md:gap-8 md:grid md:grid-cols-3';
+export let divClass = 'flex items-center mb-6 space-x-4';
+export let imgClass = 'w-10 h-10 rounded-full';
+export let ulClass = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
+export let liClass = 'flex items-center';
 </script>
 
-<article class="md:gap-8 md:grid md:grid-cols-3">
+<article class={classNames(articleClass, $$props.classArticle)}>
 	<div>
-		<div class="flex items-center mb-6 space-x-4">
-			<img class="w-10 h-10 rounded-full" src={review.imgSrc} alt={review.imgAlt} />
+		<div class={classNames(divClass, $$props.classDiv)}>
+			<img class={classNames(imgClass, $$props.classImg)} src={review.imgSrc} alt={review.imgAlt} />
 			<div class="space-y-1 font-medium dark:text-white">
 				<p>{review.name}</p>
 				{#if review.address}
@@ -19,19 +24,19 @@ export let review;
 			</div>
 		</div>
 		{#if $$slots.item || $$slots.option1 || $$slots.option2}
-			<ul class="space-y-4 text-sm text-gray-500 dark:text-gray-400">
+			<ul class={classNames(ulClass, $$props.classUl)}>
 				{#if $$slots.item}
-					<li class="flex items-center">
+					<li class={classNames(liClass, $$props.classLi)}>
 						<slot name="item" />
 					</li>
 				{/if}
 				{#if $$slots.option1}
-					<li class="flex items-center">
+					<li class={classNames(liClass, $$props.classLi)}>
 						<slot name="option1" />
 					</li>
 				{/if}
 				{#if $$slots.option2}
-					<li class="flex items-center">
+					<li class={classNames(liClass, $$props.classLi)}>
 						<slot name="option2" />
 					</li>
 				{/if}

package/ratings/Review.svelte.d.ts

@@ -1,23 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
+import type { ReviewType } from '../types';
 declare const __propDef: {
     props: {
-        review: {
-            name: string;
-            imgSrc: string;
-            imgAlt: string;
-            address: string | undefined;
-            addressIcon: typeof SvelteComponent | undefined;
-            reviewDate: string | undefined;
-            title: string;
-            rating: number;
-            item: string | undefined;
-            itemIcon: typeof SvelteComponent | undefined;
-            option1: string | undefined;
-            option1Icon: typeof SvelteComponent | undefined;
-            option2: string | undefined;
-            option2Icon: typeof SvelteComponent | undefined;
-        };
+        [x: string]: any;
+        review: ReviewType;
+        articleClass?: string;
+        divClass?: string;
+        imgClass?: string;
+        ulClass?: string;
+        liClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/types.d.ts

@@ -148,6 +148,22 @@ export interface PillTabType {
     selected: boolean;
     href: string;
 }
+export declare type ReviewType = {
+    name: string;
+    imgSrc: string;
+    imgAlt: string;
+    address: string | undefined;
+    addressIcon: typeof SvelteComponent | undefined;
+    reviewDate: string | undefined;
+    title: string;
+    rating: number;
+    item: string | undefined;
+    itemIcon: typeof SvelteComponent | undefined;
+    option1: string | undefined;
+    option1Icon: typeof SvelteComponent | undefined;
+    option2: string | undefined;
+    option2Icon: typeof SvelteComponent | undefined;
+};
 export declare type SelectOptionType = {
     name: string;
     value: string;
@@ -193,6 +209,11 @@ export interface TabType {
     href: string;
     rel?: string;
 }
+export interface TableDataHelperType {
+    start: number;
+    end: number;
+    total: number;
+}
 export declare type Textsize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl';
 export interface TimelineItemType {
     date: Date | string;

package/utils/clickOutside.d.ts

@@ -1,3 +1,3 @@
-export declare function clickOutside(node: HTMLElement, callback: () => void): {
+export declare const clickOutside: (node: HTMLElement, callback: () => void) => {
     destroy(): void;
 };

package/utils/clickOutside.js

@@ -1,4 +1,4 @@
-export function clickOutside(node, callback) {
+export const clickOutside = (node, callback) => {
     const handleClick = (event) => {
         if (!event?.target)
             return;
@@ -12,4 +12,4 @@ export function clickOutside(node, callback) {
             document.removeEventListener('click', handleClick, true);
         },
     };
-}
+};