@likable-hair/svelte 4.0.6 → 4.0.8

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

@@ -2,13 +2,12 @@
 </script>
 
 <script lang="ts">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';
-let { selectedItems, showSelectContainer, isSelectedAll, totalRows, slotSelectActionsContainer = $bindable(), disabled, loading, actionsForSelectedItems, position = 'top', lang = 'en' } = $props();
-let actions = $state([]), extraActions = $state([]), moreActionsActivator = $state(), openMoreActions = $state(false), infoActivators = $state({}), disabledInfoActivators = $state({});
+let { selectedItems, disabled, actionsForSelectedItems, position = 'top', lang = 'en', onClose, } = $props();
+let actions = $state([]), extraActions = $state([]), slotSelectActionsContainer = $state(), moreActionsActivator = $state(), openMoreActions = $state(false), infoActivators = $state({}), disabledInfoActivators = $state({});
 $effect(() => {
     if (!!slotSelectActionsContainer) {
         let numberOfSplit = $mediaQuery.xl ? 5 :
@@ -28,7 +27,7 @@ $effect(() => {
 });
 </script>
 
-{#if selectedItems && selectedItems.length > 0 && showSelectContainer}
+{#if selectedItems > 0}
   <div
     class="container-{position}"
     transition:fly={{ delay: 150, duration: 150, y: -10, easing: cubicIn }}
@@ -37,8 +36,13 @@ $effect(() => {
       class="select-container"
     >
       <div>
-        <button class="select-info" onclick={() => (selectedItems = [], infoActivators = {}, disabledInfoActivators = {})}>
-          {!!isSelectedAll ? totalRows : selectedItems.length} {lang == 'en' ? 'items selected' : 'righe selezionate'}
+        <button class="select-info" {disabled} onclick={() => {
+            infoActivators = {}
+            disabledInfoActivators = {}
+            if(onClose) onClose()
+          }}
+        >
+          {selectedItems} {lang == 'en' ? 'items selected' : 'righe selezionate'}
           <Icon name="mdi-close" />
         </button>
       </div>
@@ -59,7 +63,9 @@ $effect(() => {
                 --button-box-shadow: none;
               '
               --button-height="20px"
-              disabled={action.disabled}
+              --circular-loader-height="17px"
+              disabled={action.disabled || action.loading || disabled}
+              loading={action.loading}
               onclick={action.onClick}
             >
               <div class="action" bind:this={disabledInfoActivators[action.label]}>
@@ -74,7 +80,7 @@ $effect(() => {
                     />
                   </div>
                   <ToolTip
-                    appearTimeout={1000}
+                    appearTimeout={500}
                     activator={infoActivators[action.label]}
                   >
                     <div
@@ -90,7 +96,7 @@ $effect(() => {
                 {action.label}
                 {#if !!action.disabledInfo && action.disabled}
                   <ToolTip
-                    appearTimeout={1000}
+                    appearTimeout={300}
                     activator={disabledInfoActivators[action.label]}
                   >
                     <div
@@ -124,7 +130,6 @@ $effect(() => {
                   margin-left: 8px;
                 '
                 --button-height="20px"
-                disabled={disabled || loading}
                 onclick={(e) => {
                   openMoreActions = !openMoreActions;
                 }}
@@ -172,8 +177,10 @@ $effect(() => {
                 --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}
               onclick={action.onClick}
             >
               <div class="action" bind:this={disabledInfoActivators[action.label]}>
@@ -188,7 +195,7 @@ $effect(() => {
                     />
                   </div>
                   <ToolTip
-                    appearTimeout={1000}
+                    appearTimeout={500}
                     activator={infoActivators[action.label]}
                   >
                     <div
@@ -204,7 +211,7 @@ $effect(() => {
                 {action.label}
                 {#if !!action.disabledInfo && action.disabled}
                   <ToolTip
-                    appearTimeout={1000}
+                    appearTimeout={300}
                     activator={disabledInfoActivators[action.label]}
                   >
                     <div
@@ -292,6 +299,19 @@ $effect(() => {
       --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

@@ -2,26 +2,22 @@ export type Action = {
     label: string;
     icon?: string;
     disabled?: boolean;
+    loading?: boolean;
     info?: string;
     disabledInfo?: string;
     onClick: NonNullable<ComponentProps<typeof Button>['onclick']>;
 };
 import { Button } from "../../..";
 import type { ComponentProps } from "svelte";
-import DynamicTable from "../list/DynamicTable.svelte";
 import './QuickActions.css';
 interface Props {
-    selectedItems: ComponentProps<typeof DynamicTable>["selectedItems"];
-    showSelectContainer: boolean;
-    isSelectedAll: boolean;
-    totalRows: number;
-    slotSelectActionsContainer?: HTMLElement;
+    selectedItems: number;
     disabled: boolean;
-    loading: boolean;
     actionsForSelectedItems: Action[];
     position?: 'top' | 'bottom';
     lang?: 'it' | 'en';
+    onClose?: () => void;
 }
-declare const QuickActions: import("svelte").Component<Props, {}, "slotSelectActionsContainer">;
+declare const QuickActions: import("svelte").Component<Props, {}, "">;
 type QuickActions = ReturnType<typeof QuickActions>;
 export default QuickActions;