new collection refactor

packages/web/src/forms/FormArgument.svelte

@@ -4,6 +4,7 @@
   import FormCheckboxField from './FormCheckboxField.svelte';
   import FormSelectField from './FormSelectField.svelte';
   import FormTextField from './FormTextField.svelte';
+  import FormStringList from './FormStringList.svelte';
 
   export let arg;
   export let namePrefix;
@@ -12,9 +13,29 @@
 </script>
 
 {#if arg.type == 'text'}
-  <FormTextField label={arg.label} {name} defaultValue={arg.default} focused={arg.focused} />
+  <FormTextField
+    label={arg.label}
+    {name}
+    defaultValue={arg.default}
+    focused={arg.focused}
+    placeholder={arg.placeholder}
+  />
+{:else if arg.type == 'stringlist'}
+  <FormStringList
+    label={arg.label}
+    addButtonLabel={arg.addButtonLabel}
+    {name}
+    placeholder={arg.placeholder}
+  />
 {:else if arg.type == 'number'}
-  <FormTextField label={arg.label} type="number" {name} defaultValue={arg.default} focused={arg.focused} />
+  <FormTextField
+    label={arg.label}
+    type="number"
+    {name}
+    defaultValue={arg.default}
+    focused={arg.focused}
+    placeholder={arg.placeholder}
+  />
 {:else if arg.type == 'checkbox'}
   <FormCheckboxField label={arg.label} {name} defaultValue={arg.default} />
 {:else if arg.type == 'select'}

packages/web/src/forms/FormStringList.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import { getFormContext } from './FormProviderCore.svelte';
+  import TextField from './TextField.svelte';
+  import InlineButton from '../buttons/InlineButton.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+
+  export let name;
+  export let label;
+  export let addButtonLabel;
+  export let placeholder;
+  export let templateProps;
+
+  const { template, values, setFieldValue } = getFormContext();
+
+  $: stringList = $values[name] ?? [];
+</script>
+
+<svelte:component this={template} type="text" {label} {...templateProps}>
+  {#each stringList as value, index}
+    <div class='input-line-flex'>
+      <TextField
+        {value}
+        {placeholder}
+        on:input={e => {
+          const newValues = stringList.map((v, i) => (i === index ? e.target['value'] : v));
+          setFieldValue(name, newValues);
+        }}
+      />
+
+      <InlineButton
+        on:click={() => {
+          setFieldValue(name, [...stringList.slice(0, index), ...stringList.slice(index + 1)]);
+        }}
+      >
+        <FontIcon icon="icon delete" />
+      </InlineButton>
+    </div>
+  {/each}
+
+  <FormStyledButton
+    value={addButtonLabel}
+    on:click={() => {
+      setFieldValue(name, [...stringList, '']);
+    }}
+  />
+</svelte:component>
+
+<style>
+    .input-line-flex {
+        display: flex;
+    }
+</style>