@formixru/b2b-ui 2.5.0 → 3.0.0

package/src/variables.scss

@@ -1001,11 +1001,25 @@ $tooltip-image-max-height: 300px !default;
 
 // .action-list
 
-$action-list-link-color: $color-grey-70 !default;
+$action-list-color: $font-color-tertiary !default;
 
 $action-list-link-separator-color: autocolor(('light': $color-grey-alpha-80, 'dark': $color-grey-alpha-i-90), $tooltip-light-bg) !default;
 $action-list-link-separator-width: 1px !default;
 
+/********** Ссылка-действие (.action-link) **********/
+
+$action-link-font: ('font-weight': bold) !default;
+
+$action-link-action-list-font: ('font-weight': normal) !default;
+
+$action-link-danger-font: ('font-weight': normal) !default;
+
+$action-link-danger-color: $link-grey-color !default;
+$action-link-danger-active-color: $color-error !default;
+
+$action-link-danger-icon-color: $color-grey-70 !default;
+$action-link-danger-icon-active-color: $action-link-danger-active-color !default;
+
 /********** Панель с предупреждением (.warning) **********/
 
 $warning-message-bg: $bg-color-tertiary !default;
@@ -1160,17 +1174,6 @@ $total-amount-value-b-desktop-font: ('font-size': $font-size-xl) !default;
 $total-amount-tax-color: $font-color-tertiary !default;
 $total-amount-tax-font: ('font-size': $font-size-xs, 'line-height': $line-height-s) !default;
 
-/********** Удалить всё (.delete-all) **********/
-
-$delete-all-color: $font-color-secondary !default;
-$delete-all-active-color: $color-error !default;
-
-$delete-all-icon-color: $color-grey-70 !default;
-$delete-all-icon-active-color: $delete-all-active-color !default;
-
-$deleta-all-action-list-color: $link-grey-color !default;
-$delete-all-action-list-icon-color: $link-grey-color !default;
-
 /********** Шаги (.steps) **********/
 
 $steps-item-number-border-width: 1px !default;
@@ -1221,6 +1224,14 @@ $content-title-desktop-font: $font-h1-desktop !default;
 $content-title-small-mobile-font: $font-h2-mobile !default;
 $content-title-small-desktop-font: $font-h2-desktop !default;
 
+/********** Счётчик (.counter) **********/
+
+$counter-bg: $color-error;
+$counter-color: $color-white;
+$counter-font: ('font-weight': bold, 'font-size': $font-size-3xs, 'line-height': 1);
+$counter-radius: $radius-l;
+$counter-size: 16px;
+
 /********** Адаптивные точки **********/
 
 // При изменении устройств изменить их так же в mm.js

package/CHANGELOG.md

