@dataloop-ai/components 0.17.51 → 0.17.53

package/package.json

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

package/src/components/basic/DlButton/DlButton.vue

@@ -67,7 +67,7 @@ import {
     setMaxHeight
 } from './utils'
 import type { ButtonSizes } from './utils'
-import { defineComponent, PropType, ref } from 'vue-demi'
+import { computed, defineComponent, PropType, ref } from 'vue-demi'
 import { colorNames } from '../../../utils/css-color-names'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 import { v4 } from 'uuid'
@@ -166,20 +166,25 @@ export default defineComponent({
          */
         tooltip: { type: String, default: null, required: false },
         /**
-         * The button will mentain the styles it has when it's pressed if this prop is active
+         * The button will maintain the styles it has when it's pressed if this prop is active
          */
         active: { type: Boolean, default: false, required: false },
         styles: { type: [Object, String], default: null }
     },
     emits: ['click', 'mousedown'],
-    setup() {
+    setup(props) {
         const buttonLabelRef = ref(null)
         const { hasEllipsis } = useSizeObserver(buttonLabelRef)
 
+        const buttonClass = computed(() => {
+            return props.active ? 'dl-button active-class' : 'dl-button'
+        })
+
         return {
             uuid: `dl-button-${v4()}`,
             buttonLabelRef,
-            isOverflowing: hasEllipsis
+            isOverflowing: hasEllipsis,
+            buttonClass
         }
     },
     computed: {
@@ -213,9 +218,6 @@ export default defineComponent({
         buttonLabel(): string {
             return textTransform(this.label)
         },
-        buttonClass() {
-            return this.active ? 'dl-button active-class' : 'dl-button'
-        },
         hasIcon(): boolean {
             return typeof this.icon === 'string' && this.icon !== ''
         },

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

@@ -90,6 +90,18 @@ export class Step {
         set(this._state, 'sidebarNavigation', value)
     }
 
+    public clearError() {
+        set(this._state, 'error', '')
+    }
+
+    public clearWarning() {
+        set(this._state, 'warning', '')
+    }
+
+    public clearCompleted() {
+        set(this._state, 'completed', false)
+    }
+
     public reset() {
         for (const key of Object.keys(this._initialState)) {
             if (key !== 'active') {

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

@@ -163,4 +163,38 @@ export class Stepper {
 
         stepToReset.reset()
     }
+
+    /**
+     *
+     * @param options { step?: number; error?: boolean, warning?: boolean, completed?: boolean }
+     * @param options.step The step to clear its state
+     * @returns
+     */
+    public clearStepState(
+        options: {
+            step?: Step
+            error?: boolean
+            warning?: boolean
+            completed?: boolean
+        } = {}
+    ) {
+        const { step, error, warning, completed } = options
+        const stepToClear = step ?? this.currentStep
+
+        if (!stepToClear) {
+            return
+        }
+
+        if (error) {
+            stepToClear.clearError()
+        }
+
+        if (warning) {
+            stepToClear.clearWarning()
+        }
+
+        if (completed) {
+            stepToClear.clearCompleted()
+        }
+    }
 }