@likable-hair/svelte 0.0.42 → 0.0.45

package/common/Menu.svelte

@@ -0,0 +1,92 @@
+<script >import { v4 as uuidv4 } from 'uuid';
+import { fly } from 'svelte/transition';
+export let open = false, top = undefined, left = undefined, width, height, activator = undefined, anchor = 'bottom', closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
+    duration: 100,
+    y: 10
+}, outAnimation = fly, outAnimationConfig = {
+    duration: 100,
+    y: 10
+};
+let zIndex = 50, menuElement, currentUid = uuidv4();
+function calculateMenuPosition(params) {
+    if (!!params.menuElement) {
+        if (!!params.activator) {
+            if (anchor == 'bottom') {
+                let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
+                let activatorHeight = params.activator.offsetHeight;
+                top = activatorTop + window.scrollY + activatorHeight;
+                left = activatorLeft + window.scrollX;
+            }
+            else if (anchor == 'bottom-center') {
+                let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
+                let activatorHeight = params.activator.offsetHeight;
+                let activatorWidth = params.activator.offsetWidth;
+                let menuWidth = params.menuElement.offsetWidth;
+                top = activatorTop + window.scrollY + activatorHeight;
+                left = activatorLeft + window.scrollX;
+                if (menuWidth > activatorWidth) {
+                    left = left - ((menuWidth - activatorWidth) / 2);
+                }
+                else {
+                    left = left - ((activatorWidth - menuWidth) / 2);
+                }
+            }
+        }
+        if ((window.innerWidth + window.scrollX) < (left + menuElement.offsetWidth)) {
+            left = Math.max((window.innerWidth + window.scrollX) - menuElement.offsetWidth, 0);
+        }
+    }
+}
+$: if (open) {
+    let otherMenus = document.querySelectorAll("[data-menu=true]");
+    let otherDialogs = document.querySelectorAll("[data-dialog=true]");
+    let maxZIndex = undefined;
+    if (otherDialogs.length > 0) {
+        otherDialogs.forEach((dialog) => {
+            if (!maxZIndex || maxZIndex < Number(dialog.style.zIndex))
+                maxZIndex = Number(dialog.style.zIndex);
+        });
+    }
+    if (otherMenus.length > 0) {
+        let maxZIndex;
+        otherMenus.forEach((menu) => {
+            if (!maxZIndex || maxZIndex < Number(menu.style.zIndex))
+                maxZIndex = Number(menu.style.zIndex);
+        });
+    }
+    calculateMenuPosition({ activator, menuElement });
+    if (!!maxZIndex)
+        zIndex = maxZIndex + 2;
+}
+$: if (closeOnClickOutside && !!menuElement) {
+    window.addEventListener('click', (event) => {
+        open = false;
+    });
+    if (!!activator) {
+        activator.addEventListener('click', (event) => {
+            event.stopPropagation();
+        });
+    }
+    menuElement.addEventListener('click', (event) => {
+        event.stopPropagation();
+    });
+}
+</script>
+
+{#if open}  
+  <div
+    bind:this={menuElement}
+    data-menu
+    data-uid={currentUid}
+    style:z-index={zIndex}
+    style:position="absolute"
+    style:top={top + "px"}
+    style:left={left + "px"}
+    style:height={height}
+    style:width={width}
+    in:inAnimation={inAnimationConfig}
+    out:outAnimation={outAnimationConfig}
+  >
+    <slot></slot>
+  </div>
+{/if}

package/common/Menu.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import { type FadeParams, type FlyParams, type SlideParams, type TransitionConfig } from 'svelte/transition';
+declare const __propDef: {
+    props: {
+        open?: boolean;
+        top?: number;
+        left?: number;
+        width: string;
+        height: string;
+        activator?: HTMLElement;
+        anchor?: 'bottom' | 'bottom-center';
+        closeOnClickOutside?: boolean;
+        inAnimation?: (node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig;
+        inAnimationConfig?: SlideParams | FlyParams | FadeParams;
+        outAnimation?: (node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig;
+        outAnimationConfig?: SlideParams | FlyParams | FadeParams;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type MenuProps = typeof __propDef.props;
+export declare type MenuEvents = typeof __propDef.events;
+export declare type MenuSlots = typeof __propDef.slots;
+export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
+}
+export {};

package/common/SimpleTable.svelte

@@ -0,0 +1,74 @@
+<script context="module" ></script>
+
+<script >import { dateToString } from "../dates/utils";
+export let headers = undefined, items = undefined, backgroundColor = "rgba(255,255,255,0)", headerColor = "rgba(0,0,0,0.05)", rowSeparatorColor = headerColor, headerHeight = "30px", rowHeight = "70px", minWidth = undefined, height = "100%", width = "100%";
+</script>
+
+<div class="container" style:height style:width>
+    <table
+        style:background-color={backgroundColor}
+        style:width="100%"
+        style:min-width={minWidth}
+    >
+        <thead
+            style:background-color={headerColor}
+            style:height={headerHeight}
+        >
+            {#each headers as head}
+                <th
+                    style:width={head.width}
+                    style:min-width={head.minWidth}
+                >
+                    {head.label}
+                </th>
+            {/each}
+            {#if $$slots.appendLastColumn}
+                <th></th>
+            {/if}
+        </thead>
+        <tbody>
+            {#each items as item, i}
+                <tr
+                    style:border-color={rowSeparatorColor}
+                    style:height={rowHeight}
+                >
+                    {#each headers as header , j}
+                        <td>
+                            {#if header.type=='custom'}
+                                <slot name="customColumn" index={i} columnIndex={j} item={item}></slot>
+                            {:else if header.type=='date'}
+                                {dateToString(item[header.value], 'dayAndHours', 'it')}
+                            {:else}
+                                {item[header.value]}
+                            {/if}
+                        </td>
+                    {/each}
+                    {#if $$slots.appendLastColumn}
+                        <td>
+                            <slot name="appendLastColumn" index={i} item={item}></slot>
+                        </td>
+                    {/if}
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+</div>
+
+<style>
+    table {
+        border-collapse: collapse;
+        width: 100%;
+    }
+    th {
+        text-align: start;
+        padding-left: 10px;
+        min-width: 100px;
+    }
+    td {
+        padding-left: 10px;
+    }
+    tr:not(:first-child) {
+        border: solid;
+        border-width: 2px 0;
+    }
+</style>

package/common/SimpleTable.svelte.d.ts

@@ -0,0 +1,51 @@
+import { SvelteComponentTyped } from "svelte";
+export declare type Header = {
+    value: string;
+    label: string;
+    type: 'boolean' | 'string' | 'number' | 'date' | 'custom';
+    width?: string;
+    minWidth?: string;
+    data?: {
+        [key: string]: any;
+    };
+};
+declare const __propDef: {
+    props: {
+        headers?: Header[];
+        items?: {
+            [key: string]: any;
+        }[];
+        backgroundColor?: string;
+        headerColor?: string;
+        rowSeparatorColor?: string;
+        headerHeight?: string;
+        rowHeight?: string;
+        minWidth?: string;
+        height?: string;
+        width?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        customColumn: {
+            index: any;
+            columnIndex: any;
+            item: {
+                [key: string]: any;
+            };
+        };
+        appendLastColumn: {
+            index: any;
+            item: {
+                [key: string]: any;
+            };
+        };
+    };
+};
+export declare type SimpleTableProps = typeof __propDef.props;
+export declare type SimpleTableEvents = typeof __propDef.events;
+export declare type SimpleTableSlots = typeof __propDef.slots;
+export default class SimpleTable extends SvelteComponentTyped<SimpleTableProps, SimpleTableEvents, SimpleTableSlots> {
+}
+export {};

package/common/scroller.d.ts

@@ -1 +1 @@
-export declare function scrollAtCenter(parentElement: HTMLElement, targetElement: HTMLElement): void;
+export declare function scrollAtCenter(parentElement: HTMLElement, targetElement: HTMLElement, mode: ScrollBehavior): void;

package/common/scroller.js

@@ -1,8 +1,8 @@
-export function scrollAtCenter(parentElement, targetElement) {
+export function scrollAtCenter(parentElement, targetElement, mode) {
     const parentElementHeight = parentElement.offsetHeight;
     const targetElementheight = targetElement.offsetHeight;
     parentElement.scroll({
         top: targetElement.offsetTop - parentElement.offsetTop - (parentElementHeight - targetElementheight) / 2,
-        behavior: "smooth"
+        behavior: mode
     });
 }

package/dates/Calendar.svelte

@@ -1,7 +1,7 @@
 <script >import { onMount } from 'svelte';
 import { fly } from 'svelte/transition';
-import { getDateRowsStats, getMonthName } from './utils';
-export let selectedDate = undefined, visibleMonth = new Date().getMonth(), visibleYear = new Date().getFullYear(), showExtraMonthDays = true, showHeader = true, height = "100%", width = "100%", dayWidth = '30px', dayHeight = '30px', dayHoverColor = '#c9c8c873', daySelectedColor = '#adadad', dayBackgroundColor = undefined, animationDuration = 200;
+import { getDateRowsStats, getDaysNames } from './utils';
+export let selectedDate = undefined, visibleMonth = new Date().getMonth(), visibleYear = new Date().getFullYear(), locale = 'it', showExtraMonthDays = true, showHeader = true, height = "100%", width = "100%", dayWidth = '30px', dayHeight = '30px', dayHoverColor = '#c9c8c873', daySelectedColor = '#adadad', selectedTextColor = "black", dayBackgroundColor = undefined, animationDuration = 200;
 onMount(() => {
 });
 import { createEventDispatcher } from 'svelte';
@@ -18,18 +18,18 @@ function handleDayClick(dateStat, extraMonth) {
 }
 </script>
 
-<div 
+<div
   style:height={height}
   style:width={width}
 >
   {#key visibleMonth }
-    <div 
+    <div
       in:fly="{{delay: animationDuration, duration: animationDuration, y: 30}}"
-      out:fly="{{duration: animationDuration, y: -30}}"
+      out:fly|local="{{duration: animationDuration, y: -30}}"
       class="grid-layout"
     >
       {#if showHeader}
-        {#each ['L', 'M', 'M', 'G', 'V', 'S', 'D'] as weekHeader, index}
+        {#each getDaysNames(locale).map(name => name[0]) as weekHeader, index}
           <slot
             name="weekHeader"
             header={weekHeader}
@@ -41,16 +41,16 @@ function handleDayClick(dateStat, extraMonth) {
           </slot>
         {/each}
       {/if}
-      {#each getDateRowsStats(visibleMonth, visibleYear) as day}
+      {#each getDateRowsStats(visibleMonth, visibleYear, locale) as day}
         {@const selected = !!selectedDate && selectedDate.getDate() == day.dayOfMonth && selectedDate.getMonth() == day.month && selectedDate.getFullYear() == day.year}
         {@const extraMonth = day.month != visibleMonth}
-        <slot 
-          name="day" 
+        <slot
+          name="day"
           dayStat={day}
           extraMonth={extraMonth}
           selected={selected}
         >
-          {#if (!showExtraMonthDays && day.month == visibleMonth) || showExtraMonthDays }  
+          {#if (!showExtraMonthDays && day.month == visibleMonth) || showExtraMonthDays }
             <div
               style:border-radius="50%"
               style:background-color={dayBackgroundColor}
@@ -59,6 +59,7 @@ function handleDayClick(dateStat, extraMonth) {
               style:cursor={extraMonth ? 'default' : 'pointer'}
               style:--calendar-hover-color={extraMonth ? '' : dayHoverColor}
               style:--calendar-selected-color={daySelectedColor}
+              style:--calendar-selected-text-color={selectedTextColor}
               class="day-slot"
               class:extra-month={extraMonth}
               class:selected={selected}
@@ -97,6 +98,7 @@ function handleDayClick(dateStat, extraMonth) {
 
 .selected {
   background-color: var(--calendar-selected-color);
+  color: var(--calendar-selected-text-color);
 }
 
 .day-slot.not-selected:hover {

package/dates/Calendar.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { DateStat } from './utils';
+import type { DateStat, Locale } from './utils';
 declare const __propDef: {
     props: {
         selectedDate?: Date;
         visibleMonth?: number;
         visibleYear?: number;
+        locale?: Locale;
         showExtraMonthDays?: boolean;
         showHeader?: boolean;
         height?: string;
@@ -13,6 +14,7 @@ declare const __propDef: {
         dayHeight?: string;
         dayHoverColor?: string;
         daySelectedColor?: string;
+        selectedTextColor?: string;
         dayBackgroundColor?: string;
         animationDuration?: number;
     };

package/dates/DatePicker.svelte

@@ -0,0 +1,210 @@
+<script >import { getMonthName, dateToString } from "./utils";
+import YearSelector from "./YearSelector.svelte";
+import MonthSelector from "./MonthSelector.svelte";
+import Calendar from "./Calendar.svelte";
+import Button from "../buttons/Button.svelte";
+export let selectedYear = new Date().getFullYear(), selectedMonth = new Date().getMonth(), selectedDate = new Date(), view = 'day', locale = 'it', primaryColor = "#008080", headerBackgroundColor = primaryColor, arrowColor = primaryColor, hoverColor = "#00808012", selectedDayColor = "black", headerColor = "white", cardColor = "black", cardBackGroundColor = "rgba(255,255,255,0)", height = "100%", width = "100%";
+let selectorText = undefined;
+let selectableYears = [...Array(150).keys()].map((i) => i + (new Date().getFullYear() - 75));
+let elementDisabled = 'date';
+$: visibleSelector = view == 'day' || view == 'month';
+$: {
+    selectorText =
+        view == 'day'
+            ? getMonthName(selectedMonth, locale) + " " + selectedYear
+            : selectedYear.toString();
+}
+$: elementDisabled = view == 'year' ? 'year' : 'date';
+function next() {
+    if (view == 'day') {
+        if (selectedMonth == 11) {
+            selectedMonth = 0;
+            selectedYear += 1;
+        }
+        else {
+            selectedMonth += 1;
+        }
+    }
+    else {
+        if (selectedYear != selectableYears[selectableYears.length - 1])
+            selectedYear++;
+    }
+}
+function previous() {
+    if (view == 'day') {
+        if (selectedMonth == 0) {
+            selectedMonth = 11;
+            selectedYear -= 1;
+        }
+        else {
+            selectedMonth -= 1;
+        }
+    }
+    else {
+        if (selectedYear != selectableYears[0])
+            selectedYear--;
+    }
+}
+function SelectorHandler() {
+    if (view == 'month')
+        view = 'year';
+    else
+        view = 'month';
+}
+function handleYearChange() {
+    view = "month";
+}
+function handleMonthChange() {
+    view = "day";
+}
+</script>
+
+<div
+    class="container"
+    style:background={cardBackGroundColor}
+    style:color={cardColor}
+    style:height
+    style:width
+>
+    <div
+        class="header"
+        style:height="25%"
+        style:background={headerBackgroundColor}
+        style:color={headerColor}
+    >
+        <span
+            class:disabled="{elementDisabled == 'year'}"
+            on:click={() => {
+                view = 'year';
+            }}>{selectedYear}</span
+        >
+        <h2
+            class:disabled="{elementDisabled == 'date'}"
+            on:click={() => {
+                view = 'day';
+            }}
+        >
+            {dateToString(selectedDate, 'dayAndMonth', locale)}
+        </h2>
+    </div>
+    <div class="body" style:height="75%">
+        {#if visibleSelector}
+            <div class="selector-row" style:height="25%">
+                <div class="row-elem">
+                    <Button
+                        color={arrowColor}
+                        hoverBackgroundColor={hoverColor}
+                        type="icon"
+                        iconSize={25}
+                        icon="mdi-chevron-left"
+                        on:click={previous}
+                    />
+                </div>
+                <div class="row-elem selector">
+                    {#key selectorText}
+                        <div
+                            on:click={SelectorHandler}
+                            style:--primary-color={primaryColor}
+                        >
+                            {selectorText}
+                        </div>
+                    {/key}
+                </div>
+                <div class="row-elem">
+                    <Button
+                        color={arrowColor}
+                        hoverBackgroundColor={hoverColor}
+                        type="icon"
+                        iconSize={25}
+                        icon="mdi-chevron-right"
+                        on:click={next}
+                    />
+                </div>
+            </div>
+        {/if}
+        {#if view == 'month'}
+            <MonthSelector
+                height="75%"
+                {width}
+                bind:selectedMonth
+                on:click={handleMonthChange}
+                locale={locale}
+                monthSelectedColor={primaryColor}
+                monthSelectedTextColor={selectedDayColor}
+            />
+        {:else if view == 'year'}
+            <YearSelector
+                height="100%"
+                {width}
+                bind:selectedYear
+                {selectableYears}
+                on:click={handleYearChange}
+            />
+        {:else}
+            <Calendar
+                height="75%"
+                {width}
+                bind:visibleMonth={selectedMonth}
+                bind:visibleYear={selectedYear}
+                bind:selectedDate={selectedDate}
+                dayHoverColor={hoverColor}
+                daySelectedColor={primaryColor}
+                selectedTextColor={selectedDayColor}
+                locale={locale}
+            />
+        {/if}
+    </div>
+</div>
+
+<style>
+    .container {
+        border-radius: 5px;
+    }
+    .header {
+        border-radius: 5px 5px 0 0;
+    }
+    .header > h2 {
+        margin-left: 30px;
+        transition: 0.1s;
+        opacity: 0.8;
+    }
+    .header > h2:hover {
+        opacity: 1;
+        cursor: pointer;
+    }
+    .header > span {
+        display: inline-block;
+        line-height: 100%;
+        margin-left: 15px;
+        margin-top: 10px;
+        opacity: 0.8;
+        transition: 0.1s;
+    }
+    .header > span:hover {
+        opacity: 1;
+        cursor: pointer;
+    }
+    .selector-row {
+        display: flex;
+        justify-content: space-between;
+        line-height: 100%;
+    }
+    .row-elem {
+        margin: auto;
+    }
+    .selector {
+        width: 50%;
+        text-align: center;
+    }
+    .selector > div {
+        transition: 0.1s;
+    }
+    .selector > div:hover {
+        cursor: pointer;
+        color: var(--primary-color);
+    }
+    .disabled {
+        pointer-events: none;
+        opacity: 1 !important;
+    }
+</style>

package/dates/DatePicker.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Locale } from "./utils";
+declare const __propDef: {
+    props: {
+        selectedYear?: number;
+        selectedMonth?: number;
+        selectedDate?: Date;
+        view?: 'year' | 'month' | 'day';
+        locale?: Locale;
+        primaryColor?: string;
+        headerBackgroundColor?: string;
+        arrowColor?: string;
+        hoverColor?: string;
+        selectedDayColor?: string;
+        headerColor?: string;
+        cardColor?: string;
+        cardBackGroundColor?: string;
+        height?: string;
+        width?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type DatePickerProps = typeof __propDef.props;
+export declare type DatePickerEvents = typeof __propDef.events;
+export declare type DatePickerSlots = typeof __propDef.slots;
+export default class DatePicker extends SvelteComponentTyped<DatePickerProps, DatePickerEvents, DatePickerSlots> {
+}
+export {};

package/dates/MonthSelector.svelte

@@ -1,5 +1,5 @@
 <script >import { getMonthName } from './utils';
-export let selectedMonth = undefined, height = "100%", width = "100%";
+export let selectedMonth = undefined, locale = 'it', height = "100%", width = "100%", monthSelectedColor = '#adadad', monthSelectedTextColor = '#21a';
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 function handleMonthClick(monthIndex) {
@@ -20,21 +20,23 @@ import Button from '../buttons/Button.svelte';
     <slot
       name="selector"
       month={monthIndex}
-      monthName={getMonthName(monthIndex)}
+      monthName={getMonthName(monthIndex, locale)}
     >
       <Button 
         active={monthIndex == selectedMonth}
         display="flex"
         alignItems="center"
         justifyContent="center"
+        activeBackgroundColor={monthSelectedColor}
+        color={monthIndex == selectedMonth ? monthSelectedTextColor : null}
         on:click={() => handleMonthClick(monthIndex)}
       >
         <slot
           name="label"
           month={monthIndex}
-          monthName={getMonthName(monthIndex)}
+          monthName={getMonthName(monthIndex, locale)}
         >
-          {getMonthName(monthIndex)}
+          {getMonthName(monthIndex, locale)}
         </slot>
       </Button>
     </slot>

package/dates/MonthSelector.svelte.d.ts

@@ -1,9 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Locale } from './utils';
 declare const __propDef: {
     props: {
         selectedMonth?: number;
+        locale?: Locale;
         height?: string;
         width?: string;
+        monthSelectedColor?: string;
+        monthSelectedTextColor?: string;
     };
     events: {
         click: CustomEvent<{

package/dates/YearSelector.svelte

@@ -3,12 +3,12 @@ import { createEventDispatcher, onMount } from 'svelte';
 export let selectedYear = undefined, selectableYears = [...Array(150).keys()].map(i => i + (new Date().getFullYear() - 75)), height = "100%", width = "100%";
 let container, targetButtons = {};
 onMount(() => {
-    scrollAtCenter(container, targetButtons[selectedYear]);
+    scrollAtCenter(container, targetButtons[selectedYear], "auto");
 });
 const dispatch = createEventDispatcher();
 function handleYearClick(year) {
     selectedYear = year;
-    scrollAtCenter(container, targetButtons[selectedYear]);
+    scrollAtCenter(container, targetButtons[selectedYear], "smooth");
     dispatch('click', {
         year
     });