@kalisio/kdk 2.4.1 → 2.5.1

package/core/client/components/KFollower.vue

@@ -0,0 +1,75 @@
+<template>
+  <Teleport v-if="targetElement" :to="'#' + targetId">
+    <div :style="computedStyle">
+      <component
+        :is="loadComponent(follower.component)"
+        v-bind="computedProps"
+      />
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, computed, onMounted } from 'vue'
+import { loadComponent } from '../utils'
+
+// Props
+const props = defineProps({
+  follower: {
+    type: Object,
+    required: true
+  },
+  targetId: {
+    type: String,
+    required: true
+  },
+  position: {
+    type: String,
+    default: 'top-right'
+  },
+  offset: {
+    type: [Number, Array],
+    default: [0, 0]
+  }
+})
+
+// Data
+const targetElement = ref(null)
+
+// Computed
+const computedProps = computed(() => {
+  return _.omit(props.follower, ['component'])
+})
+const computedStyle = computed(() => {
+  const hOffset = `${props.offset[0]}px`
+  const vOffset = `${props.offset[1]}px`
+  const style = {
+    position: 'fixed'
+  }
+  switch (props.position) {
+    case 'top-right':
+      style.top = vOffset
+      style.right = hOffset
+      break
+    case 'top-left':
+      style.top = vOffset
+      style.left = hOffset
+      break
+    case 'bottom-left':
+      style.bottom = vOffset
+      style.left = hOffset
+      break
+    default: // bottom-right
+      style.bottom = vOffset
+      style.right = hOffset
+      break
+  }
+  return style
+})
+
+// Hooks
+onMounted(() => {
+  targetElement.value = document.getElementById(props.targetId)
+})
+</script>

package/core/client/components/KLogo.vue

@@ -12,11 +12,10 @@
 <script setup>
 import _ from 'lodash'
 import config from 'config'
-import { ref } from 'vue'
 
 // Data
