@dataloop-ai/components 0.18.5 → 0.18.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.5",
+  "version": "0.18.6",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/basic/DlAlert/DlAlert.vue

@@ -51,24 +51,23 @@ import {
 } from 'vue-demi'
 import { getColor, includes } from '../../../utils'
 import { DlIcon } from '../../essential'
+import { DlAlertType } from './types'
 
-type AlertType = 'info' | 'success' | 'warning' | 'error'
-
-const typeToIconMap: Record<AlertType, string> = {
+const typeToIconMap: Record<DlAlertType, string> = {
     info: 'icon-dl-info-filled',
     success: 'icon-dl-approve-filled',
     warning: 'icon-dl-alert-filled',
     error: 'icon-dl-error-filled'
 }
 
-const typeToIconColorMap: Record<AlertType, string> = {
+const typeToIconColorMap: Record<DlAlertType, string> = {
     info: 'dl-color-info',
     success: 'dl-color-positive',
     warning: 'dl-color-warning',
     error: 'dl-color-negative'
 }
 
-const typeToBackgroundMap: Record<AlertType, string> = {
+const typeToBackgroundMap: Record<DlAlertType, string> = {
     info: 'dl-color-info-background',
     success: 'dl-color-positive-background',
     warning: 'dl-color-warning-background',
@@ -115,7 +114,7 @@ export default defineComponent({
     emits: ['update:model-value'],
     setup(props, { emit }) {
         const show = ref(props.modelValue)
-        const type = props.type as AlertType
+        const type = props.type as DlAlertType
         const typeIcon = typeToIconMap[type]
         const icon = computed(() => typeToIconMap[type])
         const iconColor = computed(() => typeToIconColorMap[type])

package/src/components/basic/DlAlert/types.ts

@@ -0,0 +1 @@
+export type DlAlertType = 'info' | 'success' | 'warning' | 'error'

package/src/components/basic/types.ts

@@ -8,3 +8,4 @@ export * from './DlWidget/types'
 export * from './DlButton/types'
 export * from './DlGrid/types'
 export * from './DlEmptyState/types'
+export * from './DlAlert/types'

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

@@ -8,15 +8,7 @@
             'read-only': readOnly,
             wrap: wrap
         }"
-        :style="{
-            width: width,
-            height: height,
-            zIndex: zIndex,
-            maxWidth: maxWidth,
-            minWidth: minWidth,
-            maxHeight: maxHeight,
-            minHeight: minHeight
-        }"
+        :style="editorStyle"
     >
         <div
             class="hljs"
@@ -211,7 +203,7 @@ export default defineComponent({
         },
         borderRadius: {
             type: String,
-            default: '12px'
+            default: '0px'
         },
         languages: {
             type: Array as PropType<string[][]>,
@@ -259,7 +251,13 @@ export default defineComponent({
             height,
             fontSize,
             header,
-            padding
+            padding,
+            width,
+            zIndex,
+            minHeight,
+            maxHeight,
+            minWidth,
+            maxWidth
         } = toRefs(props)
         const scrollBarWidth = ref(0)
         const scrollBarHeight = ref(0)
@@ -312,6 +310,18 @@ export default defineComponent({
             return height.value == 'auto' ? false : true
         })
 
+        const editorStyle = computed<Record<string, any>>(() => {
+            return {
+                width: width.value,
+                height: height.value,
+                zIndex: zIndex.value,
+                maxWidth: maxWidth.value,
+                minWidth: minWidth.value,
+                maxHeight: maxHeight.value,
+                minHeight: minHeight.value
+            }
+        })
+
         watch(contentValue, () => {
             nextTick(() => {
                 code.value!.textContent = contentValue.value
@@ -520,7 +530,8 @@ export default defineComponent({
             tab,
             changeLang,
             updateValue,
-            textAreaStyle
+            textAreaStyle,
+            editorStyle
         }
     }
 })

package/src/demos/DlDemoPage.vue

@@ -139,11 +139,13 @@ export default defineComponent({
         const demos: {
             name: string
             component: any
-        }[] = names.map((n: string) => ({
-            name: n,
-            // @ts-ignore
-            component: Demos[n]
-        }))
+        }[] = names
+            .map((n: string) => ({
+                name: n,
+                // @ts-ignore
+                component: Demos[n]
+            }))
+            .sort((a, b) => a.name.localeCompare(b.name))
 
         const filteredDemos = computed(() => {
             if (!filterTerm.value || !filterTerm.value.length) {
@@ -198,7 +200,8 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .layout-wrapper {
-    display: flex;
+    display: grid;
+    grid-template-columns: 12% 85%;
 }
 
 .sidebar {