@likable-hair/svelte 0.0.54 → 0.0.57

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/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/navigation/TabSwitcher.svelte

@@ -23,8 +23,10 @@ function handleTabClick(clickedTab, nativeEvent) {
 }
 function setBookmarkPosition() {
     let tabButton = tabButtons[selected];
-    bookmarkWidth = tabButton.offsetWidth - 10;
-    bookmarkLeft = tabButton.offsetLeft + 5;
+    if (!!tabButton) {
+        bookmarkWidth = tabButton.offsetWidth - 10;
+        bookmarkLeft = tabButton.offsetLeft + 5;
+    }
 }
 $: if (!!selected)
     setBookmarkPosition();

package/package.json

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