@poirazis/supercomponents-shared 1.2.16 → 1.2.19

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}
@@ -70,13 +77,13 @@
         class:hovered={$stbHovered == visibleRow || $stbMenuID == visibleRow}
         class:is-editing={$stbEditing == visibleRow}
         class:disabled={$rowMetadata[visibleRow].disabled}
-        style:min-height={$rowMetadata[visibleRow].height + "px"}
+        style:height={$rowMetadata[visibleRow].height + "px"}
         style:padding-right={canScroll && right ? "1.5rem" : "0.5rem"}
       >
         <!-- 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)}
             />
@@ -128,11 +128,12 @@
 <style>
   .selection {
     flex: auto;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    gap: 1rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    gap: 0.5rem;
     font-size: 13px;
     font-weight: 500;
     align-items: center;
+    justify-content: center;
   }
 </style>

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

@@ -362,11 +362,6 @@
 .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-gray-200) !important;
     background-color: var(--spectrum-global-color-gray-200) !important;