@poirazis/supercomponents-shared 1.1.8 → 1.2.1

package/src/lib/SuperTree/SuperTree.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onDestroy } from "svelte";
+  import Tooltip from "../UI/elements/Tooltip.svelte";
   const dispatch = createEventDispatcher();
 
   export let tree;
@@ -13,40 +14,70 @@
     ? $selectedGroups.includes(tree.id)
     : !!$selectedNodes.find((x) => x.id == tree.id);
 
+  $: if (hasSelectedDescendant(tree.children || [])) open = true;
+
   let labelElement;
-  $: isOverflowing = labelElement && labelElement.scrollWidth > labelElement.clientWidth;
+  let tooltipShow = false;
+  let tooltipTimer;
+
+  $: isOverflowing =
+    labelElement && labelElement.scrollWidth > labelElement.clientWidth;
+
   $: tooltip = isOverflowing ? tree.label || "Not Set" : null;
 
+  const showTooltip = () => {
+    if (!tooltip) return;
+    if (tooltipTimer) clearTimeout(tooltipTimer);
+    tooltipTimer = setTimeout(() => {
+      tooltipShow = true;
+    }, 750);
+  };
+
+  const hideTooltip = () => {
+    if (tooltipTimer) {
+      clearTimeout(tooltipTimer);
+      tooltipTimer = null;
+    }
+    tooltipShow = false;
+  };
+
   const toggleOpen = (e) => {
     if (tree.disabled) return;
+    if (open && hasSelectedDescendant(tree.children || [])) return;
     open = !open;
     dispatch("nodeClick", { id: tree.id, label: tree.label });
   };
 
   // Recursion
