@likable-hair/svelte 3.3.29 → 3.3.31

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

@@ -4,49 +4,46 @@
   import Menu from '../../simple/common/Menu.svelte';
   import MediaQuery from '../../simple/common/MediaQuery.svelte';
   import type { ComponentProps } from 'svelte';
+  import lodash from 'lodash'
 
   export let open: boolean = false,
-    activator: HTMLElement,
-    drawerPosition: ComponentProps<Drawer>['position'] = 'bottom',
-    menuAnchor: ComponentProps<Menu>['anchor'] = 'bottom-center',
-    stayInViewport: ComponentProps<Menu>['stayInViewport'] = true,
-    flipOnOverflow: ComponentProps<Menu>['flipOnOverflow'] = false,
-    _boxShadow: string = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
-    _height: string = "fit-content",
-    _width: string | undefined = undefined,
-    _maxHeight: string | undefined = undefined,
-    _minWidth: string = "100px",
-    _borderRadius: string = "5px",
-    openingId: ComponentProps<Menu>['openingId'] = undefined,
-    _drawerOverflow: string | undefined = undefined;
+    drawerProps: Omit<ComponentProps<Drawer>, 'open'> | undefined = undefined,
+    menuProps: Omit<ComponentProps<Menu>, 'open'> | undefined = undefined
+
+  const menuPropsDefaultValue = {
+    closeOnClickOutside: true,
+    _boxShadow: "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
+    _height: "fit-content",
+    _minWidth: "100px",
+    _borderRadius: "5px",
+    _width: "",
+    anchor: 'bottom-center',
+    stayInViewport: true
+  }
+
+  $: finalMenuProps = lodash.clone(lodash.merge(menuPropsDefaultValue, menuProps))
+
+  const drawerPropsDefaultValue = {
+    position: 'bottom'
+  }
+
+  $: finalDrawerProps = lodash.clone(lodash.merge(drawerPropsDefaultValue, drawerProps))
 </script>
 
 <MediaQuery let:mAndDown>
   {#if mAndDown}
     <Drawer
       bind:open={open}
-      bind:position={drawerPosition}
+      {...finalDrawerProps}
       on:close
       on:item-click
-      _overflow={_drawerOverflow}
     >
       <slot isDrawer={true} isMenu={false}></slot>
     </Drawer>
   {:else}
     <Menu
-      bind:activator={activator}
       bind:open={open}
-      closeOnClickOutside
-      _boxShadow={_boxShadow}
-      _height={_height}
-      _maxHeight={_maxHeight}
-      _minWidth={_minWidth}
-      _borderRadius={_borderRadius}
-      _width={_width || ""}
-      anchor={menuAnchor}
-      bind:stayInViewport={stayInViewport}
-      bind:flipOnOverflow={flipOnOverflow}
-      bind:openingId
+      {...finalMenuProps}
     >
       <slot isDrawer={false} isMenu={true}></slot>
     </Menu>

package/dist/components/composed/common/MenuOrDrawer.svelte.d.ts

@@ -22,19 +22,8 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 } : {});
 declare const MenuOrDrawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     open?: boolean;