-const appName = _.get(config, 'appName')
-const logo = ref(_.get(config, 'appLogo', _.toLower(appName) + '-logo.png'))
+const appSlug = _.get(config, 'appSlug', _.kebabCase(_.get(config, 'appName')))
+const logo = _.get(config, 'appLogo', `${appSlug}-logo.png`)
 
 // Props
 defineProps({

package/core/client/components/KModal.vue

@@ -6,11 +6,7 @@
   >
     <q-card
       id="modal-card"
-      v-bind:class="{
-        'column full-height': maximized,
-        'q-pa-sm': $q.screen.gt.xs,
-        'q-pa-xs': $q.screen.lt.sm
-      }"
+      :class="computedClass"
       :style="computedStyle">
       <!--
          Header section
@@ -32,10 +28,15 @@
       <!--
         Content section
        -->
-      <div id="modal-content" class="col">
-        <KScrollArea class="q-pl-xs q-pr-md" :maxHeight="scrollAreaMaxHeight">
+      <div id="modal-content" class="full-width col">
+        <KScrollArea
+          v-if="scrollable"
+          :maxHeight="scrollAreaMaxHeight"
+          class="q-pl-xs q-pr-md"
+        >
           <slot />
         </KScrollArea>
+        <slot v-else />
       </div>
       <!--
         Footer section
@@ -64,6 +65,10 @@ import KPanel from './KPanel.vue'
 
 // Props
 const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
   title: {
     type: String,
     default: ''
@@ -87,9 +92,17 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  modelValue: {
+  scrollable: {
     type: Boolean,
-    default: false
+    default: true
+  },
+  backgroundColor: {
+    type: String,
+    default: 'white'
+  },
+  textColor: {
+    type: String,
+    default: 'black'
   }
 })
 
@@ -109,6 +122,13 @@ const lgMinWidths = { wide: 92, medium: 65, narrow: 35 }
 const xlMinWidths = { wide: 90, medium: 55, narrow: 25 }
 
 // Computed
+const computedClass = computed(() => {
+  let result = `bg-${props.backgroundColor} text-${props.textColor}`
+  if (props.maximized) result += ' column full-height'
+  if ($q.screen.gt.xs) result += ' q-pa-sm'
+  if ($q.screen.lt.sm) result += ' q-pa-xs'
+  return result
+})
 const computedStyle = computed(() => {
   // compute the modal max height
   const screenHeight = $q.screen.height
@@ -133,7 +153,7 @@ const computedStyle = computed(() => {
   if ($q.screen.lt.md) return `min-width: ${smMinWidths[props.widthPolicy]}vw; max-height: ${modalMaxHeight}px`
   if ($q.screen.lt.lg) return `min-width: ${mdMinWidths[props.widthPolicy]}vw; max-height: ${modalMaxHeight}px`
   if ($q.screen.lt.xl) return `min-width: ${lgMinWidths[props.widthPolicy]}vw; max-height: ${modalMaxHeight}px`
-  return `min-width: ${xlMinWidths[props.widthPolicy]}vw; max-height: ${modalMaxHeight}px`
+  return `min-width: ${xlMinWidths[props.widthPolicy]}vw; max-height: ${modalMaxHeight}px;`
 })
 
 // Watch

package/core/client/components/KSponsor.vue

@@ -15,7 +15,7 @@
     </div>
     <!-- Kalisio logo -->
     <a href="https://kalisio.com" target="_blank">
-      <q-img src="kalisio.png" width="64px">
+      <q-img src="kdk/kalisio.png" width="64px">
         <q-tooltip>
           {{ $t('KSponsor.MORE_ABOUT_KALISIO') }}
         </q-tooltip>

package/core/client/components/KTextArea.vue

@@ -18,7 +18,7 @@
       <div
         class="q-pr-lg"
         :class="{ 'k-textarea-collapsed': !isExpanded, 'k-textarea-expanded': isExpanded }"
-        v-html="sanitizedText"
+        v-html="Document.sanitizeHtml(props.text)"
       />
     </KScrollArea>
     <div class="k-expandable-action">
@@ -38,7 +38,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import sanitizeHtml from 'sanitize-html'
+import { Document } from '../document.js'
 import KExpandable from './KExpandable.vue'
 import KScrollArea from './KScrollArea.vue'
 
@@ -78,9 +78,6 @@ const isExpanded = ref(props.isExpanded)
 const isScrollable = ref(false)
 
 // computed
-const sanitizedText = computed(() => {
-  return sanitizeHtml(props.text)
-})
 const cssCursor = computed(() => {
   return isExpandable.value ? 'pointer' : 'default'
 })

package/core/client/components/account/KDeleteAccountManager.vue

@@ -48,7 +48,7 @@ async function onDelete () {
   }).onOk(async (data) => {
     try {
       await api.getService('users').remove(User._id)
-      // Redirecting to logut will logut the user but logout an inexsiting user will raise an error
+      // Redirecting to logout will logout the user but logout an inexsiting user will raise an error
       // We prefer to clean the token manually instead
       // router.push({ name: 'logout' })
       Store.set('user', null)

package/core/client/components/account/KProfile.vue

@@ -1,38 +1,49 @@
 <template>
-  <div v-if="User" class="q-pb-md column content-center q-gutter-md bg-grey-4">
+  <div v-if="User" class="full-width column">
     <!-- Header -->
     <KPanel
       id="profile-header"
       :content="header"
       :context="User"
-      class="full-width justify-end no-wrap"
+      class="q-py-sm full-width justify-end no-wrap"
       @triggered="onTriggered"
     />
     <!-- Avatar -->
-    <div class="row justify-center">
+    <div v-if="avatar && computedAvatar" class="q-py-sm column items-center">
       <KAvatar
-        :subject="avatar"
-        size="7rem"
+        :subject="computedAvatar"
+        size="5rem"
       />
     </div>
     <!-- Information -->
-    <div class="column">
-      <div class="row justify-center text-subtitle1 text-weight-bold">
-        {{ name }}
+    <div class="q-py-sm column items-center">
+      <div class="text-subtitle1 text-weight-medium">
+        {{ computedName }}
       </div>
-      <div class="row justify-center">
-        {{ description }}
+      <div v-if="description && computedDescription" class="text-caption">
+        {{ computedDescription }}
       </div>
     </div>
+    <!-- Role -->
+    <div v-if="role && computedRole" class="q-py-sm column items-center">
+      <KChip
+        color="primary"
+        text-color="white"
+        square
+        size=".85rem"
+        :label="$t(`roles.${computedRole}`)"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
+import _ from 'lodash'
 import { computed } from 'vue'
 import { Store } from '../../store.js'
 import KAvatar from '../KAvatar.vue'
 import KPanel from '../KPanel.vue'
-import _ from 'lodash'
+import KChip from '../KChip.vue'
 
 // Props
 const props = defineProps({
@@ -43,6 +54,18 @@ const props = defineProps({
   manageable: {
     type: Boolean,
     default: true
+  },
+  avatar: {
+    type: Boolean,
+    default: true
+  },
+  description: {
+    type: Boolean,
+    default: true
+  },
+  role: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -59,6 +82,7 @@ const header = computed(() => {
     actions.push({
       id: 'edit-profile',
       icon: 'las la-edit',
+      size: '0.75rem',
       tooltip: 'KProfile.EDIT_PROFILE',
       dialog: {
         component: 'editor/KEditor',
@@ -79,6 +103,7 @@ const header = computed(() => {
     const manageAccountAction = {
       id: 'manage-account',
       icon: 'las la-cog',
+      size: '0.75rem',
       tooltip: 'KProfile.MANAGE_ACCOUNT',
       dialog: {
         component: 'account/KAccount',
@@ -98,9 +123,22 @@ const header = computed(() => {
   }
   return actions
 })
-const name = computed(() => _.get(User.value, 'profile.name', ''))
-const description = computed(() => _.get(User.value, 'profile.description', ''))
-const avatar = computed(() => _.get(User.value, 'profile', {}))
+const computedName = computed(() => {
+  return _.get(User.value, 'profile.name', _.get(User.value, 'profile.username', _.get(User.value, 'email', '')))
+})
+const computedDescription = computed(() => {
+  return _.get(User.value, 'profile.description', '')
+})
+const computedAvatar = computed(() => {
+  return _.get(User.value, 'profile', {})
+})
+const computedRole = computed(() => {
+  const permissions = _.get(User.value, 'permissions')
+  if (permissions) {
+    if (_.isString(permissions)) return permissions
+    return permissions[0]
+  }
+})
 
 // Functions
 function onTriggered (args) {

package/core/client/components/account/KSubscription.vue

@@ -1,17 +1,21 @@
 <template>
   <q-item>
-    <!-- Icon -->
+    <!-- Fingerprint -->
     <q-item-section avatar>
-      <q-icon :name="icon" />
+      <q-icon
+        :name="icon"
+        size="2.5rem"
+      />
     </q-item-section>
     <!-- Label -->
     <q-item-section>
-      {{ label }}
+      <q-item-label class="text-subtitle2">{{ label }}</q-item-label>
+      <q-item-label caption>{{ lastActivity }}</q-item-label>
     </q-item-section>
     <!-- Actions -->
-    <KPanel
-      :content="bindedActions"
-    />
+    <q-item-section side>
+      <KPanel :content="bindedActions" />
+    </q-item-section>
   </q-item>
 </template>
 
@@ -20,7 +24,7 @@ import _ from 'lodash'
 import { removeSubscription } from '@kalisio/feathers-webpush/client.js'
 import { computed } from 'vue'
 import { Dialog } from 'quasar'
-import { Store, i18n, api, utils } from '../..'
+import { Store, i18n, api, Time, utils } from '../..'
 import KPanel from '../KPanel.vue'
 
 // Props
@@ -37,10 +41,16 @@ const props = defineProps({
 
 // Computed
 const icon = computed(() => {
-  return 'lab la-' + _.get(props.subscription, 'browser.name')
+  return `lab la-${_.lowerCase(_.get(props.subscription, 'browser.name'))}`
 })
 const label = computed(() => {
-  return _.capitalize(_.get(props.subscription, 'browser.name')) + ' (' + _.get(props.subscription, 'browser.version') + ') - ' + _.capitalize(_.get(props.subscription, 'platform'))
+  return _.capitalize(_.get(props.subscription, 'browser.name')) +
+    ' (' + _.get(props.subscription, 'browser.version') + ') - ' +
+    _.capitalize(_.get(props.subscription, 'system.os'))
+})
+const lastActivity = computed(() => {
+  const timestamp = _.get(props.subscription, 'lastActivity')
+  return i18n.t('KSubscription.LAST_ACTIVITY', { date: Time.format(timestamp, 'date.short'), time: Time.format(timestamp, 'time.long') })
 })
 const bindedActions = computed(() => {
   return utils.bindContent(_.cloneDeep(props.actions), { unsubscribe })

package/core/client/components/account/KSubscriptionsManager.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="q-pa-md column">
+  <div class="column">
     <div v-if="subscriptions.length > 0">
-      <q-list>
+      <q-list separator dense>
         <template v-for="subscription in subscriptions" :key="subscription.endpoint">
           <KSubscription
             :subscription="subscription"
@@ -10,14 +10,13 @@
         </template>
       </q-list>
     </div>
-    <div v-else class="row col justify-center">
-      <KStamp
-        icon="las la-exclamation-circle"
-        icon-size="1.6rem"
-        :text="$t('KSubscriptionsManager.EMPTY')"
-        direction="horizontal"
-      />
-    </div>
+    <KStamp v-else
+      icon="las la-exclamation-circle"
+      icon-size="1.6rem"
+      :text="$t('KSubscriptionsManager.EMPTY')"
+      direction="horizontal"
+      class="fixed-center"
+    />
   </div>
 </template>
 
@@ -41,6 +40,6 @@ const User = Store.get('user')
 
 // Computed
 const subscriptions = computed(() => {
-  return _.get(User, 'subscriptions', [])
+  return _.orderBy(_.get(User, 'subscriptions', []), subscription => subscription.lastActivity)
 })
 </script>

package/core/client/components/action/KAction.vue

@@ -7,8 +7,7 @@
     no-caps
     no-wrap
     :color="computedColor"
-    :icon="!iconRight ? computedIcon : undefined"
-    :icon-right="iconRight ? computedIcon : undefined"
+    :icon="undefined"
     :size="size"
     :flat="flat"
     :outline="outline"
@@ -18,7 +17,11 @@
     :dense="dense"
     :disable="computedDisabled"
     v-close-popup="closePopup"
-    @click="onClicked">
+    @click="onClicked"
+    :class="{ 'k-action-toggled': isToggled }"
+  > 
+    <!-- icon -->
+    <KIcon v-if="!iconRight && computedIcon" :icon="computedIcon" />
     <!-- label -->
     <div v-if="computedLabel" :class="{ 'ellipsis q-pr-md': iconRight, 'ellipsis q-pl-md': !iconRight }">
       {{ computedLabel }}
@@ -34,6 +37,8 @@
     <!-- extra content -->
     <slot>
     </slot>
+    <!-- icon -->
+    <KIcon v-if="iconRight && computedIcon" :icon="computedIcon" />
   </q-btn>
   <!--
     Form button renderer
@@ -47,7 +52,8 @@
     :disable="computedDisabled"
     :loading="loading"
     v-close-popup="closePopup"
-    @click="onClicked">
+    @click="onClicked"
+  >
     <div class="ellipsis">
       {{ computedLabel }}
     </div>
@@ -62,17 +68,22 @@
     :dense="dense"
     :disable="computedDisabled"
     v-close-popup="closePopup"
-    @click="onClicked">
+    @click="onClicked"
+  >
     <q-item-section v-if="computedIcon || badge" avatar>
-      <q-icon v-if="computedIcon" :name="computedIcon" :color="computedColor" :dense="dense" />
+      <!-- icon -->
+      <KIcon v-if="computedIcon" :icon="computedIcon" />
       <!-- badge -->
       <q-badge v-if="badge" v-bind="badge" :label="computedBadgeLabel">
-        <q-icon v-if="badge.icon" v-bind="badge.icon" />
+        <KIcon v-if="badge.icon" v-bind="badge.icon" />
       </q-badge>
     </q-item-section>
     <q-item-section :class="'text-' + computedColor" no-wrap>
       <q-item-label :lines="1">{{ computedLabel }}</q-item-label>
     </q-item-section>
+    <!-- extra content -->
+    <slot>
+    </slot>
   </q-item>
   <!--
     Fab renderer
@@ -80,13 +91,15 @@
   <q-btn v-else-if="renderer === 'fab'"
     :id="id"
     class="k-action-fab"
-    :icon="computedIcon"
     :color="computedColor"
     :size="size"
     :round="true"
     :dense="dense"
     :disable="computedDisabled"
-    @click="onClicked">
+    @click="onClicked"
+  >
+    <!-- icon -->
+    <KIcon v-if="!iconRight && computedIcon" :icon="computedIcon" />
     <!-- tooltip -->
     <q-tooltip v-if="computedTooltip" anchor="top middle" self="bottom right">
       {{ computedTooltip }}
@@ -111,14 +124,17 @@
     :label-position="iconRight ? 'left' : 'right'"
     label-class="bg-primary text-white text-caption k-fab-action"
     :disable="computedDisabled"
-    @click="onClicked">
+    @click="onClicked"
+  >
+    <!-- icon -->
+    <KIcon v-if="!iconRight && computedIcon" :icon="computedIcon" />
     <!-- tooltip -->
     <q-tooltip v-if="computedTooltip" anchor="top middle" self="bottom right">
       {{ computedTooltip }}
     </q-tooltip>
     <!-- badge -->
     <q-badge v-if="badge" v-bind="badge">
-      <q-icon v-if="badge.icon" v-bind="badge.icon" />
+      <KIcon v-if="badge.icon" v-bind="badge.icon" />
     </q-badge>
   </q-fab-action>
   <!--
@@ -136,14 +152,15 @@
     square
     :dense="dense"
     :disable="computedDisabled"
-    @click="onClicked">
+    @click="onClicked"
+  >
     <!-- tooltip -->
     <q-tooltip v-if="computedTooltip">
       {{ computedTooltip }}
     </q-tooltip>
     <!-- badge -->
     <q-badge v-if="badge" v-bind="badge" :label="computedBadgeLabel">
-      <q-icon v-if="badge.icon" v-bind="badge.icon" />
+      <KIcon v-if="badge.icon" v-bind="badge.icon" />
     </q-badge>
     <!-- extra content -->
     <slot>
@@ -166,7 +183,8 @@ import { useRoute, useRouter } from 'vue-router'
 import { useQuasar, openURL } from 'quasar'
 import { i18n } from '../../i18n.js'
 import { actionProps } from '../../utils/utils.actions'
-import { bindParams } from '../../utils/utils.content.js'
+import { bindParams, bindProperties } from '../../utils/utils.content.js'
+import KIcon from '../graphics/KIcon.vue'
 
 // Props
 const props = defineProps(actionProps)
@@ -191,14 +209,9 @@ const computedIcon = computed(() => {
   return props.icon
 })
 const computedColor = computed(() => {
-  if (isToggled.value) return _.get(props.toggle, 'color', 'accent')
+  if (isToggled.value) return _.get(props.toggle, 'color', 'primary')
   return props.color
 })
-const computedDisabled = computed(() => {
-  if (!props.disabled) return false
-  if (typeof props.disabled === 'function') return props.disabled()
-  return props.disabled
-})
 const computedTooltip = computed(() => {
   if (computedDisabled.value) return
   // Check also for translation key or already translated message
@@ -211,6 +224,11 @@ const computedBadgeLabel = computed(() => {
   // Take care that changing this to null or '' breaks the display in Quasar
   return undefined
 })
+const computedDisabled = computed(() => {
+  if (!props.disabled) return false
+  if (typeof props.disabled === 'function') return props.disabled()
+  return props.disabled
+})
 const dense = computed(() => {
   return $q.screen.lt.sm
 })
@@ -247,7 +265,6 @@ async function onClicked (event) {
       if (props.toggle) toggle()
       throw error
     }
-    return
   }
   // handle the route case
   if (props.route) {
@@ -261,7 +278,6 @@ async function onClicked (event) {
         params: bindRouteParams('params')
       }, _.omit(props.route, ['query', 'params']))).catch(() => {})
     }
-    return
   }
   // handle the dialog case
   if (props.dialog) {
@@ -270,7 +286,7 @@ async function onClicked (event) {
     if (component) {
       dialog = {
         component: 'KDialog',
-        componentProps: _.clone(dialog)
+        componentProps: bindProperties(_.cloneDeep(dialog), props.context)
       }
     }
     $q.dialog(dialog)
@@ -299,9 +315,13 @@ defineExpose({
 
 <style lang="scss" scoped>
 .k-action-fab, .k-action-fab-action {
-  border: 2px solid var(--q-secondary);
+  border: 2px solid;
+  border-color: v-bind(computedColor) - 75%; 
 }
 .k-action-tab-active {
   border-bottom: solid 2px;
 }
+.k-action-toggled {
+  background-color: #efefef !important;
+}
 </style>

package/core/client/components/action/KBugReportAction.vue

@@ -9,9 +9,9 @@
 import _ from 'lodash'
 import config from 'config'
 import { ref } from 'vue'
-import { i18n } from '../../i18n'
-import { getPlatform } from '../../utils/utils.platform'
-import { actionProps } from '../../utils/utils.actions'
+import { i18n } from '../../i18n.js'
+import { Platform } from '../../platform.js'
+import { actionProps } from '../../utils/utils.actions.js'
 import { useVersion } from '../../composables'
 import KAction from './KAction.vue'
 
@@ -20,7 +20,6 @@ const props = defineProps(_.omit(actionProps, ['toggle', 'url', 'handler', 'rout
 
 // Data
 const { clientVersionName, apiVersionName } = useVersion()
-const platform = getPlatform()
 
 // Setup bug report info
 const bugReport = {
@@ -32,8 +31,8 @@ const bugReport = {
   }),
   body: i18n.t('KAbout.BUG_REPORT_BODY')
 }
-_.forOwn(platform, (value, key) => { bugReport.body += `${key}: ${value}%0D%0A` })
 bugReport.body += `domain: ${_.get(config, 'domain')}%0D%0A`
 bugReport.body += `flavor: ${_.get(config, 'flavor')}%0D%0A`
+bugReport.body += JSON.stringify(Platform.getData(), null, 2)
 const url = ref(`mailto:${bugReport.address}?subject=${bugReport.subject}&body=${bugReport.body}`)
 </script>