@tuspe/components 1.9.8 → 1.9.9

package/dist/Breadcrumbs.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
   import {page} from '$app/state'
-  import {onMount} from 'svelte'
-  import {validateArray} from './'
+  import {cx, validateArray} from './'
   import type {Breadcrumb} from './'
   import type {BreadcrumbView} from './types'
 
   let {homeName = 'Etusivu', homeSlug = '', onlyMeta = false, outerClass, values}: BreadcrumbView = $props()
-  let classes = $state('truncate')
+  let classes = $derived(cx('truncate', outerClass))
 
-  const origin = page.url.origin + '/'
-
-  let originWithSlug = $state(origin + homeSlug),
+  let origin = $derived(page.url.origin + '/'),
+    originWithSlug = $derived(origin + homeSlug),
     listItems = $derived<Breadcrumb[]>(
       validateArray(values)
         ? [
@@ -34,12 +32,6 @@
         ? `<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":${JSON.stringify(listItems)}}${'<'}/script>`
         : ''
     )
-
-  onMount(() => {
-    if (outerClass) {
-      classes += ` ${outerClass}`
-    }
-  })
 </script>
 
 <svelte:head>

package/dist/Button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {loading} from './'
+  import {cx, loading} from './'
   import type {ButtonView} from './types'
 
   let {
@@ -39,49 +39,25 @@
     value
   }: ButtonView = $props()
 
-  let classes = $state(`btn text-${color}`)
-
-  if (control) {
-    classes += ' control'
-  } else {
-    classes += ' bg-' + colorBg
-  }
-  if (borderSize) {
-    classes += ' border-solid border-' + borderSize + ' border-' + borderColor
-  }
-  if (extraClass) {
-    classes += ' ' + extraClass
-  }
-  if (fill) {
-    classes += ' fill'
-  }
-  if (fontWeight) {
-    classes += ' font-' + fontWeight
-  }
-  if (fullWidth) {
-    classes += ' w-full'
-  }
-  if (hover) {
-    classes += ' hover-' + hover
-  }
-  if (hoverText) {
-    classes += ' hover-text-' + hoverText
-  }
-  if (!noCenter) {
-    classes += ' center'
-  }
-  if (noHeight) {
-    classes += ' no-height'
-  }
-  if (noPadding) {
-    classes += ' no-padding'
-  }
-  if (rounded) {
-    classes += ' radius-' + rounded
-  }
-  if (uppercase) {
-    classes += ' uppercase'
-  }
+  let classes = $derived(
+    cx(
+      'btn',
+      `text-${color}`,
+      control ? 'control' : `bg-${colorBg}`,
+      borderSize ? `border-solid border-${borderSize} border-${borderColor}` : false,
+      extraClass,
+      fill && 'fill',
+      fontWeight && `font-${fontWeight}`,
+      fullWidth && 'w-full',
+      hover && `hover-${hover}`,
+      hoverText && `hover-text-${hoverText}`,
+      !noCenter && 'center',
+      noHeight && 'no-height',
+      noPadding && 'no-padding',
+      rounded && `radius-${rounded}`,
+      uppercase && 'uppercase'
+    )
+  )
 </script>
 
 {#if href}

package/dist/Checkbox.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {loading} from './'
+  import {cx, isDisabled, loading} from './'
   import type {CheckboxView} from './types'
   let {
     children,
@@ -13,14 +13,11 @@
     value,
     ...props
   }: CheckboxView = $props()
-  let classes = $state('input-checkbox')
-  if (outerClass) {
-    classes += ` ${outerClass}`
-  }
+  let classes = $derived(cx('input-checkbox', outerClass))
 </script>
 
 <label class={classes}>
-  <input bind:checked disabled={disabled || $loading ? true : false} {id} {onchange} {required} type="checkbox" {value} {...props} />
+  <input bind:checked disabled={isDisabled(disabled, $loading)} {id} {onchange} {required} type="checkbox" {value} {...props} />
   <span>
     {@render children?.()}
     {#if required}<sup>*</sup>{/if}

package/dist/Image.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {cx} from './'
   import type {ImageView} from './types'
   let {
     ariaHidden,
@@ -14,28 +15,9 @@
     objectFit
   }: ImageView = $props()
 
-  let classes = $state(display)
-  if (aspect) {
-    classes += ` aspect-${aspect}`
-  }
-  if (objectFit) {
-    classes += ' ' + objectFit
-  }
-  if (ball) {
-    classes += ' radius-full'
-  }
-  if (border) {
-    classes += ' border-full'
-  }
-  if (center) {
-    classes += ' mx-auto'
-  }
-  if (fullWidth) {
-    classes += ' full'
-  }
-  if (extraClasses) {
-    classes += ' ' + extraClasses
-  }
+  let classes = $derived(
+    cx(display, aspect && `aspect-${aspect}`, objectFit, ball && 'radius-full', border && 'border-full', center && 'mx-auto', fullWidth && 'full', extraClasses)
+  )
 </script>
 
 {#if image?.src}

package/dist/Input.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {loading} from './'
+  import {cx, isDisabled, loading} from './'
   import type {InputView} from './types'
 
   let {
@@ -21,20 +21,9 @@
     ...props
   }: InputView = $props()
 
-  let classesIn = $state(''),
-    classesOut = $state(`input-${type}`)
-  if (inputClass) {
-    classesIn = inputClass
-  }
-  if (bgColor && bgColor !== 'none') {
-    classesIn += ` bg-${bgColor}`
-  }
-  if (borderColor && borderColor !== 'none') {
-    classesIn += ` border-color-${borderColor}`
-  }
-  if (outerClass) {
-    classesOut += ` ${outerClass}`
-  }
+  let classesIn = $derived(cx(inputClass, bgColor !== 'none' && `bg-${bgColor}`, borderColor !== 'none' && `border-color-${borderColor}`)),
+    classesOut = $derived(cx(`input-${type}`, outerClass)),
+    inputDisabled = $derived(isDisabled(disabled, $loading))
 </script>
 
 <label class={classesOut}>
@@ -44,7 +33,7 @@
     <textarea
       bind:value
       class={classesIn}
-      disabled={disabled || $loading ? true : false}
+      disabled={inputDisabled}
       {id}
       maxlength={max ? Number(max) : undefined}
       {required}
@@ -56,7 +45,7 @@
     <input
       bind:value
       class={classesIn}
-      disabled={disabled || $loading ? true : false}
+      disabled={inputDisabled}
       lang="fi-FI"
       {max}
       {min}
@@ -75,7 +64,7 @@
       {required}
       {type}
       class={classesIn}
-      disabled={disabled || $loading ? true : false}
+      disabled={inputDisabled}
       maxlength={max ? Number(max) : undefined}
       minlength={min ? Number(min) : undefined}
       onkeyup={onchange}

package/dist/Select.svelte

@@ -1,29 +1,14 @@
 <script lang="ts">
-  import {loading} from './'
+  import {cx, isDisabled, loading} from './'
   import type {SelectView} from './types'
-  let {
-    colorBg = 'bg-transparent',
-    disabled,
-    id,
-    innerClass,
-    label,
-    onchange,
-    outerClass,
-    placeholder,
-    required = false,
-    value = $bindable(),
-    values
-  }: SelectView = $props()
-  let classes = $state(colorBg)
-  if (innerClass) {
-    classes += ' ' + innerClass
-  }
+  let {colorBg = 'bg-transparent', disabled, id, innerClass, label, onchange, outerClass, placeholder, required = false, value = $bindable(), values}: SelectView = $props()
+  let classes = $derived(cx(colorBg, innerClass))
 </script>
 
 <label class={outerClass}>
   {label}
   {#if required}<sup>*</sup>{/if}
-  <select bind:value {onchange} class={classes} disabled={disabled || $loading ? true : false} {id} {placeholder} {required}>
+  <select bind:value {onchange} class={classes} disabled={isDisabled(disabled, $loading)} {id} {placeholder} {required}>
     {#each values as item}
       <option value={item.value}>{item.name}</option>
     {/each}
@@ -32,8 +17,8 @@
 
 <style scoped>
   select {
-    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+)
-      no-repeat 98% 50%;
+    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 98% 50%;
+    background-color: initial;
     border-radius: 0.375rem;
     border: 1px solid var(--color-border);
     color: var(--color-content);
@@ -47,10 +32,6 @@
     appearance: none;
   }
 
-  select.bg-transparent {
-    background-color: transparent;
-  }
-
   select:disabled {
     cursor: not-allowed;
     opacity: 0.6;

package/dist/index.d.ts

@@ -26,6 +26,14 @@ export interface SelectItem {
     value: number | string;
 }
 export declare const loading: import("svelte/store").Writable<number>;
+/**
+ * CLASS NAMES
+ */
+export declare const cx: (...classes: (string | false | null | undefined)[]) => string;
+/**
+ * DISABLED STATE
+ */
+export declare const isDisabled: (disabled: boolean | undefined, loadingCount: number) => boolean;
 /**
  * PRICES AND NUMBERS
  */

package/dist/index.js

@@ -11,6 +11,14 @@ import Modal from './Modal.svelte';
 import Select from './Select.svelte';
 export { Breadcrumbs, Button, ButtonArrow, ButtonClose, ButtonMenu, Checkbox, Image, Input, Modal, Select };
 export const loading = writable(0);
+/**
+ * CLASS NAMES
+ */
+export const cx = (...classes) => classes.filter(Boolean).join(' ');
+/**
+ * DISABLED STATE
+ */
+export const isDisabled = (disabled, loadingCount) => disabled === true || loadingCount > 0;
 /**
  * PRICES AND NUMBERS
  */
@@ -61,20 +69,20 @@ export const slugify = (value) => {
         .replace(/^-+|-+$/g, ''); // Trim leading and trailing hyphens
 };
 export const validateSlug = (value) => {
-    return value && slugify(value) === value ? true : false;
+    return !!value && slugify(value) === value;
 };
 export const validateEmail = (email) => {
-    var re = /\S+@\S+\.\S+/;
+    const re = /\S+@\S+\.\S+/;
     return re.test(email);
 };
 export const validateString = (value) => {
-    return value && value.replace(/[^\w\s@!.:;,?+äÄöÖåÅ/%&()|-]/gi, '') === value ? true : false;
+    return !!value && value.replace(/[^\w\s@!.:;,?+äÄöÖåÅ/%&()|-]/gi, '') === value;
 };
 /**
  * ARRAY VALIDATIONS
  */
 export const validateArray = (value, items = 0) => {
-    return value && Array.isArray(value) && value.length > items ? true : false;
+    return Array.isArray(value) && value.length > items;
 };
 export const cacheValues = writable({});
 export const handleCache = (key, value = undefined, ttl = 60) => {

package/dist/types.d.ts

@@ -19,7 +19,6 @@ export interface ButtonCloseView {
     ariaLabel?: string;
     color?: string;
     hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent';
-    hoverText?: 'black' | 'primary' | 'secondary' | 'white';
     id?: string;
 }
 export interface ButtonMenuView {
@@ -114,7 +113,6 @@ export interface ModalView {
     children: Snippet;
     buttonAriaLabel?: string;
     colorButton?: string;
-    colorBg?: string;
     headerClass?: string;
     innerClass?: string;
     open?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuspe/components",
-  "version": "1.9.8",
+  "version": "1.9.9",
   "description": "A reusable SvelteKit component library for form elements, breadcrumbs, prices and images.",
   "keywords": [
     "svelteKit",
@@ -60,24 +60,24 @@
     "svelte": "^5.20.2"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.0.2",
-    "@eslint/js": "^9.39.2",
+    "@eslint/compat": "^2.1.0",
+    "@eslint/js": "^10.0.1",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/enhanced-img": "^0.10.0",
-    "@sveltejs/kit": "^2.50.2",
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "eslint": "^9.39.2",
+    "@sveltejs/enhanced-img": "^0.10.4",
+    "@sveltejs/kit": "^2.65.0",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "eslint": "^10.4.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.14.0",
-    "globals": "^17.3.0",
-    "prettier": "^3.8.1",
-    "prettier-plugin-svelte": "^3.4.1",
-    "publint": "^0.3.17",
-    "svelte": "^5.49.1",
-    "svelte-check": "^4.3.6",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.54.0",
-    "vite": "^7.3.1"
+    "eslint-plugin-svelte": "^3.19.0",
+    "globals": "^17.6.0",
+    "prettier": "^3.8.4",
+    "prettier-plugin-svelte": "^4.1.0",
+    "publint": "^0.3.21",
+    "svelte": "^5.56.3",
+    "svelte-check": "^4.6.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.61.0",
+    "vite": "^8.0.16"
   }
 }