Add preview for structure field

Author: sylvainjule

index.css

@@ -0,0 +1,23 @@
+$color-light: #efefef;
+$color-background: $color-light;
+$color-border: #ccc;
+$box-shadow-card: rgba($color-dark, 0.05) 0 2px 5px;
+
+.k-locator-field-preview {
+    padding: 0 .75rem;
+    .locator-preview,  {
+        display: flex;
+        figcaption {
+            box-shadow: $box-shadow-card;
+            background: $color-background;
+            line-height: 1.5em;
+            padding: 0 .5rem;
+            border: 1px solid $color-border;
+            border-left: 0;
+            border-radius: 1px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}

index.js

@@ -4,12 +4,12 @@
 @import
     'vendors/_leaflet.scss';
 @import
+    'components/_preview.scss',
     'components/_map.scss';
 
 
 .k-locator-field {
 
-
     .k-field-header {
         .k-button + .k-button {
             margin-left: 1.5rem;

src/assets/css/components/_preview.scss

@@ -0,0 +1,49 @@
+<template>
+	<div class="k-locator-field-preview">
+	<figure class="locator-preview">
+        <k-icon type="locatorMarker" back="pattern" class="k-pages-field-preview-image" />
+        <figcaption v-html="location"></figcaption>
+    </figure>
+	</div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: [Object, String],
+    },
+    computed: {
+    	locationString() {
+    		let number   = this.value.number   ? this.value.number    + ' '  : ''
+    		let address  = this.value.address  ? this.value.address   + ', ' : ''
+    		let postcode = this.value.postcode ? this.value.postcode  + ' '  : ''
+    		let city     = this.value.city     ? this.value.city      + ', ' : ''
+    		let country  = this.value.country  ? this.value.country          : ''
+
+    		return number + address + postcode + city + country
+    	},
+    	latLonString() {
+    		if(this.value.lat && this.value.lon) {
+    			let lat = typeof this.value.lat === 'string' ? parseFloat(this.value.lat) : this.value.lat
+    				lat = lat.toFixed(5)
+    			let lon = typeof this.value.lon === 'string' ? parseFloat(this.value.lon) : this.value.lon
+    				lon = lon.toFixed(5)
+
+    			return lat + ', ' + lon
+    		}
+    		else {
+    			return false
+    		}
+    	},
+    	location() {
+    		if(this.locationString != '') return this.locationString
+    		else if(this.latLonString) {
+    			return '<span class="locator-latlon-preview">'+ this.latLonString +'</span>'
+    		}
+    		else {
+    			return '…'
+    		}
+    	}
+    }
+};
+</script>

src/assets/css/styles.scss

@@ -1,8 +1,16 @@
-import Locator from './field/Locator.vue'
+import Locator        from './field/Locator.vue'
+import LocatorPreview from './components/LocatorPreview.vue'
+
 import './assets/svg/icons.js'
 
 panel.plugin('sylvainjule/locator', {
     fields: {
         locator: Locator,
     },
-});
+    components: {
+        'k-locator-field-preview': LocatorPreview,
+    },
+    icons: {
+        locatorMarker: '<g><circle cx="8" cy="6.99" r="2"/><path d="M7.3,15.68c-.1-.1-4.19-3.7-4.19-3.8A6.34,6.34,0,0,1,1,7,7,7,0,0,1,7.9,0H8a7,7,0,0,1,7,6.9V7a6.72,6.72,0,0,1-2.1,5l-4.2,3.8A1.07,1.07,0,0,1,7.3,15.68Zm-2.7-5,3.4,3,3.39-3h0A5,5,0,0,0,13,7.09a5,5,0,0,0-4.89-5H8A4.88,4.88,0,0,0,3,7a5.22,5.22,0,0,0,1.6,3.69Z"/></g>'
+    }
+});