@likable-hair/svelte 3.3.1 → 3.3.3

package/dist/components/composed/common/QuickActions.svelte

@@ -10,7 +10,7 @@ export let selectedItems, showSelectContainer, isSelectedAll, totalRows, slotSel
 let actions = [], extraActions = [], moreActionsActivator, openMoreActions = false, infoActivators = {}, disabledInfoActivators = {};
 $: {
   if (!!slotSelectActionsContainer) {
-    let numberOfSplit = $mediaQuery.xl ? 5 : $mediaQuery.l ? 5 : $mediaQuery.m ? 2 : $mediaQuery.s ? 0 : $mediaQuery.xs ? 0 : 3;
+    let numberOfSplit = $mediaQuery.xl ? 5 : $mediaQuery.l ? 4 : $mediaQuery.m ? 2 : $mediaQuery.s ? 0 : $mediaQuery.xs ? 0 : 3;
     if (actionsForSelectedItems.length > numberOfSplit) {
       extraActions = actionsForSelectedItems.slice(numberOfSplit);
       actions = actionsForSelectedItems.slice(0, numberOfSplit);
@@ -227,11 +227,12 @@ $: {
       --quick-actions-z-index,
       var(--quick-actions-default-z-index)
     );
-    width: 100%;
+    width: 90%;
   }
 
   .container-top {
     top: 16px;
+    left: 250px;
   }
 
   .container-bottom {
@@ -247,6 +248,7 @@ $: {
 
     .container-top {
       top: 16px;
+      left: auto;
     }
 
     .container-bottom {

package/dist/components/composed/list/DynamicTable.svelte

@@ -49,8 +49,8 @@ const [send, receive] = crossfade({
 let clazz = {};
 export { clazz as class };
 const dispatch = createEventDispatcher();
-export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, noItemsText = "No items to show", showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = [], showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, searchBarVisible = false, searchBarPlaceholder = "Type to search for identification code, description and MRN...", filtersVisible = false, quickFiltersVisible = false, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], hasMoreToLoad = false, totalRows = rows.length;
-let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchText = void 0, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem;
+export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, noItemsText = "No items to show", showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = [], showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, searchBarVisible = false, searchBarPlaceholder = "Type to search for identification code, description and MRN...", filtersVisible = false, quickFiltersVisible = false, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], hasMoreToLoad = false, totalRows = rows.length, searchText = void 0;
+let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem;
 let openHeaderDrawer = false, headersToSelect = !!headers ? headers.filter((h) => {
   return !headersToShowInTable.find((hst) => hst.value == h.value);
 }).map((h) => {
@@ -697,33 +697,29 @@ function handleLoadMore() {
               on:click={() => handleHeaderClick(head)}
             >
               <slot name="header" {head}>
-                <span class="header-label">
-                  <slot name="headerLabel">
-                    <div bind:this={infoActivators[index]}>
-                      {head.label}
-                      {#if !!head.info}
-                        <Icon						
-                          name="mdi-help-circle-outline"
-                          --icon-size="16px"
-                        />
-                      {/if}
-                    </div>
-                    {#if !!head.info}
-                      <ToolTip
-                        appearTimeout={1000}
-                        activator={infoActivators[index]}
-                      >
-                        <div
-                          style:background-color='rgb(var(--global-color-background-300), .95)'
-                          style:border-radius="5px"
-                          style:padding="10px"
-                        >
-                          {head.info}
-                        </div>
-                      </ToolTip>
-                    {/if}
-                  </slot>
+                <span class="header-label" bind:this={infoActivators[index]}>
+                  <slot name="headerLabel">{head.label}</slot>
+                  {#if !!head.info}
+                    <Icon						
+                      name="mdi-help-circle-outline"
+                      --icon-size="16px"
+                    />
+                  {/if}
                 </span>
+                {#if !!head.info}
+                  <ToolTip
+                    appearTimeout={1000}
+                    activator={infoActivators[index]}
+                  >
+                    <div
+                      style:background-color='rgb(var(--global-color-background-300), .95)'
+                      style:border-radius="5px"
+                      style:padding="10px"
+                    >
+                      {head.info}
+                    </div>
+                  </ToolTip>
+                {/if}
                 {#if head.sortable}
                   <span
                     class="header-sort-icon"

package/dist/components/composed/list/DynamicTable.svelte.d.ts

@@ -151,6 +151,7 @@ declare const __propDef: {
         actionsForSelectedItems?: Action[] | undefined;
         hasMoreToLoad?: boolean | undefined;
         totalRows?: number | undefined;
+        searchText?: string | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -3,8 +3,10 @@ import "./FileInputList.css";
 import Button from "../buttons/Button.svelte";
 import FileInput from "./FileInput.svelte";
 import Icon from "../media/Icon.svelte";
+import { createEventDispatcher } from "svelte";
 let clazz = "";
 export { clazz as class };
+let dispatch = createEventDispatcher();
 export let files = [], persistOverUpload = true, dropAreaActive = true, icon = "mdi-file-document", disabled = false, maxFiles = void 0;
 let fileActive = null;
 function handleFileMouseEnter(file) {
@@ -22,6 +24,13 @@ function handleRemove(file) {
   files = files.filter((elem) => {
     return elem != file;
   });
+  dispatch("fileChange", { files });
+}
+function handleFileDrop() {
+  dispatch("fileChange", { files });
+}
+function handleFileSelect() {
+  dispatch("fileChange", { files });
 }
 </script>
 
@@ -36,6 +45,10 @@ function handleRemove(file) {
     --file-input-height="var(--file-input-list-height,var(--file-input-list-default-height))"
     --file-input-width="var(--file-input-list-width,var(--file-input-list-default-width))"
     on:change
+    on:fileDrop={handleFileDrop}
+    on:fileDrop
+    on:fileSelect={handleFileSelect}
+    on:fileSelect
     {maxFiles}
   >
     <span

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

@@ -13,6 +13,17 @@ declare const __propDef: {
     };
     events: {
         change: Event;
+        fileDrop: CustomEvent<{
+            nativeEvent: DragEvent;
+            files: File[];
+        }>;
+        fileSelect: CustomEvent<{
+            nativeEvent: Event;
+            files: File[];
+        }>;
+        fileChange: CustomEvent<{
+            files: File[];
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",
@@ -52,8 +52,7 @@
     "tslib": "^2.4.1",
     "typescript": "^4.9.3",
     "vite": "^5.0.0",
-    "vitest": "^0.25.3",
-    "svelte-dnd-action": "0.9.50"
+    "vitest": "^0.25.3"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -71,6 +70,7 @@
     "sortablejs": "^1.15.2",
     "svelte-chartjs": "^3.1.5",
     "svelte-dts": "^0.3.7",
-    "svelte-grid": "^5.1.2"
+    "svelte-grid": "^5.1.2",
+    "svelte-dnd-action": "0.9.50"
   }
 }