@isoftdata/svelte-button - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

dist/Button.svelte

@@ -29,2 +29,3 @@ <script>import ButtonContents from "./ButtonContents.svelte";
 export let wrap = false;
+export let isLoading = false;
 $:
@@ -54,5 +55,5 @@ computedColor = `btn-${outline && (!disabled || !colorGreyDisabled) ? "outline-" : ""}${disabled && colorGreyDisabled ? "secondary" : color}`;
 		class:btn-block={block}
-		class:disabled
-		class:cursor-not-allowed={disabled}
-		class:text-white={disabled && !outline}
+		class:disabled={disabled || isLoading}
+		class:cursor-not-allowed={disabled || isLoading}
+		class:text-white={(disabled || isLoading) && !outline}
 		on:click
@@ -70,3 +71,3 @@ on:dblclick
 		{target}
-		href={disabled ? null : href}
+		href={disabled || isLoading ? null : href}
 		{download}
@@ -80,4 +81,7 @@ bind:this={button}
 			{textClass}
-			showText={!!$$slots.default}><slot /></ButtonContents
+			showText={!!$$slots.default}
+			{isLoading}
 		>
+			<slot />
+		</ButtonContents>
 	</a>
@@ -102,3 +106,3 @@ {:else}
 		class={computedClass}
-		{disabled}
+		disabled={disabled || isLoading}
 		bind:this={button}
@@ -111,4 +115,7 @@ {...$$restProps}
 			{textClass}
-			showText={!!$$slots.default}><slot /></ButtonContents
+			showText={!!$$slots.default}
+			{isLoading}
 		>
+			<slot />
+		</ButtonContents>
 	</button>
@@ -115,0 +122,0 @@ {/if}

dist/Button.svelte.d.ts

 import { SvelteComponent } from "svelte";
-import type { IconName } from "@fortawesome/fontawesome-common-types";
-import type { ButtonColors } from "@isoftdata/utility-bootstrap";
+import type { IconName } from '@fortawesome/fontawesome-common-types';
+import type { ButtonColors } from '@isoftdata/utility-bootstrap';
 declare const __propDef: {
@@ -23,3 +23,3 @@ props: {
             icon?: IconName | null | undefined;
-            size?: "" | "xs" | "sm" | "lg" | "2xs" | "xl" | "2xl" | undefined;
+            size?: "" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | undefined;
         } | undefined;
@@ -36,2 +36,3 @@ iconClass?: IconName | null | undefined;
         wrap?: boolean | undefined;
+        isLoading?: boolean | undefined;
     };
@@ -38,0 +39,0 @@ events: {

dist/ButtonContents.svelte

@@ -5,5 +5,9 @@ <script>import Icon from "@isoftdata/svelte-icon";
 export let textClass = null;
+export let isLoading = false;
 export let showText = $$slots.default;
+let loadingIcon = { ...icon, icon: "spinner" };
 $:
   hasTextAndIcon = !!icon.icon && $$slots.default && showText;
+$:
+  loadingIcon = { ...icon, icon: "spinner" };
 </script>
@@ -13,7 +17,15 @@
 	{#if icon.icon || icon.class}
-		<Icon
-			{...icon}
-			aria-hidden
-			class="{icon.class} {hasTextAndIcon ? 'mr-1' : ''}"
-		/>
+		{#if isLoading}
+			<Icon
+				{...loadingIcon}
+				aria-hidden
+				class="fa-spin {icon.class} {hasTextAndIcon ? 'mr-1' : ''}"
+			/>
+		{:else}
+			<Icon
+				{...icon}
+				aria-hidden
+				class="{icon.class} {hasTextAndIcon ? 'mr-1' : ''}"
+			/>
+		{/if}
 	{/if}
@@ -20,0 +32,0 @@ {#if showText}

dist/ButtonContents.svelte.d.ts

@@ -13,5 +13,6 @@ import { SvelteComponent } from "svelte";
             icon?: import("@fortawesome/fontawesome-common-types").IconName | null | undefined;
-            size?: "" | "xs" | "sm" | "lg" | "2xs" | "xl" | "2xl" | undefined;
+            size?: "" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | undefined;
         };
         textClass?: string | null | undefined;
+        isLoading?: boolean | undefined;
         showText?: boolean | undefined;
@@ -18,0 +19,0 @@ };

package.json

 {
 	"name": "@isoftdata/svelte-button",
-	"version": "1.2.2",
+	"version": "1.3.0",
 	"scripts": {
@@ -5,0 +5,0 @@ "dev": "vite dev",

README.md

@@ -32,2 +32,3 @@ # Svelte Button
 | `wrap` | `boolean` | Whether the button should wrap its contents. | `false` |
+| `isLoading` | `boolean` | Whether the button is showing a loading icon(and disabled) | `false` |
 
@@ -34,0 +35,0 @@ ## Example

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11354

3.75%

Lines of code

96

2.13%

Number of lines in readme file

60

1.69%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes