@poirazis/supercomponents-shared 1.2.15 → 1.2.18

package/src/lib/SuperTable/controls/RowButtonsColumn.svelte

@@ -5,7 +5,6 @@
 
   const stbSettings = getContext("stbSettings");
   const stbState = getContext("stbState");
-  const stbData = getContext("stbData");
   const stbHorizontalScrollPos = getContext("stbHorizontalScrollPos");
   const stbHovered = getContext("stbHovered");
   const stbEditing = getContext("stbEditing");
@@ -16,6 +15,8 @@
 
   const stbAPI = getContext("stbAPI");
 
+  const allContext = getContext("context");
+
   export let right;
   export let rowMenu;
   export let rowMenuItems;
@@ -57,6 +58,12 @@
   <div
     class="super-column-body"
     style:margin-top={"var(--super-column-top-offset)"}
+    style:border-right={right
+      ? null
+      : "1px solid var(--super-table-devider-color, --spectrum-global-color-gray-200)"}
+    style:border-left={right
+      ? "1px solid var(--super-table-devider-color, --spectrum-global-color-gray-200)"
+      : null}
     class:quiet
     class:sticky
     class:zebra={$stbSettings.appearance.zebraColors}
@@ -76,7 +83,7 @@
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
           class="row-buttons"
-          style:gap={inlineButtons.length > 1 ? "0.5rem" : "0rem"}
+          style:gap={inlineButtons.length > 1 ? "0.25rem" : "0rem"}
         >
           {#if rowMenu && inlineButtons?.length}
             {#each inlineButtons as { conditions, disabledTemplate, onClick, disabled, ...rest }}
@@ -89,6 +96,7 @@
                     stbAPI.shouldDisableButton(
                       disabledTemplate,
                       stbAPI.enrichContext($data[visibleRow]),
+                      $allContext,
                     )}
                   onClick={() => {
                     stbAPI.executeRowButtonAction(visibleRow, onClick);
@@ -99,7 +107,7 @@
           {/if}
           {#if rowMenu && menuItems?.length}
             <SuperButton
-              size="S"
+              size="XS"
               icon={menuIcon}
               text=""
               quiet="true"
@@ -134,20 +142,28 @@
     {#if menuItems?.length}
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div class="action-menu">
-        {#each menuItems as { text, icon, disabled, onClick, size }}
-          <SuperButton
-            {size}
-            {icon}
-            {text}
-            {disabled}
-            menuItem
-            menuAlign={right ? "right" : "left"}
-            onClick={() => {
-              stbAPI.executeRowButtonAction($stbMenuID, onClick);
-              openMenu = false;
-              $stbMenuID = undefined;
-            }}
-          />
+        {#each menuItems as { text, icon, disabled, onClick, size, conditions, disabledTemplate }}
+          {#if stbAPI.shouldShowButton(conditions || [], stbAPI.enrichContext($data[$stbMenuID]))}
+            <SuperButton
+              {size}
+              {icon}
+              {text}
+              disabled={disabled ||
+                $stbEditing == $stbMenuID ||
+                $rowMetadata[$stbMenuID].disabled ||
+                stbAPI.shouldDisableButton(
+                  disabledTemplate,
+                  stbAPI.enrichContext($data[$stbMenuID]),
+                )}
+              menuItem
+              menuAlign={right ? "right" : "left"}
+              onClick={() => {
+                stbAPI.executeRowButtonAction($stbMenuID, onClick);
+                openMenu = false;
+                $stbMenuID = undefined;
+              }}
+            />
+          {/if}
         {/each}
       </div>
     {/if}

package/src/lib/SuperTable/controls/SelectionColumn.svelte

@@ -73,7 +73,7 @@
       class:quiet
       class:sticky
       style:margin-top={"var(--super-column-top-offset)"}
-      style:border-right={"1px solid var(--spectrum-global-color-gray-200)"}
+      style:border-right={"1px solid var(--super-table-devider-color, --spectrum-global-color-gray-200)"}
     >
       {#each $stbVisibleRows as visibleRow (visibleRow)}
         {@const selected = $stbRowMetadata[visibleRow]?.selected}
@@ -95,7 +95,7 @@
           {#if $stbSettings.features.canSelect && !hideSelectionColumn}
             <Checkbox
               checked={selected}
-              disabled={$stbRowMetadata[visibleRow]?.disabled}
+              locked={$stbRowMetadata[visibleRow]?.disabled}
               hovered={$stbHovered == visibleRow}
               on:change={() => stbAPI.selectRow(visibleRow)}
             />

package/src/lib/SuperTableCells/CellBoolean.svelte

@@ -1,6 +1,8 @@
 <script>
-  import { createEventDispatcher, getContext } from "svelte";
+  import { createEventDispatcher } from "svelte";
   import fsm from "svelte-fsm";
+  import Switch from "../UI/elements/Switch.svelte";
+  import Checkbox from "../UI/elements/Checkbox.svelte";
   import "./CellCommon.css";
 
   export let value;
@@ -21,20 +23,20 @@
     View: {
       focus() {
         if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
-        editor?.focus();
       },
     },
     Editing: {
       _enter() {
         originalValue = value;
-        editor?.focus();
         dispatch("enteredit");
       },
       _exit() {
         dispatch("exitedit");
       },
-      focus() {
-        editor?.focus();
+      focus() {},
+      toggle() {
+        value = !value;
+        dispatch("change", value);
       },
       change(e) {
         if (cellOptions.debounce) dispatch("change", value);
@@ -56,15 +58,10 @@
   $: inline = cellOptions.role == "inlineInput";
   $: inEdit = $cellState == "Editing";
   $: isDirty = inEdit && originalValue !== value;
-  $: checkbox = cellOptions?.controlType == "checkbox";
   $: tableCell = cellOptions.role == "tableCell";
   $: inlineLabel = cellOptions.inlineLabel;
   $: icon = cellOptions.error ? "ri-error-warning-line" : cellOptions.icon;
   $: error = cellOptions.error;
-
-  const focus = (node) => {
-    if (cellOptions.role == "tableCell") node.focus();
-  };
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -72,6 +69,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="superCell"
+  tabindex={cellOptions.disabled || cellOptions.readonly ? undefined : "1"}
   class:inEdit
   class:isDirty={isDirty && cellOptions.showDirty}
   class:inline
@@ -84,6 +82,11 @@
     ? "var(--spectrum-global-color-gray-50)"
     : cellOptions.background}
   style:font-weight={cellOptions.fontWeight}
+  on:keydown={(e) => {
+    if (e.code == "Space") cellState.toggle();
+  }}
+  on:focusin={cellState.focus}
+  on:focusout={cellState.submit}
 >
   {#if icon}
     <i class={icon + " field-icon"} class:with-error={error}></i>
@@ -95,48 +98,40 @@
       class:naked-field={!tableCell}
       style:justify-content={cellOptions.align ?? "center"}
     >
-      {#if !checkbox}
-        <div class="spectrum-Switch spectrum-Switch--emphasized">
-          <input
-            class="spectrum-Switch-input"
-            bind:checked={value}
-            bind:this={editor}
-            type="checkbox"
+      {#if cellOptions.controlType == "switch"}
+        <div class="switch-wrapper">
+          <Switch
+            checked={value}
             disabled={cellOptions.disabled || cellOptions.readonly}
-            on:focusin={cellState.focus}
-            on:focusout={cellState.submit}
-            on:change={cellState.change}
-            use:focus
+            size="medium"
+            on:change={(e) => {
+              value = e.detail.checked;
+              cellState.change();
+            }}
           />
-          <span class="spectrum-Switch-switch"></span>
           {#if inlineLabel}
-            <span class="spectrum-Switch-label">{inlineLabel}</span>
+            <span class="switch-label">{inlineLabel}</span>
           {/if}
         </div>
       {:else}
-        <input
-          class="checkbox"
-          bind:checked={value}
-          bind:this={editor}
-          type="checkbox"
-          disabled={cellOptions.disabled || cellOptions.readonly}
-          on:focusin={cellState.focus}
-          on:focusout={cellState.submit}
-          on:change={cellState.change}
-          use:focus
-        />
-        {#if inlineLabel}
-          <span class="checkbox-label">{inlineLabel}</span>
-        {/if}
+        <div class="checkbox-wrapper">
+          <Checkbox
+            checked={value}
+            size="medium"
+            disabled={cellOptions.disabled || cellOptions.readonly}
+            on:change={(e) => {
+              value = e.detail.checked;
+              cellState.change();
+            }}
+          />
+          {#if inlineLabel}
+            <span class="checkbox-label">{inlineLabel}</span>
+          {/if}
+        </div>
       {/if}
     </div>
   {:else}
-    <div
-      class="value"
-      tabIndex="0"
-      style:justify-content={cellOptions.align ?? "center"}
-      on:focusin={cellState.focus}
-    >
+    <div class="value" style:justify-content={cellOptions.align ?? "center"}>
       {#if value}
         <i class="ri-check-line valueicon"></i>
       {:else if cellOptions.showFalse}
@@ -147,8 +142,20 @@
 </div>
 
 <style>
-  .spectrum-Switch {
-    margin-left: 0.25rem !important;
+  .switch-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .switch-label {
+    margin-left: 0.25rem;
   }
 
   .checkbox-label {

package/src/lib/SuperTableCells/CellCommon.css

@@ -9,8 +9,11 @@
   width: 100%;
   max-height: 2rem;
   font-size: 13px;
-  padding: 0 0.5rem 0 0.75rem;
+  padding: 0 0.75rem 0 0.75rem;
   gap: 0.5rem;
+  font-family:
+    var(--spectrum-textfield-text-font-family),
+    var(--spectrum-global-font-family-base);
 
   &.multirow {
     padding: unset;
@@ -66,32 +69,43 @@
     overflow: hidden;
     gap: 0.5rem;
 
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     &:focus {
       outline: none;
     }
 
     &.placeholder {
-      font-weight: 400;
-      color: var(--spectrum-global-color-gray-500);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      font-weight: 400;
+      color: var(--spectrum-global-color-gray-500);
+      font-style: italic !important;
 
-      & > span {
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: 400;
+        color: var(--spectrum-global-color-gray-500);
         font-style: italic !important;
       }
     }
 
-    & > span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      padding: unset !important;
+    &.textarea {
+      flex: 1;
+      padding: 0.5rem 0.75rem !important;
+      display: flex;
+      align-items: flex-start;
+      overflow-y: auto;
 
-      &.multiline {
-        overflow: auto;
-        white-space: normal;
-        text-overflow: unset;
+      span {
+        white-space: pre-wrap;
       }
     }
 
@@ -108,7 +122,7 @@
         display: flex;
         align-items: center;
         overflow: hidden;
-        padding: 0.15rem 0.5rem;
+        padding: 0rem 0.5rem;
 
         .loope {
           display: none;
@@ -258,6 +272,42 @@
   }
 }
 
+.superCell.loading {
+  pointer-events: none;
+  background-color: rgb(
+    from var(--spectrum-global-color-gray-200) r g b / 0.75
+  ) !important;
+  border: 1px solid rgb(from var(--spectrum-global-color-gray-200) r g b / 0.75) !important;
+}
+.superCell.loading::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  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)
+  ) !important;
+  animation: loadingShimmer 2s infinite;
+  pointer-events: none;
+}
+
+@keyframes loadingShimmer {
+  0% {
+    transform: translateX(-80%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
 .superCell.formInput {
   border-radius: 4px;
   color: var(--spectrum-global-color-gray-800);
@@ -266,15 +316,18 @@
   min-height: 2rem;
 
   &.inEdit:not(.naked-field):not(.has-popup) {
-    border: 1px solid var(--spectrum-global-color-blue-400);
+    border: 1px solid var(--primaryColor, --spectrum-global-color-blue-400);
 
     &:focus-within:not(.naked-field):not(.has-popup) {
-      border: 1px solid var(--spectrum-global-color-blue-400);
+      border: 1px solid var(--primaryColor, --spectrum-global-color-blue-400);
     }
   }
 
-  &:hover:not(.disabled):not(.readonly):not(.inEdit) {
-    border: 1px solid var(--spectrum-global-color-gray-400);
+  &:hover:not(.disabled):not(.readonly):not(.inEdit):not(.naked-field) {
+    border: 1px solid
+      rgb(
+        from var(--primaryColor, --spectrum-global-color-blue-400) r g b / 0.5
+      ) !important;
     cursor: pointer;
   }
 
@@ -307,8 +360,15 @@
 }
 
 .superCell.formInput.has-popup {
+  background-color: var(--spectrum-global-color-gray-50);
+
+  &:hover:not(.disabled):not(.readonly):not(.inEdit) {
+    border-color: var(--spectrum-global-color-gray-100) !important;
+    cursor: pointer;
+  }
+
   &.inEdit {
-    border: 1px solid var(--spectrum-global-color-blue-400) !important;
+    border: 1px solid var(--spectrum-global-color-gray-200) !important;
     background-color: var(--spectrum-global-color-gray-200) !important;
     cursor: pointer !important;
   }
@@ -322,7 +382,7 @@
   min-height: unset;
   max-height: unset;
   border: 1px solid transparent;
-  padding: 0 0.5rem;
+  padding: 0 0.5rem !important;
 
   &:hover:not(.readonly):not(.inEdit) {
     border: 1px dashed var(--spectrum-global-color-blue-400);
@@ -353,6 +413,10 @@
   color: inherit;
   letter-spacing: inherit;
   font-size: inherit;
+  padding: unset !important;
+  font-family:
+    var(--spectrum-textfield-text-font-family),
+    var(--spectrum-global-font-family-base);
 
   &:focus {
     outline: none;
@@ -363,22 +427,20 @@
   }
 
   &.placeholder {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 400;
+    color: var(--spectrum-global-color-gray-500);
     font-style: italic !important;
-  }
-
-  &.textarea {
-    flex: 1 1 auto;
-    padding: 0.5rem 0rem;
-    justify-content: flex-start;
-    align-items: stretch;
-    white-space: normal;
-    overflow: auto;
-    resize: none;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    color: inherit;
-    height: unset;
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 400;
+      color: var(--spectrum-global-color-gray-500);
+      font-style: italic !important;
+    }
   }
 }