@dataloop-ai/components 0.17.134 → 0.18.1

package/src/components/compound/DlCharts/charts/DlLineChart/DlLineChart.vue

@@ -3,7 +3,22 @@
         :style="cssVars"
         :class="chartWrapperClasses"
     >
+        <dl-empty-state
+            v-if="isEmpty"
+            v-bind="emptyStateProps"
+        >
+            <template
+                v-for="(_, slot) in $slots"
+                #[slot]="props"
+            >
+                <slot
+                    :name="slot"
+                    v-bind="props"
+                />
+            </template>
+        </dl-empty-state>
         <DlLine
+            v-if="!isEmpty"
             :id="id"
             ref="lineChart"
             :class="chartClasses"
@@ -13,7 +28,7 @@
             @mouseout="onChartLeave"
         />
         <slot
-            v-if="displayLabels"
+            v-if="!isEmpty || displayLabels"
             v-bind="{ ...labelStyles, labels: xLabels, chartWidth }"
             name="axe-x-labels"
         >
@@ -28,7 +43,7 @@
             />
         </slot>
         <slot
-            v-if="displayBrush"
+            v-if="displayBrush || !isEmpty"
             v-bind="{
                 chartWidth,
                 modelValue: brush.value,
@@ -52,7 +67,7 @@
             />
         </slot>
         <slot
-            v-if="displayLegend"
+            v-if="displayLegend || !isEmpty"
             v-bind="{
                 data: legendDatasets,
                 chartWidth,
@@ -81,9 +96,20 @@ import { Line as DlLine } from '../../types/typedCharts'
 import {
     CommonProps,
     ColumnChartProps,
-    defaultLineChartProps
+    defaultLineChartProps,
+    ColumnChartPropsType,
+    CommonPropsType
 } from '../../types/props'
-import { defineComponent, reactive, watch, ref, computed } from 'vue-demi'
+import {
+    defineComponent,
+    reactive,
+    watch,
+    ref,
+    computed,
+    PropType
+} from 'vue-demi'
+import DlEmptyState from '../../../../basic/DlEmptyState/DlEmptyState.vue'
+import { DlEmptyStateProps } from '../../../../basic/DlEmptyState/types'
 import DlBrush from '../../components/DlBrush.vue'
 import DlChartLegend from '../../components/DlChartLegend.vue'
 import DlChartLabels from '../../components/DlChartLabels.vue'
@@ -125,6 +151,12 @@ ChartJS.register(
     LineElement,
     TimeScale
 )
+type ComponentType = {
+    id: string
+    isEmpty: boolean
+    emptyStateProps: DlEmptyStateProps
+} & CommonPropsType &
+    ColumnChartPropsType
 
 export default defineComponent({
     name: 'DlLineChart',
@@ -132,16 +164,22 @@ export default defineComponent({
         DlBrush,
         DlChartLegend,
         DlLine,
-        DlChartLabels
+        DlChartLabels,
+        DlEmptyState
     },
     props: {
         id: {
             type: String,
             default: null
         },
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: null
+        },
         ...CommonProps,
         ...ColumnChartProps
-    },
+    } as { [key: string]: any },
     setup(props, { slots }) {
         const { variables } = useThemeVariables()
 
@@ -302,7 +340,7 @@ export default defineComponent({
                 props.legendProps?.datasets || [],
                 props.data?.datasets || [],
                 'label'
-            )
+            ) as { [key: string]: any }[]
         )
 
         const onChartLeave = () => {

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

@@ -239,14 +239,14 @@ export default defineComponent({
             width: 0.5 * parseInt(props.thumbSize) + 'px',
             height: props.thumbSize,
             left: `${100 * ratioMin.value}%`,
-            zIndex: state.focus.value === 'min' ? 2 : void 0
+            zIndex: state.focus.value === 'min' ? 2 : null
         }))
 
         const maxThumbStyle = computed(() => ({
             width: 0.5 * parseInt(props.thumbSize) + 'px',
             height: props.thumbSize,
             left: `${100 * ratioMax.value}%`,
-            zIndex: state.focus.value === 'max' ? 2 : void 0
+            zIndex: state.focus.value === 'max' ? 2 : null
         }))
 
         function updateValue(change = false) {

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,171 @@
+<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;
+}
+</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