flowbite-svelte 0.29.11 → 0.29.13

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.29.13](https://github.com/themesberg/flowbite-svelte/compare/v0.29.12...v0.29.13) (2023-01-31)
+
+### [0.29.12](https://github.com/themesberg/flowbite-svelte/compare/v0.29.11...v0.29.12) (2023-01-23)
+
+
+### Features
+
+* add step indicator component ([#545](https://github.com/themesberg/flowbite-svelte/issues/545)) ([549ad61](https://github.com/themesberg/flowbite-svelte/commit/549ad616adc829b5482da20abf9f4ef3e78aa44b))
+
+
+### Bug Fixes
+
+* add indcator to index ([#535](https://github.com/themesberg/flowbite-svelte/issues/535)) ([f6fcef6](https://github.com/themesberg/flowbite-svelte/commit/f6fcef63638a5edcf4c3f8d2b965789d5ad85be1))
+* add two missing colors for <Table> ([#537](https://github.com/themesberg/flowbite-svelte/issues/537)) ([ac558fb](https://github.com/themesberg/flowbite-svelte/commit/ac558fb267d3aaa87773ca23b5104e4c231443ba))
+* few minor tweaks ([#541](https://github.com/themesberg/flowbite-svelte/issues/541)) ([2289e4d](https://github.com/themesberg/flowbite-svelte/commit/2289e4d1f83f272db5c092cd09469147a4878ff8))
+* ListgroupItem button type ([#549](https://github.com/themesberg/flowbite-svelte/issues/549)) ([6b74d73](https://github.com/themesberg/flowbite-svelte/commit/6b74d738efc887b46fe0fc0eea473e617aa386ca))
+* move step indicator to extend ([000dec3](https://github.com/themesberg/flowbite-svelte/commit/000dec3688b5d9535a21a36207de42ca26336f1b))
+* TableBodyRow color and border ([#539](https://github.com/themesberg/flowbite-svelte/issues/539)) ([d52920f](https://github.com/themesberg/flowbite-svelte/commit/d52920fe869183639788607475b148c80fe283fa))
+
 ### [0.29.11](https://github.com/themesberg/flowbite-svelte/compare/v0.29.10...v0.29.11) (2023-01-16)
 
 

package/README.md

@@ -412,6 +412,28 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
         </a>
     </td>
   </tr>
+  <tr>
+    <td width="33.3333%">Speed Dial</td>
+    <td width="33.3333%">Stepper(TBA)</td>
+    <td width="33.3333%">Indicators</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte.com/components/speed-dial/">
+            <img alt="Tailwind CSS Speed Dial" src="https://flowbite.s3.amazonaws.com/github/dial.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="#">
+            <img alt="Tailwind CSS Stepper" src="https://flowbite.s3.amazonaws.com/github/stepper.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite.com/components/indicators/">
+            <img alt="Tailwind CSS Indicators" src="https://flowbite.s3.amazonaws.com/github/indicators.jpg">
+        </a>
+    </td>
+  </tr>
 </table>
 
 ## Community

package/accordions/AccordionItem.svelte

@@ -51,7 +51,7 @@ $: buttonClass = classNames(defaultClass, ctx.flush ? 'py-5' : 'p-5', open && (c
   </button>
 </h2>
 {#if open}
-  <div transition:multiple={transitionParams}>
+  <div transition:multiple|local={transitionParams}>
     <div class={ctx.flush ? 'py-5' : 'p-5'}>
       <slot />
     </div>

package/index.d.ts

@@ -84,6 +84,7 @@ export { default as WidgetPlaceholder } from './skeleton/WidgetPlaceholder.svelt
 export { default as SpeedDial } from './speed-dial/SpeedDial.svelte';
 export { default as SpeedDialButton } from './speed-dial/SpeedDialButton.svelte';
 export { default as Spinner } from './spinners/Spinner.svelte';
+export { default as StepIndicator } from './steps/StepIndicator.svelte';
 export { default as Table } from './tables/Table.svelte';
 export { default as TableBody } from './tables/TableBody.svelte';
 export { default as TableBodyCell } from './tables/TableBodyCell.svelte';

package/index.js

@@ -113,6 +113,8 @@ export { default as SpeedDial } from './speed-dial/SpeedDial.svelte';
 export { default as SpeedDialButton } from './speed-dial/SpeedDialButton.svelte';
 // Spin
 export { default as Spinner } from './spinners/Spinner.svelte';
+// Steps
+export { default as StepIndicator } from './steps/StepIndicator.svelte';
 // Tables
 export { default as Table } from './tables/Table.svelte';
 export { default as TableBody } from './tables/TableBody.svelte';

package/indicators/Indicator.svelte

@@ -54,8 +54,6 @@ const offsets = {
 };
 let dotClass;
 $: dotClass = classNames('flex-shrink-0', rounded ? 'rounded' : 'rounded-full', border && 'border-2 border-white dark:border-gray-800', sizes[size], colors[color], $$slots.default && 'inline-flex items-center justify-center', placement && 'absolute ' + placements[placement], placement && offset && offsets[placement], $$props.class);
-let divClass;
-$: divClass = classNames('relative flex-shrink-0');
 </script>
 
 <div class={dotClass}><slot /></div>

package/list-group/ListgroupItem.svelte

@@ -43,6 +43,7 @@ $: itemClass = classNames('py-2 px-4 w-full text-sm font-medium', 'first:rounded
   </a>
 {:else}
   <button
+    type="button"
     class="inline-flex relative items-center text-left {itemClass}"
     {disabled}
     on:click={() => dispatch('click', $$props)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.29.11",
+  "version": "0.29.13",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -200,6 +200,7 @@
     "./speed-dial/SpeedDial.svelte": "./speed-dial/SpeedDial.svelte",
     "./speed-dial/SpeedDialButton.svelte": "./speed-dial/SpeedDialButton.svelte",
     "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
+    "./steps/StepIndicator.svelte": "./steps/StepIndicator.svelte",
     "./tables/Table.svelte": "./tables/Table.svelte",
     "./tables/TableBody.svelte": "./tables/TableBody.svelte",
     "./tables/TableBodyCell.svelte": "./tables/TableBodyCell.svelte",

package/steps/StepIndicator.svelte

@@ -0,0 +1,58 @@
+<script>import classNames from 'classnames';
+export let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
+export let currentStep = 1;
+export let size = 'h-2.5';
+export let color = 'blue';
+export let glow = false;
+export let hideLabel = false;
+const completedStepColors = {
+    gray: 'bg-gray-400 dark:bg-gray-500',
+    red: 'bg-red-600 dark:bg-red-900',
+    yellow: 'bg-yellow-400 dark:bg-yellow-600',
+    green: 'bg-green-500 dark:bg-green-900',
+    indigo: 'bg-indigo-500 dark:bg-indigo-900',
+    purple: 'bg-purple-500 dark:bg-purple-900',
+    pink: 'bg-pink-500 dark:bg-pink-900',
+    blue: 'bg-blue-500 dark:bg-blue-900'
+};
+const currentStepColors = {
+    gray: 'bg-gray-700 dark:bg-gray-200',
+    red: 'bg-red-900 dark:bg-red-500',
+    yellow: 'bg-yellow-600 dark:bg-yellow-400',
+    green: 'bg-green-800 dark:bg-green-400',
+    indigo: 'bg-indigo-800 dark:bg-indigo-400',
+    purple: 'bg-purple-800 dark:bg-purple-400',
+    pink: 'bg-pink-800 dark:bg-pink-400',
+    blue: 'bg-blue-800 dark:bg-blue-400'
+};
+</script>
+
+<div {...$$restProps} class={classNames('space-y-2 dark:text-white', $$props.class)}>
+  {#if !hideLabel}
+    <h3 class="text-base font-semibold">{steps[currentStep - 1]}</h3>
+  {/if}
+  <div class={classNames('flex justify-between gap-2 w-full', size)}>
+    {#each steps as step, i}
+      {#if i === currentStep - 1}
+        <div class="relative w-full h-full">
+          <div
+            class={classNames(
+              'relative w-full h-full rounded-sm',
+              currentStepColors[color]
+            )} />
+          {#if glow}
+            <div
+              class={classNames(
+                'absolute -inset-1 rounded-sm blur opacity-30 dark:opacity-25',
+                currentStepColors[color]
+              )} />
+          {/if}
+        </div>
+      {:else if i < currentStep - 1}
+        <div class={classNames('w-full h-full rounded-sm', completedStepColors[color])} />
+      {:else}
+        <div class={classNames('w-full h-full rounded-sm bg-gray-200 dark:bg-gray-700')} />
+      {/if}
+    {/each}
+  </div>
+</div>

package/steps/StepIndicator.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        steps?: string[] | undefined;
+        currentStep?: number | undefined;
+        size?: string | undefined;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | undefined;
+        glow?: boolean | undefined;
+        hideLabel?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StepIndicatorProps = typeof __propDef.props;
+export type StepIndicatorEvents = typeof __propDef.events;
+export type StepIndicatorSlots = typeof __propDef.slots;
+export default class StepIndicator extends SvelteComponentTyped<StepIndicatorProps, StepIndicatorEvents, StepIndicatorSlots> {
+}
+export {};

package/tables/Table.svelte

@@ -13,6 +13,8 @@ const colors = {
     red: 'text-red-100 dark:text-red-100',
     yellow: 'text-yellow-100 dark:text-yellow-100',
     purple: 'text-purple-100 dark:text-purple-100',
+    indigo: 'text-indigo-100 dark:text-indigo-100',
+    pink: 'text-pink-100 dark:text-pink-100',
     custom: ''
 };
 $: setContext('striped', striped);
@@ -22,10 +24,7 @@ $: setContext('color', color);
 </script>
 
 <div class={classNames(divClass, shadow && 'shadow-md sm:rounded-lg')}>
-	<table
-		{...$$restProps}
-		class={classNames('w-full text-left text-sm', colors[color], $$props.class)}
-	>
-		<slot />
-	</table>
+  <table {...$$restProps} class={classNames('w-full text-left text-sm', colors[color], $$props.class)}>
+    <slot />
+  </table>
 </div>

package/tables/Table.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         hoverable?: boolean | undefined;
         noborder?: boolean | undefined;
         shadow?: boolean | undefined;
-        color?: "red" | "yellow" | "green" | "default" | "purple" | "blue" | "custom" | undefined;
+        color?: "red" | "yellow" | "green" | "indigo" | "default" | "purple" | "pink" | "blue" | "custom" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tables/TableBodyRow.svelte

@@ -1,13 +1,13 @@
 <script>import classNames from 'classnames';
 import { getContext } from 'svelte';
-export let trClass = 'bg-white';
+export let color = getContext('color');
 const colors = {
-    default: 'dark:border-gray-700 dark:bg-gray-800',
-    blue: 'bg-blue-500 border-b border-blue-400',
-    green: 'bg-green-500 border-b border-green-400',
-    red: 'bg-red-500 border-b border-red-400',
-    yellow: 'bg-yellow-500 border-b border-yellow-400',
-    purple: 'bg-purple-500 border-b border-purple-400',
+    default: 'bg-white dark:bg-gray-800 dark:border-gray-700',
+    blue: 'bg-blue-500 border-blue-400',
+    green: 'bg-green-500 border-green-400',
+    red: 'bg-red-500 border-red-400',
+    yellow: 'bg-yellow-500 border-yellow-400',
+    purple: 'bg-purple-500 border-purple-400',
     custom: ''
 };
 const hoverColors = {
@@ -28,12 +28,10 @@ const stripColors = {
     purple: 'odd:bg-purple-800 even:bg-purple-700 odd:dark:bg-purple-800 even:dark:bg-purple-700',
     custom: ''
 };
-let color = 'default';
-color = getContext('color');
-let trClassfinal;
-$: trClassfinal = classNames(getContext('noborder') ? 'bg-white dark:bg-gray-800' : trClass, colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class);
+let trClass;
+$: trClass = classNames(!getContext('noborder') && 'border-b last:border-b-0', colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class);
 </script>
 
-<tr {...$$restProps} class={trClassfinal} on:click on:contextmenu>
+<tr {...$$restProps} class={trClass} on:click on:contextmenu>
   <slot />
 </tr>

package/tables/TableBodyRow.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        trClass?: string | undefined;
+        color?: "red" | "yellow" | "green" | "default" | "purple" | "blue" | "custom" | undefined;
     };
     events: {
         click: MouseEvent;