Form overhaul: Reference Form

app/imports/api/library/methods/updateReferenceNode.js

@@ -37,7 +37,7 @@ function writeCache(_id, cache){
 
 function updateReferenceNodeWork(node, userId) {
   let cache = {}
-  if (!node.ref){
+  if (!node.ref?.collection || !node.ref?.id) {
     writeCache(node._id, cache);
     return;
   }

app/imports/client/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue

@@ -59,7 +59,7 @@
     >
       <v-tab-item :disabled="!!forcedType">
         <property-selector
-          no-library-only-props
+          :no-library-only-props="!showLibraryOnlyProps"
           :parent-type="parentDoc && parentDoc.type"
           @select="e => type = e"
         />
@@ -228,6 +228,7 @@ export default {
       default: undefined,
     },
     hideLibraryTab: Boolean,
+    showLibraryOnlyProps: Boolean,
   },
   reactiveProvide: {
     name: 'context',

app/imports/client/ui/dialogStack/DialogStack.vue

@@ -88,7 +88,7 @@
 
         // If the top dialog can't be closed with the backdrop, shake shake
         const topDialog = this.dialogs[this.dialogs.length - 1];
-        if (topDialog.data.noBackdropClose) {
+        if (topDialog?.data?.noBackdropClose) {
           this.shakeTopDialog();
           return;
         }

app/imports/client/ui/library/LibraryNodeDialog.vue

@@ -307,6 +307,7 @@ export default {
           hideLibraryTab: true,
           suggestedType,
           noBackdropClose: true,
+          showLibraryOnlyProps: true,
         },
         callback(result){
           if (!result) return;

app/imports/client/ui/properties/forms/ReferenceForm.vue

@@ -1,34 +1,65 @@
 <template lang="html">
-  <div class="folder-form layout justify-start wrap">
-    <property-field
+  <div class="reference-form">
+    <v-row dense>
+      <v-col cols="12">
+        <outlined-input
+          v-ripple
           name="Linked Property"
+          class="pa-4 mb-6"
           data-id="change-ref"
           style="cursor: pointer;"
           @click="changeReference"
         > 
-      <v-input
-        :label="model.cache && model.cache.node ? '' : 'Linked Property'"
-        style="overflow: hidden;"
-        readonly
-        outlined
-        persistent-hint
-        :loading="linkLoading"
-        :value="
-          model.cache.node && model.cache.node.name ||
-            model.ref && model.ref.id
-        "
-        :hint="model.cache.library && model.cache.library.name"
-        :error-messages="model.cache.error || errors.ref"
-        prepend-icon="mdi-vector-link"
-        append-icon="mdi-refresh"
-        @click:append.stop="updateReferenceNode"
+          <v-progress-circular
+            v-if="linkLoading"
+            indeterminate
+          />
+          <div
+            v-else
+            class="d-flex align-center"
           >
+            <v-icon class="mr-4">
+              mdi-vector-link
+            </v-icon>
+            <div class="flex-grow-1">
               <tree-node-view
                 v-if="model && model.cache && model.cache.node"
                 :model="model.cache.node"
               />
-      </v-input>
-    </property-field>
+              <div v-else>
+                {{ model.cache.node && model.cache.node.name || model.ref && model.ref.id }}
+              </div>
+              <div
+                v-if="model.cache.library && model.cache.library.name"
+                class="text-caption"
+              >
+                {{ model.cache.library && model.cache.library.name }}
+              </div>
+              <div
+                v-if="model.cache.error || errors.ref"
+                class="error--text"
+              >
+                {{ model.cache.error || errors.ref }}
+              </div>
+            </div>
+            <v-btn
+              class="ml-4"
+              icon
+              @click.stop="updateReferenceNode"
+            >
+              <v-icon>
+                mdi-refresh
+              </v-icon>
+            </v-btn>
+          </div>
+        </outlined-input>
+      </v-col>
+    </v-row>
+    <form-sections
+      v-if="$slots.default"
+    >
+      <slot />
+    </form-sections>
   </div>
 </template>
 
@@ -36,12 +67,12 @@
   import TreeNodeView from '/imports/client/ui/properties/treeNodeViews/TreeNodeView.vue';
   import propertyFormMixin from '/imports/client/ui/properties/forms/shared/propertyFormMixin.js';
   import updateReferenceNode from '/imports/api/library/methods/updateReferenceNode.js';
-  import PropertyField from '/imports/client/ui/properties/viewers/shared/PropertyField.vue';
+  import OutlinedInput from '/imports/client/ui/properties/viewers/shared/OutlinedInput.vue';
 
   export default {
     components: {
       TreeNodeView,
-      PropertyField,
+      OutlinedInput,
     },
     mixins: [propertyFormMixin],
     data(){return {