@poirazis/supercomponents-shared 0.0.1

package/src/lib/SuperTableColumn/SuperTableColumn.svelte

@@ -0,0 +1,392 @@
+<script>
+  import { getContext, setContext, onMount, onDestroy } from "svelte";
+  import fsm from "svelte-fsm";
+
+  const { memo, derivedMemo, processStringSync, builderStore } =
+    getContext("sdk");
+
+  import SuperColumnHeader from "./parts/SuperColumnHeader.svelte";
+  import SuperColumnBody from "./parts/SuperColumnBody.svelte";
+  import SuperColumnFooter from "./parts/SuperColumnFooter.svelte";
+
+  import CellOptions from "../SuperTableCells/CellOptions.svelte";
+  import CellString from "../SuperTableCells/CellString.svelte";
+  import CellNumber from "../SuperTableCells/CellNumber.svelte";
+  import CellBoolean from "../SuperTableCells/CellBoolean.svelte";
+  import CellDatetime from "../SuperTableCells/CellDatetime.svelte";
+  import CellLink from "../SuperTableCells/CellLink.svelte";
+  import CellJSON from "../SuperTableCells/CellJSON.svelte";
+  import CellAttachment from "../SuperTableCells/CellAttachment.svelte";
+
+  import CellStringSimple from "../SuperTableCells/CellStringSimple.svelte";
+
+  const stbData = getContext("stbData");
+  const stbSettings = getContext("stbSettings");
+  const stbSortColumn = getContext("stbSortColumn");
+  const stbSortOrder = getContext("stbSortOrder");
+  const stbHovered = getContext("stbHovered");
+  const stbEditing = getContext("stbEditing");
+  const stbState = getContext("stbState");
+  const stbAPI = getContext("stbAPI");
+
+  // Cell Components Map
+  const cellComponents = {
+    string: CellString,
+    longform: CellString,
+    number: CellNumber,
+    bigint: CellNumber,
+    options: CellOptions,
+    array: CellOptions,
+    jsonarray: CellOptions,
+    boolean: CellBoolean,
+    datetime: CellDatetime,
+    link: CellLink,
+    json: CellJSON,
+    attachment_single: CellAttachment,
+    attachment: CellAttachment,
+    bb_reference_single: CellLink,
+    bb_reference: CellLink,
+  };
+
+  const headerComponents = {
+    string: CellString,
+    number: CellNumber,
+    bigint: CellNumber,
+    options: CellOptions,
+    array: CellOptions,
+    jsonarray: CellOptions,
+    boolean: CellBoolean,
+    datetime: CellDatetime,
+    link: CellString,
+    json: CellJSON,
+    attachment_single: null,
+    attachment: null,
+    bb_reference_single: CellString,
+    bb_reference: CellString,
+  };
+
+  // Props
+  export let columnOptions;
+  export let sticky;
+  export let scrollPos;
+
+  // Internal Variables
+  let id = Math.random() * 100;
+  let resizing;
+  let considerResizing;
+  let startPoint;
+  let startWidth = 0;
+  let width;
+
+  let lockWidth = memo(0);
+
+  let sorted;
+  let viewport;
+
+  $: inBuilder = $builderStore?.inBuilder;
+  $: columnOptionsStore.set({
+    ...columnOptions,
+    inBuilder,
+    cellComponent: getCellComponent(columnOptions.schema),
+    headerComponent:
+      headerComponents[columnOptions?.schema?.type] ?? CellString,
+    background:
+      sticky && scrollPos
+        ? "var(--spectrum-global-color-gray-75)"
+        : columnOptions.quiet
+          ? "transparent"
+          : columnOptions.background,
+  });
+
+  $: maxWidth = getMaxWidth($lockWidth, $columnOptionsStore);
+  $: minWidth = getMinWidth($lockWidth, $columnOptionsStore);
+
+  $: footerLabel = $columnOptionsStore.footerTemplate
+    ? processStringSync($columnOptionsStore.footerTemplate, {
+        values,
+      })
+    : undefined;
+
+  $: values = $stbData?.rows?.map((row) =>
+    deepGet(row, $columnOptionsStore.name)
+  );
+
+  $: if ($stbSortColumn == $columnOptionsStore.name) {
+    sorted = $stbSortOrder;
+  } else if ($stbSortColumn != $columnOptionsStore.name && sorted) {
+    sorted = undefined;
+  }
+
+  const columnOptionsStore = memo({
+    ...columnOptions,
+    cellComponent: cellComponents[columnOptions?.schema?.type] ?? CellString,
+    headerComponent:
+      headerComponents[columnOptions?.schema?.type] ?? CellString,
+  });
+
+  const rowCellOptions = derivedMemo(
+    columnOptionsStore,
+    ($columnOptionsStore) => {
+      return {
+        role: "tableCell",
+        showDirty: true,
+        readonly: !$columnOptionsStore.canEdit,
+        align: $columnOptionsStore.align,
+        template: $columnOptionsStore.template,
+        optionsViewMode: $columnOptionsStore.optionsViewMode,
+        relViewMode: $columnOptionsStore.relViewMode,
+        padding: $columnOptionsStore.isFirst ? "1rem" : "0.5rem",
+      };
+    }
+  );
+
+  const headerCellOptions = derivedMemo(
+    columnOptionsStore,
+    ($columnOptionsStore) => {
+      return {
+        align: $columnOptionsStore?.align,
+        color: $columnOptionsStore?.color,
+        background: "var(--spectrum-global-color-gray-50)",
+        fontWeight: $columnOptionsStore?.fontWeight,
+        padding: $columnOptionsStore?.cellPadding,
+        placeholder: $columnOptionsStore.defaultFilteringOperator,
+        clearValueIcon: true,
+        optionsViewMode: "text",
+        optionsSource: "schema",
+        debounce: 250,
+        controlType: "select",
+        initialState: "Editing",
+        role: "inlineInput",
+      };
+    }
+  );
+
+  // Allow the Super Table to bind to the Super Column State Machine to control it
+  export const columnState = fsm("Idle", {
+    "*": {
+      reset() {
+        return "Idle";
+      },
+      headerClicked() {
+        if ($columnOptionsStore.canFilter) this.filter();
+        else this.sort();
+      },
+      sort() {
+        if (columnOptions.canSort) {
+          stbState.sortBy(
+            columnOptions.name,
+            sorted == "ascending" ? "descending" : "ascending"
+          );
+          sorted = "ascending" ? "descending" : "ascending";
+        }
+      },
+      lockWidth() {
+        if (!resizing) $lockWidth = viewport.clientWidth;
+      },
+      unlockWidth() {
+        if (resizing) return;
+        $lockWidth = 0;
+      },
+      startResizing(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        resizing = true;
+        startPoint = e.clientX;
+        startWidth = viewport.clientWidth;
+        $lockWidth = startWidth;
+      },
+      resize(e) {
+        $lockWidth = startWidth + e.clientX - startPoint;
+      },
+      stopResizing(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        resizing = false;
+        startPoint = undefined;
+        width = $lockWidth;
+      },
+      resetSize(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        $lockWidth = 0;
+        width = 0;
+      },
+    },
+    Idle: {
+      _enter() {
+        $lockWidth = 0;
+      },
+      filter() {
+        return columnOptions.canFilter ? "Entering" : "Idle";
+      },
+      enteredit(index) {
+        if (inBuilder) return;
+        $stbEditing = index;
+        stbState.edit();
+        return "EditingCell";
+      },
+      addRow() {
+        return "Inserting";
+      },
+    },
+    Entering: {
+      _enter() {
+        $lockWidth = viewport.clientWidth;
+      },
+      filter(filterObj) {
+        stbState.addFilter({ ...filterObj, id: id });
+        return "Filtered";
+      },
+      cancel() {
+        return "Idle";
+      },
+      clear() {
+        return "Idle";
+      },
+    },
+    Filtered: {
+      filter(filterObj) {
+        stbState.removeFilter(id);
+        stbState.addFilter({ ...filterObj, id: id });
+      },
+      clear() {
+        stbState.clearFilter(id);
+        return "Entering";
+      },
+    },
+    EditingCell: {
+      _enter() {
+        $lockWidth = viewport.clientWidth;
+        stbState.edit.debounce(30);
+      },
+      patchRow(index, id, rev, field, change) {
+        stbState.patchRow(index, id, rev, field, change);
+      },
+      exitedit(index) {
+        $stbEditing = -1;
+        stbState.endEdit.debounce(50);
+        return "Idle";
+      },
+    },
+    Inserting: {
+      _enter() {
+        $lockWidth = viewport.clientWidth;
+      },
+      _exit() {
+        $lockWidth = 0;
+      },
+      cancelAddRow() {
+        return "Idle";
+      },
+    },
+  });
+
+  const deepGet = (obj, path) => {
+    if (obj && path.includes(".")) {
+      for (var i = 0, path = path.split("."), len = path.length; i < len; i++) {
+        if (obj[path[i]]) obj = obj[path[i]];
+        else {
+          obj = null;
+          break;
+        }
+      }
+      return obj;
+    } else return obj[path] ?? undefined;
+  };
+
+  const getMinWidth = (val, options) => {
+    if (val > 0) return val;
+    if (options.widthOverride) return options.widthOverride;
+
+    return options.sizing == "fixed" ? options.fixedWidth : options.minWidth;
+  };
+
+  const getMaxWidth = (val, options) => {
+    if (val > 0) return val;
+    if (options.widthOverride) return options.widthOverride;
+
+    return options.sizing == "fixed" ? options.fixedWidth : "unset";
+  };
+
+  const getCellComponent = (columnSchema) => {
+    let comp;
+    let editable = columnOptions.canEdit;
+
+    if (columnSchema.type == "json") {
+      comp = cellComponents[columnSchema.type] || CellString;
+    } else {
+      comp = cellComponents[columnSchema.type] || CellString;
+    }
+
+    if (comp == CellString && !editable) comp = CellStringSimple;
+
+    return comp;
+  };
+
+  setContext("stColumnOptions", columnOptionsStore);
+  setContext("stRowCellOptions", rowCellOptions);
+  setContext("stHeaderCellOptions", headerCellOptions);
+  setContext("stColumnState", columnState);
+
+  onMount(() => {
+    stbAPI?.registerSuperColumn(id, columnState);
+  });
+
+  onDestroy(() => {
+    stbAPI?.unregisterSuperColumn(id);
+  });
+</script>
+
+<svelte:window
+  on:mouseup={(e) => {
+    if (resizing) columnState.stopResizing(e);
+  }}
+  on:mousemove={(e) => {
+    if (resizing) columnState.resize(e);
+  }}
+/>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  bind:this={viewport}
+  class="super-column"
+  class:sticky={sticky && scrollPos}
+  class:resizing
+  class:considerResizing={considerResizing && !resizing}
+  class:isLast={$columnOptionsStore.isLast}
+  style:max-width={maxWidth}
+  style:min-width={minWidth}
+  on:mouseleave={() => ($stbHovered = null)}
+>
+  {#if $columnOptionsStore.showHeader && $columnOptionsStore.canResize}
+    <div
+      class="grabber"
+      style:height={$columnOptionsStore.headerHeight - 16}
+      on:mousedown={columnState.startResizing}
+      on:dblclick={columnState.resetSize}
+      on:mouseenter={() => (considerResizing = true)}
+      on:mouseleave={() => (considerResizing = false)}
+    />
+  {/if}
+
+  {#if $columnOptionsStore.showHeader}
+    <SuperColumnHeader {sorted} />
+  {/if}
+
+  <SuperColumnBody
+    rows={$stbData.rows}
+    rowHeight={$stbSettings.appearance.rowHeight}
+    field={$columnOptionsStore.name}
+    idField={$stbSettings.data.idColumn}
+    zebra={$stbSettings.appearance.zebraColors}
+    isLast={$columnOptionsStore.isLast}
+    isFirst={$columnOptionsStore.isFirst}
+    canInsert={$stbSettings.features.canInsert}
+  >
+    <slot />
+  </SuperColumnBody>
+
+  {#if $columnOptionsStore.showFooter}
+    <SuperColumnFooter {footerLabel} />
+  {/if}
+</div>

package/src/lib/SuperTableColumn/index.js

@@ -0,0 +1,9 @@
+// Export main SuperTableColumn component
+export { default as SuperTableColumn } from './SuperTableColumn.svelte';
+
+// Export parts components
+export { default as SuperColumnBody } from './parts/SuperColumnBody.svelte';
+export { default as SuperColumnFooter } from './parts/SuperColumnFooter.svelte';
+export { default as SuperColumnHeader } from './parts/SuperColumnHeader.svelte';
+export { default as SuperColumnRow } from './parts/SuperColumnRow.svelte';
+export { default as SuperColumnRowNew } from './parts/SuperColumnRowNew.svelte';

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

@@ -0,0 +1,57 @@
+<script>
+  import { getContext } from "svelte";
+  import SuperColumnRow from "./SuperColumnRow.svelte";
+  import SuperColumnRowNew from "./SuperColumnRowNew.svelte";
+  const columnSettings = getContext("stColumnOptions");
+  const columnState = getContext("stColumnState");
+  const stbVisibleRows = getContext("stbVisibleRows");
+  const stbState = getContext("stbState");
+
+  export let field;
+  export let idField;
+  export let isLast;
+  export let isFirst;
+  export let zebra;
+  export let rowHeight;
+  export let rows;
+
+  $: inserting = $columnState == "Inserting";
+  $: quiet = $columnSettings.quiet;
+  $: editing =
+    $columnState == "EditingCell" &&
+    ($columnSettings.highlighters == "vertical" ||
+      $columnSettings.highlighters == "both");
+</script>
+
+<div
+  class="super-column-body"
+  style:margin-top={"var(--super-column-top-offset)"}
+  tabindex="-1"
+  class:quiet
+  class:zebra
+  class:inserting
+  class:filtered={$columnState == "Filtered"}
+  class:is-editing={editing}
+>
+  {#if rows?.length}
+    {#each $stbVisibleRows as index}
+      {#if rows[index]}
+        <SuperColumnRow
+          {isLast}
+          {index}
+          row={rows[index]}
+          {field}
+          {idField}
+          disabled={inserting}
+          {rowHeight}
+          on:resize={(e) => stbState.resizeRow(index, e.detail)}
+        >
+          <slot />
+        </SuperColumnRow>
+      {/if}
+    {/each}
+  {/if}
+  {#if inserting}
+    <SuperColumnRowNew {isFirst} {isLast} />
+  {/if}
+</div>

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

@@ -0,0 +1,14 @@
+<script>
+  import { getContext } from "svelte";
+  const columnOptions = getContext("stColumnOptions");
+  export let footerLabel;
+</script>
+
+<div
+  class="super-column-footer"
+  style:justify-content={$columnOptions?.headerAlign}
+>
+  <span>
+    {footerLabel || $columnOptions.displayName || $columnOptions.name}
+  </span>
+</div>

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

@@ -0,0 +1,228 @@
+<script>
+  import { getContext } from "svelte";
+  import SuperPopover from "../../SuperPopover/SuperPopover.svelte";
+
+  const columnOptions = getContext("stColumnOptions");
+  const cellOptions = getContext("stHeaderCellOptions");
+  const columnState = getContext("stColumnState");
+  const { API } = getContext("sdk");
+
+  export let sorted;
+
+  let headerAnchor;
+  let showFilteringOptions = false;
+  let filterValue;
+  let filterOperator = $columnOptions.defaultFilteringOperator;
+  let schema;
+  let filterColumn;
+  let hovered;
+
+  $: isLink = $columnOptions.schema.type == "link";
+  $: if (isLink && !schema && $columnOptions.canFilter)
+    fetchDefinition($columnOptions.schema.tableId);
+
+  $: if (isLink && schema) {
+    filterColumn = "1:" + $columnOptions.name + "." + schema?.primaryDisplay;
+  } else {
+    filterColumn = $columnOptions.name;
+  }
+
+  $: isEntering = $columnState == "Entering";
+
+  const handleValueChange = (e) => {
+    if (e.detail != undefined && e.detail != null && e.detail != "") {
+      filterValue = e.detail;
+      if ($columnOptions.schema.type == "boolean" && filterValue === false) {
+        columnState.filter(buildFilter("notEqual", true));
+      } else if (Array.isArray(e.detail) && e.detail.length == 0) {
+        columnState.clear();
+      } else {
+        columnState.filter(buildFilter(filterOperator, filterValue));
+      }
+    } else {
+      showFilteringOptions = false;
+      filterValue = null;
+      columnState.clear();
+    }
+  };
+
+  const buildFilter = (operator, value) => {
+    let temp;
+    if (operator == "oneOf" && !Array.isArray(value)) {
+      temp = value.split(",");
+    } else if (
+      operator != "oneOf" &&
+      operator != "containsAny" &&
+      Array.isArray(value)
+    ) {
+      temp = value[0];
+      filterValue = temp;
+    } else {
+      temp = value;
+    }
+
+    return {
+      field: filterColumn,
+      operator: operator,
+      value: temp,
+      type: isLink ? "string" : $columnOptions.schema.type,
+      valueType: "Value",
+    };
+  };
+
+  const handleOperatorChange = (op) => {
+    filterOperator = op;
+    if (filterValue || op == "empty" || op == "notEmpty")
+      columnState.filter(buildFilter(filterOperator, filterValue ?? ""));
+
+    showFilteringOptions = false;
+  };
+
+  const handleBlur = (e) => {
+    if (headerAnchor.matches(":focus-within")) return;
+    columnState.cancel();
+  };
+
+  const fetchDefinition = async (tableId) => {
+    if (tableId) {
+      schema = await API.fetchTableDefinition(tableId);
+    }
+  };
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  bind:this={headerAnchor}
+  class="super-column-header"
+  class:isEntering
+  class:filtered={$columnState == "Filtered"}
+  class:idle={$columnState != "Entering" && $columnState != "Filtered"}
+  style:padding-left={$cellOptions.padding}
+  style:padding-right={$cellOptions.padding}
+  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)}
+      />
+    {/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:cancel={columnState.cancel}
+      on:exitedit={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
+        />
+      {/if}
+    </span>
+  {/if}
+</div>
+
+{#if $columnOptions.canFilter == "advanced" && $columnState != "Idle"}
+  <SuperPopover
+    anchor={headerAnchor}
+    open={showFilteringOptions}
+    align={"left"}
+    minWidth={160}
+    on:close={() => {
+      showFilteringOptions = false;
+      handleBlur();
+    }}
+  >
+    <ul
+      class="spectrum-Menu"
+      role="menu"
+      style="background-color: var(--spectrum-global-color-gray-75 );"
+    >
+      {#each $columnOptions.filteringOperators as option}
+        <li
+          class="spectrum-Menu-item"
+          class:selected={option.value == filterOperator}
+          role="menuitem"
+          on:mousedown|preventDefault={() => handleOperatorChange(option.value)}
+        >
+          <span class="spectrum-Menu-itemLabel">{option.label}</span>
+        </li>
+      {/each}
+    </ul>
+  </SuperPopover>
+{/if}
+
+<style>
+  i {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+  .isEntering {
+    gap: 0.5rem;
+  }
+
+  .placeholder {
+    min-width: 1rem;
+    height: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--spectrum-global-color-gray-500);
+    &:hover {
+      color: var(--spectrum-global-color-gray-800);
+      cursor: pointer;
+    }
+  }
+
+  .sorted {
+    color: var(--spectrum-global-color-gray-800);
+  }
+  .filtered {
+    gap: 0.5rem;
+    color: var(--spectrum-global-color-gray-800);
+    font-weight: 600;
+    background-color: var(--spectrum-global-color-gray-100);
+  }
+
+  .sortable {
+    cursor: pointer;
+  }
+  .sortable:hover {
+    filter: brightness(120%);
+  }
+  .selected {
+    color: var(--primaryColor);
+    background-color: var(--spectrum-global-color-gray-75);
+  }
+</style>