@tuspe/components 1.6.26

package/dist/ButtonMenu.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import Button from './Button.svelte'
+  interface Props {
+    onclick?: () => any
+    ariaControls: string
+    ariaLabel: string
+    color?: 'black' | 'white'
+    extraClass?: string
+    hidden?: boolean
+    open: boolean
+  }
+  let {ariaControls, ariaLabel, color = 'white', extraClass, hidden = false, open = $bindable()}: Props = $props()
+  const handleOpen = () => {
+    open = !open
+  }
+</script>
+
+<div id="menu-button" class={extraClass} class:hidden>
+  <Button onclick={handleOpen} {ariaControls} ariaPopup="menu" ariaExpanded={open} {ariaLabel} {color} control fill>
+    <svg
+      fill={color}
+      clip-rule="evenodd"
+      fill-rule="evenodd"
+      stroke-linejoin="round"
+      stroke-miterlimit="2"
+      height="32"
+      width="32"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>{open ? 'Close' : 'Open'} menu</title>
+      {#if !open}
+        <path
+          d="m22 16.75c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75z"
+          fill-rule="nonzero"
+        />
+      {:else}
+        <path
+          d="m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z"
+        />
+      {/if}
+    </svg>
+  </Button>
+</div>
+
+<style scoped>
+  #menu-button {
+    height: 48px;
+    width: 48px;
+  }
+</style>

package/dist/ButtonMenu.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    onclick?: () => any;
+    ariaControls: string;
+    ariaLabel: string;
+    color?: 'black' | 'white';
+    extraClass?: string;
+    hidden?: boolean;
+    open: boolean;
+}
+declare const ButtonMenu: import("svelte").Component<Props, {}, "open">;
+type ButtonMenu = ReturnType<typeof ButtonMenu>;
+export default ButtonMenu;

package/dist/Checkbox.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import {loading} from './'
+  import type {Snippet} from 'svelte'
+
+  interface Props {
+    children: Snippet
+    onchange?: () => void
+    checked?: boolean
+    disabled?: boolean
+    id?: string
+    outerClass?: string
+    value?: string
+  }
+
+  let {children, onchange, checked = $bindable(false), disabled, id, outerClass, value}: Props = $props()
+</script>
+
+<label class={outerClass}>
+  <input bind:checked disabled={disabled || $loading} {id} {onchange} type="checkbox" {value} />
+  <span>{@render children?.()}</span>
+</label>
+
+<style scoped>
+  input {
+    accent-color: var(--color-primary);
+    border: 1px solid var(--color-border);
+    height: 20px;
+    margin-right: 10px;
+    outline: none;
+    vertical-align: middle;
+    width: 20px;
+  }
+
+  input:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  input,
+  label {
+    cursor: pointer;
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    line-height: 1.25;
+    font-size: 1rem;
+  }
+
+  span {
+    margin-top: 1px;
+  }
+</style>