@@ -1,108 +0,0 @@
-## v2.5.0
-
-- Для `Form` исправлена работа атрибута `data-request` - теперь он называется `data-form-request`, чтобы избежать конфликтов с компонентом `Request`
-
-## v2.4.0
-
-- `@advdominion/tooltip` обновлён до 5-й версии
-- Исправдение стилей `.warning-message`
-
-## v2.3.0
-
-- В `Request` добавлена поддержка id диалогового окна или сайдбара как c `#`, так и без неё
-
-## v2.2.0
-
-- Доработки по стилям `.tabs`/`.warning-message`
-
-## v2.1.0
-
-- В Request добавлены `reloadOnHideSidebar`/`hideSidebar`, а так же параметр `hideLoaderOnSuccess`
-- В Request добавлена функция `__FORMIX__REQUEST__INIT_CONTENT` вместо `__FORMIX__FORM__INIT_CONTENT`/`__FORMIX__DIALOG__INIT_CONTENT`/`__FORMIX__SIDEBAR_INIT_CONTENT`
-- Поддержка id диалогового окна или сайдбара как c `#`, так и без неё
-
-## v2.0.1
-
-- Исправлена работа `Request`
-- Исправлена работа `cssVar`
-
-## v2.0.0
-
-- Добавлен новый компонент - универсальный AJAX-контроллер `Request`, который используется внутри `Dialog`/`Form`/`Sidebar` и может использоваться как отдельный компонент
-- Storybook обновлён до 9-й версии
-
-## v1.7.0
-
-- Добавлен новый вид для WarningMessage (`light-info`)
-
-## v1.6.1
-
-- Исправление в WarningMessage
-- Доработки по стилям .form
-
-## v1.6.0
-
-- Доработки для PWA
-
-## v1.5.2
-
-- Исправлен баг в работе FontInput
-
-## v1.5.1
-
-- Переработан FontInput - теперь вместо названий переменных для font-size/line-height он возвращает их значения
-
-## v1.5.0
-
-- Для AJAX-форм добавлена поддержка поля `trigger`
-
-## v1.4.0
-
-- Для SuggestInput сделан expose функции `clear()`
-
-## v1.3.0
-
-- Добавленена поддержка `data-tooltip-image` для вывода изображений во всплывающих подсказках
-
-## v1.2.1
-
-- Исправлены стили в .pagination-group
-
-## v1.2.0
-
-- Для `isInViewport` добавлен параметр `partialVisibility` для определения частичной видимости элемента
-
-## v1.1.1
-
-- Переменная `--tab-bar-height` добавлена в `base.scss`
-
-## v1.1.0
-
-- Использование cssVar() в ColorInput для работы с предустановленными цветами
-
-## v1.0.5
-
-- Доработки по коду и документации
-- Функция `__FORMIX__DIALOG__INIT_JSON` переименована в `__FORMIX__DIALOG__INTERCEPT_DATA`
-- Обновлена требуемая версия @advdominion/tooltip
-- Доработки по работе по .tabs
-
-## v1.0.4
-
-- Добавлены новые переменные для .slider-nav
-- Исправлены ошибки в работе FileInput
-
-## v1.0.3
-
-- Исправлены ошибки в работе SuggestInput
-
-## v1.0.2
-
-- Исправлены ошибки в работе FileInput - теперь при загрузке вместе с содержимым файла (поле `file`) отправляется его имя (поле `name`)
-- Исправлены возможные ошибки в работе блока .form
-
-## v1.0.1
-
-- Исправлены ошибки в работе блока .form
-
-## v1.0.0

package/CONTRIBUTING.md

