flowbite-svelte 0.18.1 → 0.18.2

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.18.2](https://github.com/themesberg/flowbite-svelte/compare/v0.18.1...v0.18.2) (2022-06-22)
+
+
+### Features
+
+* make button styles reactive ([d74dd9b](https://github.com/themesberg/flowbite-svelte/commit/d74dd9b37c58716e33ca72ce5058b557a6b43ced))
+
+
+### Bug Fixes
+
+* make disabled button unclickable ([df1c66d](https://github.com/themesberg/flowbite-svelte/commit/df1c66d08e6090a66cff12d2d41f6b72a93324dc))
+* update checkbox, add Label and Helper components, update checkbox page ([07de620](https://github.com/themesberg/flowbite-svelte/commit/07de6208e256cb364d9ae1ed02b321168119514d))
+
 ### [0.18.1](https://github.com/themesberg/flowbite-svelte/compare/v0.18.0...v0.18.1) (2022-06-18)
 
 

package/buttons/Button.svelte

@@ -18,7 +18,7 @@ else {
 }
 let buttonClass;
 let round = rounded ? 'rounded-full' : 'rounded-lg';
-switch (btnColor) {
+$: switch (btnColor) {
     default:
     case 'blue':
         buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
@@ -87,6 +87,6 @@ switch (btnColor) {
 buttonClass += ' items-center inline-flex';
 </script>
 
-<button {type} class="{buttonClass} {$$props.class ? $$props.class : ''}" on:click>
+<button {type} class="{buttonClass} {$$props.class ? $$props.class : ''}" on:click {disabled}>
 	<slot>Read more</slot>
 </button>

package/forms/Checkbox.svelte

@@ -1,82 +1,21 @@
-<script>export let divClass = 'flex items-center mr-4';
+<script>import classNames from 'classnames';
 export let inputClass = 'w-4 h-4 bg-gray-100 rounded border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 ';
-export let labelClass = 'ml-2 text-sm font-medium text-gray-900 dark:text-gray-300';
-export let disabled = false;
-export let name = '';
-export let divHelperClass = 'flex items-center h-5';
-export let labelHelperClass = 'font-medium text-gray-900 dark:text-gray-300';
-export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
-export let color = 'blue';
-export let helper = '';
-export let id = '';
-export let value = '';
-export let label = '';
 export let checked = false;
-if (disabled) {
-    labelClass = 'ml-2 text-sm font-medium text-gray-400 dark:text-gray-500';
-}
-if (color === 'red') {
-    inputClass += 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600';
-}
-else if (color === 'green') {
-    inputClass += 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600';
-}
-else if (color === 'purple') {
-    inputClass += 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600';
-}
-else if (color === 'teal') {
-    inputClass += 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600';
-}
-else if (color === 'yellow') {
-    inputClass += 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600';
-}
-else if (color === 'orange') {
-    inputClass += 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600';
-}
-else {
-    inputClass += 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600';
-}
+export let color = 'blue';
+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>
 
-{#if helper}
-	<div class="flex">
-		<div class={divHelperClass}>
-			<input
-				{id}
-				type="checkbox"
-				bind:checked
-				{name}
-				{value}
-				class={inputClass}
-				aria-labelledby={id}
-				aria-describedby={id}
-				{disabled}
-				{...$$restProps}
-			/>
-		</div>
-		<div class="ml-2 text-sm">
-			<label for={id} class={labelHelperClass}>
-				{@html label}
-			</label>
-			<p id="{id}-helper-radio-text" class={helperClass}>{helper}</p>
-		</div>
-	</div>
-{:else}
-	<div class={divClass}>
-		<input
-			{id}
-			type="checkbox"
-			bind:checked
-			{name}
-			{value}
-			class={inputClass}
-			aria-labelledby={id}
-			aria-describedby={id}
-			{disabled}
-			{...$$restProps}
-		/>
-		<label for={id} class={labelClass}>
-			{@html label}
-		</label>
-	</div>
-{/if}
+<input
+	type="checkbox"
+	bind:checked
+	class={classNames(inputClass, colorClasses[color], $$props.class)}
+	{...$$restProps}
+/>

package/forms/Checkbox.svelte.d.ts

@@ -3,20 +3,9 @@ import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        divClass?: string;
         inputClass?: string;
-        labelClass?: string;
-        disabled?: boolean;
-        name?: string;
-        divHelperClass?: string;
-        labelHelperClass?: string;
-        helperClass?: string;
-        color?: FormColorType;
-        helper?: string;
-        id?: string;
-        value?: string;
-        label?: string;
         checked?: boolean;
+        color?: FormColorType;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Helper.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
+</script>
+
+<p class={classNames(helperClass, $$props.class)} {...$$restProps}>
+	<slot />
+</p>

package/forms/Helper.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        helperClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type HelperProps = typeof __propDef.props;
+export declare type HelperEvents = typeof __propDef.events;
+export declare type HelperSlots = typeof __propDef.slots;
+export default class Helper extends SvelteComponentTyped<HelperProps, HelperEvents, HelperSlots> {
+}
+export {};

package/forms/Label.svelte

@@ -0,0 +1,15 @@
+<script>import classNames from 'classnames';
+export let color = 'gray';
+export let labelClass = 'text-sm font-medium';
+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'
+};
+</script>
+
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<label {...$$restProps} class={classNames(labelClass, colorClasses[color], $$props.class)}>
+	<slot />
+</label>

package/forms/Label.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: 'gray' | 'green' | 'red' | 'disabled';
+        labelClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type LabelProps = typeof __propDef.props;
+export declare type LabelEvents = typeof __propDef.events;
+export declare type LabelSlots = typeof __propDef.slots;
+export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
+}
+export {};

package/index.d.ts

@@ -31,11 +31,12 @@ export { default as LogoFooter } from './footer/LogoFooter.svelte';
 export { default as SocialMediaFooter } from './footer/SocialMediaFooter.svelte';
 export { default as SitemapFooter } from './footer/SitemapFooter.svelte';
 export { default as Checkbox } from './forms/Checkbox.svelte';
-export { default as CheckboxInline } from './forms/CheckboxInline.svelte';
 export { default as Fileupload } from './forms/Fileupload.svelte';
 export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte';
+export { default as Helper } from './forms/Helper.svelte';
 export { default as Iconinput } from './forms/Iconinput.svelte';
 export { default as Input } from './forms/Input.svelte';
+export { default as Label } from './forms/Label.svelte';
 export { default as RadioInline } from './forms/RadioInline.svelte';
 export { default as Radio } from './forms/Radio.svelte';
 export { default as Range } from './forms/Range.svelte';

package/index.js

@@ -44,11 +44,12 @@ export { default as SocialMediaFooter } from './footer/SocialMediaFooter.svelte'
 export { default as SitemapFooter } from './footer/SitemapFooter.svelte';
 // Forms
 export { default as Checkbox } from './forms/Checkbox.svelte';
-export { default as CheckboxInline } from './forms/CheckboxInline.svelte';
 export { default as Fileupload } from './forms/Fileupload.svelte';
 export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte';
+export { default as Helper } from './forms/Helper.svelte';
 export { default as Iconinput } from './forms/Iconinput.svelte';
 export { default as Input } from './forms/Input.svelte';
+export { default as Label } from './forms/Label.svelte';
 export { default as RadioInline } from './forms/RadioInline.svelte';
 export { default as Radio } from './forms/Radio.svelte';
 export { default as Range } from './forms/Range.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -130,11 +130,12 @@
     "./footer/SitemapFooter.svelte": "./footer/SitemapFooter.svelte",
     "./footer/SocialMediaFooter.svelte": "./footer/SocialMediaFooter.svelte",
     "./forms/Checkbox.svelte": "./forms/Checkbox.svelte",
-    "./forms/CheckboxInline.svelte": "./forms/CheckboxInline.svelte",
     "./forms/Fileupload.svelte": "./forms/Fileupload.svelte",
     "./forms/FloatingLabelInput.svelte": "./forms/FloatingLabelInput.svelte",
+    "./forms/Helper.svelte": "./forms/Helper.svelte",
     "./forms/Iconinput.svelte": "./forms/Iconinput.svelte",
     "./forms/Input.svelte": "./forms/Input.svelte",
+    "./forms/Label.svelte": "./forms/Label.svelte",
     "./forms/Radio.svelte": "./forms/Radio.svelte",
     "./forms/RadioInline.svelte": "./forms/RadioInline.svelte",
     "./forms/Range.svelte": "./forms/Range.svelte",

package/forms/CheckboxInline.svelte

@@ -1,3 +0,0 @@
-<div class="flex">
-	<slot />
-</div>

package/forms/CheckboxInline.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  CheckboxInlineProps */
-/** @typedef {typeof __propDef.events}  CheckboxInlineEvents */
-/** @typedef {typeof __propDef.slots}  CheckboxInlineSlots */
-export default class CheckboxInline extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type CheckboxInlineProps = typeof __propDef.props;
-export type CheckboxInlineEvents = typeof __propDef.events;
-export type CheckboxInlineSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {};
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};