@tuspe/components 1.6.26

package/README.md

@@ -0,0 +1,203 @@
+# Tuspe SvelteKit Components
+
+[Tuspe Design](https://tuspe.com/en) builds websites and online stores for small and large businesses. This component library includes essential elements for forms, modals, breadcrumbs, and images. It also offers utility functions for price display, VAT calculations, and validations for tables and strings.
+
+## Breadcrumbs
+
+A breadcrumb navigation provide links back to previous pages, and shows the user's current location in a website. The component complies with [Google standards](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb).
+
+```TypeScript
+  interface Breadcrumb {
+    '@type'?: string
+    item: string
+    name: string
+    position?: string
+  }
+
+  interface Props {
+    homeName?: string
+    homeSlug?: string
+    values: Breadcrumb[]
+  }
+```
+
+## Button
+
+Easily replace most buttons in your project with this versatile button component. The `control` value makes it ideal for icons and as a toggler for the mobile menu.
+
+```TypeScript
+  interface Props {
+    ariaControls?: string | undefined
+    ariaExpanded?: boolean | undefined
+    ariaLabel?: string
+    ariaPopup?: 'dialog' | 'menu' | 'listbox' | undefined
+    ball?: boolean
+    borderColor?: 'content' | 'default' | 'primary'
+    borderSize?: 0 | 1 | 2
+    children: Snippet
+    color?: string
+    colorBg?: string
+    control?: boolean
+    disabled?: boolean
+    extraClass?: string
+    fill?: boolean
+    fontWeight?: 'normal' | 'bold'
+    fullWidth?: boolean
+    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent'
+    hoverText?: 'black' | 'primary' | 'secondary' | 'white'
+    href?: string | undefined
+    id?: string
+    isActive?: boolean
+    noHeight?: boolean
+    noPadding?: boolean
+    onclick?: any
+    preload?: 'hover' | 'tap'
+    role?: string
+    target?: '_blank' | '_top' | undefined
+    type?: 'submit'
+    uppercase?: boolean
+    value?: string | number
+  }
+```
+
+## ButtonArrow
+
+Arrow icons for navigation, such as image sliders or content transitions.
+
+```TypeScript
+  interface Props {
+    onclick?: () => any
+    ariaLabel: string
+    color?: string
+    direction: 'left' | 'right'
+  }
+```
+
+## ButtonClose
+
+Close button for modals and other dismissible elements.
+
+```TypeScript
+  interface Props {
+    onclick: () => any
+    color?: string
+  }
+```
+
+## ButtonMenu
+
+A button for toggling the mobile menu, dynamically changing its icon based on the menu's open or closed state.
+
+```TypeScript
+  interface Props {
+    onclick?: () => any
+    ariaControls: string
+    ariaLabel: string
+    color?: 'black' | 'white'
+    extraClass?: string
+    hidden?: boolean
+    open: boolean
+  }
+```
+
+## Image
+
+A versatile image component supporting various aspect ratios and object fit options. Features include optional borders, centering, full-width display, custom classes, and configurable loading behavior.
+
+```TypeScript
+  interface ImageData {
+    alt: string
+    height?: number
+    src: string
+    width?: number
+  }
+
+  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'
+  }
+```
+
+## Input
+
+A flexible `Input` component supporting common input types with basic styling for form fields. It includes optional attributes for labels, placeholders, min/max values, steps, and event handlers but does not perform content validation.
+
+```TypeScript
+  interface Props {
+    onchange?: () => void
+    onclick?: () => void
+    borderColor?: string
+    disabled?: boolean
+    id?: 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
+  }
+```
+
+## Select
+
+A customizable `Select` component for choosing from a list of options. Supports labels, placeholders, required fields, and disabled states. Accepts an array of selectable items and triggers an optional onchange event when the value changes.
+
+```TypeScript
+  interface SelectItem {
+    name: string
+    value: number | string
+  }
+
+  interface Props {
+    onchange?: () => void
+    disabled?: boolean
+    outerClass?: string
+    id?: string
+    label: string
+    placeholder?: string
+    required?: boolean
+    value: string | number
+    values: SelectItem[]
+  }
+```
+
+## Checkbox
+
+Allows users to toggle between checked and unchecked states.
+
+```TypeScript
+  interface Props {
+    children: Snippet
+    onchange?: () => void
+    checked: boolean
+    disabled?: boolean
+    group?: boolean
+    id?: string
+    outerClass?: string
+    value?: string
+  }
+```
+
+## Modal
+
+A simple `Modal` component that displays a popup with customizable content.
+
+```TypeScript
+  interface Props {
+    children: Snippet
+    innerClass?: string
+    open?: boolean
+    outerClass?: string
+    title?: string
+  }
+```

package/dist/Breadcrumbs.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import {page} from '$app/state'
+  import type {Breadcrumb} from './'
+
+  interface Props {
+    homeName?: string
+    homeSlug?: string
+    values: Breadcrumb[]
+  }
+
+  let {homeName = 'Etusivu', homeSlug = '', values}: Props = $props()
+  const origin = page.url.origin + '/'
+
+  let originWithSlug = $state(origin + homeSlug),
+    listItems = $derived<Breadcrumb[]>(
+      Array.isArray(values) && values.length > 0
+        ? [
+            {
+              '@type': 'ListItem',
+              item: originWithSlug,
+              name: homeName,
+              position: '1'
+            },
+            ...values.map((page: Breadcrumb, index: number) => ({
+              '@type': 'ListItem',
+              item: homeSlug ? originWithSlug + '/' + page.item : origin + page.item,
+              name: page.name,
+              position: String(index + 2)
+            }))
+          ]
+        : []
+    ),
+    ldjson = $derived(
+      listItems.length > 0
+        ? `<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":${JSON.stringify(listItems)}}${'<'}/script>`
+        : ''
+    )
+</script>
+
+<svelte:head>
+  {#if ldjson}
+    {@html ldjson}
+  {/if}
+</svelte:head>
+
+{#if Array.isArray(listItems) && listItems.length > 0}
+  <div class="border-bottom truncate">
+    <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">
+          <a href={page.item} class="bc-link" property="item" typeof="WebPage">
+            <span property="name">{page.name}</span>
+          </a>
+          <meta property="position" content={page.position} />
+        </li>
+      {/each}
+    </ol>
+  </div>
+{/if}
+
+<style scoped>
+  #breadcrumb {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  #breadcrumb li {
+    display: inline-block;
+  }
+
+  #breadcrumb li:not(:last-child):after {
+    content: '»';
+    display: inline;
+    font-size: 0.95em;
+    padding: 0 5px;
+  }
+
+  #breadcrumb a:not(:hover) {
+    text-decoration: none;
+  }
+</style>

