flowbite-svelte 0.22.8 → 0.22.11

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 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.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)
+
+
+### Bug Fixes
+
+* using classnames dynamic class name for Footer ([52e17c7](https://github.com/themesberg/flowbite-svelte/commit/52e17c7dd8ad2599d1f41bc938930db615459b63))
+
 ### [0.22.8](https://github.com/themesberg/flowbite-svelte/compare/v0.22.7...v0.22.8) (2022-07-23)
 
 

package/footer/Footer.svelte

@@ -1,6 +1,7 @@
 <script>import classNames from 'classnames';
 export let customClass = '';
 export let footerType = 'default';
+// using classNames dynamic class names, https://github.com/JedWatson/classnames#dynamic-class-names-with-es2015
 </script>
 
 <footer
@@ -11,7 +12,7 @@ export let footerType = 'default';
 			'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
 			'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
 				footerType === 'default',
-			customClass: footerType === 'custom'
+			[`${customClass}`]: footerType === 'custom'
 		},
 		$$props.class
 	)}

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';

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';

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.8",
+  "version": "0.22.11",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -162,6 +162,7 @@
     "./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",
     "./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;