@@ -1,59 +0,0 @@
-# b2b-ui
-
-## Системные требования
-
-- Node.js и Yarn (https://gitea.optiweb.ru/wiki/wiki/wiki/Установка-Node.js-и-Yarn)
-- [Java](https://www.java.com/download/) версии 8 или выше (только для разработки и CI)
-
-Так же возможна работа через [Dev Containers](https://gitea.optiweb.ru/wiki/wiki/wiki/Работа-с-проектом-через-Dev-Containers).
-
-## Команды
-
-Сборка проекта в development-режиме и запуск сервера для разработки на порту по-умолчанию (3000):
-
-`yarn dev`
-
-Сборка проекта в development-режиме и запуск сервера для разработки на определённом порту:
-
-`yarn dev --port 8000`
-
-Сборка проекта в production-режиме:
-
-`yarn build`
-
-Запуск проверки кода (в том числе его форматирования):
-
-`yarn lint`
-
-## Git Hooks
-
-### commit-msg
-
-Хук проверяет commit message на соответствие следующему формату:
-
-```
-#<Номер задачи> <Краткое описание изменений>
-```
-
-Особенности:
-
-- Если у номера задачи нет символа `#`, он будет добавлен автоматически
-- Cообщения, начинающиеся с `Merge/Revert`, не проверяются
-
-### pre-commit
-
-Хук запускает проверку кода (в том числе его форматирования) с исправлением, если это возможно, найденных ошибок. Если автоматически исправить все найденные ошибки невозможно, создание коммита будет отменено.
-
-## Обновление зависимостей
-
-```shell
-yarn set version stable
-
-yarn install
-
-yarn dlx storybook@latest upgrade
-
-yarn upgrade-interactive
-
-yarn dlx @yarnpkg/sdks
-```

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

@@ -1,154 +0,0 @@
-<template>
-    <div class="color-input">
-        <label
-            v-for="color in preset"
-            :key="color"
-            class="color-input__color"
-            :class="{ 'color-input__color_active': color === currentColor }"
-            :style="{ borderColor: color === currentColor ? getActiveBorderColor(color) : '' }"
-        >
-            <input
-                hidden
-                type="radio"
-                :name="name"
-                :value="color"
-                :checked="color === currentColor"
-                @change="setColor(color)"
-            />
-            <span class="color-input__example" :style="{ backgroundColor: getHexColor(color) }"></span>
-        </label>
-        <template v-if="custom">
-            <label
-                class="color-input__color"
-                :class="{ 'color-input__color_active': isCustomColorActive }"
-                :style="{ borderColor: isCustomColorActive ? getActiveBorderColor(currentColorHex) : '' }"
-            >
-                <input
-                    class="sr-only"
-                    type="color"
-                    :name="name"
-                    :value="currentColorHex"
-                    @change="setColor($event.target.value)"
-                />
-                <span class="color-input__example" :style="{ backgroundColor: currentColorHex }">
-                    <svg class="color-input__icon" :class="[getIconModifier()]">
-                        <use :href="`${ICONS_PATH}#color-picker`" />
-                    </svg>
-                </span>
-            </label>
-            <input hidden type="radio" :value="currentColorHex" :checked="isCustomColorActive" />
-        </template>
-        <label
-            v-if="transparent"
-            class="color-input__color"
-            :class="{ 'color-input__color_active': isTransparentColorActive }"
-        >
-            <input
-                hidden
-                type="radio"
-                :name="name"
-                value="transparent"
-                :checked="isTransparentColorActive"
-                @change="setColor($event.target.value)"
-            />
-            <span class="color-input__example color-input__example_transparent"></span>
-        </label>
-        <label v-if="autocolor" class="color-input__color" :class="{ 'color-input__color_active': isAutoColorActive }">
-            <input
-                hidden
-                type="radio"
-                :name="name"
-                :value="autocolor"
-                :checked="isAutoColorActive"
-                @change="setColor($event.target.value)"
-            />
-            <span class="color-input__example color-input__example_autocolor">
-                <svg class="color-input__icon">
-                    <use :href="`${ICONS_PATH}#magic-wand`" />
-                </svg>
-                <svg class="color-input__icon">
-                    <use :href="`${ICONS_PATH}#magic-wand`" />
-                </svg>
-            </span>
-        </label>
-    </div>
-</template>
-
-<script setup>
-import Color from 'color';
-import { computed, ref, toRefs, watch } from 'vue';
-
-import { cssVar } from '../../helpers/css-var.js';
-
-const ICONS_PATH = window.ICONS_PATH;
-
-const emit = defineEmits(['input']);
-
-const props = defineProps({
-    name: {
-        type: String,
-        required: true,
-    },
-    value: {
-        type: String,
-        required: true,
-    },
-    preset: {
-        type: Array,
-        default() {
-            return [];
-        },
-    },
-    custom: {
-        type: Boolean,
-    },
-    transparent: {
-        type: Boolean,
-    },
-    autocolor: {
-        type: String,
-        default: '',
-    },
-});
-
-const { name, value, preset, custom, transparent, autocolor } = toRefs(props);
-const currentColor = ref(value.value);
-const isTransparentColorActive = computed(() => currentColor.value === 'transparent');
-const isAutoColorActive = computed(() => currentColor.value.indexOf('autocolor') === 0);
-const isCustomColorActive = computed(
-    () => !preset.value.includes(currentColor.value) && !isTransparentColorActive.value && !isAutoColorActive.value,
-);
-const currentColorHex = computed(() => getHexColor(currentColor.value));
-
-watch(value, (newValue) => {
-    currentColor.value = newValue;
-});
-
-const setColor = (color) => {
-    currentColor.value = color;
-    emit('input', currentColor.value);
-};
-
-const getHexColor = (color) => {
-    if (color.charAt(0) === '$') {
-        color = cssVar(color.replace('$', '--'));
-        return Color(color).hex().toLowerCase();
-    }
-    return color;
-};
-
-const getActiveBorderColor = (color) => {
-    color = getHexColor(color);
-    // https://www.w3.org/TR/WCAG21/#contrast-minimum
-    if (Color(color).contrast(Color('#ffffff')) >= 3) {
-        return color;
-    }
-    return '';
-};
-
-const getIconModifier = () => {
-    return !isTransparentColorActive.value && !isAutoColorActive.value && Color(currentColorHex.value).isDark()
-        ? 'color-input__icon_light'
-        : 'color-input__icon_dark';
-};
-</script>

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

@@ -1,240 +0,0 @@
-<template>
-    <div class="date-input">
-        <VDatePicker
-            v-if="range"
-            v-model.range.string="date"
-            :min-date="minDate"
-            :max-date="maxDate"
-            :disabled-dates="parsedDisabledDates"
-            locale="ru-RU"
-            :masks="{ modelValue: 'DD.MM.YYYY' }"
-            :popover="{ visibility: 'click' }"
-            :attributes="attributes"
-            :select-attribute="selectAttribute"
-            :drag-attribute="dragAttribute"
-            @update:model-value="model = $event"
-        >
-            <template #default="{ inputValue, inputEvents }">
-                <div>
-                    <input
-                        :id="id"
-                        class="date-input__input input"
-                        :class="{ input_error: error, input_small: small }"
-                        type="text"
-                        readonly
-                        :name="name"
-                        :placeholder="placeholder || 'Введите даты'"
-                        :value="inputValue.start && inputValue.end ? `${inputValue.start} — ${inputValue.end}` : ''"
-                        :required="required"
-                        :disabled="disabled"
-                        v-on="inputEvents.start"
-                    />
-                    <svg class="date-input__icon"><use :href="`${ICONS_PATH}#date`" /></svg>
-                </div>
-            </template>
-        </VDatePicker>
-        <VDatePicker
-            v-else
-            v-model.string="date"
-            :min-date="minDate"
-            :max-date="maxDate"
-            :disabled-dates="parsedDisabledDates"
-            locale="ru-RU"
-            :masks="{ modelValue: 'DD.MM.YYYY' }"
-            :popover="{ visibility: 'click' }"
-            :attributes="attributes"
-            :select-attribute="selectAttribute"
-            :drag-attribute="dragAttribute"
-            @update:model-value="model = $event"
-        >
-            <template #default="{ inputValue, inputEvents }">
-                <div>
-                    <input
-                        :id="id"
-                        class="date-input__input input"
-                        :class="{ input_error: error, input_small: small }"
-                        type="text"
-                        readonly
-                        :name="name"
-                        :placeholder="placeholder || 'Введите дату'"
-                        :value="inputValue"
-                        :required="required"
-                        :disabled="disabled"
-                        v-on="inputEvents"
-                    />
-                    <svg class="date-input__icon"><use :href="`${ICONS_PATH}#date`" /></svg>
-                </div>
-            </template>
-        </VDatePicker>
-    </div>
-</template>
-
-<script setup>
-import { is } from '@advdominion/is';
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat.js';
-import { DatePicker } from 'v-calendar';
-import { ref, toRefs, watch } from 'vue';
-
-const ICONS_PATH = window.ICONS_PATH;
-
-dayjs.extend(customParseFormat);
-const VDatePicker = DatePicker;
-
-const model = defineModel({ type: String, default: '' });
-
-const props = defineProps({
-    id: {
-        type: String,
-        default: '',
-    },
-    name: {
-        type: String,
-        default: '',
-    },
-    placeholder: {
-        type: String,
-        default: '',
-    },
-    min: {
-        type: String,
-        default: '',
-    },
-    max: {
-        type: String,
-        default: '',
-    },
-    range: {
-        type: Boolean,
-    },
-    required: {
-        type: Boolean,
-    },
-    disabled: {
-        type: Boolean,
-    },
-    small: {
-        type: Boolean,
-    },
-    error: {
-        type: Boolean,
-    },
-    disabledDates: {
-        type: Array,
-        default() {
-            return [];
-        },
-    },
-});
-
-const { id, name, placeholder, min, max, range, required, disabled, small, error, disabledDates } = toRefs(props);
-
-const attributes = ref([
-    {
-        key: 'today',
-        highlight: {
-            fillMode: 'outline',
-            class: 'date-input__outline_bg',
-            contentClass: 'date-input__outline_color',
-        },
-        dates: new Date(),
-    },
-]);
-
-const selectAttribute = ref({
-    order: 1,
-    highlight: {
-        start: {
-            fillMode: 'solid',
-            class: 'date-input__solid_bg',
-            contentClass: 'date-input__solid_color',
-        },
-        base: {
-            fillMode: 'light',
-            class: 'date-input__light_bg',
-            contentClass: 'date-input__light_color',
-        },
-        end: {
-            fillMode: 'solid',
-            class: 'date-input__solid_bg',
-            contentClass: 'date-input__solid_color',
-        },
-    },
-});
-
-const dragAttribute = ref({
-    highlight: {
-        start: {
-            fillMode: 'outline',
-            class: 'date-input__outline_bg',
-            contentClass: 'date-input__outline_color',
-        },
-        base: {
-            fillMode: 'light',
-            class: 'date-input__light_bg',
-            contentClass: 'date-input__light_color',
-        },
-        end: {
-            fillMode: 'outline',
-            class: 'date-input__outline_bg',
-            contentClass: 'date-input__outline_color',
-        },
-    },
-});
-
-const date = ref();
-const setDate = (value) => {
-    if (value) {
-        if (range.value && is(value, 'String')) {
-            value = value.split(',');
-            date.value = {
-                start: value[0],
-                end: value[1],
-            };
-        } else {
-            date.value = value;
-        }
-    } else {
-        date.value = undefined;
-    }
-};
-setDate(model.value);
-watch(model, () => {
-    setDate(model.value);
-});
-
-const minDate = ref();
-const setMin = (value) => {
-    minDate.value = value ? dayjs(value, 'DD.MM.YYYY').toDate() : undefined;
-};
-setMin(min.value);
-watch(min, (newMinValue) => {
-    setMin(newMinValue);
-});
-
-const maxDate = ref();
-const setMax = (value) => {
-    maxDate.value = value ? dayjs(value, 'DD.MM.YYYY').toDate() : undefined;
-};
-setMax(max.value);
-watch(max, (newMaxValue) => {
-    setMax(newMaxValue);
-});
-
-const parsedDisabledDates = ref();
-const setParsedDisabledDates = (value) => {
-    parsedDisabledDates.value = value.map((date) => {
-        return date ? dayjs(date, 'DD.MM.YYYY').toDate() : '';
-    });
-};
-setParsedDisabledDates(disabledDates.value);
-watch(disabledDates, (newDisabledDates) => {
-    setParsedDisabledDates(newDisabledDates);
-});
-
-defineExpose({
-    setDate,
-    setMin,
-    setMax,
-});
-</script>

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

@@ -1,44 +0,0 @@
-@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;
-        }
-    }
-}