@likable-hair/svelte 0.0.8 → 0.0.9

package/buttons/Button.svelte

@@ -13,6 +13,7 @@ $: cssVariables = Object.entries({
     return `${css}${key}: ${value};`;
 }, '');
 import Icon from '../media/Icon.svelte';
+import '$lib/common/tailwind.css';
 </script>
 
 <div 

package/buttons/Button.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         type?: 'default' | 'text' | 'icon';

package/common/Card.svelte

@@ -1,31 +1,26 @@
-<script >export let rounded = true, outlined = false;
-$: cssVariables = Object.entries({}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
+<script >export let outlined = false, maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = 'fit-content', height = undefined, padding = "5px", borderRadius = "5px", backgroundColor = "rgb(252, 252, 252)", color = undefined, borderColor = undefined, borderWidth = undefined, style = "";
 import '$lib/common/tailwind.css';
 </script>
 
 <style>
-  .card-container {
-    height: var(--height, fit-content);
-    width: var(--width, fit-content);
-    max-height: var(--max-height);
-    max-width: var(--max-width);
-    min-height: var(--min-height);
-    min-width: var(--min-width);
-    padding: var(--padding, 5px);
-    background-color: var(--background-color, rgb(252, 252, 252));
-    color: var(--color);
-    border-color: var(--border-color);
-  }
 </style>
 
-<div 
-  class="card-container flex flex-col shadow-lg" 
-  style={cssVariables}
+<div
+  style:width={width}
+  style:max-width={maxWidth}
+  style:min-width={minWidth}
+  style:height={height}
+  style:max-height={maxHeight}
+  style:min-height={minHeight}
+  style:padding={padding}
+  style:border-radius={borderRadius}
+  style:background-color={backgroundColor}
+  style:color={color}
+  style:border-color={borderColor}
+  style:border-width={borderWidth}
+  style={style}
+  class="flex flex-col shadow-lg" 
   class:border-solid={outlined}
-  class:rounded-md={rounded}
 >
   <div class="header flex-none">
     <slot name="header"></slot>

package/common/Card.svelte.d.ts

@@ -2,8 +2,20 @@ import { SvelteComponentTyped } from "svelte";
 import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
-        rounded?: boolean;
         outlined?: boolean;
+        maxWidth?: string;
+        maxHeight?: string;
+        minWidth?: string;
+        minHeight?: string;
+        width?: string;
+        height?: string;
+        padding?: string;
+        borderRadius?: string;
+        backgroundColor?: string;
+        color?: string;
+        borderColor?: string;
+        borderWidth?: string;
+        style?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/common/Gesture.svelte

@@ -0,0 +1,65 @@
+<script >import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+// TODO export the handler into a service to avoid mount 3 listeners for every component instance
+export let timeThreshold = 200, diagonalThreshold = 100;
+let lastTouch, startTouch, endTouch, startTime, endTime;
+function handleTouchStart(event) {
+    lastTouch = event.touches[0];
+    startTouch = event.touches[0];
+    startTime = new Date();
+}
+function handleTouchEnd(event) {
+    endTouch = event.changedTouches[0];
+    endTime = new Date();
+    let timeDifference = endTime.getTime() - startTime.getTime();
+    if (timeDifference < timeThreshold) {
+        let direction;
+        let xDifference = endTouch.clientX - startTouch.clientX;
+        let yDifference = endTouch.clientY - startTouch.clientY;
+        // check if is diagonal swipe
+        if (Math.abs(Math.abs(xDifference) - Math.abs(yDifference)) < diagonalThreshold)
+            return;
+        if (Math.abs(xDifference) > Math.abs(yDifference)) {
+            // horizontal
+            if (xDifference > 0) {
+                direction = 'right';
+            }
+            else {
+                direction = 'left';
+            }
+        }
+        else {
+            // vertical
+            if (yDifference > 0) {
+                direction = 'down';
+            }
+            else {
+                direction = 'up';
+            }
+        }
+        dispatch('swipe-' + direction, {
+            direction: direction,
+            timeDifference: timeDifference,
+            xDifference: xDifference,
+            yDifference: yDifference
+        });
+        dispatch('swipe', {
+            direction: direction,
+            timeDifference: timeDifference,
+            xDifference: xDifference,
+            yDifference: yDifference
+        });
+    }
+}
+function handleTouchMove(event) {
+    let currentTouch = event.changedTouches[0];
+    lastTouch = currentTouch;
+}
+</script>
+
+
+<svelte:window 
+  on:touchstart="{handleTouchStart}"
+  on:touchend="{handleTouchEnd}"
+  on:touchmove="{handleTouchMove}"
+/>

package/common/Gesture.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        timeThreshold?: number;
+        diagonalThreshold?: number;
+    };
+    events: {
+        swipe: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type GestureProps = typeof __propDef.props;
+export declare type GestureEvents = typeof __propDef.events;
+export declare type GestureSlots = typeof __propDef.slots;
+export default class Gesture extends SvelteComponentTyped<GestureProps, GestureEvents, GestureSlots> {
+}
+export {};

package/common/IntersectionObserver.svelte.d.ts

@@ -2,11 +2,11 @@
 /** @typedef {typeof __propDef.events}  IntersectionObserverEvents */
 /** @typedef {typeof __propDef.slots}  IntersectionObserverSlots */
 export default class IntersectionObserver extends SvelteComponentTyped<{
+    left?: number;
+    right?: number;
     once?: boolean;
     top?: number;
     bottom?: number;
-    left?: number;
-    right?: number;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -21,11 +21,11 @@ export type IntersectionObserverSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        left?: number;
+        right?: number;
         once?: boolean;
         top?: number;
         bottom?: number;
-        left?: number;
-        right?: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dates/Calendar.svelte

@@ -1,4 +1,4 @@
-<script >import './utils';
+<script >import { getDateRows } from './utils';
 import '$lib/common/tailwind.css';
 </script>
 

package/dates/utils.d.ts

@@ -9,3 +9,6 @@ export declare type MonthStats = {
     days: number;
 };
 export declare const getDateRows: (monthIndex: number, year: number) => number[];
+declare type dateFormat = 'extended';
+export declare const dateToString: (date: Date, format?: dateFormat) => string;
+export {};

package/dates/utils.js

@@ -57,3 +57,13 @@ export const getDateRows = (monthIndex, year) => {
     }
     return rows.filter(el => !Array.isArray(el));
 };
+export const dateToString = (date, format = 'extended') => {
+    let stringDate = "";
+    if (format == 'extended') {
+        const day = date.getDate();
+        const month = getMonthName(date.getMonth());
+        const year = date.getFullYear();
+        stringDate = `${day} ${month} ${year}`;
+    }
+    return stringDate;
+};

package/forms/{Textfield.svelte.d.ts → TextField.svelte.d.ts}

@@ -21,9 +21,9 @@ declare const __propDef: {
         'append-inner': {};
     };
 };
