@formixru/b2b-ui 1.0.0

package/src/components/overlay/index.scss

@@ -0,0 +1,29 @@
+@use '../../variables' as *;
+
+$b: '.overlay';
+
+:root {
+    --overlay-z-index: 900;
+}
+
+#{$b} {
+    background-color: $overlay-bg;
+    height: 100%;
+    left: 0;
+    opacity: 0;
+    position: fixed;
+    top: 0;
+    transform: translateX(-100%);
+    transition-duration: var(--duration-leave-s);
+    transition-property: opacity;
+    transition-timing-function: var(--easing-acceleration);
+    width: 100%;
+    z-index: var(--overlay-z-index);
+
+    &_active {
+        opacity: 1;
+        transform: translateX(0);
+        transition-duration: var(--duration-enter-s);
+        transition-timing-function: var(--easing-deceleration);
+    }
+}

package/src/components/pagination/index.scss

@@ -0,0 +1,59 @@
+@use '../../variables' as *;
+
+$b: '.pagination';
+
+#{$b} {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    &__item {
+        align-items: center;
+        color: $pagination-item-color;
+        display: flex;
+        justify-content: center;
+        padding: 4px * 2;
+        transition-duration: var(--duration-micro-s);
+        transition-property: color;
+        transition-timing-function: var(--easing-standard);
+
+        @include font($pagination-item-font);
+
+        &:first-child {
+            padding-right: 4px * 2;
+        }
+
+        &:last-child {
+            padding-left: 4px * 2;
+        }
+
+        &:any-link {
+            text-decoration: none;
+
+            &:hover,
+            &:focus-visible {
+                color: $pagination-item-active-color;
+            }
+        }
+
+        &_disabled {
+            color: $pagination-item-disabled-color;
+        }
+
+        &_active {
+            color: $pagination-item-active-color;
+        }
+    }
+
+    &__arrow {
+        fill: currentcolor;
+        height: 1em;
+        width: 1em;
+
+        &_prev {
+        }
+
+        &_next {
+        }
+    }
+}

package/src/components/pagination-group/index.js

@@ -0,0 +1,5 @@
+document.body.addEventListener('change', (event) => {
+    if (event.target.matches('.pagination-group__per-page select')) {
+        location.assign(event.target.value);
+    }
+});

package/src/components/pagination-group/index.scss

