flowbite-svelte 0.29.9 → 0.29.10

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.29.10](https://github.com/themesberg/flowbite-svelte/compare/v0.29.9...v0.29.10) (2023-01-13)
+
+
+### Features
+
+* add on:input to textarea ([#518](https://github.com/themesberg/flowbite-svelte/issues/518)) ([318ffbf](https://github.com/themesberg/flowbite-svelte/commit/318ffbf676366fcc7bd08c538270800d90ce5189))
+* make Select receive custom options ([#514](https://github.com/themesberg/flowbite-svelte/issues/514)) ([a58b410](https://github.com/themesberg/flowbite-svelte/commit/a58b410a3ffce29432907457baeae8c20977ef42))
+
+
+### Bug Fixes
+
+* [#530](https://github.com/themesberg/flowbite-svelte/issues/530) ([16c6650](https://github.com/themesberg/flowbite-svelte/commit/16c66504d42a378705a120fae5a6ca147a776bd4))
+* export slide params ([#516](https://github.com/themesberg/flowbite-svelte/issues/516)) ([c8dd81d](https://github.com/themesberg/flowbite-svelte/commit/c8dd81d5493b908a903648104f0371ac143c1167))
+* modal layout ([#526](https://github.com/themesberg/flowbite-svelte/issues/526)) ([6b25019](https://github.com/themesberg/flowbite-svelte/commit/6b250190f25feefe21191b3d8cab709fe28c6908))
+* npm run check corrections ([#517](https://github.com/themesberg/flowbite-svelte/issues/517)) ([f1f89e3](https://github.com/themesberg/flowbite-svelte/commit/f1f89e30221fd3bb63fed174fe825a46f780d1c7))
+
 ### [0.29.9](https://github.com/themesberg/flowbite-svelte/compare/v0.29.8...v0.29.9) (2023-01-01)
 
 

package/accordions/AccordionItem.svelte

@@ -35,7 +35,7 @@ onMount(() => {
     // this will trigger unsubscribe on destroy
     return selected.subscribe((x) => (open = x === self));
 });
-const handleToggle = (e) => selected.set(open ? {} : self);
+const handleToggle = (_) => selected.set(open ? {} : self);
 let buttonClass;
 $: buttonClass = classNames(defaultClass, ctx.flush ? 'py-5' : 'p-5', open && (ctx.flush ? 'text-gray-900 dark:text-white' : activeClasses || ctx.activeClasses), !open && (ctx.flush ? 'text-gray-500 dark:text-gray-400' : inactiveClasses || ctx.inactiveClasses), $$props.class);
 </script>

package/footer/FooterCopyright.svelte

@@ -5,6 +5,7 @@ export let year = new Date().getFullYear();
 export let href = '';
 export let by = '';
 export let target = undefined;
+export let copyrightMessage = 'All Rights Reserved.';
 </script>
 
 <span class={classNames(spanClass, $$props.class)}>
@@ -16,5 +17,5 @@ export let target = undefined;
   {:else}
     <span class="ml-1">{by}</span>
   {/if}
-  . All Rights Reserved.
+  . {copyrightMessage}
 </span>

package/footer/FooterCopyright.svelte.d.ts

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

package/footer/FooterLink.svelte

@@ -1,5 +1,4 @@
-<script>import A from '../typography/A.svelte';
-import classNames from 'classnames';
+<script>import classNames from 'classnames';
 export let liClass = 'mr-4 last:mr-0 md:mr-6';
 export let aClass = 'hover:underline';
 export let href = '';

package/forms/Select.svelte

@@ -17,9 +17,13 @@ $: selectClass = classNames(common, underline ? underlineClass : defaultClass, s
 </script>
 
 <select {...$$restProps} bind:value class={selectClass} on:change on:contextmenu on:input>
-  <option disabled selected value="">{placeholder}</option>
+  {#if placeholder}
+    <option disabled selected value="">{placeholder}</option>
+  {/if}
 
   {#each items as { value, name }}
     <option {value}>{name}</option>
+  {:else}
+    <slot />
   {/each}
 </select>

package/forms/Select.svelte.d.ts

@@ -18,7 +18,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;

package/forms/Textarea.svelte

@@ -30,6 +30,7 @@ $: innerWrapperClass = classNames('py-2 px-4 bg-white dark:bg-gray-800', $$slots
       on:click
       on:contextmenu
       on:focus
+      on:input
       on:keydown
       on:keypress
       on:keyup

package/forms/Textarea.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         click: MouseEvent;
         contextmenu: MouseEvent;
         focus: FocusEvent;
+        input: Event;
         keydown: KeyboardEvent;
         keypress: KeyboardEvent;
         keyup: KeyboardEvent;

package/modals/Modal.svelte

@@ -62,15 +62,14 @@ const sizes = {
 const onAutoClose = (e) => {
     const target = e.target;
     if (autoclose && target?.tagName === 'BUTTON')
-        open = false;
+        hide(e);
 };
-const hide = () => {
+const hide = (e) => {
+    e.preventDefault();
     open = false;
 };
-let mainClass;
-$: mainClass = classNames('flex overflow-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full', backdropClasses, ...getPlacementClasses());
 let frameClass;
-$: frameClass = classNames('relative flex flex-col w-full h-full md:h-auto', $$props.class);
+$: frameClass = classNames('relative flex flex-col mx-auto', $$props.class);
 const isScrollable = (e) => [
     e.scrollWidth > e.clientWidth && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowX) >= 0,
     e.scrollHeight > e.clientHeight && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowY) >= 0
@@ -82,22 +81,28 @@ function preventWheelDefault(e) {
 }
 function handleKeys(e) {
     if (e.key === 'Escape' && !permanent)
-        return hide();
+        return hide(e);
 }
 </script>
 
 {#if open}
+  <!-- backdrop -->
+  <div class={classNames('fixed inset-0 z-40', backdropClasses)} />
+  <!-- dialog -->
   <div
-    tabindex="-1"
-    class={mainClass}
-    aria-modal="true"
-    role="dialog"
-    on:keydown|preventDefault={handleKeys}
+    on:keydown={handleKeys}
     on:wheel|preventDefault
     use:prepareFocus
     use:focusTrap
-    on:click={autoclose ? onAutoClose : null}>
-    <div class="flex p-4 w-full {sizes[size]} h-full md:h-auto max-h-screen">
+    on:click={autoclose ? onAutoClose : null}
+    class={classNames(
+      'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex',
+      ...getPlacementClasses()
+    )}
+    tabindex="-1"
+    aria-modal="true"
+    role="dialog">
+    <div class="flex relative {sizes[size]} w-full max-h-full">
       <!-- Modal content -->
       <Frame rounded shadow {...$$restProps} class={frameClass}>
         <!-- Modal header -->

package/navbar/NavUl.svelte

@@ -5,6 +5,7 @@ import Frame from '../utils/Frame.svelte';
 export let divClass = 'w-full md:block md:w-auto';
 export let ulClass = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
 export let hidden = true;
+export let slideParams = { delay: 250, duration: 500, easing: quintOut };
 let _divClass;
 $: _divClass = classNames(divClass, $$props.class);
 let _ulClass;
@@ -14,7 +15,7 @@ $$props.class);
 </script>
 
 {#if !hidden}
-  <div {...$$restProps} class={_divClass} transition:slide={{ delay: 250, duration: 500, easing: quintOut }}>
+  <div {...$$restProps} class={_divClass} transition:slide={slideParams}>
     <Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
       <slot />
     </Frame>

package/navbar/NavUl.svelte.d.ts

@@ -1,10 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import { type SlideParams } from 'svelte/transition';
 declare const __propDef: {
     props: {
         [x: string]: any;
         divClass?: string | undefined;
         ulClass?: string | undefined;
         hidden?: boolean | undefined;
+        slideParams?: SlideParams | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

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

package/paginations/PaginationItem.svelte

@@ -1,5 +1,5 @@
 <script>import classNames from 'classnames';
-import { getContext, onMount } from 'svelte';
+import { getContext } from 'svelte';
 export let href = undefined;
 export let active = false;
 export let activeClass = '';

package/ratings/Rating.svelte

@@ -17,12 +17,12 @@ let grayStars = total - roundedRating;
     <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
     <slot />
   {:else}
-    {#each Array(roundedRating) as _, star}
+    {#each Array(roundedRating) as _}
       <slot name="ratingUp">
         <Star variation="solid" {size} class="text-yellow-300 dark:text-yellow-200" />
       </slot>
     {/each}
-    {#each Array(grayStars) as _, star}
+    {#each Array(grayStars) as _}
       <slot name="ratingDown">
         <Star {size} class="text-gray-300 dark:text-gray-500" />
       </slot>

package/ratings/RatingComment.svelte

@@ -10,55 +10,55 @@ let grayStars = comment.total - roundedRating;
 </script>
 
 <article>
-	<div class="flex items-center mb-4 space-x-4">
-		<img class="w-10 h-10 rounded-full" src={comment.user.img.src} alt={comment.user.img.alt} />
-		<div class="space-y-1 font-medium dark:text-white">
-			<p>
-				{comment.user.name}
-				<time datetime="2014-08-16 19:00" class="block text-sm text-gray-500 dark:text-gray-400"
-					>{comment.user.joined}</time>
-			</p>
-		</div>
-	</div>
-	<div class="flex items-center mb-1">
-		{#each Array(roundedRating) as _, star}
-			<slot name="ratingUp">
-				<Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
-			</slot>
-		{/each}
-		{#each Array(grayStars) as _, star}
-			<slot name="ratingDown">
-				<Star size="24" class="px-0.5 text-gray-300 dark:text-gray-500" />
-			</slot>
-		{/each}
-		{#if comment.heading}
-			<h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
-				{comment.heading}
-			</h3>
-		{/if}
-	</div>
-	{#if comment.address || comment.datetime}
-		<footer class="mb-5 text-sm text-gray-500 dark:text-gray-400">
-			<p>Reviewed in {comment.address} on {comment.datetime}</p>
-		</footer>
-	{/if}
-	<slot />
-	<aside>
-		<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-			<slot name="evaluation" />
-		</p>
-		{#if helpfullink || abuselink}
-			<div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
-				{#if helpfullink}
-					<Button size="xs" href="/" color="dark">Helpful</Button>
-				{/if}
-				{#if abuselink}
-					<a
-						href={abuselink}
-						class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-						>Report abuse</a>
-				{/if}
-			</div>
-		{/if}
-	</aside>
+  <div class="flex items-center mb-4 space-x-4">
+    <img class="w-10 h-10 rounded-full" src={comment.user.img.src} alt={comment.user.img.alt} />
+    <div class="space-y-1 font-medium dark:text-white">
+      <p>
+        {comment.user.name}
+        <time datetime="2014-08-16 19:00" class="block text-sm text-gray-500 dark:text-gray-400"
+          >{comment.user.joined}</time>
+      </p>
+    </div>
+  </div>
+  <div class="flex items-center mb-1">
+    {#each Array(roundedRating) as _}
+      <slot name="ratingUp">
+        <Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
+      </slot>
+    {/each}
+    {#each Array(grayStars) as _}
+      <slot name="ratingDown">
+        <Star size="24" class="px-0.5 text-gray-300 dark:text-gray-500" />
+      </slot>
+    {/each}
+    {#if comment.heading}
+      <h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
+        {comment.heading}
+      </h3>
+    {/if}
+  </div>
+  {#if comment.address || comment.datetime}
+    <footer class="mb-5 text-sm text-gray-500 dark:text-gray-400">
+      <p>Reviewed in {comment.address} on {comment.datetime}</p>
+    </footer>
+  {/if}
+  <slot />
+  <aside>
+    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+      <slot name="evaluation" />
+    </p>
+    {#if helpfullink || abuselink}
+      <div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
+        {#if helpfullink}
+          <Button size="xs" href="/" color="dark">Helpful</Button>
+        {/if}
+        {#if abuselink}
+          <a
+            href={abuselink}
+            class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+            >Report abuse</a>
+        {/if}
+      </div>
+    {/if}
+  </aside>
 </article>

package/types.d.ts

@@ -93,7 +93,7 @@ export interface ListGroupItemType {
     [propName: string]: any;
 }
 export interface LinkType {
-    name: number;
+    name: string;
     href?: string;
     rel?: string;
     active?: boolean;

package/utils/backdrop.d.ts

@@ -1,6 +1,6 @@
 export declare let open: boolean;
 export declare let placement: string;
-export declare const init: (node: any, _open: any) => {
-    update(_open: any): void;
+export declare const init: (node: HTMLElement, _open: boolean) => {
+    update(_open: boolean): void;
     destroy(): void;
 };

package/utils/backdrop.js

@@ -15,7 +15,6 @@ export let placement;
 export const init = (node, _open) => {
     getPlacementClasses().map((c) => node.classList.add(c));
     _open && createBackdrop(node);
-    console.log('init clicked');
     return {
         update(_open) {
             allPlacementClasses.map((c) => node.classList.remove(c));
@@ -58,7 +57,7 @@ const createBackdrop = (node) => {
     if (!backdropEl) {
         backdropEl = document.createElement('div');
         backdropEl.classList.add(...backdropClasses.split(' '));
-        const body = document.querySelector('body');
+        const body = document.body;
         body.append(backdropEl);
         body.style.overflow = 'hidden';
         document.addEventListener('keydown', handleEscape, true);
@@ -66,7 +65,7 @@ const createBackdrop = (node) => {
     dispatch('show', node);
 };
 const destroyBackdrop = (node) => {
-    const body = document.querySelector('body');
+    const body = document.body;
     body.style.overflow = 'auto';
     if (backdropEl)
         backdropEl.remove();