added min select relation field option

ui/src/components/base/Field.svelte

@@ -18,17 +18,17 @@
         fieldErrors = CommonHelper.toArray(CommonHelper.getNestedVal($errors, name));
     }
 
-    function handleChange() {
+    export function changed() {
         removeError(name);
     }
 
     onMount(() => {
-        container.addEventListener("input", handleChange);
-        container.addEventListener("change", handleChange);
+        container.addEventListener("input", changed);
+        container.addEventListener("change", changed);
 
         return () => {
-            container.removeEventListener("input", handleChange);
-            container.removeEventListener("change", handleChange);
+            container.removeEventListener("input", changed);
+            container.removeEventListener("change", changed);
         };
     });
 </script>

ui/src/components/collections/schema/RelationOptions.svelte

@@ -10,6 +10,11 @@
     export let key = "";
     export let options = {};
 
+    const isSingleOptions = [
+        { label: "Single", value: true },
+        { label: "Multiple", value: false },
+    ];
+
     const defaultOptions = [
         { label: "False", value: false },
         { label: "True", value: true },
@@ -22,6 +27,8 @@
     let upsertPanel = null;
     let displayFieldsList = [];
     let oldCollectionId = null;
+    let isSingle = options?.maxSelect == 1;
+    let oldIsSingle = isSingle;
 
     // load defaults
     $: if (CommonHelper.isEmpty(options)) {
@@ -31,6 +38,18 @@
             cascadeDelete: false,
             displayFields: [],
         };
+        isSingle = true;
+        oldIsSingle = isSingle;
+    }
+
+    $: if (oldIsSingle != isSingle) {
+        oldIsSingle = isSingle;
+        if (isSingle) {
+            options.minSelect = null;
+            options.maxSelect = 1;
+        } else {
+            options.maxSelect = null;
+        }
     }
 
     $: selectedColection = $collections.find((c) => c.id == options.collectionId) || null;
@@ -66,10 +85,11 @@
 </script>
 
 <div class="grid">
-    <div class="col-sm-9">
+    <div class="col-sm-6">
         <Field class="form-field required" name="schema.{key}.options.collectionId" let:uniqueId>
             <label for={uniqueId}>Collection</label>
             <ObjectSelect
+                id={uniqueId}
                 searchable={$collections.length > 5}
                 selectPlaceholder={"Select collection"}
                 noOptionsText="No collections found"
@@ -91,22 +111,53 @@
             </ObjectSelect>
         </Field>
     </div>
-    <div class="col-sm-3">
-        <Field class="form-field" name="schema.{key}.options.maxSelect" let:uniqueId>
-            <label for={uniqueId}>
-                <span class="txt">Max select</span>
-                <i
-                    class="ri-information-line link-hint"
-                    use:tooltip={{
-                        text: "Leave empty for no limit.",
-                        position: "top",
-                    }}
-                />
-            </label>
-            <input type="number" id={uniqueId} step="1" min="1" bind:value={options.maxSelect} />
+    <div class="col-sm-6">
+        <Field class="form-field" let:uniqueId>
+            <label for={uniqueId}>Relation type</label>
+            <ObjectSelect id={uniqueId} items={isSingleOptions} bind:keyOfSelected={isSingle} />
         </Field>
     </div>
-    <div class="col-sm-9">
+
+    {#if !isSingle}
+        <div class="col-sm-6">
+            <Field class="form-field" name="schema.{key}.options.minSelect" let:uniqueId>
+                <label for={uniqueId}>
+                    <span class="txt">Min select</span>
+                    <i
+                        class="ri-information-line link-hint"
+                        use:tooltip={{
+                            text: "Leave empty for no limit.",
+                            position: "top",
+                        }}
+                    />
+                </label>
+                <input type="number" id={uniqueId} step="1" min="1" bind:value={options.minSelect} />
+            </Field>
+        </div>
+        <div class="col-sm-6">
+            <Field class="form-field" name="schema.{key}.options.maxSelect" let:uniqueId>
+                <label for={uniqueId}>
+                    <span class="txt">Max select</span>
+                    <i
+                        class="ri-information-line link-hint"
+                        use:tooltip={{
+                            text: "Leave empty for no limit.",
+                            position: "top",
+                        }}
+                    />
+                </label>
+                <input
+                    type="number"
+                    id={uniqueId}
+                    step="1"
+                    min={options.minSelect || 2}
+                    bind:value={options.maxSelect}
+                />
+            </Field>
+        </div>
+    {/if}
+
+    <div class="col-sm-6">
         <Field class="form-field" name="schema.{key}.options.displayFields" let:uniqueId>
             <label for={uniqueId}>
                 <span class="txt">Display fields</span>
@@ -128,9 +179,9 @@
             />
         </Field>
     </div>
-    <div class="col-sm-3">
+    <div class="col-sm-6">
         <Field class="form-field" name="schema.{key}.options.cascadeDelete" let:uniqueId>
-            <label for={uniqueId}>Cascade delete</label>
+            <label for={uniqueId}>Delete main record on relation delete</label>
             <ObjectSelect id={uniqueId} items={defaultOptions} bind:keyOfSelected={options.cascadeDelete} />
         </Field>
     </div>

ui/src/components/records/fields/RelationField.svelte

@@ -13,11 +13,16 @@
     export let picker;
     export let field = new SchemaField();
 
+    let fieldRef;
     let list = [];
     let isLoading = false;
 
     $: isMultiple = field.options?.maxSelect != 1;
 
+    $: if (typeof value != "undefined") {
+        fieldRef?.changed();
+    }
+
     load();
 
     async function load() {
@@ -82,7 +87,12 @@
     }
 </script>
 
-<Field class="form-field form-field-list {field.required ? 'required' : ''}" name={field.name} let:uniqueId>
+<Field
+    bind:this={fieldRef}
+    class="form-field form-field-list {field.required ? 'required' : ''}"
+    name={field.name}
+    let:uniqueId
+>
     <label for={uniqueId}>
         <i class={CommonHelper.getFieldTypeIcon(field.type)} />
         <span class="txt">{field.name}</span>