flowbite-svelte 0.25.6 → 0.25.9

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 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.25.9](https://github.com/themesberg/flowbite-svelte/compare/v0.25.8...v0.25.9) (2022-08-21)
+
+
+### Bug Fixes
+
+* docs for radio ([add38b2](https://github.com/themesberg/flowbite-svelte/commit/add38b26fd4669a591916b7fa42e107868cc90a1))
+* move @floating-ui/dom, classnames, svelte-heros, @popperjs/core from devDpendencies to dependencies ([ee5d31a](https://github.com/themesberg/flowbite-svelte/commit/ee5d31af1b23e00e565c2a60b354b85f2beb54d1))
+* popover html ([d49f808](https://github.com/themesberg/flowbite-svelte/commit/d49f808b8a05bd735a9f90c661710dddfd163cad))
+
+### [0.25.8](https://github.com/themesberg/flowbite-svelte/compare/v0.25.7...v0.25.8) (2022-08-21)
+
+
+### Features
+
+* add H1, H2, A, P, Higlight components ([3f80473](https://github.com/themesberg/flowbite-svelte/commit/3f804731e6a093c1e34f8b3be6289f930c372a96))
+* add Heading and removed H1 and H2 ([b2be994](https://github.com/themesberg/flowbite-svelte/commit/b2be9945c39bcbfe23a0df53348ce768c5958255))
+* add Mark and TextGradient ([343e719](https://github.com/themesberg/flowbite-svelte/commit/343e719406bc146639882f97bbeafbc2de9514cb))
+
+### [0.25.7](https://github.com/themesberg/flowbite-svelte/compare/v0.25.6...v0.25.7) (2022-08-21)
+
+
+### Features
+
+* dropdown as Popper + fixes ([67fdf78](https://github.com/themesberg/flowbite-svelte/commit/67fdf7837f36d63b3683e0b6f6e78fbf91f6bf23))
+
 ### [0.25.6](https://github.com/themesberg/flowbite-svelte/compare/v0.25.5...v0.25.6) (2022-08-20)
 
 

package/avatar/Dot.svelte

@@ -23,7 +23,7 @@ $: dotClass = classNames('absolute rounded-full border-white dark:border-gray-80
 </script>
 
 {#if show}
-	<div class="relative flex-shrink-0 h-full">
+	<div class="relative flex-shrink-0">
 		<slot />
 		<span class={dotClass} />
 	</div>

package/badges/Badge.svelte

@@ -6,6 +6,7 @@ export let href = undefined;
 export let rounded = false;
 export let index = false;
 export let dismissable = false;
+export let baseClass = 'inline-flex items-center justify-center -mb-0.5';
 let hidden = false;
 const colors = {
     blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
@@ -36,7 +37,7 @@ const hovers = {
     pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
 };
 let badgeClass;
-$: badgeClass = classNames('inline-flex items-center justify-center -mb-0.5', large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href && (hovers[color] ?? hovers.blue), rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5', index && 'absolute font-bold border-2 border-white dark:border-gray-900', index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'), $$props.class);
+$: badgeClass = classNames(baseClass, large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href && (hovers[color] ?? hovers.blue), rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5', index && 'absolute font-bold border-2 border-white dark:border-gray-900', index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'), $$props.class);
 const handleHide = () => {
     hidden = !hidden;
 };

package/badges/Badge.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         rounded?: boolean;
         index?: boolean;
         dismissable?: boolean;
+        baseClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/breadcrumbs/Breadcrumb.svelte

@@ -3,7 +3,7 @@ export let navClass = 'flex';
 export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
 </script>
 
-<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(navClass, $$props.classNav)}>
+<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(navClass, $$props.class)}>
 	<ol class={classNames(olClass, $$props.classOl)}>
 		<slot />
 	</ol>

package/dropdowns/Dropdown.svelte

@@ -1,11 +1,10 @@
 <script>import { setContext } from 'svelte';
-import Tooltip from '../tooltips/Tooltip.svelte';
 import Button from '../buttons/Button.svelte';
+import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
 import { ChevronUp, ChevronRight, ChevronDown, ChevronLeft } from 'svelte-heros';
 export let label = '';
 export let inline = false;
-export let tooltipArrow = false;
 export let arrowIcon = true;
 export let labelClass = 'flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent';
 export let placement = 'bottom';
@@ -19,18 +18,21 @@ const icons = {
 };
 // @ts-ignore
 $: icon = icons[placement.split('-')[0]];
+let popoverClass;
+$: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800', 'text-gray-500 dark:text-gray-400', 'border border-gray-200 dark:border-gray-700', 'outline-none', $$props.class);
 </script>
 
-<Tooltip
-	class={classNames('!rounded !p-0', $$props.class)}
-	style="auto"
-	animation="duration-100"
+<Popper
+	activeContent={true}
+	arrow={false}
 	{placement}
-	arrow={tooltipArrow}
+	{...$$restProps}
+	class={popoverClass}
 	trigger="click"
+	on:show
 	bind:open
 >
-	<slot name="trigger">
+	<slot name="trigger" slot="trigger">
 		{#if inline}
 			<button class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
 				<slot name="label">{label}</slot>
@@ -53,9 +55,9 @@ $: icon = icons[placement.split('-')[0]];
 			</Button>
 		{/if}
 	</slot>
-	<slot name="content" slot="content">
+	<slot name="content">
 		<ul class="py-1">
 			<slot />
 		</ul>
 	</slot>
-</Tooltip>
+</Popper>

package/dropdowns/Dropdown.svelte.d.ts

@@ -1,25 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Placement } from '@floating-ui/dom';
+import type { Placement } from '@popperjs/core';
 declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string;
         inline?: boolean;
-        tooltipArrow?: boolean;
         arrowIcon?: boolean;
         labelClass?: string;
         placement?: 'auto' | Placement;
         open?: boolean;
     };
     events: {
+        show: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {};
-        label: {};
-        content: {
+        trigger: {
             slot: string;
         };
+        label: {};
+        content: {};
         default: {};
     };
 };

package/index.d.ts

@@ -111,4 +111,12 @@ export { default as TimelineItemHorizontal } from './timelines/TimelineItemHoriz
 export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
 export { default as Toast } from './toasts/Toast.svelte';
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
+export { default as A } from './typography/A.svelte';
+export { default as Heading } from './typography/Heading.svelte';
+export { default as Highlight } from './typography/Highlight.svelte';
+export { default as Mark } from './typography/Mark.svelte';
+export { default as P } from './typography/P.svelte';
+export { default as Secondary } from './typography/Secondary.svelte';
+export { default as TextGradient } from './typography/TextGradient.svelte';
+export { default as Underline } from './typography/Underline.svelte';
 export { default as CloseButton } from './utils/CloseButton.svelte';

package/index.js

@@ -143,5 +143,14 @@ export { default as TimelineItemVertical } from './timelines/TimelineItemVertica
 export { default as Toast } from './toasts/Toast.svelte';
 // Tooltips
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
+// Typography
+export { default as A } from './typography/A.svelte';
+export { default as Heading } from './typography/Heading.svelte';
+export { default as Highlight } from './typography/Highlight.svelte';
+export { default as Mark } from './typography/Mark.svelte';
+export { default as P } from './typography/P.svelte';
+export { default as Secondary } from './typography/Secondary.svelte';
+export { default as TextGradient } from './typography/TextGradient.svelte';
+export { default as Underline } from './typography/Underline.svelte';
 // utils
 export { default as CloseButton } from './utils/CloseButton.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.6",
+  "version": "0.25.9",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -12,16 +12,13 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@floating-ui/dom": "^1.0.1",
     "@playwright/test": "^1.25.0",
-    "@popperjs/core": "^2.11.6",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "1.0.0-next.420",
     "@sveltejs/package": "1.0.0-next.1",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "autoprefixer": "^10.4.8",
-    "classnames": "^2.3.1",
     "createprops": "^0.4.9",
     "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
@@ -35,7 +32,6 @@
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-flag-icons": "^0.1.1",
-    "svelte-heros": "^2.3.3",
     "svelte-preprocess": "^4.10.7",
     "svelte-sidebar-menu": "^0.8.11",
     "svelte2tsx": "^0.5.13",
@@ -85,7 +81,11 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "flowbite": "^1.5.2"
+    "@floating-ui/dom": "^1.0.1",
+    "@popperjs/core": "^2.11.6",
+    "classnames": "^2.3.1",
+    "flowbite": "^1.5.2",
+    "svelte-heros": "^2.3.3"
   },
   "engines": {
     "npm": ">=7.0.0",
@@ -222,6 +222,14 @@
     "./toasts/Toast.svelte": "./toasts/Toast.svelte",
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
+    "./typography/A.svelte": "./typography/A.svelte",
+    "./typography/Heading.svelte": "./typography/Heading.svelte",
+    "./typography/Highlight.svelte": "./typography/Highlight.svelte",
+    "./typography/Mark.svelte": "./typography/Mark.svelte",
+    "./typography/P.svelte": "./typography/P.svelte",
+    "./typography/Secondary.svelte": "./typography/Secondary.svelte",
+    "./typography/TextGradient.svelte": "./typography/TextGradient.svelte",
+    "./typography/Underline.svelte": "./typography/Underline.svelte",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
     "./utils/Popper.svelte": "./utils/Popper.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",

package/popover/Popover.svelte

@@ -1,10 +1,22 @@
 <script>import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
+export let title = '';
 let popoverClass;
-$: popoverClass = classNames('border border-gray-200 rounded-lg dark:border-gray-700 bg-white dark:bg-gray-800', $$props.class);
+$: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800', 'text-gray-500 dark:text-gray-400', 'border border-gray-200 dark:border-gray-700', $$props.class);
 </script>
 
 <Popper activeContent={true} {...$$restProps} class={popoverClass} on:show>
 	<slot name="trigger" slot="trigger" />
-	<slot />
+	{#if $$slots.title || title}
+		<div
+			class="py-2 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700"
+		>
+			<slot name="title">
+				<h3 class="font-semibold text-gray-900 dark:text-white">{title}</h3>
+			</slot>
+		</div>
+	{/if}
+	<div class="py-2 px-3">
+		<slot />
+	</div>
 </Popper>

package/popover/Popover.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        title?: string;
     };
     events: {
         show: CustomEvent<any>;
@@ -12,6 +13,7 @@ declare const __propDef: {
         trigger: {
             slot: string;
         };
+        title: {};
         default: {};
     };
 };

package/typography/A.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let href = '#';
+export let textColor = 'text-blue-600 dark:text-blue-500';
+export let aClass = 'inline-flex items-center text-lg  hover:underline';
+</script>
+
+<a {href} class={classNames(aClass, textColor, $$props.class)}>
+	<slot />
+</a>

package/typography/A.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href?: string;
+        textColor?: string;
+        aClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type AProps = typeof __propDef.props;
+export declare type AEvents = typeof __propDef.events;
+export declare type ASlots = typeof __propDef.slots;
+export default class A extends SvelteComponentTyped<AProps, AEvents, ASlots> {
+}
+export {};

package/typography/Heading.svelte

@@ -0,0 +1,20 @@
+<script>import classNames from 'classnames';
+export let tag = 'h1';
+export let textColor = 'text-gray-900 dark:text-white';
+export let customSize;
+const textSizes = {
+    h1: 'text-5xl font-extrabold',
+    h2: 'text-4xl font-bold',
+    h3: 'text-3xl font-bold',
+    h4: 'text-2xl font-bold',
+    h5: 'text-xl font-bold',
+    h6: 'text-lg font-bold'
+};
+</script>
+
+<svelte:element
+	this={tag}
+	class={classNames(customSize ? customSize : textSizes[tag], textColor, $$props.class)}
+>
+	<slot />
+</svelte:element>

package/typography/Heading.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+        textColor?: string;
+        customSize: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type HeadingProps = typeof __propDef.props;
+export declare type HeadingEvents = typeof __propDef.events;
+export declare type HeadingSlots = typeof __propDef.slots;
+export default class Heading extends SvelteComponentTyped<HeadingProps, HeadingEvents, HeadingSlots> {
+}
+export {};

package/typography/Highlight.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let textColor = 'text-blue-600 dark:text-blue-500';
+</script>
+
+<span class={classNames(textColor, $$props.class)}>
+	<slot />
+</span>

package/typography/Highlight.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        textColor?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type HighlightProps = typeof __propDef.props;
+export declare type HighlightEvents = typeof __propDef.events;
+export declare type HighlightSlots = typeof __propDef.slots;
+export default class Highlight extends SvelteComponentTyped<HighlightProps, HighlightEvents, HighlightSlots> {
+}
+export {};

package/typography/Mark.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let textColor = 'text-white dark:bg-blue-500';
+export let bgColor = 'bg-blue-600';
+export let markClass = 'px-2 rounded';
+</script>
+
+<mark class={classNames(markClass, bgColor, textColor, $$props.class)}>
+	<slot />
+</mark>

package/typography/Mark.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        textColor?: string;
+        bgColor?: string;
+        markClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type MarkProps = typeof __propDef.props;
+export declare type MarkEvents = typeof __propDef.events;
+export declare type MarkSlots = typeof __propDef.slots;
+export default class Mark extends SvelteComponentTyped<MarkProps, MarkEvents, MarkSlots> {
+}
+export {};

package/typography/P.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let textColor = 'text-gray-500 dark:text-gray-400';
+export let size = 'text-lg';
+export let pClass = 'font-normal';
+</script>
+
+<p class={classNames(pClass, size, textColor, $$props.class)}>
+	<slot />
+</p>

package/typography/P.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        textColor?: string;
+        size?: string;
+        pClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PProps = typeof __propDef.props;
+export declare type PEvents = typeof __propDef.events;
+export declare type PSlots = typeof __propDef.slots;
+export default class P extends SvelteComponentTyped<PProps, PEvents, PSlots> {
+}
+export {};

package/typography/Secondary.svelte

@@ -0,0 +1,8 @@
+<script>import classNames from 'classnames';
+export let textColor = 'text-gray-500 dark:text-gray-400';
+export let secondaryClass = 'font-semibold';
+</script>
+
+<small class={classNames(textColor, secondaryClass, $$props.class)}>
+	<slot />
+</small>

package/typography/Secondary.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        textColor?: string;
+        secondaryClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type SecondaryProps = typeof __propDef.props;
+export declare type SecondaryEvents = typeof __propDef.events;
+export declare type SecondarySlots = typeof __propDef.slots;
+export default class Secondary extends SvelteComponentTyped<SecondaryProps, SecondaryEvents, SecondarySlots> {
+}
+export {};

package/typography/TextGradient.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let gradientClass = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+</script>
+
+<span class={classNames(gradientClass, $$props.class)}>
+	<slot />
+</span>

package/typography/TextGradient.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        gradientClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TextGradientProps = typeof __propDef.props;
+export declare type TextGradientEvents = typeof __propDef.events;
+export declare type TextGradientSlots = typeof __propDef.slots;
+export default class TextGradient extends SvelteComponentTyped<TextGradientProps, TextGradientEvents, TextGradientSlots> {
+}
+export {};

package/typography/Underline.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let underlineClass = 'underline underline-offset-3 decoration-8 decoration-blue-400 dark:decoration-blue-600';
+</script>
+
+<span class={classNames(underlineClass, $$props.class)}>
+	<slot />
+</span>

package/typography/Underline.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        underlineClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type UnderlineProps = typeof __propDef.props;
+export declare type UnderlineEvents = typeof __propDef.events;
+export declare type UnderlineSlots = typeof __propDef.slots;
+export default class Underline extends SvelteComponentTyped<UnderlineProps, UnderlineEvents, UnderlineSlots> {
+}
+export {};

package/utils/Popper.svelte

@@ -21,7 +21,9 @@ const showHandler = (ev) => {
 };
 const hideHandler = (ev) => {
     if (activeContent)
-        setTimeout(() => triggerEl.matches(':hover') || contentEl.matches(':hover') || (open = false), 100);
+        setTimeout(() => (!clickable && (triggerEl.matches(':hover') || contentEl.matches(':hover'))) ||
+            contentEl.contains(document.activeElement) ||
+            (open = false), 100);
     else
         open = false;
 };
@@ -55,7 +57,7 @@ let divClass;
 $: divClass = classNames('z-10', animation && `transition-opacity ${animation}`, open ? 'visible opacity-100' : 'invisible opacity-0', $$props.class);
 </script>
 
-<span
+<div
 	bind:this={triggerEl}
 	on:focusin={showHandler}
 	on:focusout={hideHandler}
@@ -65,14 +67,14 @@ $: divClass = classNames('z-10', animation && `transition-opacity ${animation}`,
 	class="inline-block"
 >
 	<slot name="trigger" />
-</span>
+</div>
 <div
 	bind:this={contentEl}
 	role="tooltip"
 	tabindex={activeContent ? -1 : undefined}
 	class={divClass}
-	on:focus={activeContent ? showHandler : undefined}
-	on:blur={activeContent ? hideHandler : undefined}
+	on:focusin={activeContent ? showHandler : undefined}
+	on:focusout={activeContent ? hideHandler : undefined}
 	on:mouseenter={activeContent && !clickable ? showHandler : undefined}
 	on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
 >