@formixru/b2b-ui 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## v1.5.1
+
+- Переработан FontInput - теперь вместо названий переменных для font-size/line-height он возвращает их значения
+
 ## v1.5.0
 
 - Для AJAX-форм добавлена поддержка поля `trigger`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "1.5.0",
+    "version": "1.5.1",
     "type": "module",
     "repository": {
         "type": "git",

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

@@ -26,23 +26,18 @@
                 <span class="font-input__label">Размер</span>
                 <select v-model="font['font-size']" class="font-input__select select" @change="setFont()">
                     <option value=""></option>
-                    <option value="$font-size-3xs">8</option>
-                    <option value="$font-size-2xs">10</option>
-                    <option value="$font-size-xs">12</option>
-                    <option value="$font-size-s">14</option>
-                    <option value="$font-size">16</option>
-                    <option value="$font-size-l">20</option>
-                    <option value="$font-size-xl">24</option>
-                    <option value="$font-size-2xl">28</option>
+                    <option v-for="(fontSizeValue, key) in fontSizeMap" :key="key" :value="fontSizeValue">
+                        {{ fontSizeValue.replace('px', '') }}
+                    </option>
                 </select>
             </label>
             <label class="font-input__item">
                 <span class="font-input__label">Интерлиньяж</span>
                 <select v-model="font['line-height']" class="font-input__select select" @change="setFont()">
                     <option value=""></option>
-                    <option value="$line-height-s">1.2</option>
-                    <option value="$line-height">1.4</option>
-                    <option value="$line-height-l">1.6</option>
+                    <option v-for="(lineHeightValue, key) in lineHeightMap" :key="key" :value="lineHeightValue">
+                        {{ lineHeightValue }}
+                    </option>
                 </select>
             </label>
         </div>
@@ -88,17 +83,43 @@ const visibleFontIndex = ref(0);
 const $root = ref();
 const $input = ref();
 
+const fontSizeMap = {
+    '$font-size-3xs': '8px',
+    '$font-size-2xs': '10px',
+    '$font-size-xs': '12px',
+    '$font-size-s': '14px',
+    '$font-size': '16px',
+    '$font-size-l': '20px',
+    '$font-size-xl': '24px',
+    '$font-size-2xl': '28px',
+};
+
+const lineHeightMap = {
+    '$line-height-s': 1.2,
+    '$line-height': 1.4,
+    '$line-height-l': 1.6,
+};
+
 const parseFont = () => {
     for (const [index, font] of currentFont.value.split(/, ?(?=\()/).entries()) {
         const parsed = font.match(/'([\dA-Za-z-]+)': (\$?[\dA-Za-z-]+)/g) || [];
         for (let item of parsed) {
             item = item.replaceAll(/'| /g, '').split(':');
-            parsedFont.value[index][item[0]] = item[1];
+            let value = item[1];
+
+            // Преобразуем переменные в значения
+            if (item[0] === 'font-size' && fontSizeMap[value]) {
+                value = fontSizeMap[value];
+            } else if (item[0] === 'line-height' && lineHeightMap[value]) {
+                value = lineHeightMap[value];
+            }
+
+            parsedFont.value[index][item[0]] = value;
         }
     }
 };
 
-const setFont = () => {
+const setFont = async () => {
     currentFont.value = parsedFont.value
         .map((font) => {
             font = Object.entries(font)
@@ -112,10 +133,9 @@ const setFont = () => {
             return `(${font.join(', ')})`;
         })
         .join(',');
-    nextTick(() => {
-        $input.value.dispatchEvent(new Event('change', { bubbles: true }));
-        emit('input', currentFont.value);
-    });
+    await nextTick();
+    $input.value.dispatchEvent(new Event('change', { bubbles: true }));
+    emit('input', currentFont.value);
 };
 
 watch(value, (newValue) => {

package/src/variables.scss

@@ -288,6 +288,8 @@ $font-color-error: $color-error !default;
 
 $font-family: 'PT Sans', system-ui !default;
 
+// При изменении значений $font-size/$line-height их так же нужно поменять в FontInput
+
 $font-size: 16px !default;
 $font-size-3xs: 8px !default; // Надо будет избавиться от этого размера
 $font-size-2xs: 10px !default;