@formixru/b2b-ui 3.0.1 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "3.0.1",
+    "version": "3.0.3",
     "type": "module",
     "repository": {
         "type": "git",
@@ -36,6 +36,7 @@
         "@storybook/vue3-vite": "^10.2.0",
         "@vitejs/plugin-vue": "^6.0.3",
         "@vueless/storybook-dark-mode": "^10.0.6",
+        "browserslist": "^4.28.1",
         "color": "^5.0.3",
         "dayjs": "^1.11.19",
         "es-toolkit": "^1.44.0",
@@ -84,13 +85,14 @@
         "./components/*/scss": "./src/components/*/index.scss",
         "./components/*/vue": "./src/components/*/index.vue",
         "./components/*": "./src/components/*/index.js",
-        "./helpers/*": "./src/helpers/*.js",
+        "./utils/*": "./src/utils/*.js",
         "./base": "./src/base.scss",
         "./variables": "./src/variables.scss"
     },
     "files": [
         "src/**/*.scss",
-        "src/**/*.js"
+        "src/**/*.js",
+        "src/**/*.vue"
     ],
     "msw": {
         "workerDirectory": [

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

@@ -0,0 +1,155 @@
+<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 '../../utils/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 getHexColor = (color) => {
+    if (color.charAt(0) === '$') {
+        const colorValue = cssVar(color.replace('$', '--'));
+        return Color(colorValue).hex().toLowerCase();
+    }
+    return color;
+};
+
+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 getActiveBorderColor = (color) => {
+    const colorHex = getHexColor(color);
+    // https://www.w3.org/TR/WCAG21/#contrast-minimum
+    if (Color(colorHex).contrast(Color('#ffffff')) >= 3) {
+        return colorHex;
+    }
+    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

@@ -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 dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat.js';
+import { isString } from 'es-toolkit';
+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 && isString(value)) {
+            const arrValue = value.split(',');
+            date.value = {
+                start: arrValue[0],
+                end: arrValue[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>