@dataloop-ai/components 0.19.183 → 0.19.185

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.183",
+  "version": "0.19.185",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -22,7 +22,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.0.31",
+    "@dataloop-ai/icons": "^3.0.32",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",
@@ -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/DlIcon/DlIcon.vue

@@ -37,7 +37,14 @@
 <script lang="ts">
 import { isString } from 'lodash'
 import { v4 } from 'uuid'
-import { defineComponent } from 'vue-demi'
+import {
+    computed,
+    defineComponent,
+    onUnmounted,
+    ref,
+    toRefs,
+    watch
+} from 'vue-demi'
 import { getColor, loggerFactory, stringStyleToRecord } from '../../../utils'
 import { COLORED_ICONS } from '@dataloop-ai/icons/types'
 
@@ -74,100 +81,130 @@ export default defineComponent({
         }
     },
     emits: ['click', 'mousemove', 'mouseup', 'mousedown'],
-    data() {
-        return {
-            uuid: `dl-icon-${v4()}`,
-            externalIconSource: 'material-icons',
-            logger_: loggerFactory('dl-icon')
-        }
-    },
-    computed: {
-        computedStyles(): Record<string, string> {
-            return isString(this.styles)
-                ? stringStyleToRecord(this.styles)
-                : this.styles
-        },
-        cssIconVars(): Record<string, string> {
+    setup(props) {
+        const { styles, color, size, icon, svg, inline, svgSource } =
+            toRefs(props)
+
+        const svgIcon = ref(null)
+        const isDestroyed = ref(false)
+        const uuid = `dl-icon-${v4()}`
+        const externalIconSource = 'material-icons'
+        const logger = loggerFactory('dl-icon')
+
+        const computedStyles = computed<Record<string, string>>(() => {
+            const generatedStyles = isString(styles.value)
+                ? stringStyleToRecord(styles.value)
+                : styles.value
+
+            return Object.assign({}, generatedStyles, {
+                width: size.value,
+                height: size.value
+            })
+        })
+
+        const cssIconVars = computed<Record<string, string>>(() => {
             return {
-                '--dl-icon-font-size': `${this.size}`,
-                '--dl-icon-color': this.color
+                '--dl-icon-font-size': `${size.value}`,
+                '--dl-icon-color': color.value
                     ? // todo: remove this. this is needed for now until the swap of DLBTN in OA
                       getColor(
-                          this.color === 'secondary'
+                          color.value === 'secondary'
                               ? 'q-color-secondary'
-                              : this.color,
+                              : color.value,
                           'dl-color-icon-default'
                       )
                     : 'inherit'
             }
-        },
-        inlineStyles(): Record<string, string> {
-            return { display: this.inline ? 'inline-flex' : 'flex' }
-        },
-        // needed to allow external source of icons that do not use class based
-        externalIcon(): boolean {
-            return (
-                !this.icon.startsWith('icon-dl-') &&
-                !this.icon.startsWith('fas') &&
-                !this.icon.startsWith('fa-')
-            )
-        },
-        cleanedIconName(): string {
-            return this.icon.startsWith('icon-dl-')
-                ? this.icon.replace('icon-dl-', '')
-                : this.icon
-        },
-        isSVG(): boolean {
-            if (!this.icon) {
+        })
+
+        const cleanedIconName = computed<string>(() => {
+            return icon.value.startsWith('icon-dl-')
+                ? icon.value.replace('icon-dl-', '')
+                : icon.value
+        })
+
+        const isSVG = computed<boolean>(() => {
+            if (!icon.value) {
                 return false
             }
 
-            if (this.svg) {
+            if (svg.value) {
                 return true
             }
 
             const coloredIcons = Object.values(COLORED_ICONS)
-            return coloredIcons.includes(this.cleanedIconName as any)
-        }
-    },
-    mounted() {
-        const possibleToLoadSvg = this.isSVG && this.icon && this.icon !== ''
-        if (possibleToLoadSvg) {
-            this.loadSvg()
-        }
-    },
-    methods: {
-        loadSvg() {
+            return coloredIcons.includes(cleanedIconName.value as any)
+        })
+
+        const externalIcon = computed<boolean>(() => {
+            return (
+                !icon.value.startsWith('icon-dl-') &&
+                !icon.value.startsWith('fas') &&
+                !icon.value.startsWith('fa-')
+            )
+        })
+
+        const inlineStyles = computed<Record<string, string>>(() => {
+            return { display: inline.value ? 'inline-flex' : 'flex' }
+        })
+
+        watch(icon, () => {
+            const possibleToLoadSvg =
+                isSVG.value && icon.value && icon.value !== ''
+            if (possibleToLoadSvg) {
+                loadSvg()
+            }
+        })
+
+        const loadSvg = () => {
             return new Promise<void>((resolve, reject) => {
                 const svgElement = new Image()
-                svgElement.setAttribute('height', this.size)
-                svgElement.setAttribute('width', this.size)
+                svgElement.setAttribute('height', size.value)
+                svgElement.setAttribute('width', size.value)
 
                 svgElement.onload = () => {
-                    // @ts-ignore // In order to handle events and loading that occur mid unmounting.
-                    if (this._isDestroyed || this._isBeingDestroyed) {
+                    // In order to handle events and loading that occur mid unmounting.
+                    if (isDestroyed.value) {
                         return
                     }
-                    const container = this.$refs.svgIcon as HTMLDivElement
+                    const container = svgIcon.value as HTMLDivElement
                     if (!container) {
                         reject(new Error('No Ref'))
                         return
                     }
-                    container.setAttribute('height', this.size)
-                    container.setAttribute('width', this.size)
+                    container.setAttribute('height', size.value)
+                    container.setAttribute('width', size.value)
                     container?.firstChild?.replaceWith(svgElement)
                     resolve()
                 }
 
                 try {
-                    svgElement.src = this.svgSource
-                        ? `${this.svgSource}/${this.cleanedIconName}.svg`
-                        : `https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/${this.cleanedIconName}.svg`
+                    svgElement.src = svgSource.value
+                        ? `${svgSource.value}/${cleanedIconName.value}.svg`
+                        : `https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/${cleanedIconName.value}.svg`
                 } catch (e) {
                     reject(e)
                 }
             })
         }
+
+        onUnmounted(() => {
+            isDestroyed.value = true
+        })
+
+        return {
+            uuid,
+            svgIcon,
+            externalIconSource,
+            computedStyles,
+            cssIconVars,
+            isSVG,
+            cleanedIconName,
+            loadSvg,
+            isDestroyed,
+            externalIcon,
+            inlineStyles
+        }
     }
 })
 </script>

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: {