@kalisio/kdk 2.2.2 → 2.3.0

package/core/client/components/form/KSelectField.vue

@@ -87,7 +87,7 @@ export default {
     options () {
       let opts = _.map(_.get(this.properties, 'field.options', []), option => {
         const label = this.$tie(_.get(option, 'label', ''))
-        return Object.assign({}, option, { label: label })
+        return Object.assign({}, option, { label })
       })
       if (this.filter) {
         opts = _.filter(opts, option => {

package/core/client/components/index.js

@@ -1,6 +1,4 @@
-import KAction from './KAction.vue'
 import KAvatar from './KAvatar.vue'
-import KBlock from './KBlock.vue'
 import KChip from './KChip.vue'
 import KChipsPane from './KChipsPane.vue'
 import KContent from './KContent.vue'
@@ -16,9 +14,7 @@ import KTextArea from './KTextArea.vue'
 import KVersion from './KVersion.vue'
 
 export {
-  KAction,
   KAvatar,
-  KBlock,
   KChip,
   KChipsPane,
   KContent,
@@ -34,6 +30,7 @@ export {
   KVersion
 }
 
+export * from './action/index.js'
 export * from './layout/index.js'
 export * from './form/index.js'
 export * from './collection/index.js'

package/core/client/components/input/KOptionsChooser.vue

@@ -31,7 +31,7 @@
 <script>
 import _ from 'lodash'
 import { uid } from 'quasar'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 
 export default {
   name: 'k-option-chooser',

package/core/client/components/layout/KFab.vue

@@ -53,7 +53,7 @@ import _ from 'lodash'
 import { ref, computed } from 'vue'
 import { uid } from 'quasar'
 import { Layout } from '../../layout'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 
 // Props
 defineProps({

package/core/client/components/layout/KPage.vue

@@ -178,7 +178,6 @@ const contentStyleFunction = computed(() => {
   return {
     paddingTop: `${topPadding.value}px`,
     paddingBottom: `${bottomPadding.value}px`,
-    paddingRight: `${rightPadding.value}px`,
     widht: `calc(100vw - ${widthOffset}px)`,
     height: `calc(100vh - ${heightOffset}px)`
   }
@@ -247,6 +246,7 @@ const fabBehaviour = computed(() => {
     case 'top-left': return { direction: 'down', actionsAlign: 'right' }
   }
 })
+
 // Watch
 watch(() => leftPane.visible, (visible) => {
   if (visible) {
@@ -260,7 +260,8 @@ watch(() => leftPane.visible, (visible) => {
 
 // Functions
 function layoutOffsetListener (offset) {
-  // Catch layout offset and returns default Quasar function
+  // Catch layout offset and returns default Quasar function. "offset" is a Number
+  // (pixels) that refers to the total height of header + footer that occupies on screen.
   // see https://quasar.dev/layout/page#style-fn
   layoutOffset.value = offset
   return { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' }

package/core/client/components/layout/KWindow.vue

@@ -187,7 +187,7 @@ const headerControls = computed(() => {
     visible: currentWindow.controls.unpin && currentWindow.state === 'pinned' && restoreGeometry,
     handler: () => Layout.setWindowState(props.placement, 'floating')
   }, {
-    id: `unpin-${props.placement}-window`,
+    id: `maximize-${props.placement}-window`,
     icon: 'las la-expand',
     size: 'sm',
     tooltip: 'KWindow.MAXIMIZE_ACTION',

package/core/client/components/media/KColorScale.vue

@@ -4,7 +4,7 @@
     <canvas
       class="k-color-scale"
       :id="canvasId"
-      />
+    />
   </div>
 </template>
 
@@ -13,6 +13,7 @@ import _ from 'lodash'
 import * as math from 'mathjs'
 import { computed, watch, onMounted } from 'vue'
 import { uid } from 'quasar'
+import { Units } from '../../units.js'
 import { buildColorScale } from '../../utils/utils.colors'
 
 // props
@@ -33,6 +34,10 @@ const props = defineProps({
     type: Array,
     default: () => null
   },
+  unit: {
+    type: String,
+    default: undefined
+  },
   layout: {
     type: Object,
     default: () => {
@@ -74,6 +79,11 @@ let expectedSize = null
 const callRefresh = _.debounce(() => { refresh() }, 200)
 
 // Computed
+const labelText = computed(() => {
+  let text = props.label
+  if (text && props.unit) text += ` (${Units.getUnitSymbol(props.unit)})`
+  return text
+})
 const labelSize = computed(() => {
   return _.get(props.layout, 'label.size', 12)
 })
@@ -110,7 +120,7 @@ function formatTick (tick) {
   return math.format(tick, props.layout.ticks.format)
 }
 function drawLabel () {
-  if (_.isNil(props.label)) return
+  if (_.isNil(labelText.value)) return
   canvasContext.font = labelFont.value
   canvasContext.fillStyle = labelColor.value
   canvasContext.textAlign = labelAlign.value
@@ -124,7 +134,7 @@ function drawLabel () {
       break
     default:
   }
-  canvasContext.fillText(props.label, xLabel, labelSize.value)
+  canvasContext.fillText(labelText.value, xLabel, labelSize.value)
 }
 function drawDiscreteHorizontalScale () {
   drawLabel()
@@ -242,10 +252,10 @@ function onResized (size) {
   if (canvas) callRefresh()
 }
 
-// watch
-watch(props, () => { if (canvas) refresh() })
+// Watch
+watch(props, () => { if (canvas) callRefresh() })
 
-// hooks
+// Hooks
 onMounted(() => {
   canvas = document.getElementById(canvasId)
   canvasContext = canvas.getContext('2d')

package/core/client/components/screen/KLoginScreen.vue

@@ -29,7 +29,7 @@ import { login } from '../../utils/utils.session.js'
 import { verifyEmail } from '../../utils/utils.account.js'
 import KScreen from './KScreen.vue'
 import KForm from '../form/KForm.vue'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 
 // Data
 const $q = useQuasar()

package/core/client/components/screen/KRegisterScreen.vue

@@ -27,7 +27,7 @@ import { useQuasar } from 'quasar'
 import { i18n } from '../../i18n.js'
 import KScreen from './KScreen.vue'
 import KForm from '../form/KForm.vue'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 
 // Data
 const $q = useQuasar()

package/core/client/components/team/KAddMember.vue

@@ -94,7 +94,7 @@ import { i18n } from '../../i18n.js'
 import { RoleNames } from '../../../common/permissions'
 import KModal from '../KModal.vue'
 import KForm from '../form/KForm.vue'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 
 export default {
   emits: ['opened', 'closed'],
@@ -174,7 +174,7 @@ export default {
           $id: 'http://kalisio.xyz/schemas/user-properties',
           type: 'object',
           properties: {
-            role: role
+            role
           },
           required: ['role']
         }
@@ -184,8 +184,8 @@ export default {
         $id: 'http://kalisio.xyz/schemas/user-properties',
         type: 'object',
         properties: {
-          name: name,
-          role: role
+          name,
+          role
         },
         required: ['name', 'role']
       }
@@ -282,9 +282,9 @@ export default {
             const role = _.trim(fileRecord[2])
             if (name.length > 2 && emailExpr.test(email) && RoleNames.includes(role)) {
               const record = {
-                name: name,
-                email: email,
-                role: role
+                name,
+                email,
+                role
               }
               records.push(record)
             } else {

package/core/client/components/team/KGroupCard.vue

@@ -29,7 +29,7 @@ import { baseItem } from '../../mixins'
 import { findMembersOfGroup, getRoleForGroup, getRoleForOrganisation, Roles, RoleNames } from '../../../common/permissions'
 import { KCard, KCardSection } from '../collection'
 import KTextArea from '../KTextArea.vue'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 
 export default {
   name: 'k-group-card',

package/core/client/components/team/KMemberFilter.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 
 export default {
   name: 'k-member-filter',

package/core/client/components/team/KTagCard.vue

@@ -27,7 +27,7 @@
 import { baseItem } from '../../mixins'
 import { countMembersWithTag } from '../../../common/permissions'
 import { KCard, KCardSection } from '../collection'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 
 export default {
   name: 'k-tag-card',

package/core/client/components/time/KRelativeTimeRanges.vue

@@ -42,7 +42,7 @@ export default {
       const start = moment(Time.getCurrentTime()).add(duration)
       // Revert range if duration in past
       if (duration.asMilliseconds() > 0) Time.patchRange({ start: end, end: start })
-      else Time.patchRange({ start: start, end: end })
+      else Time.patchRange({ start, end })
     }
   },
   created () {

package/core/client/components/time/KTimeControl.vue

@@ -70,6 +70,7 @@ import { useQuasar } from 'quasar'
 import { Time } from '../../time.js'
 import { Store } from '../../store.js'
 import KDateTime from './KDateTime.vue'
+import KAction from '../action/KAction.vue'
 import SettingsSchema from '../../../common/schemas/settings.update.json'
 
 // Data

package/core/client/components/tool/KExportTool.vue

@@ -9,7 +9,7 @@
 
 <script setup>
 import { Exporter } from '../../exporter.js'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 
 // props
 const props = defineProps({

package/core/client/composables/collection.js

@@ -119,7 +119,7 @@ export function useCollection (options) {
 
   function resetCollection () {
     // Reset pagination and start again refreshing the collection
-    setCollectionItems([])
+    if (options.appendItems.value) setCollectionItems([])
     currentPage.value = 1
     refreshCollection()
   }

package/core/client/composables/index.js

@@ -1,5 +1,6 @@
 export * from './activity.js'
 export * from './collection.js'
+export * from './layout.js'
 export * from './pwa.js'
 export * from './session.js'
 export * from './schema.js'

package/core/client/composables/layout.js

@@ -0,0 +1,50 @@
+import { Layout } from '../layout.js'
+
+export function useLayout () {
+
+  // functions
+  function configureLayout (configuration, context) {
+    if (configuration.header) Layout.setHeader(configuration.header, context)
+    if (configuration.footer) Layout.setFooter(configuration.footer, context)
+    if (configuration.page) Layout.setPage(configuration.page, context)
+    if (configuration.fab) Layout.setFab(configuration.fab, context)
+    Layout.placements.forEach(placement => {
+      if (_.has(configuration, `panes.${placement}`)) Layout.setPane(placement, _.get(configuration, `panes.${placement}`), context)
+      if (_.has(configuration, `windows.${placement}`)) Layout.setWindow(placement, _.get(configuration, `windows.${placement}`), context)
+    })
+    // for backward compatibility
+    if (configuration.leftPane) Layout.setPane('left', configuration.leftPane, context)
+    if (configuration.rightPane) Layout.setPane('right', configuration.rightPane, context)
+    if (configuration.topPane) Layout.setPane('top', configuration.topPane, context)
+    if (configuration.bottomPane) Layout.setPane('bottom', configuration.bottomPane, context)
+  }
+  function clearLayout () {
+    Layout.clearHeader()
+    Layout.clearFooter()
+    Layout.clearPage()
+    Layout.clearFab()
+    Layout.placements.forEach(placement => {
+      Layout.clearPane(placement)
+      Layout.clearWindow(placement)
+    })
+  }
+
+  // immediate
+  const additionalFunctions = {}
+  Layout.placements.forEach(placement => {
+    additionalFunctions[`set${_.upperFirst(placement)}Pane`] = (options, context) => { Layout.setPane(placement, options, context) }
+    additionalFunctions[`set${_.upperFirst(placement)}PaneMode`] = (mode) => { Layout.setPaneMode(placement, mode) }
+    additionalFunctions[`set${_.upperFirst(placement)}PaneFilter`] = (filter) => { Layout.setPaneFilter(placement, filter) }
+    additionalFunctions[`set${_.upperFirst(placement)}PaneVisible`] = (visible) => { Layout.setPaneVisible(placement, visible) }
+    additionalFunctions[`set${_.upperFirst(placement)}PaneOpener`] = (opener) => { Layout.setPaneOpener(placement, opener) }
+    additionalFunctions[`clear${_.upperFirst(placement)}Pane`] = () => { Layout.clearPane(placement) }
+  })
+  
+  // expose
+  return {
+    layout: Layout,
+    configureLayout,
+    clearLayout,
+    ...additionalFunctions
+  }
+}

package/core/client/composables/session.js

@@ -13,6 +13,8 @@ import { restoreSession } from '../utils/utils.session.js'
 
 export function useSession (options = {}) {
   // Data
+  const disconnectKey = 'disconnect-dialog'
+  const reconnectKey = 'reconnect-dialog'
   const router = useRouter()
   const route = useRoute()
   const $q = useQuasar()
@@ -77,6 +79,8 @@ export function useSession (options = {}) {
     if (!pendingReconnection && !ignoreReconnectionError) {
       Events.emit('disconnected')
       logger.error(new Error('Socket has been disconnected'))
+      // Disconnect prompt can be avoided, eg in tests
+      if (!LocalStorage.get(disconnectKey, true)) return
       // This will ensure any operation in progress will not keep a "dead" loading indicator
       // as this error might appear under-the-hood without notifying service operations
       Loading.hide()
@@ -118,6 +122,8 @@ export function useSession (options = {}) {
     // Display it only the first time the reconnection occurs because multiple attempts will be tried
     if (!pendingReload) {
       Events.emit('reconnected')
+      // Reconnect prompt can be avoided, eg in tests
+      if (!LocalStorage.get(reconnectKey, true)) return
       pendingReload = $q.dialog({
         title: i18n.t('composables.session.INFORMATION'),
         message: i18n.t('composables.session.RECONNECT'),

package/core/client/filter.js

@@ -8,7 +8,7 @@ export const Filter = {
   initialize () {
     // This object is used to filter the activities based on a search pattern or on specific items
     // The filter then builds the corresponding query
-    Store.set('filter', { field: 'name', pattern: '', items: [], query: {} })
+    Store.set('filter', { fields: 'name', pattern: '', items: [], query: {} })
     // Make filter react to external changes to update the query
     Events.on('filter-changed', () => this.updateFilterQuery())
   },
@@ -18,8 +18,10 @@ export const Filter = {
   getItems () {
     return Store.get('filter.items')
   },
-  getField () {
-    return Store.get('filter.field')
+  getFields () {
+    const fields = Store.get('filter.fields')
+    if (typeof fields === 'string') return [fields]
+    return fields
   },
   getPattern () {
     return Store.get('filter.pattern')
@@ -28,17 +30,18 @@ export const Filter = {
     return Store.get('filter.query')
   },
   clear () {
-    Store.patch('filter', { field: 'name', pattern: '', items: [], query: {} })
+    Store.patch('filter', { fields: 'name', pattern: '', items: [], query: {} })
   },
   // Build query from filter pattern and/or items
   updateFilterQuery () {
     const query = {}
     const pattern = this.getPattern()
-    const field = this.getField()
+    const fields = this.getFields()
     const items = this.getItems()
     // Handle the pattern
     if (pattern !== '') {
-      query[field] = { $search: pattern }
+      query.$or = _.map(fields, field => { return { [field]: { $search: pattern } } })
+      console.log(query)
     }
     // Handle the selection
     items.forEach(item => {

package/core/client/guards.js

@@ -14,22 +14,31 @@ let guards = []
 export function authenticationGuard (user, to, from) {
   // Specific case of OAuth provider routes
   if (to.path.startsWith('/oauth/')) return true
+
   // Routes accessible whatever the authentication state, eg public
-  if (_.get(to, 'meta.authenticated') && _.get(to, 'meta.unauthenticated')) {
+  if ((_.get(to, 'meta.authenticated') && _.get(to, 'meta.unauthenticated')) || _.get(to, 'meta.public')) {
+    // First, check the root route, since all routes are children of the root route
+    if (to.path === '/') return 'home'
+    // Allow the navigation
     return true
   }
+
   // Only when authenticated, eg private
   if (_.get(to, 'meta.authenticated')) {
     // If the user is here then he is authenticated so let it go
     if (user) return true
     // Otherwise redirect to login
     else return 'login'
-  } else if (_.get(to, 'meta.unauthenticated')) {
-    // Only when not authenticated, eg reset password
+  }
+
+  // Only when not authenticated, eg reset password
+  if (_.get(to, 'meta.unauthenticated')) {
     // If the user is here then he is authenticated so redirect to home
     if (user) return 'home'
-    // Otherwise let it go handling the specific case of domain root
-    else return (to.path === '/' ? 'login' : true)
+    // If the user is not authenticated, handle the specific case of the root domain
+    if (to.path === '/') return 'login'
+    // Allow the navigation
+    return true
   }
 }
 
@@ -53,6 +62,20 @@ export function permissionsGuard (user, to, from) {
   } else return true
 }
 
+// Guard based on route definition
+export function routeGuard (user, to, from) {
+  // Retrieves routes corresponding to the destination
+  const matchedRoute = _.get(to, 'matched', [])
+  // Retrieves the last corresponding route
+  const lastMatchedRoute = matchedRoute[matchedRoute.length - 1]
+  // If the last matching route has the name 'not-found', this is a route capturing all unknown routes ('/:catchAll(.*)*')
+  if (lastMatchedRoute.name === 'not-found') return false
+  // If the only corresponding route is the index, it is managed by authenticationGuard
+  if (lastMatchedRoute.name === 'index') return false
+  // Allow the navigation
+  return true
+}
+
 // Guard routes for a given user, can be used as router navigation guard
 // or as standard function. In this case next will not be used and you get the
 // final result after running all registered guards: true, false or redirect route name
@@ -68,7 +91,7 @@ export function beforeGuard (to, from, next) {
         // but redirection should be handled at the app level to avoid concurrence
         // between both mechanisms. For this you can call the function without passing from/next arguments.
         // next({ name: result })
-        return next(false)
+        return next({ name: result })
       } else {
         return result
       }

package/core/client/i18n/core_en.json

@@ -425,7 +425,7 @@
     "DOMAIN": "Hosted on",
     "FLAVOR": "Flavor",
     "VIEW_CHANGELOG": "Changlog",
-    "BUG_REPORT": "Report us a bug",
+    "BUG_REPORT": "Report a bug",
     "BUG_REPORT_SUBJECT": "[{appName}] Bug report - Client v{clientVersion} - API v{apiVersion}",
     "BUG_REPORT_BODY": "Please detail your problem here%0D%0A%0D%0APlatform information to be kept%0D%0A%0D%0A",
     "PLATFORM_INFO": "Platform information"

package/core/client/i18n/core_fr.json

@@ -423,7 +423,7 @@
     "DOMAIN": "Hébergé sur",
     "FLAVOR": "Saveur",
     "VIEW_CHANGELOG": "Historique des versions",
-    "BUG_REPORT": "Nous signaler un bug",
+    "BUG_REPORT": "Signaler un bug",
     "BUG_REPORT_SUBJECT": "[{appName}] Rapport de bug - Client v{clientVersion} - API v{apiVersion}",
     "BUG_REPORT_BODY": "Merci de détailler ici le problème rencontré%0D%0A%0D%0AInformations à conserver concernant votre système%0D%0A%0D%0A",
     "PLATFORM_INFO": "Informations système"

package/core/client/i18n.js

@@ -84,5 +84,19 @@ export const i18n = {
     if (this.i18n.global.te(key)) return this.i18n.global.t(key, params)
     if (this.i18n.global.te(key, this.i18n.global.fallbackLocale)) return this.i18n.global.t(key, this.i18n.global.fallbackLocale, params)
     return key
+  },
+  localize (path) {
+    if (!this.i18n) {
+      logger.error('[KDK] i18n instance is not existing. Did you initialize it ?')
+      return path
+    }
+    const index = path.lastIndexOf('.')
+    const baseName = index > 0 ? path.substring(0, index) : path
+    const extName = index > 0 ? path.substring(index, path.length) : ''
+    return [
+      `${baseName}_${this.i18n.global.locale}${extName}`,
+      `${baseName}_${this.i18n.global.fallbackLocale}${extName}`,
+      path
+    ]
   }
 }

package/core/client/layout.js

@@ -5,7 +5,6 @@ import sift from 'sift'
 import { Store } from './store.js'
 import { bindContent } from './utils/utils.content.js'
 
-const placements = ['top', 'right', 'bottom', 'left']
 const layoutPath = 'layout'
 const contentDefaults = { content: undefined, filter: {}, mode: undefined, visible: false }
 const windowDefaultContols = { pin: true, unpin: true, maximize: true, restore: true, close: true, resize: true }
@@ -42,6 +41,7 @@ const defaults = {
 
 // Export singleton
 export const Layout = {
+  placements: ['top', 'right', 'bottom', 'left'],
   paths: {
     layout: layoutPath,
     header: layoutPath + '.header',
@@ -68,7 +68,7 @@ export const Layout = {
     Store.set(this.paths.footer, this.getElementDefaults('footer'))
     Store.set(this.paths.page, this.getElementDefaults('page'))
     Store.set(this.paths.fab, this.getElementDefaults('fab'))
-    placements.forEach(placement => {
+    this.placements.forEach(placement => {
       Store.set(_.get(this.paths.panes, placement), this.getElementDefaults(`panes.${placement}`))
       Store.set(_.get(this.paths.windows, placement), this.getElementDefaults(`windows.${placement}`))
     })
@@ -81,16 +81,6 @@ export const Layout = {
   getLayoutDefaults () {
     return Object.assign({}, defaults.options, _.pick(_.get(config, this.paths.layout), _.keys(defaults.layout)))
   },
-  set (layout) {
-    if (layout.header) this.setHeader(layout.header)
-    if (layout.footer) this.setFooter(layout.footer)
-    if (layout.page) this.setPage(layout.page)
-    if (layout.fab) this.setFab(layout.fab)
-    placements.forEach(placement => {
-      if (_.has(layout, `panes.${placement}`)) this.setPane(placement, _.get(layout, `panes.${placement}`))
-      if (_.has(layout, `windows.${placement}`)) this.setWindow(placement, _.get(layout, `windows.${placement}`))
-    })
-  },
   setView (view) {
     Store.patch(this.paths.layout, { view })
   },
@@ -99,7 +89,7 @@ export const Layout = {
     this.setFooterMode(mode)
     this.setPageMode(mode)
     this.setFabMode(mode)
-    placements.forEach(placement => {
+    this.placements.forEach(placement => {
       this.setPaneMode(placement, mode)
       this.setWindowMode(placement, mode)
     })
@@ -156,6 +146,9 @@ export const Layout = {
     if (props.visible === visible) return
     Store.patch(this.getElementPath(element), { visible })
   },
+  clearElement (element) {
+    this.setElement(element, null)
+  },
   getHeader () {
     return this.getElement('header')
   },
@@ -171,6 +164,9 @@ export const Layout = {
   setHeaderVisible (visible) {
     this.setElementVisible('header', visible)
   },
+  clearHeader () {
+    this.clearElement('header')
+  },
   getFooter () {
     return this.getElement('footer')
   },
@@ -186,6 +182,9 @@ export const Layout = {
   setFooterVisible (visible) {
     this.setElementVisible('footer', visible)
   },
+  clearFooter () {
+    this.clearElement('footer')
+  },
   getPage () {
     return this.getElement('page')
   },
@@ -201,6 +200,9 @@ export const Layout = {
   setPageVisible (visible) {
     this.setElementVisible('page', visible)
   },
+  clearPage () {
+    this.clearElement('page')
+  },
   getFab () {
     return this.getElement('fab')
   },
@@ -239,6 +241,9 @@ export const Layout = {
     if (props.offset === offset) return
     Store.patch(this.getElementPath('fab'), { offset })
   },
+  clearFab () {
+    this.clearElement('fab')
+  },
   getPane (placement) {
     return this.getElement(`panes.${placement}`)
   },
@@ -259,6 +264,9 @@ export const Layout = {
     if (props.opener === opener) return
     Store.patch(this.getElementPath(`panes.${placement}`), { opener })
   },
+  clearPane (placement) {
+    this.clearElement(`panes.${placement}`)
+  },
   getWindow (placement) {
     return this.getElement(`windows.${placement}`)
   },
@@ -330,8 +338,11 @@ export const Layout = {
     if (!widget) current = _.get(props.components, '[0].id')
     Store.patch(this.getElementPath(`windows.${placement}`), { current })
   },
+  clearWindow (placement) {
+    this.clearElement(`windows.${placement}`)
+  },
   findWindow (widget) {
-    for (const placement of placements) {
+    for (const placement of this.placements) {
       const window = this.getWindow(placement)
       if (_.find(window.components, { id: widget })) {
         return { placement, window }