flowbite-svelte 0.9.1 → 0.9.2

package/tabs/InteractiveTabs.svelte

@@ -1,69 +1,39 @@
-<script>
-  // import { handleTabs } from "./handleTabs";
-  export let tabId = "myTab";
-
-  export let activeTabValue = 1;
-  const handleClick = (tabValue) => () => (activeTabValue = tabValue);
-
-  export let tabs = [
-    {
-      lavel: "Profile",
-      id: 1,
-      content:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
-    },
-    {
-      lavel: "Dashboard",
-      id: 2,
-      content:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
-    },
-    {
-      lavel: "Settings",
-      id: 3,
-      content:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
-    },
-    {
-      name: "Contacts",
-      id: 4,
-      content:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
-    },
-  ];
+<script >export let tabId = 'myTab';
+export let activeTabValue = 1;
+const handleClick = (tabValue) => () => (activeTabValue = tabValue);
+export let tabs;
 </script>
 
 <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
-  <ul class="flex flex-wrap -mb-px" id={tabId} role="tablist">
-    {#each tabs as { label, selected, id }}
-      <li class="mr-2" role="presentation">
-        <button
-          on:click={handleClick(id)}
-          class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
-          id="{label}-tab"
-          type="button"
-          role="tab"
-          class:active={activeTabValue === id}
-          aria-controls={label}
-          aria-selected={selected}>{label}</button
-        >
-      </li>
-    {/each}
-  </ul>
+	<ul class="flex flex-wrap -mb-px" id={tabId} role="tablist">
+		{#each tabs as { label, id }}
+			<li class="mr-2" role="presentation">
+				<button
+					on:click={handleClick(id)}
+					class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
+					id="{label}-tab"
+					type="button"
+					role="tab"
+					class:active={activeTabValue === id}
+					aria-controls={label}>{label}</button
+				>
+			</li>
+		{/each}
+	</ul>
 </div>
 <div id="{tabId}Content">
-  {#each tabs as { label, content, id }}
-    {#if activeTabValue === id}
-      <div
-        class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
-        id={label}
-        role="tabpanel"
-        aria-labelledby="{label}-tab"
-      >
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          {content}
-        </p>
-      </div>
-    {/if}
-  {/each}
+	{#each tabs as { label, content, id }}
+		{#if activeTabValue === id}
+			<div
+				class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+				id={label}
+				role="tabpanel"
+				aria-labelledby="{label}-tab"
+			>
+				<p class="text-sm text-gray-500 dark:text-gray-400">
+					{content}
+				</p>
+			</div>
+		{/if}
+	{/each}
 </div>

package/tabs/InteractiveTabs.svelte.d.ts

@@ -1,47 +1,19 @@
-/** @typedef {typeof __propDef.props}  InteractiveTabsProps */
-/** @typedef {typeof __propDef.events}  InteractiveTabsEvents */
-/** @typedef {typeof __propDef.slots}  InteractiveTabsSlots */
-export default class InteractiveTabs extends SvelteComponentTyped<{
-    tabId?: string;
-    activeTabValue?: number;
-    tabs?: ({
-        lavel: string;
-        id: number;
-        content: string;
-        name?: undefined;
-    } | {
-        name: string;
-        id: number;
-        content: string;
-        lavel?: undefined;
-    })[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type InteractiveTabsProps = typeof __propDef.props;
-export type InteractiveTabsEvents = typeof __propDef.events;
-export type InteractiveTabsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { InteractiveTabType } from '../types';
 declare const __propDef: {
     props: {
         tabId?: string;
         activeTabValue?: number;
-        tabs?: ({
-            lavel: string;
-            id: number;
-            content: string;
-            name?: undefined;
-        } | {
-            name: string;
-            id: number;
-            content: string;
-            lavel?: undefined;
-        })[];
+        tabs: InteractiveTabType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type InteractiveTabsProps = typeof __propDef.props;
+export declare type InteractiveTabsEvents = typeof __propDef.events;
+export declare type InteractiveTabsSlots = typeof __propDef.slots;
+export default class InteractiveTabs extends SvelteComponentTyped<InteractiveTabsProps, InteractiveTabsEvents, InteractiveTabsSlots> {
+}
 export {};

package/tabs/PillTabs.svelte

@@ -1,38 +1,16 @@
-<script>
-  export let tabs = [
-    {
-      name: "Profile",
-      selected: true,
-      link: "/#",
-    },
-    {
-      name: "Dashboard",
-      selected: false,
-      link: "/#",
-    },
-    {
-      name: "Settings",
-      selected: false,
-      link: "/#",
-    },
-    {
-      name: "Contacts",
-      selected: false,
-      link: "/#",
-    },
-  ];
+<script >export let tabs;
 </script>
 
 <ul class="flex flex-wrap">
-  {#each tabs as { name, selected, link }}
-    <li class="mr-2">
-      <a
-        class="{selected
-          ? 'active inline-block py-3 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg'
-          : 'inline-block py-3 px-4 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'} "
-        href={link}
-        rel="external">{name}</a
-      >
-    </li>
-  {/each}
+	{#each tabs as { name, selected, link }}
+		<li class="mr-2">
+			<a
+				class="{selected
+					? 'active inline-block py-3 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg'
+					: 'inline-block py-3 px-4 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'} "
+				href={link}
+				rel="external">{name}</a
+			>
+		</li>
+	{/each}
 </ul>

package/tabs/PillTabs.svelte.d.ts

@@ -1,31 +1,17 @@
-/** @typedef {typeof __propDef.props}  PillTabsProps */
-/** @typedef {typeof __propDef.events}  PillTabsEvents */
-/** @typedef {typeof __propDef.slots}  PillTabsSlots */
-export default class PillTabs extends SvelteComponentTyped<{
-    tabs?: {
-        name: string;
-        selected: boolean;
-        link: string;
-    }[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type PillTabsProps = typeof __propDef.props;
-export type PillTabsEvents = typeof __propDef.events;
-export type PillTabsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { PillTabType } from '../types';
 declare const __propDef: {
     props: {
-        tabs?: {
-            name: string;
-            selected: boolean;
-            link: string;
-        }[];
+        tabs: PillTabType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type PillTabsProps = typeof __propDef.props;
+export declare type PillTabsEvents = typeof __propDef.events;
+export declare type PillTabsSlots = typeof __propDef.slots;
+export default class PillTabs extends SvelteComponentTyped<PillTabsProps, PillTabsEvents, PillTabsSlots> {
+}
 export {};

package/tooltips/LightTooltip.svelte

@@ -1,122 +1,120 @@
-<script>
-  export let tip = "";
-  export let top = false;
-  export let right = false;
-  export let bottom = false;
-  export let left = false;
-  export let active = false;
-  // export let bgColor = "";
+<script >export let tip;
+export let top = false;
+export let right = false;
+export let bottom = false;
+export let left = false;
+export let active = false;
 </script>
 
 <div class="tooltip-wrapper">
-  <span class="tooltip-slot">
-    <slot />
-  </span>
-  <div
-    class="inline-block absolute invisible z-10 py-2 px-3 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 tooltip"
-    class:active
-    class:left
-    class:right
-    class:bottom
-    class:top
-  >
-    {#if tip}
-      <div class="text-sm font-medium text-gray-900">{tip}</div>
-    {:else}
-      <slot name="custom-tip" />
-    {/if}
-  </div>
+	<span class="tooltip-slot">
+		<slot />
+	</span>
+	<div
+		class="inline-block absolute invisible z-10 py-2 px-3 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 tooltip"
+		class:active
+		class:left
+		class:right
+		class:bottom
+		class:top
+	>
+		{#if tip}
+			<div class="text-sm font-medium text-gray-900">{tip}</div>
+		{:else}
+			<slot name="custom-tip" />
+		{/if}
+	</div>
 </div>
 
 <style>
-  .tooltip-wrapper {
-    position: relative;
-    display: inline-block;
-  }
-  .tooltip {
-    position: absolute;
-    font-family: inherit;
-    display: inline-block;
-    white-space: nowrap;
-    color: inherit;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 150ms, visibility 150ms;
-  }
+	.tooltip-wrapper {
+		position: relative;
+		display: inline-block;
+	}
+	.tooltip {
+		position: absolute;
+		font-family: inherit;
+		display: inline-block;
+		white-space: nowrap;
+		color: inherit;
+		opacity: 0;
+		visibility: hidden;
+		transition: opacity 150ms, visibility 150ms;
+	}
 
-  .tooltip.top:after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -10px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #ddd transparent transparent transparent;
-  }
-  .tooltip.bottom::after {
-    content: "";
-    position: absolute;
-    top: -30%;
-    left: 50%;
-    margin-left: -10px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent #ddd transparent;
-  }
-  .tooltip.right::after {
-    content: "";
-    position: absolute;
-    /* vertically center */
-    top: 50%;
-    transform: translateY(-50%);
-    /* position tooltip correctly */
-    right: 100%;
-    margin-left: -5px;
+	.tooltip.top:after {
+		content: '';
+		position: absolute;
+		top: 100%;
+		left: 50%;
+		margin-left: -10px;
+		border-width: 5px;
+		border-style: solid;
+		border-color: #ddd transparent transparent transparent;
+	}
+	.tooltip.bottom::after {
+		content: '';
+		position: absolute;
+		top: -30%;
+		left: 50%;
+		margin-left: -10px;
+		border-width: 5px;
+		border-style: solid;
+		border-color: transparent transparent #ddd transparent;
+	}
+	.tooltip.right::after {
+		content: '';
+		position: absolute;
+		/* vertically center */
+		top: 50%;
+		transform: translateY(-50%);
+		/* position tooltip correctly */
+		right: 100%;
+		margin-left: -5px;
 
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent #ddd transparent transparent;
-  }
-  .tooltip.left::after {
-    content: "";
-    position: absolute;
-    /* vertically center */
-    top: 50%;
-    transform: translateY(-50%);
-    /* position tooltip correctly */
-    left: 100%;
-    /* margin-left: -5px; */
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent transparent #ddd;
-  }
-  .tooltip.top {
-    left: 50%;
-    transform: translate(-50%, -100%);
-    margin-top: -8px;
-  }
-  .tooltip.bottom {
-    left: 50%;
-    bottom: 0px;
-    transform: translate(-50%, 100%);
-    /* margin-bottom: -px; */
-  }
-  .tooltip.left {
-    left: 0;
-    transform: translateX(-100%);
-    margin-left: -8px;
-  }
-  .tooltip.right {
-    right: 0;
-    transform: translateX(100%);
-    margin-right: 0px;
-  }
-  .tooltip.active {
-    opacity: 1;
-    visibility: initial;
-  }
-  .tooltip-slot:hover + .tooltip {
-    opacity: 1;
-    visibility: initial;
-  }</style>
+		border-width: 5px;
+		border-style: solid;
+		border-color: transparent #ddd transparent transparent;
+	}
+	.tooltip.left::after {
+		content: '';
+		position: absolute;
+		/* vertically center */
+		top: 50%;
+		transform: translateY(-50%);
+		/* position tooltip correctly */
+		left: 100%;
+		/* margin-left: -5px; */
+		border-width: 5px;
+		border-style: solid;
+		border-color: transparent transparent transparent #ddd;
+	}
+	.tooltip.top {
+		left: 50%;
+		transform: translate(-50%, -100%);
+		margin-top: -8px;
+	}
+	.tooltip.bottom {
+		left: 50%;
+		bottom: 0px;
+		transform: translate(-50%, 100%);
+		/* margin-bottom: -px; */
+	}
+	.tooltip.left {
+		left: 0;
+		transform: translateX(-100%);
+		margin-left: -8px;
+	}
+	.tooltip.right {
+		right: 0;
+		transform: translateX(100%);
+		margin-right: 0px;
+	}
+	.tooltip.active {
+		opacity: 1;
+		visibility: initial;
+	}
+	.tooltip-slot:hover + .tooltip {
+		opacity: 1;
+		visibility: initial;
+	}</style>

package/tooltips/LightTooltip.svelte.d.ts

@@ -1,27 +1,7 @@
-/** @typedef {typeof __propDef.props}  LightTooltipProps */
-/** @typedef {typeof __propDef.events}  LightTooltipEvents */
-/** @typedef {typeof __propDef.slots}  LightTooltipSlots */
-export default class LightTooltip extends SvelteComponentTyped<{
-    tip?: string;
-    top?: boolean;
-    right?: boolean;
-    bottom?: boolean;
-    left?: boolean;
-    active?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    'custom-tip': {};
-}> {
-}
-export type LightTooltipProps = typeof __propDef.props;
-export type LightTooltipEvents = typeof __propDef.events;
-export type LightTooltipSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        tip?: string;
+        tip: string;
         top?: boolean;
         right?: boolean;
         bottom?: boolean;
@@ -36,4 +16,9 @@ declare const __propDef: {
         'custom-tip': {};
     };
 };
+export declare type LightTooltipProps = typeof __propDef.props;
+export declare type LightTooltipEvents = typeof __propDef.events;
+export declare type LightTooltipSlots = typeof __propDef.slots;
+export default class LightTooltip extends SvelteComponentTyped<LightTooltipProps, LightTooltipEvents, LightTooltipSlots> {
+}
 export {};