@voicenter-team/voicenter-ui-plus 0.0.1

package/src/components/VcRadioTabs/VcRadioTabs.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="vc-radio-tabs">
+        <div class="vc-radio-tabs__wrapper">
+            <div class="vc-radio-tabs__header">
+                <VcRadioTabsNav
+                    :options="options"
+                    :config="config"
+                    :active-tab="modelValue"
+                    @tab-click="onSetActiveTab"
+                />
+            </div>
+            <div class="vc-radio-tabs__content-wrapper">
+                <div class="vc-radio-tabs__content">
+                    <template v-if="lazy">
+                        <div class="vc-radio-tabs__content-tab">
+                            <slot
+                                :name="modelValue"
+                                :tab="activeOption"
+                            >
+                                {{ activeOption }}
+                            </slot>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div
+                            v-for="(option, index) in options"
+                            v-show="isActiveTab(option)"
+                            :key="`tab-pane-${index}`"
+                            class="vc-radio-tabs__content-tab"
+                        >
+                            <slot
+                                :name="getSlotPaneName(option)"
+                                :tab="option"
+                                :index="index"
+                            >
+                                {{ option }}
+                            </slot>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { ConfigType, OptionType } from '@/types/OptionAndConfig.types'
+import VcRadioTabsNav from '@/components/VcRadioTabs/UiComponents/VcRadioTabsNav.vue'
+
+const DEFAULT_CONFIG = {
+    labelKey: 'name',
+    iconKey: 'icon',
+    keyKey: 'key'
+} as ConfigType
+
+export default defineComponent({
+    name: 'VcRadioTabs',
+    components: { VcRadioTabsNav },
+    props: {
+        modelValue: {
+            type: [String, Number],
+            required: true
+        },
+        config: {
+            type: Object as PropType<ConfigType>,
+            default: () => ({ ...DEFAULT_CONFIG })
+        },
+        options: {
+            type: Array as PropType<OptionType[]>,
+            default: () => ([] as OptionType[])
+        },
+        lazy: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['update:modelValue', 'change'],
+    computed: {
+        activeOption (): OptionType | null | undefined {
+            if (this.modelValue) {
+                return this.options?.find((item: OptionType) => {
+                    if (typeof item === 'object') {
+                        return item[this.config?.keyKey || 'key'] === this.modelValue
+                    }
+                    return item === this.modelValue
+                })
+            }
+            return null
+        }
+    },
+    mounted () {
+        if (!this.modelValue && this.options?.length) {
+            const option = this.options[0]
+            this.updateModelValue(option)
+        }
+    },
+    methods: {
+        onSetActiveTab (data: OptionType): void {
+            this.updateModelValue(data)
+            this.$emit('change', data)
+        },
+        updateModelValue (data: OptionType): void {
+            if (typeof data === 'object') {
+                const _key = this.config.keyKey || 'key'
+                this.$emit('update:modelValue', data[_key])
+            } else {
+                this.$emit('update:modelValue', data)
+            }
+        },
+        getSlotPaneName (option: OptionType): string | number | unknown {
+            if (typeof option === 'object') {
+                const _key = this.config.keyKey || 'key'
+                return option[_key]
+            }
+            return option
+        },
+        isActiveTab (data: OptionType): boolean {
+            if (typeof data === 'object') {
+                const _key = this.config.keyKey || 'key'
+                return this.modelValue === data[_key]
+            }
+
+            return this.modelValue === data
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+    .vc-radio-tabs {
+        @apply box-border w-full h-0.5 overflow-hidden max-w-full border border-secondary-actions rounded-lg;
+        min-height: 16rem;
+        &__wrapper {
+            @apply flex flex-col w-full h-full;
+        }
+        &__header {
+            @apply h-1 mb-0 relative;
+            min-height: 3.5rem;
+        }
+        &__content-wrapper {
+            @apply flex-grow overflow-hidden;
+        }
+        &__content {
+            @apply w-full h-full p-6;
+        }
+        &__content-tab {
+            @apply w-full h-full;
+        }
+    }
+</style>

package/src/components/VcSelect/VcSelect.scss

@@ -0,0 +1,135 @@
+$colorFocus: var(--active-elements--focus);
+
+@mixin ElSelectColorScheme($color) {
+  &.vc-select--#{$color} {
+    --el-select-close-hover-color: var(--#{$color}-actions--focus);
+    --el-select-input-focus-border-color: var(--#{$color}-actions--focus);
+    .el-input {
+      .el-input__prefix {
+        --el-input-icon-color: var(--#{$color}-actions);
+      }
+      .el-select__icon {
+        @apply text-#{$color}-actions;
+      }
+      .el-input__wrapper {
+        &.is-focus  {
+          @apply border-#{$color}-actions--focus;
+          &:hover {
+            box-shadow: 0 0 3px var(--#{$color}-actions--focus) !important;
+          }
+        }
+        &:hover {
+          box-shadow: 0 0 3px var(--#{$color}-actions--focus) !important;
+        }
+      }
+      &.is-focus {
+        .el-input__wrapper {
+          @apply border-#{$color}-actions--focus;
+        }
+      }
+    }
+  }
+}
+
+@mixin ElSelectDropdownColorScheme($color, $suffix: false) {
+  &.color--#{$color} {
+    @if ($suffix) {
+      .vc-select__option-icon {
+        @apply text-#{$color}-#{$suffix};
+      }
+    } @else {
+      .vc-select__option-icon {
+        @apply text-#{$color};
+      }
+    }
+
+  }
+}
+
+.el-select.vc-select {
+  @apply w-full text-sm;
+
+  .el-input {
+    .el-input__prefix {
+      --el-input-icon-color: var(--active-elements);
+    }
+    .el-input__prefix-inner {
+      & > :last-child {
+        @apply ltr:mr-2 rtl:mr-0 rtl:ml-2;
+      }
+    }
+    .el-select__icon {
+      @apply text-active-elements;
+    }
+    .el-input__wrapper {
+      @apply py-0 px-1 border border-field-borders;
+      box-shadow: none !important;
+      &.is-focus  {
+        @apply border-active-elements--focus;
+        &:hover {
+          box-shadow: 0 0 3px var(--active-elements--focus) !important;
+        }
+      }
+      &:hover {
+        box-shadow: 0 0 3px var(--active-elements--focus) !important;
+      }
+    }
+    &.is-focus {
+      .el-input__wrapper {
+        @apply border-active-elements--focus;
+        box-shadow: none !important;
+      }
+    }
+  }
+  .el-select__tags:hover + .el-input .el-input__wrapper {
+    box-shadow: 0 0 3px var(--active-elements--focus) !important;
+  }
+
+  @include ElSelectColorScheme(primary);
+  @include ElSelectColorScheme(secondary);
+  @include ElSelectColorScheme(destructive);
+  @include ElSelectColorScheme(success);
+  @include ElSelectColorScheme(warning);
+
+  .el-input {
+    &.is-disabled {
+      .el-input__prefix {
+        --el-input-icon-color: var(--inactive-elements);
+      }
+      .el-select__icon {
+        @apply text-inactive-elements;
+      }
+      .el-input__wrapper {
+        &:hover {
+          box-shadow: none !important;
+        }
+      }
+    }
+  }
+}
+.vc-select__dropdown, .vc-select__dropdown.is-multiple {
+  .vc-select__option-content {
+    @apply flex items-center;
+  }
+  .vc-select__option-icon {
+    @apply ltr:mr-2 rtl:ml-2 text-active-elements;
+  }
+  .el-select-dropdown__item {
+    @apply px-2;
+    &:not(:last-child) {
+      @apply border-b border-ui-lines;
+    }
+  }
+  .el-select-dropdown__item.selected, .el-select-dropdown__item.is--selected {
+    @apply font-medium text-active-elements;
+    &:after {
+      @apply bg-active-elements;
+    }
+  }
+
+  @include ElSelectDropdownColorScheme(primary);
+  @include ElSelectDropdownColorScheme(secondary, actions);
+  @include ElSelectDropdownColorScheme(destructive, actions);
+  @include ElSelectDropdownColorScheme(success);
+  @include ElSelectDropdownColorScheme(warning);
+}

package/src/components/VcSelect/VcSelect.vue

@@ -0,0 +1,191 @@
+<template>
+    <el-select
+        :id="id"
+        ref="select"
+        v-model="selectModel"
+        :clearable="clearable"
+        :data-test-name="dataTestName"
+        :disabled="disabled"
+        :filterable="filterable"
+        :filter-method="filterMethod"
+        :loading="loading"
+        :multiple="multiple"
+        :no-data-text="emptyText"
+        :placeholder="placeholder"
+        :remote="!!(remoteMethod)"
+        :remote-method="remoteMethod"
+        :size="size"
+        :teleported="teleported"
+        :name="name"
+        :value-key="optionValueKey"
+        :reserve-keyword="multiple || filterable"
+        :class="inputClasses"
+        :popper-class="popperClass"
+        :clear-icon="clearIcon"
+        collapse-tags
+        collapse-tags-tooltip
+        class="vc-select"
+        v-bind="$attrs"
+        @visible-change="onVisibleChange"
+        @remove-tag="onRemoveTag"
+        @clear="onClear"
+        @blur="onBlur"
+        @focus="onFocus"
+    >
+        <template
+            v-if="prefixIcon || $slots['prefix-icon']"
+            #prefix
+        >
+            <slot name="prefix-icon">
+                <i
+                    :class="prefixClasses"
+                    :style="prefixStyle"
+                    class="vc-select__prefix-icon"
+                />
+            </slot>
+        </template>
+        <el-option
+            v-for="item in selectOptions"
+            :key="item[optionValueKey]"
+            :value="item[optionValueKey]"
+            :label="item[optionLabelKey]"
+            :disabled="typeof config.disabledKey === 'string' && item[config.disabledKey]"
+            :class="{'is--selected': isSelectedClass(item)}"
+            @click="onOptionClick(item)"
+        >
+            <slot
+                name="option"
+                :option="item"
+            >
+                <div
+                    class="vc-select__option-content"
+                >
+                    <i
+                        v-if="item[optionIconKey]"
+                        :class="item[optionIconKey]"
+                        :style="getIconStyle(item)"
+                        class="vc-select__option-icon"
+                    />
+                    {{ item[optionLabelKey] }}
+                </div>
+            </slot>
+        </el-option>
+    </el-select>
+</template>
+
+<script lang="ts">
+import { defineComponent, h, StyleValue } from 'vue'
+import { ElOption, ElSelect } from 'element-plus'
+import baseInputMixin from '@/mixins/input/baseInput.mixin'
+import { SelectComputedOptionType, SelectModelType, SelectProps } from '@/components/VcSelect/VcSelect.options'
+
+const DEFAULT_KEY = 'value'
+const DEFAULT_LABEL = 'label'
+const DEFAULT_ICON = 'icon'
+
+export default defineComponent({
+    name: 'VcSelect',
+    components: { ElSelect, ElOption },
+    mixins: [baseInputMixin],
+    props: { ...SelectProps },
+    emits: [
+        'update:modelValue',
+        'update:visible',
+        'remove-tag',
+        'clear',
+        'blur',
+        'focus',
+        'option:click',
+        'change'
+    ],
+    data () {
+        return {
+            colorClass: 'vc-select--'
+        }
+    },
+    computed: {
+        clearIcon () {
+            return h('i', {
+                class: 'vc-icon-close icon-xs'
+            })
+        },
+        selectModel: {
+            get (): SelectModelType {
+                return this.modelValue
+            },
+            set (val: SelectModelType) {
+                this.$emit('update:modelValue', val)
+                this.onModelChange(val)
+            }
+        },
+        selectOptions (): SelectComputedOptionType[] {
+            return this.options.map((item: SelectModelType) => {
+                if (typeof item !== 'object') {
+                    return {
+                        [this.optionValueKey]: item,
+                        [this.optionLabelKey]: item
+                    }
+                }
+
+                return { ...item }
+            })
+        },
+        optionValueKey (): string {
+            return this.valueKey || this.config.valueKey || DEFAULT_KEY
+        },
+        optionLabelKey (): string {
+            return this.config.labelKey || DEFAULT_LABEL
+        },
+        optionIconKey (): string {
+            return this.config?.iconKey || DEFAULT_ICON
+        },
+        popperClass (): string {
+            return this.color ? ['vc-select__dropdown', `color--${this.color}`].join(' ') : 'vc-select__dropdown'
+        }
+    },
+    methods: {
+        getIconStyle (item: SelectComputedOptionType) {
+            if (typeof this.config.optionIconStyleKey === 'string') {
+                return item[this.config.optionIconStyleKey] as StyleValue
+            }
+        },
+        onModelChange (val: SelectModelType): void {
+            if (this.multiple && Array.isArray(val)) {
+                const options = this.selectOptions.filter(item => val.includes(item[this.optionValueKey]))
+                this.$emit('change', options)
+            } else {
+                const option = this.selectOptions.find(item => item[this.optionValueKey] === val)
+                this.$emit('change', option)
+            }
+        },
+        onVisibleChange (status: boolean): void {
+            this.$emit('update:visible', status)
+        },
+        onRemoveTag (value: SelectModelType): void {
+            this.$emit('remove-tag', value)
+        },
+        onClear (): void {
+            this.$emit('clear')
+        },
+        onBlur (event: Event): void {
+            this.$emit('blur', event)
+        },
+        onFocus (event: Event): void {
+            this.$emit('focus', event)
+        },
+        onOptionClick (option: unknown): void {
+            this.$emit('option:click', option)
+        },
+        isSelectedClass (item: SelectComputedOptionType): boolean {
+            if (this.multiple) {
+                return false
+            }
+            return this.selectModel === item[this.optionValueKey]
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+    @import "VcSelect";
+</style>

package/src/components/VcSkeletonLoader/Loaders/Card.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="vc-loader__card">
+        <div
+            :style="[phRowHeight]"
+            class="ph-row flex justify-between items-center mb-10"
+        >
+            <div class="ph-cell w-5/12" />
+            <div class="ph-cell empty" />
+            <div class="ph-cell mini" />
+            <div class="ph-cell mini" />
+        </div>
+        <div
+            :style="[phRowHeight]"
+            class="ph-row flex justify-between items-center mb-4"
+        >
+            <div class="ph-cell w-8/12" />
+        </div>
+        <div
+            :style="[phRowHeight]"
+            class="ph-row flex justify-between items-center mb-4"
+        >
+            <div class="ph-cell w-10/12" />
+        </div>
+        <div
+            :style="[phRowHeight]"
+            class="ph-row flex justify-between items-center"
+        >
+            <div class="ph-cell w-6/12" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+const DEFAULT_HEIGHT_ROW = '25px'
+
+export default defineComponent({
+    name: 'Card',
+    props: {
+        rowHeight: {
+            type: [Number, String],
+            default: undefined
+        }
+    },
+    computed: {
+        phRowHeight () {
+            const height = this.rowHeight || DEFAULT_HEIGHT_ROW
+            return {
+                height
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+  .vc-loader__card {
+    @apply rounded bg-white p-4 h-full;
+    min-height: 204px;
+
+    .ph-row {
+      .ph-cell {
+        @apply h-full rounded-xs bg-skeleton-loader;
+
+        &:not(:first-child) {
+          @apply ml-4;
+        }
+        &.mini {
+          @apply flex-shrink-0;
+          width: 3.125rem;
+        }
+        &.empty {
+          @apply bg-white flex-grow;
+        }
+      }
+    }
+  }
+</style>

package/src/components/VcSkeletonLoader/Loaders/Circle.vue

@@ -0,0 +1,45 @@
+<template>
+    <div
+        v-for="item in cols"
+        :key="item"
+        :style="phRowHeight"
+        class="ph-circle"
+    />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+const DEFAULT_SIZE = '25px'
+
+export default defineComponent({
+    // eslint-disable-next-line vue/no-reserved-component-names
+    name: 'Circle',
+    props: {
+        rowHeight: {
+            type: [Number, String],
+            default: undefined
+        },
+        cols: {
+            type: Number,
+            default: 1
+        }
+    },
+    computed: {
+        phRowHeight () {
+            const height = this.rowHeight || DEFAULT_SIZE
+            const width = this.rowHeight || DEFAULT_SIZE
+            return {
+                height,
+                width
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.ph-circle {
+  @apply rounded-full bg-skeleton-loader;
+}
+</style>

package/src/components/VcSkeletonLoader/Loaders/Row.vue

@@ -0,0 +1,36 @@
+<template>
+    <div
+        :style="[phRowHeight]"
+        class="ph-row w-full"
+    />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+const DEFAULT_HEIGHT_ROW = '100%'
+
+export default defineComponent({
+    name: 'Row',
+    props: {
+        rowHeight: {
+            type: [Number, String],
+            default: undefined
+        }
+    },
+    computed: {
+        phRowHeight () {
+            const height = this.rowHeight || DEFAULT_HEIGHT_ROW
+            return {
+                height
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.ph-row {
+  @apply rounded-xs bg-skeleton-loader;
+}
+</style>

package/src/components/VcSkeletonLoader/Loaders/Square.vue

@@ -0,0 +1,44 @@
+<template>
+    <div
+        v-for="item in cols"
+        :key="item"
+        :style="phRowHeight"
+        class="ph-block"
+    />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+const DEFAULT_SIZE = '25px'
+
+export default defineComponent({
+    name: 'Square',
+    props: {
+        rowHeight: {
+            type: [Number, String],
+            default: undefined
+        },
+        cols: {
+            type: Number,
+            default: 1
+        }
+    },
+    computed: {
+        phRowHeight () {
+            const height = this.rowHeight || DEFAULT_SIZE
+            const width = this.rowHeight || DEFAULT_SIZE
+            return {
+                height,
+                width
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+  .ph-block {
+    @apply bg-skeleton-loader rounded-xs;
+  }
+</style>