@kalisio/kdk 2.5.3 → 2.6.0

package/core/client/composables/session.js

@@ -5,13 +5,14 @@ import { useQuasar, Loading } from 'quasar'
 import { api } from '../api.js'
 import { i18n } from '../i18n.js'
 import { Events } from '../events.js'
-import { Store } from '../store.js'
 import { beforeGuard } from '../guards.js'
 import { LocalStorage } from '../local-storage.js'
 import { restoreSession } from '../utils/utils.session.js'
+import { useUser } from './user.js'
 
 export function useSession (options = {}) {
   // Data
+  const { User } = useUser()
   const disconnectKey = 'disconnect-dialog'
   const reconnectKey = 'reconnect-dialog'
   const router = useRouter()
@@ -23,8 +24,6 @@ export function useSession (options = {}) {
   let pendingReload = null
   let ignoreReconnectionError = false
 
-  const User = Store.getRef('user')
-
   // Functions
   function getRedirectKey () {
     return 'redirect'
@@ -64,7 +63,7 @@ export function useSession (options = {}) {
     // The first time initialize guards after the app has been correctly setup,
     // ie either with or without a restored user and a redirection
     if (!isInitialized.value) {
-      router.beforeEach(beforeGuard)
+      if (router) router.beforeEach(beforeGuard)
       isInitialized.value = true
     }
   }
@@ -174,12 +173,13 @@ export function useSession (options = {}) {
     }
     // Then redirection
     Events.on('user-abilities-changed', redirect)
-    api.on('logout', () => {
+    api.on('logout', async () => {
       // Used to automatically redirect when the user has requested a logout from another client
       // We don't use redirect() here as in this case the user is already logout and it would redirect to login instead
-      router.push({ name: 'logout' })
+      if (typeof options.logout === 'function') result = await options.logout()
+      else if (typeof options.logout === 'string') router.push({ name: options.logout })
+      else router.push({ name: 'logout' })
     })
-
     try {
       await restoreSession()
     } catch (error) {
@@ -198,7 +198,6 @@ export function useSession (options = {}) {
 
   // Expose
   return {
-    User,
     redirect,
     isInitialized,
     onReconnectError,

package/core/client/composables/user.js

@@ -0,0 +1,36 @@
+import _ from 'lodash'
+import { computed } from 'vue'
+import { Store } from '../store.js'
+
+const User = Store.getRef('user')
+
+export function useUser () {
+  
+  // computed
+  const name = computed(() => {
+    return _.get(User.value, 'profile.name', _.get(User.value, 'profile.username', _.get(User.value, 'email', '')))
+  })
+  const description = computed(() => {
+    return _.get(User.value, 'profile.description', '')
+  })
+  const avatar = computed(() => {
+    return _.get(User.value, 'profile', {})
+  })
+  const permissions = computed(() => {
+    return _.get(User.value, 'permissions')
+  })
+  const role = computed(() => {
+    if (_.isEmpty(permissions.value)) return
+    if (_.isString(permissions.value)) return permissions.value
+    return permissions.value[0]
+  })
+
+  // Expose
+  return {
+    User,
+    name,
+    avatar,
+    description,
+    role
+  }
+}

package/core/client/directives/index.js

@@ -1 +1,2 @@
+export * from './v-drop-file.js'
 export * from './v-hover.js'

package/core/client/directives/v-drop-file.js

@@ -0,0 +1,174 @@
+import _ from 'lodash'
+import logger from 'loglevel'
+import { colors, Notify } from 'quasar'
+import { Reader } from '../reader.js'
+import { i18n } from '../i18n.js'
+import { formatSize } from '../utils/utils.files.js'
+
+export const vDropFile = {
+
+  mounted (el, binding) {
+    el.__state = {
+      dropCallback: _.get(binding.value, 'dropCallback'),
+      acceptedTypes:  _.get(binding.value, 'mimeTypes'),
+      maxFiles:  _.get(binding.value, 'maxFiles'),
+      maxFileSize:  _.get(binding.value, 'maxFileSize'),
+      maxTotalSize:  _.get(binding.value, 'maxTotalSize'),
+      fontSize: _.get(binding.value, 'fontSize', '2rem'),
+      enabled: _.get(binding.value, 'enabled', true)
+    }
+    // check whether the dropCallback has been set properly
+    if (!el.__state.dropCallback || typeof el.__state.dropCallback !== 'function') {
+      logger.error(`[KDK] Missing 'dropCallback' argument in 'v-drop-file' directive`)
+      return
+    }
+    // make element relative
+    el.style.position = 'relative'
+    // create overlay element
+    const overlay = document.createElement('div');
+    overlay.className = 'drag-overlay'
+    overlay.innerHTML = `<div class="drag-overlay-box" />`
+    el.appendChild(overlay)
+    const style = document.createElement('style')
+    style.textContent = `
+      .drag-overlay {
+        display: none;
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        justify-content: center;
+        align-items: center;
+        font-size: ${el.__state.fontSize};
+        z-index: 9999;
+        pointer-events: none;
+      }
+      .drag-overlay-box {
+        display: flex;
+        border: 3px dashed;
+        width: 95%; height: 95%;
+        border-radius: 5px;
+        justify-content: center;
+        align-items: center;
+        pointer-events: none;
+      }
+    `
+    document.head.appendChild(style)
+    const showOverlay = () => overlay.style.display = 'flex'
+    const hideOverlay = () => overlay.style.display = 'none'
+    let dragCounter = 0
+    let canDrop = false
+
+    const onDragEnter = (e) => {
+      // check whether the directive is enabled
+      if (!el.__state.enabled) return
+      e.preventDefault()
+      // check the dragged items
+      const items = e.dataTransfer.items
+      let rejectedItems = []
+      let acceptedItems = []
+      let color, message
+      if (el.__state.maxFiles && _.size(items) > el.__state.maxFiles) {
+        color = colors.getPaletteColor('negative')
+        message = i18n.tc('errors.MAX_FILES_REACHED', el.__state.maxFiles)
+      } else {
+        for (const item of items) {
+          if (item.kind === 'file' && _.includes(el.__state.acceptedTypes, item.type)) acceptedItems.push(item)
+          else rejectedItems.push(item)
+        }  
+        if (_.isEmpty(acceptedItems)) {
+          color = colors.getPaletteColor('negative')
+          message = i18n.tc('directives.ALL_FILES_ARE_UNSUPPORTED', rejectedItems.length)
+        }
+        else if (_.isEmpty(rejectedItems)) {
+          color = colors.getPaletteColor('positive')
+          message = i18n.tc('directives.DROP_FILES', acceptedItems.length)
+        }
+        else {
+          color = colors.getPaletteColor('warning')
+          message = i18n.t('directives.SOME_FILES_ARE_UNSUPPORTED')
+        }
+      }
+      canDrop = _.size(acceptedItems) > 0
+      // customize the overlay
+      overlay.style.background = '#0007'
+      const overlayBox = overlay.querySelector('.drag-overlay-box')
+      overlayBox.textContent = message
+      overlayBox.style.borderColor = color
+      overlayBox.style.color = 'white'
+      overlayBox.style.textShadow = '-2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black'
+      overlayBox.style.padding = '20px;'
+      // show the overlay
+      dragCounter++
+      showOverlay()
+    }
+    const onDragOver = (e) => {
+      e.preventDefault()
+    }
+    const onDragLeave = (e) => {
+      e.preventDefault()
+      dragCounter--
+      if (dragCounter === 0) hideOverlay()
+    }
+    const onDrop = async (e) => {
+      e.preventDefault()
+      dragCounter = 0
+      hideOverlay()
+      if (!canDrop) return
+      const files = Array.from(e.dataTransfer.files)
+      const acceptedFiles = Reader.filter(files)    
+      if (el.__state.maxTotalSize && _.size(acceptedFiles) > 1) {
+        let totalSize = _.reduce(acceptedFiles, (size, file) => {
+          size += file.files[0].size
+          return size
+        }, 0)
+        if (totalSize > el.__state.maxTotalSize) {
+          Notify.create({ type: 'negative', message: i18n.t('errors.MAX_TOTAL_SIZE_FILES_REACHED', { maxSize: formatSize(el.__state.maxTotalSize) }) })
+          return
+        }
+      }
+      for (const file of acceptedFiles) {
+        if (el.__state.maxFileSize) {
+          let size = file.files[0].size
+          if (size > el.__state.maxFileSize) {
+            Notify.create({ type: 'negative', message: i18n.t('errors.MAX_FILE_SIZE_REACHED', { file: file.name, maxSize: formatSize(el.__state.maxFileSize) }) })
+            continue
+          }
+        }
+        const content = await Reader.read(file)
+        await el.__state.dropCallback(content)
+      }
+    }
+      
+    el.__handlers = { onDragEnter, onDragOver, onDragLeave, onDrop }
+    el.addEventListener('dragenter', onDragEnter)
+    el.addEventListener('dragover', onDragOver)
+    el.addEventListener('dragleave', onDragLeave)
+    el.addEventListener('drop', onDrop)
+  },
+
+  updated (el, binding) {
+    // Handle arguments changes
+    if (binding.value !== binding.oldValue) {
+      el.__state = {
+        dropCallback: _.get(binding.value, 'dropCallback'),
+        acceptedTypes:  _.get(binding.value, 'mimeTypes'),
+        maxFiles:  _.get(binding.value, 'maxFiles'),
+        maxFileSize:  _.get(binding.value, 'maxFileSize'),
+        maxTotalSize:  _.get(binding.value, 'maxTotalSize'),        
+        fontSize: _.get(binding.value, 'fontSize', '2rem'),
+        enabled: _.get(binding.value, 'enabled', true)
+      }
+    }
+  },
+
+  beforeUnmount (el, binding) {
+    // Clean directive
+    const { onDragEnter, onDragOver, onDragLeave, onDrop } = el.__handlers
+    el.removeEventListener('dragenter', onDragEnter)
+    el.removeEventListener('dragover', onDragOver)
+    el.removeEventListener('dragleave', onDragLeave)
+    el.removeEventListener('drop', onDrop)
+    delete el.__handlers
+    delete el.__state
+  }
+}

package/core/client/document.js

@@ -46,7 +46,8 @@ export const Document = {
       },
       htmlSanitizer: {
         allowedTags: sanitize.defaults.allowedTags.concat(['img', 'strike']),
-        allowedAttributes: _.assign(sanitize.defaults.allowedAttributes, { div: ['style'] })
+        allowedAttributes: _.assign(sanitize.defaults.allowedAttributes, { div: ['style'] }),
+        allowedSchemesByTag: { img: ['http', 'https', 'ftp', 'data'] }
       },
       mdConverter: {}
     })

package/core/client/exporter.js

@@ -14,7 +14,7 @@ const ExporterQueue = {
     this.exportService = api.getService('import-export')
     this.exportService.on('export-created', params => this.onRequestCreated(params))
     this.exportService.on('export-completed', params => this.onRequestCompleted(params))
-    logger.debug(`[KDK] Exported initialized with '${maxConcurrentRequests}' maxConcurrentRequests`)
+    logger.debug(`[KDK] Initialized 'Exporter' with '${maxConcurrentRequests}' maxConcurrentRequests`)
   },
   push (request) {
     this.pendingRequests.push(request)
@@ -30,7 +30,6 @@ const ExporterQueue = {
       if (!filename) {
         const timestamp = moment().toISOString().replace(/:/g, '-')
         filename = `${_.get(request, 'basename', request.service)}_${timestamp}.${request.format}`
-        if (_.get(request, 'gzip', true)) filename += '.gz'
       }
       // retrieve the target service path
       let servicePath = api.getServicePath(request.service)
@@ -86,7 +85,22 @@ const ExporterQueue = {
         document.body.appendChild(iframe)
       }
       iframe.src = params.SignedUrl
-    } else Events.emit('error', { message: i18n.t('errors.' + params.status) })
+      Notify.create({
+        type: 'positive',
+        message: i18n.t('exporter.SUCCEEDED', { filename: params.filename }),
+        html: true
+      })
+    } else if (params.chunks === 0) {
+      Notify.create({
+        type: 'warning',
+        message: i18n.t('exporter.NO_DATA')
+      })
+    } else {
+      Notify.create({
+        type: 'negative',
+        message: i18n.t('exporter.ERRORED')
+      })
+    }
     // trigger a new request
     this.triggerRequest()
   }

package/core/client/i18n/core_en.json

@@ -79,12 +79,14 @@
     "OAUTH2_PROVIDER": "You cannot update your account because it is managed by {provider}, in order to switch to a local account reset your password first",
     "EMAIL_ALREADY_TAKEN": "A user with this email address seems to be already registered",
     "OBJECT_ID_ALREADY_TAKEN": "An item with this identifier seems to already exist. Please try again with another value.",
-    "DUPLICATED_FILE": "The file {file} is already added",
-    "UNSUPPORTED_FILE_FORMAT": "The {file} file format is not supported",
-    "CANNOT_READ_FILE": "Unable to read the file {file}",
-    "INVALID_JSON_FILE": "{file} is not a valid JSON file",
-    "INVALID_CSV_FILE": "{file} is not a valid CSV file",
-    "NETWORK_ERROR": "Network or service error occurred"
+    "MAX_FILES_REACHED": "Oops ! You can only drop one file | Oops! You can only drop up to {n} files at once",
+    "MAX_FILE_SIZE_REACHED": "Oops ! The file exceeds the maximum allowed size of {maxSize}",
+    "MAX_TOTAL_SIZE_FILES_REACHED": "Oops ! The total size files exceeds the maximum allowed total limit of {maxSize}",
+    "UNSUPPORTED_FILE_FORMAT": "Oops ! The {file} file format is not supported",
+    "CANNOT_READ_FILE": "Oops ! Unable to read the file {file}",
+    "INVALID_JSON_FILE": "Oops ! {file} is not a valid JSON file",
+    "INVALID_CSV_FILE": "Oops ! {file} is not a valid CSV file",
+    "NETWORK_ERROR": "Oops ! Network or service error occurred"
   },
   "units": {
     "METER_SYMBOL": "m",
@@ -158,6 +160,11 @@
     "MICROSIEVERT_PER_HOUR_LABEL": "Microsieverts per hour",
     "NANOSIEVERT_PER_HOUR_LABEL": "Nanosieverts per hour"
   },
+  "directives": {
+    "ALL_FILES_ARE_UNSUPPORTED": "Oops ! File is not supported | Oops ! None of the files are supported",
+    "SOME_FILES_ARE_UNSUPPORTED": "Some files will be ignored due to unsupported types",
+    "DROP_FILES": "Drop file here | Drop files here"
+  },
   "mixins": {
     "baseItem": {
       "REMOVE_ITEM_TITLE": "Are you sure you want to delete <b>{name}</b> ?",
@@ -187,6 +194,11 @@
     }
   },
   "utils": {
+    "files": {
+      "B": "B",
+      "KB": "KB",
+      "MB": "MB"
+    },
     "pwa": {
       "INSTALL_TITLE": "Install the application ?",
       "INSTALL_MESSAGE": "We recommend to install the application to take full advantage of all the features",
@@ -290,7 +302,10 @@
     "MESSAGE": "Select the file format to export",
     "EXPORT": "Export",
     "EXPORTING": "Please wait while exporting data",
-    "EXPORTS_LIMIT_REACHED": "You have reached the maximum number of exports allowed"
+    "EXPORTS_LIMIT_REACHED": "You have reached the maximum number of exports allowed",
+    "SUCCEEDED": "Export successful: your data has been saved to the file <b>{filename}</b>",
+    "NO_DATA": "Export skipped: no data found to export",
+    "ERRORED": "Oops! Export failed: an error occurred while exporting data"
   },
   "reader": {
     "READING_FILE": "Reading file {file}"
@@ -746,5 +761,17 @@
     "FILE_TOO_LARGE": "File {file} is too large. The size must be less than {size}Mb",
     "UPLOAD_FILE_SUCCEEDED": "File {file} has been successfully uploaded",
     "UPLOAD_FILE_ERRORED": "Cannot upload file {file} !"
+  },
+  "KTagManager": {
+    "TITLE": "Tags",
+    "CREATE_TAG": "Create a tag",
+    "EDIT_TAG": "Edit tag",
+    "DELETE_TAG": "Delete tag",
+    "SORT_TAGS": "Sort tags",
+    "CREATE_TAG_ON_THE_FLY": "Create tag",
+    "TAG_NAME": "Enter the name",
+    "TAG_SERVICE": "Tag type",
+    "TAG_DESCRIPTION": "Enter a description",
+    "TAG_COLOR": "Select a color"
   }
 }

package/core/client/i18n/core_fr.json

@@ -79,12 +79,14 @@
     "OAUTH2_PROVIDER": "Vous ne pouvez modifier votre compte car il est géré par {provider}, pour utiliser un compte local réinitialisez tout d'abord votre mot de passe",
     "EMAIL_ALREADY_TAKEN": "Un utilisateur semble déjà enregistré avec cette adresse mail",
     "OBJECT_ID_ALREADY_TAKEN": "Un élément semble déjà enregistré avec cet identifiant. Merci de réessayer avec une autre valeur.",
-    "DUPLICATED_FILE": "Le fichier {file} a déjà été ajouté",
-    "UNSUPPORTED_FILE_FORMAT": "Le format du fichier {file} n'est pas supporté",
-    "CANNOT_READ_FILE": "Impossible de lire le fichier {file}",
-    "INVALID_JSON_FILE": "{file} n'est pas un fichier JSON valide",
-    "INVALID_CSV_FILE": "{file} n'est pas un fichier CSV valide",
-    "NETWORK_ERROR": "Une erreur réseau s'est produite ou le service est indisponible"
+    "MAX_FILES_REACHED": "Oups ! Vous ne pouvez déposer qu'un seul fichier | Oups ! Vous ne pouvez déposer que jusqu’à {n} fichiers à la fois",
+    "MAX_FILE_SIZE_REACHED": "Oups ! Le fichier {file} dépasse la taille maximale autorisée de {maxSize}",
+    "MAX_TOTAL_SIZE_FILES_REACHED": "Oups ! La taille totale de tous les fichiers dépasse la limite maximale autorisée de {maxSize}",    
+    "UNSUPPORTED_FILE_FORMAT": "Oups ! Le format du fichier {file} n'est pas supporté",
+    "CANNOT_READ_FILE": "Oups ! Impossible de lire le fichier {file}",
+    "INVALID_JSON_FILE": "Oups ! {file} n'est pas un fichier JSON valide",
+    "INVALID_CSV_FILE": "Oups ! {file} n'est pas un fichier CSV valide",
+    "NETWORK_ERROR": "Oups ! Une erreur réseau s'est produite ou le service est indisponible"
   },
   "units": {
     "METER_SYMBOL": "m",
@@ -158,9 +160,14 @@
     "MICROSIEVERT_PER_HOUR_LABEL": "Microsieverts par heure",
     "NANOSIEVERT_PER_HOUR_LABEL": "Nanosieverts par heure"
   },
+  "directives": {
+    "ALL_FILES_ARE_UNSUPPORTED": "Oups ! Fichier non pris en charge | Oups ! Aucun des fichiers n'est pris en charge",
+    "SOME_FILES_ARE_UNSUPPORTED": "Certains fichiers seront ignorés en raison de types non pris en charge",
+    "DROP_FILES": "Déposez le fichier ici | Déposez les fichiers ici"
+  },
   "mixins": {
     "baseItem": {
-      "REMOVE_ITEM_TITLE": "Etes vous sûr de vouloir supprimer <b>{name}</b> ?",
+      "REMOVE_ITEM_TITLE": "Êtes vous sûr de vouloir supprimer <b>{name}</b> ?",
       "REMOVE_ITEM_MESSAGE": "Merci de saisir le nom pour confirmer la suppression",
       "ITEM_EXPORTED": "Export du contenu de {name} dans {file}",
       "CANNOT_EXPORT_ITEM": "Impossible d'exporter {name}. Votre navigateur supporte t'il la fonctionnalité ?"
@@ -187,6 +194,11 @@
     }
   },
   "utils": {
+    "files": {
+      "B": "o",
+      "KB": "Ko",
+      "MB": "Mo"
+    },
     "pwa": {
       "INSTALL_TITLE": "Installer l'application ?",
       "INSTALL_MESSAGE": "Nous vous recommandons d'installer l'application pour profiter pleinement de toutes les fonctionnalités",
@@ -287,10 +299,13 @@
   },
   "exporter": {
     "TITLE": "Exporter les données",
-    "MESSAGE": "Séléctionner le format de fichier à exporter",
+    "MESSAGE": "Sélectionnez le format de fichier à exporter",
     "EXPORT": "Exporter",
     "EXPORTING": "Merci de patienter pendant l'export des données",
-    "EXPORTS_LIMIT_REACHED": "Vous avez atteint le nombre maximum d'exports autorisés"
+    "EXPORTS_LIMIT_REACHED": "Vous avez atteint le nombre maximum d'exports autorisés",
+    "SUCCEEDED": "Exportation terminée : les données ont été exportées dans le fichier <b>{filename}</b>",
+    "NO_DATA": "Exportation annulée : aucune donnée trouvée à exporter",
+    "ERROR": "Oops ! Échec de l’exportation : une erreur est survenue durant l'export des données"
   },
   "reader": {
     "READING_FILE": "Lecture de {file} en cours"
@@ -746,5 +761,17 @@
     "FILE_TOO_LARGE": "Le fichier {file} est trop volumineux. La taille doit être inférieure à {size}Mo",
     "UPLOAD_FILE_SUCCEEDED": "Le fichier {file} a été transféré avec succès",
     "UPLOAD_FILE_ERRORED": "Impossible de transférer le fichier {file} !"
+  },
+  "KTagManager": {
+    "TITLE": "Étiquettes",
+    "CREATE_TAG": "Créer une étiquette",
+    "EDIT_TAG": "Modifier l'étiquette",
+    "DELETE_TAG": "Supprimer l'étiquette",
+    "SORT_TAGS": "Trier les étiquettes",
+    "CREATE_TAG_ON_THE_FLY": "Créer l'étiquette",
+    "TAG_NAME": "Saisissez le nom",
+    "TAG_SERVICE": "Type de tag",
+    "TAG_DESCRIPTION": "Saisissez une description",
+    "TAG_COLOR": "Sélectionnez la couleur"
   }
 }

package/core/client/i18n.js

@@ -2,10 +2,10 @@ import _ from 'lodash'
 import logger from 'loglevel'
 import { Quasar } from 'quasar'
 import { createI18n } from 'vue-i18n'
-import { getAppLocale, getAppFallbackLocale } from './utils/utils.locale.js'
+import { getLocale, getFallbackLocale } from './utils/utils.locale.js'
 
 // Helper function to load a translation file
-// @i18n alias shoud be added in the quasar.config build section
+// @i18n alias should be added in the quasar.config build section
 async function loadTranslationBundles (bundles, locale, fallbackLocale) {
   const translations = {}
   translations[locale] = {}
@@ -27,19 +27,31 @@ async function loadTranslationBundles (bundles, locale, fallbackLocale) {
   return translations
 }
 
-export const i18n = {
-  async initialize (app, bundles) {
-    // Define the locale to be used
-    const fallbackLocale = getAppFallbackLocale()
-    const locale = getAppLocale()
-    // Install Quasar langage pack
+// Helper function to install a Quasar language pack
+// It first tries to install the language pack for the full locale (e.g. en-US) and, if unavailable,
+// falls back to the 2-letter language code (e.g. en)
+async function installQuasarLanguage (fullLocale, locale) {
+  let languagePack
+  try {
+    languagePack = await import(`quasar/lang/${fullLocale}.js`)
+  } catch (error) {
     try {
-      const langagePack = await import(`quasar/lang/${locale}.js`)
-      if (langagePack) Quasar.lang.set(langagePack.default)
+      if (locale !== fullLocale) languagePack = await import(`quasar/lang/${locale}.js`)
+      else logger.error(`[KDK]  Could not load Quasar lang for locale: ${fullLocale}`)
     } catch (error) {
-      logger.error(error)
+      logger.error(`[KDK] Could not load Quasar lang for locale: ${fullLocale}`)
     }
+  }
+  if (!languagePack) return false
+  Quasar.lang.set(languagePack.default)
+  return true
+}
+
+export const i18n = {
+  async initialize (app, bundles) {
     // Create i18n instance using the translation bundles
+    const fallbackLocale = getFallbackLocale()
+    const locale = getLocale()
     this.i18n = createI18n({
       locale,
       fallbackLocale,
@@ -47,6 +59,9 @@ export const i18n = {
       silentFallbackWarn: true
     })
     app.use(this.i18n)
+    // Install Quasar langage pack
+    const languagePackInstalled = await installQuasarLanguage(getLocale(false), locale)
+    if (!languagePackInstalled) await installQuasarLanguage(getFallbackLocale(false), fallbackLocale)
   },
   registerTranslation (translation) {
     if (!this.i18n) {

package/core/client/layout.js

@@ -16,8 +16,8 @@ export const DefaultZIndex = {
 const layoutPath = 'layout'
 const contentDefaults = { content: undefined, filter: {}, mode: undefined, visible: false }
 const paneDefaults = { opener: false, size: [0, 0], zIndex: DefaultZIndex.panes }
-const windowsDefaultControls = { menu: true, pin: true, unpin: true, maximize: true, restore: true, close: true, resize: true }
-const windowDefaults = { state: undefined, position: undefined, size: undefined, current: undefined, controls: windowsDefaultControls, controlsMenuBreakpoint: 'xs', zIndex: 980 }
+const windowDefaultControls = { menu: true, pin: true, unpin: true, maximize: true, restore: true, close: true, resize: true }
+const windowDefaults = { state: undefined, position: undefined, size: undefined, current: undefined, controls: windowDefaultControls, controlsMenuBreakpoint: 'xs', zIndex: 980 }
 const hWindowDefaultSizePolicy = {
   minSize: [300, 200],
   floating: { position: [0, 0], size: [300, 200] },
@@ -391,8 +391,8 @@ export const Layout = {
     return this.getElement(`windows.${placement}`)
   },
   setWindow (placement, options, context) {
-    // Take care to not bind widget headers here as they will be when creating widgets
-    this.setElement(`windows.${placement}`, options, context, ['header'])
+    // Take care to not bind widget header/fab here as they will be when creating widgets
+    this.setElement(`windows.${placement}`, options, context, ['header', 'fab'])
   },
   setWindowMode (placement, mode) {
     this.setElementMode(`windows.${placement}`, mode)
@@ -404,7 +404,7 @@ export const Layout = {
     this.setElementVisible(`windows.${placement}`, visible)
   },
   setWindowControls (placement, controls) {
-    for (const key of _.keys(windowsDefaultControls)) {
+    for (const key of _.keys(windowDefaultControls)) {
       if (!_.has(controls, key)) {
         logger.warn(`[KDK] Invalid window control key ${key}`)
         return

package/core/client/mixins/mixin.base-activity.js

@@ -1,11 +1,14 @@
 import _ from 'lodash'
+import config from 'config'
 import { Layout } from '../layout.js'
+import { Store } from '../store.js'
+import { Events } from '../events.js'
 
 export function baseActivity (name) {
   return {
     methods: {
       getAppName () {
-        return this.$config('appName')
+        return config.appName
       },
       configurePadding () {
         if (_.has(this.activityOptions, 'padding')) Layout.setPadding(_.get(this.activityOptions, 'padding'))
@@ -246,23 +249,23 @@ export function baseActivity (name) {
           }
           name = tourName
         }
-        this.$store.patch('tours.current', { name })
+        Store.patch('tours.current', { name })
       }
     },
     beforeCreate () {
       // Identify this activity using its name or the route name
       this.activityName = name || _.camelCase(this.$options.name)
       // Setup the options
-      this.activityOptions = this.$config(this.activityName)
+      this.activityOptions = config[this.activityName]
     },
     mounted () {
       // Configure the activity
       this.configureActivity()
       // Whenever the user abilities are updated, update activity as well
-      this.$events.on('user-abilities-changed', this.configureActivity)
+      Events.on('user-abilities-changed', this.configureActivity)
     },
     beforeUnmount () {
-      this.$events.off('user-abilities-changed', this.configureActivity)
+      Events.off('user-abilities-changed', this.configureActivity)
       // Clear the activity
       this.clearActivity()
     }

package/core/client/mixins/mixin.base-editor.js

@@ -1,5 +1,6 @@
 import logger from 'loglevel'
 import _ from 'lodash'
+import { i18n } from '../i18n.js'
 
 export const baseEditor = {
   emits: ['applied'],
@@ -43,7 +44,7 @@ export const baseEditor = {
       if (this.getSchema()) {
         const schemaTitle = this.getSchema().title
         const objectName = _.get(this.getObject(), 'name')
-        return this.$tie(schemaTitle, { name: objectName, interpolation: { escapeValue: false } })
+        return i18n.tie(schemaTitle, { name: objectName, interpolation: { escapeValue: false } })
       }
       return ''
     },