@kalisio/kdk 2.5.2 → 2.6.0

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

@@ -0,0 +1,229 @@
+<template>
+  <div v-if="readOnly && model" :id="properties.name + '-field'">
+    <q-chip :color="model.color" dense>
+      {{ model.name }}
+    </q-chip>
+  </div>
+  <q-select v-else
+    ref="select"
+    :for="properties.name + '-field'"
+    :id="properties.name + '-field'"
+    v-model="items"
+    :label="label"
+    :multiple="properties.multiselect"
+    autocomplete="off"
+    hide-dropdown-icon
+    use-input
+    :clearable="isClearable()"
+    :error-message="errorLabel"
+    :error="hasError"
+    :disable="disabled"
+    bottom-slots
+    :options="options"
+    @filter="onSearch"
+    @update:model-value="onSelected">
+    <!-- Value display -->
+    <template v-slot:selected-item="scope">
+      <KChip
+        v-bind="scope.opt"
+        :label="scope.opt.name"
+        square
+        removable
+        @remove="scope.removeAtIndex(scope.index)"
+      />
+    </template>
+    <!-- Options display -->
+    <template v-slot:option="scope">
+      <q-item
+        v-bind="scope.itemProps"
+        :id="getId(scope.opt)"
+      >
+        <q-item-section v-if="scope.opt.create" class="col-auto">
+          {{ $t('KTagManager.CREATE_TAG_ON_THE_FLY')}}
+        </q-item-section>
+        <q-item-section>
+          <KChip v-bind="scope.opt" :label="scope.opt.name" />
+        </q-item-section>
+        <q-item-section v-if="!scope.opt.create" class="col-auto">
+          <KPanel
+              id="tag-actions"
+              :content="getActions(scope.opt)"/>
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script>
+import _ from 'lodash'
+import logger from 'loglevel'
+import { api } from '../../api.js'
+import { Search } from '../../search'
+import { baseField } from '../../mixins'
+import KChip from '../KChip.vue'
+
+export default {
+  mixins: [baseField],
+  components: {
+    KChip
+  },
+  data () {
+    return {
+      items: null,
+      options: [],
+      searchString: ''
+    }
+  },
+  computed: {
+    hasSingleService () {
+      const services = _.uniqBy(this.properties.services, 'service')
+      return services.length === 1
+    }
+  },
+  methods: {
+    getServiceForItem (item) {
+      return (this.hasSingleService
+        ? this.properties.services[0]
+        : _.find(this.properties.services, { service: item.service }))
+    },
+    getId (item) {
+      return _.kebabCase(this.getLabel(item))
+    },
+    getLabel (item) {
+      const service = this.getServiceForItem(item)
+      return _.get(item, service.field || 'name', '')
+    },
+    getActions (item) {
+      if (item.scope !== 'user') return []
+      const actions = [{
+        id: 'item-field-actions',
+        component: 'menu/KMenu',
+        dropdownIcon: 'las la-ellipsis-v',
+        actionRenderer: 'item',
+        propagate: false,
+        dense: true,
+        content: [
+          {
+            id: 'edit-tag',
+            icon: 'las la-edit',
+            label: 'KTagManager.EDIT_TAG',
+            dialog: {
+              component: 'KEditor',
+              service: 'tags',
+              object: item,
+              hideButtons: true,
+              schema: 'tags.update',
+              cancelAction: 'CANCEL',
+              baseObject: {
+                service: _.get(this.properties, 'field.service'),
+                property: _.get(this.properties, 'field.property')
+              },
+              afterRequest: () => {
+                // Trigger a re-render of the select component
+                this.$refs.select.updateInputValue(this.searchString)
+                return { isOk: true }
+              },
+              okAction: {
+                id: 'ok-button',
+                label: 'APPLY',
+                handler: 'apply'
+              }
+            }
+          },
+          {
+            id: 'delete-tag',
+            icon: 'las la-trash',
+            label: 'KTagManager.DELETE_TAG',
+            context: item,
+            handler: this.deleteTag
+          }
+        ]
+      }]
+      return actions
+    },
+    isClearable () {
+      return _.get(this.properties, 'field.clearable', true)
+    },
+    emptyModel () {
+      if (this.properties.multiselect) return []
+      return null
+    },
+    fill (value) {
+      this.model = value
+      this.items = _.clone(value)
+    },
+    async onSearch (pattern, update, abort) {
+      if (pattern.length < _.get(this.properties, 'minCharsToSearch', 2)) {
+        abort()
+        return
+      }
+      this.searchString = pattern
+      const results = await Search.query(this.properties.services, pattern)
+      update(() => {
+        if (this.properties.multiselect) {
+          this.options = _.differenceWith(results, this.items, (item1, item2) => {
+            return _.get(item1, 'name') === _.get(item2, 'name') && _.get(item1, 'color') === _.get(item2, 'color')
+          })
+        } else this.options = results
+
+        // Add the current pattern as an option if it is not already present
+        const hasInvalidMinLength = pattern.length < _.get(this.properties, 'minLength', 0)
+        const hasInvalidMaxLength = pattern.length > _.get(this.properties, 'maxLength', 256)
+        if (hasInvalidMinLength || hasInvalidMaxLength) return
+        this.options = _.filter(this.options, (item) => !item.create)
+        if (pattern !== '' && !_.find(results, { name: pattern })) {
+          this.options.push({
+            name: pattern,
+            color: 'grey',
+            create: true
+          })
+        }
+      })
+    },
+    async onSelected (value) {
+      if (value) {
+        this.model = this.items
+      } else this.model = this.emptyModel()
+      this.options = []
+      this.$refs.select.updateInputValue('')
+      this.onChanged()
+
+      if (!this.model) return
+      for (const item of this.model) {
+        if (item.create) {
+          const service = api.getService('tags')
+
+          if (!_.get(this.properties, 'field.service') || !_.get(this.properties, 'field.property')) {
+            logger.error('[KDK] KTagField: Missing service or property in field definition for tag creation.')
+            return
+          }
+
+          const hasInvalidMinLength = item.name.length < _.get(this.properties, 'minLength', 0)
+          const hasInvalidMaxLength = item.name.length > _.get(this.properties, 'maxLength', 256)
+          if (hasInvalidMinLength || hasInvalidMaxLength) {
+            logger.error(`[KDK] KTagField: Tag name "${item.name}" is invalid. It must be between ${_.get(this.properties, 'minLength', 0)} and ${_.get(this.properties, 'maxLength', 256)} characters long.`)
+            return
+          }
+
+          _.defaults(item, {
+            service: this.properties.field.service,
+            property: this.properties.field.property,
+            scope: 'user',
+            color: 'grey',
+            description: ''
+          })
+          delete item.create
+          await service.create(item)
+        }
+      }
+    },
+    async deleteTag (item) {
+      const service = api.getService('tags')
+      await service.remove(item._id)
+      // Trigger a re-render of the select component
+      this.$refs.select.updateInputValue(this.searchString)
+    }
+  }
+}
+
+</script>

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

