itube-specs 0.0.874 → 0.0.876

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/profile/delete.vue

@@ -8,8 +8,41 @@
       wide
       size="l"
       theme="warning"
-      @click="deleteProfile"
+      @click="isConfirmOpen = true"
     >{{ t('profile.delete_profile') }}</UiBtn>
+
+    <transition mode="out-in">
+      <UiPopup
+        v-if="isConfirmOpen"
+        v-model="isConfirmOpen"
+        sheet
+      >
+        <template #title>{{ $t('profile.delete_profile') }}</template>
+
+        <p class="profile-delete__confirm">{{ $t('confirm_delete_profile') }}</p>
+
+        <template #footer>
+          <div class="profile-delete__buttons">
+            <UiBtn
+              :disabled="loading"
+              wide
+              size="l"
+              theme="secondary"
+              @click="isConfirmOpen = false"
+            >{{ $t('cancel') }}
+            </UiBtn>
+            <UiBtn
+              :disabled="loading"
+              wide
+              size="l"
+              theme="warning"
+              @click="deleteProfile"
+            >{{ $t('yes') }}
+            </UiBtn>
+          </div>
+        </template>
+      </UiPopup>
+    </transition>
   </div>
 </template>
 
@@ -21,12 +54,14 @@ const { signOut } = useUser(AuthorizationApiService);
 const { showSuccess } = useSnackbar();
 
 const loading = ref(false);
+const isConfirmOpen = ref(false);
 
 async function deleteProfile() {
   try {
     loading.value = true;
     await AuthorizationApiService.deleteProfile();
-    showSuccess(t('snackbar.profile_deleted'));
+    isConfirmOpen.value = false;
+    showSuccess('profile_deleted');
     signOut();
   } catch (err) {
     console.log(err, 'error delete profile');
@@ -59,4 +94,20 @@ async function deleteProfile() {
 .profile-delete__button {
   height: 50px;
 }
+
+.profile-delete__confirm {
+  @include font-sm;
+
+  text-align: center;
+  max-width: 400px;
+}
+
+.profile-delete__buttons {
+  display: grid;
+  gap: 8px;
+
+  @include from-br(sm) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
 </style>

package/components/profile/setup.vue

@@ -196,7 +196,7 @@ async function deleteAvatar() {
     form.value.avatar = '';
     await getProfile(true);
     avatarPreview.value = '';
-    showSuccess(t('snackbar.avatar_deleted'));
+    showSuccess('avatar_deleted');
   } finally {
     deletingAvatar.value = false;
   }

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.876",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/pages/user/profile.vue

@@ -108,16 +108,6 @@ const items = computed<Array<IDataItem>>(() => {
       text: data.value.gender?.title ?? '',
       icon: 'double-user'
     },
-    {
-      title: t('profile.gender'),
-      text: data.value.gender?.title ?? '',
-      icon: 'double-user'
-    },
-    {
-      title: t('profile.gender'),
-      text: data.value.gender?.title ?? '',
-      icon: 'double-user'
-    },
   ];
 });