@dataloop-ai/components 0.18.0 → 0.18.2

package/src/components/compound/DlCharts/components/DlChartLabels.vue

@@ -82,7 +82,8 @@
 import { v4 } from 'uuid'
 import { defineComponent, PropType, isVue2 } from 'vue-demi'
 import { isEllipsisActive } from '../../../../utils/is-ellipsis-active'
-import { DlTooltip, DlTypography } from '../../../essential'
+import { DlTypography } from '../../../essential'
+import { DlTooltip } from '../../../shared'
 
 type ObserverRefs = {
     ref: 'resizeObserverTitle' | 'resizeObserverSubtitle'

package/src/components/compound/DlCharts/components/DlChartScrollBar.vue

@@ -142,6 +142,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .scroll-bar-wrapper {
     width: 1%;
+    min-width: 5px;
 }
 .scroll-bar {
     background: #d9d9d9;

package/src/components/compound/DlCharts/types/props.ts

@@ -33,6 +33,8 @@ export const CommonProps = {
     }
 } as const
 
+export type CommonPropsType = typeof CommonProps
+
 export const Props = {
     type: {
         type: String as PropType<ChartType>,
@@ -100,6 +102,8 @@ export const ColumnChartProps = {
     }
 }
 
+export type ColumnChartPropsType = typeof ColumnChartProps
+
 export const defaultColumnChartProps = {
     brushProps: {
         width: '100%',
@@ -348,7 +352,7 @@ export const defaultLineChartProps = {
 }
 
 export const defaultDoughnutChartProps: TDoughnutProps = {
-    data: <TDoughnutChartData>{},
+    data: {} as TDoughnutChartData,
     isSmall: false,
     hasSummary: false,
     options: {

package/src/components/compound/DlCharts/utils.ts

@@ -65,7 +65,7 @@ export function setDatasets<
 ) {
     const addedDatasets: ChartDataset<TType, TData>[] = []
 
-    currentData.datasets = nextDatasets.map(
+    currentData.datasets = (nextDatasets || []).map(
         (nextDataset: Record<string, unknown>) => {
             // given the new set, find it's current match
             const currentDataset = currentData.datasets.find(

package/src/components/compound/DlCodeEditor/DlCodeEditor.vue

@@ -0,0 +1,173 @@
+<template>
+    <div
+        class="dl-code-editor-wrapper"
+        :style="cssVars"
+    >
+        <code-editor
+            v-model="code"
+            class="dl-code-editor"
+            :line-nums="!!options.lineNumbers"
+            :languages="[[language, languageTitle]]"
+            :read-only="readonly"
+            :theme="theme"
+            :font-size="styleFontSize"
+            :tab-spaces="options.tabSpaces ? options.tabSpaces : 4"
+            :wrap="!!options.textWrapping"
+            :width="styleWidth"
+            :height="styleHeight"
+            :header="!options.hideHeader"
+            :display-language="!options.hideLanguage"
+            :copy-button="!options.hideCopyButton"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, PropType, toRefs } from 'vue-demi'
+import { DlCodeEditorTheme, DlCodeEditorOptions } from './types'
+import CodeEditor from './components/CodeEditor.vue'
+
+export default defineComponent({
+    name: 'DlCodeEditor',
+    components: {
+        CodeEditor
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        modelValue: {
+            type: String as PropType<string>,
+            default: ''
+        },
+        width: {
+            type: [String, Number] as PropType<string | number>,
+            default: '100%'
+        },
+        height: {
+            type: [String, Number] as PropType<string | number>,
+            default: '100%'
+        },
+        language: {
+            type: String as PropType<string>,
+            default: 'javascript'
+        },
+        theme: {
+            required: false,
+            type: String as PropType<DlCodeEditorTheme>,
+            default: DlCodeEditorTheme.Light
+        },
+        readonly: {
+            type: Boolean as PropType<boolean>,
+            default: false
+        },
+        title: {
+            type: String,
+            default: null
+        },
+        options: {
+            type: Object as PropType<DlCodeEditorOptions>,
+            default: () => ({} as DlCodeEditorOptions)
+        }
+    },
+    emits: ['update:model-value', 'change'],
+    setup(props, { emit }) {
+        const { modelValue, language, options, height, width } = toRefs(props)
+        const dlFontSize = `12px`
+
+        const code = computed({
+            get() {
+                return modelValue.value as string
+            },
+            set(value) {
+                emit('update:model-value', value)
+                emit('change', value)
+            }
+        })
+
+        const languageTitle = computed(() => {
+            switch (language.value.toLowerCase()) {
+                case 'python':
+                    return 'Python'
+                case 'javascript':
+                    return 'JavaScript'
+                case 'typescript':
+                    return 'TypeScript'
+                case 'py':
+                    return 'Python'
+                case 'js':
+                    return 'JavaScript'
+                default:
+                    return (
+                        language.value.charAt(0).toUpperCase() +
+                        language.value.slice(1)
+                    )
+            }
+        })
+
+        const cssVars = computed(() => {
+            return {
+                '--dl-code-editor-header-border-bottom': !options.value
+                    ?.lineNumbers
+                    ? `1px solid var(--dl-color-separator)`
+                    : `none`
+            } as Record<string, any>
+        })
+
+        const styleWidth = computed(() => {
+            if (typeof width.value === 'number') {
+                return `${width.value}px`
+            }
+            return width.value
+        })
+        const styleHeight = computed(() => {
+            if (typeof height.value === 'number') {
+                return `${height.value}px`
+            }
+            return height.value
+        })
+        const styleFontSize = computed(() => {
+            if (!options.value.fontSize) {
+                return dlFontSize
+            }
+            const frontSize = options.value.fontSize
+            if (typeof frontSize === 'number') {
+                return `${frontSize}px`
+            }
+            return frontSize
+        })
+
+        return {
+            code,
+            languageTitle,
+            dlFontSize,
+            cssVars,
+            styleHeight,
+            styleWidth,
+            styleFontSize
+        }
+    }
+})
+</script>
+<style scoped lang="scss">
+.dl-code-editor-wrapper {
+    border: 1px solid var(--dl-color-separator);
+    border-radius: 2px;
+    width: fit-content;
+    height: fit-content;
+}
+</style>
+
+<style lang="scss">
+.dl-code-editor-wrapper {
+    .dl-code-editor {
+        .header {
+            border-bottom: var(--dl-code-editor-header-border-bottom);
+        }
+        textarea {
+            color: var(--dl-code-editor-text-area-color);
+        }
+    }
+}
+</style>

package/src/components/compound/DlCodeEditor/README.md

@@ -0,0 +1,11 @@
+# DlCodeEditor 
+
+The DlCodeEditor component is based off the [simple-code-editor](https://github.com/justcaliturner/simple-code-editor) written by [Vic](https://github.com/justcaliturner)
+
+
+#### Modifications
+The code itself was modified a bit to support vue 2.6 and vue3 together using the library vue-demi and general vue changes. 
+1. moved to composition api
+2. used vue-demi to support transition between library versions
+3. used library version agnostic terms and behaviors
+4. use custom components for the header and other elements