flowbite-svelte 0.22.13 → 0.22.14

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 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.22.14](https://github.com/themesberg/flowbite-svelte/compare/v0.22.13...v0.22.14) (2022-07-25)
+
+
+### Bug Fixes
+
+* $$restProps before $$props.class ([9378cf5](https://github.com/themesberg/flowbite-svelte/commit/9378cf5349446ec8355317e98e462e379350a697))
+* add padding to w-full ([e1008c9](https://github.com/themesberg/flowbite-svelte/commit/e1008c9620f18b42664059595ae3fe1e421e097b))
+* layout and Toc padding ([6a67345](https://github.com/themesberg/flowbite-svelte/commit/6a6734545429c7228a1bf3cbc58f7e4739dbfe65))
+* various minor fixes ([9ac3296](https://github.com/themesberg/flowbite-svelte/commit/9ac3296635db9e7af2a45cc928477ac15e831dc4))
+
 ### [0.22.13](https://github.com/themesberg/flowbite-svelte/compare/v0.22.12...v0.22.13) (2022-07-24)
 
 ### [0.22.12](https://github.com/themesberg/flowbite-svelte/compare/v0.22.11...v0.22.12) (2022-07-24)

package/badges/Badge.svelte

@@ -1,7 +1,7 @@
 <script>import classNames from 'classnames';
 export let color = 'blue';
 export let large = false;
-export let href;
+export let href = undefined;
 export let rounded = false;
 let badgeClass;
 const colors = {

package/badges/Badge.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         [x: string]: any;
         color?: Colors;
         large?: boolean;
-        href: string;
+        href?: string;
         rounded?: boolean;
     };
     events: {

package/forms/Input.svelte

@@ -1,15 +1,18 @@
 <script>import classNames from 'classnames';
+import { getContext } from 'svelte';
 export let type = 'text';
 export let value = '';
 export let size = 'md';
 export let inputClass = 'block w-full border disabled:cursor-not-allowed disabled:opacity-50 rounded-lg';
 export let color = 'base';
 const colorClasses = {
-    base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
+    base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
     green: 'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
     red: 'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500'
 };
 export let ref = null;
+// tinted if put in component having its own background
+let background = getContext('background');
 // you need to this to avoid 2-way binding
 function setType(node) {
     node.type = type;
@@ -25,6 +28,10 @@ function setType(node) {
 	class={classNames(
 		inputClass,
 		colorClasses[color],
+		color === 'base' &&
+			(background
+				? 'dark:bg-gray-600 dark:border-gray-500'
+				: 'dark:bg-gray-700 dark:border-gray-600'),
 		{
 			'p-2 sm:text-xs': size === 'sm',
 			'p-2.5 text-sm': size === 'md',

package/forms/Toggle.svelte

@@ -23,18 +23,10 @@ const sizes = {
     large: 'w-14 h-7 after:top-0.5 after:left-[4px]  after:h-6 after:w-6'
 };
 let divClass;
-$: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'blue'], sizes[size]);
+$: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'blue'], sizes[size], 'relative');
 </script>
 
-<Checkbox
-	custom
-	class="relative {$$props.class}"
-	{value}
-	bind:checked
-	bind:group
-	{...$$restProps}
-	on:click
->
+<Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click>
 	<div class={divClass} />
 	<slot />
 </Checkbox>

package/list-group/List.svelte

@@ -6,7 +6,7 @@ export let active = false;
 setContext('background', true);
 $: setContext('active', active);
 let groupClass;
-$: groupClass = classNames('rounded-lg border border-gray-200 dark:border-gray-600', 'divide-y divide-gray-200 dark:divide-gray-600', $$props.class);
+$: groupClass = classNames('text-gray-900 bg-white dark:text-gray-200 dark:bg-gray-700', 'rounded-lg border border-gray-200 dark:border-gray-600', 'divide-y divide-gray-200 dark:divide-gray-600', $$props.class);
 </script>
 
 <svelte:element this={active ? 'div' : 'ul'} class={groupClass}>

package/list-group/ListItem.svelte

@@ -8,7 +8,7 @@ export let href = '';
 let dispatch = createEventDispatcher();
 const states = {
     current: 'text-white bg-blue-700 dark:text-white dark:bg-gray-800',
-    normal: 'text-gray-900 bg-white dark:text-gray-200 dark:bg-gray-700',
+    normal: '',
     disabled: 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400'
 };
 let focusClass = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:focus:ring-gray-500 dark:focus:text-white';

package/megamenu/MegaMenu.svelte

@@ -12,18 +12,9 @@ function init(node) {
         node.parentElement.classList.add('inset-x-0');
     }
 }
-let wrapper;
-afterUpdate(() => {
-    if (wrapper) {
-        const width = wrapper.getBoundingClientRect();
-        // wrapper.style.marginLeft = '-50%';
-        // console.log('after', width);
-        // console.log(wrapper.clientWidth);
-    }
-});
 </script>
 
-<div class={wrapperClass} use:init bind:this={wrapper}>
+<div class={wrapperClass} use:init>
 	<div class="flex flex-col md:flex-row p-4 max-w-screen-xl justify-center mx-auto">
 		<ul class={ulClass}>
 			{#each items as item, index}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.13",
+  "version": "0.22.14",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -233,6 +233,7 @@
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
+    "./utils/OptsButton.svelte": "./utils/OptsButton.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/generateId": "./utils/generateId.js"
   },

package/utils/CloseButton.svelte

@@ -12,14 +12,14 @@ const colors = {
     default: 'focus:ring-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
 };
 let buttonClass = '';
-$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5 h-8 w-8 focus:outline-none', colors[color], $$props.class);
+$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5 focus:outline-none', colors[color], $$props.class);
 </script>
 
 <button on:click type="button" class={buttonClass} aria-label="Close">
 	<slot>
 		<span class="sr-only">Close</span>
-		<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-			><path
+		<svg class="w-5 h-5" 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"

package/utils/OptsButton.svelte

@@ -0,0 +1,18 @@
+<script>
+	import CloseButton from './CloseButton.svelte';
+</script>
+
+<CloseButton on:click {...$$props}>
+	<span class="sr-only">Open options</span>
+	<svg
+		class="w-6 h-6"
+		aria-hidden="true"
+		fill="currentColor"
+		viewBox="0 0 20 20"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"
+		/>
+	</svg>
+</CloseButton>

package/utils/OptsButton.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  OptsButtonProps */
+/** @typedef {typeof __propDef.events}  OptsButtonEvents */
+/** @typedef {typeof __propDef.slots}  OptsButtonSlots */
+export default class OptsButton extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type OptsButtonProps = typeof __propDef.props;
+export type OptsButtonEvents = typeof __propDef.events;
+export type OptsButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};