@likable-hair/svelte 0.0.1 → 0.0.4

package/common/Card.svelte

@@ -0,0 +1,45 @@
+<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};`;
+}, '');
+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}
+  class:border-solid={outlined}
+  class:rounded-md={rounded}
+>
+  <div class="header flex-none">
+    <slot name="header"></slot>
+  </div>
+  <div class="body shrink overflow-y-auto">
+    <slot></slot>
+  </div>
+  <div class="footer flex-none">
+    <slot name="footer"></slot>
+  </div>
+</div>

package/common/Card.svelte.d.ts

@@ -0,0 +1,24 @@
+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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+        footer: {};
+    };
+};
+export declare type CardProps = typeof __propDef.props;
+export declare type CardEvents = typeof __propDef.events;
+export declare type CardSlots = typeof __propDef.slots;
+export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
+}
+export {};

package/common/IntersectionObserver.svelte

@@ -0,0 +1,58 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let once = false;
+	export let top = 0;
+	export let bottom = 0;
+	export let left = 0;
+	export let right = 0;
+
+	let intersecting = false;
+	let container;
+
+	onMount(() => {
+		if (typeof IntersectionObserver !== 'undefined') {
+			const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+
+			const observer = new IntersectionObserver(entries => {
+				intersecting = entries[0].isIntersecting;
+				if (intersecting && once) {
+					observer.unobserve(container);
+				}
+			}, {
+				rootMargin
+			});
+
+			observer.observe(container);
+			return () => observer.unobserve(container);
+		}
+
+		function handler() {
+			const bcr = container.getBoundingClientRect();
+			intersecting = (
+				(bcr.bottom + bottom) > 0 &&
+				(bcr.right + right) > 0 &&
+				(bcr.top - top) < window.innerHeight &&
+				(bcr.left - left) < window.innerWidth
+			);
+
+			if (intersecting && once) {
+				window.removeEventListener('scroll', handler);
+			}
+		}
+
+		window.addEventListener('scroll', handler);
+		return () => window.removeEventListener('scroll', handler);
+	});
+</script>
+
+<style>
+	div {
+		width: 100%;
+		height: 100%;
+	}
+</style>
+
+<div bind:this={container}>
+	<slot {intersecting}></slot>
+</div>

package/common/IntersectionObserver.svelte.d.ts

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

package/common/materialDesign.css

@@ -0,0 +1 @@
+@import url("https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css");

package/common/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/dates/Calendar.svelte

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

package/dates/Calendar.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import '$lib/common/tailwind.css';
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CalendarProps = typeof __propDef.props;
+export declare type CalendarEvents = typeof __propDef.events;
+export declare type CalendarSlots = typeof __propDef.slots;
+export default class Calendar extends SvelteComponentTyped<CalendarProps, CalendarEvents, CalendarSlots> {
+}
+export {};

package/dates/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const monthNames: string[];
+export declare const monthDays: number[];
+export declare const isLeapYear: (year: number) => boolean;
+export declare const getEmptyRows: () => any[];
+export declare const getMonthDays: (index: number, year: number) => number;
+export declare const getMonthName: (index: number) => string;
+export declare type MonthStats = {
+    name: string;
+    days: number;
+};
+export declare const getDateRows: (monthIndex: number, year: number) => number[];

package/dates/utils.js

@@ -0,0 +1,59 @@
+export const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+];
+export const monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+export const isLeapYear = year => year % 4 === 0;
+export const getEmptyRows = () => {
+    return Array.from({ length: 42 }).map(() => []);
+};
+export const getMonthDays = (index, year) => {
+    return index !== 1 ? monthDays[index] : isLeapYear(year) ? 29 : 28;
+};
+export const getMonthName = index => monthNames[index];
+const getMonthStats = (monthIndex, year) => {
+    const today = new Date(year, monthIndex, 1);
+    const index = today.getMonth();
+    return {
+        name: index[index],
+        days: getMonthDays(index, year)
+    };
+};
+export const getDateRows = (monthIndex, year) => {
+    const { days } = getMonthStats(monthIndex, year);
+    const { days: daysOfPreviousMonth } = getMonthStats(monthIndex - 1, year);
+    const rows = getEmptyRows();
+    let startIndex = new Date(year, monthIndex, 1).getDay();
+    if (startIndex === 0)
+        startIndex = 6;
+    else
+        startIndex -= 1;
+    let lastIndex = new Date(year, monthIndex + 1, 0).getDay();
+    if (lastIndex === 0)
+        lastIndex = 6;
+    else
+        lastIndex -= 1;
+    Array.from({ length: days }).forEach((_, i) => {
+        const index = startIndex + i;
+        rows[index] = i + 1;
+    });
+    Array.from({ length: startIndex }).forEach((_, i) => {
+        rows[i] = (daysOfPreviousMonth - startIndex) + i + 1;
+    });
+    if (lastIndex !== 6) {
+        Array.from({ length: (6 - lastIndex) }).forEach((_, i) => {
+            rows[startIndex + days + i] = i + 1;
+        });
+    }
+    return rows.filter(el => !Array.isArray(el));
+};

package/enums/elevation.enum.d.ts

@@ -0,0 +1,7 @@
+export declare enum Elevation {
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    xxl = "xxl"
+}

package/enums/elevation.enum.js

@@ -0,0 +1,8 @@
+export var Elevation;
+(function (Elevation) {
+    Elevation["sm"] = "sm";
+    Elevation["md"] = "md";
+    Elevation["lg"] = "lg";
+    Elevation["xl"] = "xl";
+    Elevation["xxl"] = "xxl";
+})(Elevation || (Elevation = {}));

package/enums/index.d.ts

@@ -0,0 +1 @@
+export { Elevation } from './elevation.enum';

package/enums/index.js

@@ -0,0 +1 @@
+export { Elevation } from './elevation.enum';

package/forms/Textfield.svelte

@@ -0,0 +1,177 @@
+<script >export let label = "", placeholder = "", color = "", value = "", variant = 'outlined';
+import { v4 as uuidv4 } from 'uuid';
+import { onMount } from 'svelte';
+let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
+onMount(() => {
+    if (!!labelElement) {
+        legendWidth = (labelElement.offsetWidth * 0.8) + 8;
+    }
+});
+function handleFocus() {
+    focused = true;
+}
+function handleBlur() {
+    focused = false;
+}
+$: if (!!labelElement) {
+    legendWidth = !value && !focused ? 0 : (labelElement.offsetWidth * 0.8) + 8;
+}
+$: cssVariables = Object.entries({
+    '--theme-color': color,
+    '--legend-width': legendWidth + 'px'
+}).filter(([key]) => key.startsWith('--'))
+    .reduce((css, [key, value]) => {
+    return `${css}${key}: ${value};`;
+}, '');
+import '$lib/common/tailwind.css';
+</script>
+
+<style>
+  .input-container {
+    margin-top: 15px;
+    height: 50px;
+    position: relative;
+    width: var(--width, 100%);
+    --final-color: var(--theme-color, --border-color, rgb(88, 88, 88));
+  }
+
+  /* outlined input */
+
+  .input-outlined {
+    border: 0px solid;
+    box-sizing: border-box;
+    color: var(--color, black);
+    font-size: 18px;
+    height: 100%;
+    outline: 0;
+    padding: 4px 0px 0;
+    width: 100%;
+    transition: all 0.3s;
+  }
+
+  .fieldset-outlined {
+    border-radius: var(--border-radius, 5px);
+    border: 1px solid rgb(122, 122, 122);
+    padding-left: 4px;
+  }
+
+  .focused .fieldset-outlined {
+    border: 1px solid var(--final-color);
+    color: var(--final-color);
+  }
+
+  .legend-outlined {
+    width: var(--legend-width);
+    padding: 0px;
+    transition: width 0.3s, color 0.1s;
+  }
+
+  .label-outlined {
+    position: relative;
+    top: 13px;
+    left: 4px;
+    display: inline-block;
+    transition: all 0.3s;
+    transform-origin: top left;
+    transform: scale(1);
+    z-index: 2;
+  }
+
+  .texted .label-outlined {
+    top: -13px;
+    left: 4px;
+    transform: scale(.8);
+  }
+
+  /* boxed input */
+
+  .fieldset-boxed {
+    border: 2px solid var(--final-color);
+    padding: 5px;
+  }
+
+  .input-boxed {
+    border: 0px solid;
+    box-sizing: border-box;
+    font-size: 18px;
+    height: 100%;
+    outline: 0;
+    padding: 4px 0px 0;
+    width: 100%;
+    transition: all 0.3s;
+    position: relative;
+  }
+
+  .input-boxed::placeholder {
+    color: var(--final-color);
+    opacity: 60%;
+  }
+
+</style>
+
+
+<div 
+  class="input-container" 
+  style={cssVariables}
+  class:focused={focused}
+  class:texted={focused || !!value}
+>
+  <fieldset 
+    aria-hidden="true" 
+    class="fieldset"
+    class:fieldset-outlined={variant == 'outlined'}
+    class:fieldset-boxed={variant == 'boxed'}
+  >
+    {#if variant == 'outlined'}
+        <legend class="legend-outlined"></legend>
+        <label 
+          for={inputId}
+          class="label-outlined"
+          bind:this={labelElement}
+        >{label}</label>
+        <div class="flex content-center relative bottom-3 ml-2 mr-2">
+          <div>
+            <slot name="prepend-inner"></slot>
+          </div>
+          <input 
+            id={inputId} 
+            class="input-outlined"
+            type="text"
+            placeholder={placeholder}
+            bind:value={value}
+            on:change
+            on:input
+            on:focus={handleFocus}
+            on:focus
+            on:blur={handleBlur}
+            on:blur
+          />
+          <div>
+            <slot name="append-inner"></slot>
+          </div>
+        </div>
+    {:else if variant == 'boxed'}
+      <div class="flex">
+        <div>
+          <slot name="prepend-inner"></slot>
+        </div>
+        <input
+          id={inputId}
+          class="input-boxed"
+          type="text"
+          placeholder={placeholder || label}
+          bind:value={value}
+          on:change
+          on:input
+          on:focus={handleFocus}
+          on:focus
+          on:blur={handleBlur}
+          on:blur
+        />
+        <div>
+          <slot name="append-inner"></slot>
+        </div>
+      </div>
+    {/if}
+  </fieldset>
+</div>

package/forms/Textfield.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import '$lib/common/tailwind.css';
+declare const __propDef: {
+    props: {
+        label?: string;
+        placeholder?: string;
+        color?: string;
+        value?: string;
+        variant?: "outlined" | "boxed";
+    };
+    events: {
+        change: Event;
+        input: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'prepend-inner': {};
+        '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 {};

package/loaders/Skeleton.svelte

@@ -0,0 +1,78 @@
+<script >export let sections = [], maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, padding = '10px', width = undefined, height = undefined, dark = false;
+$: cssVariables = Object.entries({
+    '--max-width': maxWidth,
+    '--max-height': maxHeight,
+    '--min-width': minWidth,
+    '--min-height': minHeight,
+    '--width': width,
+    '--height': height,
+    '--padding': padding,
+    '--card-background': dark ? '#000000' : '#fff',
+    '--element-background': dark ? '#1a1a1a' : '#eee',
+    '--animation-color': dark ? '#000000e6' : '#ffffffe6',
+}).filter(([key]) => key.startsWith('--'))
+    .reduce((css, [key, value]) => {
+    return `${css}${key}: ${value};`;
+}, '');
+</script>
+
+<div class="card" style={cssVariables}>
+  {#each sections as section}
+    {#if section.type == 'image'}
+      <div 
+        class="skeleton-image"
+        style="height: {section.height}"
+      ></div>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .skeleton-image {
+    background: var(--element-background);
+    margin-bottom: 10px;
+    border-radius: 5px;
+    overflow: hidden;
+    width: 100%;
+  }
+  
+  .card {
+    background: var(--card-background);
+    position: relative;
+    padding: var(--padding);
+    border-radius: 5px;
+    box-shadow: 0 10px 100px rgba(0, 0, 0, 0.1);
+    width: calc(var(--width) - (var(--padding) * 2));
+    height: calc(var(--height) - (var(--padding) * 2));
+    max-width: calc(var(--max-width) - (var(--padding) * 2));
+    max-height: calc(var(--max-height) - (var(--padding) * 2));
+    min-width: calc(var(--min-width) - (var(--padding) * 2));
+    min-height: calc(var(--min-height) - (var(--padding) * 2));
+    overflow: hidden;
+  }
+
+  @keyframes loading {
+    0% {
+      transform: skewX(-10deg) translateX(-100%);
+    }
+    100% {
+      transform: skewX(-10deg) translateX(200%);
+    }
+  }
+
+  .card::before {
+    content: '';
+    position: absolute;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--animation-color),
+      transparent
+    );
+    width: 50%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    animation: loading 1s infinite;
+  }
+</style>

package/loaders/Skeleton.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SectionType } from './sectionType';
+declare const __propDef: {
+    props: {
+        sections?: {
+            type: SectionType;
+            height?: string;
+        }[];
+        maxWidth?: string;
+        maxHeight?: string;
+        minWidth?: string;
+        minHeight?: string;
+        padding?: string;
+        width?: string;
+        height?: string;
+        dark?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SkeletonProps = typeof __propDef.props;
+export declare type SkeletonEvents = typeof __propDef.events;
+export declare type SkeletonSlots = typeof __propDef.slots;
+export default class Skeleton extends SvelteComponentTyped<SkeletonProps, SkeletonEvents, SkeletonSlots> {
+}
+export {};

package/loaders/sectionType.d.ts

@@ -0,0 +1,4 @@
+export declare enum SectionType {
+    Text = "text",
+    Image = "image"
+}

package/loaders/sectionType.js

@@ -0,0 +1,5 @@
+export var SectionType;
+(function (SectionType) {
+    SectionType["Text"] = "text";
+    SectionType["Image"] = "image";
+})(SectionType || (SectionType = {}));

package/media/Carousel.svelte

@@ -0,0 +1,67 @@
+<script >import { onMount } from 'svelte';
+export let images = [];
+let container, width = '0px', height = '0px';
+onMount(() => {
+    calculateWidthAndHeight();
+});
+function calculateWidthAndHeight() {
+    width = container.offsetWidth + 'px';
+    height = container.offsetHeight + 'px';
+}
+$: cssVariables = Object.entries({}).filter(([key]) => key.startsWith('--'))
+    .reduce((css, [key, value]) => {
+    return `${css}${key}: ${value};`;
+}, '');
+import '$lib/common/tailwind.css';
+import Image from './Image.svelte';
+</script>
+
+<svelte:window
+  on:resize={calculateWidthAndHeight}
+></svelte:window>
+
+
+<div 
+  style={cssVariables} 
+  bind:this={container}
+  class="container flex flex-nowrap"
+>
+  {#each images as image}
+    <div class="image-container">
+      <Image
+        src={image.url}
+        title={image.title}
+        description={image.description}
+        disableHover={true}
+        showSkeletonLoader={false}
+        minWidth={width}
+        width={width}
+        height={height}
+        imageContain={true}
+        imageCover={false}
+      />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .container {
+    height: var(--height);
+    width: var(--width);
+    max-height: var(--max-height);
+    max-width: var(--max-width);
+    min-height: var(--min-height);
+    min-width: var(--min-width);
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+    scrollbar-width: none;  /* Firefox */
+  }
+
+  .container::-webkit-scrollbar { 
+    display: none;  /* Safari and Chrome */
+  }
+  .image-container {
+    scroll-snap-align: start;
+  }
+</style>