@tuspe/components 1.8.5 → 1.8.7

package/README.md

@@ -62,11 +62,13 @@ Easily replace most buttons in your project with this versatile button component
     noCenter?: boolean
     noHeight?: boolean
     noPadding?: boolean
+    noSpinner?: boolean
     onclick?: any
     preload?: 'hover' | 'tap'
     rel?: string
     role?: string
     rounded?: 'full' | 'lg' | 'none' | 'sm'
+    spinnerColor?: 'black' | 'white'
     target?: '_blank' | '_top' | undefined
     title?: string | undefined
     type?: 'submit'

package/dist/Button.svelte

@@ -25,11 +25,13 @@
     noCenter?: boolean
     noHeight?: boolean
     noPadding?: boolean
+    noSpinner?: boolean
     onclick?: any
     preload?: 'hover' | 'tap'
     rel?: string
     role?: string
     rounded?: 'full' | 'lg' | 'none' | 'sm'
+    spinnerColor?: 'black' | 'white'
     target?: '_blank' | '_top' | undefined
     title?: string | undefined
     type?: 'submit'
@@ -60,11 +62,13 @@
     noCenter = false,
     noHeight,
     noPadding,
+    noSpinner,
     onclick = undefined,
     preload,
     rel = 'noopener noreferrer',
     role,
     rounded = 'sm',
+    spinnerColor = 'white',
     target,
     title,
     type,
@@ -139,11 +143,40 @@
   </button>
 {:else}
   <button {onclick} class={classes} {disabled} {title} {type}>
-    {@render children?.()}
+    {#if $loading && !noSpinner}
+      <span class={`loader ${spinnerColor}`}></span>
+    {:else}
+      {@render children?.()}
+    {/if}
   </button>
 {/if}
 
 <style scoped>
+  .loader {
+    animation: rotation 1s linear infinite;
+    border-radius: 50%;
+    border-right: 6px solid transparent;
+    border-top-style: solid;
+    border-top-width: 6px;
+    box-sizing: border-box;
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+  }
+  .loader.white {
+    border-top-color: #000;
+  }
+  .loader.white {
+    border-top-color: #fff;
+  }
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
   a {
     text-decoration: none;
   }

package/dist/Button.svelte.d.ts

@@ -22,11 +22,13 @@ interface Props {
     noCenter?: boolean;
     noHeight?: boolean;
     noPadding?: boolean;
+    noSpinner?: boolean;
     onclick?: any;
     preload?: 'hover' | 'tap';
     rel?: string;
     role?: string;
     rounded?: 'full' | 'lg' | 'none' | 'sm';
+    spinnerColor?: 'black' | 'white';
     target?: '_blank' | '_top' | undefined;
     title?: string | undefined;
     type?: 'submit';

package/dist/Checkbox.svelte

@@ -7,17 +7,18 @@
     onchange?: () => void
     checked?: boolean
     disabled?: boolean
+    group?: boolean
     id?: string
     outerClass?: string
     required?: boolean
-    value?: string
+    value?: number | string
   }
 
-  let {children, onchange, checked = $bindable(false), disabled, id, outerClass, required, value}: Props = $props()
+  let {children, onchange, checked = $bindable(false), disabled, group = $bindable(), id, outerClass, required, value, ...props}: Props = $props()
 </script>
 
 <label class={outerClass}>
-  <input bind:checked disabled={disabled || $loading} {id} {onchange} {required} type="checkbox" {value} />
+  <input bind:checked disabled={disabled || $loading} {id} {onchange} {required} type="checkbox" {value} {...props} />
   <span>
     {@render children?.()}
     {#if required}<sup>*</sup>{/if}

package/dist/Checkbox.svelte.d.ts

@@ -4,11 +4,12 @@ interface Props {
     onchange?: () => void;
     checked?: boolean;
     disabled?: boolean;
+    group?: boolean;
     id?: string;
     outerClass?: string;
     required?: boolean;
-    value?: string;
+    value?: number | string;
 }
-declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+declare const Checkbox: import("svelte").Component<Props, {}, "checked" | "group">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/Input.svelte

@@ -35,7 +35,8 @@
     required = false,
     step,
     type = 'text',
-    value = $bindable()
+    value = $bindable(),
+    ...props
   }: Props = $props()
 
   let classes = $state('')
@@ -63,9 +64,23 @@
       {required}
       {placeholder}
       rows={4}
+      {...props}
     ></textarea>
   {:else if ['date', 'number'].includes(type)}
-    <input bind:value class={classes} disabled={disabled || $loading} lang="fi-FI" {max} {min} {onchange} {required} {step} {type} {placeholder} />
+    <input
+      bind:value
+      class={classes}
+      disabled={disabled || $loading}
+      lang="fi-FI"
+      {max}
+      {min}
+      {onchange}
+      {required}
+      {step}
+      {type}
+      {placeholder}
+      {...props}
+    />
   {:else}
     <input
       bind:value
@@ -78,6 +93,7 @@
       maxlength={max ? Number(max) : undefined}
       minlength={min ? Number(min) : undefined}
       onkeyup={onchange}
+      {...props}
     />
     {#if type === 'search'}
       <svg

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuspe/components",
-  "version": "1.8.5",
+  "version": "1.8.7",
   "description": "A reusable SvelteKit component library for form elements, breadcrumbs, prices and images.",
   "keywords": [
     "svelteKit",
@@ -60,23 +60,23 @@
     "svelte": "^5.20.2"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.8",
-    "@eslint/js": "^9.24.0",
+    "@eslint/compat": "^1.2.9",
+    "@eslint/js": "^9.26.0",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.20.5",
-    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/kit": "^2.20.8",
+    "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-svelte": "^3.5.1",
-    "eslint": "^9.24.0",
+    "eslint": "^9.26.0",
     "globals": "^16.0.0",
     "prettier-plugin-svelte": "^3.3.3",
     "prettier": "^3.5.3",
-    "publint": "^0.3.11",
-    "svelte-check": "^4.1.5",
-    "svelte": "^5.25.12",
-    "typescript-eslint": "^8.29.1",
+    "publint": "^0.3.12",
+    "svelte-check": "^4.1.7",
+    "svelte": "^5.28.2",
+    "typescript-eslint": "^8.31.1",
     "typescript": "^5.8.3",
-    "vite": "^6.2.6"
+    "vite": "^6.3.4"
   }
-}
+}