flowbite-svelte 0.12.2 → 0.12.5

package/README.md

@@ -4,92 +4,139 @@
 
 ## Installation
 
-[Getting started](https://flowbite-svelte.vercel.app/getting-started)
+- [Getting started](https://flowbite-svelte.vercel.app/getting-started)
+- [About](https://flowbite-svelte.vercel.app/about)
+- [Type list](https://flowbite-svelte.vercel.app/type-list)
+- [CLI](https://flowbite-svelte.vercel.app/cli)
 
 ## Accordion components
 
-[Accordions](https://flowbite-svelte.vercel.app/accordions)
+- [Default accordion](https://flowbite-svelte.vercel.app/accordions/default)
+- [Icon accordion](https://flowbite-svelte.vercel.app/accordions/icon-accordion)
 
-## Avatar components
+## Alert components
 
-[Avatar](https://flowbite-svelte.vercel.app/avatar)
+- [Default alert](https://flowbite-svelte.vercel.app/alerts/default-alert)
+- [Border alert](https://flowbite-svelte.vercel.app/alerts/border-alert)
+- [Information alert](https://flowbite-svelte.vercel.app/alerts/information-alert)
+- [Animation alert](https://flowbite-svelte.vercel.app/alerts/animation)
 
-## Alert components
+## Avatar components
 
-[Alerts](https://flowbite-svelte.vercel.app/alerts)
+- [Avatar](https://flowbite-svelte.vercel.app/avatar)
 
 ## Badges components
 
-[Badges](https://flowbite-svelte.vercel.app/badges)
+- [Default badge](https://flowbite-svelte.vercel.app/badges/default)
+- [Icon badge](https://flowbite-svelte.vercel.app/badges/badge-icon)
+- [Link badge](https://flowbite-svelte.vercel.app/badges/badge-link)
 
 ## Button group compnents
 
-[Button group](https://flowbite-svelte.vercel.app/button-groups)
+- [Default button group](https://flowbite-svelte.vercel.app/button-groups/default)
+- [Outline button group](https://flowbite-svelte.vercel.app/button-groups/outline)
 
 ## Button components
 
-[Buttons](https://flowbite-svelte.vercel.app/buttons)
+- [Setup](https://flowbite-svelte.vercel.app/buttons/setup)
+- [Default Button](https://flowbite-svelte.vercel.app/buttons/default)
+- [Colored Shadow Button](https://flowbite-svelte.vercel.app/buttons/colored-shadow)
+- [Gradient Duotone Button](https://flowbite-svelte.vercel.app/buttons/gradient-duotone)
+- [Gradient Monochrome Button](https://flowbite-svelte.vercel.app/buttons/gradient-monochrome)
+- [Gradietn Outline Button](https://flowbite-svelte.vercel.app/buttons/gradient-outline)
+- [Outlined Button](https://flowbite-svelte.vercel.app/buttons/outlined)
+- [Rounded Button](https://flowbite-svelte.vercel.app/buttons/rounded)
 
 ## Card components
 
-[Cards](https://flowbite-svelte.vercel.app/cards)
+- [Default Card](https://flowbite-svelte.vercel.app/cards/card)
+- [CTA Card](https://flowbite-svelte.vercel.app/cards/cta)
+- [Ecommerce Card](https://flowbite-svelte.vercel.app/cards/ecommerce)
+- [Horizontal Card](https://flowbite-svelte.vercel.app/cards/horizontal)
+- [Interactive Card](https://flowbite-svelte.vercel.app/cards/interactive)
+- [List Card](https://flowbite-svelte.vercel.app/cards/list)
+- [Signin Card](https://flowbite-svelte.vercel.app/cards/signin)
 
 ## Dark mode components
 
-[Dark mode](https://flowbite-svelte.vercel.app/darkmode)
+- [Dark mode](https://flowbite-svelte.vercel.app/darkmode)
 
 ## Dropdown components
 
-[Dropdowns](https://flowbite-svelte.vercel.app/dropdowns)
+- [Dropdowns](https://flowbite-svelte.vercel.app/dropdowns)
 
 ## Form components
 
-[Forms](https://flowbite-svelte.vercel.app/forms)
+- [Forms](https://flowbite-svelte.vercel.app/forms)
 
 ## Footer components
 
-[Footer](https://flowbite-svelte.vercel.app/footer)
+- [Default Footer](https://flowbite-svelte.vercel.app/footer/default)
+- [Footer with Logo](https://flowbite-svelte.vercel.app/footer/logo)
+- [Footer with Sitemap](https://flowbite-svelte.vercel.app/footer/sitemap)
+- [Footer with Socialmedia](https://flowbite-svelte.vercel.app/footer/socialmedia)
 
 ## Icons components
 
-[Icons](https://flowbite-svelte.vercel.app/icons)
+- [Heroicons](https://flowbite-svelte.vercel.app/icons/heroicons)
+- [Simpleicons](https://flowbite-svelte.vercel.app/icons/simple-icons)
 
 ## List group components
 
-[List group](https://flowbite-svelte.vercel.app/list-group)
+- [List group](https://flowbite-svelte.vercel.app/list-group)
 
 ## Modal components
 
-[Modals](https://flowbite-svelte.vercel.app/modals)
+- [Small Modal](https://flowbite-svelte.vercel.app/modals/small)
+- [Medium Modal](https://flowbite-svelte.vercel.app/modals/medium)
+- [Large Modal](https://flowbite-svelte.vercel.app/modals/large)
+- [Extra Large Modal](https://flowbite-svelte.vercel.app/modals/extra-large)
+- [Signin Modal](https://flowbite-svelte.vercel.app/modals/signin)
+- [All Modals](https://flowbite-svelte.vercel.app/modals/all-modals)
 
 ## Navbar components
 
-[Navbars](https://flowbite-svelte.vercel.app/navbar)
+- [Default Navbar](https://flowbite-svelte.vercel.app/navbars/default)
+- [Dropdown Navbar](https://flowbite-svelte.vercel.app/navbars/dropdown)
 
 ## Pagination components
 
-[Pagination](https://flowbite-svelte.vercel.app/paginations)
+- [Pagination](https://flowbite-svelte.vercel.app/paginations)
 
 ## Sidebar components
 
-[Sidebar](https://flowbite-svelte.vercel.app/sidebars)
+- [Sidebar](https://flowbite-svelte.vercel.app/sidebars)
 
 ## Spinner components
 
-[Spinners](https://flowbite-svelte.vercel.app/spinners)
+- [Default Spinner](https://flowbite-svelte.vercel.app/spinners/default)
+- [Button Spinner](https://flowbite-svelte.vercel.app/spinners/button-spinner)
 
 ## Tab components
 
-[Tabs](https://flowbite-svelte.vercel.app/tabs)
+- [Default Tabs](https://flowbite-svelte.vercel.app/tabs/default-tabs)
+- [Underline Tabs](https://flowbite-svelte.vercel.app/tabs/underline-tabs)
+- [Icon Tabs](https://flowbite-svelte.vercel.app/tabs/icon-tabs)
+- [Full width Tabs](https://flowbite-svelte.vercel.app/tabs/full-width-tabs)
+- [Interactive Tabs](https://flowbite-svelte.vercel.app/tabs/interactive-tabs)
+- [Interactive Tabs 2](https://flowbite-svelte.vercel.app/tabs/interactive-tabs-2)
+- [Multiple Interactive Tabs](https://flowbite-svelte.vercel.app/tabs/multiple-interactive-tabs)
+- [Pill Tabs](https://flowbite-svelte.vercel.app/tabs/pilltabs)
 
 ## Timeline components
 
-[Timeline](https://flowbite-svelte.vercel.app/timelines)
+- [Default timeline](https://flowbite-svelte.vercel.app/timelines/default)
+- [Vetical timeline](https://flowbite-svelte.vercel.app/timelines/vertical)
+- [Horizontal timeline](https://flowbite-svelte.vercel.app/timelines/horizontal)
+- [Activity log](https://flowbite-svelte.vercel.app/timelines/activity)
+- [Grouped timeline](https://flowbite-svelte.vercel.app/timelines/group)
 
 ## Toast components
 
-[Toast](https://flowbite-svelte.vercel.app/toasts)
+- [Toast](https://flowbite-svelte.vercel.app/toasts)
 
 ## Tooltip components
 
-[Tooltips](https://flowbite-svelte.vercel.app/tooltips)
+- [Default Tooltip](https://flowbite-svelte.vercel.app/tooltips/default)
+- [Light Tooltip](https://flowbite-svelte.vercel.app/tooltips/light)
+

package/accordions/AccordionItem.svelte

@@ -2,6 +2,8 @@
 import collapse from 'svelte-collapse';
 import { ChevronDownIconSolid, ChevronUpIconSolid } from '@codewithshin/svelte-heroicons';
 export let id = '';
+export let btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
+export let slotClass = 'p-5 border border-t-0 border-gray-200 dark:border-gray-700';
 const store = getContext('svelte-collapsible-accordion');
 $: params = {
     open: $store.id === id,
@@ -24,7 +26,7 @@ const handleToggle = () => {
 		type="button"
 		class:rounded-t-xl={id === '1'}
 		class:border-t-0={id !== '1'}
-		class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+		class={btnClass}
 	>
 		<span><slot name="header" /></span>
 		{#if params.open}
@@ -35,7 +37,7 @@ const handleToggle = () => {
 	</button>
 </h2>
 <div use:collapse={params}>
-	<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
+	<div class={slotClass}>
 		<slot name="body" />
 	</div>
 </div>

package/accordions/AccordionItem.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         id?: string;
+        btnClass?: string;
+        slotClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/alerts/Alert.svelte.d.ts

@@ -3,7 +3,7 @@ import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         color?: Colors;
-        alertId?: string;
+        alertId?: string | number;
         closeBtn?: boolean;
         btn1?: boolean;
     };

package/cards/Card.svelte

@@ -7,7 +7,7 @@ export let btnColor = 'blue';
 export let textdivClass = 'p-5';
 export let paragraphClass = 'mb-3 font-normal text-gray-700 dark:text-gray-400';
 export let headerClass = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
-export let header = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+export let header = 'Lorem ipsum';
 export let divClass = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700';
 let buttonClass;
 if (btnColor === 'blue') {

package/index.d.ts

@@ -56,6 +56,7 @@ export { default as Pagination } from "./paginations/Pagination.svelte";
 export { default as Previous } from "./paginations/Previous.svelte";
 export { default as Next } from "./paginations/Next.svelte";
 export { default as TableData } from "./paginations/TableData.svelte";
+export { default as Progressbar } from "./progressbars/Progressbar.svelte";
 export { default as Sidebar } from "./sidebars/Sidebar.svelte";
 export { default as Spinner } from "./spinners/Spinner.svelte";
 export { default as SpinnerButton } from "./spinners/SpinnerButton.svelte";

package/index.js

@@ -88,6 +88,9 @@ export { default as Previous } from './paginations/Previous.svelte'
 export { default as Next } from './paginations/Next.svelte'
 export { default as TableData } from './paginations/TableData.svelte'
 
+// Progressbar
+export { default as Progressbar } from'./progressbars/Progressbar.svelte'
+
 // Sidebar
 export { default as Sidebar } from './sidebars/Sidebar.svelte'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.12.2",
+  "version": "0.12.5",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -131,6 +131,7 @@
     "./paginations/Pagination.svelte": "./paginations/Pagination.svelte",
     "./paginations/Previous.svelte": "./paginations/Previous.svelte",
     "./paginations/TableData.svelte": "./paginations/TableData.svelte",
+    "./progressbars/Progressbar.svelte": "./progressbars/Progressbar.svelte",
     "./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
     "./sidebars/SidebarDropdown.svelte": "./sidebars/SidebarDropdown.svelte",
     "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",

package/progressbars/Progressbar.svelte

@@ -0,0 +1,50 @@
+<script >export let progress = '45';
+export let size = 'h-2.5';
+export let labelInside = false;
+export let labelOutside = '';
+export let color = 'blue';
+let barColor;
+if (color === 'blue') {
+    barColor = 'bg-blue-600';
+}
+else if (color === 'gray') {
+    barColor = 'bg-gray-600';
+}
+else if (color === 'red') {
+    barColor = 'bg-red-600';
+}
+else if (color === 'green') {
+    barColor = 'bg-green-600';
+}
+else if (color === 'yellow') {
+    barColor = 'bg-yellow-600';
+}
+else if (color === 'purple') {
+    barColor = 'bg-purple-600';
+}
+else if (color === 'indigo') {
+    barColor = 'bg-indigo-600';
+}
+else {
+    barColor = 'bg-blue-600';
+}
+</script>
+
+{#if labelOutside}
+	<div class="flex justify-between mb-1">
+		<span class="text-base font-medium text-blue-700 dark:text-white">{labelOutside}</span>
+		<span class="text-sm font-medium text-blue-700 dark:text-white">{progress}%</span>
+	</div>
+{/if}
+<div class="w-full bg-gray-200 rounded-full {size} dark:bg-gray-700">
+	{#if labelInside}
+		<div
+			class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
+			style="width: {progress}%"
+		>
+			{progress}%
+		</div>
+	{:else}
+		<div class="{barColor} {size} rounded-full" style="width: {progress}%" />
+	{/if}
+</div>

package/progressbars/Progressbar.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        progress?: string;
+        size?: string;
+        labelInside?: boolean;
+        labelOutside?: string;
+        color?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ProgressbarProps = typeof __propDef.props;
+export declare type ProgressbarEvents = typeof __propDef.events;
+export declare type ProgressbarSlots = typeof __propDef.slots;
+export default class Progressbar extends SvelteComponentTyped<ProgressbarProps, ProgressbarEvents, ProgressbarSlots> {
+}
+export {};