@formixru/b2b-ui 1.0.0

package/src/components/delete-all/index.scss

@@ -0,0 +1,44 @@
+@use '../../variables' as *;
+
+$b: '.delete-all';
+
+#{$b} {
+    align-items: center;
+    color: $delete-all-color;
+    cursor: pointer;
+    display: inline-flex;
+    text-decoration: none;
+    transition-duration: var(--duration-micro-s);
+    transition-property: color;
+    transition-timing-function: var(--easing-standard);
+
+    &:hover,
+    &:focus-visible {
+        color: $delete-all-active-color;
+    }
+
+    .action-list & {
+        color: $deleta-all-action-list-color;
+    }
+
+    &__icon {
+        fill: $delete-all-icon-color;
+        height: 4px * 6;
+        margin-right: 4px * 2;
+        position: relative;
+        top: -2px;
+        transition-duration: var(--duration-micro-s);
+        transition-property: fill;
+        transition-timing-function: var(--easing-standard);
+        width: 4px * 6;
+
+        #{$b}:hover &,
+        #{$b}:focus-visible & {
+            fill: $delete-all-icon-active-color;
+        }
+
+        .action-list & {
+            fill: $delete-all-action-list-icon-color;
+        }
+    }
+}

package/src/components/dialog/index.js

@@ -0,0 +1,221 @@
+/* globals BX */
+
+import { is } from '@advdominion/is';
+import _throttle from 'lodash-es/throttle.js';
+
+import { cssVar } from '../../helpers/css-var.js';
+import { errorHandler } from '../../helpers/error-handler.js';
+import { mm } from '../../helpers/mm.js';
+import { clearLoaderTimeout, hide as hideLoader, show as showLoader } from '../loader/index.js';
+import { disableScroll, enableScroll } from '../overlay/index.js';
+
+const isDialogOverflow = ($b) => {
+    return $b.scrollHeight > $b.clientHeight;
+};
+
+export const init = ($b) => {
+    // Перемещаем кнопку закрытия модального окна для моб. устройств
+    if (!mm('tablet-landscape-up')) {
+        // $b.find('.dialog__close').prependTo($b); ??
+        $b.prepend($b.querySelector('.dialog__close'));
+    }
+    // Отключаем скролл у body, если при загрузке на странице есть видимое диалоговое окно
+    if (!$b.hidden) {
+        disableScroll();
+        if (isDialogOverflow($b)) {
+            $b.classList.add('dialog_overflow');
+        } else {
+            $b.classList.remove('dialog_overflow');
+        }
+    }
+    if ($b._OVERFLOW_OBSERVER_) {
+        $b._OVERFLOW_OBSERVER_.disconnect();
+    }
+    $b._OVERFLOW_OBSERVER_ = new MutationObserver(() => {
+        if (isDialogOverflow($b)) {
+            $b.classList.add('dialog_overflow');
+        } else {
+            $b.classList.remove('dialog_overflow');
+        }
+    });
+    $b._OVERFLOW_OBSERVER_.observe($b, {
+        childList: true,
+        attributes: true,
+        subtree: true,
+        attributeFilter: ['hidden'],
+    });
+};
+
+export const show = async ($b) => {
+    if ($b && $b.hidden) {
+        $b.dispatchEvent(new CustomEvent('dialog-show'));
+
+        disableScroll();
+        $b.hidden = false;
+
+        await Promise.all([
+            $b.animate([{ opacity: 0 }, { opacity: 1 }], {
+                duration: cssVar('--duration-enter-m'),
+                easing: cssVar('--easing-deceleration'),
+            }).finished,
+            $b
+                .querySelector('.dialog__wrapper')
+                .animate([{ transform: 'translateY(-15px)' }, { transform: 'translateY(0)' }], {
+                    duration: cssVar('--duration-enter-m'),
+                    easing: cssVar('--easing-deceleration'),
+                }).finished,
+        ]);
+
+        $b.dispatchEvent(new CustomEvent('dialog-shown'));
+    }
+
+    return new Promise((resolve) => {
+        resolve();
+    });
+};
+
+export const hide = async ($b) => {
+    if ($b && !$b.hidden) {
+        $b.dispatchEvent(new CustomEvent('dialog-hide'));
+
+        await Promise.all([
+            $b.animate([{ opacity: 1 }, { opacity: 0 }], {
+                duration: cssVar('--duration-leave-m'),
+                easing: cssVar('--easing-acceleration'),
+            }).finished,
+            $b
+                .querySelector('.dialog__wrapper')
+                .animate([{ transform: 'translateY(0)' }, { transform: 'translateY(-15px)' }], {
+                    duration: cssVar('--duration-leave-m'),
+                    easing: cssVar('--easing-acceleration'),
+                }).finished,
+        ]);
+
+        $b.hidden = true;
+        enableScroll();
+        $b.dispatchEvent(new CustomEvent('dialog-hidden'));
+    } else {
+        enableScroll();
+    }
+};
+
+export const initDialogContent = ($b) => {
+    try {
+        window.__FORMIX__DIALOG__INIT_CONTENT($b);
+    } catch {
+        console.warn('Функция __FORMIX__DIALOG__INIT_CONTENT не установлена');
+    }
+};
+
+export const get = async (id, url) => {
+    if (url && url !== '#') {
+        showLoader();
+        try {
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-Session-Id': BX.message('bitrix_sessid'),
+                },
+            });
+            if (!response.ok) {
+                throw response;
+            }
+            let data = await response.text();
+            try {
+                data = JSON.parse(data);
+                if (is(data.redirect, 'String')) {
+                    if (data.redirect.length > 0) {
+                        location.assign(data.redirect);
+                        clearLoaderTimeout();
+                    } else {
+                        location.reload();
+                    }
+                } else {
+                    try {
+                        await window.__FORMIX__DIALOG__INIT_JSON();
+                    } catch {
+                        console.warn('Функция __FORMIX__DIALOG__INIT_JSON не установлена');
+                    }
+                    data = data.content || '';
+                }
+            } catch {} // eslint-disable-line no-empty
+            if (data.length > 0) {
+                const $b = document.querySelector(id);
+                $b.querySelector('.dialog__container').innerHTML = data;
+                await show($b);
+                hideLoader();
+                initDialogContent($b);
+            } else {
+                hideLoader();
+            }
+        } catch (error) {
+            if (error.status === 401) {
+                location.reload();
+            } else {
+                hideLoader();
+                errorHandler(error);
+            }
+        }
+    } else {
+        const $b = document.querySelector(id);
+        show($b);
+    }
+};
+
+let prevWindowHeight = window.innerHeight;
+const resizeWindowListener = () => {
+    if (window.innerHeight !== prevWindowHeight) {
+        prevWindowHeight = window.innerHeight;
+        for (const $el of document.querySelectorAll('.dialog')) {
+            if (!$el.hidden) {
+                if (isDialogOverflow($el)) {
+                    $el.classList.add('dialog_overflow');
+                } else {
+                    $el.classList.remove('dialog_overflow');
+                }
+            }
+        }
+    }
+};
+window.addEventListener('resize', _throttle(resizeWindowListener, 100));
+
+let $pointerDownTarget;
+document.body.addEventListener('pointerdown', (event) => {
+    const { target } = event;
+    if (target.closest('.dialog')) {
+        $pointerDownTarget = target;
+    }
+});
+
+document.body.addEventListener('click', (event) => {
+    const { target } = event;
+    if (target.closest('[data-dialog]')) {
+        event.preventDefault();
+        const $el = target.closest('[data-dialog]');
+        let url = $el.dataset.dialogFetch || $el.href;
+        if (url) {
+            url = new URL(url, location.origin);
+        }
+        get($el.dataset.dialog, url);
+    } else if (target.closest('[data-dialog-close]')) {
+        hide(target.closest('[data-dialog-close]').closest('.dialog'));
+    } else if (target.matches('.dialog') && target === $pointerDownTarget) {
+        /*
+            Человек может нажать кнопку в одном месте, а отжать в другом (например, при выделении),
+            поэтому проверяем, чтобы элементы pointerdown и click были одинаковыми
+        */
+        hide(target);
+        $pointerDownTarget = undefined;
+    }
+});
+
+document.body.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+        const $el = [...document.querySelectorAll('.dialog')].filter((el) => !el.hidden);
+
+        if ($el.length > 0) {
+            hide($el.at(-1));
+        }
+    }
+});