package/dist/Checkbox.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+    onchange?: () => void;
+    checked?: boolean;
+    disabled?: boolean;
+    id?: string;
+    outerClass?: string;
+    value?: string;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/Image.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import type {ImageData} from './'
+
+  interface Props {
+    aspect?: '3:4' | '4:3' | 'square' | 'video'
+    ball?: boolean
+    border?: boolean
+    center?: boolean
+    extraClasses?: string
+    fullWidth?: boolean
+    image: ImageData
+    loading?: 'eager' | 'lazy'
+    objectFit?: 'contain' | 'cover'
+  }
+
+  let {aspect, ball = false, border, center = false, extraClasses, fullWidth, image, loading = 'lazy', objectFit}: Props = $props()
+
+  let classes = $state('')
+  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
+  }
+</script>
+
+{#if image?.src}
+  <img alt={image.alt} class={classes} decoding="async" height={image.height} {loading} src={image.src} width={image.width} />
+{/if}
+
+<style scoped>
+  img {
+    display: inline-block;
+  }
+  img:not(.cover) {
+    height: auto;
+    max-width: 100%;
+  }
+  .aspect-4\:3 {
+    aspect-ratio: 4 / 3;
+  }
+  .aspect-3\:4 {
+    aspect-ratio: 3 / 4;
+  }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
+  .aspect-video {
+    aspect-ratio: 16 / 9;
+  }
+  .border-full {
+    border: 1px solid var(--color-content);
+  }
+  .contain {
+    object-fit: contain;
+    max-height: 100%;
+  }
+  .cover {
+    object-fit: cover;
+    object-position: top;
+  }
+  .cover,
+  .full:not(.contain) {
+    width: 100%;
+  }
+  .mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .radius-full {
+    border-radius: 50%;
+    overflow: hidden;
+  }
+</style>

package/dist/Image.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ImageData } from './';
+interface Props {
+    aspect?: '3:4' | '4:3' | 'square' | 'video';
+    ball?: boolean;
+    border?: boolean;
+    center?: boolean;
+    extraClasses?: string;
+    fullWidth?: boolean;
+    image: ImageData;
+    loading?: 'eager' | 'lazy';
+    objectFit?: 'contain' | 'cover';
+}
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/Input.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import {loading} from './'
+
+  interface Props {
+    onchange?: () => void
+    onclick?: () => void
+    borderColor?: 'content' | 'default' | 'primary' | 'none'
+    bgColor?: 'transparent' | 'white' | 'none'
+    disabled?: boolean
+    id?: string
+    inputClass?: string
+    label: string
+    max?: number | string
+    min?: number | string
+    outerClass?: string
+    placeholder?: string
+    required?: boolean
+    step?: number
+    type?: 'email' | 'date' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url'
+    value: string | number
+  }
+
+  let {
+    bgColor = 'transparent',
+    borderColor = 'default',
+    disabled,
+    id,
+    inputClass,
+    label,
+    max,
+    min,
+    onchange,
+    outerClass,
+    placeholder,
+    required = false,
+    step,
+    type = 'text',
+    value = $bindable()
+  }: Props = $props()
+
+  let isDisabled = $state(disabled || $loading)
+
+  let classes = $state('')
+  if (inputClass) {
+    classes = inputClass
+  }
+  if (bgColor && bgColor !== 'none') {
+    classes += ` bg-${bgColor}`
+  }
+  if (borderColor && borderColor !== 'none') {
+    classes += ` border-color-${borderColor}`
+  }
+</script>
+
+<label class={outerClass}>
+  {label}{#if required}<sup>*</sup>{/if}
+
+  {#if type === 'textarea'}
+    <textarea bind:value class={classes} disabled={isDisabled} {id} maxlength={max ? Number(max) : undefined} {required} {placeholder} rows={4}
+    ></textarea>
+  {:else if ['date', 'number'].includes(type)}
+    <input bind:value class={classes} disabled={isDisabled} lang="fi-FI" {max} {min} {onchange} {required} {step} {type} {placeholder} />
+  {:else}
+    <input
+      bind:value
+      {id}
+      {placeholder}
+      {required}
+      {type}
+      class={classes}
+      disabled={isDisabled}
+      maxlength={max ? Number(max) : undefined}
+      minlength={min ? Number(min) : undefined}
+      onkeyup={onchange}
+    />
+    {#if type === 'search'}
+      <svg
+        clip-rule="evenodd"
+        fill-rule="evenodd"
+        stroke-linejoin="round"
+        stroke-miterlimit="2"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        height="20"
+        width="20"
+      >
+        <path
+          d="m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z"
+          fill-rule="nonzero"
+        />
+      </svg>
+    {/if}
+  {/if}
+</label>
+
+<style scoped>
+  input {
+    height: 48px;
+  }
+
+  input,
+  textarea {
+    border-radius: 0.375rem;
+    border-style: solid;
+    border-width: 1px;
+    color: var(--color-content);
+    display: block;
+    font-size: 1rem;
+    margin-top: 0.25rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  input,
+  label,
+  textarea {
+    width: 100%;
+  }
+
+  input:disabled,
+  textarea:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  label {
+    display: inline-block;
+    position: relative;
+  }
+
+  label.filter {
+    font-size: var(--text-sm);
+  }
+
+  label svg {
+    bottom: 15px;
+    position: absolute;
+    right: 8px;
+  }
+
+  sup {
+    color: darkred;
+  }
+
+  textarea {
+    height: 150px;
+    padding-bottom: 0.25rem;
+    padding-top: 0.25rem;
+  }
+
+  .bg-transparent {
+    background-color: transparent;
+  }
+
+  .bg-white {
+    background-color: white;
+  }
+
+  .border-color-default {
+    border-color: var(--color-border);
+  }
+
+  .border-color-primary {
+    border-color: var(--color-primary);
+  }
+
+  .border-color-content {
+    border-color: var(--color-content);
+  }
+</style>

package/dist/Input.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    onchange?: () => void;
+    onclick?: () => void;
+    borderColor?: 'content' | 'default' | 'primary' | 'none';
+    bgColor?: 'transparent' | 'white' | 'none';
+    disabled?: boolean;
+    id?: string;
+    inputClass?: string;
+    label: string;
+    max?: number | string;
+    min?: number | string;
+    outerClass?: string;
+    placeholder?: string;
+    required?: boolean;
+    step?: number;
+    type?: 'email' | 'date' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';
+    value: string | number;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/Modal.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type {Snippet} from 'svelte'
+  import ButtonClose from './ButtonClose.svelte'
+  interface Props {
+    children: Snippet
+    innerClass?: string
+    open?: boolean
+    outerClass?: string
+    title?: string
+  }
+  let {children, innerClass, open = $bindable(), outerClass, title}: Props = $props()
+  const handleClose = () => {
+    open = false
+  }
+</script>
+
+<div id="modal" class:hidden={!open}>
+  <div id="modal-content" class={outerClass}>
+    <header>
+      {#if title}
+        <h2>{title}</h2>
+      {/if}
+      <ButtonClose color="black" onclick={handleClose} />
+    </header>
+    <div id="modal-body" class={innerClass}>
+      {@render children?.()}
+    </div>
+  </div>
+</div>
+
+<style scoped>
+  #modal {
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.6);
+    height: 100vh;
+    justify-content: center;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    z-index: 200;
+  }
+  #modal:not(.hidden) {
+    display: flex;
+  }
+  #modal.hidden {
+    display: none;
+    visibility: hidden;
+  }
+  #modal-content {
+    background-color: #fff;
+    border-radius: 1rem;
+    border: 2px solid var(--color-primary);
+    box-shadow: var(--shadow-md);
+    margin-left: auto;
+    margin-right: auto;
+    max-height: 85vh;
+    max-width: 95vw;
+    overflow: hidden;
+    overscroll-behavior: contain;
+    position: relative;
+  }
+  #modal-body {
+    max-height: 45vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 1rem;
+  }
+  header {
+    border-bottom: 1px solid var(--color-border);
+    padding: 1rem;
+  }
+  h2 {
+    font-size: 1.6rem;
+    line-height: 1;
+    margin: 0;
+  }
+</style>

