@dataloop-ai/components 0.17.130 → 0.17.132

package/package.json

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

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

@@ -16,7 +16,7 @@
             <dl-stepper-sidebar
                 :steps="steps"
                 :bg-color="bgColor"
-                :sidebar-navigation="sidebarNavigation"
+                :disabled="disabled"
                 @step-click="$emit('set-step', $event)"
             />
             <div class="dl-stepper-content dl-stepper-content--slot">
@@ -44,6 +44,8 @@
                     :prev-button-label="prevButtonLabel"
                     :disabled-next-step="disabledNextStep"
                     :disabled-prev-step="disabledPrevStep"
+                    :prev-step-disabled-tooltip="prevStepDisabledTooltip"
+                    :next-step-disabled-tooltip="nextStepDisabledTooltip"
                     @next="$emit('next')"
                     @prev="$emit('prev')"
                     @done="$emit('done')"
@@ -132,7 +134,7 @@ export default defineComponent({
         disabledPrevStep: Boolean,
         isDone: Boolean,
         hideCloseButton: Boolean,
-        sidebarNavigation: { type: Boolean, default: true }
+        disabled: { type: Boolean, default: false }
     },
     emits: ['update:modelValue', 'done', 'next', 'prev', 'set-step', 'close'],
     data() {
@@ -148,6 +150,16 @@ export default defineComponent({
         prevButtonLabel(): string {
             return this.prevStep?.title ?? null
         },
+        nextStepDisabledTooltip(): string {
+            return this.disabledNextStep
+                ? this.nextStep?.disabledTooltip ?? ''
+                : ''
+        },
+        prevStepDisabledTooltip(): string {
+            return this.disabledPrevStep
+                ? this.prevStep?.disabledTooltip ?? ''
+                : ''
+        },
         cssVars(): Record<string, string | number> {
             return {
                 '--dl-stepper-width': this.width,

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

@@ -4,6 +4,7 @@
             <div class="dl-stepper-footer__left-actions">
                 <dl-button
                     :disabled="disabledPrevStep"
+                    :tooltip="prevStepDisabledTooltip"
                     outlined
                     :colors-object="prevButtonColorsObject"
                     :label="prevLabel"
@@ -11,6 +12,7 @@
                 />
                 <dl-button
                     :disabled="disabledNextStep"
+                    :tooltip="nextStepDisabledTooltip"
                     class="justify-end"
                     outlined
                     :label="nextLabel"
@@ -55,6 +57,16 @@ export default defineComponent({
             required: false,
             default: ''
         },
+        nextStepDisabledTooltip: {
+            type: String,
+            required: false,
+            default: ''
+        },
+        prevStepDisabledTooltip: {
+            type: String,
+            required: false,
+            default: ''
+        },
         disabledNextStep: Boolean,
         disabledPrevStep: Boolean
     },

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

@@ -8,8 +8,8 @@
                 :end-icon="getStepIcon(step)"
                 :end-icon-color="getStepIconColor(step)"
                 end-icon-size="16px"
-                :clickable="sidebarNavigation"
-                :disabled="!getStepSidebarNavigation(step)"
+                :clickable="!disabled"
+                :disabled="isStepDisabled(step)"
                 :class="sidebarItemClasses(step)"
                 @click="handleStepClick(step, index)"
             >
@@ -24,6 +24,9 @@
                                 {{ getStepSubtitle(step) }}
                             </span>
                         </div>
+                        <dl-tooltip v-if="isStepDisabled(step)">
+                            {{ getStepDisabledTooltip(step) }}
+                        </dl-tooltip>
                     </span>
                 </dl-item-section>
             </dl-list-item>
@@ -34,7 +37,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
 import { DlListItem } from '../../../basic'
-import { DlItemSection } from '../../../shared'
+import { DlItemSection, DlTooltip } from '../../../shared'
 import { DlList } from '../../../essential'
 import { Step } from '../models'
 
@@ -43,7 +46,8 @@ export default defineComponent({
     components: {
         DlList,
         DlListItem,
-        DlItemSection
+        DlItemSection,
+        DlTooltip
     },
     props: {
         steps: {
@@ -55,7 +59,7 @@ export default defineComponent({
             required: false,
             default: 'dl-color-fill-third'
         },
-        sidebarNavigation: { type: Boolean, default: true }
+        disabled: { type: Boolean, default: false }
     },
     emits: ['step-click'],
     methods: {
@@ -104,8 +108,11 @@ export default defineComponent({
                 ? 'dl-color-positive'
                 : 'dl-color-transparent'
         },
-        getStepSidebarNavigation(step: Step): boolean {
-            return step.sidebarNavigation ?? true
+        isStepDisabled(step: Step): boolean {
+            return step.disabled ?? false
+        },
+        getStepDisabledTooltip(step: Step): string {
+            return step.disabledTooltip ?? ''
         }
     }
 })

package/src/components/compound/DlStepper/models/Step.ts

@@ -11,7 +11,8 @@ export class Step {
             subtitle: '',
             completed: false,
             optional: false,
-            sidebarNavigation: true,
+            disabled: false,
+            disabledTooltip: '',
             error: '',
             warning: '',
             ...state
@@ -90,12 +91,20 @@ export class Step {
         set(this._state, 'active', value)
     }
 
-    public get sidebarNavigation() {
-        return this._state.sidebarNavigation
+    public get disabled() {
+        return this._state.disabled
     }
 
-    public set sidebarNavigation(value: boolean) {
-        set(this._state, 'sidebarNavigation', value)
+    public set disabled(value: boolean) {
+        set(this._state, 'disabled', value)
+    }
+
+    public get disabledTooltip() {
+        return this._state.disabledTooltip
+    }
+
+    public set disabledTooltip(value: string) {
+        set(this._state, 'disabledTooltip', value)
     }
 
     public clearError() {

package/src/components/compound/DlStepper/models/interfaces.ts

@@ -7,5 +7,6 @@ export interface StepState {
     optional?: boolean
     error?: string
     warning?: string
-    sidebarNavigation?: boolean
+    disabled?: boolean
+    disabledTooltip?: string
 }

package/src/components/shared/DlTooltip/DlTooltip.vue

@@ -455,14 +455,6 @@ export default defineComponent({
     pointer-events: none;
 }
 
-.dl-tooltip {
-    z-index: 9000;
-    position: fixed !important;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 2px 5px;
-}
-
 .capitalize::first-letter {
     text-transform: var(--dl-tooltip-text-transform);
 }