@dataloop-ai/components 0.13.0

package/src/components/DlStepper/DlStepperFooter.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="dl-stepper-footer">
+        <slot name="footer">
+            <div class="dl-stepper-footer__left-actions">
+                <dl-button
+                    :disabled="disabledPrevStep"
+                    outlined
+                    :colors-object="prevBtnColorsObject"
+                    :label="prevLabel"
+                    @click="$emit('prev')"
+                />
+                <dl-button
+                    :disabled="disabledNextStep"
+                    class="justify-end"
+                    outlined
+                    :label="nextLabel"
+                    @click="$emit('next')"
+                />
+            </div>
+            <div class="dl-stepper-footer__right-actions">
+                <dl-button
+                    filled
+                    :label="doneButtonLabel"
+                    :disabled="!finished"
+                    @click="$emit('done')"
+                />
+            </div>
+        </slot>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlButton } from '../'
+import { ButtonState, ButtonPart, ButtonColors } from '../DlButton/DlButton.vue'
+
+export default defineComponent({
+    name: 'DlStepperFooter',
+    components: {
+        DlButton
+    },
+    props: {
+        finished: Boolean,
+        doneButtonLabel: {
+            type: String,
+            required: false,
+            default: 'Done'
+        },
+        prevButtonLabel: {
+            type: String,
+            required: false,
+            default: ''
+        },
+        nextButtonLabel: {
+            type: String,
+            required: false,
+            default: ''
+        },
+        disabledNextStep: Boolean,
+        disabledPrevStep: Boolean
+    },
+    emits: ['close', 'done', 'next', 'prev'],
+    data(): {
+        prevBtnColorsObject: ButtonColors
+    } {
+        return {
+            prevBtnColorsObject: {
+                [ButtonState.Active]: {
+                    [ButtonPart.Text]: 'var(--dl-color-darker)',
+                    [ButtonPart.Background]: 'var(--dl-color-transparent)',
+                    [ButtonPart.Border]: 'var(--dl-color-separator)'
+                },
+                [ButtonState.Hover]: {
+                    [ButtonPart.Text]: 'var(--dl-color-hover)',
+                    [ButtonPart.Background]: 'var(--dl-color-transparent)',
+                    [ButtonPart.Border]: 'var(--dl-color-hover)'
+                },
+                [ButtonState.Pressed]: {
+                    [ButtonPart.Text]: 'var(--dl-color-secondary)',
+                    [ButtonPart.Background]: 'var(--dl-color-transparent)',
+                    [ButtonPart.Border]: 'var(--dl-color-secondary)'
+                },
+                [ButtonState.Disabled]: {
+                    [ButtonPart.Text]: 'var(--dl-color-disabled)',
+                    [ButtonPart.Background]: 'var(--dl-color-transparent)',
+                    [ButtonPart.Border]: 'var(--dl-color-separator)'
+                }
+            }
+        }
+    },
+    computed: {
+        nextLabel(): string {
+            let label = 'Next'
+            if (this.nextButtonLabel) {
+                label = label + `: ${this.nextButtonLabel}`
+            }
+
+            return label
+        },
+        prevLabel(): string {
+            let label = 'Back'
+            if (this.prevButtonLabel) {
+                label = label + `: ${this.prevButtonLabel}`
+            }
+
+            return label
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.dl-stepper-footer {
+    background-color: var(--dl-color-panel-background);
+    display: flex;
+    justify-content: space-between;
+    margin-top: auto;
+    position: sticky;
+    z-index: 1;
+    align-items: center;
+    padding: 16px 50px;
+    border-top: 1px solid var(--dl-color-separator);
+    gap: 15px;
+    right: 0;
+    left: 0;
+    top: 0;
+    overflow: auto;
+
+    &__left-actions,
+    &__left-actions {
+        display: flex;
+        gap: 15px;
+    }
+}
+</style>

package/src/components/DlStepper/DlStepperHeader.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="dl-stepper-header">
+        <slot>
+            <dl-typography
+                size="h2"
+                variant="h2"
+            >
+                {{ headerTitle }}
+            </dl-typography>
+        </slot>
+        <dl-button
+            v-if="!hideCloseBtn"
+            text-color="dl-color-darker"
+            flat
+            icon="icon-dl-close"
+            @click="$emit('close')"
+        />
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlTypography, DlButton } from '../'
+
+export default defineComponent({
+    name: 'DlStepperHeader',
+    components: {
+        DlTypography,
+        DlButton
+    },
+    props: {
+        headerTitle: {
+            type: String,
+            required: false,
+            default: ''
+        },
+        hideCloseBtn: Boolean
+    },
+    emits: ['close']
+})
+</script>
+<style lang="scss" scoped>
+.dl-stepper-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid var(--dl-color-separator);
+}
+</style>

package/src/components/DlStepper/DlStepperSidebar.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="sidebar">
+        <dl-list>
+            <dl-list-item
+                v-for="(step, index) in steps"
+                :key="index"
+                :data-test-index="index"
+                :end-icon="getStepIcon(step)"
+                :end-icon-color="getStepIconColor(step)"
+                end-icon-size="16px"
+                :clickable="sidebarNavigation"
+                :disabled="!getStepSidebarNavigation(step)"
+                :class="sidebarItemClasses(step)"
+                @click="handleStepClick(step, index)"
+            >
+                <dl-item-section no-wrap>
+                    <span :class="stepClass(step)">
+                        {{ index + 1 }}.
+                        <div>
+                            <span>
+                                {{ getStepTitle(step) }}
+                            </span>
+                            <span class="sidebar--subtitle">
+                                {{ getStepSubtitle(step) }}
+                            </span>
+                        </div>
+                    </span>
+                </dl-item-section>
+            </dl-list-item>
+        </dl-list>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import { DlListItem } from '../DlListItem'
+import DlItemSection from '../DlItemSection.vue'
+import DlList from '../DlList.vue'
+import { Step } from './Step'
+
+export default defineComponent({
+    name: 'DlStepperSidebar',
+    components: {
+        DlList,
+        DlListItem,
+        DlItemSection
+    },
+    props: {
+        steps: {
+            type: Array as PropType<Step[]>,
+            default: () => [] as Step[]
+        },
+        bgColor: {
+            type: String,
+            required: false,
+            default: 'dl-color-fill-third'
+        },
+        sidebarNavigation: { type: Boolean, default: true }
+    },
+    emits: ['step-click'],
+    methods: {
+        getStepTitle(step: Step): string {
+            const optional = step.optional ? ' (Optional)' : ''
+            return `${this.capitalize(step.title)}${optional}`
+        },
+        getStepSubtitle(step: Step): string {
+            if (step.subtitle) {
+                return this.capitalize(step.subtitle)
+            }
+            return ''
+        },
+        capitalize(str: string): string {
+            return str.charAt(0).toUpperCase() + str.slice(1)
+        },
+        sidebarItemClasses(step: Step): string {
+            return `sidebar--item${
+                step.subtitle ? ' sidebar--item-with_subtitle' : ''
+            }`
+        },
+        stepClass(step: Step) {
+            const active = step.active
+                ? 'sidebar--step-active'
+                : step.completed || step.error
+                ? 'sidebar--step-touched'
+                : ''
+            return `sidebar--step ${active}`
+        },
+        handleStepClick(step: Step, index: number) {
+            this.$emit('step-click', step, index)
+        },
+        getStepIcon(step: Step): string {
+            return step.error
+                ? 'icon-dl-error-filled'
+                : step.warning
+                ? 'icon-dl-alert-filled'
+                : 'icon-dl-approve-filled'
+        },
+        getStepIconColor(step: Step): string {
+            return step.error
+                ? 'dl-color-negative'
+                : step.warning
+                ? 'dl-color-warning'
+                : step.completed
+                ? 'dl-color-positive'
+                : 'dl-color-transparent'
+        },
+        getStepSidebarNavigation(step: Step): boolean {
+            return step.sidebarNavigation ?? true
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.sidebar {
+    display: flex;
+    min-width: 250px;
+    padding: 15px 0px;
+    border-right: 1px solid var(--dl-color-separator);
+    background-color: var(--dl-stepper-bg);
+    box-sizing: border-box;
+
+    & > .dl-list {
+        width: 100%;
+        background-color: var(--dl-color-transparent);
+    }
+
+    &--item {
+        padding: 5px 0;
+        &-with_subtitle {
+            ::v-deep .dl-list-item {
+                height: 43px;
+            }
+        }
+    }
+
+    &--subtitle {
+        display: block;
+        line-height: 1;
+        font-size: var(--dl-font-size-body);
+        color: var(--dl-color-lighter);
+    }
+
+    &--step {
+        display: flex;
+        gap: 3px;
+        font-size: var(--dl-font-size-h4);
+        line-height: 18px;
+        color: var(--dl-color-lighter);
+
+        &-active {
+            color: var(--dl-color-secondary);
+            & .sidebar--subtitle {
+                color: var(--dl-color-secondary);
+            }
+        }
+
+        &-touched {
+            color: var(--dl-color-darker);
+        }
+    }
+
+    ::v-deep .dl-list-item {
+        padding: 0px 20px;
+    }
+}
+</style>

package/src/components/DlStepper/Step.ts

@@ -0,0 +1,101 @@
+import { set, reactive } from 'vue-demi'
+import { StepState } from './interfaces'
+
+export class Step {
+    _state: Required<StepState>
+    _initialState: Required<StepState>
+
+    constructor(state: StepState) {
+        this._initialState = {
+            active: false,
+            subtitle: '',
+            completed: false,
+            optional: false,
+            sidebarNavigation: true,
+            error: '',
+            warning: '',
+            ...state
+        }
+
+        this._state = reactive(Object.assign({}, this._initialState))
+    }
+
+    public get state(): StepState {
+        return this._state
+    }
+
+    public get title(): string {
+        return this._state.title
+    }
+
+    public get subtitle(): string {
+        return this._state.subtitle
+    }
+
+    public get optional(): boolean {
+        return this._state.optional
+    }
+
+    public set optional(value: boolean) {
+        set(this._state, 'optional', value)
+    }
+
+    public get completed(): boolean {
+        return this._state.completed
+    }
+
+    public set completed(value: boolean) {
+        set(this._state, 'error', '')
+        set(this._state, 'warning', false)
+        set(this._state, 'completed', value)
+    }
+
+    public get error(): string {
+        return this._state.error
+    }
+
+    public set error(value: string) {
+        set(this._state, 'error', value)
+        set(this._state, 'warning', false)
+        set(this._state, 'completed', false)
+    }
+
+    public get warning(): string {
+        return this._state.warning
+    }
+
+    public set warning(value: string) {
+        set(this._state, 'warning', value)
+        set(this._state, 'error', false)
+        set(this._state, 'completed', true)
+    }
+
+    public get value(): string {
+        return this._state.value
+    }
+
+    public get active(): boolean {
+        return this._state.active
+    }
+
+    public set active(value: boolean) {
+        set(this._state, 'active', value)
+    }
+
+    public get sidebarNavigation() {
+        return this._state.sidebarNavigation
+    }
+
+    public set sidebarNavigation(value: boolean) {
+        set(this._state, 'sidebarNavigation', value)
+    }
+
+    public reset() {
+        for (const key of Object.keys(this._initialState)) {
+            if (key !== 'active') {
+                // @ts-ignore
+                set(this._state, key, this._initialState[key])
+            }
+        }
+    }
+}

package/src/components/DlStepper/Stepper.ts

@@ -0,0 +1,107 @@
+import { Step } from './Step'
+
+export class Stepper {
+    private _currentIndex = 0
+
+    private _steps: Step[]
+
+    constructor(steps: Step[]) {
+        this._steps = steps
+
+        if (this.currentStep) {
+            this.currentStep.active = true
+        }
+    }
+
+    public get steps(): Step[] {
+        return this._steps
+    }
+
+    public set currentIndex(v: number) {
+        this._currentIndex = v
+
+        this._steps.forEach((step) => {
+            step.active = false
+        })
+
+        if (this.currentStep) {
+            this.currentStep.active = true
+        }
+    }
+
+    public get currentIndex(): number {
+        return this._currentIndex
+    }
+
+    public get currentStep(): Step | null {
+        if (this._steps.length === 0) {
+            return null
+        }
+
+        return this._steps[this.currentIndex]
+    }
+
+    public hasPrevStep(): boolean {
+        return this.currentIndex > 0 && this.currentIndex < this._steps.length
+    }
+
+    public hasNextStep(): boolean {
+        return (
+            this.currentIndex >= 0 && this.currentIndex < this._steps.length - 1
+        )
+    }
+
+    public getNextStep(): Step {
+        if (this.hasNextStep()) {
+            return this.steps[this._currentIndex + 1]
+        }
+        return null
+    }
+
+    public getPrevStep(): Step {
+        if (this.hasPrevStep()) {
+            return this.steps[this._currentIndex - 1]
+        }
+        return null
+    }
+
+    public isDone(): boolean {
+        return this._steps.every(
+            (step: Step) => step.completed || step.optional
+        )
+    }
+
+    public moveToNextStep() {
+        if (this.hasNextStep()) {
+            this.currentIndex = this.currentIndex + 1
+        }
+    }
+
+    public moveToPrevStep() {
+        if (this.hasPrevStep()) {
+            this.currentIndex = this.currentIndex - 1
+        }
+    }
+
+    public completeStep() {
+        if (!this.currentStep) return
+        this.currentStep.completed = true
+        this.moveToNextStep()
+    }
+
+    public failStep(msg?: string) {
+        if (!this.currentStep) return
+        this.currentStep.error = msg || ''
+    }
+
+    public setStepWarning(msg?: string) {
+        if (!this.currentStep) return
+        this.currentStep.warning = msg || ''
+        this.moveToNextStep()
+    }
+
+    public resetStep() {
+        if (!this.currentStep) return
+        this.currentStep.reset()
+    }
+}

package/src/components/DlStepper/index.ts

@@ -0,0 +1,7 @@
+import DlStepper from './DlStepper.vue'
+import { Stepper } from './Stepper'
+import { Step } from './Step'
+import { StepState } from './interfaces'
+
+export { DlStepper, Stepper, Step }
+export type { StepState }

package/src/components/DlStepper/interfaces.ts

@@ -0,0 +1,11 @@
+export interface StepState {
+    value: string
+    title: string
+    subtitle?: string
+    active?: boolean
+    completed?: boolean
+    optional?: boolean
+    error?: string
+    warning?: string
+    sidebarNavigation?: boolean
+}