added select readonly prop and updated the disabled schema field state

ui/src/components/base/Select.svelte

@@ -11,6 +11,7 @@
     export let items = [];
     export let multiple = false;
     export let disabled = false;
+    export let readonly = false;
     export let selected = multiple ? [] : undefined;
     export let toggle = multiple; // toggle option on click
     export let closable = true; // close the dropdown on option select/deselect
@@ -177,7 +178,7 @@
     function onLabelClick(e) {
         e.stopPropagation();
 
-        !disabled && toggler?.toggle();
+        !readonly && !disabled && toggler?.toggle();
     }
 
     onMount(() => {
@@ -195,9 +196,15 @@
     });
 </script>
 
-<div bind:this={container} class="select {classes}" class:multiple class:disabled>
+<div bind:this={container} class="select {classes}" class:multiple class:disabled class:readonly>
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-    <div bind:this={labelDiv} tabindex={disabled ? "-1" : "0"} class="selected-container" class:disabled>
+    <div
+        bind:this={labelDiv}
+        tabindex={disabled || readonly ? "-1" : "0"}
+        class="selected-container"
+        class:disabled
+        class:readonly
+    >
         {#each CommonHelper.toArray(selected) as item, i}
             <div class="option">
                 {#if labelComponent}
@@ -218,13 +225,13 @@
                 {/if}
             </div>
         {:else}
-            <div class="block txt-placeholder" class:link-hint={!disabled}>
+            <div class="block txt-placeholder" class:link-hint={!disabled && !readonly}>
                 {selectPlaceholder}
             </div>
         {/each}
     </div>
 
-    {#if !disabled}
+    {#if !disabled && !readonly}
         <Toggler
             bind:this={toggler}
             class="dropdown dropdown-block options-dropdown dropdown-left"

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

@@ -120,7 +120,8 @@
     draggable={true}
     class="schema-field"
     class:required={field.required}
-    class:expanded={showOptions}
+    class:expanded={interactive && showOptions}
+    class:deleted={field.toDelete}
     class:drag-over={isDragOver}
     transition:slide|local={{ duration: 150 }}
     on:dragstart={(e) => {

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

@@ -85,14 +85,14 @@
         <div class="separator" />
 
         <Field
-            class="form-field form-field-single-multiple-select {!interactive ? 'disabled' : ''}"
+            class="form-field form-field-single-multiple-select {!interactive ? 'readonly' : ''}"
             inlineError
             let:uniqueId
         >
             <ObjectSelect
                 id={uniqueId}
                 items={isSingleOptions}
-                disabled={!interactive}
+                readonly={!interactive}
                 bind:keyOfSelected={isSingle}
             />
         </Field>

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

@@ -116,7 +116,7 @@
                 noOptionsText="No collections found"
                 selectionKey="id"
                 items={$collections}
-                disabled={!interactive || field.id}
+                readonly={!interactive || field.id}
                 bind:keyOfSelected={field.options.collectionId}
             >
                 <svelte:fragment slot="afterOptions">
@@ -136,14 +136,14 @@
         <div class="separator" />
 
         <Field
-            class="form-field form-field-single-multiple-select {!interactive ? 'disabled' : ''}"
+            class="form-field form-field-single-multiple-select {!interactive ? 'readonly' : ''}"
             inlineError
             let:uniqueId
         >
             <ObjectSelect
                 id={uniqueId}
                 items={isSingleOptions}
-                disabled={!interactive}
+                readonly={!interactive}
                 bind:keyOfSelected={isSingle}
             />
         </Field>

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

@@ -55,7 +55,7 @@
         <div class="separator" />
 
         <Field
-            class="form-field required {!interactive ? 'disabled' : ''}"
+            class="form-field required {!interactive ? 'readonly' : ''}"
             inlineError
             name="schema.{key}.options.values"
             let:uniqueId
@@ -65,7 +65,7 @@
                     id={uniqueId}
                     placeholder="Choices: eg. optionA, optionB"
                     required
-                    disabled={!interactive}
+                    readonly={!interactive}
                     bind:value={field.options.values}
                 />
             </div>
@@ -74,14 +74,14 @@
         <div class="separator" />
 
         <Field
-            class="form-field form-field-single-multiple-select {!interactive ? 'disabled' : ''}"
+            class="form-field form-field-single-multiple-select {!interactive ? 'readonly' : ''}"
             inlineError
             let:uniqueId
         >
             <ObjectSelect
                 id={uniqueId}
                 items={isSingleOptions}
-                disabled={!interactive}
+                readonly={!interactive}
                 bind:keyOfSelected={isSingle}
             />
         </Field>

ui/src/scss/_form.scss

@@ -955,6 +955,7 @@ select {
     &:not(.disabled) .selected-container:hover {
         cursor: pointer;
     }
+    &.readonly,
     &.disabled {
         color: var(--txtHintColor);
         pointer-events: none;
@@ -978,6 +979,9 @@ select {
             }
         }
     }
+    &.disabled {
+        color: var(--txtDisabledColor);
+    }
 
     // dropdown
     .txt-missing {

ui/src/scss/_schema_field.scss

@@ -30,7 +30,7 @@
     .separator {
         width: 1px;
         height: $minHeight;
-        background: var(--baseAlt2Color);
+        background: rgba(#000, 0.06);
     }
     .drag-handle-wrapper {
         position: absolute;
@@ -81,7 +81,6 @@
             @include show();
         }
     }
-
 }
 
 .schema-field-options {
@@ -111,4 +110,17 @@
             }
         }
     }
+    &.deleted {
+        .schema-field-header {
+            background: var(--bodyColor);
+        }
+        .markers,
+        .separator {
+            opacity: 0.5;
+        }
+        %input {
+            background: none;
+            box-shadow: none;
+        }
+    }
 }