@dataloop-ai/components 0.20.9 → 0.20.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.9",
+  "version": "0.20.12",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -23,7 +23,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.0.91",
+    "@dataloop-ai/icons": "^3.0.101",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",

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

@@ -227,6 +227,7 @@ export default defineComponent({
     .text {
         padding-left: 10px;
         font-size: var(--dl-font-size-body);
+        line-height: normal;
         align-self: center;
         word-break: break-word;
     }

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

@@ -104,11 +104,15 @@ export default defineComponent({
         hideNoData: {
             type: Boolean,
             default: false
+        },
+        initialSelection: {
+            type: Object as PropType<DlLabelPickerItem>,
+            default: null
         }
     },
     emits: ['selected-label', 'click', 'focus', 'blur', 'clear'],
     setup(props, { emit, slots }) {
-        const { items } = toRefs(props)
+        const { items, initialSelection } = toRefs(props)
 
         const columns: DlTableColumn[] = [
             {
@@ -124,9 +128,8 @@ export default defineComponent({
 
         const inputValue = ref('')
         const currentSelectedLabel = ref<DlLabelPickerItem>(
-            items.value ? items.value[0] : null
+            (initialSelection?.value ?? items.value?.[0]) || null
         )
-
         const table = ref()
         const handleRowClick = (event: MouseEvent, item: DlLabelPickerItem) => {
             table.value.$el
@@ -203,9 +206,9 @@ export default defineComponent({
 
         onMounted(() => {
             nextTick(() => {
-                if (items.value?.[0]?.identifier) {
+                if (currentSelectedLabel.value.identifier) {
                     const target = table.value.$el.querySelector(
-                        `[data-label-picker-identifier="${items.value[0].identifier}"]`
+                        `[data-label-picker-identifier="${currentSelectedLabel.value.identifier}"]`
                     )
                     target?.closest('tr')?.classList.add('selected')
                 }

package/src/components/compound/DlStepper/DlStepper.vue

@@ -21,6 +21,7 @@
                 :bg-color="bgColor"
                 :hide="hide"
                 :disabled="disabled"
+                :width="sidebarWidth"
                 @step-click="$emit('set-step', $event)"
             />
             <div class="dl-stepper-content dl-stepper-content--slot">
@@ -137,6 +138,11 @@ export default defineComponent({
             required: false,
             default: '700px'
         },
+        sidebarWidth: {
+            type: String,
+            required: false,
+            default: 'fit-content'
+        },
         bgColor: {
             type: String,
             required: false,

package/src/components/compound/DlStepper/components/DlStepperSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="sidebar">
+    <div class="sidebar" :style="cssVars">
         <dl-list v-if="!hide">
             <dl-list-item
                 v-for="(step, index) in steps"
@@ -24,13 +24,13 @@
                 <dl-item-section no-wrap>
                     <span :class="stepClass(step)">
                         <span v-if="!step.icon">{{ index + 1 }}. </span>
-                        <div>
-                            <span>
+                        <div style="width: 94%">
+                            <dl-ellipsis>
                                 {{ getStepTitle(step) }}
-                            </span>
-                            <span class="sidebar--subtitle">
+                            </dl-ellipsis>
+                            <dl-ellipsis class="sidebar--subtitle">
                                 {{ getStepSubtitle(step) }}
-                            </span>
+                            </dl-ellipsis>
                         </div>
                         <dl-tooltip v-if="isStepDisabled(step)">
                             {{ getStepDisabledTooltip(step) }}
@@ -46,7 +46,7 @@
 import { defineComponent, PropType } from 'vue-demi'
 import { DlListItem } from '../../../basic'
 import { DlItemSection, DlTooltip } from '../../../shared'
-import { DlList } from '../../../essential'
+import { DlList, DlEllipsis } from '../../../essential'
 import { Step } from '../models'
 
 export default defineComponent({
@@ -55,7 +55,8 @@ export default defineComponent({
         DlList,
         DlListItem,
         DlItemSection,
-        DlTooltip
+        DlTooltip,
+        DlEllipsis
     },
     props: {
         steps: {
@@ -68,9 +69,21 @@ export default defineComponent({
             default: 'dl-color-fill-third'
         },
         disabled: { type: Boolean, default: false },
-        hide: { type: Boolean, default: false }
+        hide: { type: Boolean, default: false },
+        width: {
+            type: String,
+            required: false,
+            default: 'fit-content'
+        }
     },
     emits: ['step-click'],
+    computed: {
+        cssVars(): Record<string, string | number> {
+            return {
+                '--dl-stepper-sidebar-width': this.width
+            }
+        }
+    },
     methods: {
         endIcon(step: Step) {
             return {
@@ -142,6 +155,7 @@ export default defineComponent({
 .sidebar {
     display: flex;
     min-width: 250px;
+    width: var(--dl-stepper-sidebar-width);
     padding: 15px 0px;
     border-right: 1px solid var(--dl-color-separator);
     background-color: var(--dl-stepper-bg);
@@ -165,7 +179,6 @@ export default defineComponent({
     }
 
     &--subtitle {
-        display: block;
         line-height: 1;
         font-size: var(--dl-font-size-body);
         color: var(--dl-color-lighter);
@@ -173,6 +186,7 @@ export default defineComponent({
 
     &--step {
         display: flex;
+        position: relative;
         gap: 3px;
         font-size: var(--dl-font-size-h4);
         line-height: 18px;

package/src/demos/DlLabelPickerDemo.vue

@@ -7,6 +7,7 @@
                 title: '',
                 icon: ''
             }"
+            :initial-selection="initialSelection"
             hide-bottom
             hide-no-data
             @selected-label="setSelectedEvent"
@@ -72,11 +73,12 @@ export default defineComponent({
     },
     setup() {
         const items = ref(rows)
+        const initialSelection = ref(rows[1])
         const lastSelected = ref<DlLabelPickerItem>(null)
         const setSelectedEvent = (item: DlLabelPickerItem) => {
             lastSelected.value = item
         }
-        return { items, lastSelected, setSelectedEvent }
+        return { items, lastSelected, setSelectedEvent, initialSelection }
     }
 })
 </script>

package/src/demos/DlStepperDemo/SimpleStepper.vue

@@ -5,6 +5,7 @@
             :hide-close-button="true"
             done-button-label="Create"
             width="calc(100vh-400px)"
+            sidebar-width="300px"
             header-title="Create New Task"
             :content-title="`${stepper.currentIndex + 1}. ${
                 stepper.currentStep.value
@@ -24,10 +25,7 @@
         >
             <template #content-header="{ state }">
                 <div style="display: flex; gap: 20px; align-items: center">
-                    <dl-typography
-                        size="h3"
-                        variant="h3"
-                    >
+                    <dl-typography size="h3" variant="h3">
                         {{
                             `${stepper.currentIndex + 1}. ${
                                 stepper.currentStep.value
@@ -142,12 +140,16 @@ export default defineComponent({
                 {
                     value: 'general',
                     title: 'general',
+                    subtitle:
+                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae massa porttitor, tempor ex vel, varius felis. ',
                     warning: 'Some issues in the step',
                     completed: true
                 },
                 {
                     value: 'data',
                     title: 'data',
+                    subtitle:
+                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae massa porttitor, tempor ex vel, varius felis. ',
                     completed: true
                 },
                 {