@kalisio/kdk 2.3.1 → 2.4.0

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

@@ -4,13 +4,15 @@
       Window header
      -->
     <div
+      :id="`${placement}-window-header`"
       class="k-window-header full-width row items-center"
       v-touch-pan.prevent.mouse="onMoved"
     >
-      <q-resize-observer @resize="onHeaderResized" />
+      <q-resize-observer @resize="onWindowHeaderResized" />
       <!-- window menu -->
       <KPanel
-        id="window-menu"
+        v-if="currentWindow.controls.menu"
+        :id="`${placement}-window-menu`"
         :content="menu"
         @touchstart.passive.stop
         @mousedown.passive.stop
@@ -55,6 +57,7 @@
         :style="`min-width: ${widgetWidth}px; max-width: ${widgetWidth}px;`"
       >
         <component
+          :id="`${placement}-window-content`"
           ref="widgetRef"
           :is="widget.instance"
           v-bind="widget.content"
@@ -62,6 +65,7 @@
         />
       </KScrollArea>
       <component v-else
+        :id="`${placement}-window-content`"
         ref="widgetRef"
         :is="widget.instance"
         v-bind="widget.content"
@@ -71,8 +75,11 @@
     <!--
       Window footer
      -->
-    <div id="window-footer" class="k-window-footer full-width row justify-end">
-      <q-resize-observer @resize="onFooterResized" />
+    <div
+      :id="`${placement}-window-footer`"
+      class="k-window-footer full-width row justify-end"
+    >
+      <q-resize-observer @resize="onWindowFooterResized" />
       <!-- window grip -->
       <q-icon
         v-if="currentWindow.controls.resize && currentWindow.state !== 'maximized'"
@@ -90,7 +97,10 @@ import _ from 'lodash'
 import logger from 'loglevel'
 import { ref, computed, watch, provide } from 'vue'
 import { useQuasar } from 'quasar'
-import { Store, LocalStorage, Layout, utils } from '../..'
+import { Store } from '../../store.js'
+import { LocalStorage } from '../../local-storage.js'
+import { Layout } from '../../layout.js'
+import { loadComponent, bindContent, computeResponsiveSize } from '../../utils'
 import KPanel from '../KPanel.vue'
 import KScrollArea from '../KScrollArea.vue'
 import KMenu from '../menu/KMenu.vue'
@@ -106,16 +116,18 @@ const props = defineProps({
   },
   layoutOffset: {
     type: Number,
-    defaut: 0
+    default: 0
   }
 })
 
 // Data
 const $q = useQuasar()
+const header = Layout.getHeader()
+const footer = Layout.getFooter()
 const currentWindow = Layout.getWindow(props.placement)
+const windowHeaderHeight = ref(0)
+const windowFooterHeight = ref(0)
 const widgetRef = ref(null)
