@poirazis/supercomponents-shared 0.0.1

package/src/lib/SuperTable/constants.js

@@ -0,0 +1,85 @@
+// Sizing temaplates for the Adobe Spectrum Table look
+export const sizingMap = {
+  S: {
+    cellPadding: "0.4rem",
+    rowFontSize: 12,
+    rowHeight: 32,
+    headerFontSize: 10,
+    headerHeight: 32,
+    checkboxSize: 12,
+  },
+  M: {
+    cellPadding: "0.5rem",
+    rowFontSize: 13,
+    rowHeight: 36,
+    headerFontSize: 11,
+    headerHeight: 38,
+    checkboxSize: 14,
+  },
+  L: {
+    cellPadding: "0.85rem",
+    rowFontSize: 15,
+    rowHeight: 42,
+    headerFontSize: 12,
+    headerHeight: 48,
+    checkboxSize: 14,
+  },
+};
+
+export const defaultOperatorMap = {
+  string: "fuzzy",
+  longform: "fuzzy",
+  formula: "fuzzy",
+  array: "contains",
+  options: "equal",
+  datetime: "rangeLow",
+  boolean: "equal",
+  number: "equal",
+  bigint: "equal",
+  link: "fuzzy",
+  bb_reference_single: "equal",
+  bb_reference: "equal",
+};
+
+export const supportFilteringMap = {
+  string: true,
+  longform: true,
+  array: true,
+  options: true,
+  datetime: true,
+  boolean: true,
+  number: true,
+  bigint: true,
+  link: true,
+  bb_reference_single: false,
+  bb_reference: false,
+};
+
+export const supportSortingMap = {
+  string: true,
+  longform: true,
+  formula: true,
+  array: true,
+  options: true,
+  datetime: true,
+  boolean: true,
+  number: true,
+  bigint: true,
+};
+
+export const supportEditingMap = {
+  string: true,
+  longform: true,
+  array: true,
+  link: true,
+  json: true,
+  bb_reference: true,
+  bb_reference_single: true,
+  options: true,
+  datetime: true,
+  boolean: true,
+  number: true,
+  bigint: true,
+  attachment: true,
+  attachment_single: true,
+};

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