-  const hasChildSelected = (children) => {
-    let found = false;
-    if (!$selectedNodes.length) return found;
-
-    if (children.findIndex((x) => x.id == $selectedNodes[0].id) > -1) {
-      found = true;
-    } else {
-      children.forEach((element) => {
-        found = hasChildSelected(element.children);
-      });
+  const hasSelectedDescendant = (children) => {
+    if (!children || !children.length) return false;
+    for (let child of children) {
+      if (
+        child.isGroup
+          ? $selectedGroups.includes(child.id)
+          : $selectedNodes.some((node) => node.id === child.id)
+      ) {
+        return true;
+      }
+      if (hasSelectedDescendant(child.children)) {
+        return true;
+      }
     }
-    return found;
+    return false;
   };
 
   const toggleNode = (e) => {
-    if (tree.selectable && !tree.disabled)
-      dispatch("nodeSelect", {
-        id: tree.id,
-        label: tree.label,
-        row: tree.row,
-        group: tree.group,
-      });
+    dispatch("nodeSelect", {
+      id: tree.id,
+      label: tree.label,
+      row: tree.row,
+      group: tree.group,
+    });
   };
+
+  onDestroy(() => {
+    if (tooltipTimer) clearTimeout(tooltipTimer);
+  });
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
@@ -58,28 +89,33 @@
   class:is-disabled={tree.disabled}
   class:is-open={open}
 >
-  <div
-    class="spectrum-TreeView-itemLink"
-    style:padding-left={tree?.children?.length ? "0.25rem" : "1.5rem"}
-    style:padding-right={"0.5rem"}
-  >
-    {#if tree.children?.length}
-      <i
-        class={"ri-arrow-right-s-line"}
-        class:open
-        style:z-index={1}
-        style:font-size={"16px"}
-        on:mousedown|self|preventDefault|stopPropagation={toggleOpen}
-      />
-    {/if}
+  <div class="spectrum-TreeView-itemLink" style:padding-right={"0.5rem"}>
+    <i
+      class={"ri-arrow-right-s-line"}
+      class:open
+      class:is-disabled={tree.children.length == 0 || tree.disabled}
+      style:font-size={"16px"}
+      style:z-index={"1"}
+      on:mousedown|stopPropagation={toggleOpen}
+    ></i>
     <div
-      style:z-index={2}
       style:width={"100%"}
-      on:mousedown|preventDefault|stopPropagation={toggleNode}
+      style:z-index={"1"}
+      on:mousedown|stopPropagation|preventDefault={toggleNode}
     >
-      <span class="spectrum-TreeView-itemLabel" style:padding-left={"0.25rem"} bind:this={labelElement} title={tooltip}
-        >{tree.label || "Not Set"}</span
+      <div
+        class="spectrum-TreeView-itemLabel"
+        style:padding-left={"0.25rem"}
+        style:z-index={"10"}
+        style:text-overflow={"ellipsis"}
+        style:overflow={"hidden"}
+        style:white-space={"nowrap"}
+        bind:this={labelElement}
+        on:mouseenter={showTooltip}
+        on:mouseleave={hideTooltip}
       >
+        {tree.label || "Not Set"}
+      </div>
     </div>
 
     {#if selected}
@@ -91,6 +127,10 @@
     {/if}
   </div>
 
+  {#if tooltip}
+    <Tooltip anchor={labelElement} content={tooltip} show={tooltipShow} />
+  {/if}
+
   {#if tree.children?.length}
     <ul class="spectrum-TreeView">
       {#each tree.children as node, idx}
@@ -119,11 +159,17 @@
     align-items: center;
     gap: 0.25rem;
     max-height: 1.75rem;
+    padding: 0.25rem 0.5rem;
   }
 
   i {
     transition: all 130ms;
   }
+
+  i.is-disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
   .open {
     transform: rotate(90deg);
   }

package/src/lib/UI/elements/Checkbox.svelte

@@ -5,6 +5,7 @@
   export let checked: boolean = false;
   export let partial: boolean = false;
   export let disabled: boolean = false;
+  export let hovered: boolean = false;
 
   function toggle() {
     if (disabled) return;
@@ -15,11 +16,11 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<button class:checked on:click={toggle}>
+<button class:checked class:disabled class:hovered on:click={toggle}>
   {#if checked}
-    <i class="ph ph-check" />
+    <i class="ph ph-check"></i>
   {:else if partial}
-    <i class="ph ph-minus" />
+    <i class="ph ph-minus"></i>
   {/if}
 </button>
 
@@ -30,20 +31,49 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 1rem;
-    height: 1rem;
+    width: 0.85rem;
+    height: 0.85rem;
     border-radius: 0.25rem;
     border: 1px solid var(--spectrum-global-color-gray-500);
     background-color: var(--spectrum-global-color-gray-50);
+    transition: all 0.1s ease-in-out;
   }
 
   button.checked {
     border-color: var(--spectrum-global-color-gray-700);
   }
 
+  button.disabled {
+    cursor: not-allowed;
+    background-color: var(--spectrum-global-color-gray-200);
+    border-color: var(--spectrum-global-color-gray-300);
+  }
+
+  button:hover:not(.disabled),
+  button.hovered:not(.disabled) {
+    border: 1px solid var(--spectrum-global-color-gray-600);
+  }
+
+  button:active {
+    background-color: var(--spectrum-global-color-blue-100);
+  }
+  button:focus {
+    border: 1px solid var(--spectrum-global-color-gray-700);
+  }
+
   i {
-    font-size: 0.75rem;
+    font-size: 0.65rem;
     font-weight: 700;
     color: var(--spectrum-global-color-gray-700);
+    animation: scaleIn 0.13s ease-out;
+  }
+
+  @keyframes scaleIn {
+    from {
+      transform: scale(0);
+    }
+    to {
+      transform: scale(1);
+    }
   }
 </style>

package/src/lib/UI/elements/IconButton.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { createEventDispatcher, onDestroy } from "svelte";
+  import Tooltip from "./Tooltip.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  export let icon: string;
+  export let disabled: boolean = false;
+  export let size: "small" | "medium" | "large" = "medium";
+  export let tooltip: string | undefined = undefined;
+  export let variant: "primary" | "secondary" | "warning" | "danger" =
+    "primary";
+
+  let buttonElement: HTMLButtonElement;
+  let tooltipShow = false;
+  let tooltipTimer: number | undefined;
+
+  const showTooltip = () => {
+    if (tooltipTimer) clearTimeout(tooltipTimer);
+    tooltipTimer = setTimeout(() => {
+      tooltipShow = true;
+    }, 750); // delay
+  };
+
+  const hideTooltip = () => {
+    if (tooltipTimer) {
+      clearTimeout(tooltipTimer);
+      tooltipTimer = undefined;
+    }
+    tooltipShow = false;
+  };
+
+  onDestroy(() => {
+    if (tooltipTimer) clearTimeout(tooltipTimer);
+  });
+
+  function handleClick() {
+    if (disabled) return;
+    dispatch("click");
+  }
+</script>
+
+<!-- svelte-ignore a11y_consider_explicit_label -->
+<button
+  bind:this={buttonElement}
+  class="icon-button {size} {variant}"
+  class:disabled
+  on:click={handleClick}
+  on:mouseenter={tooltip ? showTooltip : undefined}
+  on:mouseleave={tooltip ? hideTooltip : undefined}
+>
+  <i class="ph ph-{icon}"></i>
+</button>
+
+{#if tooltip}
+  <Tooltip anchor={buttonElement} content={tooltip} show={tooltipShow} />
+{/if}
+
+<style>
+  .icon-button {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    transition: all 0.1s ease-in-out;
+    background-color: transparent;
+    border: 1px solid transparent;
+  }
+
+  .icon-button:hover:not(.disabled) {
+    background-color: var(--spectrum-global-color-gray-200);
+  }
+
+  .icon-button:active:not(.disabled) {
+    background-color: var(--spectrum-global-color-gray-300);
+  }
+
+  .icon-button.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .icon-button.small {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .icon-button.medium {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .icon-button.large {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .icon-button.small i {
+    font-size: 0.9rem;
+  }
+
+  .icon-button.medium i {
+    font-size: 1rem;
+  }
+
+  .icon-button.large i {
+    font-size: 1.25rem;
+  }
+
+  .icon-button.warning {
+    color: var(--spectrum-global-color-red-400);
+  }
+</style>

package/src/lib/UI/elements/Tooltip.svelte

@@ -0,0 +1,65 @@
+<script>
+  import SuperPopover from "../../SuperPopover/SuperPopover.svelte";
+  import { onDestroy } from "svelte";
+
+  export let anchor;
+  export let content;
+  export let show = false;
+  export let delay = 750;
+  export let align = "top";
+
+  let timer;
+  let isHovered = false;
+
+  const startTimer = () => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      show = true;
+    }, delay);
+  };
+
+  const clearTimer = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    show = false;
+  };
+
+  const handleMouseEnter = () => {
+    isHovered = true;
+    startTimer();
+  };
+
+  const handleMouseLeave = () => {
+    isHovered = false;
+    clearTimer();
+  };
+
+  onDestroy(() => {
+    clearTimer();
+  });
+</script>
+
+{#if show}
+  <SuperPopover {anchor} {align} open={show} dismissible={false} animate={true}>
+    <div class="tooltip-content">
+      {content}
+    </div>
+  </SuperPopover>
+{/if}
+
+<style>
+  .tooltip-content {
+    padding: 8px 12px;
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--spectrum-global-color-gray-900);
+    background-color: var(--spectrum-global-color-gray-50);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    max-width: 200px;
+    word-wrap: break-word;
+  }
+</style>