Merge pull request #5 from poirazis/develop

v 2.0.2-alpha
poirazis · Nov 16, 2023 · a5d0708 · a5d0708
2 parents 7613ab6 + fa6948e
commit a5d0708
Show file tree

Hide file tree

Showing 12 changed files with 161 additions and 171 deletions.
diff --git a/lib/SuperTableCell/SuperCell.svelte b/lib/SuperTableCell/SuperCell.svelte
@@ -14,8 +14,7 @@
    * @property {boolean} hovered - To enter hovered state
    */
 
-  import { getContext } from "svelte";
-  const { processStringSync } = getContext("sdk");
+  import { getContext , createEventDispatcher } from "svelte";
   import fsm from "svelte-fsm"
 
   import CellString from "./cells/CellString.svelte";
@@ -27,51 +26,43 @@
   import CellNumber from "./cells/CellNumber.svelte";
   import CellJson from "./cells/CellJSON.svelte";
 
+  const { processStringSync } = getContext("sdk");
+  const dispatch = createEventDispatcher();
+
   export let value 
   export let valueTemplate
   export let fieldSchema
   export let editable
   export let initialState = "View"
-  export let lockState
+  export let lockState = false
   export let unstyled
   export let isHovered
+  export let placeholder
 
   /** @type {cellOptions} */
   export let cellOptions
 
-  let innerCellState
-
-  export const isActive = ( ) => { return (!innerCellState || $innerCellState == "Closed" ) }
-
   export let cellState = fsm( initialState , {
     "*": {
       goTo( state ) { return state }
     },
     View: { 
-      focus () { return "Focused" }, },
+      focus () { 
+        return editable ? "Editing" : "Focused" 
+      }
+    },
     Hovered: { cancel: () => { return "View" }},
     Focused: { 
-      _enter() { if (editable) this.enterEditing.debounce(50) },
-      unfocus() { return "View" },
-      lostFocus() { this.unfocus.debounce(50) },
-      enterEditing: "Editing",
+      unfocus() { return lockState ? initialState : "View" },
     },
     Error: { check : "View" },
     Editing: { 
-      openEditor() { return "EditingWithEditor" },
-      focus() {},
-      unfocus( fn ) { 
-        if (innerCellState == undefined || $innerCellState == "Closed" ) {
-          fn?.();
-        } 
-        if (!lockState) return "View";
-      },
-      lostFocus( fn ) { this.unfocus.debounce(50, fn) },
+      unfocus() { return lockState ? initialState : "View" },
+      lostFocus() { 
+        dispatch("blur", {} );
+        return lockState ? initialState : "View" },
       submit() { if ( value != originalValue ) acceptChange() ; return "View" }, 
       cancel() { value = Array.isArray(originalValue) ? [ ... originalValue ] : originalValue ; return "View" },
-    },
-    EditingWithEditor: { 
-      closeEditor() { return "Editing" }
     }
   })
 
@@ -88,15 +79,16 @@
     {cellOptions}
     {cellState}
     {fieldSchema}
+    {placeholder}
     {value}
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
+    on:focus
     on:blur
   />
 {:else if fieldSchema.type === "array" || fieldSchema.type === "options"  }
   <CellOptions
-    bind:editorState={innerCellState}
     {cellState}
     {cellOptions}
     {value}
@@ -105,85 +97,72 @@
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
-    on:blur
   />
 {:else if fieldSchema.type === "number" || fieldSchema.type == "bigint" }
   <CellNumber
-    bind:editorState={innerCellState}
     {cellState}
     {cellOptions}
     {value}
     {fieldSchema}
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
-    on:blur
   />
 {:else if fieldSchema.type === "datetime"}
   <CellDatetime
-    bind:editorState={innerCellState}
     {cellState}
     {cellOptions}
     {value}
     {fieldSchema}
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
-    on:blur
   />
 {:else if fieldSchema.type === "link"  }
   <CellLink
-    bind:editorState={innerCellState}
     {cellState}
     {cellOptions}
     {value}
     {fieldSchema}
     {unstyled}
     {isHovered}
     on:change
-    on:blur
   />
 {:else if fieldSchema.type === "attachment"  }
   <CellAttachment
-    bind:editorState={innerCellState}
     {cellOptions}
     {cellState}
     {value}
     {fieldSchema}
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
-    on:blur
   />
 {:else if fieldSchema.type === "boolean"  }
   <CellBoolean
-    bind:editorState={innerCellState}
     {cellOptions}
     {cellState}
     {value}
     {fieldSchema}
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
-    on:blur
   />
 {:else if fieldSchema.type === "json"  }
   <CellJson
