@likable-hair/svelte 3.0.64 → 3.0.66

package/dist/components/layouts/UnstableDividedSideBarLayout.css

@@ -7,7 +7,9 @@
   --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);
+  --unstable-divided-side-bar-layout-default-header-menu-position: fixed;
 }

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)
@@ -219,7 +219,10 @@ let sidebarExpanded = false;
   }
 
   .header-toolbar {
-    position: fixed;
+    position: var(
+      --unstable-divided-side-bar-layout-header-menu-position,
+      var(--unstable-divided-side-bar-layout-default-header-menu-position)
+    );
     height: var(
       --unstable-divided-side-bar-layout-header-menu-height,
       var(--unstable-divided-side-bar-layout-default-header-menu-height)
@@ -232,10 +235,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 +253,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 +295,7 @@ let sidebarExpanded = false;
   }
 
   @media (max-width: 1024px) {
-  	.main-section {
+    .main-section {
       padding-left: 0;
     }
 
@@ -327,7 +336,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/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/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.64",
+  "version": "3.0.66",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",