@formixru/b2b-ui 1.0.0

package/src/components/checkbox/index.scss

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

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

@@ -0,0 +1,88 @@
+@use '../../variables' as *;
+
+$b: '.color-input';
+
+#{$b} {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 4px * -1;
+
+    &__color {
+        align-items: center;
+        border: $color-input-border-width solid $color-input-border-color;
+        border-radius: $color-input-radius;
+        cursor: pointer;
+        display: flex;
+        height: 4px * 9;
+        justify-content: center;
+        margin: 4px;
+        transition-duration: var(--duration-micro-s);
+        transition-property: border-color;
+        transition-timing-function: var(--easing-standard);
+        width: 4px * 9;
+
+        &_active {
+            border-color: $color-input-active-border-color;
+            cursor: default;
+        }
+    }
+
+    &__example {
+        align-items: center;
+        border-radius: $color-input-radius;
+        display: flex;
+        height: 4px * 7;
+        justify-content: center;
+        position: relative;
+        transition-duration: var(--duration-micro-s);
+        transition-property: background-color;
+        transition-timing-function: var(--easing-standard);
+        width: 4px * 7;
+
+        &_transparent {
+            background-image: linear-gradient(45deg, $color-grey-80 25%, transparent 25%),
+                linear-gradient(-45deg, $color-grey-80 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, $color-grey-80 75%),
+                linear-gradient(-45deg, transparent 75%, $color-grey-80 75%);
+            background-position:
+                0 0,
+                0 5px,
+                5px -5px,
+                -5px 0;
+            background-size: 10px 10px;
+        }
+
+        &_autocolor {
+            background-image: linear-gradient(90deg, $color-white 50%, $color-grey 50%);
+        }
+    }
+
+    &__icon {
+        height: 4px * 3;
+        position: absolute;
+        transition-duration: var(--duration-micro-s);
+        transition-property: fill;
+        transition-timing-function: var(--easing-standard);
+        width: 4px * 3;
+
+        &_dark {
+            fill: $color-input-icon-dark-color;
+        }
+
+        &_light {
+            fill: $color-input-icon-light-color;
+        }
+
+        #{$b}__example_autocolor & {
+            &:first-child {
+                clip: rect(auto, 6px, auto, auto);
+                fill: $color-input-icon-dark-color;
+            }
+
+            &:last-child {
+                clip: rect(auto, auto, auto, 6px);
+                fill: $color-input-icon-light-color;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,156 @@
+<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';
+
+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) === '$') {
+        const $div = document.createElement('div');
+        $div.classList.add(color.replace('$', 'theme-'));
+        document.body.append($div);
+        color = getComputedStyle($div).backgroundColor;
+        $div.remove();
+        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.scss

@@ -0,0 +1,126 @@
+@use 'sass:color';
+@use '../../variables' as *;
+
+$b: '.date-input';
+
+#{$b} {
+    position: relative;
+
+    &__input {
+        width: 100%;
+
+        &.input {
+            padding-left: $input-padding-x + $date-input-icon-size + 4px * 2;
+        }
+
+        &.input_small {
+            padding-left: $input-small-padding-x + $date-input-small-icon-size + 4px * 2;
+        }
+    }
+
+    &__icon {
+        fill: $date-input-icon-color;
+        height: $date-input-icon-size;
+        left: $input-padding-x;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        transition-duration: var(--duration-micro-s);
+        transition-property: fill;
+        transition-timing-function: var(--easing-standard);
+        width: $date-input-icon-size;
+
+        #{$b}__input:disabled ~ & {
+            fill: $date-input-disabled-icon-color;
+        }
+
+        .input_small ~ & {
+            height: $date-input-small-icon-size;
+            left: $input-small-padding-x;
+            width: $date-input-small-icon-size;
+        }
+    }
+
+    &__solid {
+        &_bg {
+            background-color: $date-input-solid-bg !important;
+        }
+
+        &_color {
+            color: $date-input-solid-color !important;
+        }
+    }
+
+    &__light {
+        &_bg {
+            background-color: $date-input-light-bg !important;
+        }
+
+        &_color {
+            color: $date-input-light-color !important;
+        }
+    }
+
+    &__outline {
+        &_bg {
+            background-color: $date-input-outline-bg !important;
+            border-color: $date-input-outline-border-color !important;
+        }
+
+        &_color {
+            color: $date-input-outline-color !important;
+        }
+    }
+
+    .vc-container {
+        background-color: $date-input-bg;
+        border: none;
+        border-radius: $date-input-radius;
+        box-shadow: $date-input-shadow !important;
+
+        .is-dark-mode & {
+            @include dark-border($width: 1px);
+        }
+
+        .vc-container {
+            border: none !important;
+            box-shadow: none !important;
+        }
+    }
+
+    .vc-arrow {
+        color: $date-input-arrow-color;
+
+        &:hover,
+        &:focus {
+            background-color: $date-input-arrow-active-bg;
+        }
+    }
+
+    .vc-title {
+        color: $date-input-title-color !important;
+    }
+
+    .vc-weekday {
+        color: $date-input-weekday-color !important;
+    }
+
+    .vc-day-content {
+        color: $date-input-color;
+
+        &:hover,
+        &:focus {
+            background-color: color.change($date-input-solid-bg, $alpha: 0.1) !important;
+        }
+
+        &.is-disabled {
+            color: $date-input-disabled-color !important;
+
+            &:hover,
+            &:focus {
+                background-color: transparent !important;
+                cursor: default !important;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,240 @@
+<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>