@@ -0,0 +1,86 @@
+@use 'sass:math';
+@use '../../variables' as *;
+
+$b: '.pagination-group';
+
+#{$b} {
+    color: $pagination-group-color;
+    display: flex;
+    flex-direction: column;
+
+    @media (--tablet-landscape-up) {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    &_compact {
+    }
+
+    .lk-table + & {
+        margin-top: 4px * 4;
+    }
+
+    &__per-page {
+        width: math.div(100%, 3);
+
+        @media (--tablet-portrait-down) {
+            display: none;
+        }
+
+        label {
+            align-items: center;
+            display: flex;
+            width: 100%;
+        }
+
+        .select {
+            margin-left: 4px * 4;
+            width: 4px * 28;
+        }
+    }
+
+    &__infinite {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+
+        &:not(:first-child) {
+            @media (--tablet-landscape-up) {
+                width: math.div(100%, 3);
+            }
+
+            #{$b}_compact & {
+                @media (--tablet-landscape-only) {
+                    margin-top: 4px * 6;
+                    width: 100%;
+                }
+            }
+        }
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    &__pagination {
+        width: 100%;
+
+        &:not(:first-child) {
+            @media (--tablet-landscape-up) {
+                margin-top: 4px * 6;
+            }
+
+            #{$b}__infinite:first-child:empty + & {
+                @media (--tablet-landscape-up) {
+                    margin-top: 0;
+                }
+            }
+        }
+
+        #{$b}__infinite:not(:empty) + & {
+            @media (--tablet-portrait-down) {
+                margin-top: 4px * 6;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,179 @@
+@use '../../variables' as *;
+
+$b: '.quantity-input';
+
+#{$b} {
+    display: flex;
+
+    &_medium {
+    }
+
+    &_big {
+    }
+
+    &__button {
+        align-items: center;
+        background-color: $quantity-input-button-bg;
+        border: $quantity-input-button-border-width solid $quantity-input-button-border-color;
+        color: $quantity-input-button-color;
+        cursor: pointer;
+        display: flex;
+        flex-shrink: 0;
+        height: 4px * 10;
+        justify-content: center;
+        transition-duration: var(--duration-micro-s);
+        transition-property: background-color, border-color, color;
+        transition-timing-function: var(--easing-standard);
+        width: 4px * 6;
+
+        &:disabled {
+            background-color: $quantity-input-button-disabled-bg;
+            border-color: $quantity-input-button-border-disabled-color;
+            cursor: default;
+        }
+
+        &:not(:disabled):hover,
+        &:not(:disabled):focus-visible {
+            border-color: $quantity-input-button-border-active-color;
+        }
+
+        &_minus {
+            border-bottom-left-radius: $quantity-input-radius;
+            border-top-left-radius: $quantity-input-radius;
+
+            #{$b}_medium & {
+                @media (--tablet-landscape-up) {
+                    border-bottom-left-radius: $quantity-input-medium-radius;
+                    border-top-left-radius: $quantity-input-medium-radius;
+                }
+            }
+
+            #{$b}_big & {
+                border-bottom-left-radius: $quantity-input-big-radius;
+                border-top-left-radius: $quantity-input-big-radius;
+            }
+        }
+
+        &_plus {
+            border-bottom-right-radius: $quantity-input-radius;
+            border-top-right-radius: $quantity-input-radius;
+
+            #{$b}_medium & {
+                @media (--tablet-landscape-up) {
+                    border-bottom-right-radius: $quantity-input-medium-radius;
+                    border-top-right-radius: $quantity-input-medium-radius;
+                }
+            }
+
+            #{$b}_big & {
+                border-bottom-right-radius: $quantity-input-big-radius;
+                border-top-right-radius: $quantity-input-big-radius;
+            }
+        }
+
+        #{$b}_medium & {
+            @media (--tablet-landscape-up) {
+                height: 4px * 12;
+                width: 4px * 10;
+            }
+        }
+
+        #{$b}_big & {
+            height: 4px * 12;
+            width: 4px * 16;
+        }
+    }
+
+    &__icon {
+        fill: currentcolor;
+        height: 4px * 2;
+        width: 4px * 2;
+
+        #{$b}_medium & {
+            @media (--tablet-landscape-up) {
+                height: 4px * 3;
+                width: 4px * 3;
+            }
+        }
+
+        #{$b}_medium #{$b}__button_minus & {
+            @media (--tablet-landscape-up) {
+                margin-left: 2px;
+            }
+        }
+
+        #{$b}_medium #{$b}__button_plus & {
+            @media (--tablet-landscape-up) {
+                margin-right: 2px;
+            }
+        }
+
+        #{$b}_big & {
+            height: 4px * 3;
+            width: 4px * 3;
+        }
+
+        #{$b}_big #{$b}__button_minus & {
+            margin-left: 4px;
+        }
+
+        #{$b}_big #{$b}__button_plus & {
+            margin-right: 4px;
+        }
+    }
+
+    &__input {
+        appearance: none;
+        background-color: $quantity-input-bg;
+        border-bottom: $quantity-input-border-width solid $quantity-input-border-color;
+        border-left-style: none;
+        border-radius: 0;
+        border-right-style: none;
+        border-top: $quantity-input-border-width solid $quantity-input-border-color;
+        color: $quantity-input-color;
+        flex-grow: 1;
+        flex-shrink: 1;
+        height: 4px * 10;
+        text-align: center;
+        transition-duration: var(--duration-micro-s);
+        transition-property: border-color, color;
+        transition-timing-function: var(--easing-standard);
+        width: 0%; /* Иначе в Firefox не уменьшается (например, в блоке "Комплектации" на странице товара) */
+
+        @include font($quantity-input-font);
+
+        @media (--tablet-landscape-up) {
+            appearance: textfield;
+        }
+
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            @media (--tablet-landscape-up) {
+                appearance: none;
+            }
+        }
+
+        &:disabled {
+            border-color: $quantity-input-disabled-border-color;
+            color: $quantity-input-disabled-color;
+        }
+
+        &:not(:disabled):focus-visible {
+            border-color: $quantity-input-disabled-focus-visible-border-color;
+        }
+
+        #{$b}_medium & {
+            @media (--tablet-landscape-up) {
+                height: 4px * 12;
+
+                @include font($quantity-input-medium-font);
+            }
+        }
+
+        #{$b}_big & {
+            height: 4px * 12;
+
+            @include font($quantity-input-big-font);
+        }
+    }
+}

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

@@ -0,0 +1,141 @@
+<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 = (value) => {
+    if (auth.value) {
+        showDialog(document.querySelector(auth.value));
+    } else {
+        if (value === '') {
+            quantity.value = value;
+            value = min.value;
+        } else {
+            quantity.value = Number(value);
+            if (quantity.value < min.value) {
+                value = min.value;
+                quantity.value = min.value;
+            } else if (quantity.value > max.value) {
+                value = max.value;
+                quantity.value = max.value;
+            } else {
+                value = quantity.value;
+            }
+        }
+        if (!concurrent.value) {
+            focus.value = true;
+            emit('disableOthers');
+        }
+        clearTimeout(throttleTimeout);
+        throttleTimeout = setTimeout(() => {
+            emit('input', value);
+        }, throttle.value);
+    }
+};
+
+const update = () => {
+    quantity.value = value.value;
+    if (!concurrent.value) {
+        focus.value = false;
+        emit('enableOthers');
+    }
+};
+
+defineExpose({
+    update,
+});
+</script>

