@poirazis/supercomponents-shared 0.0.1

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

@@ -0,0 +1,142 @@
+<script>
+  import { getContext, createEventDispatcher, onMount, tick } from "svelte";
+
+  const { Provider, processStringSync, ContextScopes } = getContext("sdk");
+
+  const dispatch = createEventDispatcher();
+  const columnSettings = getContext("stColumnOptions");
+  const columnState = getContext("stColumnState");
+  const rowCellOptions = getContext("stRowCellOptions");
+  const rowMetadata = getContext("stbRowMetadata");
+  const stbHovered = getContext("stbHovered");
+  const stbSelected = getContext("stbSelected");
+  const stbAPI = getContext("stbAPI");
+  const stbState = getContext("stbState");
+  const stbMenuID = getContext("stbMenuID");
+
+  export let index;
+  export let row;
+  export let field;
+  export let idField;
+  export let isEditing;
+  export let isLast;
+  export let disabled;
+
+  // the default height
+  export let rowHeight;
+  let mounted;
+  let viewport;
+
+  $: meta = $rowMetadata?.[index] ?? {};
+  $: id = row?.[idField] ?? index;
+  $: value = deepGet(row, field);
+  $: isHovered = $stbHovered == index || $stbMenuID == index;
+  $: isSelected = $stbSelected.includes(id);
+  $: hasChildren = $columnSettings.hasChildren > 0;
+
+  const getCellValue = (value) => {
+    return $columnSettings.template
+      ? processStringSync($columnSettings.template, { value })
+      : undefined;
+  };
+
+  const patchRow = async (change) => {
+    let patch = {
+      ...row,
+      [field]: change,
+    };
+    try {
+      let patched_row = await stbAPI.patchRow(patch);
+      row = patched_row;
+    } catch (ex) {
+      console.log(ex);
+    } finally {
+    }
+  };
+
+  const handleSize = async () => {
+    if (mounted) {
+      await tick();
+      if (
+        $columnSettings.superColumn &&
+        viewport &&
+        viewport.scrollHeight > meta.height
+      ) {
+        dispatch("resize", viewport.scrollHeight);
+      } else if (
+        $columnSettings.superColumn &&
+        viewport &&
+        !hasChildren &&
+        viewport.scrollHeight > rowHeight
+      )
+        dispatch("resize", rowHeight);
+    }
+  };
+
+  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]])
+          if (Array.isArray(obj[path[i]])) obj = obj[path[i]][0];
+          else obj = obj[path[i]];
+        else {
+          obj = null;
+          break;
+        }
+      }
+      return obj;
+    } else return obj[path] ?? undefined;
+  };
+  onMount(() => (mounted = $columnSettings.superColumn));
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+  bind:this={viewport}
+  class="super-row"
+  class:is-selected={isSelected}
+  class:is-hovered={isHovered}
+  class:is-editing={isEditing}
+  class:isLast
+  style:height={meta.height + "px"}
+  style:color={meta.color}
+  style:background-color={meta.bgcolor}
+  style:justify-content={$columnSettings.align}
+  on:mouseenter={() => ($stbHovered = index)}
+  on:mouseleave={() => ($stbHovered = undefined)}
+  on:click={() =>
+    stbState.handleRowClick(index, field, deepGet(row, field), id)}
+  on:dblclick={() => stbAPI.executeRowOnDblClickAction(id)}
+  on:contextmenu|preventDefault={() => {
+    stbAPI.showContextMenu(index, viewport);
+  }}
+>
+  {#if !hasChildren}
+    <svelte:component
+      this={$columnSettings.cellComponent}
+      cellOptions={{ ...$rowCellOptions, disabled }}
+      fieldSchema={$columnSettings.schema}
+      {value}
+      on:enteredit={() => columnState.enteredit(index)}
+      on:exitedit={columnState.exitedit}
+      on:change={(e) => patchRow(e.detail)}
+      on:linkClick={(e) => {
+        stbAPI.executeOnLinkClickAction(field, e.detail);
+      }}
+    />
+  {:else}
+    <Provider
+      data={{
+        id,
+        value: row[field],
+        row,
+        index,
+      }}
+      scope={ContextScopes.Local}
+    >
+      <slot />
+    </Provider>
+  {/if}
+</div>

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

@@ -0,0 +1,34 @@
+<script>
+  import { getContext } from "svelte";
+  const columnSettings = getContext("stColumnOptions");
+  const rowCellOptions = getContext("stRowCellOptions");
+  const stbState = getContext("stbState");
+
+  export let row = {};
+  export let isFirst;
+  export let isLast;
+  export let color;
+</script>
+
+<div
+  class="super-row new-row"
+  style:min-height={"2rem"}
+  style:color
+  class:isLast
+>
+  <svelte:component
+    this={$columnSettings.cellComponent}
+    cellOptions={{
+      ...$rowCellOptions,
+      readonly: false,
+    }}
+    autofocus={isFirst}
+    fieldSchema={$columnSettings.schema}
+    value={row.value}
+    multi={$columnSettings.schema.type == "array"}
+    on:change={(e) => {
+      stbState.setValue($columnSettings.name, e.detail);
+      row.value = e.detail;
+    }}
+  />
+</div>

package/src/lib/SuperTree/SuperTree.svelte

@@ -0,0 +1,117 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+
+  export let tree;
+  export let open = false;
+  export let nodeSelection;
+  export let selectedNodes;
+
+  $: if (tree.disabled) open = false;
+  $: selected = $selectedNodes.find((x) => x.id == tree.id);
+
+  const toggleOpen = (e) => {
+    if (tree.disabled) return;
+    open = !open;
+    dispatch("nodeClick", { id: tree.id, label: tree.label });
+  };
+
+  // Recursion
+  const hasChildSelected = (children) => {
+    let found = false;
+    if (!$selectedNodes.length) return found;
+
+    if (children.findIndex((x) => x.id == $selectedNodes[0].id) > -1) {
+      found = true;
+    } else {
+      children.forEach((element) => {
+        found = hasChildSelected(element.children);
+      });
+    }
+    return found;
+  };
+
+  const toggleNode = (e) => {
+    if (!tree.disabled)
+      dispatch("nodeSelect", { id: tree.id, label: tree.label });
+  };
+</script>
+
+<!-- svelte-ignore a11y-missing-attribute -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<li
+  class="spectrum-TreeView-item"
+  class:is-disabled={tree.disabled}
+  class:is-open={open}
+>
+  <div
+    class="spectrum-TreeView-itemLink"
+    style:padding-left={tree?.children?.length ? "0.25rem" : "1.5rem"}
+    style:padding-right={"0.5rem"}
+  >
+    {#if tree.children?.length}
+      <i
+        class={"ri-arrow-right-s-line"}
+        class:open
+        style:z-index={1}
+        style:font-size={"16px"}
+        on:mousedown|self|preventDefault={toggleOpen}
+      />
+    {/if}
+    <div
+      style:z-index={2}
+      style:width={"100%"}
+      on:mousedown|preventDefault={toggleNode}
+    >
+      <span class="spectrum-TreeView-itemLabel" style:padding-left={"0.25rem"}
+        >{tree.label || "Not Set"}</span
+      >
+    </div>
+
+    {#if selected}
+      <i
+        class={"ri-checkbox-circle-fill"}
+        style:color={"var(--spectrum-global-color-green-500)"}
+        style:font-size={"16px"}
+      ></i>
+    {/if}
+  </div>
+
+  {#if tree.children?.length}
+    <ul class="spectrum-TreeView">
+      {#each tree.children as node, idx}
+        <svelte:self
+          tree={node}
+          {nodeSelection}
+          {selectedNodes}
+          open={node.open}
+          on:nodeSelect
+          on:nodeClick
+        ></svelte:self>
+      {/each}
+    </ul>
+  {/if}
+</li>
+
+<style>
+  .spectrum-TreeView-item {
+    transition: all 130ms;
+  }
+
+  .spectrum-TreeView-itemLink {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.25rem;
+    max-height: 1.75rem;
+  }
+
+  i {
+    transition: all 130ms;
+  }
+  .open {
+    transform: rotate(90deg);
+  }
+</style>

package/src/types/svelte-portal.d.ts

@@ -0,0 +1 @@
+declare module 'svelte-portal';