@poirazis/supercomponents-shared 1.2.18 → 1.2.19

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@poirazis/supercomponents-shared",
-  "version": "1.2.18",
+  "version": "1.2.19",
   "description": "Shared Svelte components library",
   "type": "module",
-  "packageManager": "bun@1.0.0",
+  "packageManager": "bun@1.3.11",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "svelte": "src/index.js",
@@ -21,7 +21,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/poirazis/supercomponents-shared.git"
+    "url": "https://github.com/poirazis/supercomponents_shared.git"
   },
   "keywords": [
     "svelte",

package/src/index.js

@@ -16,6 +16,7 @@ export { default as SuperPopover } from "./lib/SuperPopover/SuperPopover.svelte"
 // UI Elements
 export { default as Tooltip } from "./lib/UI/elements/Tooltip.svelte";
 export { default as IconButton } from "./lib/UI/elements/IconButton.svelte";
+export { default as Textbox } from "./lib/UI/elements/Textbox.svelte";
 
 // Table components
 export { default as SuperTable } from "./lib/SuperTable/SuperTable.svelte";

package/src/index.ts

@@ -15,6 +15,7 @@ export { default as SuperPopover } from "./lib/SuperPopover/SuperPopover.svelte"
 
 // UI Elements
 export { default as Tooltip } from "./lib/UI/elements/Tooltip.svelte";
+export { default as Textbox } from "./lib/UI/elements/Textbox.svelte";
 
 // Table components
 export { default as SuperTable } from "./lib/SuperTable/SuperTable.svelte";

package/src/lib/SuperButton/SuperButton.svelte

@@ -20,12 +20,12 @@
   export let buttonClass = "actionButton";
   export let type = "primary";
   export let tooltip;
-
+  export let confirm = false;
+  export let condition = undefined;
   // Visibility Conditions
   export const conditions = []; // Array of condition objects {field, operator, value}
 
   export let actionsMode = "normal";
-  export let condition = undefined; // For backward compatibility
   export let loopSource = undefined;
   export let loopDelay = 0;
   export let loopEvent = undefined;
@@ -40,22 +40,31 @@
   export let onLoopEnd = undefined;
   export let onTrueCondition = undefined;
   export let onFalseCondition = undefined;
+  export let workingState;
+
+  $: enrichedAction = Array.isArray(onClick)
+    ? enrichButtonActions(onClick, $context)
+    : onClick;
 
   $: loop = safeParse(loopSource);
-  $: buttonText = text || (actionsMode == "timer" ? timerDuration : "");
-  $: icon_class = working
-    ? "ph ph-spinner-gap ph-spin"
-    : icon && !icon.startsWith("ri-")
-      ? "ph ph-" + icon
-      : icon
-        ? icon
-        : actionsMode == "timer"
-          ? "ph ph-timer"
-          : undefined;
+  $: buttonText = confirmMode
+    ? "Confirm"
+    : text || (actionsMode == "timer" ? timerDuration : "");
+  $: icon_class =
+    working || workingState
+      ? "ph ph-spinner-gap ph-spin"
+      : icon && !icon.startsWith("ri-")
+        ? "ph ph-" + icon
+        : icon
+          ? icon
+          : actionsMode == "timer"
+            ? "ph ph-timer"
+            : undefined;
 
   let working = false;
   let ui_timer = undefined;
   let elapsed = 0;
+  let confirmMode = false;
 
   let buttonElement;
   let tooltipShow = false;
@@ -74,17 +83,20 @@
       clearTimeout(tooltipTimer);
     }
     tooltipShow = false;
