@likable-hair/svelte 3.1.17 → 3.1.19

package/dist/components/composed/forms/CountriesAutocomplete.svelte.d.ts

@@ -27,6 +27,7 @@ declare const __propDef: {
             width?: string | undefined;
             height?: string | undefined;
             maxWidth?: string | undefined;
+            minWidth?: string | undefined;
             openingId?: string | undefined;
             searchText?: string | undefined;
             maxVisibleChips?: number | undefined;

package/dist/components/simple/forms/Autocomplete.svelte

@@ -5,7 +5,7 @@ import "./Autocomplete.css";
 import { scrollInMenu } from "../common/scroller";
 let clazz = {};
 export { clazz as class };
-export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = void 0;
+export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, minWidth = "200px", openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = void 0;
 let dispatch = createEventDispatcher();
 function select(item) {
   if (disabled)
@@ -147,6 +147,14 @@ $:
         searchText = void 0;
     }, 10);
   }
+$:
+  if (!!input) {
+    if (!disabled && values.length != 0) {
+      input.style.width = Math.max(searchText?.length || 0, 1) + "ch";
+    } else {
+      input.style.width = "auto";
+    }
+  }
 import Chip from "../navigation/Chip.svelte";
 import Menu from "../common/Menu.svelte";
 import { createEventDispatcher } from "svelte";
@@ -160,6 +168,7 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
   bind:this={activator}
   style:width
   style:max-width={maxWidth}
+  style:min-width={minWidth}
   style:height
   style:opacity={disabled ? "50%" : "100%"}
   on:click={handleContainerClick}
@@ -195,13 +204,14 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
         </slot>
       {/if}
 
-      <SimpleTextField
-        --simple-textfield-max-width="min(200px, 90%)"
-        --simple-textfield-height="auto"
-        --simple-textfield-padding="0px"
-        --simple-textfield-default-background-color="rgb(1, 1, 1, 0)"
-        --simple-textfield-default-margin-bottom="0px"
-        --simple-textfield-default-margin-left="10px"
+      <input 
+        style:--simple-textfield-max-width="min(200px, 90%)"
+        style:--simple-textfield-height="auto"
+        style:--simple-textfield-padding="0px"
+        style:--simple-textfield-default-background-color="rgb(1, 1, 1, 0)"
+        style:--simple-textfield-default-margin-bottom="0px"
+        style:--simple-textfield-default-margin-left="10px"
+        class="autocomplete-input"
         bind:value={searchText}
         on:focus={handleTextFieldFocus}
         on:focus
@@ -211,9 +221,8 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
         on:keydown
         {disabled}
         placeholder={placeholder}
-        bind:input={input}
-        class={clazz.simpleTextfield}
-      ></SimpleTextField>
+        bind:this={input}
+      />
     </div>
   </slot>
 </div>
@@ -414,4 +423,12 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
     opacity: 50%;
     cursor: pointer;
   }
+
+  .autocomplete-input {
+    background-color: rgb(1, 1, 1, 0);
+    /* margin-left: 10px; */
+    outline: none;
+    border: none;
+    color: inherit;
+  }
 </style>

package/dist/components/simple/forms/Autocomplete.svelte.d.ts

@@ -25,6 +25,7 @@ declare const __propDef: {
         width?: string | undefined;
         height?: string | undefined;
         maxWidth?: string | undefined;
+        minWidth?: string | undefined;
         openingId?: string | undefined;
         searchText?: string | undefined;
         maxVisibleChips?: number | undefined;

package/dist/components/simple/forms/SimpleTextField.svelte

@@ -205,6 +205,7 @@ export let value = void 0, type = "text", placeholder = void 0, disabled = false
       --simple-textfield-height,
       var(--simple-textfield-default-height)
     );
+    width: fit-content;
     background-color: var(
       --simple-textfield-background-color,
       var(--simple-textfield-default-background-color)

package/dist/components/simple/lists/SimpleTable.svelte

@@ -11,20 +11,22 @@ export let headers = [], items = [], sortedBy = void 0, sortDirection = "asc";
 export let calculateRowStyles = void 0;
 export let calculateRowClasses = void 0;
 function handleHeaderClick(header) {
-  if (!!sortedBy && header.value == sortedBy) {
-    if (sortDirection == "asc")
-      sortDirection = "desc";
-    else if (sortDirection == "desc") {
-      sortedBy = void 0;
+  if (header.sortable) {
+    if (!!sortedBy && header.value == sortedBy) {
+      if (sortDirection == "asc")
+        sortDirection = "desc";
+      else if (sortDirection == "desc") {
+        sortedBy = void 0;
+      }
+    } else {
+      sortedBy = header.value;
+      sortDirection = "asc";
     }
-  } else {
-    sortedBy = header.value;
-    sortDirection = "asc";
+    dispatch("sort", {
+      sortedBy,
+      sortDirection
+    });
   }
-  dispatch("sort", {
-    sortedBy,
-    sortDirection
-  });
 }
 function handleRowClick(item) {
   dispatch("rowClick", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.1.17",
+  "version": "3.1.19",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",