@kalisio/kdk 1.3.5 → 1.4.2

package/lib/core/client/components/frame/KChart.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="chart-container" class="row">
+    <q-resize-observer @resize="onResized" />
+    <canvas class="col-12" ref="chart"></canvas>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import chroma from 'chroma-js'
+import { Chart } from 'chart.js'
+
+export default {
+  name: 'k-chart',
+  props: {
+    config: {
+      type: Object,
+      required: true,
+      validator: (value) => {
+        return _.has(value, 'type') && _.has(value, 'data') && _.has(value, 'options')
+      }
+    }
+  },
+  watch: {
+    config: {
+      async handler () {
+        if (this.chart.config.type !== this.config.type) {
+          // Create a new chart
+          this.chart.destroy()
+          const config = _.cloneDeep(this.config)
+          this.colorize(config.data.datasets)
+          this.chart = new Chart(this.$refs.chart.getContext('2d'), config)
+        } else {
+          // Update the existing chart
+          this.chart.data.labels = _.cloneDeep(this.config.data.labels)
+          this.chart.data.datasets = _.cloneDeep(this.config.data.datasets)
+          this.colorize(this.chart.data.datasets)
+          this.chart.options = _.cloneDeep(this.config.options)
+          this.chart.update()
+        }
+      }
+    }
+  },
+  methods: {
+    colorize (datasets) {
+      _.forEach(datasets, dataset => {
+        if (!dataset.backgroundColor && dataset.colorScale) {
+          dataset.backgroundColor = chroma.scale(dataset.colorScale).colors(dataset.data.length)
+        }
+      })
+    },
+    onResized (size) {
+      if (!this.chart) this.chart = new Chart(this.$refs.chart.getContext('2d'), this.config)
+    }
+  },
+  beforeDestroy () {
+    if (this.chart) this.chart.destroy()
+  }
+}
+</script>

package/lib/core/client/components/frame/KChipsPane.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="row justify-start items-center q-gutter-x-sm">
+    <template v-for="(chip,index) in chips">
+      <q-chip
+        v-if="getValue(chip)"
+        :key="getValue(chip)"
+        :color="getColor(chip)"
+        text-color="white"
+        dense
+        outline
+        square>
+        <q-icon v-if="hasIcon(chip)" :name="getIcon(chip)" class="q-mr-xs" />
+        <span :id="getValue(chip)" class="ellipsis">{{ getValue(chip) }}
+          <q-tooltip v-if="tooltips[index]">
+            {{ getValue(chip) }}
+          </q-tooltip>
+        </span>
+      </q-chip>
+    </template>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { getIconName } from '../../utils'
+
+export default {
+  name: 'k-chips-pane',
+  props: {
+    chips: {
+      type: Array,
+      required: true
+    },
+    valuePath: {
+      type: [String, Array],
+      default: 'value'
+    }
+  },
+  data () {
+    return {
+      tooltips: _.fill(Array(this.chips.length), false)
+    }
+  },
+  methods: {
+    getValue (chip) {
+      if (typeof this.valuePath === 'string') return _.get(chip, this.valuePath, this.$t('UNAMED'))
+      for (let i = 0; i < this.valuePath.length; i++) {
+        const path = this.valuePath[i]
+        if (_.has(chip, path)) return _.get(chip, path)
+      }
+      return this.$t('UNAMED')
+    },
+    getColor (chip) {
+      const color = _.get(chip, 'icon.color')
+      return _.isEmpty(color) ? 'black' : color
+    },
+    hasIcon (chip) {
+      const icon = chip.icon
+      if (!icon) return false
+      if (typeof icon === 'object') return !_.isEmpty(icon.name)
+      return true
+    },
+    getIcon (chip) {
+      return getIconName(chip)
+    }
+  },
+  beforeCreate () {
+    this.$options.components['k-panel'] = this.$load('frame/KPanel')
+  },
+  mounted () {
+    this.$nextTick(() => {
+      for (let i = 0; i < this.chips.length; i++) {
+        const chip = this.chips[i]
+        const chipElement = document.getElementById(this.getValue(chip))
+        if (chipElement && chipElement.offsetWidth < chipElement.scrollWidth) this.$set(this.tooltips, i, true)
+      }
+    })
+  }
+}
+</script>

package/lib/core/client/components/frame/KContent.vue

@@ -41,7 +41,7 @@ export default {
       type: String,
       default: 'button',
       validator: (value) => {
-        return ['button', 'item'].includes(value)
+        return ['button', 'form-button', 'item'].includes(value)
       }
     }
   },

package/lib/core/client/components/frame/KModal.vue

