@likable-hair/svelte 0.0.57 → 0.0.58

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/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/package.json

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