package/src/components/dialog/index.scss

@@ -0,0 +1,198 @@
+@use '../../variables' as *;
+
+$b: '.dialog';
+
+#{$b} {
+    background-color: $dialog-backdrop-color;
+    height: calc(100% - var(--tab-bar-height));
+    left: 0;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 990;
+
+    @media (--tablet-landscape-up) {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+        padding: 4px * 10 0;
+    }
+
+    &_overflow {
+        @media (--tablet-landscape-up) {
+            justify-content: flex-start;
+        }
+    }
+
+    &_s {
+    }
+
+    &_m {
+    }
+
+    &_l {
+    }
+
+    &__wrapper {
+        background-color: $dialog-bg;
+        color: $dialog-color;
+        min-height: 100%;
+        padding: 4px * 8 4px * 4;
+        width: 100%;
+
+        @media (--tablet-landscape-up) {
+            border-radius: $dialog-radius;
+            box-shadow: $dialog-shadow;
+            min-height: auto;
+            padding: 4px * 10;
+            position: relative;
+        }
+
+        #{$b}_overflow & {
+            flex-shrink: 0;
+            min-height: auto;
+        }
+
+        #{$b}_s & {
+            max-width: $dialog-s-max-width;
+        }
+
+        #{$b}_m & {
+            max-width: $dialog-m-max-width;
+        }
+
+        #{$b}_l & {
+            max-width: $dialog-l-max-width;
+        }
+    }
+
+    &__close {
+        align-items: center;
+        background-color: $dialog-bg;
+        border-radius: $dialog-close-radius;
+        color: $dialog-close-color;
+        cursor: pointer;
+        display: flex;
+        height: 4px * 10;
+        justify-content: center;
+        position: fixed;
+        right: 4px * 2;
+        top: 4px * 2;
+        transition-duration: var(--duration-micro-s);
+        transition-property: color;
+        transition-timing-function: var(--easing-standard);
+        width: 4px * 10;
+        z-index: 1;
+
+        @media (--tablet-landscape-up) {
+            position: absolute;
+        }
+
+        &:hover,
+        &:focus-visible {
+            color: $dialog-close-active-color;
+        }
+    }
+
+    &__close-icon {
+        fill: currentcolor;
+        height: 4px * 5;
+        width: 4px * 5;
+    }
+
+    &__container {
+    }
+
+    &__header {
+        align-items: center;
+        display: flex;
+    }
+
+    &__header-image {
+        border: $dialog-header-image-border-width solid $dialog-header-image-border-color;
+        border-radius: $dialog-radius;
+        flex-shrink: 0;
+        height: 4px * 20;
+        margin-right: 4px * 6;
+        object-fit: contain;
+        width: 4px * 20;
+
+        @media (--tablet-portrait-down) {
+            display: none;
+        }
+
+        @media (--desktop-up) {
+            height: 4px * 22;
+            width: 4px * 22;
+        }
+    }
+
+    &__header-wrapper {
+    }
+
+    &__title {
+        width: calc(100% - 40px);
+
+        @include font($dialog-title-mobile-font);
+
+        @media (--tablet-landscape-up) {
+            width: auto;
+
+            @include font($dialog-title-desktop-font);
+        }
+    }
+
+    &__descr {
+        margin-top: 4px * 6;
+        max-width: 672px;
+    }
+
+    &__form {
+        margin-top: 4px * 6;
+    }
+
+    &__product-table {
+        margin-top: 4px * 6;
+    }
+
+    &__action-list {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        margin-top: 4px * 6;
+
+        @media (--tablet-landscape-up) {
+            flex-direction: row;
+        }
+
+        &_right {
+            @media (--tablet-landscape-up) {
+                justify-content: flex-end;
+            }
+        }
+    }
+
+    &__action-item {
+        max-width: 4px * 62;
+        white-space: normal;
+
+        &:not(:first-child) {
+            margin-top: 4px * 6;
+
+            @media (--tablet-landscape-up) {
+                margin-left: 4px * 6;
+                margin-top: 0;
+            }
+        }
+
+        &.button {
+            @media (--tablet-portrait-down) {
+                width: 100%;
+            }
+        }
+    }
+}

