@poirazis/supercomponents-shared 1.0.26 → 1.0.28

package/src/lib/SuperTableCells/CellString.svelte

@@ -31,9 +31,10 @@
         return state;
       },
       reset() {
-        console.log("reset", value);
         localValue = value;
         lastEdit = undefined;
+        originalValue = undefined;
+        isDirty = false;
         return cellOptions?.initialState ?? "View";
       },
     },
@@ -52,6 +53,7 @@
       },
       _exit() {
         originalValue = undefined;
+        lastEdit = undefined;
         dispatch("exitedit");
         dispatch("focusout");
       },
@@ -93,18 +95,18 @@
 
   $: inEdit = $cellState == "Editing";
   $: isDirty = lastEdit && originalValue != localValue;
-  $: formattedValue =
-    !formattedValue && cellOptions?.template
-      ? processStringSync(cellOptions.template, {
-          value,
-        })
-      : formattedValue;
+  $: formattedValue = cellOptions?.template
+    ? processStringSync(cellOptions.template, {
+        value,
+      })
+    : value;
 
   $: placeholder =
     cellOptions.readonly || cellOptions.disabled
       ? ""
       : cellOptions.placeholder || "";
 
+  $: cellState.reset(value);
   const focus = (node) => {
     node?.focus();
   };
@@ -137,7 +139,9 @@
   class:readonly={cellOptions.readonly}
   class:error={cellOptions.error}
   style:color={cellOptions.color}
-  style:background={cellOptions.background}
+  style:background={$cellState == "Editing" && cellOptions.role != "inline"
+    ? "var(--spectrum-global-color-gray-50)"
+    : cellOptions.background}
   style:font-weight={cellOptions.fontWeight}
 >
   {#if cellOptions.icon}

package/src/lib/SuperTableCells/index.js

@@ -3,12 +3,12 @@ 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 CellDateRange } from "./CellDateRange.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";

package/src/lib/SuperTableColumn/SuperTableColumn.svelte

@@ -19,6 +19,7 @@
   import CellAttachment from "../SuperTableCells/CellAttachment.svelte";
 
   import CellStringSimple from "../SuperTableCells/CellStringSimple.svelte";
+  import CellLinkAdvanced from "../SuperTableCells/CellLinkAdvanced.svelte";
 
   const stbData = getContext("stbData");
   const stbSettings = getContext("stbSettings");
@@ -136,6 +137,9 @@
         optionsViewMode: $columnOptionsStore.optionsViewMode,
         relViewMode: $columnOptionsStore.relViewMode,
         padding: $columnOptionsStore.isFirst ? "1rem" : "0.5rem",
+        background: $columnOptionsStore.background,
+        color: $columnOptionsStore.color,
+        controlType: "checkbox",
       };
     }
   );

package/src/lib/SuperTableColumn/parts/SuperColumnRow.svelte

@@ -3,7 +3,6 @@
     getContext,
     createEventDispatcher,
     onMount,
-    tick,
     onDestroy,
   } from "svelte";
 
@@ -33,6 +32,7 @@
   export let rowHeight;
   let mounted;
   let viewport;
+  let info;
 
   $: meta = $rowMetadata?.[index] ?? {};
   $: id = row?.[idField] ?? index;
@@ -46,31 +46,23 @@
       ...row,
       [field]: change,
     };
+
     try {
+      value = "";
       let patched_row = await stbAPI.patchRow(patch);
-      row = patched_row;
+      row = { ...patched_row };
     } catch (ex) {
-      console.log(ex);
-    } finally {
-    }
-  };
+      if (ex.json.validationErrors) {
+        info = ex.json.validationErrors[field][0];
+      } else {
+        info = ex.message;
+      }
 
-  const handleSize = async () => {
-    if (mounted) {
-      await tick();
-      if (
-        $columnSettings.superColumn &&
-        viewport &&
-        viewport.scrollHeight > meta.height
-      ) {
-        dispatch("resize", viewport.scrollHeight);
-      } else if (
-        $columnSettings.superColumn &&
-        viewport &&
-        !hasChildren &&
-        viewport.scrollHeight > rowHeight
-      )
-        dispatch("resize", rowHeight);
+      setTimeout(() => {
+        info = undefined;
+      }, 2250);
+    } finally {
+      value = deepGet(row, field);
     }
   };
 
@@ -106,6 +98,7 @@
   class:is-selected={isSelected}
   class:is-hovered={isHovered}
   class:is-editing={isEditing}
