@likable-hair/svelte 3.3.16 → 3.3.18

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

@@ -2,6 +2,8 @@
   --quick-actions-default-background-color: rgb(var(--global-color-background-200));
   --quick-actions-default-selected-items-button-background-color: rgb(var(--global-color-background-500));
   --quick-actions-default-selected-items-button-background-color-hover: rgb(var(--global-color-background-300));
+  --quick-actions-default-selected-items-button-background-color-disabled: rgb(var(--global-color-background-300), .5);
+  --quick-actions-default-selected-items-button-color-disabled: rgb(var(--global-color-contrast-900), .5);
   --quick-actions-default-z-index: 48;
 
   --quick-actions-default-buttons-background-color: var(--quick-actions-background-color, var(--quick-actions-default-background-color));

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

@@ -1,13 +1,14 @@
 <script context="module"></script>
 
 <script>import { Button, Icon, mediaQuery, ToolTip } from "../../..";
-import DynamicTable from "../list/DynamicTable.svelte";
 import { fly } from "svelte/transition";
 import { cubicIn } from "svelte/easing";
 import MenuOrDrawer from "./MenuOrDrawer.svelte";
 import "./QuickActions.css";
-export let selectedItems, showSelectContainer, isSelectedAll, totalRows, slotSelectActionsContainer, disabled, loading, actionsForSelectedItems, position = "top", lang = "en";
-let actions = [], extraActions = [], moreActionsActivator, openMoreActions = false, infoActivators = {}, disabledInfoActivators = {};
+import { createEventDispatcher } from "svelte";
+export let selectedItems, disabled, actionsForSelectedItems, position = "top", lang = "en";
+let actions = [], extraActions = [], slotSelectActionsContainer, moreActionsActivator, openMoreActions = false, infoActivators = {}, disabledInfoActivators = {};
+const dispatch = createEventDispatcher();
 $: {
   if (!!slotSelectActionsContainer) {
     let numberOfSplit = $mediaQuery.xl ? 5 : $mediaQuery.l ? 4 : $mediaQuery.m ? 2 : $mediaQuery.s ? 0 : $mediaQuery.xs ? 0 : 3;
@@ -22,7 +23,7 @@ $: {
 }
 </script>
 
-{#if selectedItems && selectedItems.length > 0 && showSelectContainer}
+{#if selectedItems > 0}
   <div
     class="container-{position}"
     transition:fly={{ delay: 150, duration: 150, y: -10, easing: cubicIn }}
@@ -31,8 +32,8 @@ $: {
       class="select-container"
     >
       <div>
-        <button class="select-info" on:click={() => (selectedItems = [], infoActivators = {}, disabledInfoActivators = {})}>
-          {!!isSelectedAll ? totalRows : selectedItems.length} {lang == 'en' ? 'items selected' : 'righe selezionate'}
+        <button class="select-info" {disabled} on:click={() => (infoActivators = {}, disabledInfoActivators = {}, dispatch('close', {}))}>
+          {selectedItems} {lang == 'en' ? 'items selected' : 'righe selezionate'}
           <Icon name="mdi-close" />
         </button>
       </div>
@@ -53,7 +54,9 @@ $: {
                 --button-box-shadow: none;
               '
               --button-height="20px"
-              disabled={action.disabled}
+              --circular-loader-height="17px"
+              disabled={action.disabled || action.loading || disabled}
+              loading={action.loading}
               on:click={action.onClick}
             >
               <div class="action" bind:this={disabledInfoActivators[action.label]}>
@@ -68,7 +71,7 @@ $: {
                     />
                   </div>
                   <ToolTip
-                    appearTimeout={1000}
+                    appearTimeout={500}
                     activator={infoActivators[action.label]}
                   >
                     <div
@@ -84,7 +87,7 @@ $: {
                 {action.label}
                 {#if !!action.disabledInfo && action.disabled}
                   <ToolTip
-                    appearTimeout={1000}
+                    appearTimeout={300}
                     activator={disabledInfoActivators[action.label]}
                   >
                     <div
@@ -118,7 +121,6 @@ $: {
                   margin-left: 8px;
                 '
                 --button-height="20px"
-                disabled={disabled || loading}
                 on:click={(e) => {
                   openMoreActions = !openMoreActions;
                 }}
@@ -167,8 +169,10 @@ $: {
               --button-disabled-color: var(--quick-actions-buttons-color-disabled, var(--quick-actions-default-buttons-color-disabled));
               --button-box-shadow: none;
             '
-            --button-height="35px"
-            disabled={action.disabled}
+            --button-height="30px"
+            --circular-loader-height="25px"
+            disabled={action.disabled || action.loading || disabled}
+            loading={action.loading}
             on:click={action.onClick}
           >
             <div class="action" bind:this={disabledInfoActivators[action.label]}>
@@ -183,7 +187,7 @@ $: {
                   />
                 </div>
                 <ToolTip
-                  appearTimeout={1000}
+                  appearTimeout={500}
                   activator={infoActivators[action.label]}
                 >
                   <div
@@ -199,7 +203,7 @@ $: {
               {action.label}
               {#if !!action.disabledInfo && action.disabled}
                 <ToolTip
-                  appearTimeout={1000}
+                  appearTimeout={300}
                   activator={disabledInfoActivators[action.label]}
                 >
                   <div
@@ -286,6 +290,19 @@ $: {
       --quick-actions-selected-items-button-background-color-hover,
       var(--quick-actions-default-selected-items-button-background-color-hover)
     );
+    cursor: pointer;
+  }
+
+  .select-info:disabled {
+    background-color: var(
+      --quick-actions-selected-items-button-background-color-disabled,
+      var(--quick-actions-default-selected-items-button-background-color-disabled)
+    );
+    color: var(
+      --quick-actions-selected-items-button-color-disabled,
+      var(--quick-actions-default-selected-items-button-color-disabled)
+    );
+    cursor: not-allowed;
   }
 
   .select-actions-container {

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

@@ -3,29 +3,25 @@ export type Action = {
     label: string;
     icon?: string;
     disabled?: boolean;
+    loading?: boolean;
     info?: string;
     disabledInfo?: string;
     onClick: (e: CustomEvent<{
         nativeEvent: MouseEvent;
     }>) => void;
 };
-import type { ComponentProps } from "svelte";
-import DynamicTable from "../list/DynamicTable.svelte";
 import './QuickActions.css';
 declare const __propDef: {
     props: {
-        selectedItems: ComponentProps<DynamicTable["selectedItems"]>[];
-        showSelectContainer: boolean;
-        isSelectedAll: boolean;
-        totalRows: number;
-        slotSelectActionsContainer: HTMLElement | undefined;
+        selectedItems: number;
         disabled: boolean;
-        loading: boolean;
         actionsForSelectedItems: Action[];
         position?: "bottom" | "top" | undefined;
         lang?: "it" | "en" | undefined;
     };
     events: {
+        close: CustomEvent<{}>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};