flowbite-svelte 0.22.11 → 0.22.14

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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.22.14](https://github.com/themesberg/flowbite-svelte/compare/v0.22.13...v0.22.14) (2022-07-25)
+
+
+### Bug Fixes
+
+* $$restProps before $$props.class ([9378cf5](https://github.com/themesberg/flowbite-svelte/commit/9378cf5349446ec8355317e98e462e379350a697))
+* add padding to w-full ([e1008c9](https://github.com/themesberg/flowbite-svelte/commit/e1008c9620f18b42664059595ae3fe1e421e097b))
+* layout and Toc padding ([6a67345](https://github.com/themesberg/flowbite-svelte/commit/6a6734545429c7228a1bf3cbc58f7e4739dbfe65))
+* various minor fixes ([9ac3296](https://github.com/themesberg/flowbite-svelte/commit/9ac3296635db9e7af2a45cc928477ac15e831dc4))
+
+### [0.22.13](https://github.com/themesberg/flowbite-svelte/compare/v0.22.12...v0.22.13) (2022-07-24)
+
+### [0.22.12](https://github.com/themesberg/flowbite-svelte/compare/v0.22.11...v0.22.12) (2022-07-24)
+
+
+### Features
+
+* megamenu - code skel ([d02c5c7](https://github.com/themesberg/flowbite-svelte/commit/d02c5c78a5360f623ffe3fb3659265d679e43426))
+* megamenu - wip ([02bbabc](https://github.com/themesberg/flowbite-svelte/commit/02bbabcdda0f924aefa2829a94e3b822bdb0bbf6))
+* megamenu + examples ([2f24a26](https://github.com/themesberg/flowbite-svelte/commit/2f24a268dfe474da45a654d6a4bd128f4175ae44))
+
+
+### Bug Fixes
+
+* layout and index page ([7db0e00](https://github.com/themesberg/flowbite-svelte/commit/7db0e00d1094d4d03a7386fd96c13c5b2ee09f6f))
+* layout logo ([1a78683](https://github.com/themesberg/flowbite-svelte/commit/1a78683e734bf0dae58fe704bd652fcef196dae9))
+* layout width ([e17969e](https://github.com/themesberg/flowbite-svelte/commit/e17969ec2c6f2938ed1a7c7b8f083bd3da6801e8))
+* position and classes ([caa1f13](https://github.com/themesberg/flowbite-svelte/commit/caa1f136e964503ff1976c7de7c006615038489b))
+* removed console.log ([f0f7ee9](https://github.com/themesberg/flowbite-svelte/commit/f0f7ee96bc48310ed245c00678960ac9d2eaa05b))
+
 ### [0.22.11](https://github.com/themesberg/flowbite-svelte/compare/v0.22.10...v0.22.11) (2022-07-23)
 
 

package/badges/Badge.svelte

@@ -1,7 +1,7 @@
 <script>import classNames from 'classnames';
 export let color = 'blue';
 export let large = false;
-export let href;
+export let href = undefined;
 export let rounded = false;
 let badgeClass;
 const colors = {

package/badges/Badge.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         [x: string]: any;
         color?: Colors;
         large?: boolean;
-        href: string;
+        href?: string;
         rounded?: boolean;
     };
     events: {

package/forms/Input.svelte

@@ -1,15 +1,18 @@
 <script>import classNames from 'classnames';
+import { getContext } from 'svelte';
 export let type = 'text';
 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';
 const colorClasses = {
-    base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
+    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',
     red: 'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500'
 };
 export let ref = null;
+// 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) {
     node.type = type;
@@ -25,6 +28,10 @@ function setType(node) {
 	class={classNames(
 		inputClass,
 		colorClasses[color],
+		color === 'base' &&
+			(background
+				? 'dark:bg-gray-600 dark:border-gray-500'
+				: 'dark:bg-gray-700 dark:border-gray-600'),
 		{
 			'p-2 sm:text-xs': size === 'sm',
 			'p-2.5 text-sm': size === 'md',

package/forms/Toggle.svelte

@@ -23,18 +23,10 @@ const sizes = {
     large: 'w-14 h-7 after:top-0.5 after:left-[4px]  after:h-6 after:w-6'
 };
 let divClass;
-$: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'blue'], sizes[size]);
+$: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'blue'], sizes[size], 'relative');
 </script>
 
-<Checkbox
-	custom
-	class="relative {$$props.class}"
-	{value}
-	bind:checked
-	bind:group
-	{...$$restProps}
-	on:click
->
+<Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click>
 	<div class={divClass} />
 	<slot />
 </Checkbox>

package/index.d.ts

@@ -59,6 +59,7 @@ export { default as MediumModal } from './modals/MediumModal.svelte';
 export { default as ModalButton } from './modals/ModalButton.svelte';
 export { default as SignInModal } from './modals/SignInModal.svelte';
 export { default as SmallModal } from './modals/SmallModal.svelte';
+export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
 export { default as Navbar } from './navbar/Navbar.svelte';
 export { default as NavBrand } from './navbar/NavBrand.svelte';
 export { default as NavHamburger } from './navbar/NavHamburger.svelte';

package/index.js

@@ -75,6 +75,8 @@ export { default as MediumModal } from './modals/MediumModal.svelte';
 export { default as ModalButton } from './modals/ModalButton.svelte';
 export { default as SignInModal } from './modals/SignInModal.svelte';
 export { default as SmallModal } from './modals/SmallModal.svelte';
+// MegaMenu
+export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
 // Navbar
 export { default as Navbar } from './navbar/Navbar.svelte';
 export { default as NavBrand } from './navbar/NavBrand.svelte';

package/list-group/List.svelte

@@ -6,7 +6,7 @@ export let active = false;
 setContext('background', true);
 $: setContext('active', active);
 let groupClass;
-$: groupClass = classNames('rounded-lg border border-gray-200 dark:border-gray-600', 'divide-y divide-gray-200 dark:divide-gray-600', $$props.class);
+$: groupClass = classNames('text-gray-900 bg-white dark:text-gray-200 dark:bg-gray-700', 'rounded-lg border border-gray-200 dark:border-gray-600', 'divide-y divide-gray-200 dark:divide-gray-600', $$props.class);
 </script>
 
 <svelte:element this={active ? 'div' : 'ul'} class={groupClass}>

package/list-group/ListItem.svelte

@@ -8,7 +8,7 @@ export let href = '';
 let dispatch = createEventDispatcher();
 const states = {
     current: 'text-white bg-blue-700 dark:text-white dark:bg-gray-800',
-    normal: 'text-gray-900 bg-white dark:text-gray-200 dark:bg-gray-700',
+    normal: '',
     disabled: 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400'
 };
 let focusClass = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:focus:ring-gray-500 dark:focus:text-white';

package/megamenu/MegaMenu.svelte

@@ -0,0 +1,30 @@
+<script>import { setContext, afterUpdate } from 'svelte';
+import classNames from 'classnames';
+export let items = [];
+export let full = false;
+setContext('background', true);
+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 ? 'sm:grid-cols-2' : 'sm: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) {
+    if (full) {
+        node.parentElement.classList.add('inset-x-0');
+    }
+}
+</script>
+
+<div class={wrapperClass} use:init>
+	<div class="flex flex-col md:flex-row p-4 max-w-screen-xl justify-center mx-auto">
+		<ul class={ulClass}>
+			{#each items as item, index}
+				<li>
+					<slot {item} {index} />
+				</li>
+			{:else}
+				<slot />
+			{/each}
+		</ul>
+		{#if full && $$slots.extra}<div class="md:w-1/3 mt-4 md:mt-0"><slot name="extra" /></div>{/if}
+	</div>
+</div>

package/megamenu/MegaMenu.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { LinkType } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        items?: (LinkType & {
+            [propName: string]: any;
+        })[];
+        full?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        extra: {};
+    };
+};
+export declare type MegaMenuProps = typeof __propDef.props;
+export declare type MegaMenuEvents = typeof __propDef.events;
+export declare type MegaMenuSlots = typeof __propDef.slots;
+export default class MegaMenu extends SvelteComponentTyped<MegaMenuProps, MegaMenuEvents, MegaMenuSlots> {
+}
+export {};

package/navbar/NavDropdown.svelte

@@ -1,18 +1,20 @@
-<script>export let liButtonClass;
+<script>import { clickOutside } from '../utils/clickOutside';
+export let liButtonClass = 'flex items-center';
 export let name;
+export let child = [];
 let hidden = true;
 let block = false;
-export let child;
 const handleDropdown = () => {
     hidden = !hidden;
     block = !block;
 };
-export let dropdownDiv;
-export let dropdownLinkClassWithChild;
-export let rel;
+export let dropdownDiv = '';
+export let dropdownLinkClassWithChild = undefined;
+export let rel = undefined;
+let liClass = 'flex justify-center py-2 pr-4 pl-3 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 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700';
 </script>
 
-<li>
+<li use:clickOutside={() => !hidden && handleDropdown()} class={liClass}>
 	<button on:click={() => handleDropdown()} class={liButtonClass}
 		>{name}
 		<svg
@@ -29,13 +31,15 @@ export let rel;
 	>
 
 	<!-- Dropdown menu -->
-	<div class:hidden class:block class={dropdownDiv} style="position: absolute; margin: 0px;">
-		<ul class="py-1" aria-labelledby="dropdownLargeButton">
-			{#each child as item}
-				<li>
-					<a href={item.href} {rel} class={dropdownLinkClassWithChild}>{item.name}</a>
-				</li>
-			{/each}
-		</ul>
+	<div class:hidden class="absolute {dropdownDiv} mt-8 z-10">
+		<slot>
+			<ul class="py-1" aria-labelledby="dropdownLargeButton">
+				{#each child as item}
+					<li>
+						<a href={item.href} {rel} class={dropdownLinkClassWithChild}>{item.name}</a>
+					</li>
+				{/each}
+			</ul>
+		</slot>
 	</div>
 </li>

package/navbar/NavDropdown.svelte.d.ts

@@ -2,17 +2,19 @@ import { SvelteComponentTyped } from "svelte";
 import type { NavbarType } from '../types';
 declare const __propDef: {
     props: {
-        liButtonClass: string;
+        liButtonClass?: string;
         name: string;
-        child: NavbarType[];
-        dropdownDiv: string;
-        dropdownLinkClassWithChild: string;
-        rel: string;
+        child?: NavbarType[];
+        dropdownDiv?: string;
+        dropdownLinkClassWithChild?: string;
+        rel?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type NavDropdownProps = typeof __propDef.props;
 export declare type NavDropdownEvents = typeof __propDef.events;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.11",
+  "version": "0.22.14",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -163,6 +163,7 @@
     "./kbd/Kbd.svelte": "./kbd/Kbd.svelte",
     "./list-group/List.svelte": "./list-group/List.svelte",
     "./list-group/ListItem.svelte": "./list-group/ListItem.svelte",
+    "./megamenu/MegaMenu.svelte": "./megamenu/MegaMenu.svelte",
     "./modals/ExtraLargeModal.svelte": "./modals/ExtraLargeModal.svelte",
     "./modals/LargeModal.svelte": "./modals/LargeModal.svelte",
     "./modals/MediumModal.svelte": "./modals/MediumModal.svelte",
@@ -232,6 +233,7 @@
     "./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/generateId": "./utils/generateId.js"
   },

package/utils/CloseButton.svelte

@@ -12,14 +12,14 @@ const colors = {
     default: 'focus:ring-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
 };
 let buttonClass = '';
-$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5 h-8 w-8 focus:outline-none', colors[color], $$props.class);
+$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5 focus:outline-none', colors[color], $$props.class);
 </script>
 
 <button on:click type="button" class={buttonClass} aria-label="Close">
 	<slot>
 		<span class="sr-only">Close</span>
-		<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-			><path
+		<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+			<path
 				fill-rule="evenodd"
 				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
 				clip-rule="evenodd"

package/utils/OptsButton.svelte

@@ -0,0 +1,18 @@
+<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

@@ -0,0 +1,27 @@
+/** @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 {};