flowbite-svelte 0.27.11 → 0.27.13

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.27.13](https://github.com/themesberg/flowbite-svelte/compare/v0.27.12...v0.27.13) (2022-10-30)
+
+
+### Features
+
+* add target and {...$$restProps} to all footer components ([#405](https://github.com/themesberg/flowbite-svelte/issues/405)) ([c045aa7](https://github.com/themesberg/flowbite-svelte/commit/c045aa76dc209471f278eb98f0ec566c61e957f2))
+
+### [0.27.12](https://github.com/themesberg/flowbite-svelte/compare/v0.27.11...v0.27.12) (2022-10-29)
+
+
+### Bug Fixes
+
+* meta tag by adding type, url, and appId ([#399](https://github.com/themesberg/flowbite-svelte/issues/399)) ([6f9f423](https://github.com/themesberg/flowbite-svelte/commit/6f9f423b294bbc54bdae152f659e029e5e8a1f76))
+* update meta images width and height ([#400](https://github.com/themesberg/flowbite-svelte/issues/400)) ([f97c01a](https://github.com/themesberg/flowbite-svelte/commit/f97c01a361714daca951c16fa7a2293988abd983))
+
 ### [0.27.11](https://github.com/themesberg/flowbite-svelte/compare/v0.27.10...v0.27.11) (2022-10-26)
 
 

package/avatar/Avatar.svelte

@@ -21,19 +21,19 @@ $: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1
 </script>
 
 <Dot show={$$props.dot} {rounded} {...dot} {size} class={sizes[size]}>
-	{#if src}
-		<img {alt} {src} {...$$restProps} class={avatarClass} />
-	{:else if $$slots.default}
-		<svelte:element
-			this={href ? 'a' : 'div'}
-			{href}
-			{...$$restProps}
-			class="flex justify-center items-center text-xs font-medium {avatarClass}">
-			<slot />
-		</svelte:element>
-	{:else}
-		<svelte:element this={href ? 'a' : 'div'} {...$$restProps} class={avatarClass}>
-			<AvatarPlaceholder {rounded} />
-		</svelte:element>
-	{/if}
+  {#if src}
+    <img {alt} {src} {...$$restProps} class={avatarClass} />
+  {:else if $$slots.default}
+    <svelte:element
+      this={href ? 'a' : 'div'}
+      {href}
+      {...$$restProps}
+      class="flex justify-center items-center text-xs font-medium {avatarClass}">
+      <slot />
+    </svelte:element>
+  {:else}
+    <svelte:element this={href ? 'a' : 'div'} {...$$restProps} class={avatarClass}>
+      <AvatarPlaceholder {rounded} />
+    </svelte:element>
+  {/if}
 </Dot>

package/footer/Footer.svelte

@@ -5,17 +5,17 @@ export let footerType = 'default';
 </script>
 
 <footer
-	class={classNames(
-		{
-			'bg-gray-800': footerType === 'sitemap',
-			'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
-			'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
-			'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
-				footerType === 'default',
-			[`${customClass}`]: footerType === 'custom'
-		},
-		$$props.class
-	)}
->
-	<slot />
+  {...$$restProps}
+  class={classNames(
+    {
+      'bg-gray-800': footerType === 'sitemap',
+      'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
+      'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
+      'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
+        footerType === 'default',
+      [`${customClass}`]: footerType === 'custom'
+    },
+    $$props.class
+  )}>
+  <slot />
 </footer>

package/footer/FooterBrand.svelte

@@ -6,14 +6,15 @@ export let href = '';
 export let src = '';
 export let alt = '';
 export let name = '';
+export let target = undefined;
 </script>
 
 {#if href}
-	<a {href} class={classNames(aClass, $$props.class)}>
-		<img {src} class={imgClass} {alt} />
-		<span class={spanClass}>{name}</span>
-		<slot />
-	</a>
+  <a {...$$restProps} {href} {target} class={classNames(aClass, $$props.class)}>
+    <img {src} class={imgClass} {alt} />
+    <span class={spanClass}>{name}</span>
+    <slot />
+  </a>
 {:else}
-	<img {src} class={imgClass} {alt} />
+  <img {...$$restProps} {src} class={imgClass} {alt} />
 {/if}

package/footer/FooterBrand.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         src?: string | undefined;
         alt?: string | undefined;
         name?: string | undefined;
+        target?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/footer/FooterCopyright.svelte

@@ -4,16 +4,17 @@ export let aClass = 'hover:underline';
 export let year = new Date().getFullYear();
 export let href = '';
 export let by = '';
+export let target = undefined;
 </script>
 
 <span class={classNames(spanClass, $$props.class)}>
-	&copy; {year}
-	{#if href}
-		<a {href} class={aClass}>
-			{by}
-		</a>
-	{:else}
-		<span class="ml-1">{by}</span>
-	{/if}
-	. All Rights Reserved.
+  &copy; {year}
+  {#if href}
+    <a {...$$restProps} {href} {target} class={aClass}>
+      {by}
+    </a>
+  {:else}
+    <span class="ml-1">{by}</span>
+  {/if}
+  . All Rights Reserved.
 </span>

package/footer/FooterCopyright.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         year?: number | undefined;
         href?: string | undefined;
         by?: string | undefined;
+        target?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/footer/FooterIcon.svelte

@@ -2,12 +2,13 @@
 export let href = '';
 export let ariaLabel = '';
 export let aClass = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
+export let target = undefined;
 </script>
 
 {#if href}
-	<a {href} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
-		<slot />
-	</a>
+  <a {...$$restProps} {href} {target} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
+    <slot />
+  </a>
 {:else}
-	<slot />
+  <slot />
 {/if}

package/footer/FooterIcon.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         href?: string | undefined;
         ariaLabel?: string | undefined;
         aClass?: string | undefined;
+        target?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/footer/FooterLink.svelte

@@ -1,11 +1,13 @@
-<script>import classNames from 'classnames';
+<script>import A from '../typography/A.svelte';
+import classNames from 'classnames';
 export let liClass = 'mr-4 last:mr-0 md:mr-6';
 export let aClass = 'hover:underline';
 export let href = '';
+export let target = undefined;
 </script>
 
 <li class={classNames(liClass, $$props.class)}>
-	<a {href} class={aClass}>
-		<slot />
-	</a>
+  <a {...$$restProps} {href} class={aClass} {target}>
+    <slot />
+  </a>
 </li>

package/footer/FooterLink.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         liClass?: string | undefined;
         aClass?: string | undefined;
         href?: string | undefined;
+        target?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/list-group/Listgroup.svelte

@@ -9,7 +9,7 @@ let groupClass;
 $: groupClass = classNames('divide-y divide-gray-200 dark:divide-gray-600', $$props.class);
 </script>
 
-<Frame tag={active ? 'div' : 'ul'} rounded border class={groupClass}>
+<Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
   {#each items as item, index}
     <ListgroupItem {active} {...item} {index} on:click><slot {item} {index} /></ListgroupItem>
   {:else}

package/modals/Modal.svelte

@@ -97,7 +97,7 @@ function handleKeys(e) {
     on:click={autoclose ? onAutoClose : null}>
     <div class="flex p-4 w-full {sizes[size]} h-full md:h-auto max-h-screen">
       <!-- Modal content -->
-      <Frame rounded shadow class="relative flex flex-col w-full h-full md:h-auto">
+      <Frame {...$$restProps} rounded shadow class="relative flex flex-col w-full h-full md:h-auto">
         <!-- Modal header -->
         {#if $$slots.header || title}
           <div class="flex justify-between items-center p-4 rounded-t border-b dark:border-gray-600">

package/navbar/NavUl.svelte

@@ -14,15 +14,15 @@ $$props.class);
 </script>
 
 {#if !hidden}
-	<div {...$$restProps} class={_divClass} transition:slide={{ delay: 250, duration: 500, easing: quintOut }}>
-		<Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
-			<slot />
-		</Frame>
-	</div>
+  <div {...$$restProps} class={_divClass} transition:slide={{ delay: 250, duration: 500, easing: quintOut }}>
+    <Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
+      <slot />
+    </Frame>
+  </div>
 {:else}
-	<div {...$$restProps} class={_divClass} {hidden}>
-		<ul class={_ulClass}>
-			<slot />
-		</ul>
-	</div>
+  <div {...$$restProps} class={_divClass} {hidden}>
+    <ul class={_ulClass}>
+      <slot />
+    </ul>
+  </div>
 {/if}

package/navbar/Navbar.svelte

@@ -11,7 +11,7 @@ let toggle = () => {
 </script>
 
 <Frame tag="nav" {color} {...$$restProps} class={classNames(navClass, $$props.class)}>
-	<div class={classNames(navDivClass, fluid && 'container')}>
-		<slot {hidden} {toggle} />
-	</div>
+  <div class={classNames(navDivClass, fluid && 'container')}>
+    <slot {hidden} {toggle} />
+  </div>
 </Frame>

package/navbar/Navbar.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         navClass?: string | undefined;
         navDivClass?: string | undefined;
         fluid?: boolean | undefined;
-        color?: string | undefined;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "default" | "purple" | "pink" | "blue" | "light" | "dark" | "dropdown" | "navbar" | "navbarUl" | "form" | "none" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.27.11",
+  "version": "0.27.13",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

package/toasts/Toast.svelte.d.ts

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: Colors | undefined;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "default" | "purple" | "pink" | "blue" | "light" | "dark" | "dropdown" | "navbar" | "navbarUl" | "form" | "none" | undefined;
         simple?: boolean | undefined;
         position?: "none" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
         open?: boolean | undefined;