package/src/components/radio/index.scss

@@ -0,0 +1,80 @@
+@use '../../variables' as *;
+
+$b: '.radio';
+
+#{$b} {
+    align-items: baseline;
+    display: inline-flex;
+
+    &__input {
+        align-items: center;
+        background-color: $radio-bg;
+        border: $radio-border-width solid $radio-border-color;
+        border-radius: 50%;
+        cursor: pointer;
+        display: flex;
+        flex-shrink: 0;
+        height: $radio-size;
+        justify-content: center;
+        top: 2px;
+        transition-duration: var(--duration-micro-s);
+        transition-property: background-color, border-color;
+        transition-timing-function: var(--easing-standard);
+        width: $radio-size;
+
+        &::before {
+            background-color: $radio-dot-color;
+            border-radius: 50%;
+            content: '';
+            height: 100%;
+            transform: scale(0);
+            transition-duration: var(--duration-micro-s);
+            transition-property: opacity, transform;
+            transition-timing-function: var(--easing-acceleration);
+            width: 100%;
+        }
+
+        :focus-visible + & {
+            background-color: $radio-active-bg;
+            border-color: $radio-active-border-color;
+        }
+
+        :disabled + & {
+            background-color: $radio-disabled-bg;
+            border-color: $radio-disabled-border-color;
+            cursor: default;
+        }
+
+        :checked + &::before {
+            transform: scale(0.5);
+            transition-timing-function: var(--easing-deceleration);
+        }
+
+        :checked:disabled + &::before {
+            opacity: 0.5;
+        }
+    }
+
+    &__label {
+        color: $radio-label-color;
+        cursor: pointer;
+        display: flex;
+        flex-basis: 100%;
+        flex-direction: column;
+        margin-left: 4px * 2;
+        transition-duration: var(--duration-micro-s);
+        transition-property: color;
+        transition-timing-function: var(--easing-standard);
+
+        @include font($radio-label-font);
+
+        :checked ~ & {
+            cursor: default;
+        }
+
+        :disabled ~ & {
+            color: $radio-disabled-label-color;
+            cursor: default;
+        }
+    }
+}

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

@@ -0,0 +1,79 @@
+@use 'sass:color';
+@use '../../variables' as *;
+
+$b: '.radio-list';
+
+#{$b} {
+    display: flex;
+
+    &__item {
+    }
+
+    &__item-label {
+        align-items: center;
+        background-color: $radio-list-bg;
+        border: $radio-list-border-width solid $radio-list-border-color;
+        color: $radio-list-color;
+        cursor: pointer;
+        display: flex;
+        height: 4px * 10;
+        justify-content: center;
+        padding-left: 4px * 4;
+        padding-right: 4px * 4;
+        text-align: center;
+        text-decoration: none;
+        transition-duration: var(--duration-micro-s);
+        transition-property: background-color, border-color, color;
+        transition-timing-function: var(--easing-standard);
+        user-select: none;
+        white-space: nowrap;
+
+        @include font($radio-list-font);
+
+        #{$b}__item:first-child & {
+            border-bottom-left-radius: $radio-list-radius;
+            border-top-left-radius: $radio-list-radius;
+        }
+
+        #{$b}__item:last-child & {
+            border-bottom-right-radius: $radio-list-radius;
+            border-top-right-radius: $radio-list-radius;
+        }
+
+        #{$b}__item:not(:last-child) & {
+            border-right-style: none;
+        }
+
+        &:hover,
+        &:focus-visible {
+            background-color: $radio-list-active-bg;
+            border-color: $radio-list-active-border-color;
+            color: $radio-list-active-color;
+        }
+
+        :disabled + & {
+            background-color: $radio-list-disabled-bg;
+            border-color: $radio-list-disabled-border-color;
+            color: $radio-list-disabled-color;
+            cursor: default;
+        }
+
+        :checked + & {
+            background-color: $radio-list-selected-bg;
+            border-color: $radio-list-selected-border-color;
+            color: $radio-list-selected-color;
+            cursor: default;
+        }
+
+        :checked:disabled + & {
+            background-color: $radio-list-selected-disabled-bg;
+            color: $radio-list-selected-disabled-color;
+
+            @if color.alpha($button-disabled-bg) == 1 {
+                border-color: $radio-list-selected-disabled-border-color;
+            } @else {
+                border-color: transparent;
+            }
+        }
+    }
+}