itube-specs 0.0.933 → 0.0.935

package/components/ui/chips-micro.vue

@@ -16,9 +16,10 @@
       class="ui-chips-micro__list"
     >
       <UiChips
-        v-for="item in tags"
+        v-for="(item, index) in tags"
         :key="item.title"
         :item="item"
+        :class="{'--beyond-line': isOverflow && index >= visibleCount}"
         class="ui-chips-micro__item"
         micro
         is-link
@@ -108,6 +109,9 @@ const moreLabel = computed(() => props.label ?? t('show_all'));
 
 const GAP = 8;
 
+/** Ширина кнопки «+N», держать в согласии с $more-width в стилях */
+const MORE_WIDTH = 44;
+
 const isOverflow = ref(false);
 const moreLeft = ref(0);
 const visibleCount = ref(0);
@@ -133,16 +137,22 @@ function measure() {
   const chips = Array.from(el.children) as HTMLElement[];
   const firstLineTop = chips[ 0 ]?.offsetTop ?? 0;
 
-  let lastInLine = chips[ 0 ];
   let count = 0;
   for (const chip of chips) {
     if (chip.offsetTop !== firstLineTop) break;
-    lastInLine = chip;
     count += 1;
   }
 
+  // Зазор после последней плашки бывает уже кнопки — тогда кнопка наползла бы на плашку, а короткую
+  // накрыла бы целиком, и та пропала бы совсем: в счётчик не попала, в панель тоже. Отдаём её в панель.
+  const rowEnd = (index: number) => chips[ index ].offsetLeft + chips[ index ].offsetWidth + GAP;
+
+  while (count > 1 && rowEnd(count - 1) + MORE_WIDTH > el.clientWidth) {
+    count -= 1;
+  }
+
   visibleCount.value = count;
-  moreLeft.value = lastInLine ? lastInLine.offsetLeft + lastInLine.offsetWidth + GAP : 0;
+  moreLeft.value = count > 0 ? rowEnd(count - 1) : 0;
 }
 
 useChipsOverflow(listRef, measure);
@@ -155,7 +165,7 @@ onClickOutside(rootRef, () => {
 <style lang="scss">
 $fade-width: 40px;
 
-// Резерв под кнопку «+N» в конце строки: 20px паддингов плюс место на «+» и две цифры
+// Ширина кнопки «+N» под ограничитель позиции: 20px паддингов плюс место на «+» и две цифры
 $more-width: 44px;
 
 @property --ui-chips-micro-fade-start {
@@ -208,12 +218,12 @@ $more-width: 44px;
   scrollbar-width: none;
 
   /* Десктоп: не скролл, а перенос, обрезанный по первой строке. Обрезка через overflow: hidden —
-     контейнер не прокручиваемый, колесо мыши не перехватывает. Место справа под «+» даёт паддинг. */
+     контейнер не прокручиваемый, колесо мыши не перехватывает. Места под «+N» не резервируем:
+     паддинг сужал бы строку и сам гнал бы на перенос плашку, которая иначе влезала. */
   @include from-br(sm) {
     flex-wrap: wrap;
     align-content: flex-start;
     max-height: var(--chips-height-micro);
-    padding-right: $more-width;
     overflow: hidden;
   }
 
@@ -226,12 +236,21 @@ $more-width: 44px;
   flex-shrink: 0;
 }
 
+/* Плашка, отданная в панель, но физически стоящая в первой строке. Гасим через visibility, а не
+   display: она обязана сохранить своё место — иначе следующие подтянутся и замер уедет по кругу. */
+.ui-chips-micro__item.--beyond-line {
+  visibility: hidden;
+}
+
 .ui-chips-micro__more {
   @include font-xs;
 
   position: absolute;
   inset-block: 0;
-  left: var(--ui-chips-micro-more-left, 0);
+
+  /* Кнопка встаёт в зазор после последней влезшей плашки. Зазор бывает уже кнопки — тогда
+     упираем её в правый край, край последней плашки уходит под неё. */
+  left: min(var(--ui-chips-micro-more-left, 0px), 100% - #{$more-width});
   z-index: $z-index-dropdown;
   display: grid;
   place-content: center;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.933",
+  "version": "0.0.935",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {