itube-specs 0.0.874 → 0.0.875

package/components/auth/register.vue

@@ -26,8 +26,8 @@
       <UiInput
         ref="usernameRef"
         v-model="form.username"
-        :label="t('login')"
-        :placeholder="t('login')"
+        :label="t('auth.username')"
+        :placeholder="t('auth.username')"
         hide-label
         :error="error.username"
         name="login-name"

package/components/ui/expand-row.vue

@@ -9,6 +9,7 @@
     class="ui-expand-row"
   >
     <div
+      ref="wrapperRef"
       :class="[{ '--more-show': isElementsOverflow }]"
       class="ui-expand-row__wrapper"
     >
@@ -20,8 +21,8 @@
       </slot>
       <slot>
         <UiChips
-          v-for="item in itemsResult"
-          :key="item.title"
+          v-for="(item, index) in items"
+          :key="`${index}-${item.title}`"
           :item="item"
           :alphabet="alphabet"
           is-link
@@ -51,19 +52,14 @@
 <script setup lang="ts">
 import type { IChipsItem } from '../../types';
 
-const props = withDefaults(
-    defineProps<{
-      items?: IChipsItem[];
-      alphabet?: boolean;
-      hideMore?: boolean;
-      mini?: boolean;
-      mobileExpand?: boolean;
-      maximumButtons?: number;
-      preText?: string;
-    }>(), {
-      maximumButtons: 20, // вычислено на глаз, приблизительно
-    }
-);
+defineProps<{
+  items?: IChipsItem[];
+  alphabet?: boolean;
+  hideMore?: boolean;
+  mini?: boolean;
+  mobileExpand?: boolean;
+  preText?: string;
+}>();
 
 const { t } = useI18n();
 
@@ -71,28 +67,52 @@ const emit = defineEmits<{
   (eventName: 'more', eventValue: boolean): void
 }>();
 
-const containerRef = ref();
+const containerRef = ref<HTMLElement>();
 
-const isExpandOpened = ref(false);
+const wrapperRef = ref<HTMLElement>();
 
-const itemsResult = computed(() => {
-  return props.items?.slice(
-      0,
-      !props.alphabet && !isExpandOpened.value
-          ? props.maximumButtons
-          : props.items.length,
-  );
-});
+const isExpandOpened = ref(false);
 
 const moreButtonName = computed(() => isExpandOpened.value ? t('less') : t('more'));
 
 const isElementsOverflow = ref(false);
 
+/**
+ * Обрезку делает CSS (`max-height: var(--chips-height)` + `overflow: hidden`), здесь только
+ * определяем, вылез ли контент за одну строку, — от этого зависит кнопка «еще».
+ */
 function checkIsElementOverflow() {
-  isElementsOverflow.value = !!(
-      containerRef.value &&
-      containerRef.value.scrollHeight > containerRef.value.clientHeight
-  );
+  // в раскрытом виде контейнер тянется под контент, замер дал бы ложное «переполнения нет»
+  if (!containerRef.value || isExpandOpened.value) {
+    return;
+  }
+
+  isElementsOverflow.value = containerRef.value.scrollHeight > containerRef.value.clientHeight;
+}
+
+/**
+ * Обрезанные строки остаются в разметке (нужны краулеру), но не должны ловить таб-фокус
+ * и попадать в дерево доступности — гасим их через `inert`.
+ */
+function updateHiddenItemsInertness() {
+  if (!containerRef.value || !wrapperRef.value) {
+    return;
+  }
+
+  const visibleHeight = containerRef.value.clientHeight;
+
+  for (const child of Array.from(wrapperRef.value.children) as HTMLElement[]) {
+    if (child.classList.contains('ui-expand-row__more-wrapper')) {
+      continue;
+    }
+
+    child.inert = !isExpandOpened.value && child.offsetTop + child.offsetHeight > visibleHeight + 1;
+  }
+}
+
+function measure() {
+  checkIsElementOverflow();
+  updateHiddenItemsInertness();
 }
 
 function onMoreClick() {
@@ -100,18 +120,23 @@ function onMoreClick() {
   emit('more', isExpandOpened.value);
 }
 
-onMounted(() => {
-  requestAnimationFrame(() => checkIsElementOverflow());
-});
+watch(isExpandOpened, () => nextTick(updateHiddenItemsInertness));
+
+let resizeObserver: ResizeObserver | null = null;
 
-let checkTimer: ReturnType<typeof setTimeout> | null = null;
+onMounted(() => {
+  if (!wrapperRef.value) {
+    return;
+  }
 
-watch(() => useRoute().query, () => {
-  checkTimer = setTimeout(() => checkIsElementOverflow(), 100);
+  // следим за внутренней обёрткой: её высота меняется и от ресайза, и от смены набора чипсов
+  resizeObserver = new ResizeObserver(() => measure());
+  resizeObserver.observe(wrapperRef.value);
 });
 
 onBeforeUnmount(() => {
-  if (checkTimer) clearTimeout(checkTimer);
+  resizeObserver?.disconnect();
+  resizeObserver = null;
 });
 </script>
 

package/package.json

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