+  class:is-disabled={meta.disabled}
   class:isLast
   style:height={meta.height + "px"}
   style:color={meta.color}
@@ -123,8 +116,9 @@
   {#if !hasChildren}
     <svelte:component
       this={$columnSettings.cellComponent}
-      cellOptions={{ ...$rowCellOptions, disabled }}
+      cellOptions={{ ...$rowCellOptions, disabled, error: info }}
       fieldSchema={$columnSettings.schema}
+      ownId={row[idField]}
       {value}
       on:enteredit={() => columnState.enteredit(index)}
       on:exitedit={columnState.exitedit}
@@ -133,6 +127,9 @@
         stbAPI.executeOnLinkClickAction(field, e.detail);
       }}
     />
+    {#if info}
+      <div class="info" class:bottom={index == 0}>{info}</div>
+    {/if}
   {:else}
     <Provider
       data={{
@@ -147,3 +144,19 @@
     </Provider>
   {/if}
 </div>
+
+<style>
+  .info {
+    position: absolute;
+    top: -26px;
+    font-size: 11px;
+    background-color: var(--spectrum-global-color-red-400);
+    border-radius: 4px;
+    padding: 4px;
+
+    &.bottom {
+      top: unset;
+      bottom: -26px;
+    }
+  }
+</style>

package/src/lib/SuperTree/SuperTree.svelte

@@ -57,13 +57,13 @@
         class:open
         style:z-index={1}
         style:font-size={"16px"}
-        on:mousedown|self|preventDefault={toggleOpen}
+        on:mousedown|self|preventDefault|stopPropagation={toggleOpen}
       />
     {/if}
     <div
       style:z-index={2}
       style:width={"100%"}
-      on:mousedown|preventDefault={toggleNode}
+      on:mousedown|preventDefault|stopPropagation={toggleNode}
     >
       <span class="spectrum-TreeView-itemLabel" style:padding-left={"0.25rem"}
         >{tree.label || "Not Set"}</span

package/src/lib/SuperTableCells/CellLinkPickerTable.svelte

@@ -1,91 +0,0 @@
-<script>
-  import { createEventDispatcher, getContext } from "svelte";
-
-  const dispatch = createEventDispatcher();
-
-  const { fetchData, API } = getContext("sdk");
-
-  export let value = [];
-  export let datasource;
-  export let sortColumn;
-  export let sortOrder;
-  export let filter;
-  export let searchTerm;
-  export let pickerColumns;
-  export let searchColumns = [];
-  export let multi;
-
-  export let picker;
-
-  $: fetch = fetchData({
-    API,
-    datasource,
-    options: {
-      paginate: false,
-      limit: 1,
-    },
-  });
-
-  $: primaryDisplay = $fetch?.definition?.primaryDisplay || "_id";
-
-  $: tableOptions = {
-    idColumn: "_id",
-    superColumnsPos: "first",
-    columnSizing: "flexible",
-    columnMaxWidth: "auto",
-    debounce: 500,
-    visibleRowCount: 7,
-    rowSelectMode: multi ? "multi" : "single",
-    selectionColumn: false,
-    dividers: "horizontal",
-    dividersColor: null,
-    baseFontSize: 12,
-    rowHeight: 32,
-    showFooter: false,
-    showHeader: true,
-    canFilter: true,
-    canSort: true,
-    canEdit: false,
-    canDelete: false,
-    canInsert: false,
-    canResize: false,
-    datasource,
-    filter: {},
-    sortColumn: null,
-    sortOrder: null,
-    limit: 10,
-    paginate: false,
-    autoRefresh: false,
-    autoRefreshRate: 10,
-    columnList: pickerColumns,
-    size: "S",
-    cellPadding: "0.5rem",
-    useOptionColors: true,
-    optionsViewMode: "text",
-    relViewMode: "text",
-    onRowSelect: (arr) => {
-      var val = arr.selectedRows.map((x) => {
-        return { _id: x["_id"], primaryDisplay: x[primaryDisplay] };
-      });
-      dispatch("change", val);
-    },
-  };
-
-  //  <SuperTable on:change {...tableOptions}></SuperTable>
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div bind:this={picker} class="control"></div>
-
-<style>
-  .control {
-    flex: auto;
-    flex-direction: column;
-    display: flex;
-    align-items: stretch;
-    justify-content: stretch;
-    overflow-x: hidden;
-    padding: 0.25rem;
-  }
-</style>