@voicenter-team/voicenter-ui-plus 0.0.1

package/src/components/VcViewSwitcher/VcViewSwitcher.vue

@@ -0,0 +1,137 @@
+<template>
+    <div class="vc-view-switcher__wrap">
+        <span
+            class="vc-view-switcher"
+            :class="{ 'vc-view-switcher--disabled': disabled }"
+            :data-test-name="dataTestName"
+        >
+            <span
+                v-for="(option, index) in options"
+                :key="optionKey(option, index, config)"
+                class="vc-view-switcher-container"
+                tabindex="-1"
+            >
+                <span
+                    class="vc-view-switcher-item"
+                    :class="[
+                        { 'vc-view-switcher-item--active': optionKey(option, index, config) === activeElement },
+                        { 'vc-view-switcher-item--disabled': optionDisabled(option, {disabledKey: 'disabled'}) }
+                    ]"
+                    :tabindex="optionDisabled(option, {disabledKey: 'disabled'}) ? -1 : 0"
+                    @keyup.enter="onClick(option, optionKey(option, index, config))"
+                    @click="onClick(option, optionKey(option, index, config))"
+                >
+                    <i
+                        :class="optionIcon(option, config)"
+                        class="vc-view-switcher-item--icon text-icons"
+                    />
+                    <span
+                        class="vc-view-switcher-item--text"
+                    >
+                        {{ optionLabel(option, config) }}
+                    </span>
+                </span>
+                <span class="vc-view-switcher-item--vertical-line" />
+            </span>
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import optionMethods from '@/mixins/optionMethods.mixin'
+import { OptionType } from '@/types/OptionAndConfig.types'
+import { KeyAttributeType } from '@/types/VueGeneric.types'
+
+export default defineComponent({
+    name: 'VcViewSwitcher',
+    mixins: [optionMethods],
+    props: {
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        dataTestName: {
+            type: String,
+            default: 'default'
+        },
+        modelValue: {
+            type: [Number, String],
+            default: ''
+        }
+    },
+    emits: ['change', 'update:modelValue'],
+    data () {
+        return {
+            activeElement: '' as KeyAttributeType | unknown | undefined
+        }
+    },
+    watch: {
+        modelValue (val) {
+            this.activeElement = val
+        }
+    },
+    mounted () {
+        this.activeElement = this.modelValue
+    },
+    methods: {
+        onClick (option: OptionType, item: KeyAttributeType): void {
+            this.activeElement = item
+            this.$emit('change', option)
+            this.$emit('update:modelValue', item)
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.vc-view-switcher {
+  @apply p-1 bg-secondary-actions-bg--focus rounded border border-secondary-actions outline-none h-8 inline-flex items-center;
+    &__wrap {
+        @apply max-w-full overflow-x-auto overflow-y-hidden pb-0.5 relative;
+        &::-webkit-scrollbar {
+            width: 2px;
+            height: 2px;
+        }
+    }
+  &--disabled {
+    @apply cursor-not-allowed opacity-50 pointer-events-none select-none;
+  }
+  &--disabled &-item {
+    @apply cursor-not-allowed select-none;
+  }
+  &-item {
+    @apply px-3 h-6 cursor-pointer inline-flex relative items-center;
+    &--icon {
+      @apply mr-1 rtl:mr-0 rtl:ml-1;
+    }
+    &--text {
+      @apply text-sm font-medium text-default-text;
+    }
+    &--active {
+      @apply rounded bg-white shadow-view-switcher;
+    }
+    &--vertical-line {
+      @apply border-r border-secondary-actions inline-block mx-0.5 h-8;
+    }
+    &:not(.vc-view-switcher-item--active):hover {
+      @apply bg-active-elements-bg--focus rounded shadow-view-switcher transition duration-300 ease-in-out;
+    }
+  }
+  &-item:not(.vc-view-switcher-item--active):focus-visible {
+    @apply bg-active-elements-bg--focus rounded shadow-view-switcher transition duration-300 ease-in-out;
+  }
+  &-item {
+    @apply outline-none;
+  }
+  &:not(.vc-view-switcher--disabled) &-item--disabled {
+    @apply cursor-not-allowed opacity-50 pointer-events-none;
+  }
+  &-container:last-child &-item--vertical-line {
+    @apply hidden;
+  }
+  &-container {
+    @apply inline-flex items-center;
+  }
+}
+</style>

package/src/components/VcWizard/VcSummaryProgress.vue

@@ -0,0 +1,193 @@
+<template>
+    <div
+        :class="{'active': isActive}"
+        class="summary-step-progress"
+    >
+        <div
+            v-show="visible"
+            :class="lineFilledClass"
+            class="summary-step-progress-line relative"
+        >
+            <div class="summary-step-dividers">
+                <span
+                    v-for="item in countDownIcons"
+                    :key="`down-${item}`"
+                    class="divide-icon"
+                >
+                    <i class="vc-icon-down icon-base text-white" />
+                </span>
+            </div>
+            <i class="summary-step-progress-line-inner h-0 h-full" />
+        </div>
+        <div class="summary-step-progress-circle">
+            <div
+                :class="dotFilledClass"
+                class="summary-step-progress-circle-point"
+            />
+            <div class="summary-step-progress-circle-icon">
+                <i
+                    :class="[icon, activeDot ? 'text-active-elements' : 'text-inactive-elements']"
+                    class="step-icon min-w-8"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+const DEFAULT_ICON = 'vc-icon-settings'
+
+export default defineComponent({
+    name: 'VcSummaryProgress',
+    props: {
+        icon: {
+            type: String,
+            default: DEFAULT_ICON
+        },
+        lineFilled: {
+            type: Boolean,
+            default: false
+        },
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        isActive: {
+            type: Boolean,
+            default: false
+        },
+        activeDot: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data: () => ({
+        countDownIcons: 3
+    }),
+    computed: {
+        lineFilledClass (): string {
+            return this.lineFilled ? 'bg-progress-line-done' : 'bg-progress-line-not-done'
+        },
+        dotFilledClass (): string {
+            return this.activeDot ? 'border-progress-line-done' : 'border-progress-line-not-done'
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.summary-step-progress {
+  @apply
+  relative
+  h-4
+  lg:h-full
+  w-full
+  lg:w-4
+  flex-shrink-0
+  border-progress-line-not-done;
+
+  .summary-step-progress-line {
+    width: 6px;
+    top: 14px;
+    bottom: 0;
+    left: 4px;
+    border-color: inherit;
+    position: absolute;
+  }
+
+  .summary-step-progress-circle {
+    @apply absolute rounded-full;
+    border-width: 1px;
+    width: 30px;
+    height: 30px;
+    transform: translateY(-8px);
+    left: -50%;
+    background: transparent;
+    border-color: transparent;
+    z-index: 1;
+    transition: .3s ease-out;
+
+    .summary-step-progress-circle-point {
+      @apply absolute bg-white rounded-full h-4 w-4;
+      border-width: 4px;
+      --bg-opacity: 1;
+      transform: translate(-50%, -50%);
+      left: 50%;
+      top: 50%;
+    }
+
+    .summary-step-progress-circle-icon {
+      position: absolute;
+      right: calc(100% + 8px);
+      .step-icon {
+        font-size: 1.875rem
+      }
+    }
+  }
+
+  .summary-step-dividers {
+    @apply flex lg:flex-col justify-around items-center h-full w-full absolute;
+  }
+
+  &.active {
+    @apply cursor-pointer;
+    .summary-step-progress-circle {
+      @apply border-active-elements bg-active-elements-bg--focus;
+    }
+  }
+  @media only screen and (max-width: 1264px) {
+    .summary-step-progress-line {
+      width: 100%;
+      height: 6px;
+      top: 4px;
+      left: calc(50% + 8px);
+    }
+    .summary-step-progress-circle {
+      left: 50%;
+      .summary-step-progress-circle-icon {
+        top: calc(100% + 2px);
+        right: 50%;
+        transform: translateX(50%);
+        .step-icon {
+          font-size: 1.375rem
+        }
+      }
+    }
+    .summary-step-dividers {
+      .divide-icon {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}
+[dir='rtl'] {
+  .summary-step-progress {
+    .summary-step-progress-circle {
+      .summary-step-progress-circle-icon {
+        left: calc(100% + 8px);
+        right: auto;
+      }
+    }
+    @media only screen and (max-width: 1264px) {
+      .summary-step-progress-line {
+        right: calc(50% - 8px);
+        left: auto;
+      }
+      .summary-step-progress-circle {
+        .summary-step-progress-circle-icon {
+          left: 50%;
+          right: auto;
+          transform: translateX(-50%);
+        }
+      }
+      .summary-step-dividers {
+        .divide-icon {
+          transform: rotate(90deg);
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/VcWizard/VcSummaryStep.vue

@@ -0,0 +1,172 @@
+<template>
+    <div
+        :class="{
+            'active': isActive,
+            'passed': isPassed,
+            'visited': isVisited
+        }"
+        class="summary-step"
+        @click="onClickSepSummary"
+    >
+        <VcSummaryProgress
+            :icon="step.icon"
+            :visible="isProgressLine"
+            :line-filled="isPassed"
+            :active-dot="isVisited"
+            :is-active="isActive"
+        />
+        <div class="summary-step-content">
+            <div class="flex justify-center lg:justify-between">
+                <span class="summary-step-content-header leading-none">
+                    <h2
+                        :class="{'text-primary': isActive}"
+                        class="mb-0 text-sm lg:text-base font-bold uppercase"
+                    >
+                        {{ `${stepIndex + 1}. ${step.label}` }}
+                    </h2>
+                </span>
+                <i
+                    v-show="canEdit"
+                    class="vc-icon-edit-pencil icon-base text-active-elements"
+                />
+            </div>
+            <transition name="fade-content">
+                <div
+                    v-show="isVisited"
+                    class="summary-step-content-list"
+                >
+                    <div
+                        v-for="(row, i) in content"
+                        :key="`r-${i}`"
+                        class="mb-1 flex"
+                    >
+                        <div
+                            class="font-medium text-sm lg:text-base"
+                        >
+                            {{ row.label }}:&nbsp;
+                        </div>
+                        <div
+                            class="text-value font-normal text-sm lg:text-base break-all"
+                            v-html="row.value"
+                        />
+                    </div>
+                </div>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import VcSummaryProgress from '@/components/VcWizard/VcSummaryProgress.vue'
+import { VcWizardStepType, VcWizardSummaryContentType } from './VcWizard.types'
+
+export default defineComponent({
+    name: 'VcSummaryStep',
+    components: { VcSummaryProgress },
+    props: {
+        stepIndex: {
+            type: Number,
+            default: -1
+        },
+        step: {
+            type: Object as PropType<VcWizardStepType>,
+            required: true
+        },
+        stepsCount: {
+            type: Number,
+            default: 0
+        },
+        visited: {
+            type: Number,
+            default: 0
+        },
+        activeIndex: {
+            type: Number,
+            default: 0
+        },
+        content: {
+            type: Array as PropType<Array<VcWizardSummaryContentType>>,
+            default: () => []
+        }
+    },
+    emits: ['click-step'],
+    computed: {
+        canEdit (): boolean {
+            return this.stepIndex <= this.visited && this.stepIndex !== this.activeIndex
+        },
+        isVisited (): boolean {
+            return this.stepIndex <= this.visited
+        },
+        isPassed (): boolean {
+            return this.stepIndex < this.visited
+        },
+        isActive (): boolean {
+            return this.stepIndex === this.activeIndex
+        },
+        isProgressLine (): boolean {
+            return this.stepIndex < this.stepsCount - 1
+        }
+    },
+    methods: {
+        onClickSepSummary (): void {
+            if (this.canEdit) {
+                this.$emit('click-step', this.stepIndex)
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.summary-step {
+  @apply
+  w-full
+  justify-center
+  flex-col
+  items-center
+  lg:w-auto
+  lg:flex-row
+  lg:justify-start
+  lg:items-start
+  flex;
+  min-height: 80px;
+  &.active, &.passed, &.visited {
+    @apply cursor-pointer;
+  }
+  &-content {
+    @apply w-full hidden lg:block flex-grow whitespace-normal pl-4 mb-10;
+  }
+  &-content-list {
+    @apply hidden lg:block mt-4;
+    transform-origin: left top;
+  }
+  &-content-header {
+    @apply justify-center lg:justify-start;
+  }
+}
+
+[dir='rtl'] {
+  .summary-step {
+    &-content {
+      @apply pl-0 pr-4;
+    }
+  }
+}
+
+.fade-content-enter-active,
+.fade-content-leave-active {
+  transition: all 0.3s linear;
+  overflow: hidden;
+}
+.fade-content-enter-from,
+.fade-content-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+.fade-content-enter-to,
+.fade-content-leave-from {
+  opacity: 1;
+  max-height: 100%;
+}
+</style>