package/src/components/empty-list/index.scss

@@ -0,0 +1,97 @@
+@use '../../variables' as *;
+
+$b: '.empty-list';
+
+#{$b} {
+    background-color: $empty-list-bg;
+    border-radius: $empty-list-radius;
+    display: flex;
+    flex-direction: column;
+    padding: 4px * 6 4px * 4;
+
+    @include dark-border;
+
+    @media (--tablet-landscape-up) {
+        align-items: center;
+        flex-direction: row;
+        padding: 4px * 10 4px * 6;
+    }
+
+    &_shadow {
+        box-shadow: $shadow;
+    }
+
+    &__icon {
+        align-self: center;
+        fill: $empty-list-icon-color;
+        flex-shrink: 0;
+        margin-bottom: 4px * 6;
+        width: 4px * 30;
+
+        @media (--tablet-landscape-up) {
+            margin-bottom: 0;
+            margin-right: 4px * 12;
+            width: 4px * 60;
+        }
+    }
+
+    &__content {
+        flex-grow: 1;
+    }
+
+    &__title {
+        margin-bottom: 4px * 4;
+
+        @include font($empty-list-title-mobile-font);
+
+        @media (--tablet-landscape-up) {
+            @include font($empty-list-title-desktop-font);
+        }
+    }
+
+    &__descr {
+        max-width: 4px * 150;
+    }
+
+    &__action {
+        margin-top: 4px * 4;
+    }
+
+    &__footer {
+        border-top: $empty-list-footer-separator-width solid $empty-list-footer-separator-color;
+        margin-top: 4px * 4;
+        padding-top: 4px * 4;
+    }
+
+    &__action-list {
+        #{$b}__descr + & {
+            margin-top: 4px * 4;
+        }
+    }
+
+    &__action-item {
+    }
+
+    &__action-link {
+        align-items: center;
+        display: flex;
+        padding-bottom: 4px * 2;
+        padding-top: 4px * 2;
+    }
+
+    &__action-icon {
+        fill: $empty-list-action-icon-color;
+        flex-shrink: 0;
+        height: 4px * 6;
+        margin-right: 4px * 2;
+        transition-duration: var(--duration-micro-s);
+        transition-property: color;
+        transition-timing-function: var(--easing-standard);
+        width: 4px * 6;
+
+        #{$b}__action-link:hover &,
+        #{$b}__action-link:focus-visible & {
+            fill: $empty-list-action-icon-active-color;
+        }
+    }
+}

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

