flowbite-svelte 0.13.5 → 0.13.8

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.13.8](https://github.com/shinokada/flowbite-svelte/compare/v0.13.7...v0.13.8) (2022-04-14)
+
+
+### Features
+
+* add carousel components ([846a99d](https://github.com/shinokada/flowbite-svelte/commit/846a99dde2f45246493fac99790c220da257eefd))
+
+### [0.13.7](https://github.com/shinokada/flowbite-svelte/compare/v0.13.6...v0.13.7) (2022-04-13)
+
+
+### Bug Fixes
+
+* remove SvelteKit app/stores page and session from Navbar ([09428df](https://github.com/shinokada/flowbite-svelte/commit/09428df9f46b16b07595ed16c08697c61c0099a5))
+
+### [0.13.6](https://github.com/shinokada/flowbite-svelte/compare/v0.13.5...v0.13.6) (2022-04-13)
+
+
+### Bug Fixes
+
+* create new props files ([0a6fd33](https://github.com/shinokada/flowbite-svelte/commit/0a6fd334321bbedd2eecebb5e4f2456ddb19fd3b))
+* remove SvelteKit app session and page ([7eaa3db](https://github.com/shinokada/flowbite-svelte/commit/7eaa3dbfc7f0e2fcf5ef6be4045843fc92b354a5))
+
 ### [0.13.5](https://github.com/shinokada/flowbite-svelte/compare/v0.13.4...v0.13.5) (2022-04-12)
 
 

package/carousels/Caption.svelte

@@ -0,0 +1,6 @@
+<script >export let caption = '';
+</script>
+
+<div class="h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center">
+  <p id="caption" class="text-gray-900 dark:text-white">{caption}</p>
+</div>

package/carousels/Caption.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        caption?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CaptionProps = typeof __propDef.props;
+export declare type CaptionEvents = typeof __propDef.events;
+export declare type CaptionSlots = typeof __propDef.slots;
+export default class Caption extends SvelteComponentTyped<CaptionProps, CaptionEvents, CaptionSlots> {
+}
+export {};

package/carousels/Carousel.svelte

@@ -0,0 +1,73 @@
+<script >// import { images } from './imageData.js';
+import Slide from './Slide.svelte';
+import Thumbnail from './Thumbnail.svelte';
+import Caption from './Caption.svelte';
+import Indicator from './Indicator.svelte';
+export let showIndicators = true;
+export let showCaptions = true;
+export let showThumbs = true;
+export let images;
+export let slideControls = true;
+let imageShowingIndex = 0;
+$: console.log(imageShowingIndex);
+$: image = images[imageShowingIndex];
+const nextSlide = () => {
+    if (imageShowingIndex === images.length - 1) {
+        imageShowingIndex = 0;
+    }
+    else {
+        imageShowingIndex += 1;
+    }
+};
+const prevSlide = () => {
+    if (imageShowingIndex === 0) {
+        imageShowingIndex = images.length - 1;
+    }
+    else {
+        imageShowingIndex -= 1;
+    }
+};
+const goToSlide = (number) => (imageShowingIndex = number);
+let thumbWidth = 100 / images.length;
+</script>
+
+<div id="default-carousel" class="relative">
+  <div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96">
+    <Slide image={image.imgurl} altTag={image.name} attr={image.attribution} />
+  </div>
+  {#if showIndicators}
+    <!-- Slider indicators -->
+    <div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
+      {#each images as { id, imgurl, name, attribution }}
+        <Indicator {name} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
+      {/each}
+    </div>
+  {/if}
+  {#if slideControls}
+    <!-- Slider controls -->
+    <button on:click={prevSlide} type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
+      <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+        <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+        <span class="hidden">Previous</span>
+      </span>
+    </button>
+    <button on:click={nextSlide} type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
+      <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+        <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+        <span class="hidden">Next</span>
+      </span>
+    </button>
+  {/if}
+</div>
+
+{#if showCaptions}
+  <Caption caption={images[imageShowingIndex].name} />
+{/if}
+
+{#if showThumbs}
+  <div class="flex flex-row justify-center bg-gray-100">
+    {#each images as { id, imgurl, name, attribution }}
+      <Thumbnail {thumbWidth} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
+    {/each}
+  </div>
+{/if}

package/carousels/Carousel.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        showIndicators?: boolean;
+        showCaptions?: boolean;
+        showThumbs?: boolean;
+        images: any[];
+        slideControls?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CarouselProps = typeof __propDef.props;
+export declare type CarouselEvents = typeof __propDef.events;
+export declare type CarouselSlots = typeof __propDef.slots;
+export default class Carousel extends SvelteComponentTyped<CarouselProps, CarouselEvents, CarouselSlots> {
+}
+export {};

package/carousels/Indicator.svelte

@@ -0,0 +1,10 @@
+<script >export let name = '';
+export let selected = false;
+</script>
+
+<button type="button" class="w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60" class:active={selected} aria-label={name} on:click />
+
+<style>
+  .active {
+    opacity: 1;
+  }</style>

package/carousels/Indicator.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name?: string;
+        selected?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type IndicatorProps = typeof __propDef.props;
+export declare type IndicatorEvents = typeof __propDef.events;
+export declare type IndicatorSlots = typeof __propDef.slots;
+export default class Indicator extends SvelteComponentTyped<IndicatorProps, IndicatorEvents, IndicatorSlots> {
+}
+export {};

package/carousels/Slide.svelte

@@ -0,0 +1,8 @@
+<script >export let image = '';
+export let altTag = '';
+export let attr = '';
+</script>
+
+<div class="duration-700 ease-in-out">
+  <img src={image} alt={altTag} title={attr} />
+</div>

package/carousels/Slide.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        image?: string;
+        altTag?: string;
+        attr?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SlideProps = typeof __propDef.props;
+export declare type SlideEvents = typeof __propDef.events;
+export declare type SlideSlots = typeof __propDef.slots;
+export default class Slide extends SvelteComponentTyped<SlideProps, SlideEvents, SlideSlots> {
+}
+export {};

package/carousels/Thumbnail.svelte

@@ -0,0 +1,14 @@
+<script >export let thumbImg = '';
+export let altTag = '';
+export let titleLink = '';
+export let id;
+export let thumbWidth;
+export let selected = false;
+</script>
+
+<img class="opacity-40" class:active={selected} id={id.toString()} src={thumbImg} alt={altTag} title="Image from {titleLink}" on:click width="{thumbWidth}%" />
+
+<style>
+  .active {
+    opacity: 1;
+  }</style>

package/carousels/Thumbnail.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        thumbImg?: string;
+        altTag?: string;
+        titleLink?: string;
+        id: number;
+        thumbWidth: number;
+        selected?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ThumbnailProps = typeof __propDef.props;
+export declare type ThumbnailEvents = typeof __propDef.events;
+export declare type ThumbnailSlots = typeof __propDef.slots;
+export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
+}
+export {};

package/index.d.ts

@@ -26,6 +26,7 @@ export { default as ListCard } from "./cards/ListCard.svelte";
 export { default as CtaCard } from "./cards/CtaCard.svelte";
 export { default as EcommerceCard } from "./cards/EcommerceCard.svelte";
 export { default as SignInCard } from "./cards/SignInCard.svelte";
+export { default as Carousel } from "./carousels/Carousel.svelte";
 export { default as DarkMode } from "./darkmode/DarkMode.svelte";
 export { default as Dropdown } from "./dropdowns/DropdownDefault.svelte";
 export { default as SimpleFooter } from "./footer/SimpleFooter.svelte";

package/index.js

@@ -42,6 +42,9 @@ export { default as CtaCard } from'./cards/CtaCard.svelte'
 export { default as EcommerceCard } from'./cards/EcommerceCard.svelte'
 export { default as SignInCard } from'./cards/SignInCard.svelte'
 
+// Carousels
+export { default as Carousel } from './carousels/Carousel.svelte'
+
 // Dark mode
 export { default as DarkMode } from'./darkmode/DarkMode.svelte'
 

package/navbar/DropdownNavbar.svelte

@@ -1,11 +1,17 @@
-<script >import { page, session } from '$app/stores';
+<script >import { onMount } from 'svelte';
 import NavDropdown from './NavDropdown.svelte';
+export let user = '';
+let pathname = '';
+onMount(() => {
+    pathname = window.location.pathname;
+    // console.log('pathname', pathname);
+});
 let barHidden = true;
 const handleClickbtn = () => {
     barHidden = !barHidden;
 };
 export let sitename = 'Svelte Flow';
-export let logo = '/images/mkdir-logo.png';
+export let logo = '/images/flowbite-svelte-logo-30.png';
 export let alt;
 export let textsize = 'text-sm';
 export let menus;
@@ -20,36 +26,36 @@ export let liButtonClass = `flex justify-between items-center py-2 pr-4 pl-3 w-f
 </script>
 
 <nav class={navClass}>
-	<div class={navDivClass}>
-		<a href="/" class="flex">
-			<img src={logo} {alt} />
-			<span class={spanClass}>{sitename}</span>
-		</a>
-		<button on:click={handleClickbtn} type="button" class={buttonClass} aria-controls="mobile-menu-2" aria-expanded="false">
-			<span class="sr-only">Open main menu</span>
-			<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg>
-			<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
-		</button>
-		<div class="w-full md:block md:w-auto" class:hidden={barHidden} 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">
-				{#each menus as { name, href, rel, child }}
-					{#if child}
-						<NavDropdown {liButtonClass} {dropdownDiv} {name} {child} {rel} {dropdownLinkClassWithChild} />
-					{:else}
-						<li>
-							<a class:active={$page.url.pathname === href} {href} {rel} class={dropdownLinkClassWithoutChild}>{name}</a>
-						</li>
-					{/if}
-				{/each}
-			</ul>
-			{#if $session['user']}
-				<slot name="user" />
-			{/if}
-		</div>
-	</div>
+  <div class={navDivClass}>
+    <a href="/" class="flex">
+      <img src={logo} {alt} />
+      <span class={spanClass}>{sitename}</span>
+    </a>
+    <button on:click={handleClickbtn} type="button" class={buttonClass} aria-controls="mobile-menu-2" aria-expanded="false">
+      <span class="sr-only">Open main menu</span>
+      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg>
+      <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+    </button>
+    <div class="w-full md:block md:w-auto" class:hidden={barHidden} 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">
+        {#each menus as { name, href, rel, child }}
+          {#if child}
+            <NavDropdown {liButtonClass} {dropdownDiv} {name} {child} {rel} {dropdownLinkClassWithChild} />
+          {:else}
+            <li>
+              <a class:active={pathname === href} {href} {rel} class={dropdownLinkClassWithoutChild}>{name}</a>
+            </li>
+          {/if}
+        {/each}
+      </ul>
+      {#if user}
+        <slot name="user" />
+      {/if}
+    </div>
+  </div>
 </nav>
 
 <style>
-	#mobile-menu .active {
-		color: #fab534;
-	}</style>
+  #mobile-menu .active {
+    color: #fab534;
+  }</style>

package/navbar/DropdownNavbar.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { NavbarType } from '../types';
 declare const __propDef: {
     props: {
+        user?: string;
         sitename?: string;
         logo?: string;
         alt: string;

package/navbar/Navbar.svelte

@@ -1,6 +1,12 @@
-<script >import { page, session } from '$app/stores';
-export let name = 'Svelte Flow';
-export let logo = '/images/mkdir-logo.png';
+<script >import { onMount } from 'svelte';
+export let user = '';
+let pathname = '';
+onMount(() => {
+    pathname = window.location.pathname;
+    // console.log('pathname', pathname);
+});
+export let siteName = 'Svelte Flow';
+export let logo = '/images/flowbite-svelte-logo-30.png';
 export let alt = 'Svelte Flow';
 export let textsize = 'text-sm';
 let barHidden = true;
@@ -16,32 +22,32 @@ export let liLinkClass = `block py-2 pr-4 pl-3  text-gray-700 border-b border-gr
 </script>
 
 <nav class={navClass}>
-	<div class={navDivClass}>
-		<a href="/" class="flex">
-			<img src={logo} {alt} />
-			<span class={spanClass}>{name}</span>
-		</a>
-		<button on:click={handleClickbtn} type="button" class={buttonClass} aria-controls="mobile-menu-2" aria-expanded="false">
-			<span class="sr-only">Open main menu</span>
-			<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg>
-			<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
-		</button>
-		<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">
-				{#each menus as { name, href, rel }}
-					<li>
-						<a class:active={$page.url.pathname === href} {href} {rel} class={liLinkClass}>{name}</a>
-					</li>
-				{/each}
-			</ul>
-			{#if $session['user']}
-				<slot name="user" />
-			{/if}
-		</div>
-	</div>
+  <div class={navDivClass}>
+    <a href="/" class="flex">
+      <img src={logo} {alt} />
+      <span class={spanClass}>{siteName}</span>
+    </a>
+    <button on:click={handleClickbtn} type="button" class={buttonClass} aria-controls="mobile-menu-2" aria-expanded="false">
+      <span class="sr-only">Open main menu</span>
+      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg>
+      <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+    </button>
+    <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">
+        {#each menus as { name, href, rel }}
+          <li>
+            <a class:active={pathname === href} {href} {rel} class={liLinkClass}>{name}</a>
+          </li>
+        {/each}
+      </ul>
+      {#if user}
+        <slot name="user" />
+      {/if}
+    </div>
+  </div>
 </nav>
 
 <style>
-	#mobile-menu .active {
-		color: #fab534;
-	}</style>
+  #mobile-menu .active {
+    color: #fab534;
+  }</style>

package/navbar/Navbar.svelte.d.ts

@@ -2,7 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import type { LinkType } from '../types';
 declare const __propDef: {
     props: {
-        name?: string;
+        user?: string;
+        siteName?: string;
         logo?: string;
         alt?: string;
         textsize?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.13.5",
+  "version": "0.13.8",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -108,6 +108,11 @@
     "./cards/InteractiveCard.svelte": "./cards/InteractiveCard.svelte",
     "./cards/ListCard.svelte": "./cards/ListCard.svelte",
     "./cards/SignInCard.svelte": "./cards/SignInCard.svelte",
+    "./carousels/Caption.svelte": "./carousels/Caption.svelte",
+    "./carousels/Carousel.svelte": "./carousels/Carousel.svelte",
+    "./carousels/Indicator.svelte": "./carousels/Indicator.svelte",
+    "./carousels/Slide.svelte": "./carousels/Slide.svelte",
+    "./carousels/Thumbnail.svelte": "./carousels/Thumbnail.svelte",
     "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
     "./dropdowns/DropdownDefault.svelte": "./dropdowns/DropdownDefault.svelte",
     "./footer/LogoFooter.svelte": "./footer/LogoFooter.svelte",