flowbite-svelte 0.13.2 → 0.13.3

package/README.md

@@ -140,3 +140,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/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.2",
+  "version": "0.13.3",
   "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.5",
     "@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",
@@ -137,6 +136,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

@@ -18,49 +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">
-						{#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}
+  {#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}