@@ -5,36 +5,48 @@
     :maximized="maximized"
     @show="$emit('opened')"
     @hide="$emit('closed')">
-    <q-card :class="contentClass" :style="maximized ? '' : contentStyle">
+    <q-card
+      v-bind:class="{
+        'column full-height': maximized,
+        'q-pa-sm': $q.screen.gt.xs,
+        'q-ps-xs': $q.screen.lt.sm
+      }"
+      :style="computedStyle">
       <!--
-         Toolbar section
+         Header section
        -->
-      <q-toolbar>
-        <q-toolbar-title>
-          <span class="ellipsis">{{ title }}</span>
-        </q-toolbar-title>
-        <q-space />
-        <k-panel id="modal-toolbar" :content="toolbarContent" />
-      </q-toolbar>
+      <div class="q-pa-md row justify-between items-center">
+        <span class="ellipsis text-h6" v-html="title" />
+        <k-panel id="modal-toolbar" :content="toolbar" />
+      </div>
       <!--
         Content section
        -->
-      <q-card-section>
+      <q-card-section class="col">
         <slot name="modal-content" />
       </q-card-section>
       <!--
         Buttons section
        -->
       <q-card-actions v-if="buttons" align="right">
-        <k-panel id="modal-buttons" :content="buttons" renderer="form-button" />
+        <k-panel
+          id="modal-buttons"
+          :content="buttons"
+          :action-renderer="'form-button'"
+          v-bind:class="{ 'q-gutter-x-md' : $q.screen.gt.xs, 'q-gutter-x-sm': $q.screen.lt.sm }" />
       </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
 
 <script>