@@ -14,6 +14,7 @@
     :error="hasError"
     :error-message="errorLabel"
     bottom-slots
+    :debounce="debounce"
     @blur="onChanged"
     @update:model-value='onChanged'
   >
@@ -47,6 +48,9 @@ export default {
       } else {
         return this.model
       }
+    },
+    debounce () {
+      return _.get(this.properties, 'field.debounce', 0)
     }
   },
   methods: {

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

@@ -19,10 +19,12 @@
           v-model="model"
           :definitions="definitions"
           :toolbar="editorToolbar"
+          :content-style="{ overflowWrap: 'anywhere' }"
           content-class="text-grey-8"
           min-height="5rem"
           max-height="10rem"
-          dense />
+          dense
+        />
       </div>
     </template>
     <!-- Helper -->

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

@@ -22,16 +22,16 @@
 <script setup>
 import _ from 'lodash'
 import { ref, watch, computed } from 'vue'
-import { utils as kdkCoreUtils } from '@kalisio/kdk/core.client'
+import { Shapes } from '../../utils/utils.shapes.js'
 import KShape from '../media/KShape.vue'
 
 // Props
 const props = defineProps({
   modelValue: {
     type: String,
-    default: 'rect',
+    default: 'circle',
     validator: (value) => {
-      return _.keys(kdkCoreUtils.Shapes).includes(value)
+      return _.concat(['none'], _.keys(Shapes)).includes(value)
     }
   },
   size: {
@@ -45,8 +45,8 @@ const emit = defineEmits(['update:modelValue'])
 
 // Data
 const popupProxyRef = ref(null)
-const shape = ref(props.modelValue)
-const shapeTypes = _.keys(kdkCoreUtils.Shapes)
+const shapeTypes = _.concat(['none'], _.keys(Shapes))
+const shape = ref(shapeTypes.includes(props.modelValue) ? props.modelValue : 'circle')
 const shapeSizes = {
   xs: 14,
   sm: 16,

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

@@ -7,18 +7,20 @@
       id="fab"
       v-model="isOpened"
       :icon="icon"
-      class="k-fab"
-      :vertical-actions-align="actionsAlign"
+      :padding="padding"
+      vertical-actions-align="center"
       :direction="direction"
-      color="primary"
-      persistent>
+      :color="color"
+      persistent
+      class="k-fab"
+    >
       <!-- Render a grid menu if the number of actions is higher than the expandable limit -->
       <q-menu v-if="actions.length > expandableLimit" v-model="isOpened" ref="menu" persistent fit anchor="top left" self="bottom right">
         <div class="q-pa-sm row" style="max-width: 50vw">
           <template v-for="action in actions" :key="action.id">
             <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <KAction
-                color="primary"
+                :color="color"
                 v-bind="action"
                 renderer="item"
                 v-on="action.on ? { [action.on.event]: action.on.listener } : {}"
@@ -32,11 +34,11 @@
       <div v-else>
         <template v-for="action in actions" :key="action.id">
           <KAction
-            color="primary"
+            :color="color"
             v-bind="action"
             renderer="fab-action"
+            :iconRight="alignment === 'left' ? true : false"
             v-on="action.on ? { [action.on.event]: action.on.listener } : {}"
-            :iconRight="actionsAlign === 'left' ? true : false"
           />
         </template>
       </div>
@@ -45,9 +47,8 @@
       Render a non expandable fab if a single action is provided
      -->
     <KAction v-else-if="actions.length === 1"
-      color="primary"
+      :color="color"
       v-bind="actions[0]"
-      size="1.15rem"
       renderer="fab"
       v-on="actions[0].on ? { [actions[0].on.event]: actions[0].on.listener } : {}"
     />
@@ -57,14 +58,25 @@
 <script setup>
 import _ from 'lodash'
 import { ref, computed } from 'vue'
-import { Layout } from '../../layout'
 import KAction from '../action/KAction.vue'
 
 // Props
-defineProps({
-  expandableLimit: {
-    type: Number,
-    default: 8
+const props = defineProps({
+  content: {
+    type: Array,
+    default: () => null
+  },
+  icon: {
+    type: String,
+    default: 'las la-ellipsis-v'
+  },
+  color: {
+    type: String,
+    default: 'primary'
+  },
+  padding: {
+    type: String,
+    default: 'md'
   },
   direction: {
     type: String,
@@ -73,27 +85,27 @@ defineProps({
       return ['up', 'down'].includes(value)
     }
   },
-  actionsAlign: {
+  alignment: {
     type: String,
     required: true,
     validator: (value) => {
       return ['left', 'right'].includes(value)
     }
+  },
+  expandableLimit: {
+    type: Number,
+    default: 8
   }
 })
 
 // Data
-const fab = Layout.getFab()
 const isOpened = ref(false)
 
 // Computed
-const icon = computed(() => {
-  return fab.icon || 'las la-ellipsis-v'
-})
 const actions = computed(() => {
   const actions = []
   // Apply filtering
-  _.forEach(fab.components, (action) => {
+  _.forEach(props.content, (action) => {
     let isVisible = _.get(action, 'visible', true)
     // Can be a functional call
     if (typeof isVisible === 'function') {

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

@@ -109,9 +109,11 @@
     >
       <KFab
         id="fab"
-        v-if="fab.visible"
+        v-if="hasFabComponents && fab.visible"
+        :content="fab.components"
+        :icon="fab.icon"
         :direction="fabBehavior.direction"
-        :actions-align="fabBehavior.actionsAlign"
+        :alignment="fabBehavior.alignment"
       />
     </q-page-sticky>
     <!-- left Window -->
@@ -309,12 +311,15 @@ const bottomWindowSize = computed(() => {
 const bottomWindowStyle = computed(() => {
   return { maxWidth: bottomWindowSize[0] + 'px', maxHeight: bottomWindowSize[1] + 'px' }
 })
+const hasFabComponents = computed(() => {
+  return !_.isEmpty(fab.components)
+})
 const fabBehavior = computed(() => {
   switch (fab.position) {
-    case 'bottom-right': return { direction: 'up', actionsAlign: 'left' }
-    case 'bottom-left': return { direction: 'up', actionsAlign: 'right' }
-    case 'top-right': return { direction: 'down', actionsAlign: 'left' }
-    case 'top-left': return { direction: 'down', actionsAlign: 'right' }
+    case 'bottom-right': return { direction: 'up', alignment: 'left' }
+    case 'bottom-left': return { direction: 'up', alignment: 'right' }
+    case 'top-right': return { direction: 'down', alignment: 'left' }
+    case 'top-left': return { direction: 'down', alignment: 'right' }
   }
 })
 const stickiesComponents = computed(() => {

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

@@ -89,6 +89,7 @@
       <div
         :id="`${placement}-window-resize-grip`"
         class="row items-center"
+        style="position: relative"
       >
         <q-icon
           v-if="currentWindow.controls.resize && currentWindow.state !== 'maximized'"
@@ -97,6 +98,10 @@
           size="10px"
           v-touch-pan.prevent.mouse="onResized"
         />
+        <div
+          :id="`${placement}-window-magnet`"
+          style="position: absolute; right: 8px; bottom: 8px;"
+        />
       </div>
     </div>
   </div>

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

@@ -1,13 +1,9 @@
 import KColorScale from './KColorScale.vue'
-import KImageViewer from './KImageViewer.vue'
-import KMarkdownViewer from './KMarkdownViewer.vue'
-import KMediaBrowser from './KMediaBrowser.vue'
+import KRibbon from './KRibbon.vue'
 import KShape from './KShape.vue'
 
 export {
   KColorScale,
-  KMarkdownViewer,
-  KMediaBrowser,
-  KImageViewer,
+  KRibbon,
   KShape
 }

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

@@ -28,16 +28,18 @@
             </div>
           </div>
         </template>
-        <KPanel
-          id="menu-entries"
-          :content="content"
-          :mode="mode"
-          :context="context"
-          :filter="filter"
-          :action-renderer="actionRenderer"
-          :direction="direction"
-          class="no-wrap"
-        />
+        <div class="row">
+          <KPanel
+            id="menu-entries"
+            :content="content"
+            :mode="mode"
+            :context="context"
+            :filter="filter"
+            :action-renderer="actionRenderer"
+            :direction="direction"
+            class="no-wrap"
+          />
+        </div>
     </q-btn-dropdown>
     <q-tooltip v-if="enableTooltip && tooltip">
       {{ tooltip }}

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

@@ -9,18 +9,18 @@
         :persistent="persistent"
         :auto-close="autoClose">
         <div v-hover="{ enter: onShowMenu, leave: onHideMenuRequested }">
-        <q-list>
-          <KPanel
-            id="submenu-entries"
-            :content="content"
-            :mode="mode"
-            :context="context"
-            :filter="filter"
-            :action-renderer="actionRenderer"
-            :direction="direction"
-            class="no-wrap"
-          />
-        </q-list>
+          <div class="row">
+            <KPanel
+              id="submenu-entries"
+              :content="content"
+              :mode="mode"
+              :context="context"
+              :filter="filter"
+              :action-renderer="actionRenderer"
+              :direction="direction"
+              class="no-wrap"
+            />
+          </div>
         </div>
       </q-menu>
     </KAction>

package/core/client/components/messages/KMessageCard.vue

@@ -96,18 +96,17 @@
 </template>
 
 <script>
-import {
-  Document,
-  Storage,
-  composables as kdkCoreComposables,
-  mixins as kdkCoreMixins
-} from '@kalisio/kdk/core.client'
 import _ from 'lodash'
+import { Document } from '../../document.js'
+import { Storage } from '../../storage.js'
+import { api } from '../../api.js'
+import { useScreen } from '../../composables/index.js'
+import { baseItem } from '../../mixins/index.js'
 import KTextArea from '../KTextArea.vue'
 import KCard from '../collection/KCard.vue'
 
 export default {
-  mixins: [kdkCoreMixins.baseItem],
+  mixins: [baseItem],
   props: {
     header: {
       type: [Array, Object],
@@ -187,17 +186,19 @@ export default {
       Storage.export({ file: attachment.name, key, context: this.contextId })
     },
     canEditMessage () {
-      if (this.canEditMessageFn === null) return this.$can('update', 'messages')
-      return this.canEditMessageFn(this.item)
+      const result = this.canEditMessageFn(this.item)
+      if (result === null) return api.can('update', 'messages')
+      return result
     },
     canRemoveMessage () {
-      if (this.canRemoveMessageFn === null) return this.$can('remove', 'messages')
-      return this.canRemoveMessageFn(this.item)
+      const result = this.canRemoveMessageFn(this.item)
+      if (result === null) return api.can('remove', 'messages')
+      return result
     }
   },
   setup () {
     // data
-    const { dense } = kdkCoreComposables.useScreen()
+    const { dense } = useScreen()
     // expose
     return {
       dense

package/core/client/components/messages/KMessageComposer.vue

@@ -6,6 +6,7 @@
     <div class="row justify-between items-center no-wrap">
       <div :class="{ 'q-pa-xs': $q.screen.xs, 'q-pa-sm': $q.screen.gt.xs, 'col-auto': true }">
         <q-fab
+          id="composer-fab"
           :icon="getKindIcon(currentType)"
           :color="getKindColor(currentType)"
           direction="up"
@@ -42,7 +43,7 @@
     <!--
       Editor
      -->
-    <div class="q-pa-sm col">
+    <div class="q-pa-sm full-width col">
       <q-editor
         v-if="editor"
         :placeholder="$t('KMessageComposer.WRITE_YOUR_MESSAGE')"
@@ -57,6 +58,7 @@
         v-else
         :placeholder="$t('KMessageComposer.WRITE_YOUR_MESSAGE')"
         v-model="body"
+        autogrow
         borderless
         dense
         @keydown.enter.prevent="sendMessage"
@@ -87,16 +89,14 @@
 </template>
 
 <script setup>
-import {
-  i18n,
-  composables as kdkCoreComposables,
-  Store
-} from '@kalisio/kdk/core.client'
 import config from 'config'
 import _ from 'lodash'
 import logger from 'loglevel'
 import { Notify, useQuasar } from 'quasar'
 import { computed, ref } from 'vue'
+import { i18n } from '../../i18n.js'
+import { Store } from '../../store.js'
+import { useMessages } from '../../composables/index.js'
 import KUploader from '../document/KUploader.vue'
 
 // Props
@@ -116,6 +116,10 @@ const props = defineProps({
   canSendMessage: {
     type: Boolean,
     default: true
+  },
+  editorModeByDefault: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -123,8 +127,8 @@ const props = defineProps({
 const $q = useQuasar()
 const User = Store.get('user')
 const MessageTypes = props.messageTypes ?? config.messagesActivity.messages
-const { createMessage } = kdkCoreComposables.useMessages()
-const editor = ref(false)
+const { createMessage } = useMessages()
+const editor = ref(props.editorModeByDefault)
 const uploaderRef = ref(null)
 const attachments = ref(null)
 const currentType = ref(_.head(_.keys(MessageTypes)))
@@ -165,6 +169,7 @@ async function sendMessage () {
     type: currentType.value,
     body: body.value,
     author: _.get(User, 'profile.name'),
+    authorId: _.get(User, '_id'),
     attachments: attachments.value
   }
   if (props.baseMessage) _.merge(message, props.baseMessage)
@@ -174,7 +179,6 @@ async function sendMessage () {
     (_.some(attachments.value, (file) => !file.type) ||
       _.some(attachments.value, (file) => !file.name))
   ) {
-    console.error('Invalid file type')
     Notify.create({
       type: 'negative',
       message: i18n.t('KUploader.INVALID_TYPE')