better color chooser

packages/web/src/forms/ColorSelector.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import { presetPrimaryColors } from '@ant-design/colors';
+  import { presetPalettes, presetDarkPalettes } from '@ant-design/colors';
+  import { currentThemeDefinition } from '../stores';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  export let value;
+
+  function colorValue(color, colorIndex, themeDef) {
+    const palettes = themeDef?.themeType == 'dark' ? presetDarkPalettes : presetPalettes;
+    return palettes[color][colorIndex];
+  }
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<div class="container">
+  <div
+    class="item"
+    class:selected={!value}
+    on:click={() => {
+      dispatch('change', null);
+    }}
+  >
+    <FontIcon icon={value ? 'icon palette' : 'icon no-color'} />
+  </div>
+  {#each _.keys(presetPrimaryColors) as color}
+    <div
+      style={`background:${colorValue(color, 3, $currentThemeDefinition)}`}
+      class="item"
+      class:selected={color == value}
+      on:click={() => {
+        dispatch('change', color);
+      }}
+    >
+      <FontIcon icon={color == value ? 'icon check' : 'icon invisible-box'} />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    align-content: stretch;
+    height: 38px;
+  }
+
+  .item {
+    flex-grow: 1;
+    margin: 3px;
+    border: 1px solid var(--theme-border);
+    border-radius: 4px;
+    font-size: 12pt;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  .item:hover {
+    border: 1px solid var(--theme-font-2);
+  }
+
+  .item.selected {
+    border: 2px solid var(--theme-font-1);
+    margin: 2px;
+  }
+</style>

packages/web/src/forms/FormColorField.svelte

@@ -1,17 +1,40 @@
 <script lang="ts">
   import _ from 'lodash';
 
-  import FormSelectField from '../forms/FormSelectField.svelte';
+  import FormSelectField from './FormSelectField.svelte';
+  import ColorSelector from './ColorSelector.svelte';
   import { presetPrimaryColors } from '@ant-design/colors';
+  import { getFormContext } from './FormProviderCore.svelte';
 
   export let emptyLabel;
+  export let useSelector = false;
+  export let templateProps = {};
+
+  export let label;
+  export let name;
+
+  const { template } = getFormContext();
+  const { values, setFieldValue } = getFormContext();
 </script>
 
-<FormSelectField
-  isNative
-  {...$$restProps}
-  options={[
-    { value: '', label: emptyLabel },
-    ..._.keys(presetPrimaryColors).map(color => ({ value: color, label: _.startCase(color) })),
-  ]}
-/>
+{#if useSelector}
+  <svelte:component this={template} type="text" {label} {...templateProps}>
+    <ColorSelector
+      value={$values && $values[name]}
+      on:change={e => {
+        setFieldValue(name, e.detail);
+      }}
+    />
+  </svelte:component>
+{:else}
+  <FormSelectField
+    isNative
+    {...$$restProps}
+    {label}
+    {name}
+    options={[
+      { value: '', label: emptyLabel },
+      ..._.keys(presetPrimaryColors).map(color => ({ value: color, label: _.startCase(color) })),
+    ]}
+  />
+{/if}