@likable-hair/svelte 0.0.63 → 0.0.65

package/common/Menu.svelte

@@ -69,14 +69,23 @@ $: if (closeOnClickOutside && !!menuElement) {
     window.addEventListener('click', (event) => {
         open = false;
     });
+    window.addEventListener('touchstart', (event) => {
+        open = false;
+    });
     if (!!activator) {
         activator.addEventListener('click', (event) => {
             event.stopPropagation();
         });
+        activator.addEventListener('touchstart', (event) => {
+            event.stopPropagation();
+        });
     }
     menuElement.addEventListener('click', (event) => {
         event.stopPropagation();
     });
+    menuElement.addEventListener('touchstart', (event) => {
+        event.stopPropagation();
+    });
 }
 </script>
 

package/common/SimpleTable.svelte

@@ -1,7 +1,7 @@
 <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%";
+export let headers = undefined, items = undefined, backgroundColor = "rgba(255,255,255,0)", headerColor = "rgba(0,0,0,0.05)", rowSeparatorColor = headerColor, headerHeight = "30px", headerBorderRadius = "5px", rowHeight = "70px", minWidth = undefined, height = "100%", width = "100%";
 </script>
 
 {#if !!items && Array.isArray(items)}
@@ -11,7 +11,11 @@ export let headers = undefined, items = undefined, backgroundColor = "rgba(255,2
       style:width="100%"
       style:min-width={minWidth}
     >
-      <thead style:background-color={headerColor} style:height={headerHeight}>
+      <thead 
+        style:background-color={headerColor} 
+        style:height={headerHeight}
+        style:border-radius={headerBorderRadius}
+      >
         {#each headers as head}
           <th style:width={head.width} style:min-width={head.minWidth}>
             {head.label}

package/common/SimpleTable.svelte.d.ts

@@ -19,6 +19,7 @@ declare const __propDef: {
         headerColor?: string;
         rowSeparatorColor?: string;
         headerHeight?: string;
+        headerBorderRadius?: string;
         rowHeight?: string;
         minWidth?: string;
         height?: string;

package/forms/Autocomplete.svelte

@@ -5,6 +5,7 @@
 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
 menuBackgroundColor = "#FFF", menuBoxShadow = "rgba(149, 157, 165, 0.2) 0px 8px 24px", menuBorderRadius = "5px", focusItemBackgroundColor = "#EEEEEE", selectedItemBackgroundColor = "#D0D0D0", border = '1px solid black', borderRadius = '5px', chipColor = "#D0D0D0", chipTextColor = "black", chipHeight = "30px";
+let dispatch = createEventDispatcher();
 function select(item) {
     const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
     if (!alreadyPresent) {
@@ -13,11 +14,21 @@ function select(item) {
         else
             values = [item];
         refreshMenuWidth();
+        dispatch('change', {
+            unselect: undefined,
+            select: item,
+            selection: values
+        });
     }
 }
 function unselect(item) {
     values = values.filter((i) => i.value != item.value);
     refreshMenuWidth();
+    dispatch('change', {
+        unselect: item,
+        select: undefined,
+        selection: values
+    });
 }
 function toggle(item) {
     const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
@@ -66,8 +77,13 @@ function handleWindowKeyDown(event) {
 }
 let input;
 function handleContainerClick() {
-    if (!menuOpened)
+    if (!menuOpened) {
         input.focus();
+        // had to timeout because it was catching click outside
+        setTimeout(() => {
+            openMenu();
+        }, 50);
+    }
 }
 let searchText, filteredItems = items;
 $: if (!!searchText) {
@@ -85,6 +101,7 @@ else {
 import Textfield from "./Textfield.svelte";
 import Chip from '../navigation/Chip.svelte';
 import Menu from '../common/Menu.svelte';
+import { createEventDispatcher } from 'svelte';
 </script>
 
 <svelte:window></svelte:window>

package/package.json

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