@likable-hair/svelte 0.0.57 → 0.0.60

package/dates/Calendar.svelte

@@ -1,7 +1,7 @@
 <script >import { onMount } from 'svelte';
 import { fly } from 'svelte/transition';
 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;
+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", gridGap = "1px", dayBackgroundColor = undefined, animationDuration = 200;
 onMount(() => {
 });
 import { createEventDispatcher } from 'svelte';
@@ -26,6 +26,7 @@ function handleDayClick(dateStat, extraMonth) {
     <div
       in:fly="{{delay: animationDuration, duration: animationDuration, y: 30}}"
       out:fly|local="{{duration: animationDuration, y: -30}}"
+      style:gap={gridGap}
       class="grid-layout"
     >
       {#if showHeader}
@@ -80,7 +81,7 @@ function handleDayClick(dateStat, extraMonth) {
 .grid-layout {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-  gap: 1px;
+  height: 100%;
 }
 
 .day-slot {

package/dates/Calendar.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         dayHoverColor?: string;
         daySelectedColor?: string;
         selectedTextColor?: string;
+        gridGap?: string;
         dayBackgroundColor?: string;
         animationDuration?: number;
     };

package/dates/DatePicker.svelte

@@ -3,20 +3,20 @@ 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%";
+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';
+let elementDisabled = "date";
+$: visibleSelector = view == "day" || view == "month";
 $: {
     selectorText =
-        view == 'day'
+        view == "day"
             ? getMonthName(selectedMonth, locale) + " " + selectedYear
             : selectedYear.toString();
 }
-$: elementDisabled = view == 'year' ? 'year' : 'date';
+$: elementDisabled = view == "year" ? "year" : "date";
 function next() {
-    if (view == 'day') {
+    if (view == "day") {
         if (selectedMonth == 11) {
             selectedMonth = 0;
             selectedYear += 1;
@@ -31,7 +31,7 @@ function next() {
     }
 }
 function previous() {
-    if (view == 'day') {
+    if (view == "day") {
         if (selectedMonth == 0) {
             selectedMonth = 11;
             selectedYear -= 1;
@@ -46,10 +46,10 @@ function previous() {
     }
 }
 function SelectorHandler() {
-    if (view == 'month')
-        view = 'year';
+    if (view == "month")
+        view = "year";
     else
-        view = 'month';
+        view = "month";
 }
 function handleYearChange() {
     view = "month";
@@ -60,151 +60,152 @@ function handleMonthChange() {
 </script>
 
 <div
-    class="container"
-    style:background={cardBackGroundColor}
-    style:color={cardColor}
-    style:height
-    style:width
+  class="container"
+  style:background={cardBackGroundColor}
+  style:color={cardColor}
+  style:height
+  style:width
 >
-    <div
-        class="header"
-        style:height="25%"
-        style:background={headerBackgroundColor}
-        style:color={headerColor}
+  <div
+    class="header"
+    style:height="25%"
+    style:background={headerBackgroundColor}
+    style:color={headerColor}
+  >
+    <span
+      class:disabled={elementDisabled == "year"}
+      on:click={() => {
+        view = "year";
+      }}>{selectedYear}</span
     >
-        <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>
+    <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>
-        {/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>
+          {/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}
+        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
+        dayHoverColor={hoverColor}
+        daySelectedColor={primaryColor}
+        selectedTextColor={selectedDayColor}
+        {locale}
+        on:day-click
+      />
+    {/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;
-    }
+  .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

@@ -5,7 +5,7 @@ declare const __propDef: {
         selectedYear?: number;
         selectedMonth?: number;
         selectedDate?: Date;
-        view?: 'year' | 'month' | 'day';
+        view?: "year" | "month" | "day";
         locale?: Locale;
         primaryColor?: string;
         headerBackgroundColor?: string;
@@ -19,6 +19,12 @@ declare const __propDef: {
         width?: string;
     };
     events: {
+        'day-click': CustomEvent<{
+            dateStat: import("./utils").DateStat;
+            selected: boolean;
+            extraMonth: boolean;
+        }>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dates/utils.js

@@ -90,7 +90,6 @@ export const getDateRows = (monthIndex, year, locale = 'it') => {
         else
             startIndex -= 1;
     }
-    console.log(startIndex);
     let lastIndex = new Date(year, monthIndex + 1, 0).getDay();
     if (locale == 'it') {
         if (lastIndex === 0)

package/dialogs/Dialog.svelte

@@ -1,4 +1,5 @@
-<script >import { beforeUpdate } from "svelte";
+<script >import { browser } from "$app/env";
+import { beforeUpdate } from "svelte";
 export let open = false, overlayOpacity = "30%", overlayColor = "#282828";
 let zIndex = 50, localOpen = open;
 beforeUpdate(() => {
@@ -12,6 +13,15 @@ beforeUpdate(() => {
             });
             zIndex = maxZIndex + 2;
         }
+        document.body.style.overflow = 'hidden';
+    }
+    else if (!open) {
+        if (browser) {
+            let otherDialogs = document.querySelectorAll("[data-dialog=true]");
+            if (otherDialogs.length <= 1) {
+                document.body.style.overflow = 'auto';
+            }
+        }
     }
     localOpen = open;
 });
@@ -33,14 +43,14 @@ function handleOverlayClick() {
   style:justify-content="space-between"
   class="overlay-container"
   class:overlay-container-active={localOpen}
-  on:touchmove|preventDefault={() => {}}
-  on:wheel|preventDefault={() => {}}
 >
   <div
     style:background-color={overlayColor} 
     class="overlay"
     class:overlay-active={localOpen}
     on:click={handleOverlayClick}
+    on:touchmove|preventDefault={() => {}}
+    on:wheel|preventDefault={() => {}}
   ></div>
   {#if localOpen }
     <div

package/forms/Checkbox.svelte

@@ -13,6 +13,7 @@
   id={id}
   type="checkbox"
   bind:checked={value}
+  on:change
   disabled={disabled}
 >
 

package/forms/Checkbox.svelte.d.ts

@@ -14,6 +14,8 @@ declare const __propDef: {
         disabledInnerColor?: string;
     };
     events: {
+        change: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/forms/Textfield.svelte

@@ -1,6 +1,6 @@
 <script  context="module"></script>
 
-<script >export let label = "", placeholder = "", color = null, value = "", disabled = false, variant = 'outlined', width = "100%", height = "50px", maxWidth = undefined, minWidth = undefined, textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text', inputElement = undefined;
+<script >export let label = "", placeholder = "", color = null, value = "", disabled = false, variant = 'outlined', width = "100%", height = "50px", maxWidth = undefined, minWidth = undefined, textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text', readonly = false, inputElement = undefined;
 import { v4 as uuidv4 } from 'uuid';
 import { onMount } from 'svelte';
 let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
@@ -166,6 +166,7 @@ $: if (!!labelElement) {
               type="password"
               placeholder={placeholder}
               disabled={disabled}
+              readonly={readonly}
               bind:value={value}
               on:change
               on:input
@@ -188,6 +189,7 @@ $: if (!!labelElement) {
               type="text"
               placeholder={placeholder}
               disabled={disabled}
+              readonly={readonly}
               bind:value={value}
               on:change
               on:input
@@ -222,6 +224,7 @@ $: if (!!labelElement) {
             type="password"
             placeholder={placeholder || label}
             disabled={disabled}
+            readonly={readonly}
             bind:value={value}
             on:change
             on:input
@@ -244,6 +247,7 @@ $: if (!!labelElement) {
             type="text"
             placeholder={placeholder || label}
             disabled={disabled}
+            readonly={readonly}
             bind:value={value}
             on:change
             on:input

package/forms/Textfield.svelte.d.ts

@@ -26,6 +26,7 @@ declare const __propDef: {
         paddingTop?: string;
         fontSize?: string;
         type?: 'text' | 'password';
+        readonly?: boolean;
         inputElement?: HTMLElement;
     };
     events: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.57",
+  "version": "0.0.60",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",