@cortezaproject/corteza-vue 2022.3.0-dev.1 → 2022.3.0-dev.2

package/dist/index.js

@@ -2007,7 +2007,7 @@ class Auth {
     handle(req = new URL(this.entrypointURL)) {
         return __awaiter(this, void 0, void 0, function* () {
             this.log.info('handling authentication');
-            if (/\/auth\/callback$/.test(req.pathname)) {
+            if (this.isCallback(req.pathname)) {
                 this.log.info('handling authentication callback');
                 const params = new URLSearchParams(req.search);
                 if (params.has('error')) {
@@ -2018,14 +2018,13 @@ class Auth {
                     if (params.has('state')) {
                         const state = params.get('state') || '';
                         const storeKeyStateLocation = `auth.state.${state}.location`;
-                        this.log.info('state received', state);
                         const tmp = this.sessionStorage.getItem(storeKeyStateLocation);
                         if (tmp === null) {
                             console.warn('state does not match, restarting authentication flow');
                             this.startAuthenticationFlow();
                             return null;
                         }
-                        if (!/auth\/callback/.test(tmp)) {
+                        if (!this.isCallback(tmp)) {
                             // if by some coincidence we got callback URL to finalLocation
                             // we'll silently ignore it and redirect user back to entrypoint
                             finalLocation = tmp;
@@ -2034,9 +2033,9 @@ class Auth {
                     }
                     const code = params.get('code') || '';
                     this.log.info('authorization code received', code);
-                    yield this.exchangeCode(code);
+                    const rsp = yield this.exchangeCode(code);
                     this.startFinalState(finalLocation);
-                    return null;
+                    return rsp;
                 }
             }
             return this.check();
@@ -2162,7 +2161,7 @@ class Auth {
         this.log.debug('starting new authentication flow');
         this.incFlowCounter();
         const state = Math.random().toString(36).substring(2);
-        this.sessionStorage.setItem(`auth.state.${state}.location`, this.location.toString());
+        this.sessionStorage.setItem(`auth.state.${state}.location`, this.getRedirect(this.location.toString()));
         this.location.assign(Make({
             url: `${this.cortezaAuthURL}` + oauth2FlowURL,
             query: {
@@ -2173,6 +2172,20 @@ class Auth {
             },
         }));
     }
+    getRedirect(url) {
+        const u = new URL(url);
+        // In case someone started the flow on a callback route, default to the root
+        // of the webapp.
+        if (this.isCallback(u.pathname)) {
+            u.pathname = '';
+            u.search = '';
+            u.hash = '';
+        }
+        return u.toString();
+    }
+    isCallback(url) {
+        return /\/auth\/callback$/.test(url);
+    }
     /**
      * protects against too many tries when we try to auto-fix the "state does not match" error
      * by restarting the aut flow.
@@ -2569,6 +2582,10 @@ class Settings {
       throw new Error('api.notDefined');
     }
 
+    return this.fetch();
+  }
+
+  async fetch() {
     return this.api.settingsCurrent().then(settings => {
       this.current = settings || {};
       return settings;
@@ -2614,7 +2631,7 @@ class Settings {
 var settings = {
   install(Vue) {
     // Should be used to initialize settings
-    Vue.prototype.$Settings = new Settings(); // Should be used to access settings
+    Vue.prototype.$Settings = Vue.observable(new Settings()); // Should be used to access settings
 
     Vue.prototype.$s = Vue.prototype.$Settings.get.bind(Vue.prototype.$Settings);
   }
@@ -71666,7 +71683,8 @@ var script$g = {
     return {
       visible: false,
       attrs: {
-        href: null
+        href: null,
+        target: '_self'
       }
     };
   },
@@ -71721,7 +71739,7 @@ var script$g = {
 const __vue_script__$g = script$g;
 
 /* template */
-var __vue_render__$e = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"link-popover-container"}},[_c('b-button',{staticClass:"text-dark font-weight-bold text-decoration-none",attrs:{"variant":"link","id":"link-popover"},on:{"click":_vm.showPopover}},[_c('span',{class:_vm.activeClasses(_vm.format.attrs)},[_c('font-awesome-icon',{attrs:{"icon":"link"}})],1)]),_vm._v(" "),(_vm.currentValue)?_c('b-popover',{ref:"popover",attrs:{"triggers":"focus","target":"link-popover","placement":"auto","show":_vm.visible,"container":"link-popover-container"},on:{"update:show":function($event){_vm.visible=$event;}}},[_c('b-input-group',[_c('b-form-input',{attrs:{"type":"url","autofocus":"","state":_vm.urlValid ? null : false,"placeholder":_vm.labels.urlPlaceholder},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }$event.preventDefault();$event.stopPropagation();return _vm.link.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.preventDefault();$event.stopPropagation();return _vm.close.apply(null, arguments)}]},model:{value:(_vm.attrs.href),callback:function ($$v) {_vm.$set(_vm.attrs, "href", $$v);},expression:"attrs.href"}}),_vm._v(" "),_c('b-input-group-append',[_c('b-button',{attrs:{"disabled":!_vm.urlValid,"variant":"outline-success"},on:{"click":_vm.link}},[_vm._v("\n          "+_vm._s(_vm.labels.ok)+"\n        ")])],1)],1)],1):_vm._e()],1)};
+var __vue_render__$e = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"link-popover-container"}},[_c('b-button',{staticClass:"text-dark font-weight-bold text-decoration-none",attrs:{"variant":"link","id":"link-popover"},on:{"click":_vm.showPopover}},[_c('span',{class:_vm.activeClasses(_vm.format.attrs)},[_c('font-awesome-icon',{attrs:{"icon":"link"}})],1)]),_vm._v(" "),(_vm.currentValue)?_c('b-popover',{ref:"popover",attrs:{"triggers":"focus","target":"link-popover","placement":"auto","show":_vm.visible,"container":"link-popover-container"},on:{"update:show":function($event){_vm.visible=$event;}}},[_c('b-input-group',[_c('b-form-input',{attrs:{"type":"url","autofocus":"","state":_vm.urlValid ? null : false,"placeholder":_vm.labels.urlPlaceholder},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }$event.preventDefault();$event.stopPropagation();return _vm.link.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.preventDefault();$event.stopPropagation();return _vm.close.apply(null, arguments)}]},model:{value:(_vm.attrs.href),callback:function ($$v) {_vm.$set(_vm.attrs, "href", $$v);},expression:"attrs.href"}}),_vm._v(" "),_c('b-input-group-append',[_c('b-button',{attrs:{"disabled":!_vm.urlValid,"variant":"outline-success"},on:{"click":_vm.link}},[_vm._v("\n          "+_vm._s(_vm.labels.ok)+"\n        ")])],1),_vm._v(" "),_c('b-checkbox',{staticClass:"py-1",attrs:{"value":"_blank","unchecked-value":"_self"},model:{value:(_vm.attrs.target),callback:function ($$v) {_vm.$set(_vm.attrs, "target", $$v);},expression:"attrs.target"}},[_vm._v("\n          "+_vm._s(_vm.labels.openLinkInNewTab)+"\n      ")])],1)],1):_vm._e()],1)};
 var __vue_staticRenderFns__$e = [];
 
   /* style */
