flowbite-svelte 0.21.17 → 0.22.2

package/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 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.2](https://github.com/themesberg/flowbite-svelte/compare/v0.22.1...v0.22.2) (2022-07-21)
+
+
+### Bug Fixes
+
+* update for [#165](https://github.com/themesberg/flowbite-svelte/issues/165) and [#170](https://github.com/themesberg/flowbite-svelte/issues/170) ([ff43f26](https://github.com/themesberg/flowbite-svelte/commit/ff43f265b163d2c3ac7a145772e18a95326c0651))
+
+### [0.22.1](https://github.com/themesberg/flowbite-svelte/compare/v0.22.0...v0.22.1) (2022-07-20)
+
+
+### Bug Fixes
+
+* buttons redesign ([c0316ff](https://github.com/themesberg/flowbite-svelte/commit/c0316ff61fde6bf52166e3f0c0b30dacad4941c0))
+* typo ([4479464](https://github.com/themesberg/flowbite-svelte/commit/4479464736800552c1c05ce6b793459e8df6ef7f))
+
+## [0.22.0](https://github.com/themesberg/flowbite-svelte/compare/v0.21.17...v0.22.0) (2022-07-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* update dependencies and vite. script dev, build preview and test work
+
+### Features
+
+* update dependencies and vite. script dev, build preview and test work ([bf1b837](https://github.com/themesberg/flowbite-svelte/commit/bf1b83788d7f3ec53c2d5e5c85a825606cbce38f))
+
+
+### Bug Fixes
+
+* update all dependencies ([d7ae979](https://github.com/themesberg/flowbite-svelte/commit/d7ae979973ba092f36236fe877b98314a0328a42))
+* update package.json ([a77e3e5](https://github.com/themesberg/flowbite-svelte/commit/a77e3e57f58ac95dda547cc9a410a2aaa4559fe8))
+
 ### [0.21.17](https://github.com/themesberg/flowbite-svelte/compare/v0.21.16...v0.21.17) (2022-07-20)
 
 

package/forms/Checkbox.svelte

@@ -1,4 +1,10 @@
-<script>import Radio from './Radio.svelte';
+<script>import Radio, { labelClass, inputClass } from './Radio.svelte';
+import Label from './Label.svelte';
+// properties forwarding
+export let color = 'blue';
+export let custom = false;
+export let inline = false;
+export let tinted = false;
 export let group = [];
 export let value = '';
 export let checked = undefined;
@@ -22,23 +28,15 @@ $: {
         }
     }
 }
-let inputClass; // get the value from the underlying Radio
-// properties forwarding
-export let custom = false;
-export let color = 'blue';
-export let inline = false;
-export let tinted = false;
 </script>
 
-<Radio class={$$restProps.class} bind:inputClass {color} {custom} {inline} {tinted}>
+<Label class={labelClass(inline, $$restProps.class)} show={!!$$slots.default}>
 	<input
-		on:click
-		slot="input"
 		type="checkbox"
 		bind:checked
+		on:click
 		{value}
 		{...$$restProps}
-		class="rounded {inputClass}"
-	/>
-	<slot />
-</Radio>
+		class={inputClass(custom, color, true, tinted, $$slots.default || $$restProps.class)}
+	/><slot />
+</Label>

package/forms/Checkbox.svelte.d.ts

@@ -3,13 +3,13 @@ import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        group?: string[];
-        value?: string;
-        checked?: boolean;
-        custom?: boolean;
         color?: FormColorType;
+        custom?: boolean;
         inline?: boolean;
         tinted?: boolean;
+        group?: string[];
+        value?: string;
+        checked?: boolean;
     };
     events: {
         click: MouseEvent;

package/forms/FloatingLabelInput.svelte

@@ -72,6 +72,8 @@ function setType(node) {
 		{id}
 		{...$$restProps}
 		bind:value
+		on:change
+		on:blur
 		bind:this={ref}
 		use:setType
 		placeholder=" "

package/forms/FloatingLabelInput.svelte.d.ts

@@ -13,6 +13,9 @@ declare const __propDef: {
         ref?: HTMLElement;
     };
     events: {
+        change: Event;
+        blur: FocusEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/forms/Label.svelte

@@ -1,15 +1,26 @@
 <script>import classNames from 'classnames';
 export let color = 'gray';
-export let labelClass = 'text-sm font-medium';
+export let defaultClass = 'text-sm font-medium';
+export let show = true; // helper for inheritance
+let node;
 const colorClasses = {
     gray: 'text-gray-900 dark:text-gray-300',
     green: 'text-green-700 dark:text-green-500',
     red: 'text-red-700 dark:text-red-500',
     disabled: 'text-gray-400 dark:text-gray-500'
 };
+// function checkDisabled(node: HTMLLabelElement) {
+$: {
+    const control = node?.control;
+    color = control?.disabled ? 'disabled' : color;
+}
+let labelClass;
+$: labelClass = classNames(defaultClass, colorClasses[color], $$props.class);
 </script>
 
-<!-- svelte-ignore a11y-label-has-associated-control -->
-<label {...$$restProps} class={classNames(labelClass, colorClasses[color], $$props.class)}>
+{#if show}
+	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<label bind:this={node} {...$$restProps} class={labelClass}><slot /></label>
+{:else}
 	<slot />
-</label>
+{/if}

package/forms/Label.svelte.d.ts

@@ -3,7 +3,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         color?: 'gray' | 'green' | 'red' | 'disabled';
-        labelClass?: string;
+        defaultClass?: string;
+        show?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Radio.svelte

@@ -1,50 +1,47 @@
-<script>/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Label
+<script context="module">
+	// this part is shared between Radio and Checkbox
+	import classNames from 'classnames';
 
-To associate the <label> with an <input> element, you need to give the <input> an id attribute.
-The <label> then needs a for attribute	whose value is the same as the input's id.
+	const colorClasses = {
+		red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
+		green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
+		purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
+		teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
+		yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
+		orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
+		blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
+	};
 
-Alternatively, you can nest the <input> directly inside the <label>, in which case the for and
-id attributes are not needed because the association is implicit:
+	export const labelClass = (inline, extraClass) =>
+		classNames(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
 
-<label>Do you like peas?
-<input type="checkbox" name="peas">
-</label>
+	export const inputClass = (custom, color, rounded, tinted, extraClass) =>
+		classNames(
+			'w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 mr-2',
+			tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600',
+			custom && 'sr-only peer',
+			rounded && 'rounded',
+			colorClasses[color],
+			extraClass
+		);
+</script>
 
- */
-import classNames from 'classnames';
+<script>import Label from './Label.svelte';
 export let color = 'blue';
 export let custom = false;
 export let inline = false;
 export let tinted = false;
 export let group = '';
 export let value = '';
-export let inputClass;
-$: inputClass = classNames('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 mr-2', tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', colorClasses[color]);
-let colorLabel = 'gray';
-$: colorLabel = $$restProps.disabled ? 'disabled' : colorLabel;
-let labelClass;
-$: labelClass = classNames(inline ? 'inline-flex' : 'flex', 'items-center text-sm font-medium', colorClassesLabel[colorLabel], $$restProps.class);
-const colorClassesLabel = {
-    gray: 'text-gray-900 dark:text-gray-300',
-    green: 'text-green-700 dark:text-green-500',
-    red: 'text-red-700 dark:text-red-500',
-    disabled: 'text-gray-400 dark:text-gray-500'
-};
-const colorClasses = {
-    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
-    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
-    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
-    teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
-    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
-    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
-    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
-};
 </script>
 
-<!-- svelte-ignore a11y-label-has-associated-control -->
-<label class={labelClass}>
-	<slot name="input">
-		<input on:click type="radio" bind:group {value} {...$$restProps} class={inputClass} />
-	</slot>
-	<slot />
-</label>
+<Label class={labelClass(inline, $$restProps.class)} show={!!$$slots.default}>
+	<input
+		type="radio"
+		bind:group
+		on:click
+		{value}
+		{...$$restProps}
+		class={inputClass(custom, color, false, tinted, $$slots.default || $$restProps.class)}
+	/><slot />
+</Label>

package/forms/Radio.svelte.d.ts

@@ -1,4 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
+export declare const labelClass: (inline: any, extraClass: any) => string;
+export declare const inputClass: (custom: any, color: any, rounded: any, tinted: any, extraClass: any) => string;
 import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {
@@ -9,7 +11,6 @@ declare const __propDef: {
         tinted?: boolean;
         group?: number | string;
         value?: string;
-        inputClass: string;
     };
     events: {
         click: MouseEvent;
@@ -17,7 +18,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        input: {};
         default: {};
     };
 };

package/forms/Toggle.svelte

@@ -1,6 +1,7 @@
 <script>import classNames from 'classnames';
 import Checkbox from './Checkbox.svelte';
 export let size = 'default';
+export let value = '';
 const common = "mr-3 bg-gray-200 rounded-full peer-focus:ring-4 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600";
 const colors = {
     red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
@@ -18,7 +19,7 @@ const sizes = {
 };
 </script>
 
-<Checkbox on:click custom class="relative {$$restProps.class}" {...$$restProps}>
+<Checkbox custom class="relative {$$props.class}" {value} {...$$restProps} on:click>
 	<div class={classNames(common, colors[$$restProps.color ?? 'blue'], sizes[size])} />
 	<slot />
 </Checkbox>

package/forms/Toggle.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         size?: 'small' | 'default' | 'large';
+        value?: string | number;
     };
     events: {
         click: MouseEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.21.17",
+  "version": "0.22.2",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -12,30 +12,31 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@playwright/test": "^1.21.0",
+    "@playwright/test": "^1.23.4",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
     "autoprefixer": "^10.4.4",
     "createprops": "^0.4.4",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^3.2.1",
-    "mdsvex": "^0.10.5",
-    "postcss": "^8.4.12",
-    "postcss-load-config": "^3.1.4",
-    "prettier": "^2.5.1",
-    "prettier-plugin-svelte": "^2.5.0",
+    "eslint": "^8.20.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "mdsvex": "^0.10.6",
+    "postcss": "^8.4.14",
+    "postcss-load-config": "3.1.4",
+    "prettier": "^2.7.1",
+    "prettier-plugin-svelte": "^2.7.0",
     "prism-themes": "^1.9.0",
     "svelte": "^3.47.0",
-    "svelte-check": "^2.2.6",
-    "svelte-preprocess": "^4.10.5",
+    "svelte-check": "^2.8.0",
+    "svelte-preprocess": "^4.10.7",
     "svelte-sidebar-menu": "^0.8.4",
-    "svelte2tsx": "^0.5.9",
-    "tailwindcss": "^3.0.23",
+    "svelte2tsx": "^0.5.11",
+    "tailwindcss": "^3.1.6",
     "tslib": "^2.3.1",
-    "typescript": "~4.6.2"
+    "typescript": "~4.7.4",
+    "vite": "^3.0.2"
   },
   "type": "module",
   "keywords": [