@kalisio/kdk 2.3.2 → 2.4.0

package/core/client/components/document/KDocument.vue

@@ -1,28 +1,23 @@
 <template>
-  <div v-if="content">
-    <KHtml v-if="contentType === 'html'"
-      :content="content"
-    />
-    <KMarkdown v-if="contentType === 'md'"
-      :content="content"
-      :options="options"
+  <div v-if="viewer">
+    <component
+      :is="viewer"
+      v-bind="$props"
     />
   </div>
 </template>
 
 <script setup>
 import _ from 'lodash'
-import logger from 'loglevel'
-import { ref, watch } from 'vue'
-import { i18n } from '../../i18n.js'
-import KHtml from './KHtml.vue'
-import KMarkdown from './KMarkdown.vue'
+import { computed } from 'vue'
+import { Document } from '../../document.js'
+import { loadComponent } from '../../utils'
 
 // Props
 const props = defineProps({
   url: {
     type: String,
-    default: undefined
+    default: null
   },
   localize: {
     type: Boolean,
@@ -34,50 +29,20 @@ const props = defineProps({
   }
 })
 
-// Data
-const contentType = ref(null)
-const content = ref(null)
+// Computed
+const viewer = computed(() => {
+  const mimeType = guessMimeType()
+  if (!mimeType) return null
+  const viewer = _.get(Document.options, `viewers.${mimeType}`)
+  if (!viewer) return null
+  return loadComponent(viewer)
+})
 
 // Function
-function guessContentType () {
+function guessMimeType () {
+  if (!props.url) return null
   const index = _.lastIndexOf(props.url, '.')
-  if (index) {
-    return props.url.substring(index + 1)
-  }
+  if (!index) return null
+  return props.url.substring(index + 1)
 }
-
-// Watch
-watch(() => props.url, async (value) => {
-  if (!_.isEmpty(props.url)) {
-    content.value = null
-    // guess content type
-    contentType.value = guessContentType()
-    if (contentType.value) {
-      let urls
-      // localize file if needed
-      if (props.localize) urls = i18n.localize(props.url)
-      else urls = [props.url]
-      // try to load the content
-      let response
-      for (const url of urls) {
-        try {
-          response = await fetch(url)
-          if (response.ok) {
-            content.value = await response.text()
-            break
-          }
-        } catch (error) {
-          // ignore the error
-        }
-      }
-      if (content.value === null) {
-        logger.error(`[KDK] fetch '${props.url}' failed with error with code: ${response.status}`)
-      }
-    } else {
-      logger.error(`[KDK] cannot guess content type for '${props.url}'`)
-    }
-  } else {
-    content.value = null
-  }
-}, { immediate: true })
 </script>

package/core/client/components/document/KHtml.vue

@@ -1,23 +1,33 @@
 <template>
-  <div v-if="html" v-html="html" />
+  <div
+    v-if="html"
+    v-html="html"
+  />
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
-
-// Data
-const html = ref(null)
+import { Document } from '../../document.js'
 
 // Props
 const props = defineProps({
-  content: {
+  url: {
     type: String,
     default: null
+  },
+  localize: {
+    type: Boolean,
+    default: true
   }
 })
 
+// Data
+const html = ref(null)
+
 // Watch
-watch(() => props.content, async (value) => {
-  html.value = props.content
+watch(() => props.url, async (value) => {
+  const response = await Document.fetchUrl(value, props.localize)
+  if (response?.ok) html.value = Document.sanitizeHtml(await response.text())
+  else html.value = null
 }, { immediate: true })
 </script>

package/core/client/components/document/KImage.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div v-if="interactive === true" class="fit" >
+      <pinch-zoom class="pinch-zoom-controller fit row justify-center items-center" @change="$emit('image-transformed')">
+        <img :src="url" class="fit" :onload="onLoaded" />
+      </pinch-zoom>
+
+    </div>
+    <div v-else class="fit row justify-center items-center">
+      <img :src="url" class="fit" :onload="onLoaded" />
+    </div>
+    <q-spinner
+      class="absolute-center"
+      v-if="loading"
+      color="white"
+      size="3em"
+    />
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, computed, onMounted } from 'vue'
+import 'pinch-zoom-element/dist/pinch-zoom.js'
+
+// Props
+const props = defineProps({
+  url: {
+    type: String,
+    default: ''
+  },
+  options: {
+    type: Object,
+    default: () => {
+      return {
+        interactive: true
+      }
+    }
+  }
+})
+
+// Emit
+defineEmits(['image-transformed'])
+
+// Data
+const loading = ref(true)
+
+// Computed
+const interactive = computed(() => {
+  return _.get(props.options, 'interactive', true)
+})
+
+// Functions
+function restore () {
+  const controller = document.querySelector('.pinch-zoom-controller')
+  if (controller) {
+    controller.setTransform({
+      scale: 1,
+      x: 0,
+      y: 0,
+      allowChangeEvent: true
+    })
+  }
+}
+function onLoaded () {
+  loading.value = false
+}
+
+// Hooks
+onMounted(() => {
+  restore()
+})
+
+// Expose
+defineExpose({
+  restore
+})
+</script>

package/core/client/components/document/KMarkdown.vue

@@ -1,24 +1,23 @@
 <template>
-  <KHtml
+  <div
     v-if="html"
-    :content="html"
+    v-html="html"
   />
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
-import showdown from 'showdown'
-import KHtml from './KHtml.vue'
+import { Document } from '../../document.js'
 
 // Props
 const props = defineProps({
-  content: {
+  url: {
     type: String,
-    default: undefined
+    default: null
   },
-  options: {
-    type: Object,
-    default: () => {}
+  localize: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -26,12 +25,9 @@ const props = defineProps({
 const html = ref(null)
 
 // Watch
-watch(() => [props.content, props.options], async (value) => {
-  if (props.content) {
-    const converter = new showdown.Converter(props.options)
-    html.value = converter.makeHtml(props.content)
-  } else {
-    html.value = null
-  }
+watch(() => props.url, async (value) => {
+  const response = await Document.fetchUrl(value, props.localize)
+  if (response?.ok) html.value = Document.sanitizeHtml(Document.convertMdToHtml(await response.text()))
+  else html.value = null
 }, { immediate: true })
 </script>

package/core/client/components/document/KPdf.vue

@@ -0,0 +1,69 @@
+<template>
+  <div
+    id="viewer"
+    class="fit"
+  />
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { watch, onMounted } from 'vue'
+import { Viewer } from '@pdfme/ui'
+import { Document } from '../../document.js'
+
+// Props
+const props = defineProps({
+  url: {
+    type: String,
+    default: null
+  },
+  localize: {
+    type: Boolean,
+    default: true
+  },
+  options: {
+    type: Object,
+    default: () => {
+      return {
+        schemas: [],
+        inputs: [{ fake: 'fake' }]
+      }
+    }
+  }
+})
+
+// Data
+const defaultSchemas = []
+const defaultInputs = [{ fake: 'fake' }]
+let domViewer
+let viewer
+
+// Watch
+watch(() => props.url, async (value) => {
+  if (viewer) {
+    viewer.destroy()
+    viewer = null
+  }
+  const response = await Document.fetchUrl(value, props.localize)
+  if (response?.ok) {
+    const blob = await response.blob()
+    const reader = new FileReader()
+    reader.onloadend = () => {
+      viewer = new Viewer({
+        domContainer: domViewer,
+        template: {
+          basePdf: reader.result,
+          schemas: _.get(props.options, 'schemas', defaultSchemas)
+        },
+        inputs: _.get(props.options, 'inputs', defaultInputs)
+      })
+    }
+    reader.readAsDataURL(blob)
+  }
+}, { immediate: true })
+
+// Hook
+onMounted(() => {
+  domViewer = document.getElementById('viewer')
+})
+</script>

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

@@ -31,7 +31,7 @@
     @rejected="onFileRejected">
     <!-- Helper -->
     <template v-if="hasHelper" v-slot:append>
-      <k-action
+      <KAction
         :id="properties.name + '-helper'"
         :label="helperLabel"
         :icon="helperIcon"
@@ -141,7 +141,7 @@ export default {
         let context = _.get(this.properties, 'field.storage.context')
         if (context) context = _.template(context)(Object.assign({}, { fileName: this.model.name }, object))
         const query = _.get(this.properties, 'field.storage.uploadQuery')
-        logger.debug(`Uploading file ${this.model.name} with key ${this.model.key}`)
+        logger.debug(`[KDK] Uploading file ${this.model.name} with key ${this.model.key}`)
         Storage.upload({
           file: this.model.name,
           type: this.model.type,

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

@@ -109,7 +109,8 @@ export default {
       handler (opts) {
         if (_.isEmpty(this.filter) && opts.length === 1 && this.required) {
           this.$nextTick(() => {
-            this.model = opts[0].value
+            this.fill(opts[0].value)
+            this.onChanged(opts[0].value)
           })
         }
       }

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

@@ -55,7 +55,9 @@ export default {
   mixins: [baseField],
   computed: {
     options () {
-      const units = Units.getUnits(_.get(this.properties, 'field.quantity'))
+      let units = Units.getUnits(_.get(this.properties, 'field.quantity'))
+      const unitsFilter = _.get(this.properties, 'field.filter', [])
+      if (!_.isEmpty(unitsFilter)) units = _.filter(units, unit => _.includes(unitsFilter, unit.name))
       return units.map(unit => {
         // Check if we have a translation key or directly the label content
         const label = _.get(unit, 'label', '')

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

@@ -15,11 +15,13 @@
       <!-- 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.uid">
+          <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"
                 v-bind="action"
                 renderer="item"
+                v-on="action.on ? { [action.on.event]: action.on.listener } : {}"
                 @triggered="isOpened = false"
               />
             </div>
@@ -28,10 +30,12 @@
       </q-menu>
       <!-- Render an expandable list of actions -->
       <div v-else>
-        <template v-for="action in actions" :key="action.uid">
+        <template v-for="action in actions" :key="action.id">
           <KAction
+            color="primary"
             v-bind="action"
             renderer="fab-action"
+            v-on="action.on ? { [action.on.event]: action.on.listener } : {}"
             :iconRight="actionsAlign === 'left' ? true : false"
           />
         </template>
@@ -41,9 +45,11 @@
       Render a non expandable fab if a single action is provided
      -->
     <KAction v-else-if="actions.length === 1"
+      color="primary"
       v-bind="actions[0]"
       size="1.15rem"
       renderer="fab"
+      v-on="actions[0].on ? { [actions[0].on.event]: actions[0].on.listener } : {}"
     />
   </div>
 </template>
@@ -51,7 +57,6 @@
 <script setup>
 import _ from 'lodash'
 import { ref, computed } from 'vue'
-import { uid } from 'quasar'
 import { Layout } from '../../layout'
 import KAction from '../action/KAction.vue'
 
@@ -86,8 +91,6 @@ const icon = computed(() => {
   return fab.icon || 'las la-ellipsis-v'
 })
 const actions = computed(() => {
-  // let fabActions = fab.mode ? fab.content[fab.mode] : fab.content
-  // if (!fabActions) return null
   const actions = []
   // Apply filtering
   _.forEach(fab.components, (action) => {
@@ -96,11 +99,7 @@ const actions = computed(() => {
     if (typeof isVisible === 'function') {
       isVisible = isVisible()
     }
-    if (isVisible) {
-      action.uid = uid()
-      if (!action.color) action.color = 'primary'
-      actions.push(action)
-    }
+    if (isVisible) actions.push(action)
   })
   return actions
 })

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

@@ -1,13 +1,48 @@
 <template>
   <q-layout
-    v-if="layout"
-    v-bind="layout.options"
+    :view="layout.view"
   >
+    <!-- Left pane -->
+    <div v-if="hasLeftPaneComponents">
+      <q-page-sticky
+        v-if="leftPane.opener"
+        position="left"
+        :offset="[openerOffset, 0]"
+        class="k-left-pane-sticky"
+      >
+        <KOpener
+          id="left-opener"
+          v-model="isLeftPaneOpened"
+          position="left"
+        />
+      </q-page-sticky>
+      <q-drawer
+        id="left-pane"
+        v-model="isLeftPaneOpened"
+        :width="leftPaneSize"
+        side="left"
+        overlay
+        :behavior="$q.platform.is.mobile ? 'mobile' : 'desktop'"
+        no-swipe-open
+        no-swipe-close
+        no-swipe-backdrop
+      >
+        <q-scroll-area class="fit">
+          <KPanel
+            id="left-panel"
+            :content="leftPane.components"
+            :mode="leftPane.mode"
+            :filter="leftPane.filter"
+          />
+        </q-scroll-area>
+      </q-drawer>
+    </div>
     <!-- Header -->
     <q-header
-      v-if="header.components"
+      v-if="hasHeaderComponents"
       v-model="isHeaderVisible"
     >
+      <q-resize-observer @resize="onHeaderResized" />
       <KPanel
         id="header-panel"
         :content="header.components"
@@ -17,9 +52,10 @@
     </q-header>
     <!-- Footer -->
     <q-footer
-      v-if="footer.components"
+      v-if="hasFooterComponents"
       v-model="isFooterVisible"
     >
+      <q-resize-observer @resize="onFooterResized" />
       <KPanel
         id="footer-panel"
         :content="footer.components"
@@ -35,16 +71,24 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import _ from 'lodash'
+import { ref, computed, watch } from 'vue'
+import { computeResponsiveWidth } from '../../utils'
 import { Layout } from '../../layout'
+import KOpener from './KOpener.vue'
 import KPanel from '../KPanel.vue'
 
 // Data
 const layout = Layout.get()
+const leftPane = Layout.getPane('left')
 const header = Layout.getHeader()
 const footer = Layout.getFooter()
+const openerOffset = ref(0)
 
-// Compputed
+// Computed
+const hasHeaderComponents = computed(() => {
+  return !_.isEmpty(header.components)
+})
 const isHeaderVisible = computed({
   get: function () {
     return header.visible
@@ -53,6 +97,9 @@ const isHeaderVisible = computed({
     Layout.setHeaderVisible(value)
   }
 })
+const hasFooterComponents = computed(() => {
+  return !_.isEmpty(footer.components)
+})
 const isFooterVisible = computed({
   get: function () {
     return footer.visible
@@ -61,4 +108,55 @@ const isFooterVisible = computed({
     Layout.setFooterVisible(value)
   }
 })
+const hasLeftPaneComponents = computed(() => {
+  return !_.isEmpty(leftPane.components)
+})
+const leftPaneSize = computed(() => {
+  return computeResponsiveWidth(leftPane.sizes)
+})
+const isLeftPaneOpened = computed({
+  get: function () {
+    return leftPane.visible
+  },
+  set: function (value) {
+    Layout.setPaneVisible('left', value)
+  }
+})
+
+// Watch
+watch(() => leftPane.visible, (visible) => {
+  if (visible) {
+    setTimeout(() => {
+      openerOffset.value = leftPaneSize.value
+      document.addEventListener('click', clickOutsideLeftPanelListener, true)
+    }, 100)
+  } else {
+    document.removeEventListener('click', clickOutsideLeftPanelListener, true)
+    openerOffset.value = 0
+  }
+}, { immediate: true })
+watch(leftPaneSize, () => {
+  if (openerOffset.value > 0) openerOffset.value = leftPaneSize.value
+})
+
+// Functions
+function clickOutsideLeftPanelListener (event) {
+  const leftPanelElement = document.getElementById('left-panel')
+  if (leftPanelElement && leftPanelElement.contains(event.target)) return
+  const leftOpenerElement = document.getElementById('left-opener')
+  if (leftOpenerElement && leftOpenerElement.contains(event.target)) return
+  Layout.setPaneVisible('left', false)
+}
+function onHeaderResized (size) {
+  Layout.setElementSize('header', [size.width, size.height])
+}
+function onFooterResized (size) {
+  Layout.setElementSize('footer', [size.width, size.height])
+}
 </script>
+
+<style lang="scss">
+.k-left-pane-sticky {
+  z-index: v-bind('leftPane.zIndex');
+}
+</style>

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

@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useQuasar } from 'quasar'
 
 // Props
@@ -47,27 +47,22 @@ const hasTouch = $q.platform.has.touch
 const isHovered = ref(false)
 const icon = ref(null)
 
-// Computed
-const isOpened = computed(() => {
-  return props.modelValue
-})
-
 // Functions
 function onMouseOver () {
   if (hasTouch) return
   isHovered.value = true
   switch (props.position) {
     case 'left':
-      icon.value = isOpened.value ? 'las la-angle-left' : 'las la-angle-right'
+      icon.value = props.modelValue ? 'las la-angle-left' : 'las la-angle-right'
       break
     case 'right':
-      icon.value = isOpened.value ? 'las la-angle-right' : 'las la-angle-left'
+      icon.value = props.modelValue ? 'las la-angle-right' : 'las la-angle-left'
       break
     case 'top':
-      icon.value = isOpened.value ? 'las la-angle-up' : 'las la-angle-down'
+      icon.value = props.modelValue ? 'las la-angle-up' : 'las la-angle-down'
       break
     default: // bottom
-      icon.value = isOpened.value ? 'las la-angle-down' : 'las la-angle-up'
+      icon.value = props.modelValue ? 'las la-angle-down' : 'las la-angle-up'
   }
 }
 function onMouseLeave () {
@@ -79,24 +74,24 @@ function onSwipe ({ evt, ...info }) {
   if (!info && !info.direction) return
   switch (props.position) {
     case 'left':
-      if (info.direction === 'left' && isOpened.value) onClick()
-      if (info.direction === 'right' && !isOpened.value) onClick()
+      if (info.direction === 'left' && props.modelValue) onClick()
+      if (info.direction === 'right' && !props.modelValue) onClick()
       break
     case 'right':
-      if (info.direction === 'left' && !isOpened.value) onClick()
-      if (info.direction === 'right' && isOpened.value) onClick()
+      if (info.direction === 'left' && !props.modelValue) onClick()
+      if (info.direction === 'right' && props.modelValue) onClick()
       break
     case 'top':
-      if (info.direction === 'up' && isOpened.value) onClick()
-      if (info.direction === 'down' && !isOpened.value) onClick()
+      if (info.direction === 'up' && props.modelValue) onClick()
+      if (info.direction === 'down' && !props.modelValue) onClick()
       break
     default: // bottom
-      if (info.direction === 'up' && !isOpened.value) onClick()
-      if (info.direction === 'down' && isOpened.value) onClick()
+      if (info.direction === 'up' && !props.modelValue) onClick()
+      if (info.direction === 'down' && props.modelValue) onClick()
   }
 }
 function onClick () {
-  emit('update:modelValue', !isOpened.value)
+  emit('update:modelValue', !props.modelValue)
 }
 </script>