@@ -78307,8 +78325,9 @@ class Link extends tiptapExtensions.Link {
   get schema() {
     const base = super.schema;
     return { ...base,
-      toDOM: node => ['a', { ...node.attrs,
+      toDOM: node => ['a', {
         target: '_blank',
+        ...node.attrs,
         rel: 'noopener noreferrer nofollow'
       }, 0]
     };
@@ -81115,6 +81134,31 @@ var __vue_staticRenderFns__$x = [];
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 var script$C = {
   props: {
     sidebarPinned: {
@@ -81131,6 +81175,10 @@ var script$C = {
       type: String,
       default: '../'
     },
+    settings: {
+      type: Object,
+      required: true
+    },
     labels: {
       type: Object,
       required: true
@@ -81150,6 +81198,35 @@ var script$C = {
       return `https://docs.cortezaproject.org/corteza-docs/${year}.${month}/index.html`;
     },
 
+    helpLinks() {
+      const {
+        helpLinks = []
+      } = this.settings || {};
+      return (helpLinks || []).filter(({
+        handle,
+        url
+      }) => handle && url);
+    },
+
+    profileLinks() {
+      const {
+        profileLinks = []
+      } = this.settings || {};
+      return (profileLinks || []).filter(({
+        handle,
+        url
+      }) => handle && url);
+    },
+
+    onlyVersion() {
+      const {
+        hideForumLink,
+        hideDocumentationLink,
+        hideFeedbackLink
+      } = this.settings || {};
+      return !this.helpLinks.length && hideForumLink && hideDocumentationLink && hideFeedbackLink;
+    },
+
     frontendVersion() {
       /* eslint-disable no-undef */
       return VERSION;
@@ -81164,17 +81241,17 @@ const __vue_script__$C = script$C;
 /* template */
 var __vue_render__$y = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"header-navigation d-flex align-items-center justify-content-between sticky-top pr-3 pl-5 "},[_c('div',{staticClass:"d-flex text-nowrap flex-grow-1 align-items-center header h-100 w-100"},[[_c('div',{staticClass:"spacer",class:{
           'expanded': _vm.sidebarPinned,
-        }})],_vm._v(" "),_c('div',{staticClass:"d-flex align-items-center ml-2 text-truncate mr-auto h-100"},[_c('h2',{staticClass:"d-none d-sm-block mb-0"},[_vm._t("title")],2)]),_vm._v(" "),_c('div',{staticClass:"ml-3"},[_vm._t("tools")],2),_vm._v(" "),(!_vm.hideAppSelector)?_c('b-button',{staticClass:"d-flex align-items-center justify-content-center text-dark border-0 nav-icon rounded-circle ml-2",attrs:{"variant":"outline-light","href":_vm.appSelectorURL,"size":"lg"}},[_c('font-awesome-icon',{staticClass:"m-0 h5",attrs:{"icon":['fas', 'grip-horizontal']}})],1):_vm._e(),_vm._v(" "),_c('b-dropdown',{staticClass:"nav-icon mx-1",attrs:{"size":"lg","variant":"outline-light","toggle-class":"text-decoration-none text-dark rounded-circle border-0 w-100","menu-class":"border-0 shadow-sm text-dark font-weight-bold mt-2","right":"","no-caret":""},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('div',{staticClass:"d-flex align-items-center justify-content-center"},[_c('font-awesome-icon',{staticClass:"m-0 h5",attrs:{"icon":['far', 'question-circle']}}),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("\n            Help\n          ")])],1)]},proxy:true}])},[_vm._v(" "),_c('div',[_vm._t("help-dropdown")],2),_vm._v(" "),_c('b-dropdown-item',{attrs:{"href":"https://forum.cortezaproject.org/","target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.helpForum)+"\n      ")]),_vm._v(" "),_c('b-dropdown-item',{attrs:{"href":_vm.documentationURL,"target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.helpDocumentation)+"\n      ")]),_vm._v(" "),_c('b-dropdown-item',{attrs:{"href":"mailto:info@crust.tech","target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.helpFeedback)+"\n      ")]),_vm._v(" "),_c('b-dropdown-divider'),_vm._v(" "),_c('b-dropdown-item',{staticClass:"small",attrs:{"disabled":""}},[_vm._v("\n        "+_vm._s(_vm.labels.helpVersion)+"\n        "),_c('br'),_vm._v("\n        "+_vm._s(_vm.frontendVersion)+"\n      ")])],1),_vm._v(" "),_c('b-dropdown',{staticClass:"nav-user-icon",attrs:{"data-v-onboarding":"profile","size":"lg","variant":"outline-light","toggle-class":"nav-icon text-decoration-none text-dark rounded-circle border","menu-class":"border-0 shadow-sm text-dark font-weight-bold mt-2","right":"","no-caret":""},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('div',{staticClass:"d-flex align-items-center justify-content-center"},[_c('font-awesome-icon',{staticClass:"m-0 h5",attrs:{"icon":['far', 'user']}}),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("\n            "+_vm._s(_vm.labels.helpForum)+"\n          ")])],1)]},proxy:true}])},[_vm._v(" "),_c('b-dropdown-text',{staticClass:"text-muted mb-2"},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsLoggedInAs)+"\n      ")]),_vm._v(" "),_c('div',[_vm._t("avatar-dropdown")],2),_vm._v(" "),_c('b-dropdown-item',{attrs:{"href":_vm.userProfileURL,"target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsProfile)+"\n      ")]),_vm._v(" "),_c('b-dropdown-item',{attrs:{"href":_vm.changePasswordURL,"target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsChangePassword)+"\n      ")]),_vm._v(" "),_c('b-dropdown-divider'),_vm._v(" "),_c('b-dropdown-item',{staticClass:"mt-2",attrs:{"href":""},on:{"click":function($event){return _vm.$auth.logout()}}},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsLogout)+"\n      ")])],1)],2)])};
+        }})],_vm._v(" "),_c('div',{staticClass:"d-flex align-items-center ml-2 text-truncate mr-auto h-100"},[_c('h2',{staticClass:"d-none d-sm-block mb-0"},[_vm._t("title")],2)]),_vm._v(" "),_c('div',{staticClass:"ml-3"},[_vm._t("tools")],2),_vm._v(" "),(!_vm.hideAppSelector && !_vm.settings.hideAppSelector)?_c('b-button',{staticClass:"d-flex align-items-center justify-content-center text-dark border-0 nav-icon rounded-circle ml-2",attrs:{"variant":"outline-light","href":_vm.appSelectorURL,"size":"lg"}},[_c('font-awesome-icon',{staticClass:"m-0 h5",attrs:{"icon":['fas', 'grip-horizontal']}})],1):_vm._e(),_vm._v(" "),(!_vm.settings.hideHelp)?_c('b-dropdown',{staticClass:"nav-icon mx-1",attrs:{"size":"lg","variant":"outline-light","toggle-class":"text-decoration-none text-dark rounded-circle border-0 w-100","menu-class":"topbar-dropdown-menu border-0 shadow-sm text-dark font-weight-bold mt-2","right":"","no-caret":""},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('div',{staticClass:"d-flex align-items-center justify-content-center"},[_c('font-awesome-icon',{staticClass:"m-0 h5",attrs:{"icon":['far', 'question-circle']}}),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("\n            Help\n          ")])],1)]},proxy:true}],null,false,3609523728)},[_vm._v(" "),_c('div',[_vm._t("help-dropdown")],2),_vm._v(" "),_vm._l((_vm.helpLinks),function(helpLink,index){return _c('b-dropdown-item',{key:index,attrs:{"href":helpLink.url,"target":helpLink.newTab ? '_blank' : ''}},[_vm._v("\n        "+_vm._s(helpLink.handle)+"\n      ")])}),_vm._v(" "),(!_vm.settings.hideForumLink)?_c('b-dropdown-item',{attrs:{"href":"https://forum.cortezaproject.org/","target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.helpForum)+"\n      ")]):_vm._e(),_vm._v(" "),(!_vm.settings.hideDocumentationLink)?_c('b-dropdown-item',{attrs:{"href":_vm.documentationURL,"target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.helpDocumentation)+"\n      ")]):_vm._e(),_vm._v(" "),(!_vm.settings.hideFeedbackLink)?_c('b-dropdown-item',{attrs:{"href":"mailto:info@crust.tech","target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.helpFeedback)+"\n      ")]):_vm._e(),_vm._v(" "),(!_vm.onlyVersion)?_c('b-dropdown-divider'):_vm._e(),_vm._v(" "),_c('b-dropdown-item',{staticClass:"small",attrs:{"disabled":""}},[_vm._v("\n        "+_vm._s(_vm.labels.helpVersion)+"\n        "),_c('br'),_vm._v("\n        "+_vm._s(_vm.frontendVersion)+"\n      ")])],2):_vm._e(),_vm._v(" "),(!_vm.settings.hideProfile)?_c('b-dropdown',{staticClass:"nav-user-icon",attrs:{"data-v-onboarding":"profile","size":"lg","variant":"outline-light","toggle-class":"nav-icon text-decoration-none text-dark rounded-circle border","menu-class":"topbar-dropdown-menu border-0 shadow-sm text-dark font-weight-bold mt-2","right":"","no-caret":""},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('div',{staticClass:"d-flex align-items-center justify-content-center"},[_c('font-awesome-icon',{staticClass:"m-0 h5",attrs:{"icon":['far', 'user']}}),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("\n            "+_vm._s(_vm.labels.helpForum)+"\n          ")])],1)]},proxy:true}],null,false,2199786693)},[_vm._v(" "),_c('b-dropdown-text',{staticClass:"text-muted mb-2"},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsLoggedInAs)+"\n      ")]),_vm._v(" "),_c('div',[_vm._t("avatar-dropdown")],2),_vm._v(" "),_vm._l((_vm.profileLinks),function(profileLink,index){return _c('b-dropdown-item',{key:index,attrs:{"href":profileLink.url,"target":profileLink.newTab ? '_blank' : ''}},[_vm._v("\n        "+_vm._s(profileLink.handle)+"\n      ")])}),_vm._v(" "),(!_vm.settings.hideProfileLink)?_c('b-dropdown-item',{attrs:{"href":_vm.userProfileURL,"target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsProfile)+"\n      ")]):_vm._e(),_vm._v(" "),(!_vm.settings.hideChangePasswordLink)?_c('b-dropdown-item',{attrs:{"href":_vm.changePasswordURL,"target":"_blank"}},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsChangePassword)+"\n      ")]):_vm._e(),_vm._v(" "),_c('b-dropdown-divider'),_vm._v(" "),_c('b-dropdown-item',{staticClass:"mt-2",attrs:{"href":""},on:{"click":function($event){return _vm.$auth.logout()}}},[_vm._v("\n        "+_vm._s(_vm.labels.userSettingsLogout)+"\n      ")])],2):_vm._e()],2)])};
 var __vue_staticRenderFns__$y = [];
 
   /* style */
   const __vue_inject_styles__$D = function (inject) {
     if (!inject) return
-    inject("data-v-d822059c_0", { source: ".icon-logo[data-v-d822059c]{height:calc(64px / 2);background-repeat:no-repeat;background-position:center}.nav-icon[data-v-d822059c]{width:40px;height:40px}.nav-user-icon[data-v-d822059c]{width:50px;height:50px}.header-navigation[data-v-d822059c]{width:100vw;height:64px;background-color:#f3f3f5!important}.header-navigation h2[data-v-d822059c]{padding-left:calc(.5rem + 2px)}.spacer[data-v-d822059c]{min-width:0;-webkit-transition:min-width .15s ease-in-out;-moz-transition:min-width .15s ease-in-out;-o-transition:min-width .15s ease-in-out;transition:min-width .15s ease-in-out}.spacer.expanded[data-v-d822059c]{min-width:calc(320px - 42px);-webkit-transition:min-width .2s ease-in-out;-moz-transition:min-width .2s ease-in-out;-o-transition:min-width .2s ease-in-out;transition:min-width .2s ease-in-out}", map: undefined, media: undefined });
+    inject("data-v-39d2e772_0", { source: ".icon-logo[data-v-39d2e772]{height:calc(64px / 2);background-repeat:no-repeat;background-position:center}.nav-icon[data-v-39d2e772]{width:40px;height:40px}.nav-user-icon[data-v-39d2e772]{width:50px;height:50px}.header-navigation[data-v-39d2e772]{width:100vw;height:64px;background-color:#f3f3f5!important}.header-navigation h2[data-v-39d2e772]{padding-left:calc(.5rem + 2px)}.topbar-dropdown-menu[data-v-39d2e772]{max-height:80vh;overflow-y:auto}.spacer[data-v-39d2e772]{min-width:0;-webkit-transition:min-width .15s ease-in-out;-moz-transition:min-width .15s ease-in-out;-o-transition:min-width .15s ease-in-out;transition:min-width .15s ease-in-out}.spacer.expanded[data-v-39d2e772]{min-width:calc(320px - 42px);-webkit-transition:min-width .2s ease-in-out;-moz-transition:min-width .2s ease-in-out;-o-transition:min-width .2s ease-in-out;transition:min-width .2s ease-in-out}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$D = "data-v-d822059c";
+  const __vue_scope_id__$D = "data-v-39d2e772";
   /* module identifier */
   const __vue_module_identifier__$D = undefined;
   /* functional template */
@@ -82612,28 +82689,18 @@ var script$P = {
      * Update parent component (if needed)
      * @param v
      */
-    selected(items) {
-      const value = items.map(i => i[this.valueField]);
-      /**
-       * Make sure we do not fall into an infinite loop
-       *
-       * If we emit update/input event, parent will update value/v-modal
-       * and watcher function for value will trigger the sync and recreate
-       * the selected array and trigger this watcher!
-       */
+    selected: {
+      immediate: false,
 
-      if (value.length === this.value.length) {
-        if (value.filter(v => !this.value.includes(v)).length === 0) {
-          return;
-        }
-      } // satisfy value.sync
+      handler(items) {
+        const value = items.map(i => i[this.valueField]); // satisfy value.sync
 
+        this.$emit('update:value', value); // satisfy v-model
 
-      this.$emit('update:value', value); // satisfy v-model
+        this.$emit('input', value);
+      }
 
-      this.$emit('input', value);
     },
-
     options: {
       deep: true,
       immediate: true,
@@ -82643,11 +82710,26 @@ var script$P = {
       }
 
     },
+    value: {
+      immediate: false,
 
-    value(vv) {
-      this.sync();
-    }
+      handler(value = [], oldValue = []) {
+        /**
+        * Make sure we do not fall into an infinite loop
+        * 
+        * If we update the value thenn sync will trigger recomputation of selected
+        * Which then emits the update event and the loop will begin
+        */
+        if (value.length === oldValue.length) {
+          if (value.filter(v => !oldValue.includes(v)).length === 0) {
+            return;
+          }
+        }
 
+        this.sync();
+      }
+
+    }
   },
 
   created() {
@@ -82722,10 +82804,12 @@ var script$P = {
       this.available = this.frozen().filter(opt => !this.isPicked(opt));
       /**
        * filter all unpicked options, freeze each item in the array and
-       * build list of selected items
+       * build list of selected items, traverse value to keep order
        */
 
-      this.selected = this.frozen().filter(opt => this.isPicked(opt));
+      this.selected = this.value.map(v => {
+        return this.frozen().find(item => item[this.valueField] === v);
+      }).filter(f => f);
     },
 
     frozen() {
@@ -83427,18 +83511,18 @@ var __vue_render__$N = function () {var _vm=this;var _h=_vm.$createElement;var _
                 }),attrs:{"icon":['fas', 'angle-up']}}),_vm._v(" "),_c('font-awesome-icon',{staticClass:"mt-1",style:({
                   color: _vm.sort.field === c.meta.sortKey && _vm.sort.descending ? 'black' : 'grey',
                 }),attrs:{"icon":['fas', 'angle-down']}})],1):_vm._e()],1)])}),1)],1),_vm._v(" "),_c('b-tbody',{staticClass:"h-100"},_vm._l((_vm.tabelify.rows),function(r,i){return _c('b-tr',{key:i,class:{
-          separator: !!r[0].separator,
+          separator: !!(r[0] || {}).separator,
         }},_vm._l((r),function(c,j){return _c('b-td',_vm._b({key:j},'b-td',c.attrs || {},false),[_vm._v("\n          "+_vm._s(c.value)+"\n        ")])}),1)}),1)],2),_vm._v(" "),_c('b-card-footer',{staticClass:"d-flex p-1 rounded-0"},[_c('b-button-group',{staticClass:"ml-auto"},[_c('b-button',{staticClass:"d-flex align-items-center text-dark px-1",attrs:{"disabled":!_vm.hasPrevPage,"variant":"link"},on:{"click":function($event){return _vm.goToPage()}}},[_c('font-awesome-icon',{attrs:{"icon":['fas', 'angle-double-left']}})],1),_vm._v(" "),_c('b-button',{staticClass:"d-flex align-items-center text-dark",attrs:{"disabled":!_vm.hasPrevPage,"variant":"link"},on:{"click":function($event){return _vm.goToPage('prevPage')}}},[_c('font-awesome-icon',{staticClass:"mr-1",attrs:{"icon":['fas', 'angle-left']}}),_vm._v("\n        "+_vm._s(_vm.labels.previous)+"\n      ")],1),_vm._v(" "),_c('b-button',{staticClass:"d-flex align-items-center text-dark",attrs:{"disabled":!_vm.hasNextPage,"variant":"link"},on:{"click":function($event){return _vm.goToPage('nextPage')}}},[_vm._v("\n        "+_vm._s(_vm.labels.next)+"\n        "),_c('font-awesome-icon',{staticClass:"ml-1",attrs:{"icon":['fas', 'angle-right']}})],1)],1)],1)],1)};
 var __vue_staticRenderFns__$N = [];
 
   /* style */
   const __vue_inject_styles__$U = function (inject) {
     if (!inject) return
-    inject("data-v-52bf61e6_0", { source: ".foreign[data-v-52bf61e6]{border:1px solid rgba(22,36,37,.8);border-top:0;border-bottom:0}.separator[data-v-52bf61e6]{border-top:2px solid rgba(22,36,37,.5)}.card-rounded[data-v-52bf61e6]{border-radius:1rem 1rem 0 0}", map: undefined, media: undefined });
+    inject("data-v-b515bfce_0", { source: ".foreign[data-v-b515bfce]{border:1px solid rgba(22,36,37,.8);border-top:0;border-bottom:0}.separator[data-v-b515bfce]{border-top:2px solid rgba(22,36,37,.5)}.card-rounded[data-v-b515bfce]{border-radius:1rem 1rem 0 0}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$U = "data-v-52bf61e6";
+  const __vue_scope_id__$U = "data-v-b515bfce";
   /* module identifier */
   const __vue_module_identifier__$U = undefined;
   /* functional template */