feat: Provide a document-based component capable of displaying CSV co…

…ntent. (close  #1012)

core/client/components/document/KCsv.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-scroll-area class="fit">
+    <table v-if="data">
+      <template v-for="(row, index) in data" :key="index">
+        <tr>
+        <template v-for="cell in row" :key="cell">
+          <td>{{ cell }}</td>
+        </template>
+        </tr>
+      </template>
+    </table>
+  </q-scroll-area>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import Papa from 'papaparse'
+import { Document } from '../../document.js'
+
+// Props
+const props = defineProps({
+  url: {
+    type: String,
+    default: null
+  },
+  localize: {
+    type: Boolean,
+    default: true
+  },
+  options: {
+    type: Object,
+    default: () => null
+  }
+})
+
+// Data
+const data = ref(null)
+
+// Watch
+watch(() => props.url, async (value) => {
+  const response = await Document.fetchUrl(value, props.localize)
+  if (response?.ok) {
+    const csv = await response.text()
+    data.value = Papa.parse(csv, props.options).data
+  }
+  else data.value = null
+}, { immediate: true })
+</script>
+
+<style lang="scss">
+td {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+</style>

core/client/components/document/KMarkdown.vue

@@ -9,6 +9,7 @@
 
 <script setup>
 import { ref, watch } from 'vue'
+import showdown from 'showdown'
 import { Document } from '../../document.js'
 
 // Props
@@ -20,6 +21,10 @@ const props = defineProps({
   localize: {
     type: Boolean,
     default: true
+  },
+  options: {
+    type: Object,
+    default: () => null
   }
 })
 
@@ -29,7 +34,11 @@ const html = ref(null)
 // Watch
 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()))
+  if (response?.ok) {
+    const markdown = await response.text()
+    const converter = new showdown.Converter(props.options || Document.options.mdConverter)
+    html.value = Document.sanitizeHtml(converter.makeHtml(markdown))
+  }
   else html.value = null
 }, { immediate: true })
 </script>

core/client/components/document/KVideo.vue

@@ -1,12 +1,11 @@
 <template>
-  <div v-if="url" class="fit">
-    <video 
-      :src="url" 
-      :controls="controls"
-      :autoplay="autoplay"
-      class="fit" 
-    />
-  </div>
+  <video 
+    v-if="url"
+    :src="url" 
+    :controls="controls"
+    :autoplay="autoplay"
+    class="fit" 
+  />
 </template>
 
 <script setup>

core/client/document.js

@@ -2,7 +2,6 @@ import _ from 'lodash'
 import logger from 'loglevel'
 import config from 'config'
 import sanitize from 'sanitize-html'
-import showdown from 'showdown'
 import { i18n } from './i18n.js'
 
 export const Document = {
@@ -12,6 +11,10 @@ export const Document = {
         htm: 'document/KHtml',
         html: 'document/KHtml',
         'text/html': 'document/KHtml',
+        txt: 'document/KHtml',
+        'text/plain': 'document/KHtml',
+        csv: 'document/KCsv',
+        'text/csv': 'document/KCsv',
         md: 'document/KMarkdown',
         'text/markdown': 'document/KMarkdown',
         pdf: 'document/KPdf',
@@ -27,16 +30,14 @@ export const Document = {
         'image/gif': 'document/KImage',        
         svg: 'document/KImage',
         'image/svg+xml': 'document/KImage',
-        txt: 'document/KHtml',
-        'text/plain': 'document/KHtml',
+        webp: 'document/KImage',
+        'image/webp': 'document/KImage',        
         'mp4': 'document/KVideo',
         'video/mp4': 'document/KVideo',
         'mkv': 'document/KVideo',
         'video/x-matroska': 'document/KVideo',
         'mov': 'document/KVideo',
         'video/quicktime': 'document/KVideo',
-        webp: 'document/KImage',
-        'image/webp': 'document/KImage',
         webm: 'document/KVideo',
         'video/webm': 'document/KVideo'
       },
@@ -60,11 +61,6 @@ export const Document = {
     if (_.isNil(html)) return null
     return sanitize(html, this.options.htmlSanitizer)
   },
-  convertMdToHtml (md) {
-    if (_.isNil(md)) return null
-    const converter = new showdown.Converter(this.options.mdConverter)
-    return converter.makeHtml(md)
-  },
   async fetchUrl (url, localize) {
     if (_.isEmpty(url)) return null
     // localize the url if needed