flowbite-svelte 0.13.1 → 0.13.4

package/CHANGELOG.md

@@ -2,4 +2,16 @@
 
 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.13.4](https://github.com/shinokada/flowbite-svelte/compare/v0.13.2...v0.13.4) (2022-04-12)
+
+
+### Bug Fixes
+
+* add sitemap footer darkmode ([72fe322](https://github.com/shinokada/flowbite-svelte/commit/72fe3227e472187101c12ef89e10ada77624fc25))
+* enable scrolling in modals (fixes [#23](https://github.com/shinokada/flowbite-svelte/issues/23)) ([8e60319](https://github.com/shinokada/flowbite-svelte/commit/8e603198988a3a03a56414f4e26143bb54ff0c92))
+* removed prismjs from package.json and layouts ([dd9ad11](https://github.com/shinokada/flowbite-svelte/commit/dd9ad110193e176ad8127f9c556105d3da854b26))
+* sidebar menu covers screen and it doesn't allow to click any links ([879c886](https://github.com/shinokada/flowbite-svelte/commit/879c886b5134908f1e4e9365c13df9bae372acd0))
+* update sidebar menu to close after clicking a link ([ae9a36c](https://github.com/shinokada/flowbite-svelte/commit/ae9a36c2d9705c664de91a6870b7603ccffbece2))
+* update sidebar menu to close it when you click outside of the sidebar ([30c6026](https://github.com/shinokada/flowbite-svelte/commit/30c6026f8f5fec945e97de18585f5665ca6ddbae))
+
 ### [0.12.6](https://github.com/shinokada/flowbite-svelte/compare/v0.12.5...v0.12.6) (2022-04-05)

package/README.md

@@ -123,6 +123,10 @@
 - [Multiple Interactive Tabs](https://flowbite-svelte.vercel.app/tabs/multiple-interactive-tabs)
 - [Pill Tabs](https://flowbite-svelte.vercel.app/tabs/pilltabs)
 
+## Table components
+
+- [Tables](https://flowbite-svelte.vercel.app/tables)
+
 ## Timeline components
 
 - [Default timeline](https://flowbite-svelte.vercel.app/timelines/default)
@@ -140,3 +144,10 @@
 - [Default Tooltip](https://flowbite-svelte.vercel.app/tooltips/default)
 - [Light Tooltip](https://flowbite-svelte.vercel.app/tooltips/light)
 
+## Tests
+
+Run:
+
+```sh
+npm run test
+```

package/avatar/Avatar.svelte

@@ -1,4 +1,4 @@
-<script >export let avatar;
+<script >export let avatar = {};
 let isCircle = avatar.round ? 'rounded-full' : 'rounded';
 let isBorder = avatar.border ? 'p-1 ring-2 ring-gray-300 dark:ring-gray-500' : '';
 export let avatarClass = `w-${avatar.size} h-${avatar.size} ${isCircle} ${isBorder}`;

package/avatar/Avatar.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { AvatarType } from '../types';
 declare const __propDef: {
     props: {
-        avatar: AvatarType;
+        avatar?: AvatarType;
         avatarClass?: string;
         placehoder?: boolean;
     };

package/dropdowns/DropdownDefault.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { DropdownType, Colors } from '../types';
+import type { DropdownType, DropdownColorType } from '../types';
 declare const __propDef: {
     props: {
         label?: string;
         rounded?: boolean;
         textSize?: string;
-        color?: Colors;
+        color?: DropdownColorType;
         items: DropdownType[];
     };
     events: {

package/footer/SitemapFooter.svelte

@@ -1,45 +1,45 @@
 <script >export let site;
 export let links;
 export let socialMedia;
-export let footerClass = 'bg-gray-800';
+export let footerClass = 'bg-white dark:bg-gray-800';
 export let linksClass = 'grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4';
-export let parentClass = 'mb-6 text-sm font-semibold text-gray-400 uppercase';
-export let ulClass = 'text-gray-300';
+export let parentClass = 'mb-6 text-sm font-semibold dark:text-gray-400 uppercase';
+export let ulClass = 'text-gray-900 dark:text-gray-300';
 export let linkClass = 'hover:underline';
-export let copyrightDivClass = 'py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between';
-export let copyrightClass = 'text-sm text-gray-300 sm:text-center';
+export let copyrightDivClass = 'py-6 px-4 text-gray-900 dark:bg-gray-700 md:flex md:items-center md:justify-between';
+export let copyrightClass = 'text-sm text-gray-900 dark:text-gray-300 sm:text-center';
 export let socialMediaDivClass = 'flex mt-4 space-x-6 sm:justify-center md:mt-0';
-export let socialMediaLinkClass = 'text-gray-400 hover:text-white';
+export let socialMediaLinkClass = 'text-gray-900 dark:text-gray-400 hover:text-gray-300 dark:hover:text-white';
 export let iconClass = 'h-5 w-5 mr-2';
 export let copyrightYear = '© 2022';
 export let allRightsReserved = 'All Rights Reserved.';
 </script>
 
 <footer class="{footerClass} {$$props.class}">
-	<div class={linksClass}>
-		{#each links as { parent, children }}
-			<div>
-				<h2 class={parentClass}>
-					{parent}
-				</h2>
-				<ul class={ulClass}>
-					{#each children as { name, href }}
-						<li class="mb-4">
-							<a {href} class={linkClass}>{name}</a>
-						</li>
-					{/each}
-				</ul>
-			</div>
-		{/each}
-	</div>
-	<div class={copyrightDivClass}>
-		<span class={copyrightClass}>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved} </span>
-		<div class={socialMediaDivClass}>
-			{#each socialMedia as { href, icon }}
-				<a {href} class={socialMediaLinkClass}>
-					<svelte:component this={icon} className={iconClass} />
-				</a>
-			{/each}
-		</div>
-	</div>
+  <div class={linksClass}>
+    {#each links as { parent, children }}
+      <div>
+        <h2 class={parentClass}>
+          {parent}
+        </h2>
+        <ul class={ulClass}>
+          {#each children as { name, href }}
+            <li class="mb-4">
+              <a {href} class={linkClass}>{name}</a>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    {/each}
+  </div>
+  <div class={copyrightDivClass}>
+    <span class={copyrightClass}>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved} </span>
+    <div class={socialMediaDivClass}>
+      {#each socialMedia as { href, icon }}
+        <a {href} class={socialMediaLinkClass}>
+          <svelte:component this={icon} className={iconClass} />
+        </a>
+      {/each}
+    </div>
+  </div>
 </footer>

package/modals/ExtraLargeModal.svelte

@@ -139,8 +139,17 @@ else {
 </script>
 
 {#if showModalId === id}
-	<div {id} role="dialog" aria-modal="true" class="flex overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-20 z-50 justify-center items-center">
-		<div class="relative px-4 w-full max-w-7xl h-full md:h-auto">
+	<div
+		on:click={closeModal}
+		class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full overflow-auto"
+	>
+		<!-- Main modal -->
+		<div
+			on:click|stopPropagation={() => {}}
+			role="dialog"
+			aria-modal="true"
+			class="mx-auto my-20 px-4 w-full max-w-7xl h-full md:h-auto"
+		>
 			<!-- Modal content -->
 			<div class={divClass}>
 				<!-- Modal header -->
@@ -170,6 +179,4 @@ else {
 			</div>
 		</div>
 	</div>
-
-	<div on:click={closeModal} class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full" />
 {/if}

package/modals/LargeModal.svelte

@@ -140,8 +140,16 @@ else {
 
 {#if showModalId === id}
 	<!-- Large Modal -->
-	<div {id} role="dialog" aria-modal="true" class="flex overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-20 z-50 justify-center items-center">
-		<div class="relative px-4 w-full max-w-4xl h-full md:h-auto">
+	<div
+		on:click={closeModal}
+		class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full overflow-auto"
+	>
+		<div
+			on:click|stopPropagation={() => {}}
+			role="dialog"
+			aria-modal="true"
+			class="mx-auto my-20 px-4 w-full max-w-4xl h-full md:h-auto"
+		>
 			<!-- Modal content -->
 			<div class={divClass}>
 				<!-- Modal header -->
@@ -171,6 +179,4 @@ else {
 			</div>
 		</div>
 	</div>
-
-	<div on:click={closeModal} class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full" />
 {/if}

package/modals/MediumModal.svelte

@@ -140,9 +140,17 @@ else {
 </script>
 
 {#if showModalId === id}
-	<!-- Main modal -->
-	<div {id} role="dialog" aria-modal="true" class="flex overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-20 z-50 justify-center items-center">
-		<div class="relative px-4 w-full max-w-2xl h-full md:h-auto">
+	<!-- Medium modal -->
+	<div
+		on:click={closeModal}
+		class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full overflow-auto"
+	>
+		<div
+			on:click|stopPropagation={() => {}}
+			role="dialog"
+			aria-modal="true"
+			class="mx-auto my-20 px-4 w-full max-w-2xl h-full md:h-auto"
+		>
 			<!-- Modal content -->
 			<div class={divClass}>
 				<!-- Modal header -->
@@ -174,6 +182,4 @@ else {
 			</div>
 		</div>
 	</div>
-
-	<div on:click={closeModal} class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full" />
 {/if}

package/modals/SignInModal.svelte

@@ -45,9 +45,18 @@ else {
 </script>
 
 {#if showModalId === id}
-	<div {id} role="dialog" aria-modal="true" class="flex overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-20 z-50 justify-center items-center">
-		<div class="relative px-4 w-full max-w-md h-full md:h-auto">
-			<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+	<div
+		on:click={closeModal}
+		class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full overflow-auto"
+	>
+		<!-- Main modal -->
+		<div
+			on:click|stopPropagation={() => {}}
+			role="dialog"
+			aria-modal="true"
+			class="mx-auto my-20 px-4 w-full max-w-md h-full md:h-auto"
+		>
+			<div class="bg-white rounded-lg shadow dark:bg-gray-700">
 				<div class="flex justify-end p-2">
 					<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white" on:click={closeModal}>
 						<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" /></svg>
@@ -90,5 +99,4 @@ else {
 			</div>
 		</div>
 	</div>
-	<div on:click={closeModal} class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full" />
 {/if}

package/modals/SmallModal.svelte

@@ -140,8 +140,16 @@ else {
 
 {#if showModalId === id}
 	<!-- Small Modal Component -->
-	<div {id} role="dialog" aria-modal="true" class="flex overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-20 z-50 justify-center items-center">
-		<div class="relative px-4 w-full max-w-md h-full md:h-auto">
+	<div
+		on:click={closeModal}
+		class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full overflow-auto"
+	>
+		<div
+			on:click|stopPropagation={() => {}}
+			role="dialog"
+			aria-modal="true"
+			class="mx-auto my-20 px-4 w-full max-w-md h-full md:h-auto"
+		>
 			<!-- Modal content -->
 			<div class={divClass}>
 				<!-- Modal header -->
@@ -171,6 +179,4 @@ else {
 			</div>
 		</div>
 	</div>
-
-	<div on:click={closeModal} class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full" />
 {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.13.1",
+  "version": "0.13.4",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -12,7 +12,7 @@
   "homepage": "https://github.com/shinokada/flowbite-svelte",
   "license": "MIT",
   "devDependencies": {
-    "@codewithshin/svelte-sidebar": "^0.4.2",
+    "@codewithshin/svelte-sidebar": "^0.4.7",
     "@codewithshin/svelte-simpleicons": "^0.2.2",
     "@codewithshin/svelte-utterances": "^0.1.2",
     "@playwright/test": "^1.19.1",
@@ -30,7 +30,6 @@
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
     "prism-themes": "^1.9.0",
-    "prismjs": "^1.27.0",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.10.1",
@@ -48,15 +47,25 @@
     "ui",
     "accordion",
     "alert",
+    "avatar",
     "badges",
+    "button-groups",
     "buttons",
     "cards",
     "darkmode",
     "footer",
+    "forms",
+    "list group",
     "modals",
     "navbar",
+    "paginations",
+    "progress bars",
+    "sidebars",
     "spinners",
+    "tables",
     "tabs",
+    "timelines",
+    "toasts",
     "tooltip"
   ],
   "repository": {
@@ -137,6 +146,8 @@
     "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
     "./spinners/SpinnerButton.svelte": "./spinners/SpinnerButton.svelte",
     "./tables/Table.svelte": "./tables/Table.svelte",
+    "./tables/TableCheckbox.svelte": "./tables/TableCheckbox.svelte",
+    "./tables/TableCheckboxRow.svelte": "./tables/TableCheckboxRow.svelte",
     "./tables/TableDefaultRow.svelte": "./tables/TableDefaultRow.svelte",
     "./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
     "./tabs/FullWidthTabs.svelte": "./tabs/FullWidthTabs.svelte",

package/tables/Table.svelte

@@ -5,18 +5,18 @@ export let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray
 </script>
 
 <div class={divClass}>
-	<table class={tableClass}>
-		<thead class={theadClass}>
-			<tr>
-				{#each header as column}
-					<th scope="col" class="px-6 py-3">
-						{column}
-					</th>
-				{/each}
-			</tr>
-		</thead>
-		<tbody>
-			<slot />
-		</tbody>
-	</table>
+  <table class={tableClass}>
+    <thead class={theadClass}>
+      <tr>
+        {#each header as column}
+          <th scope="col" class="px-6 py-3">
+            {column}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      <slot />
+    </tbody>
+  </table>
 </div>

package/tables/TableCheckbox.svelte

@@ -0,0 +1,28 @@
+<script >export let header;
+export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+export let tableClass = 'w-full text-sm text-left text-gray-500 dark:text-gray-400';
+export let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400';
+</script>
+
+<div class={divClass}>
+  <table class={tableClass}>
+    <thead class={theadClass}>
+      <tr>
+        <th scope="col" class="p-4">
+          <div class="flex items-center">
+            <input id="checkbox-all" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+            <label for="checkbox-all" class="sr-only">checkbox</label>
+          </div>
+        </th>
+        {#each header as column}
+          <th scope="col" class="px-6 py-3">
+            {column}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      <slot />
+    </tbody>
+  </table>
+</div>

package/tables/TableCheckbox.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        header: Array<string>;
+        divClass?: string;
+        tableClass?: string;
+        theadClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TableCheckboxProps = typeof __propDef.props;
+export declare type TableCheckboxEvents = typeof __propDef.events;
+export declare type TableCheckboxSlots = typeof __propDef.slots;
+export default class TableCheckbox extends SvelteComponentTyped<TableCheckboxProps, TableCheckboxEvents, TableCheckboxSlots> {
+}
+export {};

package/tables/TableCheckboxRow.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  TableCheckboxRowProps */
+/** @typedef {typeof __propDef.events}  TableCheckboxRowEvents */
+/** @typedef {typeof __propDef.slots}  TableCheckboxRowSlots */
+export default class TableCheckboxRow extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TableCheckboxRowProps = typeof __propDef.props;
+export type TableCheckboxRowEvents = typeof __propDef.events;
+export type TableCheckboxRowSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/tables/TableDefaultRow.svelte

@@ -1,15 +1,14 @@
 <script >export let items;
+export let html = false;
 export let rowState = undefined;
 let trClass;
 let trLastClass;
 if (rowState === 'striped') {
-    trClass =
-        'border-b dark:bg-gray-800 dark:border-gray-700 odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700';
+    trClass = 'border-b dark:bg-gray-800 dark:border-gray-700 odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700';
     trLastClass = 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700';
 }
 else if (rowState === 'hover') {
-    trClass =
-        'bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600';
+    trClass = 'bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600';
     trLastClass = 'bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600';
 }
 else {
@@ -19,39 +18,49 @@ else {
 </script>
 
 {#each items as item, i}
-	{#if i === items.length - 1}
-		<tr class={trLastClass}>
-			{#each item as cell, j}
-				{#if j === 0}
-					<th
-						scope="row"
-						class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
-					>
-						{@html cell}
-					</th>
-				{:else}
-					<td class="px-6 py-4">
-						{@html cell}
-					</td>
-				{/if}
-			{/each}
-		</tr>
-	{:else}
-		<tr class={trClass}>
-			{#each item as cell, j}
-				{#if j === 0}
-					<th
-						scope="row"
-						class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
-					>
-						{@html cell}
-					</th>
-				{:else}
-					<td class="px-6 py-4">
-						{@html cell}
-					</td>
-				{/if}
-			{/each}
-		</tr>
-	{/if}
+  {#if i === items.length - 1}
+    <tr class={trLastClass}>
+      {#each item as cell, j}
+        {#if j === 0}
+          <th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
+            {#if html}
+              {@html cell}
+            {:else}
+              {cell}
+            {/if}
+          </th>
+        {:else}
+          <td class="px-6 py-4">
+            {#if html}
+              {@html cell}
+            {:else}
+              {cell}
+            {/if}
+          </td>
+        {/if}
+      {/each}
+    </tr>
+  {:else}
+    <tr class={trClass}>
+      {#each item as cell, j}
+        {#if j === 0}
+          <th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
+            {#if html}
+              {@html cell}
+            {:else}
+              {cell}
+            {/if}
+          </th>
+        {:else}
+          <td class="px-6 py-4">
+            {#if html}
+              {@html cell}
+            {:else}
+              {cell}
+            {/if}
+          </td>
+        {/if}
+      {/each}
+    </tr>
+  {/if}
 {/each}

package/tables/TableDefaultRow.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         items: Array<Array<string>>;
+        html?: boolean;
         rowState?: 'striped' | 'hover' | undefined;
     };
     events: {

package/types.d.ts

@@ -1,5 +1,6 @@
 import type { SvelteComponent } from 'svelte';
 export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink';
+export declare type DropdownColorType = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
 export declare type Buttontypes = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
 export declare type Buttonshadows = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
 export declare type Gradientduotones = 'purple2blue' | 'cyan2blue' | 'green2blue' | 'purple2pink' | 'pink2orange' | 'teal2lime' | 'red2yellow';