+import KPanel from './KPanel.vue'
+
 export default {
   name: 'k-modal',
+  components: {
+    KPanel
+  },
   props: {
     title: {
       type: String,
@@ -52,41 +64,19 @@ export default {
       type: Boolean,
       default: false
     },
-    contentClass: {
-      type: String,
-      default: 'q-pa-xs'
-    },
-    contentStyle: {
-      type: String,
-      default: () => {
-        if (window.innerWidth < 599) {
-          return 'min-width: 100vw; max-height: 90vh'
-        }
-        if (window.innerWidth < 1023) {
-          return 'min-width: 80vw; max-height: 90vh'
-        }
-        if (window.innerWidth < 1439) {
-          return 'min-width: 60vw; max-height: 90vh'
-        }
-        if (window.innerWidth < 1919) {
-          return 'min-width: 50vw; max-height: 90vh'
-        }
-        return 'min-width: 40vw; max-height: 90vh'
-      }
-    },
     value: {
       type: Boolean,
       default: false
     }
   },
   computed: {
-    toolbarContent () {
-      if (!this.toolbar) {
-        return [
-          { id: 'close-action', icon: 'las la-times', tooltip: 'KModal.CLOSE_ACTION', handler: () => this.close() }
-        ]
-      }
-      return this.toolbar
+    computedStyle () {
+      if (this.maximized) return ''
+      if (this.$q.screen.lt.sm) return 'min-width: 100vw; max-height: 90vh'
+      if (this.$q.screen.lt.md) return 'min-width: 90vw; max-height: 90vh'
+      if (this.$q.screen.lt.lg) return 'min-width: 80vw; max-height: 90vh'
+      if (this.$q.screen.lt.xl) return 'min-width: 70vw; max-height: 90vh'
+      return 'min-width: 60vw; max-height: 90vh'
     }
   },
   watch: {
@@ -108,10 +98,6 @@ export default {
       this.$emit('input', false)
     }
   },
-  created () {
-    // load the required components
-    this.$options.components['k-panel'] = this.$load('frame/KPanel')
-  },
   mounted () {
     if (this.value) this.$refs.modal.show()
   }

package/lib/core/client/components/frame/KPanel.vue

@@ -2,7 +2,7 @@
   <k-content class="bg-white"
     v-bind="$props"
     v-bind:class="{
-      'row justify-center': direction === 'horizontal',
+      'row items-center justify-center no-wrap': direction === 'horizontal',
       'column': direction === 'vertical'
     }"
     @triggered="$emit('triggered', arguments)" />

package/lib/core/client/components/frame/{KMenu.vue → KPopupAction.vue}

@@ -33,10 +33,14 @@
 <script>
 import _ from 'lodash'
 import KAction from './KAction.vue'
+import KPanel from './KPanel.vue'
 
 export default {
-  components: { KAction },
-  name: 'k-menu',
+  components: {
+    KAction,
+    KPanel
+  },
+  name: 'k-popup-action',
   props: {
     id: {
       type: String,
@@ -110,11 +114,6 @@ export default {
     hasContent () {
       return !_.isEmpty(this.content)
     }
-  },
-  created () {
-    // load the required components
-    this.$options.components['k-action'] = this.$load('frame/KAction')
-    this.$options.components['k-panel'] = this.$load('frame/KPanel')
   }
 }
 </script>

package/lib/core/client/components/frame/KSpot.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="q-pa-xs">
+    <div :style="`min-width: ${width}; height: ${height}; border-radius: ${borderRadius}; background-color: ${color};`" />
+  </div>
+</template>
+
+<script>
+import { colors } from 'quasar'
+
+export default {
+  name: 'k-spot',
+  props: {
+    color: {
+      type: String,
+      default: colors.getBrand('primary')
+    },
+    width: {
+      type: String,
+      default: '15px'
+    },
+    height: {
+      type: String,
+      default: '15px'
+    },
+    borderRadius: {
+      type: String,
+      default: '10px'
+    }
+  }
+}
+</script>

package/lib/core/client/components/frame/KStamp.vue

@@ -0,0 +1,62 @@
+<template>
+  <div
+    v-bind:class="{
+      'q-pl-xs q-pr-xs': $q.screen.lt.sm,
+      'q-pl-sm q-pr-sm': $q.screen.gt.xs,
+      'column items-center content-center q-gutter-y-sm': direction === 'vertical',
+      'row items-center no-wrap q-gutter-x-sm': direction === 'horizontal'
+    }">
+      <div>
+        <q-icon v-if="showIcon" :size="iconSize" :name="icon" />
+          <q-tooltip v-if="!showText">
+            {{ translatedText }}
+          </q-tooltip>
+      </div>
+      <div v-if="showText" class="ellipsis-2-lines" :style="`font-size: ${textSize};`">
+         {{ translatedText }}
+      </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+export default {
+  name: 'k-stamp',
+  props: {
+    icon: {
+      type: String,
+      default: undefined
+    },
+    iconSize: {
+      type: String,
+      default: '2rem'
+    },
+    text: {
+      type: String,
+      defatult: ''
+    },
+    textSize: {
+      type: String,
+      default: '1rem'
+    },
+    direction: {
+      type: String,
+      default: 'vertical',
+      validator: (value) => {
+        return ['horizontal', 'vertical'].includes(value)
+      }
+    }
+  },
+  computed: {
+    translatedText () {
+      return this.$i18n.i18next.exists(this.text) ? this.$t(this.text) : this.text
+    },
+    showIcon () {
+      return !_.isEmpty(this.icon)
+    },
+    showText () {
+      return this.direction === 'vertical' || _.isEmpty(this.icon) || this.$q.screen.gt.xs
+    }
+  }
+}
+</script>

package/lib/core/client/components/frame/index.js

@@ -3,28 +3,83 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KTextArea = exports.KScreen = exports.KModal = exports.KBlock = undefined;
+exports.KTextArea = exports.KStamp = exports.KSpot = exports.KScreen = exports.KPopupAction = exports.KPanel = exports.KPageSticky = exports.KOpener = exports.KModal = exports.KContent = exports.KChipsPane = exports.KChart = exports.KBlock = exports.KAvatar = exports.KAction = undefined;
+
+var _KAction = require('./KAction.vue');
+
+var _KAction2 = _interopRequireDefault(_KAction);
+
+var _KAvatar = require('./KAvatar.vue');
+
+var _KAvatar2 = _interopRequireDefault(_KAvatar);
 
 var _KBlock = require('./KBlock.vue');
 
 var _KBlock2 = _interopRequireDefault(_KBlock);
 
+var _KChart = require('./KChart.vue');
+
+var _KChart2 = _interopRequireDefault(_KChart);
+
+var _KChipsPane = require('./KChipsPane.vue');
+
+var _KChipsPane2 = _interopRequireDefault(_KChipsPane);
+
+var _KContent = require('./KContent.vue');
+
+var _KContent2 = _interopRequireDefault(_KContent);
+
 var _KModal = require('./KModal.vue');
 
 var _KModal2 = _interopRequireDefault(_KModal);
 
+var _KOpener = require('./KOpener.vue');
+
+var _KOpener2 = _interopRequireDefault(_KOpener);
+
+var _KPageSticky = require('./KPageSticky.vue');
+
+var _KPageSticky2 = _interopRequireDefault(_KPageSticky);
+
+var _KPanel = require('./KPanel.vue');
+
+var _KPanel2 = _interopRequireDefault(_KPanel);
+
+var _KPopupAction = require('./KPopupAction.vue');
+
+var _KPopupAction2 = _interopRequireDefault(_KPopupAction);
+
 var _KScreen = require('./KScreen.vue');
 
 var _KScreen2 = _interopRequireDefault(_KScreen);
 
+var _KSpot = require('./KSpot.vue');
+
+var _KSpot2 = _interopRequireDefault(_KSpot);
+
+var _KStamp = require('./KStamp.vue');
+
+var _KStamp2 = _interopRequireDefault(_KStamp);
+
 var _KTextArea = require('./KTextArea.vue');
 
 var _KTextArea2 = _interopRequireDefault(_KTextArea);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+exports.KAction = _KAction2.default;
+exports.KAvatar = _KAvatar2.default;
 exports.KBlock = _KBlock2.default;
+exports.KChart = _KChart2.default;
+exports.KChipsPane = _KChipsPane2.default;
+exports.KContent = _KContent2.default;
 exports.KModal = _KModal2.default;
+exports.KOpener = _KOpener2.default;
+exports.KPageSticky = _KPageSticky2.default;
+exports.KPanel = _KPanel2.default;
+exports.KPopupAction = _KPopupAction2.default;
 exports.KScreen = _KScreen2.default;
+exports.KSpot = _KSpot2.default;
+exports.KStamp = _KStamp2.default;
 exports.KTextArea = _KTextArea2.default;
 //# sourceMappingURL=index.js.map

package/lib/core/client/components/frame/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../core/client/components/frame/index.js"],"names":["KBlock","KModal","KScreen","KTextArea"],"mappings":";;;;;;;AAAA;;;;AACA;;;;AACA;;;;AACA;;;;;;QAGEA,M,GAAAA,gB;QACAC,M,GAAAA,gB;QACAC,O,GAAAA,iB;QACAC,S,GAAAA,mB","file":"index.js","sourcesContent":["import KBlock from './KBlock.vue'\r\nimport KModal from './KModal.vue'\r\nimport KScreen from './KScreen.vue'\r\nimport KTextArea from './KTextArea.vue'\r\n\r\nexport {\r\n  KBlock,\r\n  KModal,\r\n  KScreen,\r\n  KTextArea\r\n}\r\n"]}
+{"version":3,"sources":["../../../../../core/client/components/frame/index.js"],"names":["KAction","KAvatar","KBlock","KChart","KChipsPane","KContent","KModal","KOpener","KPageSticky","KPanel","KPopupAction","KScreen","KSpot","KStamp","KTextArea"],"mappings":";;;;;;;AAAA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;;;QAGEA,O,GAAAA,iB;QACAC,O,GAAAA,iB;QACAC,M,GAAAA,gB;QACAC,M,GAAAA,gB;QACAC,U,GAAAA,oB;QACAC,Q,GAAAA,kB;QACAC,M,GAAAA,gB;QACAC,O,GAAAA,iB;QACAC,W,GAAAA,qB;QACAC,M,GAAAA,gB;QACAC,Y,GAAAA,sB;QACAC,O,GAAAA,iB;QACAC,K,GAAAA,e;QACAC,M,GAAAA,gB;QACAC,S,GAAAA,mB","file":"index.js","sourcesContent":["import KAction from './KAction.vue'\r\nimport KAvatar from './KAvatar.vue'\r\nimport KBlock from './KBlock.vue'\r\nimport KChart from './KChart.vue'\r\nimport KChipsPane from './KChipsPane.vue'\r\nimport KContent from './KContent.vue'\r\nimport KModal from './KModal.vue'\r\nimport KOpener from './KOpener.vue'\r\nimport KPageSticky from './KPageSticky.vue'\r\nimport KPanel from './KPanel.vue'\r\nimport KPopupAction from './KPopupAction.vue'\r\nimport KScreen from './KScreen.vue'\r\nimport KSpot from './KSpot.vue'\r\nimport KStamp from './KStamp.vue'\r\nimport KTextArea from './KTextArea.vue'\r\n\r\nexport {\r\n  KAction,\r\n  KAvatar,\r\n  KBlock,\r\n  KChart,\r\n  KChipsPane,\r\n  KContent,\r\n  KModal,\r\n  KOpener,\r\n  KPageSticky,\r\n  KPanel,\r\n  KPopupAction,\r\n  KScreen,\r\n  KSpot,\r\n  KStamp,\r\n  KTextArea\r\n}\r\n"]}

package/lib/core/client/components/input/KColorChooser.vue

@@ -1,5 +1,5 @@
 <template>
-  <k-modal ref="modal" :toolbar="getToolbar()" :buttons="getButtons()">
+  <k-modal ref="modal" :buttons="getButtons()">
     <div slot="modal-content">
       <div class="column q-gutter-sm">
         <div class="row justify-between items-center q-gutter-sm">
@@ -19,14 +19,22 @@ export default {
     }
   },
   methods: {
-    getToolbar () {
-      return [
-        { id: 'close-action', label: this.$t('KColorChooser.CLOSE_ACTION'), icon: 'las la-times', handler: () => this.doClose() }
-      ]
-    },
     getButtons () {
       return [
-        { id: 'done-button', label: this.$t('KColorChooser.DONE_BUTTON'), color: 'primary', handler: (event) => this.doDone(event) }
+        {
+          id: 'cancel-action',
+          label: 'KColorChooser.CANCEL_BUTTON',
+          icon: 'las la-times',
+          renderer: 'form-button',
+          outline: true,
+          handler: () => this.doClose()
+        },
+        {
+          id: 'done-button',
+          label: 'KColorChooser.DONE_BUTTON',
+          renderer: 'form-button',
+          handler: (event) => this.doDone(event)
+        }
       ]
     },
     open (defaultColor) {
@@ -45,7 +53,7 @@ export default {
       this.$refs.modal.close()
     }
   },
-  async created () {
+  beforeCreate () {
     // Load the required components
     this.$options.components['k-modal'] = this.$load('frame/KModal')
     this.$options.components['k-palette'] = this.$load('input/KPalette')

package/lib/core/client/components/input/KIconChooser.vue

@@ -149,7 +149,8 @@ export default {
     },
     getButtons () {
       return [
-        { id: 'done-button', label: this.$t('KIconChooser.DONE_BUTTON'), color: 'primary', renderer: 'form-button', handler: (event) => this.doDone(event) }
+        { id: 'cancel-button', label: 'CANCEL', outline: true, renderer: 'form-button', handler: () => this.doClose() },
+        { id: 'choose-button', label: 'KIconChooser.DONE_BUTTON', renderer: 'form-button', handler: (event) => this.doDone(event) }
       ]
     },
     open (defaultIcon) {

package/lib/core/client/components/input/KUploader.vue

@@ -189,7 +189,13 @@ export default {
       this.$events.$emit('error', { message: error })
     },
     storageService () {
-      return this.$api.getService(this.options.service || 'storage')
+      let service = _.get(this.options, 'service', 'storage')
+      // Inject useful properties such as current object ID, etc.
+      const environment = { id: this.resource }
+      // The template generates the final storage service path
+      service = _.template(service)(environment)
+
+      return this.$api.getService(service)
     },
     dropZone () {
       // Access vue drop zone
@@ -220,10 +226,13 @@ export default {
         // Uploading can require a long time
         timeout: 60 * 60 * 1000 // 1h should be sufficient since we also have size limits
       }, options, dictionary)
-      // Depending on the transport the path starts or not with '/'
-      let servicePath = this.storageService().path
-      if (!servicePath.startsWith('/')) servicePath = '/' + servicePath
-      this.dropZoneOptions.url = this.$api.getBaseUrl() + servicePath
+      // We use a function as the service path might be templated by the underlying resource
+      this.dropZoneOptions.url = () => {
+        // Depending on the transport the path starts or not with '/'
+        let servicePath = this.storageService().path
+        if (!servicePath.startsWith('/')) servicePath = '/' + servicePath
+        return this.$api.getBaseUrl() + servicePath
+      }
       // This is used to ensure the request will be authenticated by Feathers
       this.dropZoneOptions.headers = { Authorization: accessToken }
     },

package/lib/core/client/components/layout/KAbout.vue

@@ -19,7 +19,11 @@
     <!--
       About window
      -->
-    <k-modal :title="$t('KAbout.TITLE')" id="about" ref="about">
+    <k-modal
+      :title="$t('KAbout.TITLE')"
+      id="about"
+      ref="about"
+      :buttons="getButtons()">
       <div slot="modal-content">
         <div class="column justify-center">
           <!-- Banner -->
@@ -94,8 +98,10 @@ export default {
       this.$refs.about.open()
       this.$emit('triggered')
     },
-    onAboutClosed () {
-      this.$refs.about.close()
+    getButtons () {
+      return [{
+        id: 'close-action', label: 'CLOSE', renderer: 'form-button', handler: () => this.$refs.about.close()
+      }]
     }
   },
   created () {

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="actions">
+  <div v-if="actions" id="fab-container">
     <!--
       Render an expandable fab if more than one action is provided
      -->