generic-skin 3.7.8 → 3.7.9

package/apps/vueChrono.js

@@ -1,5 +1,5 @@
 Vue.component('modal-cronologia', {
-    props: ['dataElement', 'dataType'],
+    props: ['element', 'type'],
     data() {
         return {
             page: 0,
@@ -12,15 +12,15 @@ Vue.component('modal-cronologia', {
                 selector: true
             },
             content: {
-                edit: JSON.parse(JSON.stringify(this.dataElement)),
-                current: this.dataElement
+                edit: JSON.parse(JSON.stringify(this.element)),
+                current: this.element
             }
         }
     },
     computed: {
         modalTitle() {
-            if (this.dataType === 'new') return 'Nueva entrada';
-            else if (this.dataType === 'edit') return 'Editar entrada';
+            if (this.type === 'new') return 'Nueva entrada';
+            else if (this.type === 'edit') return 'Editar entrada';
         },
         oneCheck() {
             let final = '';
@@ -198,7 +198,7 @@ Vue.component('modal-cronologia', {
         this.info.people = list;
     },
     template: `
-    <modal-foro :data-title="modalTitle" @modal-close="modalClose()">
+    <modal-foro :title="modalTitle" @modal-close="modalClose()">
         <template v-if="page === 0">
             <template slot="content">
                 <aviso-foro v-show="oneCheck.length">
@@ -206,17 +206,17 @@ Vue.component('modal-cronologia', {
                 </aviso-foro>
                 <ul class="forum-fieldlist no-style">
                     <li>
-                        <campo-foro data-name="Título">
+                        <campo-foro name="Título">
                             <input type="text" v-model="content.edit.name" placeholder="Escribe el nombre del tema." />
                         </campo-foro>
                     </li>
                     <li>
-                        <campo-foro data-name="Enlace">
+                        <campo-foro name="Enlace">
                             <input type="text" v-model="content.edit.link" placeholder="Escribe el enlace del tema." />
                         </campo-foro>
                     </li>
                     <li>
-                        <campo-foro data-name="Fecha">
+                        <campo-foro name="Fecha">
                             <div class="input-date">
                                 <div class="date-element date-dmy">
                                     <label>
@@ -262,7 +262,7 @@ Vue.component('modal-cronologia', {
                 </aviso-foro>
                 <ul class="forum-fieldlist no-style">
                     <li>
-                        <campo-foro data-name="Estado">
+                        <campo-foro name="Estado">
                             <div class="select-container">
                                 <select v-model="content.edit.status">
                                     <option value="-1" selected="selected" hidden="hidden">Selecciona un estado para el tema</option>
@@ -274,7 +274,7 @@ Vue.component('modal-cronologia', {
                         </campo-foro>
                     </li>
                     <li>
-                        <campo-foro data-name="Personajes">
+                        <campo-foro name="Personajes">
                             <div class="character-selector">
                                 <input type="text" v-model="info.user" placeholder="Escribe el nombre de un personaje." />
                                 <ul class="no-style selector-list" v-if="sortedCharacters.length > 0 && info.selector">
@@ -458,11 +458,11 @@ Vue.component('gestor-cronologia', {
         </div>
         <separador-foro />
         <template v-if="state.page === 0">
-            <cargando-foro data-text="Cargando utilidad…"></cargando-foro>
+            <cargando-foro text="Cargando utilidad…"></cargando-foro>
         </template>
         <template v-else-if="state.page === 1">
-            <modal-cronologia v-if="modal.status" :data-type="modal.type" :data-element="entry"></modal-cronologia>
-            <mando-foro data-id="upper-controls" data-app="true">
+            <modal-cronologia v-if="modal.status" :type="modal.type" :element="entry"></modal-cronologia>
+            <mando-foro id="upper-controls" app="true">
                 <template slot="pagination" v-if="paginationContent.pages.length > 1">
                     <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" @click="state.pagination -= 1">
                         <i class="fas fa-chevron-left"></i>
@@ -477,10 +477,10 @@ Vue.component('gestor-cronologia', {
                 </template>
                 <template slot="controls">
                     <li @click="addEntry($event)">
-                        <boton-foro data-url="#" data-name="Añadir" data-icon="fas fa-plus"></boton-foro>
+                        <boton-foro url="#" name="Añadir" icon="fas fa-plus"></boton-foro>
                     </li>
                     <li v-if="finalCheck" @click="save($event)">
-                        <boton-foro data-url="#" data-name="Guardar" data-icon="fas fa-save" data-type="no-name"></boton-foro>
+                        <boton-foro url="#" name="Guardar" icon="fas fa-save" type="no-name"></boton-foro>
                     </li>
                 </template>
             </mando-foro>
@@ -491,10 +491,10 @@ Vue.component('gestor-cronologia', {
                     </li>
                 </template>
                 <template v-else v-for="rp in paginationContent.content">
-                    <elemento-cronologia :data-element="rp" data-type="manager" :data-id="rp.position" />
+                    <elemento-cronologia :element="rp" type="manager" :id="rp.position" />
                 </template>
             </ul>
-            <mando-foro data-id="lower-controls" data-app="true">
+            <mando-foro id="lower-controls" app="true">
                 <template slot="pagination" v-if="paginationContent.pages.length > 1">
                     <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" @click="state.pagination -= 1">
                         <i class="fas fa-chevron-left"></i>
@@ -509,16 +509,16 @@ Vue.component('gestor-cronologia', {
                 </template>
                 <template slot="controls">
                     <li @click="addEntry($event)">
-                        <boton-foro data-url="#" data-name="Añadir" data-icon="fas fa-plus"></boton-foro>
+                        <boton-foro url="#" name="Añadir" icon="fas fa-plus"></boton-foro>
                     </li>
                     <li v-if="finalCheck" @click="save($event)">
-                        <boton-foro data-url="#" data-name="Guardar" data-icon="fas fa-save" data-type="no-name"></boton-foro>
+                        <boton-foro url="#" name="Guardar" icon="fas fa-save" type="no-name"></boton-foro>
                     </li>
                 </template>
             </mando-foro>
         </template>
         <template v-else-if="state.page === 2">
-            <cargando-foro data-text="Actualizando información…"></cargando-foro>
+            <cargando-foro text="Actualizando información…"></cargando-foro>
         </template>
     </section>
     `
@@ -526,17 +526,17 @@ Vue.component('gestor-cronologia', {
 
 
 Vue.component('elemento-cronologia', {
-    props: ['dataElement', 'dataType', 'dataId'],
+    props: ['element', 'type', 'id'],
     data() {
         return {
-            content: this.dataElement
+            content: this.element
         }
     },
     methods: {
         deleteElement() {
             this.$parent.content.edit.splice(this.$parent.content.edit.map((item) => {
                 return item.position;
-            }).indexOf(this.dataId), 1);
+            }).indexOf(this.id), 1);
 
             if (this.$parent.paginationContent.content.length === 0 && this.$parent.state.pagination !== 0) {
                 this.$parent.state.pagination -= 1;
@@ -552,7 +552,7 @@ Vue.component('elemento-cronologia', {
     },
     template: `
     <li class="rp-list">
-        <template v-if="dataType === 'manager'">
+        <template v-if="type === 'manager'">
             <a class="rp-element rp-manager">
                 <div class="rp-icon">
                     <template v-if="content.status === 'ropened'">
@@ -578,7 +578,7 @@ Vue.component('elemento-cronologia', {
                 </div>
             </a>
         </template>
-        <template v-else-if="dataType === 'profile'">
+        <template v-else-if="type === 'profile'">
             <a class="rp-element" :href="content.link" target="_blank" :title="'Ir al tema «' + content.name + '»'">
                 <div class="rp-icon">
                     <template v-if="content.status === 'ropened'">

package/apps/vueChrono.min.js

@@ -1 +1 @@
-Vue.component("modal-cronologia",{props:["dataElement","dataType"],data(){return{page:0,state:{modal:!1},info:{user:"",people:[],selector:!0},content:{edit:JSON.parse(JSON.stringify(this.dataElement)),current:this.dataElement}}},computed:{modalTitle(){return"new"===this.dataType?"Nueva entrada":"edit"===this.dataType?"Editar entrada":void 0},oneCheck(){let t="";if(!Object.keys(this.content.edit).length)return t;this.content.edit.name.length<5&&(t+="<li>Escribe un título lo suficientemente largo.</li>"),-1===this.content.edit.link.indexOf("/t")&&(t+="<li>Escribe un enlace válido.</li>");let e=[];if((1>parseFloat(this.content.edit.date.day)||parseFloat(this.content.edit.date.day)>forumData.date.day||""===this.content.edit.date.day||Number.isNaN(parseFloat(this.content.edit.date.day)))&&e.push("un día correcto (1 al "+forumData.date.day+")"),(1>parseFloat(this.content.edit.date.month)||parseFloat(this.content.edit.date.month)>forumData.date.month||""===this.content.edit.date.month||Number.isNaN(parseFloat(this.content.edit.date.month)))&&e.push("un mes correcto (1 al "+forumData.date.month+")"),("DFI"===this.content.edit.date.time&&parseFloat(this.content.edit.date.year)>forumData.date.year||"DFI"===this.content.edit.date.time&&parseFloat(this.content.edit.date.year)<1||""===this.content.edit.date.year||Number.isNaN(parseFloat(this.content.edit.date.year)))&&e.push("un año correcto"),-1===this.content.edit.date.time&&e.push("un periodo correcto"),e.length){let n="";n+="<li>Recuerda poner ",[].forEach.call(e,(t,e,a)=>{n+=t,a.length-2===e?n+=" y ":a.length===e+1?n+=".":a.length>e&&(n+=", ")}),n+="</li>",t+=n}return t},secondCheck(){let t="";return Object.keys(this.content.edit).length?(-1===this.content.edit.status&&(t+="<li>Selecciona un estado para el tema.</li>"),this.info.people.length||(t+="<li>Selecciona al menos un personaje.</li>"),t):t},finalCheck(){return JSON.stringify(this.content.current)!==JSON.stringify(this.finalData)},finalData(){let t=JSON.parse(JSON.stringify(this.content.edit));if(!Object.keys(this.content.edit).length)return t;let e="",n="";return[].forEach.call(JSON.parse(JSON.stringify(this.sortedEditCharacters)),(t,a,o)=>{e+=t,n+=Vue.filter("just-name")(t),o.length-2===a?(e+=" y ",n+=" y "):o.length===a+1?(e+="",n+=""):o.length>a&&(e+=", ",n+=", ")}),t.people.count=this.info.people.length,t.people.list=e,t.people.short=n,"new"===this.$parent.modal.type&&(t.position=this.$parent.content.edit.length),t},sortedCharacters(){return Object.keys(this.content.edit).length?this.$parent.users.map(t=>t.user).filter(t=>-1===this.info.people.indexOf(t)).filter(t=>t.toLowerCase().indexOf(this.info.user.toLowerCase())>-1):this.$parent.users.map(t=>t.user)},sortedEditCharacters(){return this.info.people.sort((t,e)=>t<e?-1:t>e?1:0)}},methods:{modalClose(){this.$parent.modal.type="new",this.$parent.modal.status=!1,this.$parent.setEntry()},pushElement(){"edit"===this.$parent.modal.type&&this.$parent.content.edit.splice(this.$parent.content.edit.map(t=>t.position).indexOf(this.content.current.position),1),this.$parent.content.edit.push(this.finalData),this.modalClose()},addCharacter:function(t){this.info.people.push(t),this.info.selector=!1,this.info.user="",setTimeout(()=>{this.info.selector=!0},250)},deleteCharacter:function(t){const e=JSON.parse(JSON.stringify(this.content.edit.status));this.info.people.splice(t,1),this.forceRerender(),this.content.edit.status=-1,this.content.edit.status=e}},created(){let t=[];""!==this.content.edit.people.list&&(t=-1===this.content.edit.people.list.indexOf(" y ")?[this.content.edit.people.list]:this.content.edit.people.list.split(" y ")[0].split(", ").concat(this.content.edit.people.list.split(" y ")[1])),this.info.people=t},template:'\n    <modal-foro :data-title="modalTitle" @modal-close="modalClose()">\n        <template v-if="page === 0">\n            <template slot="content">\n                <aviso-foro v-show="oneCheck.length">\n                    <ul v-html="oneCheck"></ul>\n                </aviso-foro>\n                <ul class="forum-fieldlist no-style">\n                    <li>\n                        <campo-foro data-name="Título">\n                            <input type="text" v-model="content.edit.name" placeholder="Escribe el nombre del tema." />\n                        </campo-foro>\n                    </li>\n                    <li>\n                        <campo-foro data-name="Enlace">\n                            <input type="text" v-model="content.edit.link" placeholder="Escribe el enlace del tema." />\n                        </campo-foro>\n                    </li>\n                    <li>\n                        <campo-foro data-name="Fecha">\n                            <div class="input-date">\n                                <div class="date-element date-dmy">\n                                    <label>\n                                        Día\n                                        <input type="text" v-model="content.edit.date.day" placeholder="0" />\n                                    </label>\n                                    <label>\n                                        Mes\n                                        <input type="text" v-model="content.edit.date.month" placeholder="0" />\n                                    </label>\n                                    <label>\n                                        Año\n                                        <input type="text" v-model="content.edit.date.year" placeholder="0" />\n                                    </label>\n                                </div>\n                                <div class="date-element not-show mt-4">\n                                    <label>\n                                        Periodo\n                                        <div class="select-container">\n                                            <select v-model="content.edit.date.time">\n                                                <option value="-1" hidden>-</option>\n                                                <option value="AFI">AFI</option>\n                                                <option value="DFI">DFI</option>\n                                            </select>\n                                        </div>\n                                    </label>\n                                </div>\n                            </div>\n                        </campo-foro>\n                    </li>\n                </ul>\n            </template>\n            <template slot="controls" v-if="!oneCheck.length">\n                <controles-modal>\n                    <button class="button1 btn-main" @click="page = 1" title="Paso siguiente">Siguiente</button>\n                </controles-modal>\n            </template>\n        </template>\n        <template v-else-if="page === 1">\n            <template slot="content">\n                <aviso-foro v-show="secondCheck.length">\n                    <ul v-html="secondCheck"></ul>\n                </aviso-foro>\n                <ul class="forum-fieldlist no-style">\n                    <li>\n                        <campo-foro data-name="Estado">\n                            <div class="select-container">\n                                <select v-model="content.edit.status">\n                                    <option value="-1" selected="selected" hidden="hidden">Selecciona un estado para el tema</option>\n                                    <option value="ropened">Activo</option>\n                                    <option value="rclosed">Cerrado</option>\n                                    <option value="rabandoned">Abandonado</option>\n                                </select>\n                            </div>\n                        </campo-foro>\n                    </li>\n                    <li>\n                        <campo-foro data-name="Personajes">\n                            <div class="character-selector">\n                                <input type="text" v-model="info.user" placeholder="Escribe el nombre de un personaje." />\n                                <ul class="no-style selector-list" v-if="sortedCharacters.length > 0 && info.selector">\n                                    <li v-for="(character, index) in sortedCharacters" @click="addCharacter(character)" :title="\'Seleccionar «\' + character + \'»\'">{{ character }}<i class="fas fa-plus"></i></li>\n                                </ul>\n                                <a class="character-custom" @click="addCharacter(info.user)" v-if="info.user.length > 2" :title="\'Seleccionar «\' + info.user + \'»\'">\n                                    <i class="fas fa-plus"></i>\n                                </a>\n                            </div>\n                            <ul v-if="info.people.length" class="no-style character-list">\n                                <li v-for="(character, index) in sortedEditCharacters" @click="deleteCharacter(index)" :title="\'Quitar \' + character"><i class="fas fa-times"></i> {{ character }}</li>\n                            </ul>\n                        </campo-foro>\n                    </li>\n                </ul>\n            </template>\n            <template slot="controls">\n                <controles-modal>\n                    <button class="button2" @click="page = 0" title="Paso anterior">Anterior</button>\n                    <button class="button1 btn-main" @click="pushElement()" v-if="!secondCheck.length && finalCheck" title="Guardar entrada">Guardar</button>\n                </controles-modal>\n            </template>\n        </template>\n    </modal-foro>\n    '}),Vue.component("gestor-cronologia",{data:()=>({render:0,modal:{type:"new",status:!1},users:[],state:{page:0,pagination:0},entry:{},content:{edit:[],current:[]}}),computed:{sortedContent(){return JSON.parse(JSON.stringify(this.content.edit)).sort(({date:t,name:e},{date:n,name:a})=>{if(t.time!==n.time)return"AFI"===t.time?-1:1;const o="AFI"===t.time?n:t,i="AFI"===t.time?t:n;return parseFloat(t.year)!==parseFloat(n.year)?parseFloat(o.year)-parseFloat(i.year):parseFloat(t.month)!==parseFloat(n.month)?parseFloat(o.month)-parseFloat(i.month):parseFloat(t.day)!==parseFloat(n.day)?parseFloat(o.day)-parseFloat(i.day):e-a})},paginationContent(){const t=forumConfig.skinOptions.paginationDefault,e=Math.floor((this.sortedContent.length-1)/t)+1;let n=[];for(let t=0;t<e;t++)n.push(t);return this.forceRerender(),{pages:n,content:this.sortedContent.slice(this.state.pagination*t,(this.state.pagination+1)*t)}},finalCheck(){return JSON.stringify(this.content.current)!==JSON.stringify(this.content.edit)}},methods:{forceRerender(){this.render+=1},setEntry(){this.entry={link:"",name:"",status:-1,people:{list:"",short:"",count:0},date:{time:"DFI",day:"",month:"",year:""}}},addEntry:function(t){t.preventDefault(),this.modal.status=!0},save:function(t){t.preventDefault(),this.state.page=2;const e=this.sortedContent.map(t=>(void 0!==t.desc&&delete t.desc,void 0!==t.position&&delete t.position,t));FNR.user.profile.setData([{name:forumConfig.profileUser.cronoField,type:"textarea",value:JSON.stringify(e).replace(/"/g,"`")}]).then(t=>{t?(FNR.html.genNotification("Atención","Información actualizada sin inconvenientes.","fas fa-check"),setTimeout(()=>{window.location.reload()},2e3)):FNR.html.genNotification("Atención","Hubo un problema al actualizar. Dale otro intento.","fas fa-exclamation")})}},created(){FNR.user.profile.getData([{name:forumConfig.profileUser.cronoField,type:"textarea"}]).then(t=>{const e=FNR.utility.genArray(t[0].value).map((t,e)=>{let n=t;return n.position=e,n});this.content.edit=e,this.content.current=JSON.parse(JSON.stringify(e)),FNR.forum.getMembers().then(t=>{this.setEntry(),this.users=t,this.state.page=1})})},template:'\n    <section id="forum-chronology" class="wiki-content is-dramatic">\n        <div class="is-content">\n            <h2>Cronología</h2>\n            <hr />\n            <p>En esta página podrás editar la cronología de tu personaje.</p>\n            <p>Ante cualquier duda o problema, contacta con la administración.</p>\n        </div>\n        <separador-foro />\n        <template v-if="state.page === 0">\n            <cargando-foro data-text="Cargando utilidad…"></cargando-foro>\n        </template>\n        <template v-else-if="state.page === 1">\n            <modal-cronologia v-if="modal.status" :data-type="modal.type" :data-element="entry"></modal-cronologia>\n            <mando-foro data-id="upper-controls" data-app="true">\n                <template slot="pagination" v-if="paginationContent.pages.length > 1">\n                    <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" @click="state.pagination -= 1">\n                        <i class="fas fa-chevron-left"></i>\n                    </a>\n                    <template v-for="page in paginationContent.pages">\n                        <strong v-if="page === state.pagination">{{ page + 1 }}</strong>\n                        <a class="page-link" :title="\'Ir a la página «\' + (page + 1) + \'»\'" v-else @click="state.pagination = page">{{ page + 1 }}</a>\n                    </template>\n                    <a class="page-action" title="Ir a la página siguiente" v-if="(state.pagination + 1) < paginationContent.pages.length" @click="state.pagination += 1">\n                        <i class="fas fa-chevron-right"></i>\n                    </a>\n                </template>\n                <template slot="controls">\n                    <li @click="addEntry($event)">\n                        <boton-foro data-url="#" data-name="Añadir" data-icon="fas fa-plus"></boton-foro>\n                    </li>\n                    <li v-if="finalCheck" @click="save($event)">\n                        <boton-foro data-url="#" data-name="Guardar" data-icon="fas fa-save" data-type="no-name"></boton-foro>\n                    </li>\n                </template>\n            </mando-foro>\n            <ul id="forum-rplist" :class="\'no-style\' + (!paginationContent.content.length ? \' no-results\': \'\')" :key="render">\n                <template v-if="!paginationContent.content.length">\n                    <li class="is-not-topic is-not-lastpost">\n                        <h6>No hay entradas en tu cronología</h6>\n                    </li>\n                </template>\n                <template v-else v-for="rp in paginationContent.content">\n                    <elemento-cronologia :data-element="rp" data-type="manager" :data-id="rp.position" />\n                </template>\n            </ul>\n            <mando-foro data-id="lower-controls" data-app="true">\n                <template slot="pagination" v-if="paginationContent.pages.length > 1">\n                    <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" @click="state.pagination -= 1">\n                        <i class="fas fa-chevron-left"></i>\n                    </a>\n                    <template v-for="page in paginationContent.pages">\n                        <strong v-if="page === state.pagination">{{ page + 1 }}</strong>\n                        <a class="page-link" :title="\'Ir a la página «\' + (page + 1) + \'»\'" v-else @click="state.pagination = page">{{ page + 1 }}</a>\n                    </template>\n                    <a class="page-action" title="Ir a la página siguiente" v-if="(state.pagination + 1) < paginationContent.pages.length" @click="state.pagination += 1">\n                        <i class="fas fa-chevron-right"></i>\n                    </a>\n                </template>\n                <template slot="controls">\n                    <li @click="addEntry($event)">\n                        <boton-foro data-url="#" data-name="Añadir" data-icon="fas fa-plus"></boton-foro>\n                    </li>\n                    <li v-if="finalCheck" @click="save($event)">\n                        <boton-foro data-url="#" data-name="Guardar" data-icon="fas fa-save" data-type="no-name"></boton-foro>\n                    </li>\n                </template>\n            </mando-foro>\n        </template>\n        <template v-else-if="state.page === 2">\n            <cargando-foro data-text="Actualizando información…"></cargando-foro>\n        </template>\n    </section>\n    '}),Vue.component("elemento-cronologia",{props:["dataElement","dataType","dataId"],data(){return{content:this.dataElement}},methods:{deleteElement(){this.$parent.content.edit.splice(this.$parent.content.edit.map(t=>t.position).indexOf(this.dataId),1),0===this.$parent.paginationContent.content.length&&0!==this.$parent.state.pagination&&(this.$parent.state.pagination-=1),this.$parent.forceRerender()},editElement(){this.$parent.modal.type="edit",this.$parent.entry=this.content,this.$parent.modal.status=!0}},template:'\n    <li class="rp-list">\n        <template v-if="dataType === \'manager\'">\n            <a class="rp-element rp-manager">\n                <div class="rp-icon">\n                    <template v-if="content.status === \'ropened\'">\n                        <i class="fas fa-lock-open"></i>\n                    </template>\n                    <template v-else-if="content.status === \'rclosed\'">\n                        <i class="fas fa-lock"></i>\n                    </template>\n                    <template v-else-if="content.status === \'rabandoned\'">\n                        <i class="fas fa-times"></i>\n                    </template>\n                </div>\n                <div class="rp-content">\n                    <div class="rp-name">\n                        <span>{{ content.name }}</span>\n                        <small>\n                            {{ content.date.day | to-number | in-two-digits }}/{{ content.date.month | to-number | in-two-digits }}/{{ content.date.year | to-number | in-two-digits }} - <template v-if="content.people.count < 4">{{ content.people.short }}</template><template v-else>Invitados</template>\n                        </small>\n                    </div>\n                    <div class="rp-controls">\n                        <span @click="editElement()" title="Editar entrada">Editar</span> / <span @click="deleteElement()" title="Eliminar entrada">Eliminar</span>\n                    </div>\n                </div>\n            </a>\n        </template>\n        <template v-else-if="dataType === \'profile\'">\n            <a class="rp-element" :href="content.link" target="_blank" :title="\'Ir al tema «\' + content.name + \'»\'">\n                <div class="rp-icon">\n                    <template v-if="content.status === \'ropened\'">\n                        <i class="fas fa-lock-open"></i>\n                    </template>\n                    <template v-else-if="content.status === \'rclosed\'">\n                        <i class="fas fa-lock"></i>\n                    </template>\n                    <template v-else-if="content.status === \'rabandoned\'">\n                        <i class="fas fa-times"></i>\n                    </template>\n                </div>\n                <div class="rp-content">\n                    <div class="rp-name">\n                        <span>{{ content.name }}</span>\n                        <small>\n                            {{ content.date.day | to-number | in-two-digits }}/{{ content.date.month | to-number | in-two-digits }}/{{ content.date.year | to-number | in-two-digits }} - <template v-if="content.people.count < 4">{{ content.people.short }}</template><template v-else>Invitados</template>\n                        </small>\n                    </div>\n                </div>\n            </a>\n        </template>\n    </li>\n    '});
+Vue.component("modal-cronologia",{props:["element","type"],data(){return{page:0,state:{modal:!1},info:{user:"",people:[],selector:!0},content:{edit:JSON.parse(JSON.stringify(this.element)),current:this.element}}},computed:{modalTitle(){return"new"===this.type?"Nueva entrada":"edit"===this.type?"Editar entrada":void 0},oneCheck(){let t="";if(!Object.keys(this.content.edit).length)return t;this.content.edit.name.length<5&&(t+="<li>Escribe un título lo suficientemente largo.</li>"),-1===this.content.edit.link.indexOf("/t")&&(t+="<li>Escribe un enlace válido.</li>");let e=[];if((1>parseFloat(this.content.edit.date.day)||parseFloat(this.content.edit.date.day)>forumData.date.day||""===this.content.edit.date.day||Number.isNaN(parseFloat(this.content.edit.date.day)))&&e.push("un día correcto (1 al "+forumData.date.day+")"),(1>parseFloat(this.content.edit.date.month)||parseFloat(this.content.edit.date.month)>forumData.date.month||""===this.content.edit.date.month||Number.isNaN(parseFloat(this.content.edit.date.month)))&&e.push("un mes correcto (1 al "+forumData.date.month+")"),("DFI"===this.content.edit.date.time&&parseFloat(this.content.edit.date.year)>forumData.date.year||"DFI"===this.content.edit.date.time&&parseFloat(this.content.edit.date.year)<1||""===this.content.edit.date.year||Number.isNaN(parseFloat(this.content.edit.date.year)))&&e.push("un año correcto"),-1===this.content.edit.date.time&&e.push("un periodo correcto"),e.length){let n="";n+="<li>Recuerda poner ",[].forEach.call(e,(t,e,a)=>{n+=t,a.length-2===e?n+=" y ":a.length===e+1?n+=".":a.length>e&&(n+=", ")}),n+="</li>",t+=n}return t},secondCheck(){let t="";return Object.keys(this.content.edit).length?(-1===this.content.edit.status&&(t+="<li>Selecciona un estado para el tema.</li>"),this.info.people.length||(t+="<li>Selecciona al menos un personaje.</li>"),t):t},finalCheck(){return JSON.stringify(this.content.current)!==JSON.stringify(this.finalData)},finalData(){let t=JSON.parse(JSON.stringify(this.content.edit));if(!Object.keys(this.content.edit).length)return t;let e="",n="";return[].forEach.call(JSON.parse(JSON.stringify(this.sortedEditCharacters)),(t,a,o)=>{e+=t,n+=Vue.filter("just-name")(t),o.length-2===a?(e+=" y ",n+=" y "):o.length===a+1?(e+="",n+=""):o.length>a&&(e+=", ",n+=", ")}),t.people.count=this.info.people.length,t.people.list=e,t.people.short=n,"new"===this.$parent.modal.type&&(t.position=this.$parent.content.edit.length),t},sortedCharacters(){return Object.keys(this.content.edit).length?this.$parent.users.map(t=>t.user).filter(t=>-1===this.info.people.indexOf(t)).filter(t=>t.toLowerCase().indexOf(this.info.user.toLowerCase())>-1):this.$parent.users.map(t=>t.user)},sortedEditCharacters(){return this.info.people.sort((t,e)=>t<e?-1:t>e?1:0)}},methods:{modalClose(){this.$parent.modal.type="new",this.$parent.modal.status=!1,this.$parent.setEntry()},pushElement(){"edit"===this.$parent.modal.type&&this.$parent.content.edit.splice(this.$parent.content.edit.map(t=>t.position).indexOf(this.content.current.position),1),this.$parent.content.edit.push(this.finalData),this.modalClose()},addCharacter(t){this.info.people.push(t),this.info.selector=!1,this.info.user="",setTimeout(()=>{this.info.selector=!0},250)},deleteCharacter(t){const e=JSON.parse(JSON.stringify(this.content.edit.status));this.info.people.splice(t,1),this.forceRerender(),this.content.edit.status=-1,this.content.edit.status=e}},created(){let t=[];""!==this.content.edit.people.list&&(t=-1===this.content.edit.people.list.indexOf(" y ")?[this.content.edit.people.list]:this.content.edit.people.list.split(" y ")[0].split(", ").concat(this.content.edit.people.list.split(" y ")[1])),this.info.people=t},template:'\n    <modal-foro :title="modalTitle" @modal-close="modalClose()">\n        <template v-if="page === 0">\n            <template slot="content">\n                <aviso-foro v-show="oneCheck.length">\n                    <ul v-html="oneCheck"></ul>\n                </aviso-foro>\n                <ul class="forum-fieldlist no-style">\n                    <li>\n                        <campo-foro name="Título">\n                            <input type="text" v-model="content.edit.name" placeholder="Escribe el nombre del tema." />\n                        </campo-foro>\n                    </li>\n                    <li>\n                        <campo-foro name="Enlace">\n                            <input type="text" v-model="content.edit.link" placeholder="Escribe el enlace del tema." />\n                        </campo-foro>\n                    </li>\n                    <li>\n                        <campo-foro name="Fecha">\n                            <div class="input-date">\n                                <div class="date-element date-dmy">\n                                    <label>\n                                        Día\n                                        <input type="text" v-model="content.edit.date.day" placeholder="0" />\n                                    </label>\n                                    <label>\n                                        Mes\n                                        <input type="text" v-model="content.edit.date.month" placeholder="0" />\n                                    </label>\n                                    <label>\n                                        Año\n                                        <input type="text" v-model="content.edit.date.year" placeholder="0" />\n                                    </label>\n                                </div>\n                                <div class="date-element not-show mt-4">\n                                    <label>\n                                        Periodo\n                                        <div class="select-container">\n                                            <select v-model="content.edit.date.time">\n                                                <option value="-1" hidden>-</option>\n                                                <option value="AFI">AFI</option>\n                                                <option value="DFI">DFI</option>\n                                            </select>\n                                        </div>\n                                    </label>\n                                </div>\n                            </div>\n                        </campo-foro>\n                    </li>\n                </ul>\n            </template>\n            <template slot="controls" v-if="!oneCheck.length">\n                <controles-modal>\n                    <button class="button1 btn-main" @click="page = 1" title="Paso siguiente">Siguiente</button>\n                </controles-modal>\n            </template>\n        </template>\n        <template v-else-if="page === 1">\n            <template slot="content">\n                <aviso-foro v-show="secondCheck.length">\n                    <ul v-html="secondCheck"></ul>\n                </aviso-foro>\n                <ul class="forum-fieldlist no-style">\n                    <li>\n                        <campo-foro name="Estado">\n                            <div class="select-container">\n                                <select v-model="content.edit.status">\n                                    <option value="-1" selected="selected" hidden="hidden">Selecciona un estado para el tema</option>\n                                    <option value="ropened">Activo</option>\n                                    <option value="rclosed">Cerrado</option>\n                                    <option value="rabandoned">Abandonado</option>\n                                </select>\n                            </div>\n                        </campo-foro>\n                    </li>\n                    <li>\n                        <campo-foro name="Personajes">\n                            <div class="character-selector">\n                                <input type="text" v-model="info.user" placeholder="Escribe el nombre de un personaje." />\n                                <ul class="no-style selector-list" v-if="sortedCharacters.length > 0 && info.selector">\n                                    <li v-for="(character, index) in sortedCharacters" @click="addCharacter(character)" :title="\'Seleccionar «\' + character + \'»\'">{{ character }}<i class="fas fa-plus"></i></li>\n                                </ul>\n                                <a class="character-custom" @click="addCharacter(info.user)" v-if="info.user.length > 2" :title="\'Seleccionar «\' + info.user + \'»\'">\n                                    <i class="fas fa-plus"></i>\n                                </a>\n                            </div>\n                            <ul v-if="info.people.length" class="no-style character-list">\n                                <li v-for="(character, index) in sortedEditCharacters" @click="deleteCharacter(index)" :title="\'Quitar \' + character"><i class="fas fa-times"></i> {{ character }}</li>\n                            </ul>\n                        </campo-foro>\n                    </li>\n                </ul>\n            </template>\n            <template slot="controls">\n                <controles-modal>\n                    <button class="button2" @click="page = 0" title="Paso anterior">Anterior</button>\n                    <button class="button1 btn-main" @click="pushElement()" v-if="!secondCheck.length && finalCheck" title="Guardar entrada">Guardar</button>\n                </controles-modal>\n            </template>\n        </template>\n    </modal-foro>\n    '}),Vue.component("gestor-cronologia",{data:()=>({render:0,modal:{type:"new",status:!1},users:[],state:{page:0,pagination:0},entry:{},content:{edit:[],current:[]}}),computed:{sortedContent(){return JSON.parse(JSON.stringify(this.content.edit)).sort(({date:t,name:e},{date:n,name:a})=>{if(t.time!==n.time)return"AFI"===t.time?-1:1;const o="AFI"===t.time?n:t,i="AFI"===t.time?t:n;return parseFloat(t.year)!==parseFloat(n.year)?parseFloat(o.year)-parseFloat(i.year):parseFloat(t.month)!==parseFloat(n.month)?parseFloat(o.month)-parseFloat(i.month):parseFloat(t.day)!==parseFloat(n.day)?parseFloat(o.day)-parseFloat(i.day):e-a})},paginationContent(){const t=forumConfig.skinOptions.paginationDefault,e=Math.floor((this.sortedContent.length-1)/t)+1;let n=[];for(let t=0;t<e;t++)n.push(t);return this.forceRerender(),{pages:n,content:this.sortedContent.slice(this.state.pagination*t,(this.state.pagination+1)*t)}},finalCheck(){return JSON.stringify(this.content.current)!==JSON.stringify(this.content.edit)}},methods:{forceRerender(){this.render+=1},setEntry(){this.entry={link:"",name:"",status:-1,people:{list:"",short:"",count:0},date:{time:"DFI",day:"",month:"",year:""}}},addEntry(t){t.preventDefault(),this.modal.status=!0},save(t){t.preventDefault(),this.state.page=2;const e=this.sortedContent.map(t=>(void 0!==t.desc&&delete t.desc,void 0!==t.position&&delete t.position,t));FNR.user.profile.setData([{name:forumConfig.profileUser.cronoField,type:"textarea",value:JSON.stringify(e).replace(/"/g,"`")}]).then(t=>{t?(FNR.html.genNotification("Atención","Información actualizada sin inconvenientes.","fas fa-check"),setTimeout(()=>{window.location.reload()},2e3)):FNR.html.genNotification("Atención","Hubo un problema al actualizar. Dale otro intento.","fas fa-exclamation")})}},created(){FNR.user.profile.getData([{name:forumConfig.profileUser.cronoField,type:"textarea"}]).then(t=>{const e=FNR.utility.genArray(t[0].value).map((t,e)=>{let n=t;return n.position=e,n});this.content.edit=e,this.content.current=JSON.parse(JSON.stringify(e)),FNR.forum.getMembers().then(t=>{this.setEntry(),this.users=t,this.state.page=1})})},template:'\n    <section id="forum-chronology" class="wiki-content is-dramatic">\n        <div class="is-content">\n            <h2>Cronología</h2>\n            <hr />\n            <p>En esta página podrás editar la cronología de tu personaje.</p>\n            <p>Ante cualquier duda o problema, contacta con la administración.</p>\n        </div>\n        <separador-foro />\n        <template v-if="state.page === 0">\n            <cargando-foro text="Cargando utilidad…"></cargando-foro>\n        </template>\n        <template v-else-if="state.page === 1">\n            <modal-cronologia v-if="modal.status" :type="modal.type" :element="entry"></modal-cronologia>\n            <mando-foro id="upper-controls" app="true">\n                <template slot="pagination" v-if="paginationContent.pages.length > 1">\n                    <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" @click="state.pagination -= 1">\n                        <i class="fas fa-chevron-left"></i>\n                    </a>\n                    <template v-for="page in paginationContent.pages">\n                        <strong v-if="page === state.pagination">{{ page + 1 }}</strong>\n                        <a class="page-link" :title="\'Ir a la página «\' + (page + 1) + \'»\'" v-else @click="state.pagination = page">{{ page + 1 }}</a>\n                    </template>\n                    <a class="page-action" title="Ir a la página siguiente" v-if="(state.pagination + 1) < paginationContent.pages.length" @click="state.pagination += 1">\n                        <i class="fas fa-chevron-right"></i>\n                    </a>\n                </template>\n                <template slot="controls">\n                    <li @click="addEntry($event)">\n                        <boton-foro url="#" name="Añadir" icon="fas fa-plus"></boton-foro>\n                    </li>\n                    <li v-if="finalCheck" @click="save($event)">\n                        <boton-foro url="#" name="Guardar" icon="fas fa-save" type="no-name"></boton-foro>\n                    </li>\n                </template>\n            </mando-foro>\n            <ul id="forum-rplist" :class="\'no-style\' + (!paginationContent.content.length ? \' no-results\': \'\')" :key="render">\n                <template v-if="!paginationContent.content.length">\n                    <li class="is-not-topic is-not-lastpost">\n                        <h6>No hay entradas en tu cronología</h6>\n                    </li>\n                </template>\n                <template v-else v-for="rp in paginationContent.content">\n                    <elemento-cronologia :element="rp" type="manager" :id="rp.position" />\n                </template>\n            </ul>\n            <mando-foro id="lower-controls" app="true">\n                <template slot="pagination" v-if="paginationContent.pages.length > 1">\n                    <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" @click="state.pagination -= 1">\n                        <i class="fas fa-chevron-left"></i>\n                    </a>\n                    <template v-for="page in paginationContent.pages">\n                        <strong v-if="page === state.pagination">{{ page + 1 }}</strong>\n                        <a class="page-link" :title="\'Ir a la página «\' + (page + 1) + \'»\'" v-else @click="state.pagination = page">{{ page + 1 }}</a>\n                    </template>\n                    <a class="page-action" title="Ir a la página siguiente" v-if="(state.pagination + 1) < paginationContent.pages.length" @click="state.pagination += 1">\n                        <i class="fas fa-chevron-right"></i>\n                    </a>\n                </template>\n                <template slot="controls">\n                    <li @click="addEntry($event)">\n                        <boton-foro url="#" name="Añadir" icon="fas fa-plus"></boton-foro>\n                    </li>\n                    <li v-if="finalCheck" @click="save($event)">\n                        <boton-foro url="#" name="Guardar" icon="fas fa-save" type="no-name"></boton-foro>\n                    </li>\n                </template>\n            </mando-foro>\n        </template>\n        <template v-else-if="state.page === 2">\n            <cargando-foro text="Actualizando información…"></cargando-foro>\n        </template>\n    </section>\n    '}),Vue.component("elemento-cronologia",{props:["element","type","id"],data(){return{content:this.element}},methods:{deleteElement(){this.$parent.content.edit.splice(this.$parent.content.edit.map(t=>t.position).indexOf(this.id),1),0===this.$parent.paginationContent.content.length&&0!==this.$parent.state.pagination&&(this.$parent.state.pagination-=1),this.$parent.forceRerender()},editElement(){this.$parent.modal.type="edit",this.$parent.entry=this.content,this.$parent.modal.status=!0}},template:'\n    <li class="rp-list">\n        <template v-if="type === \'manager\'">\n            <a class="rp-element rp-manager">\n                <div class="rp-icon">\n                    <template v-if="content.status === \'ropened\'">\n                        <i class="fas fa-lock-open"></i>\n                    </template>\n                    <template v-else-if="content.status === \'rclosed\'">\n                        <i class="fas fa-lock"></i>\n                    </template>\n                    <template v-else-if="content.status === \'rabandoned\'">\n                        <i class="fas fa-times"></i>\n                    </template>\n                </div>\n                <div class="rp-content">\n                    <div class="rp-name">\n                        <span>{{ content.name }}</span>\n                        <small>\n                            {{ content.date.day | to-number | in-two-digits }}/{{ content.date.month | to-number | in-two-digits }}/{{ content.date.year | to-number | in-two-digits }} - <template v-if="content.people.count < 4">{{ content.people.short }}</template><template v-else>Invitados</template>\n                        </small>\n                    </div>\n                    <div class="rp-controls">\n                        <span @click="editElement()" title="Editar entrada">Editar</span> / <span @click="deleteElement()" title="Eliminar entrada">Eliminar</span>\n                    </div>\n                </div>\n            </a>\n        </template>\n        <template v-else-if="type === \'profile\'">\n            <a class="rp-element" :href="content.link" target="_blank" :title="\'Ir al tema «\' + content.name + \'»\'">\n                <div class="rp-icon">\n                    <template v-if="content.status === \'ropened\'">\n                        <i class="fas fa-lock-open"></i>\n                    </template>\n                    <template v-else-if="content.status === \'rclosed\'">\n                        <i class="fas fa-lock"></i>\n                    </template>\n                    <template v-else-if="content.status === \'rabandoned\'">\n                        <i class="fas fa-times"></i>\n                    </template>\n                </div>\n                <div class="rp-content">\n                    <div class="rp-name">\n                        <span>{{ content.name }}</span>\n                        <small>\n                            {{ content.date.day | to-number | in-two-digits }}/{{ content.date.month | to-number | in-two-digits }}/{{ content.date.year | to-number | in-two-digits }} - <template v-if="content.people.count < 4">{{ content.people.short }}</template><template v-else>Invitados</template>\n                        </small>\n                    </div>\n                </div>\n            </a>\n        </template>\n    </li>\n    '});

package/apps/vueDefault.js

@@ -1,5 +1,5 @@
 Vue.component('panel-control', {
-    props: ['dataElements'],
+    props: ['elements'],
     data() {
         return {
             userId: _userdata.user_id,
@@ -66,7 +66,7 @@ Vue.component('panel-control', {
         }
     },
     created() {
-        FNR.user.profile.getData(JSON.parse(this.dataElements.replace(/'/g, '"'))).then((r) => {
+        FNR.user.profile.getData(JSON.parse(this.elements.replace(/'/g, '"'))).then((r) => {
             this.content.original = JSON.parse(JSON.stringify(r));
             this.content.current = r;
             this.state.page = 1;
@@ -83,7 +83,7 @@ Vue.component('panel-control', {
         </div>
         <separador-foro />
         <template v-if="state.page === 0">
-            <cargando-foro data-text="Cargando utilidad…"></cargando-foro>
+            <cargando-foro text="Cargando utilidad…"></cargando-foro>
         </template>
         <template v-else-if="state.page === 1">
             <aviso-foro v-show="validationPanel !== ''">
@@ -91,7 +91,7 @@ Vue.component('panel-control', {
             </aviso-foro>
             <ul class="forum-fieldlist no-style">
                 <li v-for="item in content.current">
-                    <campo-foro :data-name="item.name">
+                    <campo-foro :name="item.name">
                         <input v-model="item.value" v-if="item.type === 'input' || item.type === 'avatar'" type="text"/>
                         <textarea v-model="item.value" v-else-if="item.type === 'textarea'"></textarea>
                         <div v-else-if="item.type === 'select'" class="select-container">
@@ -107,7 +107,7 @@ Vue.component('panel-control', {
             </div>
         </template>
         <template v-if="state.page === 2">
-            <cargando-foro data-text="Actualizando información…"></cargando-foro>
+            <cargando-foro text="Actualizando información…"></cargando-foro>
         </template>
     </section>
     `
@@ -139,14 +139,14 @@ Vue.component('lista-bosquejos', {
         </div>
         <separador-foro />
         <template v-if="state.page === 0">
-            <cargando-foro data-text="Cargando utilidad…"></cargando-foro>
+            <cargando-foro text="Cargando utilidad…"></cargando-foro>
         </template>
         <template v-else-if="state.page === 1">
             <section id="forum-drafts" class="forum-topiclist">
                 <div class="is-content mb-4">
                     <h4>Mensajes</h4>
                 </div>
-                <lista-temas-cabecera data-elements="['Tema', 'Información']"></lista-temas-cabecera>
+                <lista-temas-cabecera elements="['Tema', 'Información']"></lista-temas-cabecera>
                 <ul :class="'topiclist-topics no-style' + (!drafts.msgDrafts.length ? ' no-results': '')">
                     <template v-if="!drafts.msgDrafts.length">
                         <li class="is-not-topic is-not-lastpost">
@@ -155,7 +155,7 @@ Vue.component('lista-bosquejos', {
                     </template>
                     <template v-else>
                         <li class="row is-not-topic is-not-lastpost" v-for="draft in drafts.msgDrafts">
-                            <temas-foro data-type="draft" data-mode="" :data-url="draft.topic.url" :data-replies="draft.info.location" :data-views="draft.info.date" :data-quick="draft.modify">
+                            <temas-foro type="draft" mode="" :url="draft.topic.url" :replies="draft.info.location" :views="draft.info.date" :quick="draft.modify">
                                 <template slot="title">{{ draft.topic.name }}</template>
                             </temas-foro>
                         </li>
@@ -164,7 +164,7 @@ Vue.component('lista-bosquejos', {
                 <div class="is-content mt-5 mb-4">
                     <h4>Temas</h4>
                 </div>
-                <lista-temas-cabecera data-elements="['Tema', 'Información']"></lista-temas-cabecera>
+                <lista-temas-cabecera elements="['Tema', 'Información']"></lista-temas-cabecera>
                 <ul :class="'topiclist-topics no-style' + (!drafts.topicDrafts.length ? ' no-results': '')">
                     <template v-if="!drafts.topicDrafts.length">
                         <li class="is-not-topic is-not-lastpost">
@@ -173,7 +173,7 @@ Vue.component('lista-bosquejos', {
                     </template>
                     <template v-else>
                         <li class="row is-not-topic is-not-lastpost" v-for="draft in drafts.topicDrafts">
-                            <temas-foro data-type="draft" data-mode="" :data-url="draft.topic.url" :data-replies="draft.info.location" :data-views="draft.info.date" :data-quick="draft.modify">
+                            <temas-foro type="draft" mode="" :url="draft.topic.url" :replies="draft.info.location" :views="draft.info.date" :quick="draft.modify">
                                 <template slot="title">{{ draft.topic.name }}</template>
                             </temas-foro>
                         </li>
@@ -310,10 +310,10 @@ Vue.component('lista-seguidos', {
         </div>
         <separador-foro />
         <template v-if="state.page === 0">
-            <cargando-foro data-text="Cargando utilidad…"></cargando-foro>
+            <cargando-foro text="Cargando utilidad…"></cargando-foro>
         </template>
         <template v-else-if="state.page === 1">
-            <mando-foro data-id="upper-controls" data-app="true">
+            <mando-foro id="upper-controls" app="true">
                 <template slot="pagination" v-if="followed.pages.length > 1">
                     <a class="page-action" title="Ir a la página anterior" v-if="followed.page > 0" @click="setPage(followed.page -= 1)">
                         <i class="fas fa-chevron-left"></i>
@@ -328,12 +328,12 @@ Vue.component('lista-seguidos', {
                 </template>
                 <template slot="controls">
                     <li @click="delTopics()">
-                        <boton-foro data-url="javascript:{}" data-name="Retirar" data-icon="fas fa-minus"></boton-foro>
+                        <boton-foro url="javascript:{}" name="Retirar" icon="fas fa-minus"></boton-foro>
                     </li>
                 </template>
             </mando-foro>
             <section id="forum-followed" class="forum-topiclist">
-                <lista-temas-cabecera data-elements="['Tema', 'Información']"></lista-temas-cabecera>
+                <lista-temas-cabecera elements="['Tema', 'Información']"></lista-temas-cabecera>
                 <ul :class="'topiclist-topics no-style' + (!followed.content.length || followed.loading === 0 ? ' no-results': '')">
                     <template v-if="!followed.content.length">
                         <li class="is-not-topic is-not-lastpost">
@@ -342,12 +342,12 @@ Vue.component('lista-seguidos', {
                     </template>
                     <template v-else-if="followed.loading === 0">
                         <li class="is-not-topic is-not-lastpost">
-                            <cargando-foro data-text="Cargando temas…"></cargando-foro>
+                            <cargando-foro text="Cargando temas…"></cargando-foro>
                         </li>
                     </template>
                     <template v-else>
                         <li class="row is-not-topic is-not-lastpost" v-for="topic in followed.content" :key="topic.id">
-                            <temas-foro data-type="followed" data-mode="" :data-url="topic.url" :data-replies="topic.replies + ' respuestas'" :data-views="topic.views + ' visitas'">
+                            <temas-foro type="followed" mode="" :url="topic.url" :replies="topic.replies + ' respuestas'" :views="topic.views + ' visitas'">
                                 <template slot="title">{{ topic.name }}</template>
                                 <template slot="radio">
                                     <div :class="'forum-checkbox' + (state.selected.indexOf(topic.id) === -1 ? '' : ' is-active')">
@@ -363,7 +363,7 @@ Vue.component('lista-seguidos', {
                     </template>
                 </ul>
             </section>
-            <mando-foro data-id="lower-controls" data-app="true">
+            <mando-foro id="lower-controls" app="true">
                 <template slot="pagination" v-if="followed.pages.length > 1">
                     <a class="page-action" title="Ir a la página anterior" v-if="followed.page > 0" @click="setPage(followed.page -= 1)">
                         <i class="fas fa-chevron-left"></i>
@@ -378,7 +378,7 @@ Vue.component('lista-seguidos', {
                 </template>
                 <template slot="controls">
                     <li @click="delTopics()">
-                        <boton-foro data-url="javascript:{}" data-name="Retirar" data-icon="fas fa-minus"></boton-foro>
+                        <boton-foro url="javascript:{}" name="Retirar" icon="fas fa-minus"></boton-foro>
                     </li>
                 </template>
             </mando-foro>
@@ -1064,7 +1064,7 @@ Vue.component('editor-foro', {
     template: `
     <div id="forum-usereply">
         <template v-if="state.page === 0">
-            <cargando-foro data-text="Cargando utilidad…"></cargando-foro>
+            <cargando-foro text="Cargando utilidad…"></cargando-foro>
         </template>
         <template v-else-if="state.page === 1">
             <aviso-foro v-show="msgCheck.length">
@@ -1073,14 +1073,14 @@ Vue.component('editor-foro', {
             <ul id="usereply-extra" class="forum-fieldlist no-style" v-if="state.editor !== 'reply'">
                 <template v-if="state.guest">
                     <li>
-                        <campo-foro data-name="Nombre de usuario">
+                        <campo-foro name="Nombre de usuario">
                             <input type="text" v-model="content.username" placeholder="Escribe tu nombre de usuario." />
                         </campo-foro>
                     </li>
                 </template>
                 <template v-if="state.editor === 'post'">
                     <li>
-                        <campo-foro data-name="Usuarios">
+                        <campo-foro name="Usuarios">
                             <div class="character-selector">
                                 <input type="text" v-model="users.current" placeholder="Escribe el nombre de un usuario." :disabled="groups.type !== -1" />
                                 <ul class="no-style selector-list" v-if="users.selector && sortedCharacters.length > 0">
@@ -1096,7 +1096,7 @@ Vue.component('editor-foro', {
                 <template v-if="state.admin">
                     <template v-if="state.editor === 'post'">
                         <li>
-                            <campo-foro data-name="Grupo">
+                            <campo-foro name="Grupo">
                                 <div class="select-container">
                                     <select v-model="groups.type" @change="changeGroup()" :disabled="users.selected.length !== 0">
                                         <option value="-1" hidden>Selecciona un grupo.</option>
@@ -1108,7 +1108,7 @@ Vue.component('editor-foro', {
                     </template>
                     <template v-else-if="content.type !== -1 && (state.editor === 'newtopic' || state.editor === 'edittopicdraft')">
                         <li>
-                            <campo-foro data-name="Tipo de tema">
+                            <campo-foro name="Tipo de tema">
                                 <div class="select-container">
                                     <select v-model="content.type">
                                         <option value="-1" hidden>Selecciona una opción.</option>
@@ -1121,7 +1121,7 @@ Vue.component('editor-foro', {
                 </template>
                 <template v-if="state.editor === 'newtopic' || state.editor === 'post' || state.editor === 'edittopicdraft'">
                     <li>
-                        <campo-foro data-name="Título">
+                        <campo-foro name="Título">
                             <input type="text" v-model="content.subject" placeholder="Escribe el título." />
                         </campo-foro>
                     </li>