@@ -0,0 +1,119 @@
+@use 'sass:color';
+@use '../../variables' as *;
+
+$b: '.file-input';
+
+#{$b} {
+    align-items: center;
+    background-color: $file-input-bg;
+    border: $file-input-border-width solid $file-input-border-color;
+    border-radius: $file-input-radius;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-width: 4px * 96;
+    padding: 4px * 5 4px * 4;
+    transition-duration: var(--duration-micro-s);
+    transition-property: background-color, border-color;
+    transition-timing-function: var(--easing-standard);
+
+    &_dragover {
+        background-color: $file-input-dragover-bg;
+        border-color: $file-input-dragover-border-color;
+    }
+
+    &__descr {
+        color: $file-input-descr-color;
+        margin-top: 4px * 4;
+        text-align: center;
+
+        @include font($file-input-descr-font);
+    }
+
+    &__file-list {
+        margin-top: 4px * 4;
+        width: 100%;
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    &__file {
+        align-items: center;
+        background-color: $file-input-file-bg;
+        border-radius: $file-input-file-radius;
+        display: flex;
+        min-height: 4px * 11;
+        padding: 4px * 3;
+        transition-duration: var(--duration-micro-s);
+        transition-property: background-color;
+        transition-timing-function: var(--easing-standard);
+
+        &:not(:first-child) {
+            margin-top: 4px * 2;
+        }
+
+        #{$b}_dragover & {
+            background-color: $file-input-dragover-file-bg;
+        }
+    }
+
+    &__file-wrapper {
+        width: calc(100% - 28px);
+    }
+
+    &__file-name {
+        color: $file-input-file-name-color;
+        opacity: 0.5;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition-duration: var(--duration-micro-s);
+        transition-property: opacity;
+        transition-timing-function: var(--easing-standard);
+        white-space: nowrap;
+
+        @include font($file-input-file-name-font);
+
+        #{$b}__file_active & {
+            opacity: 1;
+        }
+    }
+
+    &__file-error {
+        color: $file-input-file-error-color;
+        margin-top: 4px;
+
+        @include font($file-input-file-error-font);
+    }
+
+    &__remove {
+        align-items: center;
+        color: $file-input-remove-color;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        margin-left: 4px * 2;
+        transition-duration: var(--duration-micro-s);
+        transition-property: color;
+        transition-timing-function: var(--easing-standard);
+
+        &:hover,
+        &:focus-visible {
+            color: $file-input-remove-active-color;
+        }
+    }
+
+    &__icon {
+        fill: currentcolor;
+        height: 4px * 4;
+        width: 4px * 4;
+    }
+
+    &__loader {
+        container-type: size;
+        height: 4px * 5;
+        margin-left: 4px * 2;
+        width: 4px * 5;
+    }
+}