@poirazis/supercomponents-shared 1.2.16 → 1.2.18

package/src/lib/SuperTableColumn/parts/SuperColumnBody.svelte

@@ -21,6 +21,8 @@
     $columnState == "EditingCell" &&
     ($columnSettings.highlighters == "vertical" ||
       $columnSettings.highlighters == "both");
+
+  $: console.log(isLast);
 </script>
 
 <div
@@ -32,6 +34,7 @@
   class:inserting
   class:filtered={$columnState == "Filtered"}
   class:is-editing={editing}
+  class:is-last={isLast}
 >
   {#each $stbVisibleRows as index (index)}
     <SuperColumnRow

package/src/lib/SuperTableColumn/parts/SuperColumnHeader.svelte

@@ -108,51 +108,53 @@
   on:mouseenter={() => (hovered = true)}
   on:mouseleave={() => (hovered = false)}
 >
-  {#if $columnState == "Entering" || $columnState == "Filtered"}
-    {#if $columnOptions.canFilter == "advanced"}
-      <i
-        class="ri-filter-3-line"
-        tabindex="0"
-        style="align-self: center; font-size: 14px;"
-        on:click|preventDefault={() =>
-          (showFilteringOptions = !showFilteringOptions)}
-      ></i>
-    {/if}
-    <svelte:component
-      this={$columnOptions.headerComponent}
-      cellOptions={{
-        ...$cellOptions,
-        placeholder: filterOperator,
-        disabled: filterOperator == "empty" || filterOperator == "notEmpty",
-      }}
-      value={filterValue}
-      fieldSchema={$columnOptions.schema}
-      multi={filterOperator == "containsAny" || filterOperator == "oneOf"}
-      on:change={handleValueChange}
-      on:focusout={handleBlur}
-    />
-  {:else}
-    <div
-      class="headerLabel"
-      style:justify-content={$columnOptions?.headerAlign}
-      on:click={columnState.headerClicked}
-    >
-      <div class="innerText" class:sortable={$columnOptions.canSort}>
-        {$columnOptions.displayName ?? $columnOptions.name}
-      </div>
-    </div>
-  {/if}
-
-  {#if $columnOptions.canSort && $columnState == "Idle"}
-    <span class="placeholder" on:click={columnState.sort}>
-      {#if hovered || sorted}
+  {#key $columnState}
+    {#if $columnState == "Entering" || $columnState == "Filtered"}
+      {#if $columnOptions.canFilter == "advanced"}
         <i
-          class={sorted == "ascending" ? "ri-sort-asc" : "ri-sort-desc"}
-          class:sorted
+          class="ri-filter-3-line"
+          tabindex="0"
+          style="align-self: center; font-size: 14px;"
+          on:click|preventDefault={() =>
+            (showFilteringOptions = !showFilteringOptions)}
         ></i>
       {/if}
-    </span>
-  {/if}
+      <svelte:component
+        this={$columnOptions.headerComponent}
+        cellOptions={{
+          ...$cellOptions,
+          placeholder: filterOperator,
+          disabled: filterOperator == "empty" || filterOperator == "notEmpty",
+        }}
+        value={filterValue}
+        fieldSchema={$columnOptions.schema}
+        multi={filterOperator == "containsAny" || filterOperator == "oneOf"}
+        on:change={handleValueChange}
+        on:focusout={handleBlur}
+      />
+    {:else}
+      <div
+        class="headerLabel"
+        style:justify-content={$columnOptions?.headerAlign}
+        on:click={columnState.headerClicked}
+      >
+        <div class="innerText" class:sortable={$columnOptions.canSort}>
+          {$columnOptions.displayName ?? $columnOptions.name}
+        </div>
+      </div>
+    {/if}
+
+    {#if $columnOptions.canSort && $columnState == "Idle"}
+      <span class="placeholder" on:click={columnState.sort}>
+        {#if hovered || sorted}
+          <i
+            class={sorted == "ascending" ? "ri-sort-asc" : "ri-sort-desc"}
+            class:sorted
+          ></i>
+        {/if}
+      </span>
+    {/if}
+  {/key}
 </div>
 
 {#if $columnOptions.canFilter == "advanced" && $columnState != "Idle"}

package/src/lib/SuperTableColumn/parts/SuperColumnRow.svelte

@@ -72,7 +72,7 @@
         }
       }
       return obj;
-    } else return obj[path] ?? undefined;
+    } else return obj[path];
   };
 
   const onClick = () => {

package/src/lib/SuperTabs/SuperTabs.svelte

@@ -16,6 +16,7 @@
   export let list_icon;
   export let list_title;
   export let tabsWidth = "200px";
+  export let listBackground = "var(--spectrum-global-color-gray-50)";
 
   export let quietTabs;
 
@@ -44,11 +45,12 @@
       style:justify-content={buttonsAlignment}
       style:--tab-alignment={tabsAlignment}
       style:--tab-track-thickness="1px"
+      style:--list-background={listBackground}
     >
       {#if theme === "list" && list_title}
         <div class="tab list-title">
           {#if list_icon}
-            <i class={list_icon}></i>
+            <i class={"ph ph-" + list_icon}></i>
           {/if}
           {list_title}
         </div>
@@ -73,7 +75,7 @@
           {#if container.icon}
             <i
               class={container.icon}
-              style:font-size={tabsIconsOnly ? "20px" : "inherit"}
+              style:font-size={tabsIconsOnly ? "20px" : "12px"}
               style:color={container.color}
             ></i>
           {/if}
@@ -110,6 +112,14 @@
     margin-bottom: unset;
     --selected-tab: var(--spectrum-global-color-gray-200);
   }
+  .outer-tabs.vertical.list {
+    padding-left: unset;
+    padding-right: unset;
+    flex-direction: column;
+    align-items: stretch;
+    --selected-tab: var(--spectrum-global-color-gray-200);
+    border-right: 1px solid var(--spectrum-global-color-gray-300);
+  }
 
   .tabs {
     flex: auto;
@@ -125,20 +135,29 @@
 
   .tabs.list {
     gap: 0;
-    background-color: var(--spectrum-global-color-gray-50);
+    background-color: var(
+      --list-background,
+      var(--spectrum-global-color-gray-50)
+    );
     border: unset;
     padding: unset;
+    padding-bottom: 0.5rem;
   }
 
   .tabs.vertical {
     flex-direction: column;
     border-bottom: unset;
     border-top: unset;
+    border-right: 1px solid var(--spectrum-global-color-gray-300);
+    padding-right: 0.25rem;
     gap: 0.25rem;
   }
 
   .tabs.vertical.list {
     border-right: unset;
+    gap: 2px;
+    padding: 2px;
+    padding-top: 0rem;
   }
 
   .tab {
@@ -165,10 +184,9 @@
   .tab.button {
     border-radius: 0.25rem;
     padding: 0.5rem 1rem;
-    font-weight: 600;
     line-height: 14px;
     border: 1px solid transparent;
-    height: 1.85rem;
+    height: 1.75rem;
   }
 
   .tab.button.vertical {
@@ -184,51 +202,49 @@
 
   .tab.button.selected {
     color: var(--spectrum-global-color-gray-700);
-    border: 1px solid var(--spectrum-global-color-gray-300);
+    font-weight: 500;
+    border: 1px solid
+      rgb(from var(--spectrum-global-color-gray-400) r g b / 0.75);
     background-color: rgb(
       from var(--spectrum-global-color-gray-200) r g b / 0.85
     );
   }
 
   .tab.list {
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.25rem;
     max-width: 100%;
     color: var(--spectrum-global-color-gray-700);
-    font-weight: 400;
   }
 
   .tab.list.selected {
     color: var(--tab-selected-color);
     background-color: var(--selected-tab);
-    font-weight: 500;
   }
 
-  .tab.list:hover:not(.disabled):not(.list-section) {
-    background-color: var(--spectrum-global-color-gray-75);
+  .tab.list:hover:not(.disabled):not(.list-section):not(.selected) {
+    background-color: var(--spectrum-global-color-gray-100);
   }
 
   .tab.list-title {
-    padding: 0.75rem 1rem;
+    padding: 0.75rem 0.5rem;
     max-width: 100%;
     font-size: 12px;
     color: var(--spectrum-global-color-gray-800);
     text-transform: uppercase;
     letter-spacing: 1.2px;
-    font-weight: 500;
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
-    height: 3rem;
   }
 
   .tab.list-section {
     text-transform: uppercase;
     font-size: 11px;
-    font-weight: 400;
-    letter-spacing: 1.2px;
+    color: var(--spectrum-global-color-gray-600);
     background-color: transparent;
   }
 
   .tab.list-section.vertical {
-    margin-top: 12px;
+    margin-top: 4px;
   }
 
   .tab.list-section:hover {

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

@@ -6,9 +6,11 @@
   export let partial: boolean = false;
   export let disabled: boolean = false;
   export let hovered: boolean = false;
+  export let locked: boolean = false;
+  export let size: "small" | "medium" | "large" = "small";
 
   function toggle() {
-    if (disabled) return;
+    if (disabled || locked) return;
     checked = !checked;
     dispatch("change", { checked });
   }
@@ -16,11 +18,20 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<button class:checked class:disabled class:hovered on:click={toggle}>
+<button
+  class:checked
+  class:disabled
+  class:hovered
+  class:locked
+  class={size}
+  on:click={toggle}
+>
   {#if checked}
     <i class="ph ph-check"></i>
   {:else if partial}
     <i class="ph ph-minus"></i>
+  {:else if locked}
+    <i class="ph ph-lock"></i>
   {/if}
 </button>
 
@@ -31,16 +42,50 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    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;
   }
 
+  /* Small size */
+  button.small {
+    width: 0.85rem;
+    height: 0.85rem;
+  }
+
+  button.small i {
+    font-size: 0.65rem;
+  }
+
+  /* Medium size */
+  button.medium {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  button.medium i {
+    font-size: 0.75rem;
+  }
+
+  /* Large size */
+  button.large {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  button.large i {
+    font-size: 0.9rem;
+  }
+
   button.checked {
-    border-color: var(--spectrum-global-color-gray-700);
+    border-color: var(--spectrum-global-color-blue-600) !important;
+    background-color: var(--spectrum-global-color-blue-600);
+
+    & i {
+      color: white;
+      font-weight: 900;
+    }
   }
 
   button.disabled {
@@ -49,20 +94,33 @@
     border-color: var(--spectrum-global-color-gray-300);
   }
 
-  button:hover:not(.disabled),
-  button.hovered:not(.disabled) {
+  button.locked {
+    border-color: transparent;
+  }
+
+  button.locked i {
+    font-size: 1rem !important;
+    font-weight: 400 !important;
+    color: var(--spectrum-global-color-gray-500) !important;
+  }
+
+  button:hover:not(.disabled):not(.locked):not(.checked) {
+    background-color: var(--spectrum-global-color-gray-100);
+    border-color: var(--spectrum-global-color-gray-600);
+  }
+
+  button.hovered:not(.disabled):not(.locked):not(.checked) {
     border: 1px solid var(--spectrum-global-color-gray-600);
   }
 
-  button:active {
+  button:active:not(.disabled):not(.locked):not(.checked) {
     background-color: var(--spectrum-global-color-blue-100);
   }
-  button:focus {
+  button:focus:not(.disabled):not(.locked) {
     border: 1px solid var(--spectrum-global-color-gray-700);
   }
 
   i {
-    font-size: 0.65rem;
     font-weight: 700;
     color: var(--spectrum-global-color-gray-700);
     animation: scaleIn 0.13s ease-out;

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

@@ -0,0 +1,162 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+
+  export let checked: boolean | null = false;
+  export let disabled: boolean = false;
+  export let hovered: boolean = false;
+  export let size: "small" | "medium" | "large" = "medium";
+  export let tristate: boolean = false;
+
+  function toggle() {
+    if (disabled) return;
+
+    if (tristate) {
+      // Three-state cycle: off -> on -> null -> off
+      if (checked === false) {
+        checked = true;
+      } else if (checked === true) {
+        checked = null;
+      } else {
+        checked = false;
+      }
+    } else {
+      // Two-state toggle: off -> on -> off
+      checked = !checked;
+    }
+
+    dispatch("change", { checked });
+  }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="switch-container {size}"
+  class:checked={checked === true}
+  class:indeterminate={checked === null}
+  class:disabled
+  class:hovered
+  on:click|stopPropagation={toggle}
+>
+  <div class="switch-track">
+    <div class="switch-thumb"></div>
+  </div>
+</div>
+
+<style>
+  .switch-container {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .switch-container.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .switch-track {
+    position: relative;
+    background-color: var(--spectrum-global-color-gray-400);
+    border-radius: 1rem;
+  }
+
+  .switch-thumb {
+    position: absolute;
+    background-color: var(--spectrum-global-color-gray-50);
+    border-radius: 50%;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  /* Small size */
+  .switch-container.small .switch-track {
+    width: 2rem;
+    height: 1rem;
+  }
+
+  .switch-container.small .switch-thumb {
+    width: 0.7rem;
+    height: 0.7rem;
+    top: 0.15rem;
+    left: 0.15rem;
+  }
+
+  .switch-container.small.checked .switch-thumb {
+    transform: translateX(1rem);
+  }
+
+  .switch-container.small.checked .switch-track {
+    justify-content: flex-end;
+  }
+
+  .switch-container.small.indeterminate .switch-thumb {
+    transform: translateX(0.45rem);
+  }
+
+  /* Medium size */
+  .switch-container.medium .switch-track {
+    width: 2.5rem;
+    height: 1.25rem;
+  }
+
+  .switch-container.medium .switch-thumb {
+    width: 1rem;
+    height: 1rem;
+    top: 0.125rem;
+    left: 0.125rem;
+  }
+
+  .switch-container.medium.checked .switch-thumb {
+    transform: translateX(1.25rem);
+  }
+
+  .switch-container.medium.indeterminate .switch-thumb {
+    transform: translateX(0.625rem);
+  }
+
+  /* Large size */
+  .switch-container.large .switch-track {
+    width: 3rem;
+    height: 1.5rem;
+  }
+
+  .switch-container.large .switch-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+    top: 0.125rem;
+    left: 0.125rem;
+  }
+
+  .switch-container.large.checked .switch-thumb {
+    transform: translateX(1.5rem);
+  }
+
+  .switch-container.large.indeterminate .switch-thumb {
+    transform: translateX(0.75rem);
+  }
+
+  /* Checked state */
+  .switch-container.checked .switch-track {
+    background-color: var(--spectrum-global-color-blue-500);
+  }
+
+  /* Indeterminate state */
+  .switch-container.indeterminate .switch-track {
+    background-color: var(--spectrum-global-color-orange-500);
+  }
+
+  /* Hover state */
+  .switch-container:hover:not(.disabled),
+  .switch-container.hovered:not(.disabled) {
+    filter: brightness(1.1);
+  }
+
+  /* Focus state */
+  .switch-container:focus-visible {
+    outline: 2px solid var(--spectrum-global-color-blue-600);
+    outline-offset: 2px;
+    border-radius: 0.5rem;
+  }
+</style>

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

@@ -1,59 +1,30 @@
 <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 info">
-      {content}
-    </div>
-  </SuperPopover>
-{/if}
+<SuperPopover
+  {anchor}
+  {align}
+  open={show}
+  dismissible={false}
+  animate={true}
+  customZindex={1000}
+  offsetBelow={12}
+>
+  <div class="tooltip-content info">
+    {content}
+  </div>
+</SuperPopover>
 
 <style>
   .tooltip-content {
-    padding: 8px 12px;
+    padding: 4px 12px;
     font-size: 12px;
-    line-height: 1.4;
     color: var(--spectrum-global-color-gray-700);
     background-color: var(--spectrum-global-color-gray-50);
     border: 1px solid var(--spectrum-global-color-gray-300);
@@ -64,6 +35,7 @@
   }
 
   .tooltip-content.info {
+    padding: 4px 12px;
     background-color: var(--spectrum-global-color-blue-100);
     border-color: rgb(from var(--spectrum-global-color-blue-500) r g b / 50%);
     color: var(--spectrum-global-color-gray-800);