@likable-hair/svelte 0.0.6 → 0.0.9

package/buttons/Button.svelte

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

package/common/Card.svelte

@@ -1,37 +1,26 @@
-<script >import { Elevation } from '../enums/elevation.enum';
-export let rounded = true, outlined = false, elevation = Elevation.md;
-$: 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 rounded-md shadow-lg" 
-  style={cssVariables}
-  class:shadow-sm={!outlined && elevation == Elevation.sm}
-  class:shadow-md={!outlined && elevation == Elevation.md}
-  class:shadow-lg={!outlined && elevation == Elevation.lg}
-  class:shadow-xl={!outlined && elevation == Elevation.xl}
-  class:shadow-2xl={!outlined && elevation == Elevation.xxl}
+<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

@@ -1,11 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-import { Elevation } from '../enums/elevation.enum';
 import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
-        rounded?: boolean;
         outlined?: boolean;
-        elevation?: Elevation;
+        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/common/tailwind.css

@@ -1,3 +1,149 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+html {
+  --shadow-color: #000;
+  --ring-inset: inset;
+  --ring-offset-width: 0px;
+  --ring-color: rgb(255 255 255/0.1);
+  --ring-offset-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+  --ring-shadow: 0 0 #0000;
+  --shadow: 0 0 #0000;
+}
+
+.relative {
+  position: relative;
+}
+.sticky {
+  position: sticky;
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-none {
+  flex: none;
+}
+
+.shrink {
+  flex-shrink: 1;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.text-2xl {
+  font-size: 1.5rem/* 24px */;
+  line-height: 2rem/* 32px */;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.rounded-md {
+  border-radius: 0.375rem
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
+.-top-12 {
+  top: -3rem/* -48px */;
+}
+
+.-top-14 {
+  top: -3.5rem/* -56px */;
+}
+
+.top-0 {
+  top: 0;
+}
+
+.bottom-3 {
+  bottom: 0.75rem/* 12px */;
+}
+
+.bottom-2 {
+  bottom: 0.5rem/* 8px */;
+}
+
+.mt-1 {
+  margin-top: 0.25rem/* 4px */;
+}
+
+.mt-6 {
+  margin-top: 1.5rem/* 24px */;
+}
+
+.ml-2 {
+  margin-left: 0.5rem/* 8px */;
+}
+
+.mr-2 {
+  margin-right: 0.5rem/* 8px */;
+}
+
+.mr-5 {
+  margin-right: 1.25rem/* 20px */;
+}
+
+.mx-2 {
+  margin-left: 0.5rem/* 8px */;
+  margin-right: 0.5rem/* 8px */;
+}
+
+.mx-3 {
+  margin-left: 0.75rem/* 12px */;
+  margin-right: 0.75rem/* 12px */;
+}
+
+.p-2 {
+  padding: 0.5rem/* 8px */;
+}
+
+.h-12 {
+  height: 3rem/* 48px */;
+}
+
+.h-14 {
+  height: 3.5rem/* 56px */;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.shadow-lg {
+  --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-colored: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--shadow);
+}
+
+.shadow-md {
+  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-colored: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--shadow);
+}

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/forms/Textfield.svelte

@@ -28,7 +28,6 @@ import '$lib/common/tailwind.css';
 
 <style>
   .input-container {
-    margin-top: 15px;
     height: 50px;
     position: relative;
     width: var(--width, 100%);
@@ -130,7 +129,7 @@ import '$lib/common/tailwind.css';
           class="label-outlined"
           bind:this={labelElement}
         >{label}</label>
-        <div class="flex content-center relative bottom-3 ml-2 mr-2">
+        <div class="flex content-center relative bottom-2 ml-2 mr-2">
           <div>
             <slot name="prepend-inner"></slot>
           </div>

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 {};