@@ -0,0 +1,34 @@
+<script>
+  import SuperTableColumn from "../../SuperTableColumn/SuperTableColumn.svelte";
+  export let superColumns;
+  export let commonColumnOptions;
+  export let stbSettings;
+
+  export let columnsViewport;
+  export let showActionColumn;
+  export let canScroll;
+  let overflow;
+</script>
+
+<div bind:this={columnsViewport} class="st-master-columns" tabIndex="-1">
+  {#if $stbSettings.superColumnsPos == "first"}
+    <slot />
+  {/if}
+
+  {#each $superColumns as column, idx (idx)}
+    <SuperTableColumn
+      columnOptions={{
+        ...column,
+        ...$commonColumnOptions,
+        overflow,
+        isFirst: idx == 0,
+        isLast:
+          idx == $superColumns.length - 1 && !showActionColumn && canScroll,
+      }}
+    />
+  {/each}
+
+  {#if $stbSettings.superColumnsPos == "last"}
+    <slot />
+  {/if}
+</div>

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

@@ -0,0 +1,3 @@
+<div class="st-control-columns">
+  <slot />
+</div>

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

@@ -0,0 +1,169 @@
+<script>
+  import { getContext } from "svelte";
+  import SuperPopover from "../../SuperPopover/SuperPopover.svelte";
+  import SuperButton from "../../SuperButton/SuperButton.svelte";
+
+  const stbSettings = getContext("stbSettings");
+  const stbState = getContext("stbState");
+  const stbData = getContext("stbData");
+  const stbHorizontalScrollPos = getContext("stbHorizontalScrollPos");
+  const stbHovered = getContext("stbHovered");
+  const stbSelected = getContext("stbSelected");
+  const stbEditing = getContext("stbEditing");
+  const stbMenuID = getContext("stbMenuID");
+  const rowMetadata = getContext("stbRowMetadata");
+  const stbVisibleRows = getContext("stbVisibleRows");
+
+  const stbAPI = getContext("stbAPI");
+
+  export let right;
+  export let rowMenu;
+  export let rowMenuItems;
+  export let menuItemsVisible = 0;
+  export let canScroll;
+
+  let menuAnchor;
+  let openMenu;
+
+  $: quiet = $stbSettings.appearance.quiet;
+  $: menuIcon = $stbSettings.rowMenuIcon;
+  $: idColumn = $stbSettings.data.idColumn;
+  $: sticky = $stbHorizontalScrollPos > 0 && !right;
+  $: inInsert = $stbState == "Inserting";
+
+  $: inlineButtons =
+    menuItemsVisible < rowMenuItems?.length
+      ? rowMenuItems.slice(0, menuItemsVisible)
+      : rowMenuItems;
+
+  $: menuItems =
+    menuItemsVisible < rowMenuItems?.length
+      ? rowMenuItems.slice(menuItemsVisible, rowMenuItems.length)
+      : [];
+
+  const handleMenu = (e, index) => {
+    menuAnchor = e.detail;
+    openMenu = !openMenu;
+    $stbMenuID = openMenu ? index : -1;
+  };
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="super-column" class:right class:sticky>
+  {#if $stbSettings.showHeader}
+    <div class="super-column-header"><span> </span></div>
+  {/if}
+
+  <div
+    class="super-column-body"
+    style:margin-top={"var(--super-column-top-offset)"}
+    class:quiet
+    class:sticky
+    class:zebra={$stbSettings.appearance.zebraColors}
+  >
+    {#each $stbVisibleRows as index}
+      <div
+        class="super-row"
+        on:mouseenter={() => ($stbHovered = index)}
+        on:mouseleave={() => ($stbHovered = null)}
+        class:is-selected={$stbSelected?.includes(
+          $stbData.rows[index][idColumn]
+        )}
+        class:is-hovered={$stbHovered == index || $stbMenuID == index}
+        class:is-editing={$stbEditing == index}
+        style:min-height={$rowMetadata[index].height}
+        style:padding-right={canScroll && right ? "1.5rem" : "0.5rem"}
+      >
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div
+          class="row-buttons"
+          style:gap={inlineButtons.length > 1 ? "0.5rem" : "0rem"}
+        >
+          {#if rowMenu && inlineButtons?.length}
+            {#each inlineButtons as { text, icon, disabled, onClick, quiet, type }}
+              <SuperButton
+                size="S"
+                {icon}
+                {text}
+                disabled={disabled || $stbEditing == index}
+                {quiet}
+                type={type == "primary" ? "ink" : type}
+                on:click={() => stbAPI.executeRowButtonAction(index, onClick)}
+              />
+            {/each}
+          {/if}
+          {#if rowMenu && menuItems?.length}
+            <SuperButton
+              size="S"
+              icon={menuIcon}
+              fillOnHover="true"
+              text=""
+              quiet="true"
+              type="secondary"
+              on:click={(e) => handleMenu(e, index)}
+            />
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+  {#if inInsert}
+    <div class="add-row" style="padding: unset;"></div>
+  {/if}
+
+  {#if $stbSettings.showFooter}
+    <div class="super-column-footer"></div>
+  {/if}
+</div>
+
+{#if openMenu}
+  <SuperPopover
+    open
+    anchor={menuAnchor}
+    minWidth={150}
+    align={right ? "right" : "left"}
+    on:close={() => {
+      openMenu = false;
+      $stbMenuID = undefined;
+    }}
+  >
+    {#if menuItems?.length}
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div class="action-menu">
+        {#each menuItems as { text, icon, disabled, onClick, size }}
+          <SuperButton
+            {size}
+            {icon}
+            {text}
+            {disabled}
+            menuItem
+            menuAlign={right ? "right" : "left"}
+            on:click={() => {
+              stbAPI.executeRowButtonAction($stbMenuID, onClick);
+              openMenu = false;
+              $stbMenuID = undefined;
+            }}
+          />
+        {/each}
+      </div>
+    {/if}
+  </SuperPopover>
+{/if}
+
+<style>
+  .row-buttons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 0.5rem;
+  }
+
+  .action-menu {
+    min-width: 160px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0.25rem;
+  }
+</style>

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

@@ -0,0 +1,174 @@
+<script>
+  import { getContext } from "svelte";
+
+  const stbState = getContext("stbState");
+  const stbSettings = getContext("stbSettings");
+  const stbData = getContext("stbData");
+  const stbHorizontalScrollPos = getContext("stbHorizontalScrollPos");
+  const stbHovered = getContext("stbHovered");
+  const stbMenuID = getContext("stbMenuID");
+  const stbSelected = getContext("stbSelected");
+  const stbEditing = getContext("stbEditing");
+  const stbAPI = getContext("stbAPI");
+  const rowMetadata = getContext("stbRowMetadata");
+  const stbVisibleRows = getContext("stbVisibleRows");
+
+  export let sticky;
+  export let hideSelectionColumn;
+
+  $: idColumn = $stbSettings.data.idColumn;
+  $: partialSelection = $stbSelected.length;
+  $: fullSelection =
+    $stbSelected.length == $stbData.rows?.length && $stbData.rows?.length > 0;
+
+  $: numbering = $stbSettings.appearance.numberingColumn;
+  $: checkBoxes = $stbSettings.features.canSelect && !hideSelectionColumn;
+  $: canDelete = $stbSettings.features.canDelete;
+  $: sticky = $stbHorizontalScrollPos > 0;
+
+  $: visible = numbering || checkBoxes || canDelete;
+  $: zebra = $stbSettings.appearance.zebraColors;
+  $: quiet = $stbSettings.appearance.quiet;
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+{#if visible}
+  <div class="super-column control-column" class:sticky>
+    {#if $stbSettings?.showHeader}
+      <div class="control-column-header">
+        {#if numbering}
+          <div class="row-number"></div>
+        {/if}
+
+        {#if canDelete}
+          {#if $stbSelected.length > 1}
+            <i
+              class="ri-delete-bin-line"
+              on:click={stbAPI.deleteSelectedRows}
+            />
+          {:else}
+            <div class="row-number"></div>
+          {/if}
+        {/if}
+
+        {#if $stbSettings.features.canSelect && $stbSettings.features.maxSelected != 1 && !hideSelectionColumn}
+          {#if fullSelection}
+            <i class="ri-check-line" on:click={stbAPI.selectAllRows} />
+          {:else if partialSelection}
+            <i
+              class="ri-checkbox-indeterminate-line"
+              on:click={stbAPI.selectAllRows}
+            ></i>
+          {:else}
+            <i
+              class="ri-checkbox-blank-line"
+              style:color={"var(--spectrum-global-color-gray-500)"}
+              on:click={stbAPI.selectAllRows}
+            />
+          {/if}
+        {/if}
+      </div>
+    {/if}
+
+    <div
+      class="super-column-body"
+      class:zebra
+      class:quiet
+      class:sticky
+      style:margin-top={"var(--super-column-top-offset)"}
+    >
+      {#each $stbVisibleRows as visibleRow}
+        {@const row = $stbData?.rows?.[visibleRow]}
+        {#if row}
+          <div
+            class="super-row selection"
+            class:is-selected={$stbSelected?.includes(
+              row[idColumn] ?? visibleRow
+            )}
+            class:is-hovered={$stbHovered == visibleRow ||
+              $stbMenuID == visibleRow}
+            class:is-editing={$stbEditing == row[idColumn]}
+            style:min-height={$rowMetadata[visibleRow]?.height}
+            on:mouseenter={() => ($stbHovered = visibleRow)}
+            on:mouseleave={() => ($stbHovered = null)}
+          >
+            {#if numbering}
+              <span class="row-number">
+                {#if $stbEditing == row[idColumn]}
+                  <i
+                    class="ri-edit-line"
+                    style:font-size={"14px"}
+                    style:color={"lime"}
+                  />
+                {:else}
+                  {visibleRow + 1}
+                {/if}
+              </span>
+            {/if}
+
+            {#if canDelete}
+              <i
+                class="ri-delete-bin-line delete"
+                on:click={(e) => stbAPI.deleteRow(visibleRow)}
+              />
+            {/if}
+
+            {#if $stbSettings.features.canSelect && !hideSelectionColumn}
+              {#if $stbSelected?.includes(row[idColumn] ?? visibleRow)}
+                <i
+                  class="ri-check-line"
+                  style:color={"var(--spectrum-global-color-gray-800)"}
+                  on:click={() => stbAPI.selectRow(visibleRow)}
+                />
+              {:else}
+                <i
+                  class="ri-checkbox-blank-line"
+                  on:click={() => stbAPI.selectRow(visibleRow)}
+                />
+              {/if}
+            {/if}
+          </div>
+        {/if}
+      {/each}
+
+      {#if $stbState == "Inserting"}
+        <div class="add-row" style="padding: unset;"></div>
+      {/if}
+    </div>
+
+    {#if $stbSettings.showFooter}
+      <div class="super-column-footer" style:padding={"unset"}></div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .selection {
+    flex: auto;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    gap: 1rem;
+    font-size: 14px;
+    font-weight: 500;
+    align-items: center;
+    &.is-hovered > .delete {
+      color: var(--spectrum-global-color-red-700);
+    }
+    &.is-selected > .delete {
+      color: var(--spectrum-global-color-red-700);
+    }
+    &.is-hovered > i {
+      color: var(--spectrum-global-color-gray-700);
+    }
+  }
+
+  i {
+    font-size: 16px;
+    color: var(--spectrum-global-color-gray-500);
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+</style>

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

@@ -0,0 +1,58 @@
+<script>
+  function autoSetup() {}
+</script>
+
+<div class="welcome">
+  <div class="welcome-icon">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+      viewBox="0 0 18 18"
+    >
+      <defs>
+        <style>
+          .fill {
+            fill: #1da1f2;
+          }
+        </style>
+      </defs>
+      <title>S Table 18 N</title>
+      <rect
+        id="Canvas"
+        fill="#ff13dc"
+        opacity="0"
+        width="18"
+        height="18"
+      /><path
+        class="fill"
+        d="M16.5,1H1.5a.5.5,0,0,0-.5.5v15a.5.5,0,0,0,.5.5h15a.5.5,0,0,0,.5-.5V1.5A.5.5,0,0,0,16.5,1ZM6,16H2V14H6Zm0-3H2V11H6Zm0-3H2V8H6Zm10,6H7V14h9Zm0-3H7V11h9Zm0-3H7V8h9Zm0-3H2V2H16Z"
+      />
+    </svg>
+  </div>
+
+  <div class="welcome-text">
+    <h2>Welcome to the Super Table Component</h2>
+    <p>You need to connect your Super Table to a Data Provider</p>
+    <p>and select the <strong>Unique ID Column</strong></p>
+    <p>Then add some Super Columns to start designing you table</p>
+  </div>
+</div>
+
+<style>
+  h2 {
+    padding-top: none;
+    margin-top: unset;
+  }
+  .welcome {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-content: middle;
+    gap: 20px;
+  }
+
+  .welcome-text,
+  .welcome-icon {
+  }
+</style>

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

@@ -0,0 +1,52 @@
+<script>
+  export let stbState;
+  export let tableAPI;
+  export let highlighted;
+  export let footer;
+  export let tableActions;
+
+  $: inInsert = $stbState == "Inserting";
+</script>
+
+{#if $stbState == "Idle" || inInsert || tableActions?.length}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="overlay-button add-row-overlay"
+    class:highlighted
+    class:footer
+    class:in-insert={inInsert}
+    on:click={() => (inInsert ? stbState.cancelAddRow() : stbState.addRow())}
+  >
+    <span> + </span>
+  </div>
+
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="overlay-button save-row-overlay"
+    class:highlighted
+    class:footer
+    class:in-insert={inInsert}
+    on:click={tableAPI.insertRow}
+  >
+    {#if $stbState == "Saving"}
+      <i class="ri-loader-2-line" />
+    {:else}
+      <i class="ri-save-fill"> </i>
+    {/if}
+  </div>
+{/if}
+
+{#if $stbState == "Filtered"}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="overlay-button filter-row-overlay"
+    class:highlighted
+    class:footer
+    on:click={stbState.clear()}
+  >
+    <i class="ri-filter-off-line" />
+  </div>
+{/if}

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

@@ -0,0 +1,13 @@
+<script>
+  export let top;
+  export let bottom;
+  export let isEmpty;
+  export let message = "No Records Found";
+</script>
+
+{#if isEmpty}
+  <div class="emptyTable" style:top style:bottom>
+    <i class="ri-search-line" />
+    {message}
+  </div>
+{/if}

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

@@ -0,0 +1,3 @@
+<div class="overlay-button loader-overlay">
+  <i class="ri-refresh-line"></i>
+</div>

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

@@ -0,0 +1,57 @@
+<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"}
+    on:close={() => ($stbMenuAnchor = -1)}
+  >
+    <div class="action-menu">
+      {#each rowContextMenuItems as { text, icon, disabled, onClick, size, type }}
+        <SuperButton
+          {size}
+          {type}
+          {icon}
+          fillOnHover="true"
+          {text}
+          disabled={disabled || !onClick}
+          quiet={true}
+          menuItem
+          menuAlign={right ? "right" : "left"}
+          on:click={() => {
+            stbAPI.executeRowContextMenuAction($stbMenuID, onClick);
+            $stbMenuID = -1;
+            $stbMenuAnchor = -1;
+          }}
+        />
+      {/each}
+    </div>
+  </SuperPopover>
+{/if}
+
+<style>
+  .action-menu {
+    min-width: 120px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border: 1px solid var(--spectrum-global-color-gray-100);
+  }
+</style>