@dataloop-ai/components 0.19.194 → 0.19.196

package/package.json

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

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

@@ -15,10 +15,9 @@
                 :color="iconColor"
                 :size="iconSize"
             />
-            <span
-                class="text"
-                :style="textStyle"
-            ><slot v-if="!text" /> <span v-else> {{ text }}</span></span>
+            <span class="text" :style="textStyle"
+            ><slot v-if="!text" /> <span v-else> {{ text }}</span></span
+            >
         </div>
         <div
             v-if="closable"
@@ -118,10 +117,10 @@ export default defineComponent({
     emits: ['update:model-value'],
     setup(props, { emit }) {
         const show = ref(props.modelValue)
-        const type = props.type as DlAlertType
-        const typeIcon = typeToIconMap[type]
-        const icon = computed(() => typeToIconMap[type])
-        const iconColor = computed(() => typeToIconColorMap[type])
+        const type = ref(props.type as DlAlertType)
+        const typeIcon = computed(() => typeToIconMap[type.value])
+        const icon = computed(() => typeToIconMap[type.value])
+        const iconColor = computed(() => typeToIconColorMap[type.value])
         const textStyle = computed(() => ({
             color: getColor(props.textColor, 'dl-color-darker')
         }))
@@ -143,7 +142,19 @@ export default defineComponent({
         )
 
         watch(
-            [() => props.fluid, () => props.text, () => props.closable],
+            () => props.type,
+            (val) => {
+                type.value = val as DlAlertType
+            }
+        )
+
+        watch(
+            [
+                () => props.fluid,
+                () => props.text,
+                () => props.closable,
+                () => props.type
+            ],
             ([fluid]) => {
                 normalizeStyles(fluid)
             }
@@ -158,7 +169,7 @@ export default defineComponent({
                     display: 'flex'
                 }
                 const rootS: Record<string, any> = {
-                    backgroundColor: getColor(typeToBackgroundMap[type])
+                    backgroundColor: getColor(typeToBackgroundMap[type.value])
                 }
                 if (height > 46) {
                     iconS.alignSelf = 'flex-start'

package/src/components/blocks/DlLabelPicker/DlLabelPicker.vue

@@ -29,6 +29,9 @@
             :rows="rows"
             row-key="identifier"
             color="dl-color-secondary"
+            :empty-state-props="emptyStateProps"
+            :hide-bottom="hideBottom"
+            :hide-no-data="hideNoData"
             @row-click="handleRowClick"
         >
             <template #body-cell-displayLabel="item">
@@ -46,7 +49,7 @@
 import { ref, PropType, defineComponent, computed, toRefs } from 'vue-demi'
 import { DlLabel, DlIcon } from '../../essential'
 import { DlInput, DlTreeTable } from '../../compound'
-import { DlTableColumn, DlTableRow } from '../../types'
+import { DlEmptyStateProps, DlTableColumn, DlTableRow } from '../../types'
 import { DlLabelPickerItem } from './types'
 
 export default defineComponent({
@@ -61,6 +64,32 @@ export default defineComponent({
         items: {
             type: Array as PropType<DlLabelPickerItem[]>,
             default: () => [] as PropType<DlLabelPickerItem[]>
+        },
+        /**
+         * Props for the empty state component
+         */
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: () =>
+                ({
+                    title: '',
+                    subtitle: 'No labels to show yet.',
+                    icon: ''
+                } as unknown as PropType<DlEmptyStateProps>)
+        },
+        /**
+         * Hides the bottom footer of the DlLabelPicker
+         */
+        hideBottom: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Hides the "No data" of the DlLabelPicker
+         */
+        hideNoData: {
+            type: Boolean,
+            default: false
         }
     },
     emits: ['selected-label', 'click'],
@@ -80,7 +109,9 @@ export default defineComponent({
         ]
 
         const inputValue = ref('')
-        const currentSelectedLabel = ref<DlLabelPickerItem>(null)
+        const currentSelectedLabel = ref<DlLabelPickerItem>(
+            items.value ? items.value[0] : null
+        )
 
         const handleRowClick = (_: MouseEvent, item: DlLabelPickerItem) => {
             currentSelectedLabel.value = item
@@ -110,13 +141,31 @@ export default defineComponent({
             return { 'border-left': `2px solid ${selectedColor.value}` }
         })
 
-        const rows = computed<DlTableRow[]>(() => {
-            return items.value?.map((i: DlLabelPickerItem) => ({
-                ...i,
-                name: i.displayLabel
-            }))
-        })
+        const mapObjects = (
+            item: DlLabelPickerItem,
+            callback: (obj: DlLabelPickerItem) => DlLabelPickerItem
+        ) => {
+            const mappedItem: DlLabelPickerItem = callback(item)
+
+            if (item.children && item.children.length > 0) {
+                mappedItem.children = item.children.map((child) =>
+                    mapObjects(child, callback)
+                )
+            }
+            return mappedItem
+        }
 
+        const mapItems = ref<DlTableRow[]>(
+            items.value?.map((item) =>
+                mapObjects(item, (obj: DlLabelPickerItem) => {
+                    return {
+                        ...obj,
+                        name: obj.displayLabel
+                    }
+                })
+            )
+        )
+        const rows = computed(() => mapItems.value)
         return {
             handleRowClick,
             inputValue,

package/src/components/compound/DlOptionGroup/DlOptionGroup.vue

@@ -16,7 +16,7 @@
         >
             <div
                 :for="individualProps[index].id"
-                style="display: inline-flex; margin-right: 5px"
+                style="display: inline-flex; gap: 6px"
             >
                 <span>{{ option.label }}</span>
                 <span

package/src/components/compound/DlTreeTable/DlTreeTable.vue

@@ -844,6 +844,8 @@ export default defineComponent({
             'onUpdate:selected': this.updateSelected,
             onColUpdate: this.updateColumns,
             class: this.containerClass,
+            hideBottom: this.hideBottom,
+            hideNoData: this.hideNoData,
             on: {
                 'row-click': this.emitRowClick,
                 'row-dblclick': this.emitRowDblclick,

package/src/demos/DlAlertDemo.vue

@@ -1,10 +1,6 @@
 <template>
     <div>
-        <DlAlert
-            type="info"
-            :closable="true"
-            fluid
-        >
+        <DlAlert type="info" :closable="true" fluid>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas eos
             amet, nobis unde animi atque itaque? Provident suscipit enim eos
             sequi dolor minima optio tempora error tenetur, autem ratione
@@ -18,17 +14,10 @@
             Pneumonoultramicroscopicsilicovolcanoconiosis/Pneumonoultramicroscopicsilicovolcanoconiosis/Pneumonoultramicroscopicsilicovolcanoconiosis.
         </DlAlert>
         <div style="display: flex; justify-content: space-between">
-            <DlAlert
-                type="error"
-                :closable="true"
-            >
+            <DlAlert type="error" :closable="true">
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
             </DlAlert>
-            <DlAlert
-                type="info"
-                text="Alert text"
-                fluid
-            >
+            <DlAlert type="info" text="Alert text" fluid>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
             </DlAlert>
         </div>
@@ -39,11 +28,7 @@
         >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         </DlAlert>
-        <dl-alert
-            style="margin-top: 20px"
-            fluid
-            type="warning"
-        >
+        <dl-alert style="margin-top: 20px" fluid type="warning">
             this is an annoying message with link, this is an annoying message
             with linkthis is an annoying message with linkthis is an annoying
             message with linkthis is an annoying message with linkthis is an
@@ -51,7 +36,8 @@
             is an annoying message with link
             <span>
                 Please
-                <dl-link color="dl-color-link">Contact us</dl-link>.</span>
+                <dl-link color="dl-color-link">Contact us</dl-link>.</span
+            >
         </dl-alert>
         <DlAlert
             type="success"
@@ -59,11 +45,7 @@
         >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         </DlAlert>
-        <dl-alert
-            style="margin-top: 20px"
-            fluid
-            type="warning"
-        >
+        <dl-alert style="margin-top: 20px" fluid type="warning">
             this is an annoying message with link, this is an annoying message
             with linkthis is an annoying message with linkthis is an annoying
             message with linkthis is an annoying message with linkthis is an
@@ -71,20 +53,48 @@
             is an annoying message with link
             <span>
                 Please
-                <dl-link color="dl-color-link">Contact us</dl-link>.</span>
+                <dl-link color="dl-color-link">Contact us</dl-link>.</span
+            >
         </dl-alert>
+
+        <div>
+            <dl-button label="Toggle" @click="handleAlertToggle" />
+            <DlAlert :type="alertType" :closable="true" fluid>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
+                eos amet, nobis unde animi atque itaque? Provident suscipit enim
+                eos sequi dolor minima optio tempora error tenetur, autem
+                ratione cumque!
+            </DlAlert>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-import { DlAlert, DlLink } from '../components'
+import { DlAlert, DlLink, DlButton } from '../components'
 import { defineComponent } from 'vue-demi'
 
+const alertTypes = ['info', 'success', 'warning', 'error']
+
 export default defineComponent({
     name: 'DlAlertDemo',
     components: {
         DlAlert,
-        DlLink
+        DlLink,
+        DlButton
+    },
+    data() {
+        return {
+            alertType: alertTypes[0]
+        }
+    },
+    methods: {
+        handleAlertToggle() {
+            const index = alertTypes.indexOf(this.alertType)
+            this.alertType =
+                index === alertTypes.length - 1
+                    ? alertTypes[0]
+                    : alertTypes[index + 1]
+        }
     },
     template: 'dl-alert-demo'
 })

package/src/demos/DlLabelPickerDemo.vue

@@ -3,6 +3,12 @@
         <div>Label picker component</div>
         <DlLabelPicker
             :items="items"
+            :empty-state-props="{
+                title: '',
+                icon: ''
+            }"
+            hide-bottom
+            hide-no-data
             @selected-label="setSelectedEvent"
         />
         <div>last selected: {{ lastSelected }}</div>
@@ -13,7 +19,6 @@
 import { DlLabelPicker } from '../components'
 import { defineComponent, ref } from 'vue-demi'
 import { DlLabelPickerItem } from '../types'
-
 const rows: DlLabelPickerItem[] = [
     {
         identifier: 'a',