flowbite-svelte 0.7.2 → 0.8.3

package/README.md

@@ -1,5 +1,7 @@
 # FLOWBITE-SVELTE
 
+[Flowbite-Svelte](https://flowbite-svelte.vercel.app/) is an unofficial Flowbite component library for Svelte. All interactivities are handled by Svelte.
+
 ## Installation
 
 [Getting started](https://flowbite-svelte.vercel.app/getting-started)

package/buttons/Button.svelte

@@ -1,11 +1,4 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-  const handleClick = () => {
-    dispatch("handleClick");
-  };
-
   export let rounded = false;
   export let textSize = "text-sm";
   export let name = "Read more";
@@ -57,4 +50,4 @@
   }
 </script>
 
-<button type="button" class={buttonClass} on:click={handleClick}>{name}</button>
+<button type="button" class={buttonClass} on:click>{name}</button>

package/buttons/Button.svelte.d.ts

@@ -7,7 +7,7 @@ export default class Button extends SvelteComponentTyped<{
     name?: string;
     type?: string;
 }, {
-    handleClick: CustomEvent<any>;
+    click: MouseEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -24,7 +24,7 @@ declare const __propDef: {
         type?: string;
     };
     events: {
-        handleClick: CustomEvent<any>;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/buttons/ColorShadowButton.svelte

@@ -1,11 +1,4 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-  const handleClick = () => {
-    dispatch("handleClick");
-  };
-
   export let textSize = "text-sm";
   export let color = "blue";
   export let name = "Read more";
@@ -32,4 +25,4 @@
   }
 </script>
 
-<button type="button" class={btnClass} on:click={handleClick}>{name}</button>
+<button type="button" class={btnClass} on:click>{name}</button>

package/buttons/ColorShadowButton.svelte.d.ts

@@ -6,7 +6,7 @@ export default class ColorShadowButton extends SvelteComponentTyped<{
     name?: string;
     color?: string;
 }, {
-    handleClick: CustomEvent<any>;
+    click: MouseEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -22,7 +22,7 @@ declare const __propDef: {
         color?: string;
     };
     events: {
-        handleClick: CustomEvent<any>;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/buttons/GradientDuotoneButton.svelte

@@ -1,11 +1,4 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-  const handleClick = () => {
-    dispatch("handleClick");
-  };
-
   export let textSize = "text-sm";
   export let color = "purple2blue";
   export let name = "Read more";
@@ -30,4 +23,4 @@
   }
 </script>
 
-<button type="button" class={btnClass} on:click={handleClick}>{name}</button>
+<button type="button" class={btnClass} on:click>{name}</button>

package/buttons/GradientDuotoneButton.svelte.d.ts

@@ -6,7 +6,7 @@ export default class GradientDuotoneButton extends SvelteComponentTyped<{
     name?: string;
     color?: string;
 }, {
-    handleClick: CustomEvent<any>;
+    click: MouseEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -22,7 +22,7 @@ declare const __propDef: {
         color?: string;
     };
     events: {
-        handleClick: CustomEvent<any>;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/buttons/GradientMonochromeButton.svelte

@@ -1,11 +1,4 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-  const handleClick = () => {
-    dispatch("handleClick");
-  };
-
   export let textSize = "text-sm";
   export let color = "blue";
   export let name = "Read more";
@@ -32,4 +25,4 @@
   }
 </script>
 
-<button type="button" class={btnClass} on:click={handleClick}>{name}</button>
+<button type="button" class={btnClass} on:click>{name}</button>

package/buttons/GradientMonochromeButton.svelte.d.ts

@@ -6,7 +6,7 @@ export default class GradientMonochromeButton extends SvelteComponentTyped<{
     name?: string;
     color?: string;
 }, {
-    handleClick: CustomEvent<any>;
+    click: MouseEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -22,7 +22,7 @@ declare const __propDef: {
         color?: string;
     };
     events: {
-        handleClick: CustomEvent<any>;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/buttons/GradientOutlineButton.svelte

@@ -1,11 +1,4 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-  const handleClick = () => {
-    dispatch("handleClick");
-  };
-
   export let textSize = "text-sm";
   export let color = "purple2blue";
   export let name = "Read more";
@@ -48,5 +41,5 @@
 </script>
 
 <button class={btnClass}>
-  <span class={spanClass} on:click={handleClick}>{name}</span>
+  <span class={spanClass} on:click>{name}</span>
 </button>

package/buttons/GradientOutlineButton.svelte.d.ts

@@ -6,7 +6,7 @@ export default class GradientOutlineButton extends SvelteComponentTyped<{
     name?: string;
     color?: string;
 }, {
-    handleClick: CustomEvent<any>;
+    click: MouseEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -22,7 +22,7 @@ declare const __propDef: {
         color?: string;
     };
     events: {
-        handleClick: CustomEvent<any>;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/index.d.ts

@@ -38,4 +38,6 @@ import SpinnerButton from "./spinners/SpinnerButton.svelte";
 import InteractiveTabs from "./tabs/InteractiveTabs.svelte";
 import DefaultTabs from "./tabs/DefaultTabs.svelte";
 import PillTabs from "./tabs/PillTabs.svelte";
-export { Accordion, AccordionItem, Alert, BorderAlert, InfoAlert, Badge, BadgeIcon, BadgeLink, Button, ColorShadowButton, GradientDuotoneButton, GradientMonochromeButton, GradientOutlineButton, ButtonGroup, ButtonGroupOutline, Card, HorizontalCard, InteractiveCard, ListCard, CtaCard, EcommerceCard, SignInCard, DarkMode, Dropdown, SimpleFooter, List, modalIdStore, ExtraLargeModal, LargeModal, MediumModal, ModalButton, SignInModal, SmallModal, Navbar, DropdownNavbar, Spinner, SpinnerButton, InteractiveTabs, DefaultTabs, PillTabs };
+import Tooltip from "./tooltips/Tooltip.svelte";
+import LightTooltip from "./tooltips/LightTooltip.svelte";
+export { Accordion, AccordionItem, Alert, BorderAlert, InfoAlert, Badge, BadgeIcon, BadgeLink, Button, ColorShadowButton, GradientDuotoneButton, GradientMonochromeButton, GradientOutlineButton, ButtonGroup, ButtonGroupOutline, Card, HorizontalCard, InteractiveCard, ListCard, CtaCard, EcommerceCard, SignInCard, DarkMode, Dropdown, SimpleFooter, List, modalIdStore, ExtraLargeModal, LargeModal, MediumModal, ModalButton, SignInModal, SmallModal, Navbar, DropdownNavbar, Spinner, SpinnerButton, InteractiveTabs, DefaultTabs, PillTabs, Tooltip, LightTooltip };

package/index.js

@@ -65,6 +65,10 @@ import InteractiveTabs from './tabs/InteractiveTabs.svelte'
 import DefaultTabs from './tabs/DefaultTabs.svelte'
 import PillTabs from './tabs/PillTabs.svelte'
 
+// Tooltips
+import Tooltip from './tooltips/Tooltip.svelte'
+import LightTooltip from './tooltips/LightTooltip.svelte'
+
 export {
   // Accordions
   Accordion,
@@ -119,5 +123,8 @@ export {
   // Tabs
   InteractiveTabs,
   DefaultTabs,
-  PillTabs
+  PillTabs,
+  // Tooltips
+  Tooltip,
+  LightTooltip,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.7.2",
+  "version": "0.8.3",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",
@@ -47,7 +47,6 @@
   },
   "exports": {
     "./package.json": "./package.json",
-    "./.DS_Store": "./.DS_Store",
     "./accordions/AccordionDefault.svelte": "./accordions/AccordionDefault.svelte",
     "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
@@ -86,9 +85,12 @@
     "./navbar/Navbar.svelte": "./navbar/Navbar.svelte",
     "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
     "./spinners/SpinnerButton.svelte": "./spinners/SpinnerButton.svelte",
+    "./tables/Table.svelte": "./tables/Table.svelte",
     "./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
     "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
-    "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte"
+    "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
+    "./tooltips/LightTooltip.svelte": "./tooltips/LightTooltip.svelte",
+    "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte"
   },
   "svelte": "./index.js"
 }

package/tables/Table.svelte

@@ -0,0 +1,4 @@
+<script>
+  export let header = ["Name", "Color", "Category", "Price", "Edit"];
+  export let body = ["Apple MacBook Pro 17", "Silver", "Laptop", "$2222", "/"];
+</script>

package/tables/Table.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  TableProps */
+/** @typedef {typeof __propDef.events}  TableEvents */
+/** @typedef {typeof __propDef.slots}  TableSlots */
+export default class Table extends SvelteComponentTyped<{
+    header?: string[];
+    body?: string[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        header?: string[];
+        body?: string[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/tabs/InteractiveTabs.svelte

@@ -36,13 +36,14 @@
 <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" class:active={activeTabValue === 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
         >

package/tooltips/LightTooltip.svelte

@@ -0,0 +1,122 @@
+<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>
+
+<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>
+</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.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: -20%;
+    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>

package/tooltips/LightTooltip.svelte.d.ts

@@ -0,0 +1,39 @@
+/** @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;
+        top?: boolean;
+        right?: boolean;
+        bottom?: boolean;
+        left?: boolean;
+        active?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        'custom-tip': {};
+    };
+};
+export {};

package/tooltips/Tooltip.svelte

@@ -0,0 +1,122 @@
+<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>
+
+<div class="tooltip-wrapper">
+  <span class="tooltip-slot">
+    <slot />
+  </span>
+  <div
+    class="inline-block absolute invisible z-10 py-2 px-3 bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
+    class:active
+    class:left
+    class:right
+    class:bottom
+    class:top
+  >
+    {#if tip}
+      <div class="text-sm font-medium text-white ">{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.top:after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -10px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: rgb(55 65 81) transparent transparent transparent;
+  }
+  .tooltip.bottom::after {
+    content: "";
+    position: absolute;
+    top: -20%;
+    left: 50%;
+    margin-left: -10px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent rgb(55 65 81) 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 rgb(55 65 81) 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 rgb(55 65 81);
+  }
+  .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/Tooltip.svelte.d.ts

@@ -0,0 +1,39 @@
+/** @typedef {typeof __propDef.props}  TooltipProps */
+/** @typedef {typeof __propDef.events}  TooltipEvents */
+/** @typedef {typeof __propDef.slots}  TooltipSlots */
+export default class Tooltip extends SvelteComponentTyped<{
+    tip?: string;
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+    active?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    'custom-tip': {};
+}> {
+}
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        tip?: string;
+        top?: boolean;
+        right?: boolean;
+        bottom?: boolean;
+        left?: boolean;
+        active?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        'custom-tip': {};
+    };
+};
+export {};