@voicenter-team/voicenter-ui-plus 0.0.1

package/src/components/VcFileUploader/VcFileUploader.vue

@@ -0,0 +1,324 @@
+<template>
+    <div :style="setMaxWidth">
+        <VcInputLabel
+            :label="label"
+            :required="required"
+            :icon="icon"
+            :info-text="infoText"
+            :info-tooltip-width="infoTooltipWidth"
+            class="mb-2"
+        />
+        <div class="vc-input___file-uploader-wrapper">
+            <div class="vc-input__file-uploader-wrapper-label">
+                <VcButton
+                    :type="buttonType"
+                    :color="buttonColor"
+                    :icon="buttonIcon"
+                    :size="buttonSize"
+                    @click="triggerInputClick"
+                >
+                    {{ uploadButtonText }}
+                </VcButton>
+            </div>
+
+            <input
+                :id="id"
+                ref="inputUploader"
+                hidden
+                :name="id"
+                :accept="accept"
+                :multiple="multiple"
+                :data-test="dataTestName"
+                :disabled="disabled"
+                :maxlength="maxLength"
+                class="vc-input__file-uploader-wrapper-input"
+                type="file"
+                @change="onFileChange"
+            >
+        </div>
+        <div
+            v-if="!items.length"
+            class="vc-input__message-wrapper"
+        >
+            <span class="vc-input__message-wrapper--text">
+                {{ noFilesSelectedText }}
+            </span>
+        </div>
+        <div
+            v-if="errorText"
+            class="vc-input__error-wrapper"
+        >
+            <span class="vc-input__error-wrapper--text">
+                {{ errorText }}
+            </span>
+        </div>
+        <div
+            v-if="showFileName && items.length"
+            class="mt-1"
+        >
+            <VcDelimitedList
+                :list="items"
+                :limit="maxLength"
+                trigger="hover"
+                popover-max-width="400"
+                separator=""
+            >
+                <template #list-item="{item}">
+                    <VcTag
+                        :label="item.name"
+                        :max-content="tagMaxContentWidth"
+                        :icon="tagIcon"
+                        closable
+                        @on-close="onTagClose(item.id)"
+                    />
+                </template>
+                <template #reference="{listLength}">
+                    <VcTag
+                        :label="`+ ${listLength}`"
+                    />
+                </template>
+                <template #other-content="{list}">
+                    <div
+                        v-for="(item, index) in list"
+                        :key="index"
+                        class="flex items-center justify-start p-2"
+                    >
+                        <VcTag
+                            :label="item.name"
+                            :icon="tagIcon"
+                            :max-content="tagMaxContentWidth"
+                            closable
+                            @on-close="onTagClose(item.id)"
+                        />
+                    </div>
+                </template>
+            </VcDelimitedList>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { ButtonType, ButtonColor, ButtonSize } from '@/components/VcButton/VcButton.types'
+import { VcDelimitedList, VcButton } from '@/components'
+import VcTag from '@/components/VcTag/VcTag.vue'
+import { FileUploaded } from './VcFileUploader.types'
+import { getFileSize } from '@/utils/helpers'
+import inputMixin from '@/mixins/input/input.mixin'
+import errorMixin from '@/mixins/input/error.mixin'
+import VcInputLabel from '@/components/VcForm/UiComponents/VcInputLabel.vue'
+import labelMixin from '@/mixins/input/label.mixin'
+
+const DEFAULT_BUTTON_SIZE = 'middle'
+const DEFAULT_BUTTON_TYPE = 'default'
+const DEFAULT_BUTTON_COLOR = 'primary'
+
+export default defineComponent({
+    name: 'VcFileUploader',
+    components: {
+        VcTag,
+        VcInputLabel,
+        VcDelimitedList,
+        VcButton
+    },
+    mixins: [inputMixin, errorMixin, labelMixin],
+    props: {
+        files: {
+            type: Array,
+            default: () => []
+        },
+        modelValue: {
+            type: Array,
+            default: () => []
+        },
+        maxLength: {
+            type: Number,
+            default: Infinity
+        },
+        accept: {
+            type: String,
+            default: '*'
+        },
+        tagIcon: {
+            type: String,
+            default: 'vc-icon-confirm-action'
+        },
+        showFileName: {
+            type: Boolean,
+            default: true
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        noDataText: {
+            type: String,
+            default: ''
+        },
+        fileSizeLimit: {
+            type: Number,
+            default: null,
+            description: 'File size limit in bytes'
+        },
+        fileListSizeLimit: {
+            type: Number,
+            default: null,
+            description: 'Files list size limit in bytes'
+        },
+        buttonType: {
+            type: String as PropType<ButtonType>,
+            default: DEFAULT_BUTTON_TYPE
+        },
+        buttonIcon: {
+            type: String,
+            default: ''
+        },
+        buttonColor: {
+            type: String as PropType<ButtonColor>,
+            default: DEFAULT_BUTTON_COLOR
+        },
+        buttonSize: {
+            type: String as PropType<ButtonSize>,
+            default: DEFAULT_BUTTON_SIZE
+        },
+        buttonText: {
+            type: String,
+            default: ''
+        },
+        tagMaxContentWidth: {
+            type: String,
+            default: '200'
+        }
+    },
+    emits: ['update:modelValue', 'input'],
+    data () {
+        return {
+            items: [] as FileUploaded[],
+            innerErrorText: '' as string
+        }
+    },
+    computed: {
+        errorText () {
+            if (this.innerErrorText) {
+                return this.innerErrorText
+            }
+            return this.error
+        },
+        noFilesSelectedText () {
+            return this.noDataText ? this.noDataText : this.$tVU.t('uploader.no.files.selected')
+        },
+        uploadButtonText () {
+            return this.buttonText ? this.buttonText : this.$tVU.t('uploader.upload.file')
+        }
+    },
+    watch: {
+        modelValue (val: FileUploaded[] | FileList) {
+            this.parseFiles(val)
+        },
+        files: {
+            immediate: true,
+            handler (files: FileUploaded[] | FileList): void {
+                this.parseFiles(files)
+            }
+        }
+    },
+    methods: {
+        parseFiles (files: FileUploaded[] | FileList): void {
+            files = Array.from(files)
+
+            if (files.length && files.length > this.maxLength) {
+                files = files.slice(0, this.maxLength)
+            }
+
+            this.items = files.map((item: FileUploaded, index: number) => {
+                item.id = index
+                return item
+            })
+        },
+        onFileChange (e: Event): void {
+            this.innerErrorText = ''
+            const target = e.target as HTMLInputElement
+            const targetFiles = target?.files as FileList
+
+            if (target && targetFiles && targetFiles.length) {
+                let files = Array.from(targetFiles)
+
+                files = this.processFilesLength(files)
+                files = this.processFileSize(files)
+
+                if (this.$refs.inputUploader) {
+                    const inputElement = this.$refs.inputUploader as HTMLInputElement
+                    inputElement.value = ''
+                }
+
+                this.$emit('input', files)
+                this.$emit('update:modelValue', files)
+            }
+        },
+        processFilesLength (files: FileUploaded[]): FileUploaded[] {
+            if (this.multiple && files.length > this.maxLength) {
+                this.innerErrorText = this.$tVU.t('uploader.some.file.were.concat.files.limit')
+                return files.slice(0, this.maxLength)
+            }
+            return files
+        },
+        processFileSize (files: FileUploaded[]): FileUploaded[] {
+            if (this.multiple) {
+                const filesSizeSum = files.map((file: FileUploaded): number => file.size)
+                    .reduce((sizeSum: number, a: number): number => sizeSum + a, 0)
+
+                if (this.fileListSizeLimit && filesSizeSum > this.fileListSizeLimit) {
+                    const sizeToExceed = getFileSize(this.fileListSizeLimit)
+                    this.innerErrorText = this.$tVU.t('uploader.file.size.sum.should.not.exceed', { value: sizeToExceed[0], measure: sizeToExceed[1] })
+                    return []
+                }
+
+                if (this.fileSizeLimit) {
+                    files = files.filter((file: FileUploaded): boolean => {
+                        if (file.size > this.fileSizeLimit) {
+                            this.innerErrorText = this.$tVU.t('uploader.some.files.were.concat.size.limit')
+                            return false
+                        }
+                        return true
+                    })
+                }
+
+                return files
+            } else {
+                if (!this.fileSizeLimit) return files
+
+                const limitSize = getFileSize(this.fileSizeLimit)
+                const file = files[0]
+                if (file && file.size > this.fileSizeLimit) {
+                    const fileSize = getFileSize(file.size)
+                    this.innerErrorText = this.$tVU.t('uploader.file.size.is.but.limit.is', { fileSize: fileSize[0], fileMeasure: fileSize[1], limitSize: limitSize[0], limitMeasure: limitSize[1] })
+                    return []
+                }
+                return files
+            }
+        },
+        onTagClose (index: number): void {
+            this.innerErrorText = ''
+            const files = this.items.filter((item: FileUploaded) => item.id !== index)
+
+            this.$emit('input', files)
+            this.$emit('update:modelValue', files)
+        },
+        triggerInputClick (): void {
+            if (this.$refs.inputUploader && this.$refs.inputUploader instanceof HTMLElement) {
+                this.$refs.inputUploader.click()
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+@import 'src/assets/sass/main/mixins';
+
+.vc-input {
+    @include input;
+    @include fileUploader;
+    @include errorContainer;
+}
+</style>

package/src/components/VcForm/Styles/VcInputLabel.scss

@@ -0,0 +1,24 @@
+.vc-input__label {
+  @apply flex w-full leading-none items-center;
+  &-wrapper {
+    @apply flex text-sm text-default-text font-normal flex-grow;
+    &--left-item {
+      @apply inline-flex;
+      &-icon {
+        @apply mr-2 leading-none rtl:mr-0 rtl:ml-2 text-icons;
+      }
+    }
+    &-label {
+      @apply text-sm text-default-text font-normal;
+      &__required-icon {
+        @apply text-primary-actions;
+      }
+    }
+  }
+  &-info {
+    @apply text-active-elements cursor-pointer;
+  }
+  &-actions {
+    @apply ltr:ml-2 rtl:mr-2;
+  }
+}

package/src/components/VcForm/UiComponents/VcInputError.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="vc-input__error-wrapper">
+        <span class="vc-input__error-wrapper--text">
+            {{ errorMessage }}
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'VcInputError',
+    props: {
+        errorMessage: {
+            type: String,
+            default: ''
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+    .vc-input__error-wrapper {
+        @apply relative w-full text-xs leading-normal;
+        &--text {
+            @apply inline-flex flex-wrap text-destructive-actions text-xs
+                left-0 top-0 w-full overflow-hidden overflow-ellipsis whitespace-normal;
+        }
+    }
+</style>

package/src/components/VcForm/UiComponents/VcInputLabel.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="vc-input__label">
+        <div class="vc-input__label-wrapper flex items-center">
+            <span
+                v-if="icon"
+                class="vc-input__label-wrapper--left-item"
+            >
+                <i
+                    :class="icon"
+                    class="icon-lg vc-input__label-wrapper--left-item-icon"
+                />
+            </span>
+            <span
+                v-if="label"
+                class="vc-input__label-wrapper-label"
+            >
+                {{ label }}
+                <span
+                    v-if="required"
+                    class="vc-input__label-wrapper-label__required-icon"
+                >
+                    *
+                </span>
+            </span>
+            <VcPopover
+                v-if="infoText || $slots['info-text']"
+                trigger="hover"
+                :popover-width="infoTooltipWidth"
+                placement="top"
+            >
+                <template #reference>
+                    <span class="vc-input__label-info px-1 flex items-center">
+                        <i class="vc-icon-info icon-base" />
+                    </span>
+                </template>
+                <div
+                    class="label-info-text p-2 text-xs"
+                >
+                    <slot name="info-text">
+                        {{ infoText }}
+                    </slot>
+                </div>
+            </VcPopover>
+        </div>
+        <span
+            v-if="$slots['label-action']"
+            class="vc-input__label-actions"
+        >
+            <slot name="label-action" />
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+import labelMixin from '@/mixins/input/label.mixin'
+import VcPopover from '@/components/VcPopover/VcPopover.vue'
+
+export default {
+    name: 'VcInputLabel',
+    components: { VcPopover },
+    mixins: [labelMixin]
+}
+</script>
+
+<style lang="scss">
+    @import "../Styles/VcInputLabel";
+</style>

package/src/components/VcForm/VcForm.vue

@@ -0,0 +1,88 @@
+<template>
+    <el-form
+        ref="elForm"
+        :label-position="labelPosition"
+        :style="{ maxWidth: formMaxWidth }"
+        require-asterisk-position="right"
+        class="vc-form"
+        v-bind="$attrs"
+    >
+        <slot />
+    </el-form>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { convertToUnit } from '@/utils/helpers'
+import { ElForm } from 'element-plus'
+
+type LabelPositionType = 'left' | 'right' | 'top'
+
+export default defineComponent({
+    name: 'VcForm',
+    components: { ElForm },
+    props: {
+        labelPosition: {
+            type: String as PropType<LabelPositionType>,
+            default: 'top'
+        },
+        maxWidth: {
+            type: [String, Number],
+            default: '100%'
+        }
+    },
+    computed: {
+        formMaxWidth () {
+            return convertToUnit(this.maxWidth)
+        },
+        formElement () {
+            return this.$refs.elForm as typeof ElForm | undefined
+        }
+    },
+    methods: {
+        validate () {
+            return new Promise(resolve => {
+                if (!this.formElement) {
+                    resolve({
+                        isValid: true,
+                        invalidFields: []
+                    })
+                } else {
+                    this.formElement.validate((isValid: boolean, invalidFields?: unknown) => {
+                        resolve({
+                            isValid,
+                            invalidFields
+                        })
+                    })
+                }
+            })
+        },
+        validateField (field: string | string[]) {
+            return new Promise(resolve => {
+                if (!this.formElement) {
+                    resolve({
+                        isValid: true,
+                        invalidFields: []
+                    })
+                } else {
+                    this.formElement.validateField(field, (isValid: boolean, invalidFields?: unknown) => {
+                        resolve({
+                            isValid,
+                            invalidFields
+                        })
+                    })
+                }
+            })
+        },
+        resetFields (fields?: string | string[]) {
+            this.formElement?.resetFields(fields)
+        },
+        scrollToField (prop?: string) {
+            this.formElement?.scrollToField(prop)
+        },
+        clearValidate (props?: string | string[]) {
+            this.formElement?.clearValidate(props)
+        }
+    }
+})
+</script>

package/src/components/VcForm/VcFormItem.vue

@@ -0,0 +1,115 @@
+<template>
+    <el-form-item
+        v-if="parentFormContext"
+        class="vc-form-item"
+        :rules="rules"
+        v-bind="$attrs"
+    >
+        <template #label>
+            <VcInputLabel
+                :label="label"
+                :icon="icon"
+                :required="isRequired"
+                :info-text="infoText"
+                :info-tooltip-width="infoTooltipWidth"
+                :class="{'mb-2': !parentFormContext}"
+            >
+                <template
+                    v-if="$slots['label-action']"
+                    #label-action
+                >
+                    <slot name="label-action" />
+                </template>
+            </VcInputLabel>
+        </template>
+        <slot />
+    </el-form-item>
+    <template v-else>
+        <VcInputLabel
+            :label="label"
+            :icon="icon"
+            :required="isRequired"
+            :info-text="infoText"
+            :info-tooltip-width="infoTooltipWidth"
+            class="mb-2"
+        >
+            <template
+                v-if="$slots['label-action']"
+                #label-action
+            >
+                <slot name="label-action" />
+            </template>
+        </VcInputLabel>
+        <slot />
+    </template>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { ElFormItem, formContextKey } from 'element-plus'
+import labelMixin from '@/mixins/input/label.mixin'
+import VcInputLabel from '@/components/VcForm/UiComponents/VcInputLabel.vue'
+import { FormItemRule } from 'element-plus/es/tokens/form'
+
+export default defineComponent({
+    name: 'VcFormItem',
+    components: {
+        ElFormItem,
+        VcInputLabel
+    },
+    mixins: [labelMixin],
+    inject: {
+        formContext: {
+            from: formContextKey as symbol,
+            default: () => undefined
+        }
+    },
+    props: {
+        rules: {
+            type: Array as PropType<FormItemRule[]>,
+            default: () => []
+        }
+    },
+    computed: {
+        isRequired (): boolean {
+            return !!(this.required || this.rules.some((rule: FormItemRule) => rule?.required === true))
+        },
+        parentFormContext () {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return (this as any).formContext || null
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+    .vc-form-item.el-form-item {
+        .el-form-item__label {
+            @apply items-center p-0;
+            &:after, &:before {
+                display: none !important;
+            }
+        }
+        &.is-error {
+            .el-input {
+                .el-input__wrapper {
+                    @apply shadow-none border-error;
+                }
+                &:not(.is-disabled) {
+                    .el-input__wrapper {
+                        &:hover {
+                            @apply shadow-hover-outer-active;
+                        }
+                    }
+                }
+            }
+            .el-select.vc-select {
+                .el-input {
+                    .el-input__wrapper, .el-input__wrapper.is-focus {
+                        @apply border-error;
+                    }
+                }
+            }
+        }
+    }
+</style>