@formixru/b2b-ui 3.0.2 → 3.0.4

package/src/components/file-input/index.vue

@@ -0,0 +1,333 @@
+<template>
+    <div ref="$root" class="file-input" :class="{ 'file-input_dragover': isDragOver }">
+        <input type="hidden" :name="name" :value="filesList" />
+        <input
+            :id="id"
+            ref="$input"
+            class="sr-only"
+            type="file"
+            :multiple="maxCount > 1"
+            :accept="accept"
+            @change="handleFiles($event.target.files)"
+        />
+        <button class="button button_alt" type="button" :disabled="disabled || maxCount < 1" @click="selectFiles()">
+            <slot v-if="$slots.label" name="label"></slot>
+            <template v-else-if="maxCount > 1">Выберите файлы</template>
+            <template v-else>Выберите файл</template>
+        </button>
+        <div v-if="descr" class="file-input__descr" v-html="descr"></div>
+        <div class="file-input__file-list">
+            <div
+                v-for="(file, index) in files"
+                :key="index"
+                class="file-input__file"
+                :class="{ 'file-input__file_active': file.uploaded && !file.error }"
+            >
+                <div class="file-input__file-wrapper">
+                    <div class="file-input__file-name">{{ file.name }}</div>
+                    <div v-if="file.error" class="file-input__file-error">{{ file.error }}</div>
+                </div>
+                <button
+                    v-if="file.uploaded || file.error"
+                    class="file-input__remove"
+                    type="button"
+                    @click="removeFile(index)"
+                >
+                    <svg class="file-input__icon"><use :href="`${ICONS_PATH}#close`" /></svg>
+                </button>
+                <div v-else class="file-input__loader">
+                    <div class="spinner"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+/* globals BX */
+
+import { pluralize } from '@advdominion/pluralize';
+import mime from 'mime';
+import { computed, nextTick, onMounted, ref, toRefs } from 'vue';
+
+const ICONS_PATH = window.ICONS_PATH;
+
+const emit = defineEmits(['upload']);
+
+const props = defineProps({
+    actionUpload: {
+        type: String,
+        required: true,
+    },
+    actionRemove: {
+        type: String,
+        required: true,
+    },
+    id: {
+        type: String,
+        default: '',
+    },
+    name: {
+        type: String,
+        default: '',
+    },
+    value: {
+        type: String,
+        default: '',
+    },
+    disabled: {
+        type: Boolean,
+    },
+    accept: {
+        type: String,
+        default: '',
+    },
+    maxCount: {
+        type: Number,
+        default: 1,
+    },
+    maxSize: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const { actionUpload, actionRemove, id, name, value, disabled, accept, maxCount, maxSize } = toRefs(props);
+const files = ref([]);
+const isDragOver = ref(false);
+const maxSizeInBytes = computed(() => maxSize.value * 1024 * 1024);
+const filesList = computed(() => {
+    return files.value
+        .filter(({ uploaded, error }) => uploaded && !error)
+        .map(({ name }) => name)
+        .join(',');
+});
+const acceptTypes = computed(() => {
+    if (accept.value) {
+        return accept.value
+            .split(',')
+            .map((ext) => mime.getType(ext.trim()))
+            .filter(Boolean) // Убираем MIME-типы, которые не были определены
+            .filter((value, index, array) => array.indexOf(value) === index); // Убираем одинаковые MIME-типы (например, если указны .jpg и .jpeg)
+    }
+    return [];
+});
+const descr = computed(() => {
+    const descr = [];
+    if (maxCount.value > 1) {
+        descr.push(`До&nbsp;${maxCount.value} ${pluralize(maxCount.value, ['файла', 'файлов', 'файлов'])}`);
+    }
+    if (maxSize.value) {
+        const formattedMaxSize = new Intl.NumberFormat().format(maxSize.value);
+        if (descr.length === 0) {
+            descr.push(`Размер файла&nbsp;— до&nbsp;${formattedMaxSize}&nbsp;МБ`);
+        } else {
+            descr.push(`Размер каждого&nbsp;— до&nbsp;${formattedMaxSize}&nbsp;МБ`);
+        }
+    }
+    if (acceptTypes.value.length > 0) {
+        const ext = acceptTypes.value.map((type) => mime.getExtension(type).toUpperCase());
+        if (descr.length === 0) {
+            descr.push(ext.join(', '));
+        } else {
+            descr.push(`Тип ${maxCount.value === 1 ? 'файла' : 'файлов'}&nbsp;— ${ext.join(', ')}`);
+            if (descr.length === 3) {
+                descr[2] = `<br>${descr[2]}`;
+            }
+        }
+    }
+    return descr.join('. ');
+});
+const $root = ref();
+const $input = ref();
+
+if (value.value) {
+    for (const name of value.value.split(',')) {
+        if (files.value.length < maxCount.value) {
+            files.value.push({
+                name: name.trim(),
+                uploaded: true,
+                error: false,
+            });
+        }
+    }
+}
+
+const selectFiles = () => {
+    $input.value.click();
+};
+
+const addFiles = (fileList) => {
+    for (const file of fileList) {
+        if (files.value.length < maxCount.value && !files.value.some(({ name }) => name === file.name)) {
+            let error = '';
+            if (acceptTypes.value.length > 0 && !acceptTypes.value.includes(file.type)) {
+                error = 'Этот тип файлов не поддерживается';
+            } else if (maxSizeInBytes.value && file.size > maxSizeInBytes.value) {
+                error = `Максимальный размер файла — ${maxSize.value} МБ`;
+            }
+            files.value.push({
+                data: file,
+                name: file.name,
+                uploaded: false,
+                error,
+            });
+        }
+    }
+};
+
+const uploadFile = async (file) => {
+    const index = files.value.findIndex(({ name }) => name === file.name);
+    const formData = new FormData();
+    formData.append('name', file.name);
+    formData.append('file', file);
+    try {
+        const response = await fetch(actionUpload.value, {
+            method: 'POST',
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-Session-Id': BX.message('bitrix_sessid'),
+            },
+            body: formData,
+        });
+        if (!response.ok) {
+            throw response;
+        }
+        files.value[index].uploaded = true;
+        await nextTick();
+        emit('upload');
+    } catch (error) {
+        if (error.status === 401) {
+            location.reload();
+        } else {
+            console.error(error);
+            files.value[index].error = `Ошибка загрузки файла (код ${error.status})`;
+        }
+    }
+};
+
+const removeFile = async (index) => {
+    const file = files.value[index];
+    file.uploaded = false;
+    const formData = new FormData();
+    formData.append('name', file.name);
+    try {
+        const response = await fetch(actionRemove.value, {
+            method: 'POST',
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-Session-Id': BX.message('bitrix_sessid'),
+            },
+            body: formData,
+        });
+        if (!response.ok) {
+            throw response;
+        }
+        files.value.splice(index, 1);
+    } catch (error) {
+        if (error.status === 401) {
+            location.reload();
+        } else {
+            console.error(error);
+            file.uploaded = true;
+            file.error = `Ошибка удаления файла (код ${error.status})`;
+        }
+    }
+};
+
+const clearFiles = (files) => {
+    return Promise.all(
+        files.map(async ({ name }) => {
+            const formData = new FormData();
+            formData.append('name', name);
+            try {
+                const response = await fetch(actionRemove.value, {
+                    method: 'POST',
+                    headers: {
+                        'X-Requested-With': 'XMLHttpRequest',
+                        'X-Session-Id': BX.message('bitrix_sessid'),
+                    },
+                    body: formData,
+                });
+                if (!response.ok) {
+                    throw response;
+                }
+            } catch (error) {
+                if (error.status === 401) {
+                    location.reload();
+                }
+                throw error;
+            }
+        }),
+    );
+};
+
+const handleFiles = async (fileList) => {
+    // Если уже было выбрано максимальное кол-во файлов, при выборе новых - удаляем выбранные ранее
+    if (files.value.length === maxCount.value) {
+        const filesToRemove = [...files.value];
+        files.value = [];
+        addFiles(fileList);
+        try {
+            await clearFiles(filesToRemove);
+            for (const file of files.value) {
+                if (!file.error) {
+                    uploadFile(file.data);
+                }
+            }
+        } catch (error) {
+            console.error(error);
+            for (const [index] of files.value.entries()) {
+                files.value[index].error = `Ошибка добавления файла (код ${error.status})`;
+            }
+        }
+    } else {
+        addFiles(fileList);
+        for (const file of files.value) {
+            if (!file.uploaded && !file.error) {
+                uploadFile(file.data);
+            }
+        }
+    }
+    $input.value.value = '';
+};
+
+onMounted(() => {
+    $root.value.addEventListener('dragenter', (e) => {
+        if ($root.value.contains(e.target) && !e.relatedTarget.closest('.file-input')) {
+            isDragOver.value = true;
+        }
+    });
+    $root.value.addEventListener('dragleave', (e) => {
+        if (e.target === $root.value && !e.relatedTarget.closest('.file-input')) {
+            isDragOver.value = false;
+        }
+    });
+    $root.value.addEventListener('dragover', (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+    $root.value.addEventListener('drop', (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        isDragOver.value = false;
+        handleFiles(e.dataTransfer.files);
+    });
+
+    // Удаляем выбранные файлы, если человек закроет диалоговое окно
+    const $dialog = $root.value.closest('.dialog');
+    if ($dialog) {
+        $dialog.addEventListener(
+            'dialog-hide',
+            () => {
+                if (files.value.length > 0) {
+                    clearFiles(files.value);
+                }
+            },
+            {
+                once: true,
+            },
+        );
+    }
+});
+</script>

package/src/components/font-input/index.vue

@@ -0,0 +1,174 @@
+<template>
+    <div ref="$root" class="font-input">
+        <div
+            v-for="(font, index) in parsedFont"
+            v-show="visibleFontIndex === index"
+            :key="index"
+            class="font-input__list"
+        >
+            <label class="font-input__item">
+                <span class="font-input__label">Стиль</span>
+                <select v-model="font['font-style']" class="font-input__select select" @change="setFont()">
+                    <option value=""></option>
+                    <option value="normal">обычное</option>
+                    <option value="italic">курсив</option>
+                </select>
+            </label>
+            <label class="font-input__item">
+                <span class="font-input__label">Начертание</span>
+                <select v-model="font['font-weight']" class="font-input__select select" @change="setFont()">
+                    <option value=""></option>
+                    <option value="normal">обычное</option>
+                    <option value="bold">жирное</option>
+                </select>
+            </label>
+            <label class="font-input__item">
+                <span class="font-input__label">Размер</span>
+                <select v-model="font['font-size']" class="font-input__select select" @change="setFont()">
+                    <option value=""></option>
+                    <option v-for="(fontSizeValue, key) in fontSizeMap" :key="key" :value="fontSizeValue">
+                        {{ fontSizeValue.replace('px', '') }}
+                    </option>
+                </select>
+            </label>
+            <label class="font-input__item">
+                <span class="font-input__label">Интерлиньяж</span>
+                <select v-model="font['line-height']" class="font-input__select select" @change="setFont()">
+                    <option value=""></option>
+                    <option v-for="(lineHeightValue, key) in lineHeightMap" :key="key" :value="lineHeightValue">
+                        {{ lineHeightValue }}
+                    </option>
+                </select>
+            </label>
+        </div>
+        <input ref="$input" type="hidden" :name="name" :value="currentFont" />
+    </div>
+</template>
+
+<script setup>
+import { nextTick, onMounted, ref, toRefs, watch } from 'vue';
+
+import { mm } from '../../utils/mm.js';
+
+const emit = defineEmits(['input']);
+
+const props = defineProps({
+    name: {
+        type: String,
+        required: true,
+    },
+    value: {
+        type: String,
+        required: true,
+    },
+});
+
+const { name, value } = toRefs(props);
+const currentFont = ref(value.value);
+const parsedFont = ref([
+    {
+        'font-style': '',
+        'font-weight': '',
+        'font-size': '',
+        'line-height': '',
+    },
+    {
+        'font-style': '',
+        'font-weight': '',
+        'font-size': '',
+        'line-height': '',
+    },
+]);
+const visibleFontIndex = ref(0);
+const $root = ref();
+const $input = ref();
+
+const fontSizeMap = {
+    '$font-size-3xs': '8px',
+    '$font-size-2xs': '10px',
+    '$font-size-xs': '12px',
+    '$font-size-s': '14px',
+    '$font-size': '16px',
+    '$font-size-l': '20px',
+    '$font-size-xl': '24px',
+    '$font-size-2xl': '28px',
+};
+
+const lineHeightMap = {
+    '$line-height-s': 1.2,
+    '$line-height': 1.4,
+    '$line-height-l': 1.6,
+};
+
+const parseFont = () => {
+    for (const [index, font] of currentFont.value.split(/, ?(?=\()/).entries()) {
+        const parsed = font.match(/'([\dA-Za-z-]+)': (\$?[\dA-Za-z-]+)/g) || [];
+        for (let item of parsed) {
+            item = item.replaceAll(/'| /g, '').split(':');
+            let value = item[1];
+
+            // Преобразуем переменные в значения
+            if (item[0] === 'font-size' && fontSizeMap[value]) {
+                value = fontSizeMap[value];
+            } else if (item[0] === 'line-height' && lineHeightMap[value]) {
+                value = lineHeightMap[value];
+            }
+
+            parsedFont.value[index][item[0]] = value;
+        }
+    }
+};
+
+const setFont = async () => {
+    currentFont.value = parsedFont.value
+        .map((font) => {
+            const fontValue = Object.entries(font)
+                .map(([name, value]) => {
+                    if (String(value).length > 0) {
+                        return `'${name}': ${value}`;
+                    }
+                    return false;
+                })
+                .filter(Boolean);
+            return `(${fontValue.join(', ')})`;
+        })
+        .join(',');
+    await nextTick();
+    $input.value.dispatchEvent(new Event('change', { bubbles: true }));
+    emit('input', currentFont.value);
+};
+
+watch(value, (newValue) => {
+    currentFont.value = newValue;
+});
+
+watch(currentFont, () => {
+    parseFont();
+});
+
+parseFont();
+
+onMounted(() => {
+    if (name.value.split(',').length > 1) {
+        const $label = $root.value.closest('.form__item').querySelector('.form__label');
+        $label.innerHTML = `${$label.innerHTML}&nbsp;<button class="link link_grey link_dotted" type="button" disabled style="font-weight: bold;">основной</button>&nbsp;/&nbsp;<button class="link link_grey link_dotted" type="button">для больших экранов</button>`;
+        $label.style.flexWrap = mm('phone-only') ? 'wrap' : '';
+        const $buttons = $label.querySelectorAll('button');
+        for (const $button of $buttons) {
+            $button.addEventListener('click', (e) => {
+                const index = [...e.currentTarget.parentNode.children].indexOf(e.currentTarget);
+                for (const [i, $button] of $buttons.entries()) {
+                    if (i === index) {
+                        visibleFontIndex.value = index;
+                        $button.disabled = true;
+                        $button.style.fontWeight = 'bold';
+                    } else {
+                        $button.disabled = false;
+                        $button.style.fontWeight = '';
+                    }
+                }
+            });
+        }
+    }
+});
+</script>

package/src/components/quantity-input/index.vue

@@ -0,0 +1,143 @@
+<template>
+    <div
+        class="quantity-input"
+        :class="{ 'quantity-input_medium': size === 'medium', 'quantity-input_big': size === 'big' }"
+    >
+        <button
+            class="quantity-input__button quantity-input__button_minus"
+            type="button"
+            :disabled="(disabled && !focus) || quantity <= min"
+            @click="input(Number((quantity - step).toFixed(digits)))"
+        >
+            <svg class="quantity-input__icon"><use :href="`${ICONS_PATH}#minus`" /></svg>
+        </button>
+        <input
+            class="quantity-input__input"
+            type="number"
+            :name="name"
+            :value="quantity"
+            :disabled="(disabled && !focus) || auth.length > 0"
+            @input="input($event.target.value)"
+        />
+        <button
+            class="quantity-input__button quantity-input__button_plus"
+            type="button"
+            :disabled="(disabled && !focus) || quantity >= max"
+            @click="input(Number((quantity + step).toFixed(digits)))"
+        >
+            <svg class="quantity-input__icon"><use :href="`${ICONS_PATH}#plus`" /></svg>
+        </button>
+    </div>
+</template>
+
+<script setup>
+import { computed, ref, toRefs, watch } from 'vue';
+
+import { show as showDialog } from '../dialog/index.js';
+
+const ICONS_PATH = window.ICONS_PATH;
+
+const emit = defineEmits(['input', 'disableOthers', 'enableOthers']);
+
+const props = defineProps({
+    value: {
+        type: Number,
+        required: true,
+    },
+    disabled: {
+        type: Boolean,
+    },
+    concurrent: {
+        type: Boolean,
+    },
+    max: {
+        type: Number,
+        default: 0,
+    },
+    min: {
+        type: Number,
+        default: 0,
+    },
+    step: {
+        type: Number,
+        default: 1,
+    },
+    name: {
+        type: String,
+        default: '',
+    },
+    size: {
+        type: String,
+        default: '',
+    },
+    auth: {
+        type: String,
+        default: '',
+    },
+    throttle: {
+        type: Number,
+        default: 1000,
+    },
+});
+
+const { value, disabled, concurrent, max, min, step, name, size, auth, throttle } = toRefs(props);
+const quantity = ref(value.value);
+const focus = ref(false);
+
+const digits = computed(() => {
+    const arr = String(step.value).split('.');
+    if (arr.length === 1) {
+        return 0;
+    }
+    return arr.at(-1).length;
+});
+
+watch(value, (newValue) => {
+    quantity.value = newValue;
+});
+
+let throttleTimeout;
+const input = (inputValue) => {
+    if (auth.value) {
+        showDialog(document.querySelector(auth.value));
+    } else {
+        let newValue;
+
+        if (inputValue === '') {
+            quantity.value = inputValue;
+            newValue = min.value;
+        } else {
+            quantity.value = Number(inputValue);
+            if (quantity.value < min.value) {
+                newValue = min.value;
+                quantity.value = min.value;
+            } else if (quantity.value > max.value) {
+                newValue = max.value;
+                quantity.value = max.value;
+            } else {
+                newValue = quantity.value;
+            }
+        }
+        if (!concurrent.value) {
+            focus.value = true;
+            emit('disableOthers');
+        }
+        clearTimeout(throttleTimeout);
+        throttleTimeout = setTimeout(() => {
+            emit('input', newValue);
+        }, throttle.value);
+    }
+};
+
+const update = () => {
+    quantity.value = value.value;
+    if (!concurrent.value) {
+        focus.value = false;
+        emit('enableOthers');
+    }
+};
+
+defineExpose({
+    update,
+});
+</script>