@voicenter-team/voicenter-ui-plus 0.0.1

package/src/components/VcTree/VcTreeSelect.vue

@@ -0,0 +1,472 @@
+<template>
+    <div
+        :class="containerClass"
+        :style="style"
+        class="vc-tree-select"
+    >
+        <VcPopover
+            :open="open"
+            trigger="manual"
+            :popover-max-width="containerWidth"
+            placement="bottom-end"
+            classes-ref="w-full"
+            popover-class="vc-tree-select__dropdown"
+            class="vc-tree-select__dropdown-wrapper"
+        >
+            <template #reference>
+                <div
+                    ref="inputField"
+                    :class="[
+                        ...inputClasses,
+                        {
+                            'is-prefix-icon': prefixIcon,
+                            'is-error': !!isError,
+                            'is-disabled': disabled
+                        }
+                    ]"
+                    class="vc-tree-select__container"
+                    @click.stop="onWrapperClick"
+                >
+                    <div
+                        v-if="prefixIcon"
+                        class="vc-tree-select__prefix-icon"
+                    >
+                        <i
+                            :class="prefixClasses"
+                            :style="prefixStyle"
+                        />
+                    </div>
+                    <div
+                        class="vc-tree-select__content"
+                    >
+                        <div class="vc-tree-select__tags flex flex-wrap">
+                            <VcDelimitedList
+                                :list="selectedModel"
+                                :limit="tagsLimit"
+                                :popover-disabled="open"
+                                trigger="hover"
+                                popover-max-width="250"
+                                separator=""
+                            >
+                                <template #list-item="{item}">
+                                    <VcTag
+                                        :label="item?.label"
+                                        :color="tagColor"
+                                        :max-content="tagMaxContent"
+                                        :borderless="tagBorderless"
+                                        :disabled="disabled"
+                                        closable
+                                        @on-close="onRemoveTag(item)"
+                                    />
+                                </template>
+                                <template #reference="{listLength}">
+                                    <VcTag
+                                        :label="`+ ${listLength}`"
+                                        :borderless="tagBorderless"
+                                        @click.stop.prevent
+                                    />
+                                </template>
+                                <template #other-content="{list}">
+                                    <div class="w-full py-3 px-2">
+                                        <div
+                                            v-for="(item, index) in list"
+                                            :key="index"
+                                            class="flex items-center justify-start m-1"
+                                        >
+                                            <VcTag
+                                                :label="item.label"
+                                                :icon="item.icon"
+                                                :max-content="tagMaxContent"
+                                                :borderless="tagBorderless"
+                                                :disabled="disabled"
+                                                closable
+                                                @on-close="onRemoveTag(item)"
+                                            />
+                                        </div>
+                                    </div>
+                                </template>
+                            </VcDelimitedList>
+                        </div>
+                    </div>
+                    <div
+                        class="vc-tree-select__suffix-icon"
+                    >
+                        <i
+                            class="vc-icon-folders text-icons icon-lg"
+                        />
+                    </div>
+                </div>
+            </template>
+            <div
+                v-if="loading"
+                ref="dropdown"
+                v-click-outside:[inputField]="onClickOutside"
+                class="vc-tree-select__dropdown-content h-full"
+                :style="{width: containerWidth}"
+            >
+                <div class="vc-tree-select__dropdown-tree-content">
+                    <VcTree
+                        v-if="options.length"
+                        ref="treNode"
+                        v-model:expandedKeys="expandedKeys"
+                        :config="config"
+                        :options="options"
+                        :scroll-height="scrollHeight"
+                        :default-checked-keys="checkedKeys"
+                        :empty-text="emptyTextMessage"
+                        @update:selectedKeys="onSelectedKeys"
+                    >
+                        <template
+                            v-if="$slots['option-label']"
+                            #node-label="data"
+                        >
+                            <slot
+                                name="option-label"
+                                :node="data.node"
+                            />
+                        </template>
+                    </VcTree>
+                    <div
+                        v-else
+                        class="vc-tree-select__empty-text"
+                    >
+                        {{ emptyTextMessage }}
+                    </div>
+                </div>
+            </div>
+        </VcPopover>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { VcTagColorType } from '@/components/VcTag/VcTag.types'
+import VcTag from '@/components/VcTag/VcTag.vue'
+import VcPopover from '@/components/VcPopover/VcPopover.vue'
+import VcTree from '@/components/VcTree/VcTree.vue'
+import { VcTreeActionKeys, VcTreeConfig, VcTreeNodeType } from '@/components/VcTree/VcTree.types'
+import VcDelimitedList from '@/components/VcDelimitedList/VcDelimitedList.vue'
+import inputMixin from '@/mixins/input/input.mixin'
+
+import { ClickOutside } from 'element-plus'
+
+const CLASS_FOR_COLOR = 'vc-tree-select--'
+const DEFAULT_CONFIG = {
+    valueKey: 'id',
+    labelKey: 'label',
+    iconKey: 'icon',
+    childrenKey: 'children'
+}
+
+export default defineComponent({
+    name: 'VcTreeSelect',
+    components: { VcDelimitedList, VcTree, VcPopover, VcTag },
+    directives: { ClickOutside },
+    mixins: [inputMixin],
+    props: {
+        modelValue: {
+            type: Array as PropType<VcTreeNodeType[]>,
+            default: undefined
+        },
+        class: {
+            type: String,
+            default: ''
+        },
+        style: {
+            type: [String, Object],
+            default: null
+        },
+        tagColor: {
+            type: String as PropType<VcTagColorType>,
+            default: 'primary'
+        },
+        tagBorderless: {
+            type: Boolean,
+            default: false
+        },
+        config: {
+            type: Object as PropType<VcTreeConfig>,
+            default: () => ({ ...DEFAULT_CONFIG })
+        },
+        options: {
+            type: Array as PropType<VcTreeNodeType[]>,
+            default: () => []
+        },
+        returnedValue: {
+            type: String,
+            default: ''
+        },
+        loading: {
+            type: Boolean,
+            default: true
+        },
+        emptyText: {
+            type: String,
+            default: ''
+        },
+        tagsLimit: {
+            type: Number,
+            default: 3
+        },
+        scrollHeight: {
+            type: [String, Number],
+            default: 252
+        }
+    },
+    emits: ['update:modelValue', 'on-change'],
+    data () {
+        return {
+            colorClass: CLASS_FOR_COLOR,
+            containerWidth: '200px',
+            focused: false,
+            tagMaxContent: '180',
+            open: false,
+            localData: [] as VcTreeNodeType[],
+            expandedKeys: {} as VcTreeActionKeys[]
+        }
+    },
+    computed: {
+        inputField () {
+            return this.$refs.inputField
+        },
+        nodeKey (): string | number {
+            return this.config?.valueKey || DEFAULT_CONFIG.valueKey
+        },
+        /* TODO: rework selectedModel value to watchers */
+        selectedModel: {
+            get (): VcTreeNodeType[] {
+                if (!this.modelValue) {
+                    return this.localData
+                }
+                return this.modelValue
+            },
+            set (val: VcTreeNodeType[]) {
+                if (!this.modelValue) {
+                    this.localData = val
+                } else {
+                    this.emitData(val)
+                }
+            }
+        },
+        checkedKeys () {
+            return this.selectedModel.map((item: VcTreeNodeType) => item[this.nodeKey])
+        },
+        inputClasses (): (string)[] {
+            const colorClass = this.color ? (this.colorClass + this.color) : ''
+            return [
+                colorClass
+            ]
+        },
+        containerClass () {
+            return [this.class, {
+                'vc-tree-select__wrap--filled': !!(this.modelValue && this.modelValue.length),
+                'vc-tree-select__wrap--focus': this.open,
+                'vc-tree-select__wrap--error': !!this.isError,
+                'vc-tree-select__wrap--disabled': this.disabled
+            }]
+        },
+        emptyTextMessage () {
+            return this.emptyText ? this.emptyText : this.$tVU.t('general.no.data')
+        }
+    },
+    mounted () {
+        this.setContainerWidth()
+        window.addEventListener('resize', this.setContainerWidth, true)
+    },
+    beforeUnmount () {
+        window.removeEventListener('resize', this.setContainerWidth)
+    },
+    methods: {
+        onClickOutside () {
+            this.open = false
+        },
+        emitData (val: VcTreeNodeType[]): void {
+            if (this.returnedValue) {
+                const _res = val.map((item: VcTreeNodeType) => item[this.returnedValue])
+                this.$emit('on-change', _res)
+            } else {
+                this.$emit('on-change', val)
+            }
+            this.$emit('update:modelValue', val)
+        },
+        onWrapperClick (): void {
+            if (!this.disabled) {
+                this.open = true
+            }
+        },
+        closeDropdown (): void {
+            this.open = false
+        },
+        onRemoveTag (data: VcTreeNodeType) {
+            this.selectedModel = this.selectedModel.filter((item: VcTreeNodeType) => item[this.nodeKey] !== data[this.nodeKey])
+            this.$nextTick(() => {
+                if (this.$refs.treNode) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    (this.$refs.treNode as any).initData()
+                }
+            })
+        },
+        onSelectedKeys (data: VcTreeNodeType[]) {
+            this.selectedModel = data
+        },
+        setContainerWidth () {
+            if (this.$refs.inputField) {
+                this.containerWidth = `${(this.$refs.inputField as HTMLElement).getBoundingClientRect().width}px`
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/sass/main/mixins';
+.vc-tree-select {
+  &__wrap {
+    @apply w-full;
+  }
+  @include labelCustomInput;
+  @include errorContainer;
+
+  &__prefix-icon {
+    @apply flex-shrink-0 flex items-center justify-center px-1 h-full text-active-elements;
+    flex: 0 0 1rem;
+    .vc-input-icon-color--active {
+      @apply text-active-elements;
+    }
+    .vc-input-icon-color--primary {
+      @apply text-primary-actions;
+    }
+    .vc-input-color--secondary {
+      @apply text-secondary-actions;
+    }
+    .vc-input-icon-color--destructive {
+      @apply text-destructive-actions;
+    }
+  }
+  &__suffix-icon {
+    @apply flex-shrink-0 flex items-center justify-center px-1;
+    flex: 0 0 2rem;
+    i {
+      cursor: inherit;
+      transition: all 0.3s ease;
+      &:hover {
+        @apply text-icons;
+      }
+    }
+  }
+  &__container {
+    @apply
+    min-h-8
+    pl-3
+    w-full
+    max-w-full
+    flex items-center justify-between text-sm rounded border border-field-borders outline-none overflow-hidden cursor-pointer;
+    &.is-prefix-icon {
+      @apply pl-0;
+    }
+    &:hover:not(.is-disabled) {
+      @apply shadow-focus-outer;
+    }
+    &.vc-tree-select--active {
+      &:hover:not(.is-disabled) {
+        @apply shadow-focus-outer;
+      }
+      &:focus:not(.is-disabled):not(.is-error) {
+        @apply border-active-elements--focus;
+      }
+    }
+    &.vc-tree-select--primary {
+      &:hover:not(.is-disabled) {
+        @apply shadow-focus-outer-primary;
+      }
+      &:focus:not(.is-disabled):not(.is-error) {
+        @apply border-primary-actions--focus;
+      }
+    }
+    &.vc-tree-select--secondary {
+      &:hover:not(.is-disabled) {
+        @apply shadow-focus-outer-secondary;
+      }
+    }
+    &.vc-tree-select--destructive {
+      &:hover:not(.is-disabled) {
+        @apply shadow-focus-outer-destructive;
+      }
+    }
+  }
+  &__tags {
+    @apply flex-grow;
+    .vc-tree-select__tag-item {
+      @apply mr-1;
+    }
+  }
+  &__wrap {
+    &--focus:not(&--disabled):not(&--error) {
+      .vc-tree-select__container {
+        @apply border-primary-actions--focus;
+        &.vc-tree-select--active {
+          &:not(.is-error) {
+            @apply border-active-elements--focus;
+          }
+        }
+        &.vc-tree-select--primary {
+          &:not(.is-error) {
+            @apply border-primary-actions--focus;
+          }
+        }
+        &.vc-tree-select--secondary {
+          &:not(.is-error) {
+            @apply border-secondary-actions--focus;
+          }
+        }
+        &.vc-tree-select--destructive {
+          &:not(.is-error) {
+            @apply border-destructive-actions--focus;
+          }
+        }
+      }
+    }
+    &--error {
+      .vc-tree-select__container {
+        @apply border-error;
+      }
+    }
+    &--disabled {
+      .vc-tree-select__container, input {
+        @apply bg-default-bg;
+        &:hover {
+          @apply cursor-not-allowed shadow-none;
+        }
+      }
+    }
+  }
+  &__content {
+    @apply flex-grow flex-wrap;
+    overflow: hidden;
+    flex: 1 0 2rem;
+  }
+  &__empty-text {
+    @apply text-center text-inactive-elements pt-2 items-center;
+  }
+  &__dropdown-content {
+    @apply overflow-hidden py-3 px-1;
+  }
+}
+</style>
+<style lang="scss">
+[dir='rtl'] {
+  .vc-tree-select {
+    &__container {
+      @apply pr-3;
+      &.is-prefix-icon {
+        @apply pr-0;
+      }
+    }
+    &__tags {
+      .vc-tag-input__tag-item {
+        @apply mr-0 ml-1;
+      }
+    }
+  }
+}
+</style>

package/src/components/VcVerticalTabs/UiComponents/VerticalTabNav.vue

@@ -0,0 +1,99 @@
+<template>
+    <div
+        class="vc-vertical-tabs__nav"
+    >
+        <div
+            v-for="(option, index) in options"
+            :key="optionKey(option, index, config)"
+            :class="{
+                'is_active': optionKey(option, index, config) === activeTab && !optionDisabled(option, {disabledKey: 'disabled'}),
+                'is_disabled': optionDisabled(option, {disabledKey: 'disabled'})
+            }"
+            class="vc-vertical-tabs__item"
+            :tabindex="optionDisabled(option, {disabledKey: 'disabled'}) ? -1 : 0"
+            @click="onClick(option, optionKey(option, index, config))"
+            @keyup.enter="onClick(option, optionKey(option, index, config))"
+        >
+            <div
+                class="flex items-center"
+            >
+                <i
+                    :class="optionIcon(option, config)"
+                    class="vertical-tab-icon icon-base min-w-4"
+                />
+                <div
+                    class="tab-name-content mx-2 tab-name text-sm font-medium focus:outline-none"
+                >
+                    {{ optionLabel(option, config) }}
+                </div>
+            </div>
+        </div>
+    </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: 'VerticalTabNav',
+    mixins: [optionMethods],
+    props: {
+        activeIndex: {
+            type: String,
+            required: true
+        }
+    },
+    emits: ['change', 'indexOfActiveElement'],
+    data () {
+        return {
+            activeTab: '' as KeyAttributeType | unknown | undefined
+        }
+    },
+    watch: {
+        modelValue (val) {
+            this.activeTab = val
+        }
+    },
+    mounted () {
+        this.activeTab = this.activeIndex
+    },
+    methods: {
+        onClick (option: OptionType, item: KeyAttributeType): void {
+            this.activeTab = item
+            this.$emit('change', option)
+            this.$emit('indexOfActiveElement', item)
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.vc-vertical-tabs__nav {
+  @apply h-full;
+  .vc-vertical-tabs__item {
+    @apply mx-1 my-2;
+  }
+  .vc-vertical-tabs__item {
+    @apply outline-none leading-40px relative cursor-pointer h-10 bg-white rounded-sm select-none font-normal text-default-text text-sm transition-all duration-500 ease-in-out pl-5 pr-5 shadow-vertical-tab-item;
+    .vertical-tab-icon {
+      @apply text-active-elements transition-all duration-500 ease-in-out;
+    }
+    &:focus-visible {
+      @apply outline-none;
+    }
+
+    &.is_active, &:hover, &:focus-visible {
+      @apply bg-active-elements text-white;
+      .vertical-tab-icon {
+        @apply text-white;
+      }
+    }
+    &.is_disabled {
+      @apply cursor-not-allowed opacity-50 pointer-events-none;
+    }
+  }
+}
+</style>

package/src/components/VcVerticalTabs/VcVerticalTabs.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="vc-vertical-tabs">
+        <div class="vc-vertical-tabs__wrapper">
+            <div class="vc-vertical-tabs__header">
+                <div class="ml-1 mb-2 text-sm font-medium">
+                    {{ tabsTitle }}
+                </div>
+                <div class="vc-vertical-tabs__nav-wrapper">
+                    <vertical-tab-nav
+                        :options="options"
+                        :config="config"
+                        :active-index="modelValue"
+                        @index-of-active-element="getActiveIndex"
+                        @change="change"
+                    />
+                </div>
+            </div>
+            <div class="vc-vertical-tabs__content-wrapper">
+                <div class="mb-2 text-sm font-medium">
+                    {{ tabTitle }}
+                </div>
+                <div class="vc-vertical-tabs__content py-2">
+                    <div class="vc-vertical-tabs__content--content overflow-y-auto h-full">
+                        <slot :name="slotName" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import VerticalTabNav from '@/components/VcVerticalTabs/UiComponents/VerticalTabNav.vue'
+import optionMethods from '@/mixins/optionMethods.mixin'
+import { KeyAttributeType } from '@/types/VueGeneric.types'
+import { OptionType } from '@/types/OptionAndConfig.types'
+
+export default defineComponent({
+    name: 'VcVerticalTabs',
+    components: { VerticalTabNav },
+    mixins: [optionMethods],
+    props: {
+        modelValue: {
+            type: String,
+            required: true
+        },
+        tabTitle: {
+            type: String,
+            default: ''
+        },
+        tabsTitle: {
+            type: String,
+            default: ''
+        }
+    },
+    emits: ['change', 'update:modelValue'],
+    data () {
+        return {
+            activeElement: '' as KeyAttributeType | unknown | undefined
+        }
+    },
+    computed: {
+        slotName () {
+            const allKeys: KeyAttributeType[] | unknown[] | undefined[] = Object.values(this.options).map((el, index) => typeof el === 'object' && this.optionKey(el, index, this.config))
+            const validationIsStringAndNotEmpty = typeof this.activeElement === 'string' && this.activeElement
+
+            return validationIsStringAndNotEmpty && allKeys.includes(this.activeElement) ? this.activeElement : ''
+        }
+    },
+    mounted () {
+        this.activeElement = this.modelValue
+    },
+    methods: {
+        getActiveIndex (index: KeyAttributeType | unknown | undefined) {
+            this.activeElement = index
+            this.$emit('update:modelValue', index)
+        },
+        change (val: OptionType) {
+            this.$emit('change', val)
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+$max-height: 300px;
+
+.vc-vertical-tabs {
+  @apply box-border max-h-inherit bg-transparent max-w-full h-fit-content;
+  &__wrapper {
+    @apply flex flex-row w-full;
+  }
+  &__header {
+    @apply mr-1.5 h-auto mb-0 overflow-hidden min-w-xs relative;
+  }
+  &__nav-wrapper {
+    @apply overflow-y-auto pr-0.5;
+    max-height: $max-height;
+  }
+  &__content-wrapper {
+    @apply flex-grow h-auto overflow-hidden;
+  }
+  &__content {
+    @apply h-full;
+    max-height: $max-height;
+    &--content {
+      @apply border border-secondary-actions rounded-md p-4 bg-default-bg;
+    }
+  }
+
+  ::-webkit-scrollbar {
+    @apply w-1.5 h-1.5;
+  }
+  ::-webkit-scrollbar-track {
+    @apply rounded-lg shadow-vertical-tab-scroll mt-2;
+  }
+  ::-webkit-scrollbar-thumb {
+    @apply bg-secondary-actions rounded-xxl;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-secondary-actions--focus;
+  }
+}
+</style>