@dataloop-ai/components 0.18.4 → 0.18.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.4",
+  "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/components/compound/DlSelect/DlSelect.vue

@@ -232,13 +232,10 @@
                                 name="option"
                                 :opt="item"
                             >
-                                {{
-                                    capitalizedOptions
-                                        ? typeof getOptionLabel(item) ===
-                                            'string' &&
-                                            getOptionLabel(item).toLowerCase()
-                                        : getOptionLabel(item)
-                                }}
+                                <span
+                                    class="inner-option"
+                                    v-html="getOptionHtml(item)"
+                                />
                             </slot>
                         </dl-select-option>
                     </dl-virtual-scroll>

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 {

package/src/demos/DlSelectDemo.vue

@@ -172,6 +172,7 @@
         />
         With Fit
         <dl-select
+            v-model="selectedWithFit"
             :options="[
                 { label: 'Option 1', value: 1 },
                 { label: 'Option 2, longer one', value: 2 },
@@ -182,10 +183,12 @@
             searchable
             capitalized-options
             fit-content
+            @change="logEvent"
         />
         With Label and sub label
         <dl-select
             v-model="selectedOption"
+            searchable
             :options="[
                 {
                     subLabel: 'not so high',
@@ -487,6 +490,7 @@ export default defineComponent({
     components: { DlSelect, DlIcon, DlChip, DlBadge },
     data() {
         return {
+            selectedWithFit: [],
             selectedOption: {
                 label: 'High',
                 value: 'high',
@@ -537,6 +541,9 @@ export default defineComponent({
         }
     },
     methods: {
+        logEvent(e: any) {
+            console.log(e)
+        },
         filterFn(val: string) {
             this.searchOptions = defaultOptions.filter(
                 (v: { label: string; value: string } | undefined) =>