flowbite-svelte 0.22.28 → 0.23.0

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 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.23.0](https://github.com/themesberg/flowbite-svelte/compare/v0.22.30...v0.23.0) (2022-08-04)
+
+
+### ⚠ BREAKING CHANGES
+
+* add datepicker
+
+### Features
+
+* add datepicker ([a8b70e6](https://github.com/themesberg/flowbite-svelte/commit/a8b70e67b61e4e038520cc66238861e368716e60))
+* add datepicker ([32f8889](https://github.com/themesberg/flowbite-svelte/commit/32f88899256bed9effe6b23b4d24cd8380ce2aff))
+* add datepicker examples ([590ec66](https://github.com/themesberg/flowbite-svelte/commit/590ec660f27e43b18c588d44c0899aa16a3fc870))
+* add datepicker examples ([68e2462](https://github.com/themesberg/flowbite-svelte/commit/68e2462567838816ef116c3ed5b389e8de52f643))
+* working on datepicker ([4fedccf](https://github.com/themesberg/flowbite-svelte/commit/4fedccfc3f04308b53712cc87849098a7e502d2a))
+
+### [0.22.30](https://github.com/themesberg/flowbite-svelte/compare/v0.22.29...v0.22.30) (2022-08-03)
+
+
+### Features
+
+* add Tooltip custom CSS ([1466d16](https://github.com/themesberg/flowbite-svelte/commit/1466d16fff312ccdb22e1c282f49b7b156121d57))
+
+
+### Bug Fixes
+
+* revert Tooltip component ([9cedc68](https://github.com/themesberg/flowbite-svelte/commit/9cedc68014a7114c0e15691c26081bb9f5af88af))
+
+### [0.22.29](https://github.com/themesberg/flowbite-svelte/compare/v0.22.28...v0.22.29) (2022-08-02)
+
+
+### Bug Fixes
+
+* call updatePosition and floatingMiddleware functions in onMount ([b905101](https://github.com/themesberg/flowbite-svelte/commit/b905101f9cdfc9573e455200a2e28ad5766705e1))
+
 ### [0.22.28](https://github.com/themesberg/flowbite-svelte/compare/v0.22.27...v0.22.28) (2022-08-02)
 
 

package/README.md

@@ -302,6 +302,7 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   </tr>
   <tr>
     <td width="33.3333%">Floating Label</td>
+    <td width="33.3333%">Datepicker</td>
   </tr>
   <tr>
     <td width="33.3333%">
@@ -309,6 +310,11 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
             <img alt="Tailwind CSS Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
         </a>
     </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte.com/datepicker/">
+            <img alt="Tailwind CSS Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
+        </a>
+    </td>
   </tr>
 </table>
 

package/datepicker/Calender.svelte

@@ -0,0 +1,12 @@
+<svg
+	aria-hidden="true"
+	class="w-5 h-5 text-gray-500 dark:text-gray-400"
+	fill="currentColor"
+	viewBox="0 0 20 20"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		fill-rule="evenodd"
+		d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+		clip-rule="evenodd"
+	/></svg
+>

package/datepicker/Calender.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  CalenderProps */
+/** @typedef {typeof __propDef.events}  CalenderEvents */
+/** @typedef {typeof __propDef.slots}  CalenderSlots */
+export default class Calender extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CalenderProps = typeof __propDef.props;
+export type CalenderEvents = typeof __propDef.events;
+export type CalenderSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/datepicker/Datepicker.svelte

@@ -0,0 +1,71 @@
+<script>// import { onMount } from 'svelte';
+import Calendar from './Calender.svelte';
+export let range = false;
+// autoHide not working
+// export let autoHide: boolean = false;
+export let datepickerButtons = false;
+export let datepickerFormat = 'mm/dd/yyyy';
+export let datepickerOrientation = 'bottom';
+export let datepickerTitle = 'Flowbite datepicker';
+export let attribute = '';
+export let inputClass = 'bg-gray-50 border border-gray-300 text-gray-900 sm: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';
+$: setAttribute = (node, params) => {
+    node.setAttribute(params, '');
+};
+</script>
+
+<svelte:head>
+	<link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.1/dist/flowbite.min.css" />
+	<script src="https://unpkg.com/flowbite@1.5.1/dist/datepicker.js"></script>
+</svelte:head>
+
+{#if range}
+	<div date-rangepicker class="flex items-center">
+		<div class="relative">
+			<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+				<Calendar />
+			</div>
+			<input name="start" type="text" class={inputClass} placeholder="Select date start" />
+		</div>
+		<span class="mx-4 text-gray-500">to</span>
+		<div class="relative">
+			<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+				<Calendar />
+			</div>
+			<input name="end" type="text" class={inputClass} placeholder="Select date end" />
+		</div>
+	</div>
+{:else}
+	<div class="relative">
+		<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+			<Calendar />
+		</div>
+		{#if datepickerButtons}
+			<input
+				{...$$restProps}
+				datepicker
+				datepicker-buttons
+				datepicker-format={datepickerFormat}
+				datepicker-orientation={datepickerOrientation}
+				datepicker-title={datepickerTitle}
+				use:setAttribute={attribute}
+				type="text"
+				class={inputClass}
+				placeholder="Select date"
+			/>
+		{:else}
+			<input
+				{...$$restProps}
+				datepicker
+				datepicker-format={datepickerFormat}
+				datepicker-orientation={datepickerOrientation}
+				datepicker-title={datepickerTitle}
+				use:setAttribute={attribute}
+				type="text"
+				class={inputClass}
+				placeholder="Select date"
+			/>
+		{/if}
+		<slot />
+	</div>
+{/if}

package/datepicker/Datepicker.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        range?: boolean;
+        datepickerButtons?: boolean;
+        datepickerFormat?: string;
+        datepickerOrientation?: string;
+        datepickerTitle?: string;
+        attribute?: string;
+        inputClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DatepickerProps = typeof __propDef.props;
+export declare type DatepickerEvents = typeof __propDef.events;
+export declare type DatepickerSlots = typeof __propDef.slots;
+export default class Datepicker extends SvelteComponentTyped<DatepickerProps, DatepickerEvents, DatepickerSlots> {
+}
+export {};

package/index.d.ts

@@ -14,6 +14,7 @@ export { default as SignInCard } from './cards/SignInCard.svelte';
 export { default as Carousel } from './carousels/Carousel.svelte';
 export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
+export { default as Datepicker } from './datepicker/Datepicker.svelte';
 export { default as Drawer } from './drawers/Drawer.svelte';
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';

package/index.js

@@ -24,6 +24,8 @@ export { default as Carousel } from './carousels/Carousel.svelte';
 export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
 // Dark mode
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
+// Datepicker
+export { default as Datepicker } from './datepicker/Datepicker.svelte';
 // Drawer
 export { default as Drawer } from './drawers/Drawer.svelte';
 // Dropdown

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.28",
+  "version": "0.23.0",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -119,6 +119,8 @@
     "./carousels/Slide.svelte": "./carousels/Slide.svelte",
     "./carousels/Thumbnail.svelte": "./carousels/Thumbnail.svelte",
     "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
+    "./datepicker/Calender.svelte": "./datepicker/Calender.svelte",
+    "./datepicker/Datepicker.svelte": "./datepicker/Datepicker.svelte",
     "./drawers/Drawer.svelte": "./drawers/Drawer.svelte",
     "./dropdowns/Dropdown.svelte": "./dropdowns/Dropdown.svelte",
     "./dropdowns/DropdownDivider.svelte": "./dropdowns/DropdownDivider.svelte",

package/tooltips/Tooltip.svelte

@@ -1,13 +1,31 @@
-<script>import { onMount } from 'svelte';
-import classNames from 'classnames';
+<script>import classNames from 'classnames';
 import { clickOutside } from '../utils/clickOutside';
 import { computePosition, flip, shift, offset, autoPlacement, arrow as arrowFloat } from '@floating-ui/dom';
+import { onDestroy } from 'svelte';
 export let placement = 'top';
 export let trigger = 'hover';
 export let style = 'dark';
 export let content = '';
 export let animation = 'duration-300';
 export let arrow = true;
+export let tipClass = 'absolute inline-block rounded-lg py-2 px-3 text-sm font-medium shadow-sm';
+export let tipColor = '';
+const tipStyleClasses = {
+    dark: 'bg-gray-900 text-white dark:bg-gray-700',
+    light: 'border border-gray-200 bg-white text-gray-900',
+    auto: 'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white',
+    custom: tipColor
+};
+const arrowStyleClasses = {
+    dark: 'bg-gray-900 dark:bg-gray-700',
+    light: 'bg-white',
+    auto: 'bg-white dark:bg-gray-700',
+    custom: tipColor
+};
+let toolTipClass;
+$: toolTipClass = classNames(tipClass, animation !== false && `transition-opacity ${animation}`, {
+    'invisible opacity-0': !open
+}, tipStyleClasses[style], $$props.class);
 let open = false;
 const floatingPlacement = ({ placement }) => {
     return placement === 'auto' ? undefined : placement;
@@ -23,26 +41,25 @@ const floatingArrowPlacement = ({ placement }) => {
         left: 'right'
     }[placement.split('-')[0]];
 };
+const floatingMiddleware = ({ arrowRef, placement }) => {
+    const middleware = [];
+    middleware.push(offset(8));
+    middleware.push(placement === 'auto' ? autoPlacement() : flip());
+    middleware.push(shift({ padding: 8 }));
+    if (arrowRef) {
+        middleware.push(arrowFloat({ element: arrowRef }));
+    }
+    return middleware;
+};
 let placementData;
 let tooltipRef, triggerRef, arrowRef;
+const updatePosition = () => computePosition(triggerRef, tooltipRef, {
+    middleware: floatingMiddleware({ arrowRef, placement }),
+    placement: floatingPlacement({ placement })
+}).then((data) => (placementData = data));
 let attachedScroll = false;
-onMount(async () => {
-    // dynamic import, to access 'window', since ace use it directly,
-    const floatingMiddleware = ({ arrowRef, placement }) => {
-        const middleware = [];
-        middleware.push(offset(8));
-        middleware.push(placement === 'auto' ? autoPlacement() : flip());
-        middleware.push(shift({ padding: 8 }));
-        if (arrowRef) {
-            middleware.push(arrowFloat({ element: arrowRef }));
-        }
-        return middleware;
-    };
-    const updatePosition = () => computePosition(triggerRef, tooltipRef, {
-        middleware: floatingMiddleware({ arrowRef, placement }),
-        placement: floatingPlacement({ placement })
-    }).then((data) => (placementData = data));
-    tooltipRef && open && updatePosition();
+$: tooltipRef && open && updatePosition();
+$: {
     if (open && !attachedScroll) {
         attachedScroll = true;
         window.addEventListener('scroll', updatePosition, true);
@@ -51,13 +68,17 @@ onMount(async () => {
         attachedScroll = false;
         window.removeEventListener('scroll', updatePosition, true);
     }
-    // console.log('updatePosition', updatePosition());
-    // console.log('floatingMiddleware', floatingMiddleware({ arrowRef, placement }));
+}
+onDestroy(() => {
+    if (attachedScroll) {
+        attachedScroll = false;
+        window.removeEventListener('scroll', updatePosition, true);
+    }
 });
-// console.log('placement', placement);
-// console.log('floatingPlacement', floatingPlacement({ placement }));
 </script>
 
+<svelte:window on:resize={() => open && updatePosition()} />
+
 <div
 	use:clickOutside={() => {
 		if (open) {
@@ -90,18 +111,7 @@ onMount(async () => {
 	<div
 		bind:this={tooltipRef}
 		data-testid="tooltip"
-		class={classNames(
-			'absolute inline-block rounded-lg py-2 px-3 text-sm font-medium shadow-sm',
-			animation !== false && `transition-opacity ${animation}`,
-			{
-				'invisible opacity-0': !open,
-				'bg-gray-900 text-white dark:bg-gray-700': style === 'dark',
-				'border border-gray-200 bg-white text-gray-900': style === 'light',
-				'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white':
-					style === 'auto'
-			},
-			$$props.class
-		)}
+		class={toolTipClass}
 		style={`left:${placementData?.x}px;top:${placementData?.y}px;position:${placementData?.strategy}`}
 	>
 		<div class="relative z-20">
@@ -111,11 +121,7 @@ onMount(async () => {
 		</div>
 		{#if arrow}
 			<div
-				class={classNames('absolute z-10 h-2 w-2 rotate-45', {
-					'bg-gray-900 dark:bg-gray-700': style === 'dark',
-					'bg-white': style === 'light',
-					'bg-white dark:bg-gray-700': style === 'auto'
-				})}
+				class={classNames('absolute z-10 h-2 w-2 rotate-45', arrowStyleClasses[style])}
 				data-testid="tooltip-arrow"
 				style={`left:${placementData?.middlewareData.arrow?.x}px;top:${
 					placementData?.middlewareData.arrow?.y

package/tooltips/Tooltip.svelte.d.ts

@@ -5,10 +5,12 @@ declare const __propDef: {
         [x: string]: any;
         placement?: 'auto' | Placement;
         trigger?: 'hover' | 'click';
-        style?: 'dark' | 'light' | 'auto';
+        style?: 'dark' | 'light' | 'auto' | 'custom';
         content?: string;
         animation?: false | `duration-${number}`;
         arrow?: boolean;
+        tipClass?: string;
+        tipColor?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;