@poirazis/supercomponents-shared 0.0.1

package/src/lib/SuperTableCells/CellSkeleton.svelte

@@ -0,0 +1,59 @@
+<script>
+  export let active = true;
+  export let minHeight = "2rem";
+</script>
+
+{#if active}
+  <div class="skeleton" style:min-height={minHeight}>
+    <div class="children"></div>
+  </div>
+{:else}
+  <slot />
+{/if}
+
+<style>
+  .skeleton {
+    flex: auto;
+    width: 100%;
+    align-self: stretch;
+    opacity: 0;
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    background-color: var(--spectrum-global-color-gray-200) !important;
+    overflow: hidden;
+    position: relative;
+    animation: fadeIn 130ms ease 0s 1 normal forwards;
+  }
+  .children {
+    flex: auto;
+    pointer-events: none;
+    opacity: 0.65;
+    background-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0,
+      rgba(255, 255, 255, 0.15) 20%,
+      rgba(255, 255, 255, 0.2) 60%,
+      rgba(255, 255, 255, 0.15) 80%,
+      rgba(255, 255, 255, 0)
+    );
+    animation: shimmer 2s infinite;
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0.75;
+    }
+  }
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-80%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+</style>

package/src/lib/SuperTableCells/CellString.svelte

@@ -0,0 +1,178 @@
+<script>
+  import { createEventDispatcher, getContext, onMount } from "svelte";
+  import fsm from "svelte-fsm";
+  const dispatch = createEventDispatcher();
+  const { processStringSync } = getContext("sdk");
+
+  export let value;
+  export let formattedValue;
+  export let cellOptions = {
+    role: "formInput",
+    initialState: "Editing",
+    debounce: 250,
+  };
+  export let autofocus;
+
+  let timer;
+  let originalValue;
+
+  let editor;
+  let lastEdit;
+  let localValue = value;
+
+  export let cellState = fsm(cellOptions?.initialState ?? "View", {
+    "*": {
+      goTo(state) {
+        return state;
+      },
+      reset() {
+        localValue = value;
+        lastEdit = undefined;
+      },
+    },
+    View: {
+      _enter() {
+        localValue = value;
+      },
+      focus() {
+        if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
+      },
+    },
+    Editing: {
+      _enter() {
+        originalValue = value;
+        dispatch("enteredit");
+      },
+      _exit() {
+        originalValue = undefined;
+        dispatch("exitedit");
+        dispatch("focusout");
+      },
+      clear() {
+        if (cellOptions.debounce) dispatch("change", null);
+        lastEdit = new Date();
+        localValue = null;
+      },
+      focusout(e) {
+        this.submit();
+      },
+      submit() {
+        if (isDirty) {
+          dispatch("change", localValue);
+        }
+        return "View";
+      },
+      cancel() {
+        value = originalValue;
+        dispatch("cancel");
+        return "View";
+      },
+      debounce(e) {
+        localValue = e.target.value;
+        lastEdit = new Date();
+        if (cellOptions?.debounce) {
+          clearTimeout(timer);
+          timer = setTimeout(() => {
+            dispatch("change", localValue);
+          }, cellOptions.debounce ?? 0);
+        }
+      },
+      handleKeyboard(e) {
+        if (e.key == "Enter") this.submit();
+        if (e.key == "Escape") this.cancel();
+      },
+    },
+  });
+
+  $: cellState.reset(value);
+  $: inEdit = $cellState == "Editing";
+  $: isDirty = lastEdit && originalValue != localValue;
+  $: formattedValue =
+    !formattedValue && cellOptions?.template
+      ? processStringSync(cellOptions.template, {
+          value,
+        })
+      : formattedValue;
+
+  $: placeholder =
+    cellOptions.readonly || cellOptions.disabled
+      ? ""
+      : cellOptions.placeholder || "";
+
+  const focus = (node) => {
+    node?.focus();
+  };
+
+  onMount(() => {
+    if (autofocus)
+      setTimeout(() => {
+        cellState.focus();
+      }, 50);
+  });
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="superCell"
+  class:inEdit
+  class:isDirty={isDirty && cellOptions.showDirty}
+  class:focused={inEdit}
+  class:inline={cellOptions.role == "inlineInput"}
+  class:tableCell={cellOptions.role == "tableCell"}
+  class:formInput={cellOptions.role == "formInput"}
+  class:disabled={cellOptions.disabled}
+  class:readonly={cellOptions.readonly}
+  class:error={cellOptions.error}
+  style:color={cellOptions.color}
+  style:background={cellOptions.background}
+  style:font-weight={cellOptions.fontWeight}
+>
+  {#if cellOptions.icon}
+    <i class={cellOptions.icon + " icon"}></i>
+  {/if}
+
+  {#if inEdit}
+    <input
+      bind:this={editor}
+      tabindex="0"
+      class="editor"
+      class:with-icon={cellOptions.icon}
+      class:placeholder={!value && !formattedValue && !localValue}
+      value={localValue ?? ""}
+      placeholder={cellOptions?.placeholder ?? ""}
+      style:text-align={cellOptions.align == "center"
+        ? "center"
+        : cellOptions.align == "flex-end"
+          ? "right"
+          : "left"}
+      style:padding-right={cellOptions.align != "flex-start"
+        ? "2rem"
+        : "0.75rem"}
+      on:input={cellState.debounce}
+      on:focusout={cellState.focusout}
+      on:keydown={cellState.handleKeyboard}
+      use:focus
+    />
+    {#if localValue && cellOptions?.clearIcon !== false}
+      <i
+        class="ri-close-line clearIcon"
+        on:mousedown|self|preventDefault={cellState.clear}
+      />
+    {/if}
+  {:else}
+    <div
+      class="value"
+      tabindex={cellOptions.readonly || cellOptions.disabled ? "-1" : "0"}
+      class:with-icon={cellOptions.icon}
+      class:placeholder={!value}
+      style:justify-content={cellOptions.align}
+      on:focusin={cellState.focus}
+    >
+      <span>
+        {formattedValue || value || placeholder}
+      </span>
+    </div>
+  {/if}
+</div>

package/src/lib/SuperTableCells/CellStringSimple.svelte

@@ -0,0 +1,55 @@
+<script>
+  import { getContext } from "svelte";
+  const { processStringSync } = getContext("sdk");
+
+  export let value = null;
+  export let formattedValue;
+  export let cellOptions = {
+    role: "formInput",
+    initialState: "Editing",
+    debounce: 250,
+  };
+
+  $: formattedValue =
+    !formattedValue && cellOptions?.template
+      ? processStringSync(cellOptions.template, {
+          value,
+        })
+      : formattedValue;
+
+  $: placeholder =
+    cellOptions.readonly || cellOptions.disabled
+      ? ""
+      : cellOptions.placeholder || "";
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="superCell"
+  class:inline={cellOptions.role == "inlineInput"}
+  class:tableCell={cellOptions.role == "tableCell"}
+  class:formInput={cellOptions.role == "formInput"}
+  class:disabled={cellOptions.disabled}
+  class:readonly={cellOptions.readonly}
+  class:error={cellOptions.error}
+  style:color={cellOptions.color}
+  style:background={cellOptions.background}
+  style:font-weight={cellOptions.fontWeight}
+>
+  {#if cellOptions.icon}
+    <i class={cellOptions.icon + " icon"}></i>
+  {/if}
+
+  <div
+    class="value"
+    class:with-icon={cellOptions.icon}
+    class:placeholder={!value}
+    style:justify-content={cellOptions.align}
+  >
+    <span>
+      {formattedValue || value || placeholder}
+    </span>
+  </div>
+</div>

package/src/lib/SuperTableCells/index.js

@@ -0,0 +1,21 @@
+// Export all SuperTableCells components for easy importing
+export { default as CellAttachment } from "./CellAttachment.svelte";
+export { default as CellBoolean } from "./CellBoolean.svelte";
+export { default as CellColor } from "./CellColor.svelte";
+export { default as CellDatetime } from "./CellDatetime.svelte";
+export { default as CellIcon } from "./CellIcon.svelte";
+export { default as CellJSON } from "./CellJSON.svelte";
+export { default as CellLink } from "./CellLink.svelte";
+export { default as CellLinkAdvanced } from "./CellLinkAdvanced.svelte";
+export { default as CellLinkPickerSelect } from "./CellLinkPickerSelect.svelte";
+export { default as CellLinkPickerTable } from "./CellLinkPickerTable.svelte";
+export { default as CellLinkPickerTree } from "./CellLinkPickerTree.svelte";
+export { default as CellNumber } from "./CellNumber.svelte";
+export { default as CellOptions } from "./CellOptions.svelte";
+export { default as CellOptionsAdvanced } from "./CellOptionsAdvanced.svelte";
+export { default as CellSkeleton } from "./CellSkeleton.svelte";
+export { default as CellString } from "./CellString.svelte";
+export { default as CellStringSimple } from "./CellStringSimple.svelte";
+
+// Export utilities from this directory
+export * as remixIcons from "./remixIcons.js";