@poirazis/supercomponents-shared 0.0.1

package/src/lib/SuperButton/SuperButton.svelte

@@ -0,0 +1,341 @@
+<script>
+  import { createEventDispatcher, onDestroy, onMount } from "svelte";
+  const dispatch = createEventDispatcher();
+
+  export let size = "M";
+  export let menuItem = false;
+  export let menuAlign = "right";
+  export let icon = undefined;
+  export let iconAfterText = undefined;
+  export let text = "";
+  export let quiet = undefined;
+  export let selected = undefined;
+  export let disabled = undefined;
+  export let onClick = undefined;
+  export let buttonClass = "actionButton";
+  export let type = "primary";
+
+  export let actionsMode = "normal";
+  export let condition = undefined; // For backward compatibility
+  export let loopSource = undefined;
+  export let loopDelay = 0;
+  export let loopEvent = undefined;
+  export let timerDuration = 60;
+
+  export let fullWidth = undefined;
+  export let iconOnly = undefined;
+
+  // Events
+  export let onTimer = undefined;
+  export let onLoopStart = undefined;
+  export let onLoopEnd = undefined;
+  export let onTrueCondition = undefined;
+  export let onFalseCondition = undefined;
+
+  $: loop = safeParse(loopSource);
+
+  let working = false;
+  let ui_timer = undefined;
+  let elapsed = 0;
+
+  async function handleClick() {
+    working = true;
+    if (actionsMode == "loop") {
+      if (onLoopStart) await onLoopStart({ iterations: loopSource?.length });
+      if (Array.isArray(loop) && loopEvent) {
+        for (var i = 0; i < loop.length; i++) {
+          await loopEvent({ idx: i, value: loop[i] });
+          await sleep(loopDelay);
+        }
+      }
+      if (onLoopEnd) await onLoopEnd();
+    } else if (actionsMode == "conditional") {
+      if (condition == true) await onTrueCondition?.();
+      else await onFalseCondition?.();
+    } else if (onClick) {
+      await onClick?.();
+    }
+
+    working = false;
+  }
+
+  function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  const safeParse = (input) => {
+    if (!input) return undefined;
+
+    let res = [];
+    try {
+      res = JSON.parse(input);
+      if (!Array.isArray(res)) res = [input];
+    } catch (ex) {
+      res = input?.split(",") ?? [input];
+    }
+
+    return res;
+  };
+
+  onMount(() => {
+    if (actionsMode == "timer") {
+      text = timerDuration;
+      ui_timer = setInterval(() => {
+        elapsed += 1;
+        if (elapsed == timerDuration) {
+          elapsed = 0;
+          onTimer?.();
+        }
+        text = timerDuration - elapsed;
+      }, 1000);
+    }
+  });
+
+  onDestroy(() => {
+    if (ui_timer) clearInterval(ui_timer);
+  });
+</script>
+
+<button
+  tabindex={disabled ? "-1" : "0"}
+  on:click={(e) => {
+    if (!disabled) {
+      dispatch("click", e.target);
+      handleClick();
+    }
+  }}
+  class:super-button={true}
+  class:small={size == "S"}
+  class:is-selected={selected}
+  class:cta={type == "cta" && !disabled}
+  class:warning={type == "warning"}
+  class:primary={type == "primary" && !menuItem}
+  class:secondary={type == "secondary"}
+  class:overBackground={type == "overBackground"}
+  class:ink={type == "ink"}
+  class:menu={type == "menu"}
+  class:quiet
+  class:icon
+  class:iconOnly={iconOnly || !text}
+  class:full-width={fullWidth}
+  class:menu-item={menuItem}
+  class:menu-item-right={menuItem && menuAlign == "right"}
+  class={buttonClass == "actionButton"
+    ? "spectrum-ActionButton spectrum-ActionButton--size" + size
+    : "spectrum-Button spectrum-Button--size" + size}
+  class:disabled={disabled || working}
+>
+  {#if !iconAfterText}
+    <i class={icon} />
+    <span>{text}</span>
+  {:else}
+    <span>{text}</span>
+    <i class={icon} />
+  {/if}
+</button>
+
+<style>
+  .super-button {
+    border: 1px solid var(--spectrum-global-color-gray-400);
+    background-color: var(--spectrum-global-color-gray-75);
+    color: var(--spectrum-global-color-gray-800);
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    min-width: 5rem;
+    padding: 0rem 0.75rem;
+    gap: 0.5rem;
+
+    &.small {
+      min-width: 4rem;
+      padding: 0rem 0.5rem;
+      gap: 0.5rem;
+      font-size: smaller;
+    }
+
+    & > span {
+      white-space: nowrap;
+    }
+
+    &.icon {
+      & > i {
+        display: block;
+      }
+    }
+
+    &.iconOnly {
+      min-width: unset;
+      & > span {
+        display: none;
+      }
+    }
+    & > i {
+      display: none;
+      opacity: 0.9;
+    }
+  }
+
+  .full-width {
+    width: 100%;
+  }
+  .menu-item {
+    width: 100%;
+    justify-content: flex-start;
+    border: unset !important;
+    border-radius: 0;
+    background-color: transparent !important;
+    font-weight: 500;
+
+    &:hover {
+      background-color: var(--spectrum-global-color-gray-200);
+      color: var(--spectrum-global-color-gray-900);
+    }
+  }
+  .menu-item-right {
+    width: 100%;
+    justify-content: flex-end !important;
+  }
+  i {
+    color: var(--iconColor);
+    transition: all 230ms ease-in-out;
+  }
+
+  .cta {
+    background-color: var(--spectrum-global-color-blue-400);
+    border: 1px solid transparent;
+    color: white;
+
+    &.quiet {
+      border-color: transparent !important;
+      background-color: transparent;
+      color: var(--spectrum-global-color-gray-800);
+      &:hover,
+      &:focus {
+        background-color: var(--spectrum-global-color-blue-400);
+        color: white;
+      }
+    }
+    &:hover,
+    &:focus {
+      background-color: var(--spectrum-global-color-blue-600);
+      border-color: var(--spectrum-global-color-blue-600);
+    }
+
+    &:active {
+      border: 1px solid var(--spectrum-global-color-blue-700);
+    }
+  }
+  .ink {
+    background-color: var(--spectrum-global-color-gray-700);
+    border: 1px solid var(--spectrum-global-color-gray-700);
+    color: var(--spectrum-global-color-gray-50);
+    font-weight: 700;
+    opacity: 0.9;
+
+    &.quiet {
+      border-color: transparent !important;
+      background-color: transparent;
+      color: var(--spectrum-global-color-gray-800);
+      &:hover,
+      &:focus {
+        color: var(--spectrum-global-color-gray-50);
+        background-color: var(--spectrum-global-color-gray-600);
+      }
+    }
+    &:hover,
+    &:focus {
+      background-color: var(--spectrum-global-color-gray-800);
+    }
+
+    &:active {
+      border: 1px solid var(--spectrum-global-color-blue-700);
+    }
+  }
+  .primary {
+    &:hover,
+    &:focus {
+      border: 1px solid var(--spectrum-global-color-gray-500);
+      color: var(--spectrum-global-color-gray-900);
+    }
+    &:active {
+      background-color: var(--spectrum-global-color-gray-100);
+      border: 1px solid var(--spectrum-global-color-gray-600);
+    }
+
+    &.quiet {
+      border-color: transparent;
+      background-color: transparent;
+      &:hover {
+        background-color: var(--spectrum-global-color-gray-200);
+        color: var(--spectrum-global-color-gray-900);
+      }
+    }
+  }
+
+  .secondary {
+    background-color: var(--spectrum-global-color-gray-200);
+    border-color: transparent;
+    color: var(--spectrum-global-color-gray-700);
+    font-weight: 500;
+
+    &.quiet {
+      border-color: transparent;
+      background-color: transparent;
+
+      &:hover {
+        background-color: var(--spectrum-global-color-gray-200);
+        border-color: transparent;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      background-color: var(--spectrum-global-color-gray-300);
+      color: var(--spectrum-global-color-gray-900);
+    }
+  }
+
+  .warning {
+    color: var(--spectrum-global-color-red-400);
+    &.quiet {
+      border-color: transparent !important;
+      background-color: transparent;
+      color: var(--spectrum-global-color-red-400);
+
+      &:hover {
+        background-color: var(--spectrum-global-color-red-400);
+      }
+    }
+    &:hover,
+    &:focus {
+      background-color: var(--spectrum-global-color-red-400);
+      color: var(--spectrum-global-color-gray-50);
+    }
+  }
+
+  .overBackground {
+    background-color: transparent;
+
+    &.quiet {
+      border: unset;
+    }
+  }
+
+  .menu {
+    border: unset;
+    background: transparent;
+    padding-right: 0rem;
+    color: var(--spectrum-global-color-gray-700);
+  }
+
+  .disabled {
+    background-color: var(--spectrum-global-color-gray-200) !important;
+    color: var(--spectrum-global-color-gray-400) !important;
+    cursor: not-allowed;
+    border-color: var(--spectrum-global-color-gray-300);
+    &.quiet {
+      background-color: unset !important;
+      border: unset !important;
+    }
+  }
+</style>

package/src/lib/SuperFieldLabel/SuperFieldLabel.svelte

@@ -0,0 +1,91 @@
+<script>
+  export let labelPos;
+  export let labelWidth;
+  export let label;
+  export let helpText;
+  export let error;
+  export let fieldState;
+
+  let showHelp;
+  $: width = labelPos == "left" ? (labelWidth ? labelWidth : "5rem") : "auto";
+  $: error = fieldState?.error;
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+{#if labelPos}
+  <div
+    class="superlabel"
+    class:notForm={!fieldState}
+    class:left={labelPos == "left"}
+    class:error
+    style:--label-width={width}
+  >
+    <div
+      class="label"
+      on:mouseenter={() => (showHelp = true)}
+      on:mouseleave={() => (showHelp = false)}
+    >
+      {#if showHelp && helpText}
+        {helpText}
+      {:else}
+        {label}
+      {/if}
+    </div>
+    {#if error}
+      <div class="error-message">
+        {error}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .superlabel {
+    flex: 0 0 auto;
+    width: var(--label-width);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.65rem;
+    color: var(--spectrum-global-color-gray-700);
+    padding-left: 2px;
+    gap: 1rem;
+    transition: 130ms;
+
+    &.notForm {
+      font-size: 14px;
+      padding-left: unset;
+      padding-bottom: 4px;
+    }
+
+    &.left {
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      line-height: 1rem;
+      gap: 0px;
+
+      & > .label {
+        width: var(--label-width);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    & > .label {
+      min-width: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    & > .error-message {
+      color: var(--spectrum-global-color-red-400);
+      font-size: 11px;
+    }
+  }
+</style>

package/src/lib/SuperFieldsCommon.css

@@ -0,0 +1,54 @@
+.superField {
+  width: 100%;
+  display: flex;
+  align-self: flex-start;
+  justify-content: stretch;
+  flex-direction: column;
+
+  &.left-label {
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+  &.multirow {
+    align-items: stretch;
+
+    & > .superlabel {
+      align-self: start;
+
+      &.left {
+        padding-top: 0.5rem;
+      }
+    }
+  }
+
+  &:focus-within {
+    & > .superlabel {
+      color: var(--spectrum-global-golor-gray-700);
+      font-weight: 500;
+    }
+  }
+}
+
+.inline-cells {
+  flex: auto;
+  display: flex;
+  justify-content: stretch;
+  height: 2rem;
+  overflow: hidden;
+
+  &.multirow {
+    height: unset;
+  }
+}
+
+.inline-buttons {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  padding-left: 0.5rem;
+
+  &.vertical {
+    flex-direction: column;
+  }
+}