@tuspe/components 1.7.13 → 1.7.15

package/README.md

@@ -175,11 +175,12 @@ A customizable `Select` component for choosing from a list of options. Supports
   }
 
   interface Props {
-    onchange?: () => void
     disabled?: boolean
-    outerClass?: string
     id?: string
+    innerClass?: string
     label: string
+    onchange?: () => void
+    outerClass?: string
     placeholder?: string
     required?: boolean
     value: string | number

package/dist/Breadcrumbs.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import {page} from '$app/state'
-  import type {Breadcrumb} from './'
+  import {validateArray, type Breadcrumb} from './'
 
   interface Props {
     homeName?: string
     homeSlug?: string
+    outerClass?: string
     values: Breadcrumb[]
   }
 
-  let {homeName = 'Etusivu', homeSlug = '', values}: Props = $props()
+  let {homeName = 'Etusivu', homeSlug = '', outerClass, values}: Props = $props(),
+    classes = $state('truncate')
+
   const origin = page.url.origin + '/'
 
   let originWithSlug = $state(origin + homeSlug),
@@ -35,6 +38,10 @@
         ? `<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":${JSON.stringify(listItems)}}${'<'}/script>`
         : ''
     )
+
+  $effect(() => {
+    classes += outerClass ? ` ${outerClass}` : ' border-bottom'
+  })
 </script>
 
 <svelte:head>
@@ -43,8 +50,8 @@
   {/if}
 </svelte:head>
 
-{#if Array.isArray(listItems) && listItems.length > 0}
-  <div class="border-bottom truncate">
+{#if validateArray(listItems)}
+  <div class={classes}>
     <ol id="breadcrumb" class="max-w-screen-xl mx-auto my-0 px-4 py-2" vocab="https://schema.org/" typeof="BreadcrumbList">
       {#each listItems as page}
         <li property="itemListElement" typeof="ListItem">

package/dist/Breadcrumbs.svelte.d.ts

@@ -1,7 +1,8 @@
-import type { Breadcrumb } from './';
+import { type Breadcrumb } from './';
 interface Props {
     homeName?: string;
     homeSlug?: string;
+    outerClass?: string;
     values: Breadcrumb[];
 }
 declare const Breadcrumbs: import("svelte").Component<Props, {}, "">;

package/dist/Select.svelte

@@ -2,24 +2,25 @@
   import {loading, type SelectItem} from './'
 
   interface Props {
-    onchange?: () => void
     disabled?: boolean
-    outerClass?: string
     id?: string
+    innerClass?: string
     label: string
+    onchange?: () => void
+    outerClass?: string
     placeholder?: string
     required?: boolean
     value: string | number
     values: SelectItem[]
   }
 
-  let {onchange, disabled, outerClass, id, label, placeholder, required = false, value = $bindable(), values}: Props = $props()
+  let {disabled, id, innerClass, label, onchange, outerClass, placeholder, required = false, value = $bindable(), values}: Props = $props()
 </script>
 
 <label class={outerClass}>
   {label}
   {#if required}<sup>*</sup>{/if}
-  <select bind:value {onchange} disabled={disabled || $loading} {id} {placeholder} {required}>
+  <select bind:value {onchange} class={innerClass} disabled={disabled || $loading} {id} {placeholder} {required}>
     {#each values as item}
       <option value={item.value}>{item.name}</option>
     {/each}

package/dist/Select.svelte.d.ts

@@ -1,10 +1,11 @@
 import { type SelectItem } from './';
 interface Props {
-    onchange?: () => void;
     disabled?: boolean;
-    outerClass?: string;
     id?: string;
+    innerClass?: string;
     label: string;
+    onchange?: () => void;
+    outerClass?: string;
     placeholder?: string;
     required?: boolean;
     value: string | number;

package/dist/index.d.ts

@@ -47,10 +47,14 @@ export declare const validateArray: (value: any, items?: number) => boolean;
 /**
  * CACHE
  */
+interface Stored {
+    date: number;
+    value: any;
+}
 export declare const cacheValues: import("svelte/store").Writable<{
-    [key: string]: any;
+    [key: string]: Stored;
 }>;
-export declare const handleCache: (key: string, value?: any) => any;
+export declare const handleCache: (key: string, value?: any, ttl?: number) => any;
 /**
  * PREVENT DEFAULT
  */

package/dist/index.js

@@ -75,22 +75,29 @@ export const validateString = (value) => {
 export const validateArray = (value, items = 0) => {
     return value && Array.isArray(value) && value.length > items ? true : false;
 };
-/**
- * CACHE
- */
 export const cacheValues = writable({});
-export const handleCache = (key, value = undefined) => {
+export const handleCache = (key, value = undefined, ttl = 60) => {
     if (!key) {
         return null;
     }
-    const newKey = slugify(key);
-    const cache = get(cacheValues);
-    if (value) {
-        const newValues = cache ? { ...cache, [newKey]: value } : { [newKey]: value };
-        cacheValues.set({ ...newValues });
+    const cache = get(cacheValues), newKey = slugify(key), now = Date.now(), ttlMs = ttl * 1000;
+    if (value !== undefined) {
+        const newValues = {
+            ...cache,
+            [newKey]: { date: now, value }
+        };
+        cacheValues.set(newValues);
     }
     else if (cache?.[newKey]) {
-        return cache[newKey];
+        const cachedItem = cache[newKey];
+        if (now - cachedItem.date < ttlMs) {
+            return cachedItem.value;
+        }
+        else {
+            // Remove expired cache entry
+            const { [newKey]: _, ...rest } = cache;
+            cacheValues.set(rest);
+        }
     }
     return null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuspe/components",
-  "version": "1.7.13",
+  "version": "1.7.15",
   "description": "A reusable SvelteKit component library for form elements, breadcrumbs, prices and images.",
   "keywords": [
     "svelteKit",
@@ -67,7 +67,7 @@
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-svelte": "^3.0.3",
+    "eslint-plugin-svelte": "^3.1.0",
     "eslint": "^9.22.0",
     "globals": "^16.0.0",
     "prettier-plugin-svelte": "^3.3.3",