@voicenter-team/voicenter-ui-plus 0.0.1

package/src/components/VcWizard/VcWizard.vue

@@ -0,0 +1,292 @@
+<template>
+    <div
+        :class="{
+            'full-width': !showSummary,
+            'no-header': !showHeader
+        }"
+        :style="{
+            height: wizardHeight
+        }"
+        class="vc-wizard"
+    >
+        <div class="vc-wizard-steps">
+            <div class="vc-wizard-steps-content">
+                <div
+                    v-show="showHeader"
+                    class="steps-header"
+                >
+                    <div class="px-5">
+                        <slot
+                            v-if="$slots['header-nav']"
+                            name="header-nav"
+                        />
+                        <span
+                            v-else
+                            class="text-sm font-medium "
+                        >
+                            {{ $tVU.t('wizard.step.of', { current: activeIndex + 1, length: steps.length }) }}
+                        </span>
+                    </div>
+                    <div class="px-5">
+                        <slot name="header-info" />
+                    </div>
+                </div>
+                <div class="steps-content">
+                    <div class="vc-stepper__items relative">
+                        <VcWizardTransition
+                            :direction="direction"
+                        >
+                            <template
+                                v-for="(step, index) in steps"
+                                :key="`step-${index}`"
+                            >
+                                <div
+                                    v-show="index === activeIndex"
+                                    v-bind="step.attrs"
+                                    class="vc-stepper__content"
+                                >
+                                    <slot
+                                        :name="step.step"
+                                        :step="step"
+                                        :index="index"
+                                    />
+                                </div>
+                            </template>
+                        </VcWizardTransition>
+                    </div>
+                </div>
+                <VcWizardNavigation
+                    :show-prev-btn="!!activeIndex"
+                    :show-next-btn="!isFinalStep"
+                    :show-final-btn="isFinalStep"
+                    :show-final-add-slot="isFinalAddSlot"
+                    :loading="dataLoading"
+                    :disabled-next-btn="!canNext"
+                    @on-cancel="onCancel"
+                    @on-prev="onPrev"
+                    @on-next="onNext"
+                    @on-final="onFinal"
+                >
+                    <template
+                        v-if="isFinalAddSlot"
+                        #additional-actions
+                    >
+                        <slot name="final-actions" />
+                    </template>
+                    <template
+                        v-if="$slots['extra-actions']"
+                        #extra-actions
+                    >
+                        <slot name="extra-actions" />
+                    </template>
+                    <template
+                        v-if="$slots.navigation"
+                        #navigation
+                    >
+                        <slot name="navigation" />
+                    </template>
+                </VcWizardNavigation>
+            </div>
+        </div>
+        <VcWizardSummary
+            v-if="showSummary"
+            :steps="steps"
+            :active-index="+activeStep"
+            :visited="maxVisited"
+            :content="summary"
+            @update-step="goToStep"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import Transition from './baseTransition'
+import VcWizardSummary from '@/components/VcWizard/VcWizardSummary.vue'
+import VcWizardTransition from '@/components/VcWizard/VcWizardTransition.vue'
+import VcWizardNavigation from '@/components/VcWizard/VcWizardNavigation.vue'
+import { VcWizardStepType, VcWizardSummaryType } from './VcWizard.types'
+import { convertToUnit } from '@/utils/helpers'
+
+export default defineComponent({
+    name: 'VcWizard',
+    components: { VcWizardNavigation, VcWizardTransition, VcWizardSummary },
+    mixins: [Transition],
+    props: {
+        activeStep: {
+            type: [Number, String],
+            default: 0
+        },
+        steps: {
+            type: Array as PropType<VcWizardStepType[]>,
+            default: () => []
+        },
+        showHeader: {
+            type: Boolean,
+            default: true
+        },
+        showSummary: {
+            type: Boolean,
+            default: true
+        },
+        dataLoading: {
+            type: Boolean,
+            default: false
+        },
+        summary: {
+            type: Object as PropType<VcWizardSummaryType>,
+            default: () => ({})
+        },
+        height: {
+            type: [String, Number],
+            default: '100%'
+        },
+        canNext: {
+            type: Boolean,
+            default: true
+        }
+    },
+    emits: ['update-step', 'cancel', 'final'],
+    data: () => ({
+        activeIndex: 0,
+        maxVisited: 0,
+        direction: 'right'
+    }),
+    computed: {
+        isFinalStep (): boolean {
+            return this.activeIndex >= this.steps?.length - 1
+        },
+        isStartStep (): boolean {
+            return this.activeIndex === 0
+        },
+        isFinalAddSlot (): boolean {
+            return !!(this.isFinalStep && this.$slots['final-actions'])
+        },
+        wizardHeight (): string | undefined {
+            return convertToUnit(this.height)
+        }
+    },
+    watch: {
+        activeIndex (newV, oldVal) {
+            if (newV > oldVal) {
+                this.direction = 'right'
+            } else {
+                this.direction = 'left'
+            }
+            this.setMaxVisitedStep(newV)
+        },
+        activeStep () {
+            this.setActiveIndex()
+        }
+    },
+    mounted () {
+        this.setActiveIndex()
+    },
+    methods: {
+        setMaxVisitedStep (val: number): void {
+            if (val >= 0 && val > this.maxVisited) {
+                this.maxVisited = val
+            }
+        },
+        onNext (): void {
+            if (!this.isFinalStep) {
+                this.goToStep(this.activeIndex + 1)
+            }
+        },
+        onPrev (): void {
+            if (this.activeIndex > 0) {
+                this.goToStep(this.activeIndex - 1)
+            }
+        },
+        goToStep (index: number): void {
+            this.$emit('update-step', index, {
+                isVisited: index <= this.maxVisited
+            })
+        },
+        onCancel (): void {
+            this.$emit('cancel')
+        },
+        onFinal (): void {
+            this.$emit('final')
+        },
+        setActiveIndex (): void {
+            if (!isNaN(Number(this.activeStep))) {
+                this.activeIndex = +this.activeStep
+            } else {
+                const index = this.steps.findIndex((i: VcWizardStepType) => i?.step === this.activeStep)
+                this.activeIndex = index >= 0 ? index : 0
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+$summaryWidthXl: 425px;
+$summaryWidthLg: 380px;
+$stepsHeader: 60px;
+$stepsNavigation: 80px;
+$stepsHeightDiv: $stepsHeader + $stepsNavigation;
+
+.vc-wizard {
+  --vc-wizard-summary-width: #{$summaryWidthXl};
+  --vc-wizard-header: #{$stepsHeader};
+  --vc-wizard-navigation: #{$stepsNavigation};
+  &.no-header {
+    --vc-wizard-header: 0px;
+  }
+  @apply
+  w-full
+  relative
+  shadow-card
+  rounded-md
+  flex
+  justify-between
+  overflow-hidden;
+
+  &-steps {
+    @apply h-full w-full overflow-hidden;
+    max-width: calc(100% - var(--vc-wizard-summary-width));
+  }
+  &.full-width {
+    .vc-wizard-steps {
+      max-width: 100%;
+    }
+  }
+
+  &-steps-content {
+    @apply w-full h-full relative flex flex-col overflow-hidden;
+
+    .steps-header {
+      @apply w-full hidden lg:flex justify-between items-center py-3 px-4 lg:px-8 xxl:px-15;
+      flex: 0 0 var(--vc-wizard-header);
+    }
+    .steps-content {
+      @apply bg-white overflow-hidden;
+      flex: 1 0 auto;
+      max-height: calc(100% - var(--vc-wizard-header) - var(--vc-wizard-navigation));
+    }
+
+    .vc-stepper__items {
+      @apply w-full h-full bg-white relative box-border flex;
+      .vc-stepper__content {
+        @apply top-0 p-6 w-full h-full overflow-y-auto;
+        flex: 1 0 auto;
+      }
+    }
+  }
+
+  @media only screen and (max-width: 1680px) {
+    --vc-wizard-summary-width: #{$summaryWidthLg}
+  }
+  @media only screen and (max-width: 1264px) {
+    --vc-wizard-summary-width: 100%;
+    --vc-wizard-header: 0px;
+    flex-direction: column;
+    &-steps {
+      max-width: 100%;
+      order: 2;
+    }
+  }
+}
+</style>

package/src/components/VcWizard/VcWizardNavigation.vue

@@ -0,0 +1,196 @@
+<template>
+    <div class="vc-wizard-navigation">
+        <slot name="navigation">
+            <div class="left-actions">
+                <VcButton
+                    size="large"
+                    color="secondary"
+                    type="outline"
+                    icon="vc-icon-cancel"
+                    @click="onCancel"
+                >
+                    {{ cancelButtonText }}
+                </VcButton>
+            </div>
+            <div
+                v-if="$slots['extra-actions']"
+                class="extra-actions"
+            >
+                <slot name="extra-actions" />
+            </div>
+            <div class="right-actions px-5">
+                <div class="default-actions">
+                    <div class="action-item">
+                        <VcButton
+                            v-if="showPrevBtn"
+                            type="borderless"
+                            icon="vc-icon-back"
+                            size="large"
+                            @click="onPrev"
+                        >
+                            {{ backButtonText }}
+                        </VcButton>
+                    </div>
+                    <div
+                        v-if="showNextBtn"
+                        class="action-item"
+                    >
+                        <VcButton
+                            :loading="loading"
+                            :disabled="disabledNextBtn"
+                            size="large"
+                            @click="onNext"
+                        >
+                            <span>
+                                {{ nextButtonText }}
+                            </span>
+                            <i class="vc-icon-next icon-base" />
+                        </VcButton>
+                    </div>
+                    <div
+                        v-if="showFinalBtn"
+                        class="action-item"
+                    >
+                        <VcButton
+                            :loading="loading"
+                            icon="vc-icon-Save"
+                            size="large"
+                            @click="onFinal"
+                        >
+                            {{ finalButtonText }}
+                        </VcButton>
+                    </div>
+                </div>
+                <div
+                    v-if="showFinalAddSlot"
+                    class="additional-actions"
+                >
+                    <slot name="additional-actions" />
+                </div>
+            </div>
+        </slot>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import VcButton from '@/components/VcButton/VcButton.vue'
+
+export default defineComponent({
+    name: 'VcWizardNavigation',
+    components: { VcButton },
+    props: {
+        cancelName: {
+            type: String,
+            default: ''
+        },
+        backName: {
+            type: String,
+            default: ''
+        },
+        nextName: {
+            type: String,
+            default: ''
+        },
+        finalName: {
+            type: String,
+            default: ''
+        },
+        showPrevBtn: {
+            type: Boolean,
+            default: false
+        },
+        showNextBtn: {
+            type: Boolean,
+            default: true
+        },
+        disabledNextBtn: {
+            type: Boolean,
+            default: false
+        },
+        showFinalBtn: {
+            type: Boolean,
+            default: true
+        },
+        showFinalAddSlot: {
+            type: Boolean,
+            default: true
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['on-cancel', 'on-prev', 'on-next', 'on-final'],
+    computed: {
+        cancelButtonText () {
+            return this.cancelName ? this.cancelName : this.$tVU.t('wizard.navigation.cancel')
+        },
+        backButtonText () {
+            return this.backName ? this.backName : this.$tVU.t('wizard.navigation.back')
+        },
+        nextButtonText () {
+            return this.nextName ? this.nextName : this.$tVU.t('wizard.navigation.next')
+        },
+        finalButtonText () {
+            return this.finalName ? this.finalName : this.$tVU.t('wizard.navigation.finish')
+        }
+    },
+    methods: {
+        onCancel (): void {
+            this.$emit('on-cancel')
+        },
+        onPrev (): void {
+            this.$emit('on-prev')
+        },
+        onNext (): void {
+            this.$emit('on-next')
+        },
+        onFinal (): void {
+            this.$emit('on-final')
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+.vc-wizard-navigation {
+  @apply border-t-2 border-field-borders flex justify-between items-center py-3 px-4 lg:px-8 xl:px-15;
+  flex: 0 0 var(--vc-wizard-navigation);
+
+  .left-actions {
+    @apply px-5;
+  }
+  .extra-actions {
+    @apply flex-grow;
+  }
+  .right-actions {
+    @apply flex justify-start items-center;
+
+    .default-actions, .additional-actions {
+      @apply flex justify-start items-center;
+    }
+    .default-actions {
+      .action-item {
+        @apply py-0 px-1 xl:px-3;
+      }
+      .vc-icon-next {
+        @apply ml-2 rtl:mr-2 rtl:ml-0;
+      }
+    }
+    .additional-actions {
+      @apply py-0 px-3;
+    }
+  }
+}
+
+[dir='rtl'] {
+  .vc-wizard-navigation {
+    .action-item {
+      i {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+</style>

package/src/components/VcWizard/VcWizardSummary.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="vc-wizard-summary">
+        <div class="vc-wizard-summary-steps">
+            <template
+                v-for="(stepItem, index) in steps"
+                :key="`summary-${index}`"
+            >
+                <VcSummaryStep
+                    :step-index="index"
+                    :step="stepItem"
+                    :steps-count="steps.length"
+                    :visited="visited"
+                    :active-index="activeIndex"
+                    :content="content[stepItem.step] || []"
+                    @click-step="onClickSummaryStep"
+                />
+            </template>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import VcSummaryStep from '@/components/VcWizard/VcSummaryStep.vue'
+import { VcWizardStepType, VcWizardSummaryType } from './VcWizard.types'
+
+export default defineComponent({
+    name: 'VcWizardSummary',
+    components: { VcSummaryStep },
+    props: {
+        steps: {
+            type: Array as PropType<VcWizardStepType[]>,
+            default: () => ([])
+        },
+        activeIndex: {
+            type: Number,
+            default: 0
+        },
+        visited: {
+            type: Number,
+            default: 0
+        },
+        content: {
+            type: Object as PropType<VcWizardSummaryType>,
+            default: () => ({})
+        }
+    },
+    emits: ['update-step'],
+    methods: {
+        onClickSummaryStep (data: number): void {
+            this.$emit('update-step', data)
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+  .vc-wizard-summary {
+    @apply bg-default-bg px-3 py-0 lg:px-5 lg:py-8 xl:px-10 xl:py-10;
+    width: var(--vc-wizard-summary-width);
+    &-steps {
+      @apply pb-5 lg:pb-0 lg:pl-12 xl:pl-8 w-full h-full relative flex flex-row lg:flex-col;
+    }
+  }
+
+[dir='rtl'] {
+  .vc-wizard-summary {
+    &-steps {
+      @apply lg:pl-0 xl:pl-0 lg:pr-12 xl:pr-8;
+    }
+  }
+}
+</style>

package/src/components/VcWizard/VcWizardTransition.vue

@@ -0,0 +1,119 @@
+<template>
+    <transition-group
+        v-bind="$attrs"
+        :enter-active-class="enterClass"
+        :leave-active-class="leaveClass"
+        move-class="slide-move"
+        v-on="hooks"
+    >
+        <slot />
+    </transition-group>
+</template>
+
+<script lang="ts">
+import Transition from './baseTransition'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'VcWizardTransition',
+    mixins: [Transition],
+    props: {
+        direction: {
+            type: String,
+            default: 'right'
+        },
+        mode: {
+            type: String,
+            default: 'out-in'
+        }
+    },
+    computed: {
+        enterClass (): string {
+            return this.direction === 'left' ? 'slideXRightIn' : 'slideXLeftIn'
+        },
+        leaveClass (): string {
+            return this.direction === 'left' ? 'slideXRightOut' : 'slideXLeftOut'
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+.slideXLeftIn {
+  animation-name: slideXLeftIn;
+}
+
+.slideXLeftOut {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  animation-name: slideXLeftOut;
+}
+
+.slideXRightIn {
+  animation-name: slideXRightIn;
+}
+
+.slideXRightOut {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  animation-name: slideXRightOut;
+}
+
+@keyframes slideXRightOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slideXRightIn {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideXLeftOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slideXLeftIn {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+  }
+}
+[dir='rtl'] {
+  .slideXLeftIn {
+    animation-name: slideXRightIn;
+  }
+  .slideXRightIn {
+    animation-name: slideXLeftIn;
+  }
+  .slideXLeftOut {
+    animation-name: slideXRightOut;
+  }
+  .slideXRightOut {
+    animation-name: slideXLeftOut;
+  }
+}
+</style>