+    confirmMode = false;
   };
 
   async function handleClick(e) {
-    let enrichedAction;
-    if (Array.isArray(onClick)) {
-      enrichedAction = enrichButtonActions(onClick, $context);
-    } else {
-      enrichedAction = onClick;
+    if (disabled || actionsMode == "timer") return;
+
+    // Handle confirmation flow
+    if (confirm && !confirmMode) {
+      confirmMode = true;
+      return;
     }
 
-    if (disabled || working || actionsMode == "timer") return;
+    // Reset confirm mode after executing action
+    confirmMode = false;
     working = true;
     tooltipShow = false;
     if (actionsMode == "loop") {
@@ -145,9 +157,14 @@
 
 <button
   bind:this={buttonElement}
-  on:click={handleClick}
+  on:click={(e) => {
+    handleClick(e);
+  }}
   on:mouseenter={showTooltip}
   on:mouseleave={hideTooltip}
+  on:blur={() => {
+    confirmMode = false;
+  }}
   tabindex={disabled ? -1 : 0}
   class:super-button={true}
   class:xsmall={size == "XS"}
@@ -171,10 +188,10 @@
     ? "spectrum-ActionButton spectrum-ActionButton--size" + size
     : "spectrum-Button spectrum-Button--size" + size}
   class:disabled
-  class:working
+  class:working={working || workingState}
 >
   <i
-    class={icon_class}
+    class={confirmMode ? "ph ph-check" : icon_class}
     class:ph-fill={filledIcon}
     style:order={iconAfterText ? 1 : 0}
     style:color={disabled ? "var(--spectrum-global-color-gray-400)" : iconColor}
@@ -199,6 +216,7 @@
     min-width: 4rem;
     gap: 0.75rem;
     height: 2rem;
+    transition: all 150ms ease-in-out;
 
     &.spectrum-ActionButton {
       padding: 0rem 0.75rem !important;
@@ -258,8 +276,6 @@
     & > i {
       display: none;
       opacity: 0.9;
-      font-weight: 400;
-      font-size: 15px;
     }
   }
 
@@ -286,7 +302,6 @@
   i {
     color: var(--iconColor);
     transition: all 230ms ease-in-out;
-    font-size: 16px;
   }
 
   .cta {
@@ -333,13 +348,9 @@
       }
     }
     &:hover,
-    &:focus {
+    &:focus:not(.working) {
       background-color: var(--spectrum-global-color-gray-900);
     }
-
-    &:active {
-      border: 1px solid var(--spectrum-global-color-blue-700);
-    }
   }
   .primary {
     &:hover,
@@ -446,14 +457,15 @@
 
   .working {
     cursor: progress;
-    border: 1px solid var(--spectrum-global-color-gray-300) !important;
+    border: 1px solid var(--spectrum-global-color-gray-400) !important;
+    background-color: var(--spectrum-global-color-gray-300) !important;
     & > span {
-      color: var(--spectrum-global-color-gray-600);
+      color: var(--spectrum-global-color-gray-600) !important;
     }
     & > i {
       display: block;
       animation: spin 1s linear infinite;
-      color: var(--spectrum-global-color-blue-700);
+      color: var(--spectrum-global-color-gray-700) !important;
     }
   }
 </style>

package/src/lib/SuperField/SuperField.svelte

@@ -198,7 +198,8 @@
 
     & > .error-message {
       color: var(--spectrum-global-color-red-400);
-      font-size: 11px;
+      font-size: 10px;
+      white-space: nowrap;
     }
   }
 </style>

package/src/lib/SuperTable/SuperTable.svelte

@@ -29,7 +29,6 @@
   import ControlSection from "./controls/ControlSection.svelte";
   import ColumnsSection from "./controls/ColumnsSection.svelte";
   import PaginationLimitOffset from "./controls/PaginationLimitOffset.svelte";
-  import { ta } from "zod/v4/locales";
 
   const {
     API,
@@ -1641,30 +1640,35 @@
   >
     <Provider {actions} data={dataContext} />
 
-    <ControlSection>
-      <SelectionColumn
-        hideSelectionColumn={hideSelectionColumn || $superColumns.length === 0}
-      />
-
-      {#if showButtonColumnLeft && $superColumns.length > 0 && $stbData.loaded}
-        <RowButtonsColumn {rowMenuItems} {menuItemsVisible} {rowMenu} />
-      {/if}
-
-      {#if stickFirstColumn && $superColumns.length > 1}
-        <SuperTableColumn
-          sticky={true}
-          scrollPos={$stbHorizontalScrollPos}
-          columnOptions={{
-            ...$superColumns[0],
-            ...$commonColumnOptions,
-            overflow,
-            isFirst: true,
-            isLast:
-              $superColumns?.length == 1 && !showButtonColumnRight && canScroll,
-          }}
+    {#if !isEmpty}
+      <ControlSection>
+        <SelectionColumn
+          hideSelectionColumn={hideSelectionColumn ||
+            $superColumns.length === 0}
         />
-      {/if}
-    </ControlSection>
+
+        {#if showButtonColumnLeft && $superColumns.length > 0 && $stbData.loaded}
+          <RowButtonsColumn {rowMenuItems} {menuItemsVisible} {rowMenu} />
+        {/if}
+
+        {#if stickFirstColumn && $superColumns.length > 1}
+          <SuperTableColumn
+            sticky={true}
+            scrollPos={$stbHorizontalScrollPos}
+            columnOptions={{
+              ...$superColumns[0],
+              ...$commonColumnOptions,
+              overflow,
+              isFirst: true,
+              isLast:
+                $superColumns?.length == 1 &&
+                !showButtonColumnRight &&
+                canScroll,
+            }}
+          />
+        {/if}
+      </ControlSection>
+    {/if}
 
     <ColumnsSection
       {stbSettings}
@@ -1678,7 +1682,7 @@
       {/key}
     </ColumnsSection>
 
-    {#if showButtonColumnRight && $superColumns.length > 0}
+    {#if showButtonColumnRight && $superColumns.length > 0 && !isEmpty}
       <ControlSection>
         <RowButtonsColumn
           {rowMenuItems}

package/src/lib/SuperTable/controls/RowButtonsColumn.svelte

@@ -77,7 +77,7 @@
         class:hovered={$stbHovered == visibleRow || $stbMenuID == visibleRow}
         class:is-editing={$stbEditing == visibleRow}
         class:disabled={$rowMetadata[visibleRow].disabled}
-        style:min-height={$rowMetadata[visibleRow].height + "px"}
+        style:height={$rowMetadata[visibleRow].height + "px"}
         style:padding-right={canScroll && right ? "1.5rem" : "0.5rem"}
       >
         <!-- svelte-ignore a11y-click-events-have-key-events -->

package/src/lib/SuperTable/controls/SelectionColumn.svelte

@@ -128,11 +128,12 @@
 <style>
   .selection {
     flex: auto;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    gap: 1rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    gap: 0.5rem;
     font-size: 13px;
     font-weight: 500;
     align-items: center;
+    justify-content: center;
   }
 </style>

package/src/lib/SuperTableCells/CellCommon.css

@@ -362,11 +362,6 @@
 .superCell.formInput.has-popup {
   background-color: var(--spectrum-global-color-gray-50);
 
-  &:hover:not(.disabled):not(.readonly):not(.inEdit) {
-    border-color: var(--spectrum-global-color-gray-100) !important;
-    cursor: pointer;
-  }
-
   &.inEdit {
     border: 1px solid var(--spectrum-global-color-gray-200) !important;
     background-color: var(--spectrum-global-color-gray-200) !important;

package/src/lib/SuperTableCells/CellOptions.svelte

@@ -807,7 +807,7 @@
           {/if}
         {/if}
 
-        {#if filteredOptions?.length === 0 && $fetch.loaded}
+        {#if filteredOptions?.length === 0}
           <div class="option">
             <span>
               <i class="ri-close-line"></i>

package/src/lib/SuperTableCells/CellSQLLink.svelte

@@ -313,7 +313,9 @@
         bind:api={pickerApi}
         on:change={handleChange}
         on:focusout={cellState.popupfocusout}
-      />
+      >
+        <slot />
+      </CellSQLLinkPicker>
     {/if}
   </SuperPopover>
 {/if}

package/src/lib/SuperTableCells/CellSQLLinkPicker.svelte

@@ -343,6 +343,7 @@
               on:mouseleave={() => (focusIdx = -1)}
               on:mousedown|preventDefault|stopPropagation={() => selectRow(row)}
             >
+              <slot />
               <span>{row.primaryDisplay || row[primaryDisplay]}</span>
               <i class="ri-check-line"></i>
             </div>
@@ -361,6 +362,7 @@
                     on:mouseleave={() => (focusIdx = -1)}
                     on:mousedown|preventDefault={() => selectRow(row)}
                   >
+                    <slot />
                     <span>{row.primaryDisplay || row[primaryDisplay]}</span>
                     <i class="ri-check-line"></i>
                   </div>

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

@@ -21,8 +21,6 @@
     $columnState == "EditingCell" &&
     ($columnSettings.highlighters == "vertical" ||
       $columnSettings.highlighters == "both");
-
-  $: console.log(isLast);
 </script>
 
 <div

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

@@ -27,7 +27,7 @@
   on:click={toggle}
 >
   {#if checked}
-    <i class="ph ph-check"></i>
+    <i class="ph ph-bold ph-check"></i>
   {:else if partial}
     <i class="ph ph-minus"></i>
   {:else if locked}

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

@@ -0,0 +1,210 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  interface TextboxProps {
+    value?: string | number;
+    disabled?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    title?: string;
+    wrap?: boolean;
+    monospace?: boolean;
+    oncopy?: (detail: { value: string }) => void;
+  }
+
+  let {
+    value = "",
+    disabled = false,
+    copyLabel = "Copy to clipboard",
+    copiedLabel = "Copied !",
+    title,
+    wrap = false,
+    monospace = true,
+    oncopy,
+  }: TextboxProps = $props();
+
+  let justCopied = $state(false);
+  let copyTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  let stringValue = $derived(String(value ?? "").trim());
+
+  let displayValue = $derived(
+    justCopied && copiedLabel?.trim() ? copiedLabel : stringValue || "",
+  );
+
+  function copyToClipboard() {
+    if (disabled || !stringValue || justCopied) return;
+
+    navigator.clipboard
+      .writeText(stringValue)
+      .then(() => {
+        justCopied = true;
+        const detail = { value: stringValue };
+
+        dispatch("copy", detail);
+        oncopy?.(detail);
+
+        if (copyTimeout) clearTimeout(copyTimeout);
+        copyTimeout = setTimeout(() => {
+          justCopied = false;
+          copyTimeout = undefined;
+        }, 800);
+      })
+      .catch((err) => {
+        console.error("Failed to copy to clipboard:", err);
+      });
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (disabled) return;
+    if ((e.key === "Enter" || e.key === " ") && !justCopied) {
+      e.preventDefault();
+      copyToClipboard();
+    }
+  }
+
+  $effect(() => {
+    // Cleanup any pending timeout when the component is destroyed
+    return () => {
+      if (copyTimeout) clearTimeout(copyTimeout);
+    };
+  });
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+  class="textbox value copyable"
+  class:copied={justCopied}
+  class:disabled
+  class:monospace
+  role="button"
+  tabindex={disabled ? -1 : 0}
+  title={justCopied ? "" : (title ?? (stringValue ? copyLabel : ""))}
+  onclick={copyToClipboard}
+  onkeydown={handleKeydown}
+>
+  <span class="textbox-text" class:wrap>
+    {displayValue}
+  </span>
+
+  {#if !justCopied && stringValue}
+    <span class="copy-icon">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="13"
+        height="13"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.25"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+        ></path>
+      </svg>
+    </span>
+  {/if}
+</span>
+
+<style>
+  .textbox.value {
+    color: var(--spectrum-global-color-gray-700);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0.75rem;
+    background: rgb(from var(--spectrum-global-color-gray-50) r g b / 0.5);
+    font-family: monospace;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .textbox.value:not(.monospace) {
+    font-family: var(
+      --spectrum-global-font-family,
+      system-ui,
+      -apple-system,
+      sans-serif
+    );
+    font-size: 13px;
+  }
+
+  .textbox.value.copyable {
+    cursor: pointer;
+    transition:
+      background-color 0.1s ease,
+      border-color 0.1s ease;
+    min-width: 0;
+    justify-content: space-between;
+  }
+
+  .textbox.value.copyable:hover:not(.disabled) {
+    background-color: var(--spectrum-global-color-gray-100);
+  }
+
+  .textbox.value.copyable:focus:not(.disabled) {
+    outline: 1px solid var(--spectrum-global-color-gray-500);
+    background-color: var(--spectrum-global-color-gray-100);
+    outline-offset: 1px;
+  }
+
+  .textbox.value.copyable.copied {
+    border-color: var(--spectrum-global-color-gray-500);
+    background-color: var(--spectrum-global-color-gray-100);
+    color: var(--spectrum-global-color-gray-600);
+    font-weight: 600;
+  }
+
+  .textbox.value.copyable.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .textbox.value .copy-icon {
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    flex-shrink: 0;
+    color: var(--spectrum-global-color-gray-600);
+    display: flex;
+    align-items: center;
+  }
+
+  .textbox.value.copyable:hover:not(.disabled) .copy-icon {
+    opacity: 0.65;
+  }
+
+  .textbox.value.copyable:focus:not(.disabled) .copy-icon {
+    opacity: 0.65;
+  }
+
+  .textbox.value.copyable:hover:not(.disabled) .copy-icon:hover {
+    opacity: 1;
+  }
+
+  .textbox-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Ensure the icon never shrinks and always has space when text is truncated */
+  .textbox.value .copy-icon {
+    flex-shrink: 0;
+  }
+
+  .textbox-text.wrap {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+    word-break: break-word;
+  }
+</style>