flowbite-svelte 0.8.1 → 0.8.4

package/README.md

@@ -1,13 +1,23 @@
 # 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)
 
+## Accordion components
+
+[Accordions](https://flowbite-svelte.vercel.app/accordions)
+
 ## Alert components
 
 [Alerts](https://flowbite-svelte.vercel.app/alerts)
 
+## Badges components
+
+[Badges](https://flowbite-svelte.vercel.app/badges)
+
 ## Button component
 
 [Buttons](https://flowbite-svelte.vercel.app/buttons)
@@ -16,6 +26,18 @@
 
 [Cards](https://flowbite-svelte.vercel.app/cards)
 
+## Dark mode component
+
+[Dark mode](https://flowbite-svelte.vercel.app/darkmode)
+
+## Dropdown components
+
+[Dropdowns](https://flowbite-svelte.vercel.app/dropdowns)
+
+## Icons
+
+[Icons](https://flowbite-svelte.vercel.app/icons)
+
 ## List group component
 
 [List group](https://flowbite-svelte.vercel.app/list-group)
@@ -24,10 +46,18 @@
 
 [Modals](https://flowbite-svelte.vercel.app/modals)
 
-## Navbar component
+## Navbar components
 
 [Navbars](https://flowbite-svelte.vercel.app/navbar)
 
+## Spinner components
+
+[Spinners](https://flowbite-svelte.vercel.app/spinners)
+
 ## Tab components
 
-[Tabs](https://flowbite-svelte.vercel.app/tabs)
+[Tabs](https://flowbite-svelte.vercel.app/tabs)
+
+## Tooltip components
+
+[Tooltips](https://flowbite-svelte.vercel.app/tooltips)

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.8.1",
+  "version": "0.8.4",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",
@@ -88,7 +88,9 @@
     "./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/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: -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>

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: -30%;
+    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 {};