flowbite-svelte 0.22.9 → 0.22.12

package/CHANGELOG.md

@@ -2,6 +2,45 @@
 
 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)
+
+
+### Features
+
+* list group rewritten - API changed ([86c97dc](https://github.com/themesberg/flowbite-svelte/commit/86c97dc54581f634baed601c609e9d90c6c4611b))
+
+
+### Bug Fixes
+
+* background context added ([52c8dd5](https://github.com/themesberg/flowbite-svelte/commit/52c8dd5693f3d890e7b875ae1b0435c5a7313876))
+* error fix for deployment ([be684a8](https://github.com/themesberg/flowbite-svelte/commit/be684a8057c08a7c07f3f6c370114d008dc2182e))
+* field name change for ListGroupItemType ([da93d46](https://github.com/themesberg/flowbite-svelte/commit/da93d460c864e0a94f803420f73dbf976e185fee))
+
+### [0.22.10](https://github.com/themesberg/flowbite-svelte/compare/v0.22.9...v0.22.10) (2022-07-23)
+
+
+### Bug Fixes
+
+* merge conflict fix with Hetarth02-main ([914c1f9](https://github.com/themesberg/flowbite-svelte/commit/914c1f95f80dfbd73542d68d39622d79bed1ea04))
+
 ### [0.22.9](https://github.com/themesberg/flowbite-svelte/compare/v0.22.8...v0.22.9) (2022-07-23)
 
 

package/index.d.ts

@@ -51,6 +51,7 @@ export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
 export { default as ArrowKeyRight } from './kbd/ArrowKeyRight.svelte';
 export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
 export { default as List } from './list-group/List.svelte';
+export { default as ListItem } from './list-group/ListItem.svelte';
 export { modalIdStore } from './modals/modalStores.js';
 export { default as ExtraLargeModal } from './modals/ExtraLargeModal.svelte';
 export { default as LargeModal } from './modals/LargeModal.svelte';
@@ -58,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

@@ -66,6 +66,7 @@ export { default as ArrowKeyRight } from './kbd/ArrowKeyRight.svelte';
 export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
 // List
 export { default as List } from './list-group/List.svelte';
+export { default as ListItem } from './list-group/ListItem.svelte';
 // Modals
 export { modalIdStore } from './modals/modalStores.js';
 export { default as ExtraLargeModal } from './modals/ExtraLargeModal.svelte';
@@ -74,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

@@ -1,45 +1,18 @@
-<script>export let lists;
-const common = 'inline-flex relative items-center py-2 px-4 w-full text-sm font-medium hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white';
-const topClass = `${common} rounded-t-lg border-b border-gray-200`;
-const bottomClass = `${common} rounded-b-lg`;
-const middleClass = `${common} border-b border-gray-200`;
+<script>import { setContext } from 'svelte';
+import classNames from 'classnames';
+import ListItem from './ListItem.svelte';
+export let items = [];
+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);
 </script>
 
-<div class="w-48 text-gray-900 bg-white rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-	{#each lists as { name, icon, href, rel, iconClass, iconSize }, i}
-		{#if i === 0}
-			<button type="button" class={topClass}>
-				{#if icon}
-					<svelte:component this={icon} class="mr-2 {iconClass}" size={iconSize} />
-				{/if}
-				{#if href}
-					<a {href} {rel}>{name}</a>
-				{:else}
-					{name} here
-				{/if}
-			</button>
-		{:else if i === lists.length - 1}
-			<button type="button" class={bottomClass}>
-				{#if icon}
-					<svelte:component this={icon} class="mr-2 {iconClass}" size={iconSize} />
-				{/if}
-				{#if href}
-					<a {href} {rel}>{name}</a>
-				{:else}
-					{name}
-				{/if}
-			</button>
-		{:else}
-			<button type="button" class={middleClass}>
-				{#if icon}
-					<svelte:component this={icon} class="mr-2 {iconClass}" size={iconSize} />
-				{/if}
-				{#if href}
-					<a {href} {rel}>{name}</a>
-				{:else}
-					{name}
-				{/if}
-			</button>
-		{/if}
+<svelte:element this={active ? 'div' : 'ul'} class={groupClass}>
+	{#each items as item, index}
+		<ListItem {active} {...item} {index} on:click><slot {item} {index} /></ListItem>
+	{:else}
+		<slot />
 	{/each}
-</div>
+</svelte:element>

package/list-group/List.svelte.d.ts

@@ -1,13 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ButtonGroupType } from '../types';
+import type { ListGroupItemType } from '../types';
 declare const __propDef: {
     props: {
-        lists: ButtonGroupType[];
+        [x: string]: any;
+        items?: ListGroupItemType[];
+        active?: boolean;
     };
     events: {
+        click: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type ListProps = typeof __propDef.props;
 export declare type ListEvents = typeof __propDef.events;

package/list-group/ListItem.svelte

@@ -0,0 +1,44 @@
+<script>import { getContext } from 'svelte';
+import classNames from 'classnames';
+import { createEventDispatcher } from 'svelte';
+export let active = getContext('active');
+export let current = false;
+export let disabled = false;
+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',
+    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';
+let hoverClass = 'hover:bg-gray-100 hover:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white';
+let state;
+$: state = disabled ? 'disabled' : current ? 'current' : 'normal';
+let itemClass;
+$: itemClass = classNames('py-2 px-4 w-full text-sm font-medium', 'first:rounded-t-lg last:rounded-b-lg', states[state], active && state === 'disabled' && 'cursor-not-allowed', active && state === 'normal' && hoverClass, active && state === 'normal' && focusClass, $$props.class);
+</script>
+
+{#if !active}
+	<li class={itemClass}>
+		<slot item={$$props} />
+	</li>
+{:else if href}
+	<a
+		{href}
+		class="block {itemClass}"
+		on:click={() => dispatch('click', $$props)}
+		aria-current={current}
+	>
+		<slot item={$$props} />
+	</a>
+{:else}
+	<button
+		class="inline-flex relative items-center text-left {itemClass}"
+		{disabled}
+		on:click={() => dispatch('click', $$props)}
+		aria-current={current}
+	>
+		<slot item={$$props} />
+	</button>
+{/if}

package/list-group/ListItem.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        active?: boolean;
+        current?: boolean;
+        disabled?: boolean;
+        href?: string;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            item: SvelteAllProps;
+        };
+    };
+};
+export declare type ListItemProps = typeof __propDef.props;
+export declare type ListItemEvents = typeof __propDef.events;
+export declare type ListItemSlots = typeof __propDef.slots;
+export default class ListItem extends SvelteComponentTyped<ListItemProps, ListItemEvents, ListItemSlots> {
+}
+export {};

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.9",
+  "version": "0.22.12",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -162,6 +162,8 @@
     "./kbd/ArrowKeyUp.svelte": "./kbd/ArrowKeyUp.svelte",
     "./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",

package/types.d.ts

@@ -106,6 +106,12 @@ export interface InteractiveTabType {
     id: number;
     content: string | typeof SvelteComponent;
 }
+export interface ListGroupItemType {
+    current?: boolean;
+    disabled?: boolean;
+    href?: string;
+    [propName: string]: any;
+}
 export interface LinkType {
     name: string;
     href: string;