package/dist/Modal.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+    innerClass?: string;
+    open?: boolean;
+    outerClass?: string;
+    title?: string;
+}
+declare const Modal: import("svelte").Component<Props, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/Select.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import {loading, type SelectItem} from './'
+
+  interface Props {
+    onchange?: () => void
+    disabled?: boolean
+    outerClass?: string
+    id?: string
+    label: string
+    placeholder?: string
+    required?: boolean
+    value: string | number
+    values: SelectItem[]
+  }
+
+  let {onchange, disabled, outerClass, id, label, 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}>
+    {#each values as item}
+      <option value={item.value}>{item.name}</option>
+    {/each}
+  </select>
+</label>
+
+<style scoped>
+  select {
+    background-color: transparent;
+    border-radius: 0.375rem;
+    border: 1px solid var(--color-border);
+    color: var(--color-content);
+    font-size: 1rem;
+    height: 48px;
+    margin-top: 0.25rem;
+    padding: 0 0.5rem;
+    width: 100%;
+  }
+
+  select:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  label,
+  select {
+    display: block;
+  }
+
+  label.filter {
+    position: relative;
+    font-size: var(--text-sm);
+  }
+
+  sup {
+    color: darkred;
+  }
+</style>

package/dist/Select.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type SelectItem } from './';
+interface Props {
+    onchange?: () => void;
+    disabled?: boolean;
+    outerClass?: string;
+    id?: string;
+    label: string;
+    placeholder?: string;
+    required?: boolean;
+    value: string | number;
+    values: SelectItem[];
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+import Breadcrumbs from './Breadcrumbs.svelte';
+import Button from './Button.svelte';
+import ButtonArrow from './ButtonArrow.svelte';
+import ButtonClose from './ButtonClose.svelte';
+import ButtonMenu from './ButtonMenu.svelte';
+import Checkbox from './Checkbox.svelte';
+import Image from './Image.svelte';
+import Input from './Input.svelte';
+import Modal from './Modal.svelte';
+import Select from './Select.svelte';
+export { Breadcrumbs, Button, ButtonArrow, ButtonClose, ButtonMenu, Checkbox, Image, Input, Modal, Select };
+export interface Breadcrumb {
+    '@type'?: string;
+    item: string;
+    name: string;
+    position?: string;
+}
+export interface ImageData {
+    alt: string;
+    height: number;
+    src: string;
+    width: number;
+}
+export interface SelectItem {
+    name: string;
+    value: number | string;
+}
+export declare const loading: import("svelte/store").Writable<number>;
+/**
+ * PRICES AND NUMBERS
+ */
+export declare const formatPrice: (value: number | string, comma?: boolean, currency?: string) => string;
+export declare const fixNumber: (value: number | string) => number;
+export declare const calculateTax: (total: number, vatPercentage?: number) => number;
+export declare const calculatePreTax: (total: number, vatPercentage?: number) => number;
+/**
+ * STRING VALIDATIONS
+ */
+export declare const slugify: (value: string) => string;
+export declare const validateSlug: (value: string) => boolean;
+export declare const validateEmail: (email: string) => boolean;
+export declare const validateString: (value: string) => boolean;
+/**
+ * ARRAY VALIDATIONS
+ */
+export declare const validateArray: (value: any, items?: number) => boolean;
+/**
+ * CACHE
+ */
+export declare const cacheValues: import("svelte/store").Writable<{
+    [key: string]: any;
+}>;
+export declare const handleCache: (key: string, value?: any) => any;
+/**
+ * PREVENT DEFAULT
+ */
+export declare const preventDefault: (fn: Function) => (this: any, event: any) => void;