-export declare type TextfieldProps = typeof __propDef.props;
-export declare type TextfieldEvents = typeof __propDef.events;
-export declare type TextfieldSlots = typeof __propDef.slots;
-export default class Textfield extends SvelteComponentTyped<TextfieldProps, TextfieldEvents, TextfieldSlots> {
+export declare type TextFieldProps = typeof __propDef.props;
+export declare type TextFieldEvents = typeof __propDef.events;
+export declare type TextFieldSlots = typeof __propDef.slots;
+export default class TextField extends SvelteComponentTyped<TextFieldProps, TextFieldEvents, TextFieldSlots> {
 }
 export {};

package/index.d.ts

@@ -1,2 +1,22 @@
 export { default as Button } from './buttons/Button.svelte';
+export { default as Card } from './common/Card.svelte';
+export { default as Gesture } from './common/Gesture.svelte';
+export { default as IntersectionObserver } from './common/IntersectionObserver.svelte';
+export { default as TextField } from './forms/TextField.svelte';
+export { default as Skeleton } from './forms/Skeleton.svelte';
+export { default as AttachmentDownloader } from './forms/AttachmentDownloader.svelte';
+export { default as Avatar } from './forms/Avatar.svelte';
+export { default as Carousel } from './forms/Carousel.svelte';
+export { default as DescriptiveAvatar } from './forms/DescriptiveAvatar.svelte';
+export { default as Icon } from './forms/Icon.svelte';
+export { default as Image } from './forms/Image.svelte';
+export { default as ImageGrid } from './forms/ImageGrid.svelte';
+export { default as BreadCrumb } from './navigation/BreadCrumb.svelte';
 export { default as HeaderMenu } from './navigation/HeaderMenu.svelte';
+export { default as Navigator } from './navigation/Navigator.svelte';
+export { default as TabSwitcher } from './navigation/TabSwitcher.svelte';
+export { default as ProgressBar } from './navigation/ProgressBar.svelte';
+export { default as ProductCard } from './shop/ProductCard.svelte';
+export { default as ProductGrid } from './shop/ProductCard.svelte';
+export { default as ScollTimeLine } from './shop/ScrollTimeLine.svelte';
+export { default as SimpleTimeLine } from './shop/SimpleTimeLine.svelte';

package/index.js

@@ -1,2 +1,31 @@
+// buttons
 export { default as Button } from './buttons/Button.svelte';
+// common
+export { default as Card } from './common/Card.svelte';
+export { default as Gesture } from './common/Gesture.svelte';
+export { default as IntersectionObserver } from './common/IntersectionObserver.svelte';
+// forms
+export { default as TextField } from './forms/TextField.svelte';
+// loaders
+export { default as Skeleton } from './forms/Skeleton.svelte';
+// media
+export { default as AttachmentDownloader } from './forms/AttachmentDownloader.svelte';
+export { default as Avatar } from './forms/Avatar.svelte';
+export { default as Carousel } from './forms/Carousel.svelte';
+export { default as DescriptiveAvatar } from './forms/DescriptiveAvatar.svelte';
+export { default as Icon } from './forms/Icon.svelte';
+export { default as Image } from './forms/Image.svelte';
+export { default as ImageGrid } from './forms/ImageGrid.svelte';
+// navigation
+export { default as BreadCrumb } from './navigation/BreadCrumb.svelte';
 export { default as HeaderMenu } from './navigation/HeaderMenu.svelte';
+export { default as Navigator } from './navigation/Navigator.svelte';
+export { default as TabSwitcher } from './navigation/TabSwitcher.svelte';
+// progress
+export { default as ProgressBar } from './navigation/ProgressBar.svelte';
+// shop
+export { default as ProductCard } from './shop/ProductCard.svelte';
+export { default as ProductGrid } from './shop/ProductCard.svelte';
+// timeline
+export { default as ScollTimeLine } from './shop/ScrollTimeLine.svelte';
+export { default as SimpleTimeLine } from './shop/SimpleTimeLine.svelte';

package/loaders/Skeleton.svelte

@@ -14,6 +14,7 @@ $: cssVariables = Object.entries({
     .reduce((css, [key, value]) => {
     return `${css}${key}: ${value};`;
 }, '');
+import '$lib/common/tailwind.css';
 </script>
 
 <div class="card" style={cssVariables}>

package/loaders/Skeleton.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { SectionType } from './sectionType';
+import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         sections?: {

package/media/AttachmentDownloader.svelte

@@ -0,0 +1,59 @@
+<script >export let title = undefined, description = undefined, borderColor = "#B8B8B8", iconColor = "#8D8D8D", borderWidth = '1px', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = 'fit-content', height = undefined;
+import Icon from './Icon.svelte';
+import Card from '../common/Card.svelte';
+</script>
+
+<style>
+  .title {
+    font-size: 13pt;
+    font-weight: 700;
+  }
+
+  .description {
+    margin-top: 5px;
+    font-size: 9pt;
+    font-weight: 200;
+  }
+</style>
+
+<Card
+  outlined
+  borderColor={borderColor}
+  borderWidth={borderWidth}
+  width={width}
+  maxWidth={maxWidth}
+  minWidth={minWidth}
+  height={height}
+  maxHeight={maxHeight}
+  minHeight={minHeight}
+  on:click
+>
+  <div
+    style:display="flex"
+    style:align-items="center"
+  >
+    <Icon 
+      name="mdi-file" 
+      size={40} 
+      color={iconColor}
+    ></Icon>
+    <div
+      style:margin-left="10px"
+      style:margin-right="10px"
+      style:margin-top="10px"
+      style:margin-bottom="10px"
+    >
+      {#if !!title}
+        <div 
+          class="title"
+        >{title}</div>
+      {/if}
+      {#if !!description}
+        <div
+          class="description"
+        >{description}</div>
+      {/if}
+    </div>
+  </div>
+</Card>
+

package/media/AttachmentDownloader.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string;
+        description?: string;
+        borderColor?: string;
+        iconColor?: string;
+        borderWidth?: string;
+        maxWidth?: string;
+        maxHeight?: string;
+        minWidth?: string;
+        minHeight?: string;
+        width?: string;
+        height?: string;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AttachmentDownloaderProps = typeof __propDef.props;
+export declare type AttachmentDownloaderEvents = typeof __propDef.events;
+export declare type AttachmentDownloaderSlots = typeof __propDef.slots;
+export default class AttachmentDownloader extends SvelteComponentTyped<AttachmentDownloaderProps, AttachmentDownloaderEvents, AttachmentDownloaderSlots> {
+}
+export {};

package/media/Avatar.svelte

@@ -0,0 +1,16 @@
+<script >export let src, width = "40px", maxWidth = undefined, minWidth = undefined, height = "40px", maxHeight = undefined, minHeight = undefined, borderRadius = "50%";
+import Image from './Image.svelte';
+</script>
+
+<Image
+  src={src}
+  width={width}
+  maxWidth={maxWidth}
+  minWidth={minWidth}
+  height={height}
+  maxHeight={maxHeight}
+  minHeight={minHeight}
+  borderRadius={borderRadius}
+  disableHover={true}
+  showSkeletonLoader={true}
+></Image>

package/media/Avatar.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        src: string;
+        width?: string;
+        maxWidth?: string;
+        minWidth?: string;
+        height?: string;
+        maxHeight?: string;
+        minHeight?: string;
+        borderRadius?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AvatarProps = typeof __propDef.props;
+export declare type AvatarEvents = typeof __propDef.events;
+export declare type AvatarSlots = typeof __propDef.slots;
+export default class Avatar extends SvelteComponentTyped<AvatarProps, AvatarEvents, AvatarSlots> {
+}
+export {};

package/media/DescriptiveAvatar.svelte

@@ -0,0 +1,77 @@
+<script >export let src, title = undefined, description = undefined, direction = 'row', reverse = false, avatarSpacing = '10px', width = undefined, maxWidth = undefined, minWidth = undefined, height = undefined, maxHeight = undefined, minHeight = undefined, borderRadius = "50%";
+let textAlignment;
+$: if (direction == 'column') {
+    textAlignment = 'center';
+}
+else if (reverse) {
+    textAlignment = 'right';
+}
+else {
+    textAlignment = 'left';
+}
+import Avatar from "./Avatar.svelte";
+</script>
+
+<style>
+  .descriptive-avatar-container {
+    width: fit-content;
+    display: flex;
+  }
+
+  .avatar-container {
+    flex: none
+  }
+
+  .description-container {
+    flex-grow: 1;
+  }
+
+  .title {
+    font-size: 12pt;
+    font-weight: 700;
+  }
+
+  .description {
+    font-size: 10pt;
+    font-weight: 300;
+  }
+</style>
+
+<div
+  style:align-items="center"
+  style:flex-direction={reverse ? direction + '-reverse' : direction}
+  class="descriptive-avatar-container"
+>
+  <div class="avatar-container">
+    <Avatar
+      src={src}
+      width={width}
+      maxWidth={maxWidth}
+      minWidth={minWidth}
+      height={height}
+      maxHeight={maxHeight}
+      minHeight={minHeight}
+      borderRadius={borderRadius}
+    ></Avatar>
+  </div>
+  <div 
+    style:margin-left={!reverse && direction === 'row' ? avatarSpacing : undefined}
+    style:margin-right={reverse && direction === 'row' ? avatarSpacing : undefined}
+    style:margin-top={!reverse && direction === 'column' ? avatarSpacing : undefined}
+    style:margin-bottom={reverse && direction === 'column' ? avatarSpacing : undefined}
+    class="description-container"
+  >
+    {#if !!title}
+      <div 
+        style:text-align={textAlignment}
+        class="title"
+      >{title}</div>
+    {/if}
+    {#if !!description}
+      <div
+        style:text-align={textAlignment}
+        class="description"
+      >{description}</div>
+    {/if}
+  </div>
+</div>

package/media/DescriptiveAvatar.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        src: string;
+        title?: string;
+        description?: string;
+        direction?: 'row' | 'column';
+        reverse?: boolean;
+        avatarSpacing?: string;
+        width?: string;
+        maxWidth?: string;
+        minWidth?: string;
+        height?: string;
+        maxHeight?: string;
+        minHeight?: string;
+        borderRadius?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type DescriptiveAvatarProps = typeof __propDef.props;
+export declare type DescriptiveAvatarEvents = typeof __propDef.events;
+export declare type DescriptiveAvatarSlots = typeof __propDef.slots;
+export default class DescriptiveAvatar extends SvelteComponentTyped<DescriptiveAvatarProps, DescriptiveAvatarEvents, DescriptiveAvatarSlots> {
+}
+export {};

package/media/Icon.svelte

@@ -9,6 +9,7 @@ $: cssVariables = Object.entries({
     return `${css}${key}: ${value};`;
 }, '');
 import '../common/materialDesign.css';
+import '$lib/common/tailwind.css';
 </script>
 
 <style>

package/media/Icon.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import '../common/materialDesign.css';
+import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         name: string;

package/media/Image.svelte

@@ -1,6 +1,6 @@
 <script >import { SectionType } from "../loaders/sectionType";
 import { browser } from '$app/env';
-export let maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, src = undefined, title = undefined, description = undefined, dark = false, disableHover = false, showSkeletonLoader = true, imageCover = true, imageContain = false;
+export let maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, borderRadius = undefined, src = undefined, title = undefined, description = undefined, dark = false, disableHover = false, showSkeletonLoader = true, imageCover = true, imageContain = false;
 const load = (src) => {
     return new Promise(async (resolve, reject) => {
         if (browser) {
@@ -16,25 +16,25 @@ const load = (src) => {
         }
     });
 };
-$: cssVariables = Object.entries({
-    '--max-width': maxWidth,
-    '--max-height': maxHeight,
-    '--min-width': minWidth,
-    '--min-height': minHeight,
-    '--width': width,
-    '--height': height,
-    '--object-fit': imageCover ? 'cover' : imageContain ? 'contain' : undefined,
-}).filter(([key]) => key.startsWith('--'))
+$: cssVariables = Object.entries({}).filter(([key]) => key.startsWith('--'))
     .reduce((css, [key, value]) => {
     return `${css}${key}: ${value};`;
 }, '');
 import IntersectionObserver from '../common/IntersectionObserver.svelte';
 import Skeleton from "../loaders/Skeleton.svelte";
+import '$lib/common/tailwind.css';
 </script>
 
 <div 
-  class="image-container"
+  style:width={width}
+  style:max-width={maxWidth}
+  style:min-width={minWidth}
+  style:height={height}
+  style:max-height={maxHeight}
+  style:min-height={minHeight}
+  style:border-radius={borderRadius}
   style={cssVariables} 
+  class="image-container"
 >
   <IntersectionObserver once={true} let:intersecting={intersecting}>
     {#if intersecting}
@@ -57,7 +57,8 @@ import Skeleton from "../loaders/Skeleton.svelte";
         <div style="position: relative; height: 100%">
           <div class="image-filter">
             <div
-              style={'background-image: url(' + base64 + ')'}
+              style:background-size={imageCover ? 'cover' : imageContain ? 'contain' : undefined}
+              style:background-image={`url(${base64})`}
               class="image"
               class:image-hover={!disableHover}
             >
@@ -97,18 +98,10 @@ import Skeleton from "../loaders/Skeleton.svelte";
 
 <style>
   .image-container {
-    max-width: var(--max-width);
-    max-height: var(--max-height);
-    min-width: var(--min-width);
-    min-height: var(--min-height);
-    width: var(--width);
-    height: var(--height);
-    border-radius: var(--border-radius);
     overflow: hidden;
   }
 
   .image {
-    background-size: var(--object-fit);
     background-repeat: no-repeat;
     background-position: center center;
     width: 100%;

package/media/Image.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         maxWidth?: string;
@@ -7,6 +8,7 @@ declare const __propDef: {
         minHeight?: string;
         width?: string;
         height?: string;
+        borderRadius?: string;
         src?: string;
         title?: string;
         description?: string;

package/media/ImageGrid.svelte

@@ -6,6 +6,7 @@ $: cssVariables = Object.entries({
     return `${css}${key}: ${value};`;
 }, '');
 import Image from './Image.svelte';
+import '$lib/common/tailwind.css';
 </script>
 
 <div