grid data types WIP

packages/web/src/formview/FormView.svelte

@@ -273,7 +273,10 @@
   export function copyToClipboard() {
     const column = getCellColumn(currentCell);
     if (!column) return;
-    const text = currentCell[1] % 2 == 1 ? extractRowCopiedValue(rowData, column.uniqueName) : column.columnName;
+    const text =
+      currentCell[1] % 2 == 1
+        ? extractRowCopiedValue(rowData, column.uniqueName, display?.driver?.dataEditorTypesBehaviour)
+        : column.columnName;
     copyTextToClipboard(text);
   }
 
@@ -631,11 +634,12 @@
             {#if rowData && $inplaceEditorState.cell && rowIndex == $inplaceEditorState.cell[0] && chunkIndex * 2 + 1 == $inplaceEditorState.cell[1]}
               <InplaceEditor
                 width={getCellWidth(rowIndex, chunkIndex * 2 + 1)}
+                driver={display?.driver}
                 inplaceEditorState={$inplaceEditorState}
                 {dispatchInsplaceEditor}
                 cellValue={rowData[col.uniqueName]}
-                options="{col.options}"
-                canSelectMultipleOptions="{col.canSelectMultipleOptions}"
+                options={col.options}
+                canSelectMultipleOptions={col.canSelectMultipleOptions}
                 onSetValue={value => {
                   grider.setCellValue(0, col.uniqueName, value);
                 }}
@@ -644,6 +648,7 @@
               <DataGridCell
                 maxWidth={(wrapperWidth * 2) / 3}
                 minWidth={200}
+                editorTypes={display?.driver?.dataEditorTypesBehaviour}
                 {rowIndex}
                 {col}
                 {rowData}
@@ -654,11 +659,14 @@
                 bind:domCell={domCells[`${rowIndex},${chunkIndex * 2 + 1}`]}
                 onSetFormView={handleSetFormView}
                 showSlot={!rowData ||
-                ($inplaceEditorState.cell &&
-                  rowIndex == $inplaceEditorState.cell[0] &&
-                  chunkIndex * 2 + 1 == $inplaceEditorState.cell[1])}
+                  ($inplaceEditorState.cell &&
+                    rowIndex == $inplaceEditorState.cell[0] &&
+                    chunkIndex * 2 + 1 == $inplaceEditorState.cell[1])}
                 isCurrentCell={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1}
                 onDictionaryLookup={() => handleLookup(col)}
+                onSetValue={value => {
+                  grider.setCellValue(0, col.uniqueName, value);
+                }}
               />
             {/if}
           </tr>

packages/web/src/formview/ShowFormDropDownButton.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { currentDropDownMenu } from '../stores';
+
+  export let icon = 'icon form';
+  export let menu;
+
+  let domButton;
+
+  function handleClick() {
+    const rect = domButton.getBoundingClientRect();
+    const left = rect.left;
+    const top = rect.bottom;
+    currentDropDownMenu.set({ left, top, items: menu });
+  }
+</script>
+
+<div
+  on:click|stopPropagation|preventDefault={handleClick}
+  bind:this={domButton}
+  on:mousedown|stopPropagation|preventDefault
+  on:mouseup|stopPropagation|preventDefault
+  class="showFormButtonMarker"
+>
+  <FontIcon {icon} />
+</div>
+
+<style>
+  div {
+    position: absolute;
+    right: 0px;
+    top: 1px;
+    color: var(--theme-font-3);
+    background-color: var(--theme-bg-1);
+    border: 1px solid var(--theme-bg-1);
+  }
+
+  div:hover {
+    color: var(--theme-font-hover);
+    border: var(--theme-border);
+    top: 1px;
+    right: 0px;
+  }
+</style>