@tuspe/components 1.7.3 → 1.7.5

package/README.md

@@ -79,8 +79,11 @@ Close button for modals and other dismissible elements.
 
 ```TypeScript
   interface Props {
-    onclick: () => any
+    ariaLabel?: string
     color?: string
+    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent'
+    hoverText?: 'black' | 'primary' | 'secondary' | 'white'
+    onclick: () => any
   }
 ```
 
@@ -113,6 +116,7 @@ A versatile image component supporting various aspect ratios and object fit opti
   }
 
   interface Props {
+    ariaHidden?: boolean
     aspect?: '3:4' | '4:3' | 'square' | 'video'
     ball?: boolean
     border?: boolean
@@ -195,10 +199,15 @@ A simple `Modal` component that displays a popup with customizable content.
 ```TypeScript
   interface Props {
     children: Snippet
+    buttonAriaLabel?: string
+    colorButton?: string
+    colorBg?: string
+    headerClass?: string
     innerClass?: string
     open?: boolean
     outerClass?: string
     title?: string
+    titleClass?: string
   }
 ```
 
@@ -224,7 +233,7 @@ Formats a number or string as a price with two decimal places, spaces as thousan
 
 Retrieves or stores values in the cache; keys are slugified, and values are updated or returned if they exist. This ensures that `+page.ts` and other pages only retrieve data from the backend once and that the WordPress frontend uses the product list data on the product page without retrieving the same page again.
 
-## preventDefault
+### preventDefault
 
 Previously, Svelte handled form submission without reloading the page. However, the `preventDefault` function is no longer supported by Svelte v5, so this function handles form submission without loading the page.
 

package/dist/ButtonClose.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
   import Button from './Button.svelte'
-  let {color = 'black', onclick} = $props()
+
+  interface Props {
+    ariaLabel?: string
+    color?: string
+    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent'
+    hoverText?: 'black' | 'primary' | 'secondary' | 'white'
+    onclick?: any
+  }
+
+  let {ariaLabel, color = 'white', hover = 'transparent', onclick}: Props = $props()
 </script>
 
 <div class="close-button">
-  <Button {color} {onclick} control fill>
-    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
-      <title>Sulje ikkuna</title>
+  <Button {ariaLabel} {color} {onclick} control fill {hover}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true">
+      <title>Close</title>
       <path
         d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5 15.538l-3.592-3.548 3.546-3.587-1.416-1.403-3.545 3.589-3.588-3.543-1.405 1.405 3.593 3.552-3.547 3.592 1.405 1.405 3.555-3.596 3.591 3.55 1.403-1.416z"
       />

package/dist/ButtonClose.svelte.d.ts

@@ -1,6 +1,10 @@
-declare const ButtonClose: import("svelte").Component<{
+interface Props {
+    ariaLabel?: string;
     color?: string;
-    onclick: any;
-}, {}, "">;
+    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent';
+    hoverText?: 'black' | 'primary' | 'secondary' | 'white';
+    onclick?: any;
+}
+declare const ButtonClose: import("svelte").Component<Props, {}, "">;
 type ButtonClose = ReturnType<typeof ButtonClose>;
 export default ButtonClose;

package/dist/Image.svelte

@@ -2,6 +2,7 @@
   import type {ImageData} from './'
 
   interface Props {
+    ariaHidden?: boolean
     aspect?: '3:4' | '4:3' | 'square' | 'video'
     ball?: boolean
     border?: boolean
@@ -13,7 +14,7 @@
     objectFit?: 'contain' | 'cover'
   }
 
-  let {aspect, ball = false, border, center = false, extraClasses, fullWidth, image, loading = 'lazy', objectFit}: Props = $props()
+  let {ariaHidden, aspect, ball = false, border, center = false, extraClasses, fullWidth, image, loading = 'lazy', objectFit}: Props = $props()
 
   let classes = $state('')
   if (aspect) {
@@ -40,7 +41,16 @@
 </script>
 
 {#if image?.src}
-  <img alt={image.alt} class={classes} decoding="async" height={image.height} {loading} src={image.src} width={image.width} />
+  <img
+    {loading}
+    alt={image.alt}
+    aria-hidden={ariaHidden}
+    class={classes}
+    decoding="async"
+    height={image.height}
+    src={image.src}
+    width={image.width}
+  />
 {/if}
 
 <style scoped>

package/dist/Image.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { ImageData } from './';
 interface Props {
+    ariaHidden?: boolean;
     aspect?: '3:4' | '4:3' | 'square' | 'video';
     ball?: boolean;
     border?: boolean;

package/dist/Modal.svelte

@@ -3,24 +3,45 @@
   import ButtonClose from './ButtonClose.svelte'
   interface Props {
     children: Snippet
+    buttonAriaLabel?: string
+    colorButton?: string
+    colorBg?: string
+    headerClass?: string
     innerClass?: string
     open?: boolean
     outerClass?: string
     title?: string
+    titleClass?: string
   }
-  let {children, innerClass, open = $bindable(), outerClass, title}: Props = $props()
+  let {
+    children,
+    buttonAriaLabel,
+    colorButton = 'white',
+    colorBg = 'white',
+    headerClass = 'bg-primary',
+    innerClass,
+    open = $bindable(),
+    outerClass,
+    title,
+    titleClass
+  }: Props = $props()
   const handleClose = () => {
     open = false
   }
+
+  let contentClass = $state('bg-' + colorBg)
+  if (outerClass) {
+    contentClass += ' ' + outerClass
+  }
 </script>
 
 <div id="modal" class:hidden={!open}>
-  <div id="modal-content" class={outerClass}>
-    <header>
+  <div id="modal-content" class={contentClass} aria-live="polite">
+    <header class={headerClass}>
       {#if title}
-        <h2>{title}</h2>
+        <h2 class={titleClass}>{title}</h2>
       {/if}
-      <ButtonClose color="black" onclick={handleClose} />
+      <ButtonClose ariaLabel={buttonAriaLabel} onclick={handleClose} color={colorButton} hover="transparent" />
     </header>
     <div id="modal-body" class={innerClass}>
       {@render children?.()}
@@ -47,21 +68,22 @@
     display: none;
     visibility: hidden;
   }
+  #modal header.bg-primary {
+    background-color: var(--color-primary);
+  }
   #modal-content {
-    background-color: #fff;
     border-radius: 1rem;
     border: 2px solid var(--color-primary);
-    box-shadow: var(--shadow-md);
+    color: var(--color-content);
     margin-left: auto;
     margin-right: auto;
-    max-height: 85vh;
     max-width: 95vw;
     overflow: hidden;
     overscroll-behavior: contain;
     position: relative;
   }
   #modal-body {
-    max-height: 45vh;
+    max-height: 70vh;
     overflow-x: hidden;
     overflow-y: auto;
     padding: 1rem;

package/dist/Modal.svelte.d.ts

@@ -1,10 +1,15 @@
 import type { Snippet } from 'svelte';
 interface Props {
     children: Snippet;
+    buttonAriaLabel?: string;
+    colorButton?: string;
+    colorBg?: string;
+    headerClass?: string;
     innerClass?: string;
     open?: boolean;
     outerClass?: string;
     title?: string;
+    titleClass?: string;
 }
 declare const Modal: import("svelte").Component<Props, {}, "open">;
 type Modal = ReturnType<typeof Modal>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuspe/components",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "description": "A reusable SvelteKit component library for form elements, breadcrumbs, prices and images.",
   "keywords": [
     "svelteKit",
@@ -14,7 +14,8 @@
     "input",
     "checkbox",
     "select",
-    "preventDefault"
+    "preventDefault",
+    "validation"
   ],
   "homepage": "https://github.com/TuspeDesign/svelte-components",
   "license": "MIT",