@poirazis/supercomponents-shared 0.0.1

package/src/lib/SuperTableCells/CellCommon.css

@@ -0,0 +1,319 @@
+.superCell {
+  flex: auto;
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  transition: all 130ms;
+
+  &.multirow {
+    align-items: stretch;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover {
+    .icon {
+      color: var(--spectrum-global-color-blue-500);
+    }
+
+    .value.controlIcon {
+      color: var(--spectrum-global-color-gray-700);
+    }
+  }
+
+  &.isDirty {
+    border-left: 2px solid var(--spectrum-global-color-orange-400) !important;
+  }
+
+  .icon {
+    position: absolute;
+    left: 0.5rem;
+    font-size: 16px;
+    color: var(--spectrum-global-color-gray-500);
+  }
+
+  .clearIcon {
+    position: absolute;
+    right: 8px;
+    color: var(--spectrum-global-color-red-500);
+    cursor: pointer;
+  }
+
+  .value {
+    flex: auto;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.placeholder {
+      font-style: italic;
+      font-weight: 400;
+      color: var(--spectrum-global-color-gray-500);
+      justify-content: space-between;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &.with-icon {
+      padding-left: 2rem !important;
+    }
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &.multiline {
+        overflow: auto;
+        white-space: normal;
+        text-overflow: unset;
+      }
+    }
+
+    .clearIcon,
+    .endIcon {
+      color: var(--spectrum-global-color-red-500);
+      cursor: pointer;
+      z-index: 1;
+    }
+
+    .controlIcon {
+      color: var(--spectrum-global-color-gray-600);
+      cursor: pointer;
+    }
+
+    .items {
+      flex: auto;
+      display: flex;
+      overflow: hidden;
+      align-items: stretch;
+      align-self: stretch;
+      gap: 0.5rem;
+
+      .item {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        i {
+          display: none;
+        }
+
+        span {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .items.pills {
+      .item {
+        background-color: var(
+          --option-color,
+          var(--spectrum-global-color-gray-300)
+        );
+        gap: 0.5rem;
+        border-radius: 4px;
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+        i {
+          display: none;
+        }
+      }
+    }
+
+    .items.links {
+      .item {
+        gap: 0.5rem;
+        border-radius: 4px;
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+        background-color: var(
+          --option-color,
+          var(--spectrum-global-color-gray-300)
+        );
+        transition: 130ms;
+        &:hover {
+          cursor: pointer;
+          background-color: var(
+            --option-color,
+            var(--spectrum-global-color-blue-400)
+          );
+          i {
+            display: none;
+          }
+        }
+      }
+    }
+    .items.colorText {
+      .item {
+        gap: 0.5rem;
+        margin-top: 4px;
+        margin-bottom: 4px;
+
+        i {
+          font-size: larger;
+          color: var(--option-color);
+          display: block;
+        }
+      }
+    }
+
+    .items.isUser {
+      .item {
+        background-color: var(
+          --option-color,
+          var(--spectrum-global-color-blue-100)
+        );
+        gap: 0.5rem;
+        border-radius: 4px;
+        padding-left: 0.5rem;
+        padding-right: 0.75rem;
+        i {
+          display: block;
+        }
+      }
+    }
+
+    .item-count {
+      border-radius: 50%;
+      background-color: var(--spectrum-global-color-gray-200);
+      width: 1.7rem;
+      aspect-ratio: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.superCell.formInput {
+  border-radius: 2px;
+  color: var(--spectrum-global-color-gray-800);
+  border: 1px solid var(--spectrum-global-color-gray-300);
+  background: var(--spectrum-global-color-gray-50);
+
+  &:focus-within {
+    border: 1px solid var(--spectrum-global-color-blue-400) !important;
+  }
+
+  &.inEdit {
+    border: 1px solid var(--spectrum-global-color-blue-400) !important;
+  }
+
+  &:hover:not(.disabled):not(.readonly) {
+    cursor: pointer;
+    border: 1px solid var(--spectrum-global-color-gray-400);
+  }
+
+  &.disabled {
+    background-color: var(--spectrum-global-color-gray-200) !important;
+    color: var(--spectrum-global-color-gray-600) !important;
+    cursor: not-allowed !important;
+  }
+
+  &.readonly:not(.disabled) {
+    background-color: var(--spectrum-global-color-gray-50);
+    border: 1px solid var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-global-color-gray-700);
+    opacity: 0.9;
+
+    &:focus-within {
+      border: 1px solid var(--spectrum-global-color-gray-200) !important;
+      opacity: 1;
+    }
+  }
+
+  &.error {
+    border-color: var(--spectrum-global-color-red-400) !important;
+  }
+}
+
+.superCell.tableCell {
+  min-height: unset;
+  border: 1px solid transparent;
+
+  &.inEdit {
+    border-color: var(--spectrum-global-color-blue-500);
+  }
+}
+
+.superCell > .editor {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  white-space: nowrap;
+  overflow: hidden;
+  gap: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  color: inherit;
+
+  &:focus {
+    outline: none;
+    border: none;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+
+  &.placeholder {
+    font-style: italic;
+  }
+
+  &.with-icon {
+    padding-left: 2rem;
+  }
+
+  i {
+    font-size: 18px;
+  }
+}
+
+.superCell.formInput.multirow {
+  min-height: 2rem;
+  max-height: unset;
+}
+
+.superCell.formInput.large {
+  max-height: unset !important;
+}
+
+.superCell.formInput.error.inEdit:focus-within {
+  border: 1px solid var(--spectrum-global-color-red-500);
+}
+
+.superCell.inline {
+  position: relative;
+  border: unset;
+  border-radius: 2px;
+  min-height: 1.8rem;
+  min-width: unset;
+}
+.superCell.inline.disabled {
+  background-color: var(--spectrum-global-color-gray-100) !important;
+  color: var(--spectrum-global-color-gray-600);
+  cursor: not-allowed;
+}
+.superCell.inline.readonly {
+  background-color: var(--spectrum-global-color-gray-100);
+  color: var(--spectrum-global-color-gray-600);
+  cursor: not-allowed;
+}

package/src/lib/SuperTableCells/CellDatetime.svelte

@@ -0,0 +1,180 @@
+<script>
+  import { createEventDispatcher, getContext, onMount } from "svelte";
+  import SuperPopover from "../SuperPopover/SuperPopover.svelte";
+  import { DatePicker } from "date-picker-svelte";
+  const dispatch = new createEventDispatcher();
+  const { processStringSync } = getContext("sdk");
+  import fsm from "svelte-fsm";
+
+  const context = getContext("context");
+
+  export let value;
+  export let formattedValue;
+  export let cellOptions;
+  export let autofocus;
+
+  let originalValue;
+
+  export let cellState = fsm("View", {
+    "*": {
+      goTo(state) {
+        return state;
+      },
+    },
+    View: {
+      focus() {
+        if (!cellOptions.readonly) return "Editing";
+      },
+    },
+    Hovered: {
+      cancel: () => {
+        return "View";
+      },
+    },
+    Focused: {
+      unfocus() {
+        return "View";
+      },
+    },
+    Error: { check: "View" },
+    Editing: {
+      _enter() {
+        originalValue = value;
+        open = true;
+        dispatch("enteredit");
+      },
+      _exit() {
+        dispatch("exitedit");
+      },
+      handleKeyboard(e) {
+        if (e.keyCode == 32) {
+          e.stopPropagation();
+          e.preventDefault();
+          open = !open;
+        }
+      },
+      focusout(e) {
+        if (!picker?.contains(e.relatedTarget)) {
+          open = false;
+          if (value != originalValue) {
+            dispatch("change", value);
+          }
+          return "View";
+        }
+      },
+      cancel() {
+        value = Array.isArray(originalValue)
+          ? [...originalValue]
+          : originalValue;
+        return "View";
+      },
+    },
+  });
+
+  let anchor;
+  let picker;
+  let open;
+
+  $: innerDate = value ? new Date(value) : new Date();
+
+  $: formattedValue =
+    cellOptions.template && value
+      ? processStringSync(cellOptions.template, { value })
+      : undefined;
+
+  $: placeholder =
+    cellOptions.readonly || cellOptions.disabled
+      ? ""
+      : cellOptions.placeholder || "";
+
+  $: inEdit = $cellState == "Editing";
+  $: inline = cellOptions.role == "inlineInpur";
+  $: isDirty = inEdit && originalValue != value;
+
+  onMount(() => {
+    if (autofocus)
+      setTimeout(() => {
+        cellState.focus();
+        editor?.focus();
+      }, 30);
+  });
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  bind:this={anchor}
+  class="superCell"
+  tabindex={cellOptions.readonly || cellOptions.disabled ? "-1" : "0"}
+  class:inEdit
+  class:isDirty={isDirty && cellOptions.showDirty}
+  class:inline
+  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}
+  on:focus={cellState.focus}
+  on:keypress={cellState.handleKeyboard}
+  on:focusout={cellState.focusout}
+>
+  {#if cellOptions.icon}
+    <i class={cellOptions.icon + " icon"}></i>
+  {/if}
+
+  {#if inEdit}
+    <div
+      class="editor"
+      class:with-icon={cellOptions.icon}
+      class:placeholder={!value && !formattedValue}
+      {value}
+      placeholder={cellOptions?.placeholder ?? ""}
+      on:click={() => (open = !open)}
+    >
+      {formattedValue || innerDate?.toDateString() || cellOptions?.placeholder}
+      <i
+        class="ri-calendar-line"
+        style="font-size: 16px; justify-self: flex-end"
+      ></i>
+    </div>
+  {:else}
+    <div
+      class="value"
+      class:with-icon={cellOptions.icon}
+      class:placeholder={!value}
+      style:justify-content={cellOptions.align}
+    >
+      <span>
+        {formattedValue
+          ? formattedValue
+          : value
+            ? innerDate?.toDateString()
+            : placeholder}
+      </span>
+    </div>
+  {/if}
+</div>
+
+{#if inEdit}
+  <SuperPopover {anchor} dismissible={false} {open} align="right">
+    <div
+      bind:this={picker}
+      style:--date-picker-background="var(--spectrum-alias-background-color-default)"
+      style:--date-picker-foreground="var(--spectrum-global-color-gray-800)"
+      style:--date-picker-selected-background="var(--accent-color)"
+    >
+      <DatePicker
+        bind:value={innerDate}
+        on:select={(e) => {
+          value = e.detail;
+          anchor?.focus();
+          open = false;
+        }}
+      />
+    </div>
+  </SuperPopover>
+{/if}