mirror/php-typemill
1
0
Fork 0
mirror of https://github.com/typemill/typemill.git synced 2025-01-17 13:28:19 +01:00
Code Issues Releases Wiki Activity

Version 1.4.1: Customfields disabled button and added transitions

Browse Source
This commit is contained in:
trendschau 2020-11-05 10:10:33 +01:00
parent 8487c77627
commit 361c5a23fc
1 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
system/author/js/vue-meta.js
View File

@ -380,26 +380,29 @@ Vue.component('component-customfields', {
return {
fielderrors: false,
fielddetails: {},
disableaddbutton: false,
}
},
template: '<div class="large">' +
'<label class="mb2">{{ label|translate }}</label>' +
'<div class="fielddescription mb2 f7">{{ description|translate }}</div>' +
'<div v-if="errors[name]" class="error mb2 f7">{{ errors[name] }}</div>' +
'<div v-if="fielderrors" class="error mb2 f7">{{ fielderrors }}</div>' +
'<div class="customrow flex items-start mb3" v-for="(pairobject, pairindex) in value">' +
'<input type="text" placeholder="key" class="customkey" :class="pairobject.keyerror" :value="pairobject.key" @input="updatePairKey(pairindex,$event)">' +
'<div class="mt3"><svg class="icon icon-dots-two-vertical"><use xlink:href="#icon-dots-two-vertical"></use></svg></div>' +
'<textarea placeholder="value" class="customvalue pa3" :class="pairobject.valueerror" v-html="pairobject.value" @input="updatePairValue(pairindex,$event)"></textarea>' +
'<button class="bg-tm-red white bn ml2 h1 w2 br1" @click.prevent="deleteField(pairindex)"><svg class="icon icon-minus"><use xlink:href="#icon-minus"></use></svg></button>' +
'</div>' +
'<button class="bg-tm-green white bn br1 pa2 f6" @click.prevent="addField()"><svg class="icon icon-plus f7"><use xlink:href="#icon-plus"></use></svg> Add Fields</button>' +
'<transition name="fade"><div v-if="fielderrors" class="error mb2 f7">{{ fielderrors }}</div></transition>' +
'<transition-group name="fade" tag="div">' +
'<div class="customrow flex items-start mb3" v-for="(pairobject, pairindex) in value" :key="pairindex">' +
'<input type="text" placeholder="key" class="customkey" :class="pairobject.keyerror" :value="pairobject.key" @input="updatePairKey(pairindex,$event)">' +
'<div class="mt3"><svg class="icon icon-dots-two-vertical"><use xlink:href="#icon-dots-two-vertical"></use></svg></div>' +
'<textarea placeholder="value" class="customvalue pa3" :class="pairobject.valueerror" v-html="pairobject.value" @input="updatePairValue(pairindex,$event)"></textarea>' +
'<button class="bg-tm-red white bn ml2 h1 w2 br1" @click.prevent="deleteField(pairindex)"><svg class="icon icon-minus"><use xlink:href="#icon-minus"></use></svg></button>' +
'</div>' +
'</transition-group>' +
'<button :disabled="disableaddbutton" class="bg-tm-green white bn br1 pa2 f6" @click.prevent="addField()"><svg class="icon icon-plus f7"><use xlink:href="#icon-plus"></use></svg> Add Fields</button>' +
'</div>',
mounted: function(){
if(this.value === null)
{
this.value = [{}];
this.disableaddbutton = 'disabled';
}
},
methods: {
@ -419,16 +422,19 @@ Vue.component('component-customfields', {
{
this.value[index].keyerror = 'red';
this.fielderrors = 'Error: The key already exists';
this.disableaddbutton = 'disabled';
return;
}
else if(!regex.test(event.target.value))
{
this.value[index].keyerror = 'red';
this.fielderrors = 'Error: Only alphanumeric for keys allowed';
this.disableaddbutton = 'disabled';
return;
}
delete this.value[index].keyerror;
this.disableaddbutton = false;
this.update(this.value,this.name);
},
keyIsUnique: function(keystring, index)
@ -467,12 +473,13 @@ Vue.component('component-customfields', {
return;
}
}
this.value.push({});
this.disableaddbutton = 'disabled';
},
deleteField: function(index)
{
this.value.splice(index,1);
this.disableaddbutton = false;
this.update(this.value,this.name);
},
},