flowbite-svelte 0.22.11 → 0.22.12

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 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.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/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/megamenu/MegaMenu.svelte

@@ -0,0 +1,39 @@
+<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');
+    }
+}
+let wrapper;
+afterUpdate(() => {
+    if (wrapper) {
+        const width = wrapper.getBoundingClientRect();
+        // wrapper.style.marginLeft = '-50%';
+        // console.log('after', width);
+        // console.log(wrapper.clientWidth);
+    }
+});
+</script>
+
+<div class={wrapperClass} use:init bind:this={wrapper}>
+	<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.12",
   "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",