Add URL metadata type

js/config.js

@@ -272,7 +272,8 @@ export const METADATA_TYPES = {
   date: 'icon-date',
   location: 'icon-globe',
   reference: 'icon-bookmark',
-  numeric: 'icon-number'
+  numeric: 'icon-number',
+  url: 'icon-link'
 }
 
 export const NOTIFICATION_TYPES = {

vue/Element/Metadata/Metadata.vue

@@ -280,6 +280,13 @@ export default {
         this.formErrors.value = 'Value may not be empty'
       }
       if (this.selectedMetadata.type === 'date' && !this.validDate) this.formErrors.value = 'This date is invalid'
+      if (this.selectedMetadata.type === 'url') {
+        try {
+          if (!['http:', 'https:'].includes(new URL(this.selectedMetadata.value).protocol)) this.formErrors.value = 'Only HTTP and HTTPS URLs are allowed'
+        } catch (err) {
+          this.formErrors.value = err.message
+        }
+      }
       return isEmpty(this.formErrors)
     },
     async updateMetadata () {

vue/Element/Metadata/MetadataPanel.vue

@@ -15,7 +15,12 @@
             :raw-date="data.value"
           />
         </strong>
-        <strong v-else>{{ data.value }}</strong>
+        <strong v-else>
+          <a :href="data.value" target="_blank" v-if="data.type === 'url'">
+            {{ data.value }}
+          </a>
+          <template v-else>{{ data.value }}</template>
+        </strong>
       </span>
       <MetadataActions
         class="is-actions is-hidden"