package/dist/Breadcrumbs.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Breadcrumb } from './';
+interface Props {
+    homeName?: string;
+    homeSlug?: string;
+    values: Breadcrumb[];
+}
+declare const Breadcrumbs: import("svelte").Component<Props, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/Button.svelte

@@ -0,0 +1,266 @@
+<script lang="ts">
+  import {loading} from './'
+  import type {Snippet} from 'svelte'
+
+  interface Props {
+    ariaControls?: string | undefined
+    ariaExpanded?: boolean | undefined
+    ariaLabel?: string
+    ariaPopup?: 'dialog' | 'menu' | 'listbox' | undefined
+    ball?: boolean
+    borderColor?: 'content' | 'default' | 'primary'
+    borderSize?: 0 | 1 | 2
+    children: Snippet
+    color?: string
+    colorBg?: string
+    control?: boolean
+    disabled?: boolean
+    extraClass?: string
+    fill?: boolean
+    fontWeight?: 'normal' | 'bold'
+    fullWidth?: boolean
+    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent'
+    hoverText?: 'black' | 'primary' | 'secondary' | 'white'
+    href?: string | undefined
+    id?: string
+    isActive?: boolean
+    noHeight?: boolean
+    noPadding?: boolean
+    onclick?: any
+    preload?: 'hover' | 'tap'
+    role?: string
+    target?: '_blank' | '_top' | undefined
+    type?: 'submit'
+    uppercase?: boolean
+    value?: string | number
+  }
+
+  let {
+    ariaControls,
+    ariaExpanded,
+    ariaLabel,
+    ariaPopup,
+    ball,
+    borderColor = 'content',
+    borderSize = 0,
+    children,
+    color = 'white',
+    colorBg = 'primary',
+    control,
+    disabled,
+    extraClass,
+    fill,
+    fontWeight = 'bold',
+    fullWidth,
+    hover = 'secondary',
+    hoverText = 'white',
+    href,
+    id,
+    isActive = false,
+    noHeight,
+    noPadding,
+    onclick = undefined,
+    preload,
+    role,
+    target,
+    type,
+    uppercase = true,
+    value
+  }: Props = $props()
+
+  let classes = $state('btn text-' + color)
+
+  if (control) {
+    classes += ' control'
+  } else {
+    classes += ' bg-' + colorBg
+  }
+  if (ball) {
+    classes += ' radius-full'
+  }
+  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 (isActive) {
+    classes += ' active'
+  }
+  if (noHeight) {
+    classes += ' no-height'
+  }
+  if (noPadding) {
+    classes += ' no-padding'
+  }
+  if (uppercase) {
+    classes += ' uppercase'
+  }
+</script>
+
+{#if href}
+  <a {href} class={classes} {target} data-sveltekit-preload-data={preload} rel="nofollow noopener">
+    {@render children?.()}
+  </a>
+{:else if control}
+  <button
+    {id}
+    {onclick}
+    {role}
+    {value}
+    aria-controls={ariaControls}
+    aria-expanded={ariaExpanded}
+    aria-haspopup={ariaPopup}
+    aria-label={ariaLabel}
+    class={classes}
+    disabled={disabled || $loading}
+  >
+    {@render children?.()}
+  </button>
+{:else}
+  <button {onclick} class={classes} {disabled} {type}>
+    {@render children?.()}
+  </button>
+{/if}
+
+<style scoped>
+  a {
+    text-decoration: none;
+  }
+  .bg-primary:not(:hover),
+  .hover-primary:hover {
+    background-color: var(--color-primary);
+  }
+  .bg-secondary:not(:hover),
+  .hover-secondary:hover {
+    background-color: var(--color-secondary);
+  }
+  .bg-success:not(:hover),
+  .hover-success:hover {
+    background-color: green;
+  }
+  .bg-danger:not(:hover),
+  .hover-danger:hover {
+    background-color: darkred;
+  }
+  .bg-black:not(:hover),
+  .hover-black:hover {
+    background-color: #000;
+  }
+  .border-solid {
+    border-style: solid;
+  }
+  .border-1 {
+    border-width: 1px;
+  }
+  .border-2 {
+    border-width: 2px;
+  }
+  .border-content {
+    border-color: var(--color-content);
+  }
+  .border-default {
+    border-color: var(--color-border);
+  }
+  .border-primary {
+    border-color: var(--color-primary);
+  }
+  .btn {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+  }
+  .btn:not(.border-solid) {
+    border: 0;
+  }
+  .btn:not(.fill):not(.no-height) {
+    height: 48px;
+  }
+  .btn:not(:disabled) {
+    cursor: pointer;
+  }
+  .btn:not(.control) {
+    font-size: 1rem;
+  }
+  .btn:not(.control):not(.flll):not(.no-padding):not(.radius-full) {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+  .btn:not(.radius-full) {
+    border-radius: 0.375rem;
+  }
+  .btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  .control {
+    border: 0;
+  }
+  .control,
+  .hover-transparent:hover {
+    background-color: transparent;
+  }
+  .control,
+  .fill,
+  .radius-full {
+    padding: 0;
+  }
+  .control:not(.fill) {
+    width: 48px;
+  }
+  .fill {
+    height: 100%;
+    width: 100%;
+  }
+  .font-400 {
+    font-weight: 400;
+  }
+  .font-700 {
+    font-weight: 700;
+  }
+  .hover-text-black:hover,
+  .text-black {
+    color: #000;
+  }
+  .hover-text-primary:hover,
+  .text-primary {
+    color: var(--color-primary);
+  }
+  .hover-text-content:hover,
+  .text-content {
+    color: var(--color-content);
+  }
+  .hover-black:hover,
+  .hover-primary:hover,
+  .hover-success:hover,
+  .hover-text-white:hover,
+  .text-white {
+    color: #fff;
+  }
+  .hover-text-secondary:hover,
+  .text-secondary {
+    color: var(--color-secondary);
+  }
+  .radius-full {
+    border-radius: 50%;
+    overflow: hidden;
+  }
+  .w-full {
+    width: 100%;
+  }
+</style>

package/dist/Button.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    ariaControls?: string | undefined;
+    ariaExpanded?: boolean | undefined;
+    ariaLabel?: string;
+    ariaPopup?: 'dialog' | 'menu' | 'listbox' | undefined;
+    ball?: boolean;
+    borderColor?: 'content' | 'default' | 'primary';
+    borderSize?: 0 | 1 | 2;
+    children: Snippet;
+    color?: string;
+    colorBg?: string;
+    control?: boolean;
+    disabled?: boolean;
+    extraClass?: string;
+    fill?: boolean;
+    fontWeight?: 'normal' | 'bold';
+    fullWidth?: boolean;
+    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent';
+    hoverText?: 'black' | 'primary' | 'secondary' | 'white';
+    href?: string | undefined;
+    id?: string;
+    isActive?: boolean;
+    noHeight?: boolean;
+    noPadding?: boolean;
+    onclick?: any;
+    preload?: 'hover' | 'tap';
+    role?: string;
+    target?: '_blank' | '_top' | undefined;
+    type?: 'submit';
+    uppercase?: boolean;
+    value?: string | number;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/ButtonArrow.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import Button from './Button.svelte'
+  interface Props {
+    onclick?: () => any
+    ariaLabel: string
+    color?: string
+    direction: 'left' | 'right'
+  }
+  let {onclick, ariaLabel, color = 'black', direction}: Props = $props()
+</script>
+
+<Button {color} {onclick} {ariaLabel} control>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <title>Arrow {direction}</title>
+    {#if direction === 'left'}
+      <path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
+    {:else}
+      <path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z" />
+    {/if}
+  </svg>
+</Button>

package/dist/ButtonArrow.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    onclick?: () => any;
+    ariaLabel: string;
+    color?: string;
+    direction: 'left' | 'right';
+}
+declare const ButtonArrow: import("svelte").Component<Props, {}, "">;
+type ButtonArrow = ReturnType<typeof ButtonArrow>;
+export default ButtonArrow;

package/dist/ButtonClose.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Button from './Button.svelte'
+  let {color = 'black', onclick} = $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>
+      <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"
+      />
+    </svg>
+  </Button>
+</div>
+
+<style scoped>
+  .close-button {
+    height: 48px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 48px;
+  }
+</style>

package/dist/ButtonClose.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const ButtonClose: import("svelte").Component<{
+    color?: string;
+    onclick: any;
+}, {}, "">;
+type ButtonClose = ReturnType<typeof ButtonClose>;
+export default ButtonClose;