@dataloop-ai/components 0.19.183 → 0.19.184

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.183",
+  "version": "0.19.184",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -30,6 +30,7 @@
     "flat": "^5.0.2",
     "highlight.js": "^11.8.0",
     "lodash": "^4.17.21",
+    "marked": "^11.1.1",
     "moment": "^2.29.4",
     "sass": "^1.51.0",
     "sass-loader": "^12.6.0",
@@ -39,7 +40,8 @@
     "vanilla-jsoneditor": "^0.10.2",
     "vue-demi": "^0.14.5",
     "vue-sortable": "^0.1.3",
-    "vue2-teleport": "^1.0.1"
+    "vue2-teleport": "^1.0.1",
+    "zero-md": "^2.5.3"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",

package/src/components/essential/DlMarkDown/DlMarkdown.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="dl-mark-down" v-html="renderedMD" />
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, toRefs } from 'vue-demi'
+import { marked } from 'marked'
+
+export default defineComponent({
+    name: 'DlMarkdown',
+    props: {
+        text: {
+            type: String,
+            default: ''
+        }
+    },
+    setup(props) {
+        const { text } = toRefs(props)
+
+        const renderedMD = computed(() => marked(text.value))
+        return {
+            renderedMD
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/essential/DlMarkDown/index.ts

@@ -0,0 +1,2 @@
+import DlMarkdown from './DlMarkDown.vue'
+export { DlMarkdown }

package/src/components/essential/index.ts

@@ -19,3 +19,4 @@ export * from './DlColorPicker'
 export * from './DlSpinner'
 export * from './DlSeparator'
 export * from './DlLayout'
+export * from './DlMarkDown'

package/src/demos/DlMarkdownDemo.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <DlMarkdown :text="mdText" />
+    </div>
+</template>
+
+<script lang="ts">
+import { DlMarkdown } from '../components'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    components: {
+        DlMarkdown
+    },
+    setup() {
+        const mdText = `# Hi
+## This is a markdown demo
+### It's a simple demo
+#### It's a simple demo
+##### It's a simple demo
+
+*It's a simple demo*
+
+**It's a simple demo**
+
+***It's a simple demo***
+
+> It's a simple demo
+- [ ] It's a simple demo
+- [x] It's a simple demo
+
+[It's a simple demo]('https://www.google.com')
+
+\`It's a simple demo\`
+\`\`\`javascript
+    const highlight = "code";
+\`\`\`
+`
+        return {
+            mdText
+        }
+    }
+})
+</script>

package/src/demos/index.ts

@@ -68,6 +68,7 @@ import DlLayoutDemo from './DlLayoutDemo.vue'
 import { DlCodeEditorDemo } from './DlCodeEditor'
 import DlLabelPickerDemo from './DlLabelPickerDemo.vue'
 import DlInfiniteScrollDemo from './DlInfiniteScrollDemo.vue'
+import DlMarkDownDemo from './DlMarkDownDemo.vue'
 
 export default {
     AvatarDemo,
@@ -136,5 +137,6 @@ export default {
     DlCodeEditorDemo,
     DlLayoutDemo,
     DlLabelPickerDemo,
-    DlInfiniteScrollDemo
+    DlInfiniteScrollDemo,
+    DlMarkDownDemo
 }

package/vite.config.ts

@@ -23,7 +23,7 @@ export default defineConfig({
         ]
     },
     optimizeDeps: {
-        include: ['highlight.js'],
+        include: ['lodash', 'flat', 'highlight.js', 'sortablejs', 'marked'],
         exclude: ['vue-demi']
     },
     define: {