flowbite-svelte 0.8.2 → 0.8.5

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

@@ -39,4 +39,5 @@ import InteractiveTabs from "./tabs/InteractiveTabs.svelte";
 import DefaultTabs from "./tabs/DefaultTabs.svelte";
 import PillTabs from "./tabs/PillTabs.svelte";
 import Tooltip from "./tooltips/Tooltip.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 };
+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

@@ -67,6 +67,7 @@ import PillTabs from './tabs/PillTabs.svelte'
 
 // Tooltips
 import Tooltip from './tooltips/Tooltip.svelte'
+import LightTooltip from './tooltips/LightTooltip.svelte'
 
 export {
   // Accordions
@@ -125,4 +126,5 @@ export {
   PillTabs,
   // Tooltips
   Tooltip,
+  LightTooltip,
 }

package/navbar/Navbar.svelte

@@ -5,6 +5,10 @@
   export let logo = "/images/mkdir-logo.png";
   export let alt = "Svelte Flow";
   export let textsize = "text-sm";
+  let barHidden = true;
+  const handleClickbtn = () => {
+    barHidden = !barHidden;
+  };
   export let menus = [
     {
       name: "Home",
@@ -41,6 +45,7 @@
       >
     </a>
     <button
+      on:click={handleClickbtn}
       type="button"
       class="inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500"
       aria-controls="mobile-menu-2"
@@ -70,7 +75,11 @@
         /></svg
       >
     </button>
-    <div class="hidden w-full md:block md:w-auto" id="mobile-menu">
+    <div
+      class:hidden={barHidden}
+      class="hidden w-full md:block md:w-auto"
+      id="mobile-menu"
+    >
       <ul
         class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium"
       >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.8.2",
+  "version": "0.8.5",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",
@@ -14,6 +14,7 @@
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
     "autoprefixer": "^10.4.2",
+    "flowbite-svelte": "^0.8.4",
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.1",
     "svelte": "^3.44.0",
@@ -89,6 +90,7 @@
     "./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
     "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
     "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
+    "./tooltips/LightTooltip.svelte": "./tooltips/LightTooltip.svelte",
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte"
   },
   "svelte": "./index.js"

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

@@ -5,9 +5,7 @@
   export let bottom = false;
   export let left = false;
   export let active = false;
-  export let bgColor = "bg-gray-900";
-
-  // let style = `background-color: ${color};`;
+  // export let bgColor = "";
 </script>
 
 <div class="tooltip-wrapper">
@@ -15,7 +13,7 @@
     <slot />
   </span>
   <div
-    class="inline-block absolute invisible z-10 py-2 px-3 {bgColor} rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip"
+    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
@@ -23,8 +21,7 @@
     class:top
   >
     {#if tip}
-      <div class="text-sm font-medium text-white dark:bg-gray-700">{tip}</div>
-      <div class="tooltip-arrow" />
+      <div class="text-sm font-medium text-white ">{tip}</div>
     {:else}
       <slot name="custom-tip" />
     {/if}
@@ -46,45 +43,53 @@
     visibility: hidden;
     transition: opacity 150ms, visibility 150ms;
   }
+
   .tooltip.top:after {
     content: "";
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: -10px;
-    border-width: 4px;
+    border-width: 5px;
     border-style: solid;
-    border-color: blue transparent transparent transparent;
+    border-color: rgb(55 65 81) transparent transparent transparent;
   }
   .tooltip.bottom::after {
     content: "";
     position: absolute;
-    top: -20%;
+    top: -30%;
     left: 50%;
     margin-left: -10px;
-    border-width: 4px;
+    border-width: 5px;
     border-style: solid;
-    border-color: transparent transparent blue transparent;
+    border-color: transparent transparent rgb(55 65 81) transparent;
   }
   .tooltip.right::after {
     content: "";
     position: absolute;
-    top: 43%;
-    left: 2%;
-    margin-left: -10px;
-    border-width: 4px;
+    /* vertically center */
+    top: 50%;
+    transform: translateY(-50%);
+    /* position tooltip correctly */
+    right: 100%;
+    margin-left: -5px;
+
+    border-width: 5px;
     border-style: solid;
-    border-color: transparent blue transparent transparent;
+    border-color: transparent rgb(55 65 81) transparent transparent;
   }
   .tooltip.left::after {
     content: "";
     position: absolute;
-    top: 43%;
-    left: 104%;
-    margin-left: -10px;
-    border-width: 4px;
+    /* 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 blue;
+    border-color: transparent transparent transparent rgb(55 65 81);
   }
   .tooltip.top {
     left: 50%;

package/tooltips/Tooltip.svelte.d.ts

@@ -8,7 +8,6 @@ export default class Tooltip extends SvelteComponentTyped<{
     bottom?: boolean;
     left?: boolean;
     active?: boolean;
-    bgColor?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -28,7 +27,6 @@ declare const __propDef: {
         bottom?: boolean;
         left?: boolean;
         active?: boolean;
-        bgColor?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;