94 lines
1.5 KiB
JavaScript
94 lines
1.5 KiB
JavaScript
Vue.component("preview-field", {
|
|
template: '#preview-single-field-template',
|
|
|
|
|
|
props: [
|
|
'label',
|
|
'value',
|
|
|
|
'dataType',
|
|
'format',
|
|
],
|
|
|
|
|
|
|
|
mounted: function()
|
|
{
|
|
this.displayFormat = (this.format ? this.format : "");
|
|
},
|
|
|
|
|
|
|
|
destroyed: function()
|
|
{
|
|
|
|
},
|
|
|
|
|
|
|
|
data: function()
|
|
{
|
|
return {
|
|
displayFormat: "", // Refine the "format" so we don't mutate the prop.
|
|
item: {}
|
|
};
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
getLabel: function()
|
|
{
|
|
return (this.label ? this.label : " ");
|
|
},
|
|
|
|
getValue: function()
|
|
{
|
|
// Return the value formatted.
|
|
|
|
if (this.displayFormat == "url")
|
|
{
|
|
return "<a href='" + this.value + "' target='_blank'>" + this.value + "</a>";
|
|
}
|
|
|
|
if (this.displayFormat == "email")
|
|
{
|
|
return "<a href='mailto:" + this.value + "' target='_blank'>" + this.value + "</a>";
|
|
}
|
|
|
|
if (this.displayFormat == "phone")
|
|
{
|
|
return "<a href='tel:" + this.value + "' target='_blank'>" + this.value + "</a>";
|
|
}
|
|
|
|
if (this.displayFormat == "multi-line")
|
|
{
|
|
return this.replaceLineBreaks(this.value);
|
|
}
|
|
|
|
if (this.displayFormat == "image")
|
|
{
|
|
return "<img src='" + this.value + "' style='max-width: 100px;'></img>";
|
|
}
|
|
|
|
return (this.value ? this.value : " ");
|
|
},
|
|
|
|
|
|
replaceLineBreaks: function(value)
|
|
{
|
|
if (!value)
|
|
{
|
|
// Null or undefined or bad input
|
|
}
|
|
|
|
var output = "";
|
|
|
|
// Replace line-breaks with "\n"
|
|
//output = value.replace(/(?:\r\n|\r|\n)/g, '\\n');
|
|
output = value.replace(/(?:\r\n|\r|\n)/g, '<br>');
|
|
|
|
return output;
|
|
}
|
|
}
|
|
}); |