@likable-hair/svelte 3.0.63 → 3.0.65

package/dist/components/composed/forms/Dropdown.svelte

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import { cloneDeep } from "lodash";
+<script>import lodash from "lodash";
 import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
 import Button from "../../simple/buttons/Button.svelte";
 import Icon from "../../simple/media/Icon.svelte";
@@ -12,7 +12,7 @@ $:
 function handleCloseClick(event) {
   event.preventDefault();
   event.stopPropagation();
-  let valuesBefore = cloneDeep(values);
+  let valuesBefore = lodash.cloneDeep(values);
   values = [];
   dispatch("change", {
     unselect: valuesBefore[0],

package/dist/components/layouts/UnstableDividedSideBarLayout.css

@@ -7,7 +7,8 @@
   --unstable-divided-side-bar-layout-default-header-menu-height: 3.5rem;
   --unstable-divided-side-bar-layout-default-header-menu-border: none;
   --unstable-divided-side-bar-layout-default-header-menu-padding: 0rem 2rem 0rem 2rem;
-  --unstable-divided-side-bar-layout-default-inner-header-menu-background-color: rgb(var(--global-color-background-100), .5);
+  --unstable-divided-side-bar-layout-default-inner-header-menu-background-color: var(--global-color-background-100);
   --unstable-divided-side-bar-layout-default-drawer-background-color: rgb(var(--global-color-background-100));
   --unstable-divided-side-bar-layout-default-drawer-width: 24rem;
+  --unstable-divided-side-bar-layout-default-header-menu-backdrop-filter: blur(4px)
 }

package/dist/components/layouts/UnstableDividedSideBarLayout.svelte

@@ -165,7 +165,7 @@ let sidebarExpanded = false;
   }
 
   @media (max-width: 1024px) {
-  	.side-bar {
+    .side-bar {
       left: calc(0rem - var(
           --unstable-divided-side-bar-layout-drawer-width,
           var(--unstable-divided-side-bar-layout-default-drawer-width)
@@ -232,10 +232,13 @@ let sidebarExpanded = false;
       --unstable-divided-side-bar-layout-header-menu-border,
       var(--unstable-divided-side-bar-layout-default-header-menu-border)
     );
-    backdrop-filter: blur(4px);
+    backdrop-filter: var(
+      --unstable-divided-side-bar-layout-header-menu-backdrop-filter,
+      var(--unstable-divided-side-bar-layout-default-header-menu-backdrop-filter)
+    );
     background-color: var(
       --unstable-divided-side-bar-layout-inner-header-menu-background-color,
-      var(--unstable-divided-side-bar-layout-default-inner-header-menu-background-color)
+      rgb(var(--unstable-divided-side-bar-layout-default-inner-header-menu-background-color), .5)
     );
     transition-property: background-color left;
     transition-timing-function: cubic-bezier(.4,0,.2,1);
@@ -247,12 +250,15 @@ let sidebarExpanded = false;
   
 
   @media (max-width: 1024px) {
-  	.header-toolbar {
+    .header-toolbar {
       left: 0;
     }
 
     .header-toolbar.opened-drawer {
-      background-color: inherit;
+      background-color: var(
+        --unstable-divided-side-bar-layout-inner-header-menu-background-color,
+        rgb(var(--unstable-divided-side-bar-layout-default-inner-header-menu-background-color))
+      );
     }
 
     .header-toolbar:hover {
@@ -286,7 +292,7 @@ let sidebarExpanded = false;
   }
 
   @media (max-width: 1024px) {
-  	.main-section {
+    .main-section {
       padding-left: 0;
     }
 
@@ -327,7 +333,7 @@ let sidebarExpanded = false;
     );
     background-color: var(
       --unstable-divided-side-bar-layout-inner-header-menu-background-color,
-      var(--unstable-divided-side-bar-layout-default-inner-header-menu-background-color)
+      rgb(var(--unstable-divided-side-bar-layout-default-inner-header-menu-background-color), .5)
     );
     height: 100%;
     display: flex;

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

@@ -4,7 +4,7 @@
 import { onMount, createEventDispatcher } from "svelte";
 import TreeEditorItem from "./TreeEditorItem.svelte";
 import { createId } from "@paralleldrive/cuid2";
-import { cloneDeep } from "lodash";
+import lodash from "lodash";
 let dispatch = createEventDispatcher();
 export let items = [], groupName = createId(), cleanItems = convertItemsInClean(items);
 let itemList, sortable = void 0, rerender = true, mounted = false;
@@ -32,7 +32,7 @@ function handleEnd(event) {
   sortTree();
 }
 async function sortTree() {
-  let clonedItems = cloneDeep(items);
+  let clonedItems = lodash.cloneDeep(items);
   let sortedItems = sortSubTree(clonedItems, items, sortable, "main");
   dispatch("change", {
     items: sortedItems

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

@@ -96,10 +96,22 @@ function formatDate(dateTime, dateFormat) {
                   {formatDate(item[header.value], header.type.params)}
                 {:else if header.type.key == "icon"}
                     <Icon 
-                     --icon-color={header.type.params?.color }  
-                     --icon-size={header.type.params?.size} 
+                      --icon-color={header.type.params?.color }  
+                      --icon-size={header.type.params?.size} 
                       name={header.type.params?.name || ''}
                     />
+                {:else if header.type.key == 'string'}
+                  {#if item[header.value] !== undefined && item[header.value] !== null}
+                    {item[header.value]}
+                  {:else if !!header.type.params?.nullText}
+                    {#if typeof header.type.params.nullText == 'function'}
+                      {header.type.params.nullText(item)}
+                    {:else}
+                      {header.type.params.nullText}
+                    {/if}
+                  {:else}
+                    {item[header.value]}
+                  {/if}
                 {:else} 
                   {item[header.value]}
                 {/if}

package/dist/components/simple/lists/columnTypes.d.ts

@@ -9,8 +9,8 @@ export type ColumnIcon = {
     key: "icon";
     params: {
         name: string;
-        color: string;
-        size: string;
+        color?: string;
+        size?: string;
     };
 };
 export type ColumnBoolean = {
@@ -19,7 +19,11 @@ export type ColumnBoolean = {
 };
 export type ColumnString = {
     key: "string";
-    params?: {};
+    params?: {
+        nullText?: string | ((value: {
+            [key: string]: any;
+        }) => string);
+    };
 };
 export type ColumnNumber = {
     key: "number";

package/dist/components/simple/typography/Code.svelte

@@ -3,7 +3,7 @@ import hljs from "highlight.js";
 import hljsSvelte from "highlightjs-svelte";
 import "highlight.js/styles/github.css";
 import "./dracula.css";
-import { escape } from "lodash";
+import lodash from "lodash";
 export let codeBackgroundColor = "rgb(24 24 27/1)", headerBackgroundColor = "rgb(39 39 42/1)", dividerColor = "rgb(63 63 70)", borderRadius = ".5rem", headerPadding = "1rem 1rem", codePadding = "0rem 1rem", color = "white", boxShadow = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", code, title = void 0, language = "javascript";
 let codeElement;
 onMount(() => {
@@ -48,5 +48,5 @@ onMount(() => {
         style:padding-bottom="1rem"
         style:font-size="1rem"
         style:line-height="1.5rem"
-      >{@html escape(code)}</code></pre></div>
+      >{@html lodash.escape(code)}</code></pre></div>
 </div>

package/dist/index.d.ts

@@ -58,6 +58,7 @@ export { default as MenuOrDrawer } from './components/composed/common/MenuOrDraw
 export { default as MenuOrDrawerOptions } from './components/composed/common/MenuOrDrawerOptions.svelte';
 export { default as AsyncAutocomplete } from './components/composed/forms/AsyncAutocomplete.svelte';
 export { default as CountriesAutocomplete } from './components/composed/forms/CountriesAutocomplete.svelte';
+export { default as Dropdown } from './components/composed/forms/Dropdown.svelte';
 export { default as FilterBuilder } from './utils/filters/builder';
 export { default as FilterConverter } from './utils/filters/filters';
 export { default as FilterValidator } from './utils/filters/validator';

package/dist/index.js

@@ -58,6 +58,7 @@ export { default as MenuOrDrawer } from './components/composed/common/MenuOrDraw
 export { default as MenuOrDrawerOptions } from './components/composed/common/MenuOrDrawerOptions.svelte';
 export { default as AsyncAutocomplete } from './components/composed/forms/AsyncAutocomplete.svelte';
 export { default as CountriesAutocomplete } from './components/composed/forms/CountriesAutocomplete.svelte';
+export { default as Dropdown } from './components/composed/forms/Dropdown.svelte';
 export { default as FilterBuilder } from './utils/filters/builder';
 export { default as FilterConverter } from './utils/filters/filters';
 export { default as FilterValidator } from './utils/filters/validator';

package/package.json

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