-    bind:editorState={innerCellState}
     {cellOptions}
     {cellState}
     {value}
     {fieldSchema}
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
-    on:blur
   />
 {/if}
 
 <style>
   :global(.superCell) {
-    flex: auto;
+    width: 80px;
     display: flex;
     cursor: pointer;
     min-width: 0;
@@ -212,7 +191,7 @@
   }
   :global(.overflow) {
     position: absolute;
-    right: 0;
+    right: var(--super-table-cell-padding);
     top: 20%;
     height: 60%;
     display: flex;

diff --git a/lib/SuperTableCell/SuperTableCell.svelte b/lib/SuperTableCell/SuperTableCell.svelte
@@ -1,7 +1,5 @@
 <script>
-  import { getContext , beforeUpdate, createEventDispatcher } from "svelte";
-
-  import { clickOutsideAction } from "svelte-legos";
+  import { getContext , createEventDispatcher, onMount } from "svelte";
   import SuperCell from "./SuperCell.svelte";
 
   const tableDataChangesStore = getContext("tableDataChangesStore");
@@ -19,22 +17,15 @@
   let originalValue = Array.isArray(value) ? [ ... value ] : value
 
   let cellState
-  let width
-
-  const getCellColor = (value, template) => {
-    if (!template) {
-      return null
-    }
-    return processStringSync(template,  { Value: value }  )
-  }
+  let wrapperAnchor
 
   /** @type {import('./SuperCell.Svelte').cellOptions} */
   $: cellOptions = {
     align: columnOptions.align,
     color: columnOptions.color,
     background: columnOptions.background ?? "transparent",
     fontWeight: columnOptions.fontWeight,
-    padding: columnOptions.padding
+    padding: columnOptions.padding,
   }
 
   function acceptChange ( ) { 
@@ -65,15 +56,11 @@
       e.preventDefault();
       cellState.unfocus();
     }
-  }
 
-  let wrapperAnchor
-  let focusedOrHasFocused
-
-  // We need to know if our child Super Cell has the focus
-  beforeUpdate( () => {
-    focusedOrHasFocused = wrapperAnchor?.matches(":focus-within") ?? false
-  })
+    if (e.key == "Enter") {
+      cellState.lostFocus();
+    } 
+  }
 
 </script>
 
@@ -82,18 +69,11 @@
 <div 
   bind:this={wrapperAnchor}
   class="superTableCellWrapper"
-  style:--lock-width={width}
-  class:inEdit={$cellState == "Editing" }
-  class:focused={focusedOrHasFocused}
+  class:inEdit={ $cellState == "Editing" }
   tabindex="0"
-  use:clickOutsideAction
   on:keydown={handleKeyboard}
-  on:clickoutside={() => { 
-    if ( cellState && $cellState != "View") {
-      cellState.lostFocus()
-  }}}
-  on:click={() => { width = wrapperAnchor.clietWidth ; cellState.focus() }}
-  on:focus={() => cellState.focus() }
+  on:click={ () => { cellState.focus() } }
+  on:focus={ () => { cellState.focus() } }
 >
   <SuperCell
     bind:cellState 
@@ -103,27 +83,30 @@
     {fieldSchema}
     {editable}
     {isHovered}
+    lockState={false}
     unstyled
     on:change={handleChange}
+    on:keydown
   />
 </div>
 
 <style>
 .superTableCellWrapper {
-  flex: auto;
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: stretch;
   justify-content: stretch;
   overflow: hidden;
   border: 1px solid transparent;
-  min-width: 0;
+  transition: all 30ms ease-out;
 }
 
+.superTableCellWrapper:focus {
+  outline: none;
+}
 .superTableCellWrapper.inEdit {
-  width: var(--lock-width);
-  max-width: var(--lock-width);
-  color: var(--spectrum-global-color-gray-900);
-  border-color: var(--spectrum-global-color-gray-600);
+  border-color: var(--spectrum-global-color-blue-600);
 }
 .superTableCellWrapper.inEdit::before {
   content: "";
@@ -135,10 +118,5 @@
   filter: brightness(80%);
   background-color: var(--spectrum-textfield-m-background-color, var(--spectrum-global-color-gray-50));
 }
-.superTableCellWrapper.inEdit.focused {
-    border-color: var(--spectrum-global-color-gray-500);
-  }
-.superTableCellWrapper.inEdit:focus-within {
-    border-color: var(--spectrum-global-color-blue-500);
-  }
+
 </style>
diff --git a/lib/SuperTableCell/cells/CellBoolean.svelte b/lib/SuperTableCell/cells/CellBoolean.svelte
@@ -1,6 +1,5 @@
 <script>
   import { createEventDispatcher } from 'svelte'
-  import Switch from "../../../node_modules/@budibase/bbui/src/Form/Core/Switch.svelte"
   import Icon from "../../../node_modules/@budibase/bbui/src/Icon/Icon.svelte"
 
   export let value
@@ -20,28 +19,43 @@
     }
   }
 
+  let anchor
+
+  $: inEdit = $cellState == "Editing"
+  $: if ( inEdit && anchor ) anchor?.focus() 
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div 
   class="superCell" 
   class:inEdit={ $cellState == "Editing" }
   class:unstyled
-  tabindex="-1"
+  tabindex="0"
   style:padding-left={cellOptions?.padding}
   style:padding-right={cellOptions?.padding}
   on:keydown={handleKeyboard}
   >
-    {#if $cellState == "Editing" }
+    {#if inEdit }
       <div class="inline-value" > 
-        <Switch {value} on:change={(e) => dispatch("change", { value: e.detail } )}/>
+        <div class="spectrum-Switch spectrum-Switch--emphasized">
+          <input
+            bind:this={anchor}
+            checked={value}
+            on:change={(e) => dispatch("change", { value: e.detail } )}
+            type="checkbox"
+            class="spectrum-Switch-input"
+            on:blur={cellState.lostFocus}
+          />
+          <span class="spectrum-Switch-switch" />
+        </div>
       </div>
     {:else}
-    <div class="inline-value" > 
-      {#if value}
-        <Icon size="XS" name="Checkmark" color={"lime"}/>
-      {/if}
-    </div>
+      <div class="inline-value" > 
+        {#if value}
+          <Icon size="S" name="Checkmark" color={"lime"}/>
+        {/if}
+      </div>
     {/if}
 </div>