diff options
Diffstat (limited to 'src/components/Properties/PropertyText.vue')
-rw-r--r-- | src/components/Properties/PropertyText.vue | 37 |
1 files changed, 32 insertions, 5 deletions
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue index 7c9fd99e..fa5ac71a 100644 --- a/src/components/Properties/PropertyText.vue +++ b/src/components/Properties/PropertyText.vue @@ -39,10 +39,6 @@ <!-- no options, empty space --> <div v-else class="property__label">{{ propModel.readableName }}</div> - <!-- delete the prop --> - <button v-if="!isReadOnly" :title="t('contacts', 'Delete')" class="property__delete icon-delete" - @click="deleteProperty" /> - <!-- textarea for note --> <textarea v-if="propName === 'note'" id="textarea" ref="textarea" v-model.trim="localValue" :type="type" :readonly="isReadOnly" @@ -51,7 +47,16 @@ <!-- OR default to input --> <input v-else v-model.trim="localValue" :type="type" - :readonly="isReadOnly" class="property__value" @input="updateValue"> + :readonly="isReadOnly" :class="{'property__value--with-ext': haveExtHandler}" class="property__value" + @input="updateValue"> + + <!-- external link --> + <a v-if="haveExtHandler" :href="externalHandler" class="property__ext icon-external" + target="_blank" /> + + <!-- delete the prop --> + <button v-if="!isReadOnly" :title="t('contacts', 'Delete')" class="property__delete icon-delete" + @click="deleteProperty" /> </div> </div> </template> @@ -115,6 +120,28 @@ export default { return 'url' } return 'text' + }, + URLScheme() { + if (this.propName === 'tel') { + return 'tel:' + } else if (this.propName === 'email') { + return 'mailto:' + // if no scheme (roughly checking for the colon char) + } else if (this.propType === 'uri' && this.value.indexOf(':') === -1) { + return 'https://' + } else if (this.propType === 'uri') { + return '' // return empty, we already have a scheme in the value + } + return false + }, + // format external link + externalHandler() { + if (this.URLScheme !== false) { + return `${this.URLScheme}${this.value}` + } + }, + haveExtHandler() { + return this.externalHandler && this.value && this.value.length > 0 } }, |