@poirazis/supercomponents-shared 0.0.1

package/src/lib/SuperTable/overlays/RowContextMenu.svelte

@@ -0,0 +1,58 @@
+<script>
+  import { getContext } from "svelte";
+  import SuperPopover from "../../SuperPopover/SuperPopover.svelte";
+  import SuperButton from "../../SuperButton/SuperButton.svelte";
+
+  const stbAPI = getContext("stbAPI");
+  const stbMenuID = getContext("stbMenuID");
+  const stbMenuAnchor = getContext("stbMenuAnchor");
+
+  export let rowContextMenuItems;
+  export let right = true;
+
+  $: isOpen = $stbMenuAnchor != -1;
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
+{#if isOpen && rowContextMenuItems?.length}
+  <SuperPopover
+    open
+    anchor={$stbMenuAnchor}
+    align={right ? "right" : "left"}
+    ignoreAnchor={false}
+    on:close={() => {
+      $stbMenuID = -1;
+      $stbMenuAnchor = -1;
+    }}
+  >
+    <div class="action-menu">
+      {#each rowContextMenuItems as { text, icon, disabled, onClick, size, type }}
+        <SuperButton
+          {size}
+          {type}
+          {icon}
+          {text}
+          {disabled}
+          quiet={true}
+          menuItem
+          menuAlign={right ? "right" : "left"}
+          on:click={() => {
+            stbAPI.executeRowContextMenuAction($stbMenuID, onClick);
+          }}
+        />
+      {/each}
+    </div>
+  </SuperPopover>
+{/if}
+
+<style>
+  .action-menu {
+    min-width: 160px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0.25rem;
+  }
+</style>

package/src/lib/SuperTable/overlays/ScrollbarsOverlay.svelte

@@ -0,0 +1,184 @@
+<script>
+  import { getContext, createEventDispatcher } from "svelte";
+
+  const stbScrollPos = getContext("stbScrollPos");
+  const stbHorizontalScrollPos = getContext("stbHorizontalScrollPos");
+  const stbSettings = getContext("stbSettings");
+
+  export let highlighted;
+  export let horizontalOffset = "0px";
+
+  export let clientHeight;
+  export let scrollHeight;
+  export let scrollWidth;
+
+  export let visible;
+  export let horizontalVisible;
+  export let anchor;
+
+  const dispatch = createEventDispatcher();
+
+  let startPos;
+  let startScrollPos;
+  let horizontalStartPos;
+  let verticalRange;
+  let horizontalRange;
+  let dragging = false;
+  let horizontalDragging = false;
+  let mouseoffset = 0;
+  let width;
+  let left;
+  let localWidth;
+
+  // Positioning Offsets
+  $: verticalTopOffset = $stbSettings.appearance.headerHeight + 8 + "px";
+  $: verticalBottomOffset = $stbSettings.appearance.footerHeight + 16 + "px";
+  $: horizontalBotttomOffset = $stbSettings.appearance.footerHeight + 8 + "px";
+
+  // Scrollbar variables
+  $: top = ($stbScrollPos / (scrollHeight + 32)) * 100 + "%";
+  $: left = ($stbHorizontalScrollPos / scrollWidth) * 100 + "%";
+  $: height = (clientHeight / scrollHeight) * 100 + "%";
+  $: verticalRange = Math.max(scrollHeight - clientHeight, 0);
+  $: calculate(localWidth, $stbScrollPos);
+
+  export const calculate = () => {
+    if (!anchor) return;
+    horizontalRange = anchor?.scrollWidth - anchor?.clientWidth;
+    visible = verticalRange;
+    horizontalVisible = horizontalRange;
+    scrollWidth = anchor?.scrollWidth;
+    width = (anchor?.clientWidth / anchor?.scrollWidth) * 100 + "%";
+  };
+</script>
+
+<svelte:window
+  on:mouseup={() => {
+    dragging = false;
+    horizontalDragging = false;
+    mouseoffset = 0;
+    startPos = 0;
+    horizontalStartPos = 0;
+  }}
+  on:mousemove={dragging || horizontalDragging
+    ? (e) => {
+        if (dragging) {
+          e.preventDefault();
+          e.stopPropagation();
+          mouseoffset =
+            (e.clientY - startPos) * (scrollHeight / clientHeight) +
+            startScrollPos;
+          if (mouseoffset > 0 && mouseoffset <= verticalRange)
+            $stbScrollPos = mouseoffset;
+          dispatch("positionChange");
+        }
+        if (horizontalDragging) {
+          e.preventDefault();
+          e.stopPropagation();
+          mouseoffset =
+            (e.clientX - horizontalStartPos) *
+              (anchor?.clientWidth / anchor?.scrollWidth) +
+            startScrollPos;
+          if (mouseoffset > 0 && mouseoffset <= horizontalRange)
+            $stbHorizontalScrollPos = mouseoffset;
+        }
+        anchor.scrollLeft = $stbHorizontalScrollPos;
+      }
+    : () => {}}
+  <
+/>
+
+{#if verticalRange}
+  <div
+    class="stb-scrollbar"
+    class:highlighted
+    style:--offset={verticalTopOffset}
+    style:--bottomOffset={verticalBottomOffset}
+  >
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="stb-scrollbar-indicator"
+      class:dragging
+      style:top
+      style:height
+      on:mousedown|self={(e) => {
+        dragging = true;
+        startPos = e.clientY;
+        startScrollPos = $stbScrollPos;
+      }}
+    />
+  </div>
+{/if}
+
+{#if horizontalRange}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    bind:clientWidth={localWidth}
+    class="stb-scrollbar horizontal"
+    class:highlighted
+    style:--horizontalOffset={horizontalOffset}
+    style:--horizontalBottomOffset={horizontalBotttomOffset}
+  >
+    <div
+      class="stb-scrollbar-indicator horizontal"
+      style:left
+      style:width
+      class:dragging={horizontalDragging}
+      on:mousedown|self={(e) => {
+        horizontalDragging = true;
+        horizontalStartPos = e.clientX;
+        startScrollPos = $stbHorizontalScrollPos;
+      }}
+    />
+  </div>
+{/if}
+
+<style>
+  .stb-scrollbar {
+    position: absolute;
+    right: 8px;
+    top: var(--offset);
+    bottom: var(--bottomOffset);
+    width: 8px;
+    border-radius: 4px;
+    opacity: 0.2;
+    z-index: 1;
+    transition: 230ms;
+    overflow: hidden;
+  }
+
+  .stb-scrollbar.horizontal {
+    top: unset;
+    bottom: var(--horizontalBottomOffset);
+    left: calc(var(--horizontalOffset) + 8px);
+    width: calc(100% - 32px - var(--horizontalOffset));
+    height: 8px;
+  }
+
+  .highlighted {
+    opacity: 0.55 !important;
+  }
+  .stb-scrollbar-indicator {
+    position: relative;
+    width: 100%;
+    border-radius: 4px;
+    background-color: var(--spectrum-global-color-gray-500);
+    min-height: 2rem;
+    z-index: 2;
+  }
+  .stb-scrollbar-indicator:hover {
+    cursor: pointer;
+    background-color: var(--spectrum-global-color-gray-700);
+  }
+  .stb-scrollbar-indicator.dragging,
+  .stb-scrollbar-indicator.horizontal.dragging {
+    cursor: pointer;
+    background-color: var(--spectrum-global-color-gray-700) !important;
+  }
+
+  .stb-scrollbar-indicator.horizontal {
+    min-height: unset;
+    min-width: 2rem;
+    height: 100%;
+  }
+</style>

package/src/lib/SuperTable/overlays/SelectedActionsOverlay.svelte

@@ -0,0 +1,64 @@
+<script>
+  import { slide } from "svelte/transition";
+  import { quintOut } from "svelte/easing";
+  import SuperButton from "../../SuperButton/SuperButton.svelte";
+
+  export let stbState;
+  export let stbSettings;
+  export let tableAPI;
+  export let highlighted;
+  export let footer;
+  export let selectedActions;
+  export let stbSelected;
+  export let entityPlural = "Rows";
+  export let entitySingular = "Row";
+
+  let hidden;
+  $: if ($stbSelected.length == 0) hidden = false;
+  $: checkboxes = !$stbSettings.appearance.hideSelectionColumn;
+
+  $: left =
+    1 +
+    (checkboxes +
+      $stbSettings.features.canDelete +
+      $stbSettings.appearance.numberingColumn) *
+      2 +
+    "rem";
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+{#if $stbSelected.length && $stbState != "Inserting" && !hidden}
+  <div
+    class="selected-row-actions-overlay"
+    style:bottom={$stbSettings.appearance.footerHeight + 20}
+    style:left
+    class:highlighted
+    class:footer
+    transition:slide={{ delay: 25, duration: 230, easing: quintOut, axis: "y" }}
+  >
+    <SuperButton
+      icon="ri-close-line"
+      quiet={true}
+      size="S"
+      type="secondary"
+      on:click={() => (hidden = true)}
+    />
+    <span class="text">
+      {$stbSelected.length == 1
+        ? $stbSelected.length + " " + (entitySingular || "Row") + " "
+        : $stbSelected.length + " " + (entityPlural || "Rows") + " "} Selected
+    </span>
+    {#each selectedActions as { text, icon, disabled, type, size, onClick }}
+      <SuperButton
+        {text}
+        {icon}
+        quiet={true}
+        {type}
+        {disabled}
+        {size}
+        on:click={tableAPI.executeSelectedRowsAction(onClick)}
+      />
+    {/each}
+  </div>
+{/if}

package/src/lib/SuperTableCells/CellAttachment.svelte

@@ -0,0 +1,288 @@
+<script>
+  import { createEventDispatcher, getContext } from "svelte";
+  import fsm from "svelte-fsm";
+  import SuperPopover from "../SuperPopover/SuperPopover.svelte";
+  import "./CellCommon.css";
+
+  export let value;
+  export let formattedValue;
+  export let cellOptions;
+  export let fieldSchema;
+
+  let originalValue = value;
+  let anchor;
+  let picker;
+  let open;
+  let focusedOptionIdx;
+
+  $: multi = fieldSchema?.type?.includes("single") !== true;
+  $: localvalue = value && multi ? value : value ? [value] : [];
+
+  const dispatch = createEventDispatcher();
+  const { processStringSync } = getContext("sdk");
+
+  export let cellState = fsm(cellOptions.initialState ?? "View", {
+    "*": {
+      goTo(state) {
+        return state;
+      },
+    },
+    View: {
+      _enter() {
+        open = false;
+      },
+      focus() {
+        if (!cellOptions.readonly) return "Editing";
+      },
+    },
+    Hovered: {
+      cancel: () => {
+        return "View";
+      },
+    },
+    Focused: {
+      unfocus() {
+        return "View";
+      },
+    },
+    Error: { check: "View" },
+    Editing: {
+      _enter() {
+        originalValue = value;
+        dispatch("enteredit");
+      },
+      _exit() {
+        dispatch("exitedit");
+      },
+      change(e) {
+        if (cellOptions.debounce) dispatch("change", value);
+      },
+      submit() {
+        if (value !== originalValue) {
+          dispatch("change", value);
+        }
+        dispatch("focusout");
+        return "View";
+      },
+      cancel() {
+        value = originalValue;
+        return "View";
+      },
+    },
+  });
+
+  $: formattedValue = cellOptions.template
+    ? processStringSync(cellOptions.template, { Value: value })
+    : undefined;
+
+  $: placeholder =
+    cellOptions.readonly || cellOptions.disabled
+      ? ""
+      : cellOptions.placeholder || "";
+
+  const focus = (node) => {
+    node.focus();
+  };
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="superCell"
+  bind:this={anchor}
+  class:inEdit={$cellState == "Editing"}
+  class:inline={cellOptions.role == "inline"}
+  class:tableCell={cellOptions.role == "tableCell"}
+  class:formInput={cellOptions.role == "formInput"}
+  class:disabled={cellOptions.disabled}
+  class:readonly={cellOptions.readonly}
+  style:color={cellOptions.color}
+  style:background={$cellState == "Editing" && cellOptions.role != "inline"
+    ? "var(--spectrum-global-color-gray-50)"
+    : cellOptions.background}
+>
+  {#if cellOptions.icon}
+    <i class={cellOptions.icon + " frontIcon"}></i>
+  {/if}
+
+  {#if $cellState == "Editing"}
+    <div
+      tabindex="0"
+      class="editor"
+      style:padding-left={cellOptions.icon ? "32px" : cellOptions.padding}
+      style:padding-right={cellOptions.padding}
+      style:justify-content={cellOptions.align ?? "flex-start"}
+      style:cursor="pointer"
+      on:focusout={cellState.submit}
+      on:click={() => (open = !open)}
+      use:focus
+    >
+      <div class="items">
+        {#each localvalue as file}
+          {#if file}
+            <div
+              class="item pill"
+              style:border={"1px solid var(--spectrum-global-color-gray-500)"}
+            >
+              <span>{file?.extension?.toUpperCase()}</span>
+            </div>
+          {/if}
+        {/each}
+      </div>
+
+      <i class="ri-add-line"></i>
+    </div>
+  {:else}
+    <div
+      tabindex={cellOptions.readonly || cellOptions.disabled ? "-1" : "0"}
+      on:focusin={cellState.focus}
+      style:padding-left={cellOptions.icon ? "32px" : cellOptions.padding}
+      style:padding-right={cellOptions.clearValueIcon
+        ? "32px"
+        : cellOptions.padding}
+      class="value"
+      class:placeholder={localvalue.length < 1}
+    >
+      {#if localvalue.length}
+        <div class="items">
+          {#each localvalue as file}
+            {#if file}
+              <div
+                class="item pill"
+                style:border={"1px solid var(--spectrum-global-color-gray-300)"}
+              >
+                <span>{file?.extension?.toUpperCase()}</span>
+              </div>
+            {/if}
+          {/each}
+        </div>
+      {:else}
+        <span>{placeholder}</span>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+{#if $cellState == "Editing"}
+  <SuperPopover
+    {anchor}
+    dismissible={false}
+    {open}
+    useAnchorWidth
+    minWidth={340}
+  >
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      bind:this={picker}
+      class="options"
+      on:wheel={(e) => e.stopPropagation()}
+      on:mouseleave={() => (focusedOptionIdx = -1)}
+    >
+      {#if localvalue?.length}
+        {#each localvalue as option, idx (idx)}
+          <div
+            class="option"
+            class:focused={focusedOptionIdx === idx}
+            on:mouseenter={() => (focusedOptionIdx = idx)}
+          >
+            <div class="pill">{option.extension?.toUpperCase()}</div>
+            <a href={option.url} class="filename">{option.name}</a>
+            <i class="ri-delete-bin-line icon" />
+          </div>
+        {/each}
+        <div style="height: 1rem;"></div>
+      {/if}
+      <div class="new">Select Files</div>
+    </div>
+  </SuperPopover>
+{/if}
+
+<style>
+  .wrapper {
+    flex: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+  }
+
+  .pill {
+    border: 1px solid var(--spectrum-global-color-gray-500);
+    padding: 0rem 0.25rem;
+    border-radius: 3px;
+    font-size: 11px;
+    display: flex;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    justify-content: center;
+  }
+
+  a.filename {
+    width: 100%;
+    line-height: 22px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-decoration: underline;
+    color: var(--spectrum-global-color-blue-700);
+  }
+
+  .icon {
+    aspect-ratio: 1;
+    color: var(--spectrum-global-color-gray-500);
+  }
+  .icon:hover {
+    aspect-ratio: 1;
+    cursor: pointer;
+  }
+
+  .option {
+    display: flex;
+    align-items: center;
+    justify-content: stretch;
+    gap: 0.5rem;
+    padding: 0.25rem 0.25rem;
+  }
+  .option:hover {
+    background-color: var(--spectrum-global-color-gray-100);
+  }
+
+  .option:hover > .icon {
+    color: var(--spectrum-global-color-red-500);
+  }
+  .option:hover > .pill {
+    color: var(--spectrum-global-color-gray-800);
+    background-color: var(--spectrum-global-color-gray-50);
+    border: 1px solid var(--spectrum-global-color-gray-800);
+  }
+  .options {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0.25rem;
+    min-width: 15rem;
+  }
+  .attachment {
+    display: flex;
+    align-items: center;
+    border: 1px solid darkcyan;
+    border-radius: 4px;
+    height: 50%;
+    padding: 0 0.5rem 0 0.5rem;
+    min-width: 15rem;
+  }
+  .attachment:hover {
+    border: 1px solid lime;
+  }
+
+  .new {
+    text-align: center;
+    padding: 0.5rem 1rem;
+    color: var(--spectrum-global-color-blue-700);
+    text-decoration: underline;
+    border: 1px dashed var(--spectrum-global-color-blue-400);
+  }
+</style>