@likable-hair/svelte 0.0.55 → 0.0.58

package/common/SimpleTable.svelte

@@ -4,79 +4,70 @@
 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>
 
-{#if !!items && Array.isArray(items) }
+{#if !!items && Array.isArray(items)}
   <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} 
-                                    header={header}
-                                    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>
+    <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 />
+        {/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}
+                    {header}
+                    {item}
+                  />
+                {: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} />
+              </td>
+            {/if}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
   </div>
 {/if}
 
 <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;
-    }
+  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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 export declare type Header = {
     value: string;
     label: string;
-    type: 'boolean' | 'string' | 'number' | 'date' | 'custom';
+    type: "boolean" | "string" | "number" | "date" | "custom";
     width?: string;
     minWidth?: string;
     data?: {

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

@@ -1,6 +1,6 @@
 <script context="module" ></script>
 
-<script >export let values = [], items, searchFunction = undefined, multiple = false, disabled = false, width = "auto", maxWidth = undefined, 
+<script >export let values = [], items, searchFunction = undefined, multiple = false, disabled = false, width = "auto", height = "auto", maxWidth = undefined, 
 // textfield
 textFieldLabel = "", textFieldPlaceholder = "", textFieldColor = null, textFieldVariant = 'boxed', textFieldMaxWidth = "min(100px, 90%)", textFieldMinWidth = undefined, textFieldHeight = "auto", textFieldTextColor = "black", textFieldBorderWeight = "2px", textFieldBorderRadius = "5px", textFieldBorderColor = null, textFieldFocusBorderColor = null, textFieldFocusedBoxShadow = undefined, textFieldBackgroundColor = null, textFieldPadding = undefined, textFieldPaddingLeft = undefined, textFieldPaddingRight = undefined, textFieldPaddingBottom = undefined, textFieldPaddingTop = undefined, textFieldFontSize = undefined, 
 // menu
@@ -21,7 +21,6 @@ function unselect(item) {
 }
 function toggle(item) {
     const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
-    console.log(item, alreadyPresent);
     if (alreadyPresent)
         unselect(item);
     else
@@ -94,6 +93,7 @@ import Menu from '../common/Menu.svelte';
   bind:this={activator}
   style:width={width}
   style:max-width={maxWidth}
+  style:height={height}
   style:opacity={disabled ? '50%' : '100%'}
   on:click={handleContainerClick}
 >

package/forms/Autocomplete.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         multiple?: boolean;
         disabled?: boolean;
         width?: string;
+        height?: string;
         maxWidth?: string;
         textFieldLabel?: string;
         textFieldPlaceholder?: string;

package/media/DescriptiveAvatar.svelte

@@ -43,18 +43,20 @@ import Avatar from "./Avatar.svelte";
   class="descriptive-avatar-container"
 >
   <div class="avatar-container">
-    <Avatar
-      src={src}
-      width={width}
-      maxWidth={maxWidth}
-      minWidth={minWidth}
-      height={height}
-      maxHeight={maxHeight}
-      minHeight={minHeight}
-      borderRadius={borderRadius}
-      lazyLoaded={lazyLoaded}
-      referrerpolicy={referrerpolicy}
-    ></Avatar>
+    <slot name="avatar">
+      <Avatar
+        src={src}
+        width={width}
+        maxWidth={maxWidth}
+        minWidth={minWidth}
+        height={height}
+        maxHeight={maxHeight}
+        minHeight={minHeight}
+        borderRadius={borderRadius}
+        lazyLoaded={lazyLoaded}
+        referrerpolicy={referrerpolicy}
+      ></Avatar>
+    </slot>
   </div>
   <div 
     style:margin-left={!reverse && direction === 'row' ? avatarSpacing : undefined}

package/media/DescriptiveAvatar.svelte.d.ts

@@ -20,7 +20,9 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        avatar: {};
+    };
 };
 export declare type DescriptiveAvatarProps = typeof __propDef.props;
 export declare type DescriptiveAvatarEvents = typeof __propDef.events;

package/package.json

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