itube-specs 0.0.934 → 0.0.935
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -16,9 +16,10 @@
|
|
|
16
16
|
class="ui-chips-micro__list"
|
|
17
17
|
>
|
|
18
18
|
<UiChips
|
|
19
|
-
v-for="item in tags"
|
|
19
|
+
v-for="(item, index) in tags"
|
|
20
20
|
:key="item.title"
|
|
21
21
|
:item="item"
|
|
22
|
+
:class="{'--beyond-line': isOverflow && index >= visibleCount}"
|
|
22
23
|
class="ui-chips-micro__item"
|
|
23
24
|
micro
|
|
24
25
|
is-link
|
|
@@ -108,6 +109,9 @@ const moreLabel = computed(() => props.label ?? t('show_all'));
|
|
|
108
109
|
|
|
109
110
|
const GAP = 8;
|
|
110
111
|
|
|
112
|
+
/** Ширина кнопки «+N», держать в согласии с $more-width в стилях */
|
|
113
|
+
const MORE_WIDTH = 44;
|
|
114
|
+
|
|
111
115
|
const isOverflow = ref(false);
|
|
112
116
|
const moreLeft = ref(0);
|
|
113
117
|
const visibleCount = ref(0);
|
|
@@ -133,16 +137,22 @@ function measure() {
|
|
|
133
137
|
const chips = Array.from(el.children) as HTMLElement[];
|
|
134
138
|
const firstLineTop = chips[ 0 ]?.offsetTop ?? 0;
|
|
135
139
|
|
|
136
|
-
let lastInLine = chips[ 0 ];
|
|
137
140
|
let count = 0;
|
|
138
141
|
for (const chip of chips) {
|
|
139
142
|
if (chip.offsetTop !== firstLineTop) break;
|
|
140
|
-
lastInLine = chip;
|
|
141
143
|
count += 1;
|
|
142
144
|
}
|
|
143
145
|
|
|
146
|
+
// Зазор после последней плашки бывает уже кнопки — тогда кнопка наползла бы на плашку, а короткую
|
|
147
|
+
// накрыла бы целиком, и та пропала бы совсем: в счётчик не попала, в панель тоже. Отдаём её в панель.
|
|
148
|
+
const rowEnd = (index: number) => chips[ index ].offsetLeft + chips[ index ].offsetWidth + GAP;
|
|
149
|
+
|
|
150
|
+
while (count > 1 && rowEnd(count - 1) + MORE_WIDTH > el.clientWidth) {
|
|
151
|
+
count -= 1;
|
|
152
|
+
}
|
|
153
|
+
|
|
144
154
|
visibleCount.value = count;
|
|
145
|
-
moreLeft.value =
|
|
155
|
+
moreLeft.value = count > 0 ? rowEnd(count - 1) : 0;
|
|
146
156
|
}
|
|
147
157
|
|
|
148
158
|
useChipsOverflow(listRef, measure);
|
|
@@ -226,6 +236,12 @@ $more-width: 44px;
|
|
|
226
236
|
flex-shrink: 0;
|
|
227
237
|
}
|
|
228
238
|
|
|
239
|
+
/* Плашка, отданная в панель, но физически стоящая в первой строке. Гасим через visibility, а не
|
|
240
|
+
display: она обязана сохранить своё место — иначе следующие подтянутся и замер уедет по кругу. */
|
|
241
|
+
.ui-chips-micro__item.--beyond-line {
|
|
242
|
+
visibility: hidden;
|
|
243
|
+
}
|
|
244
|
+
|
|
229
245
|
.ui-chips-micro__more {
|
|
230
246
|
@include font-xs;
|
|
231
247
|
|