-const headerHeight = ref(0)
-const footerHeight = ref(0)
 const pinIcons = {
   left: 'las la-angle-left',
   right: 'las la-angle-right',
@@ -129,7 +141,6 @@ const unpinIcons = {
   bottom: 'las la-angle-up'
 }
 const border = 2
-let backupState
 
 // Provide
 provide('widget', widgetRef)
@@ -139,7 +150,7 @@ const widgets = computed(() => {
   let isCurrentValid = false
   _.forEach(currentWindow.components, (widget) => {
     const componentName = _.get(widget, 'content.component')
-    widget.instance = utils.loadComponent(componentName)
+    widget.instance = loadComponent(componentName)
     if (currentWindow.current === widget.id) isCurrentValid = true
   })
   if (!isCurrentValid) Layout.setWindowCurrent(props.placement, _.get(widgets, '[0].id'))
@@ -199,7 +210,7 @@ const headerControls = computed(() => {
     size: 'sm',
     tooltip: 'KWindow.RESTORE_ACTION',
     visible: currentWindow.controls.restore && currentWindow.state === 'maximized',
-    handler: () => Layout.setWindowState(props.placement, backupState)
+    handler: () => Layout.setWindowState(props.placement, LocalStorage.get(getStorageKey('restore-state')) || 'pinned')
   }, {
     id: `close-${props.placement}-window`,
     icon: 'las la-times',
@@ -230,14 +241,14 @@ const widgetLabel = computed(() => {
 const widgetHeader = computed(() => {
   if (!widget.value) return null
   let header = _.cloneDeep(widget.value.header)
-  header = utils.bindContent(header, widgetRef.value)
+  header = bindContent(header, widgetRef.value)
   return header
 })
 const widgetWidth = computed(() => {
   return currentWindow.size[0] - border
 })
 const widgetHeight = computed(() => {
-  return currentWindow.size[1] - headerHeight.value - footerHeight.value
+  return currentWindow.size[1] - windowHeaderHeight.value - windowFooterHeight.value
 })
 
 // Watch
@@ -248,10 +259,10 @@ watch(() => currentWindow.state, (newState, oldState) => refresh(newState, oldSt
 function getStorageKey (element) {
   return `windows-${props.placement}-${element}`
 }
-function storeState () {
+function writeState () {
   LocalStorage.set(getStorageKey('state'), currentWindow.state)
 }
-function restoreState () {
+function readState () {
   return LocalStorage.get(getStorageKey('state'))
 }
 function storeGeometry () {
@@ -263,18 +274,20 @@ function restoreGeometry () {
 function refresh (newState, oldState) {
   switch (newState) {
     case 'pinned': {
-      storeState()
+      LocalStorage.clear(getStorageKey('restore-state'))
+      writeState()
       setPinnedGeometry()
       break
     }
     case 'maximized': {
-      storeState()
-      backupState = oldState
+      if (oldState) LocalStorage.set(getStorageKey('restore-state'), oldState)
+      writeState()
       setMaximizedGeometry()
       break
     }
     case 'floating': {
-      storeState()
+      LocalStorage.clear(getStorageKey('restore-state'))
+      writeState()
       const geometry = restoreGeometry()
       if (geometry) {
         updateGeometry(geometry.position, geometry.size, true)
@@ -286,25 +299,26 @@ function refresh (newState, oldState) {
       break
     }
     default:
-      logger.warn(`[KDK] invalid window state ${currentWindow.state}`)
+      logger.error(`[KDK] invalid window state ${currentWindow.state}`)
   }
 }
 function setPinnedGeometry () {
-  const sizeRatio = currentWindow.sizePolicy.pinned[$q.screen.name]
-  const w = $q.screen.width * sizeRatio[0] / 100
-  const h = $q.screen.height * sizeRatio[1] / 100
+  const size = computeResponsiveSize(currentWindow.sizePolicy.pinned)
   let x, y
   if (props.placement === 'top' || props.placement === 'bottom') {
-    x = $q.screen.width / 2 - w / 2
-    y = props.placement === 'top' ? 0 : $q.screen.height - h
+    x = $q.screen.width / 2 - size[0] / 2
+    y = props.placement === 'top' ? 0 : $q.screen.height - size[1]
   } else {
-    x = props.placement === 'left' ? 0 : $q.screen.width - w
-    y = $q.screen.height / 2 - h / 2
+    x = props.placement === 'left' ? 0 : $q.screen.width - size[0]
+    y = $q.screen.height / 2 - size[1] / 2
   }
-  updateGeometry([x, y], [w, h])
+  updateGeometry([x, y], size)
 }
 function setMaximizedGeometry () {
-  updateGeometry([0, 0], [$q.screen.width, $q.screen.height])
+  let height = $q.screen.height
+  if (header.visible) height -= header.size[1]
+  if (footer.visible) height -= footer.size[1]
+  updateGeometry([0, 0], [$q.screen.width, height])
 }
 function updateGeometry (position, size, check = false) {
   // check geometry
@@ -318,7 +332,7 @@ function updateGeometry (position, size, check = false) {
     position = [x, y]
     size = [w, h]
   }
-  // compute breakpoings
+  // compute breakpoints
   // Code taken from quasar screen plugin code
   const w = size[0]
   const s = $q.screen.sizes
@@ -350,6 +364,9 @@ function updateGeometry (position, size, check = false) {
 function onMoved (event) {
   if (!event) return
   if (currentWindow.state !== 'maximized') {
+    // Set Focus
+    Layout.setFocus(`windows.${props.placement}`)
+    // Update geometry
     if (currentWindow.state !== 'floating') {
       storeGeometry()
       Layout.setWindowState(props.placement, 'floating')
@@ -364,8 +381,10 @@ function onMoved (event) {
     if (event.isFinal) storeGeometry()
   }
 }
-function onResized (event) {
+const onResized = _.throttle((event) => {
   if (!event) return
+  // Set Focus
+  Layout.setFocus(`windows.${props.placement}`)
   // Handle the pinned and floating currentState
   if (currentWindow.state !== 'maximized') {
     if (currentWindow.state !== 'floating') {
@@ -381,26 +400,24 @@ function onResized (event) {
     updateGeometry(currentWindow.position, newSize)
     if (event.isFinal) storeGeometry()
   }
-}
-function onScreenResized () {
+}, 5)
+const onScreenResized = _.throttle(() => {
   if (currentWindow.state === 'pinned') setPinnedGeometry()
   else if (currentWindow.state === 'maximized') setMaximizedGeometry()
   else updateGeometry(currentWindow.position, currentWindow.size, true)
+}, 50)
+function onWindowHeaderResized (size) {
+  windowHeaderHeight.value = size.height
 }
-function onHeaderResized (size) {
-  headerHeight.value = size.height
-}
-function onFooterResized (size) {
-  footerHeight.value = size.height
+function onWindowFooterResized (size) {
+  windowFooterHeight.value = size.height
 }
 
 // restore the state
-const fallbackState = restoreState() || 'pinned'
-if (currentWindow.state) {
-  logger.debug(`[KDK] restoring ${props.placement} window in ${currentWindow.state} state`)
-  refresh(currentWindow.state, fallbackState)
-} else {
-  logger.debug(`[KDK] restoring ${props.placement} window in ${fallbackState} state`)
+const currentState = currentWindow.state
+if (currentState) refresh(currentState)
+else {
+  const fallbackState = readState() || 'pinned'
   Layout.setWindowState(props.placement, fallbackState)
 }
 </script>
@@ -425,7 +442,7 @@ if (currentWindow.state) {
     background-color: $window-header-hover-background;
   }
   .k-window-footer {
-    height: v-bind(footerHeight)px;
+    height: v-bind(windowFooterHeight)px;
     border-radius: 0 0 $window-border-radius $window-border-radius;
   }
   .k-window-grip:hover {

package/core/client/components/layout/index.js

@@ -1,13 +1,11 @@
 import KFab from './KFab.vue'
 import KLayout from './KLayout.vue'
 import KPage from './KPage.vue'
-import KPageSticky from './KPageSticky.vue'
 import KWindow from './KWindow.vue'
 
 export {
   KFab,
   KLayout,
   KPage,
-  KPageSticky,
   KWindow
 }

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

@@ -0,0 +1,95 @@
+<template>
+  <div class="k-ribbon">
+    {{ text }}
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import { getHtmlColor } from '../../utils/utils.colors.js'
+const width = 500
+
+// Props
+const props = defineProps({
+  text: {
+    type: String,
+    default: undefined
+  },
+  size: {
+    type: Number,
+    default: 32
+  },
+  color: {
+    type: String,
+    default: 'primary'
+  },
+  textColor: {
+    type: String,
+    default: 'white'
+  },
+  letterSpacing: {
+    type: Number,
+    default: 2
+  },
+  position: {
+    type: String,
+    default: 'top-left',
+    validator: (value) => {
+      return ['top-left', 'top-right', 'bottom-right', 'bottom-left'].includes(value)
+    }
+  },
+  origin: {
+    type: Array,
+    default: [50, 50],
+    validator: (value) => {
+      return _.isArray(value) && _.size(value) === 2
+    }
+  }
+})
+
+// Computed
+const computedWidth = computed(() => {
+  return `${width}px`
+})
+const computedHeight = computed(() => {
+  return `${props.size}px`
+})
+const computedFontSize = computed(() => {
+  return `${props.size - 8}px`
+})
+const computedColor = computed(() => {
+  return getHtmlColor(props.color)
+})
+const computedTextColor = computed(() => {
+  return getHtmlColor(props.textColor)
+})
+const computedLetterSpacing = computed(() => {
+  return `${props.letterSpacing}px`
+})
+const translation = computed(() => {
+  if (props.position === 'top-left') return `${props.origin[0] - (width / 2)}px, ${props.origin[1] - (props.size / 2)}px`
+  if (props.position === 'top-right') return `${(width / 2) - props.origin[0]}px, ${props.origin[1] - (props.size / 2)}px`
+  if (props.position === 'bottom-right') return `${(width / 2) - props.origin[0]}px, ${(props.size / 2) - props.origin[1]}px`
+  if (props.position === 'bottom-left') return `${props.origin[0] - (width / 2)}px, ${(props.size / 2) - props.origin[1]}px`
+})
+const rotation = computed(() => {
+  if (props.position === 'top-left' || props.position === 'bottom-right') return '-45deg'
+  return '45deg'
+})
+</script>
+
+<style lang="scss" scope>
+.k-ribbon {
+  width: v-bind(computedWidth);
+  height: v-bind(computedHeight);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translate(v-bind(translation)) rotate(v-bind(rotation));
+  background-color: v-bind(computedColor);
+  color: v-bind(computedTextColor);
+  font-size: v-bind(computedFontSize);
+  letter-spacing: v-bind(computedLetterSpacing);
+}
+</style>

package/core/client/components/menu/KMenu.vue

@@ -140,8 +140,8 @@ function onClicked (event) {
 }
 </script>
 
-<style lang="scss" scoped>
-  .q-btn-dropdown__arrow {
-    margin-left: 0px !important;
-  }
+<style lang="scss">
+.q-btn-dropdown__arrow {
+  margin-left: 0px !important;
+}
 </style>

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

@@ -1,32 +1,30 @@
 <template>
   <KPage padding>
-    <template v-slot:page-content>
-      <!--
-        Groups collection
-      -->
-      <KGrid
-        ref="groupsGrid"
-        :contextId="contextId"
-        service="groups"
-        :renderer="renderer"
-        :base-query="sorter.query"
-        :filter-query="filter.query"
-        :list-strategy="'smart'">
-        <template v-slot:empty-section>
-          <div class="absolute-center">
-            <KStamp
-              icon="las la-exclamation-circle"
-              icon-size="3rem"
-              :text="$t('KGrid.EMPTY_GRID')"
-            />
-          </div>
-        </template>
-      </KGrid>
-      <!--
-        Router view to enable routing to modals
-      -->
-      <router-view service="groups"></router-view>
-    </template>
+    <!--
+      Groups collection
+    -->
+    <KGrid
+      ref="groupsGrid"
+      :contextId="contextId"
+      service="groups"
+      :renderer="renderer"
+      :base-query="sorter.query"
+      :filter-query="filter.query"
+      :list-strategy="'smart'">
+      <template v-slot:empty-section>
+        <div class="absolute-center">
+          <KStamp
+            icon="las la-exclamation-circle"
+            icon-size="3rem"
+            :text="$t('KGrid.EMPTY_LABEL')"
+          />
+        </div>
+      </template>
+    </KGrid>
+    <!--
+      Router view to enable routing to modals
+    -->
+    <router-view service="groups"></router-view>
   </KPage>
 </template>
 

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

@@ -1,28 +1,26 @@
 <template>
   <KPage padding>
-    <template v-slot:page-content>
-      <!--
-        Members collection, cannot use smart strategy here because membership is not managed at service level
-        but using authorisations on users
-      -->
-      <KGrid
-        ref="membersGrid"
-        service="members"
-        :renderer="renderer"
-        :contextId="contextId"
-        :base-query="baseQuery"
-        :filter-query="filter.query">
-        <template v-slot:empty-section>
-          <div class="absolute-center">
-            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_GRID')" />
-          </div>
-        </template>
-      </KGrid>
-      <!--
-        Router view to enable routing to modals
-      -->
-      <router-view service="members"></router-view>
-    </template>
+    <!--
+      Members collection, cannot use smart strategy here because membership is not managed at service level
+      but using authorisations on users
+    -->
+    <KGrid
+      ref="membersGrid"
+      service="members"
+      :renderer="renderer"
+      :contextId="contextId"
+      :base-query="baseQuery"
+      :filter-query="filter.query">
+      <template v-slot:empty-section>
+        <div class="absolute-center">
+          <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_LABEL')" />
+        </div>
+      </template>
+    </KGrid>
+    <!--
+      Router view to enable routing to modals
+    -->
+    <router-view service="members"></router-view>
   </KPage>
 </template>
 

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

@@ -1,27 +1,25 @@
 <template>
   <KPage padding>
-    <template v-slot:page-content>
-      <!--
-        Organisations collection
-      -->
-      <KGrid
-        ref="organisationsGrid"
-        service="organisations"
-        :renderer="renderer"
-        :base-query="sorter.query"
-        :filter-query="filter.query"
-        :list-strategy="'smart'">
-        <template v-slot:empty-section>
-          <div class="absolute-center">
-            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_GRID')" />
-          </div>
-        </template>
-      </KGrid>
-      <!--
-        Router view to enable routing to modals
-      -->
-      <router-view service="organisations"></router-view>
-    </template>
+    <!--
+      Organisations collection
+    -->
+    <KGrid
+      ref="organisationsGrid"
+      service="organisations"
+      :renderer="renderer"
+      :base-query="sorter.query"
+      :filter-query="filter.query"
+      :list-strategy="'smart'">
+      <template v-slot:empty-section>
+        <div class="absolute-center">
+          <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_LABEL')" />
+        </div>
+      </template>
+    </KGrid>
+    <!--
+      Router view to enable routing to modals
+    -->
+    <router-view service="organisations"></router-view>
   </KPage>
 </template>
 

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

@@ -1,28 +1,26 @@
 <template>
   <KPage padding>
-    <template v-slot:page-content>
-      <!--
-        Groups collection
-      -->
-      <KGrid
-        ref="tagsGrid"
-        :contextId="contextId"
-        service="tags"
-        :renderer="renderer"
-        :base-query="sorter.query"
-        :filter-query="filter.query"
-        :list-strategy="'smart'">
-        <template v-slot:empty-section>
-          <div class="absolute-center">
-            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_GRID')" />
-          </div>
-        </template>
-      </KGrid>
-      <!--
-        Router view to enable routing to modals
-      -->
-      <router-view service="tags"></router-view>
-    </template>
+    <!--
+      Groups collection
+    -->
+    <KGrid
+      ref="tagsGrid"
+      :contextId="contextId"
+      service="tags"
+      :renderer="renderer"
+      :base-query="sorter.query"
+      :filter-query="filter.query"
+      :list-strategy="'smart'">
+      <template v-slot:empty-section>
+        <div class="absolute-center">
+          <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_LABEL')" />
+        </div>
+      </template>
+    </KGrid>
+    <!--
+      Router view to enable routing to modals
+    -->
+    <router-view service="tags"></router-view>
   </KPage>
 </template>