-    activator: HTMLElement;
-    drawerPosition?: ComponentProps<Drawer>["position"];
-    menuAnchor?: ComponentProps<Menu>["anchor"];
-    stayInViewport?: ComponentProps<Menu>["stayInViewport"];
-    flipOnOverflow?: ComponentProps<Menu>["flipOnOverflow"];
-    _boxShadow?: string;
-    _height?: string;
-    _width?: string | undefined;
-    _maxHeight?: string | undefined;
-    _minWidth?: string;
-    _borderRadius?: string;
-    openingId?: ComponentProps<Menu>["openingId"];
-    _drawerOverflow?: string | undefined;
+    drawerProps?: Omit<ComponentProps<Drawer>, "open"> | undefined;
+    menuProps?: Omit<ComponentProps<Menu>, "open"> | undefined;
 }, {
     default: {
         isDrawer: boolean;

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

@@ -9,42 +9,45 @@
   import type Drawer from '../../simple/navigation/Drawer.svelte';
   import type Menu from '../../simple/common/Menu.svelte';
   import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
+  import lodash from 'lodash'
 
   export let open: boolean = false,
-    activator: HTMLElement,
-    drawerPosition: ComponentProps<Drawer>['position'] = 'bottom',
-    menuAnchor: ComponentProps<Menu>['anchor'] = 'bottom-center',
     elements: ComponentProps<SelectableVerticalList>['elements'] = [],
-    stayInViewport: ComponentProps<MenuOrDrawer>['stayInViewport'] = true,
-    flipOnOverflow: ComponentProps<MenuOrDrawer>['flipOnOverflow'] = false,
-    _boxShadow: string = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
-    _height: string = "300px",
-    _maxHeight: string | undefined = undefined,
-    _minWidth: string = "100px",
-    _borderRadius: string = "5px",
-    openingId: ComponentProps<MenuOrDrawer>['openingId'] = undefined;
+    drawerProps: Omit<ComponentProps<Drawer>, 'open'> | undefined = undefined,
+    menuProps: Omit<ComponentProps<Menu>, 'open'> | undefined = undefined
 
   let selected: ArrayElement<NonNullable<ComponentProps<SelectableVerticalList>['elements']>>['name'] | undefined
   let focused: ArrayElement<NonNullable<ComponentProps<SelectableVerticalList>['elements']>>['name'] | undefined
   $: if(!!selected) selected = undefined
   $: if(!!focused && !open) focused = undefined
+
+  const menuPropsDefaultValue = {
+    anchor: 'bottom-center',
+    stayInViewport: true,
+    flipOnOverflow: false,
+    _boxShadow: "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
+    _height: 'fit-content',
+    _maxHeight: undefined,
+    _minWidth: '100px',
+    _borderRadius: '5px',
+    openingId: undefined
+  }
+
+  $: finalMenuProps = lodash.clone(lodash.merge(menuPropsDefaultValue, menuProps))
+
+  const drawerPropsDefaultValue = {
+    position: 'bottom'
+  }
+
+  $: finalDrawerProps = lodash.clone(lodash.merge(drawerPropsDefaultValue, drawerProps))
 </script>
 
 <MenuOrDrawer
   bind:open
-  bind:activator
-  bind:drawerPosition
-  bind:menuAnchor
-  bind:stayInViewport
-  bind:flipOnOverflow
-  {_boxShadow}
-  {_height}
-  {_maxHeight}
-  {_minWidth}
-  {_borderRadius}
+  drawerProps={finalDrawerProps}
+  menuProps={finalMenuProps}
   let:isDrawer
   --drawer-default-space={`${Math.min(elements?.length || 0, 5) * 56}px`}
-  bind:openingId
 >
   <div class="selectable-list-wrapper">
     <SelectableVerticalList

package/dist/components/composed/common/MenuOrDrawerOptions.svelte.d.ts

@@ -1,7 +1,6 @@
 export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 import '../../../css/main.css';
 import type { ComponentProps } from 'svelte';
-import MenuOrDrawer from "./MenuOrDrawer.svelte";
 import type Drawer from '../../simple/navigation/Drawer.svelte';
 import type Menu from '../../simple/common/Menu.svelte';
 import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
@@ -20,18 +19,9 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const MenuOrDrawerOptions: $$__sveltets_2_IsomorphicComponent<{
     open?: boolean;
-    activator: HTMLElement;
-    drawerPosition?: ComponentProps<Drawer>["position"];
-    menuAnchor?: ComponentProps<Menu>["anchor"];
     elements?: ComponentProps<SelectableVerticalList>["elements"];
-    stayInViewport?: ComponentProps<MenuOrDrawer>["stayInViewport"];
-    flipOnOverflow?: ComponentProps<MenuOrDrawer>["flipOnOverflow"];
-    _boxShadow?: string;
-    _height?: string;
-    _maxHeight?: string | undefined;
-    _minWidth?: string;
-    _borderRadius?: string;
-    openingId?: ComponentProps<MenuOrDrawer>["openingId"];
+    drawerProps?: Omit<ComponentProps<Drawer>, "open"> | undefined;
+    menuProps?: Omit<ComponentProps<Menu>, "open"> | undefined;
 }, {
     select: CustomEvent<{
         element: import("../../simple/lists/SelectableVerticalList.svelte").Element;

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

@@ -56,6 +56,38 @@
 </script>
 
 {#if selectedItems > 0}
+  {#each actions as action}
+    {#if !!action.info && !action.disabled}
+      <ToolTip
+        appearTimeout={500}
+        activator={infoActivators[action.label]}
+      >
+        <div
+          style:background-color='rgb(var(--global-color-background-300), .95)'
+          style:border-radius="5px"
+          style:padding="10px"
+          style:color='rgb(var(--global-color-contrast-900))'
+        > 
+          {action.info}
+        </div>
+      </ToolTip>
+    {/if}
+    {#if !!action.disabledInfo && action.disabled}
+      <ToolTip
+        appearTimeout={300}
+        activator={disabledInfoActivators[action.label]}
+      >
+        <div
+          style:background-color='rgb(var(--global-color-background-300), .95)'
+          style:border-radius="5px"
+          style:padding="10px"
+          style:color='rgb(var(--global-color-contrast-900))'
+        > 
+          {action.disabledInfo}
+        </div>
+      </ToolTip>
+    {/if}
+  {/each}
   <div
     class="container-{position}"
     transition:fly={{ delay: 150, duration: 150, y: -10, easing: cubicIn }}
@@ -102,36 +134,8 @@
                       --icon-size="16px"
                     />
                   </div>
-                  <ToolTip
-                    appearTimeout={500}
-                    activator={infoActivators[action.label]}
-                  >
-                    <div
-                      style:background-color='rgb(var(--global-color-background-300), .95)'
-                      style:border-radius="5px"
-                      style:padding="10px"
-                      style:color='rgb(var(--global-color-contrast-900))'
-                    > 
-                      {action.info}
-                    </div>
-                  </ToolTip>
                 {/if}
                 {action.label}
-                {#if !!action.disabledInfo && action.disabled}
-                  <ToolTip
-                    appearTimeout={300}
-                    activator={disabledInfoActivators[action.label]}
-                  >
-                    <div
-                      style:background-color='rgb(var(--global-color-background-300), .95)'
-                      style:border-radius="5px"
-                      style:padding="10px"
-                      style:color='rgb(var(--global-color-contrast-900))'
-                    > 
-                      {action.disabledInfo}
-                    </div>
-                  </ToolTip>
-                {/if}
               </div>
             </Button>
           {/each}
@@ -174,11 +178,15 @@
   <div class="menu-or-drawer">
     <MenuOrDrawer
       bind:open={openMoreActions}
-      activator={moreActionsActivator}
-      drawerPosition={position == 'bottom' ? 'top' : 'bottom'}
-      menuAnchor='bottom-center'
-      openingId='more-actions'
-      _drawerOverflow='hidden'
+      menuProps={{
+        activator: moreActionsActivator,
+        anchor: 'bottom-center',
+        openingId: 'more-actions',
+      }}
+      drawerProps={{
+        position: position == 'bottom' ? 'top' : 'bottom',
+        _overflow: 'hidden'  
+      }}
       let:isMenu
       let:isDrawer
     >

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

@@ -1,24 +1,26 @@
 :root {
   --dynamic-table-default-cell-editor-background-color: rgb(var(--global-color-background-300));
   --dynamic-table-default-quick-filter-background-color: rgb(var(--global-color-background-300));
-  --dynamic-table-default-row-background-color-hover: rgb(var(--global-color-background-400));
-  --dynamic-table-default-expanded-row-background-color: rgb(var(--global-color-background-500));
+  --dynamic-table-default-row-background-color-hover: rgb(var(--global-color-background-200));
+  --dynamic-table-default-expanded-row-background-color: rgb(var(--global-color-background-300));
   --dynamic-table-default-selected-row-background-color: rgb(var(--global-color-primary-200));
   --dynamic-table-default-row-disabled-background-color: rgb(var(--global-color-primary-400));
-  --dynamic-table-default-header-background-color: rgb(var(--global-color-background-500));
+  --dynamic-table-default-header-background-color: rgb(var(--global-color-background-400));
   --dynamic-table-default-background-color: transparent;
   --dynamic-table-default-max-height: 70vh;
-  --dynamic-table-default-header-padding: .2rem .5rem;
+  --dynamic-table-default-header-padding: 4px 0 4px 8px;
   --dynamic-table-default-header-font-size: 13px;
   --dynamic-table-default-header-font-weight: 700;
   --dynamic-table-default-subheader-background-color: rgb(var(--global-color-background-100));
   --dynamic-table-default-hover-color: rgb(var(--global-color-contrast-800), .7);
   --dynamic-table-default-header-border-radius: 5px;
-  --dynamic-table-default-header-height: 30px;
-  --dynamic-table-default-row-min-height: auto;
+  --dynamic-table-default-header-height: 25px;
+  --dynamic-table-default-row-min-height: 45px;
   --dynamic-table-default-end-line-background-color: transparent;
   --dynamic-table-default-end-line-color: rgb(var(--global-color-contrast-500));
   --dynamic-table-default-end-line-text-color: rgb(var(--global-color-contrast-500));
-  --dynamic-table-default-border-collapse: separate;
-  --dynamic-table-default-cell-border: 1px solid transparent;
+  --dynamic-table-default-border-collapse: collapse;
+  --dynamic-table-default-cell-border: none;
+  --dynamic-table-default-label-margin: 0px 4px 0px 0px;
+  --dynamic-table-default-label-font-size: small;
 }