adata-ui 2.1.41-beta.15 → 2.1.41-beta.17

package/components/elements/empty-box/empty-box-V2.vue

@@ -51,9 +51,9 @@ defineProps<Props>()
 
     <!-- текст -->
     <div class="flex flex-col items-center gap-2">
-      <h3 class=" text-primary">
+      <p class=" text-primary text-body-lg">
         {{ title }}
-      </h3>
+      </p>
 
       <p
         v-if="subtitle"

package/components/features/lang-switcher/lang-switcher.vue

@@ -105,22 +105,24 @@ function onSelect(loc: LocaleItem) {
             role="option"
             :aria-selected="localeCode(loc) === locale"
           >
+            <!-- Текущий язык — не ссылка: якорь на саму страницу краулеры считают циклической ссылкой -->
+            <span
+              v-if="localeCode(loc) === locale"
+              :data-test-id="`header-switch-${localeCode(loc)}-language-button${testIdSuffix}`"
+              class="flex w-full items-center justify-between gap-3 rounded-md bg-brand-subtle px-3 py-2 text-body-md font-medium text-brand"
+              @click="isOpen = false"
+            >
+              <span>{{ t(`lang.${localeCode(loc)}.long`) }}</span>
+              <check class="size-4 shrink-0 text-brand" />
+            </span>
             <nuxt-link
+              v-else
               :data-test-id="`header-switch-${localeCode(loc)}-language-button${testIdSuffix}`"
               :to="switchLocalePath(localeCode(loc))"
-              class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-body-md transition-colors duration-100"
-              :class="[
-                localeCode(loc) === locale
-                  ? 'bg-brand-subtle font-medium text-brand'
-                  : 'text-quaternary hover:bg-action-secondary-hover',
-              ]"
+              class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-body-md text-quaternary transition-colors duration-100 hover:bg-action-secondary-hover"
               @click.prevent="onSelect(loc)"
             >
               <span>{{ t(`lang.${localeCode(loc)}.long`) }}</span>
-              <check
-                v-if="localeCode(loc) === locale"
-                class="size-4 shrink-0 text-brand"
-              />
             </nuxt-link>
           </li>
         </ul>

package/components/modals/id/IdLoginModal.vue

@@ -253,6 +253,7 @@ function onForgotPassword() {
           size="lg"
           autocomplete="email"
           :start-icon="AIconMail"
+          start-icon-class="size-4 text-icon-secondary"
           :placeholder="t('modals.id.login.placeholders.email')"
           :error="getError('username')"
           data-test-id="login-form-email-input"
@@ -268,6 +269,7 @@ function onForgotPassword() {
           :input-id="passwordFieldId"
           size="lg"
           :start-icon="AIconLock"
+          start-icon-class="size-4 text-icon-secondary"
           :placeholder="t('modals.id.login.placeholders.password')"
           :error="getError('password')"
           data-test-id="login-form-password-input"

package/components/modals/id/IdNewPasswordModal.vue

@@ -116,6 +116,7 @@ async function onSubmit() {
           size="lg"
           autocomplete="new-password"
           :start-icon="AIconLock"
+          start-icon-class="size-4 text-icon-secondary"
           :placeholder="t('modals.id.newPassword.placeholder.1')"
           :error="getError('password')"
         />
@@ -133,6 +134,7 @@ async function onSubmit() {
           size="lg"
           autocomplete="new-password"
           :start-icon="AIconLock"
+          start-icon-class="size-4 text-icon-secondary"
           :placeholder="t('modals.id.newPassword.placeholder.2')"
           :error="getError('password_confirmation')"
         />

package/components/modals/id/IdRecoveryModal.vue

@@ -97,6 +97,7 @@ watch(recoveryModal, (value) => {
         size="lg"
         autocomplete="email"
         :start-icon="AIconMail"
+        start-icon-class="size-4 text-icon-secondary"
         :placeholder="t('modals.id.recovery.placeholder')"
         :error="getError('emailField')"
       />

package/components/modals/id/IdRegistrationModal.vue

@@ -168,6 +168,7 @@ watch(registrationModal, (value) => {
           size="lg"
           autocomplete="email"
           :start-icon="AIconMail"
+          start-icon-class="size-4 text-icon-secondary"
           :placeholder="t('modals.id.register.placeholders.email')"
           :error="getError('email')"
         />
@@ -183,6 +184,7 @@ watch(registrationModal, (value) => {
           size="lg"
           autocomplete="new-password"
           :start-icon="AIconLock"
+          start-icon-class="size-4 text-icon-secondary"
           :placeholder="t('modals.id.register.placeholders.password')"
           :error="getError('password')"
         />
@@ -200,6 +202,7 @@ watch(registrationModal, (value) => {
           size="lg"
           autocomplete="new-password"
           :start-icon="AIconLock"
+          start-icon-class="size-4 text-icon-secondary"
           :placeholder="t('modals.id.register.placeholders.password_confirmation')"
           :error="getError('password_confirmation')"
         />

package/components/navigation/bottom-navigation/ABottomNavigation.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts" generic="T extends NavigationItem">
+import type { NavigationItem } from './types'
 import Avatar from '#adata-ui/icons/avatar.vue'
 import IconLogout from '#adata-ui/icons/logout.vue'
 import { useUrls } from '#adata-ui/composables/useUrls'
@@ -9,6 +10,7 @@ const props = withDefaults(defineProps<Props>(), {
   balance: 0,
   rate: 'Базовый',
   showLogIn: true,
+  columns: 3,
 })
 const emit = defineEmits(['update:modelValue', 'logout'])
 const { t } = useI18n()
@@ -17,6 +19,7 @@ const urls = useUrls()
 
 interface Props {
   grow?: boolean
+  columns?: 3 | 4
   items: T[]
   modelValue: string | null
   replenish?: string
@@ -57,13 +60,16 @@ const profile: string = 'modals.mobile_navigation.type_profile'
 
 <template>
   <header class="mx-3 mb-3 overflow-hidden rounded-full border border-default bg-main/10 shadow-lg backdrop-blur-lg backdrop-saturate-140">
-    <div class="grid w-full grid-cols-3 justify-items-center">
+    <div
+      class="grid w-full justify-items-center"
+      :class="columns === 4 ? 'grid-cols-4' : 'grid-cols-3'"
+    >
       <slot>
         <button
-          v-for="(item, index) in items"
-          :key="index"
+          v-for="item in items"
+          :key="item.value"
           class="h-16 w-auto min-w-16 max-w-[168px] lg:hover:bg-brand-subtle lg:hover:text-link-hover"
-          :class="{ grow, 'text-brand': modelValue === item.value }"
+          :class="{ grow, 'text-brand': modelValue === item.value || item.active }"
           @click="onClick(item.value)"
         >
           <span class="flex flex-col items-center justify-center text-body-sm lg:text-body-md">

package/components/navigation/bottom-navigation/types.ts

@@ -0,0 +1,6 @@
+export interface NavigationItem {
+  label: string
+  value: string
+  icon?: any
+  active?: boolean
+}

package/components/navigation/mobile-navigation/AMobileNavigation.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { NavigationItem } from '#adata-ui/components/navigation/bottom-navigation/types'
 import type { ProjectKeys } from '#adata-ui/components/navigation/header/types'
 import ContactsMobileModel from '#adata-ui/components/modals/ContactsMobileModel.vue'
 import ContentNavigationModal from '#adata-ui/components/modals/ContentNavigationModal.vue'
@@ -21,6 +22,7 @@ interface Props {
   showLogIn?: boolean
   module?: ProjectKeys
   oldVersion?: string
+  extraItem?: NavigationItem
 }
 const props = withDefaults(defineProps<Props>(), {
   limitRemaining: 0,
@@ -29,8 +31,12 @@ const props = withDefaults(defineProps<Props>(), {
   rate: 'Базовый',
   showLogIn: true,
   module: 'pk',
+  extraItem: undefined,
 })
-const emit = defineEmits(['logout'])
+const emit = defineEmits<{
+  logout: []
+  select: [value: string]
+}>()
 useCurrentModule().value = props.module
 const { landing } = useUrls()
 const activeModule = ref<string | null>(null)
@@ -38,24 +44,34 @@ const isMain = ref(false)
 const isContacts = ref(false)
 const isProfile = ref(false)
 const { t } = useI18n()
-const items = [
-  {
-    label: 'modals.mobile_navigation.type_tariff',
-    icon: IconInvoice,
-    value: 'tariff',
-  },
-  {
-    label: 'modals.mobile_navigation.type_main',
-    icon: IconMenu,
-    value: 'main',
-  },
-]
+const items = computed<NavigationItem[]>(() => {
+  const baseItems: NavigationItem[] = [
+    {
+      label: 'modals.mobile_navigation.type_tariff',
+      icon: IconInvoice,
+      value: 'tariff',
+    },
+    {
+      // с четвёртым пунктом «Продукты и решения» не влезает
+      label: props.extraItem
+        ? 'modals.mobile_navigation.type_main_short'
+        : 'modals.mobile_navigation.type_main',
+      icon: IconMenu,
+      value: 'main',
+    },
+  ]
+  return props.extraItem ? [props.extraItem, ...baseItems] : baseItems
+})
 function onLogout() {
   emit('logout')
   isProfile.value = false
 }
 watch(activeModule, (e) => {
-  if (e === 'main') {
+  if (!e) return
+  if (e === props.extraItem?.value) {
+    emit('select', e)
+  }
+  else if (e === 'main') {
     isMain.value = true
   }
   else if (e === 'contacts') {
@@ -103,6 +119,7 @@ watch(activeModule, (e) => {
         :rate="rate"
         :balance="balance"
         :items="items"
+        :columns="extraItem ? 4 : 3"
         @logout="onLogout"
       />
     </div>

package/lang/en.ts

@@ -704,6 +704,7 @@ const EnLocale: RuLocale = {
     },
     mobile_navigation: {
       type_main: 'Products and Solutions',
+      type_main_short: 'Products',
       type_contacts: 'Contacts',
       type_tariff: 'Tariffs',
       type_login: 'Login',

package/lang/kk.ts

@@ -705,6 +705,7 @@ const KkLocale: RuLocale = {
     },
     mobile_navigation: {
       type_main: 'Өнімдер мен шешімдер',
+      type_main_short: 'Өнімдер',
       type_contacts: 'Байланыс',
       type_tariff: 'Тарифтер',
       type_login: 'Кіру',

package/lang/ru.ts

@@ -705,6 +705,7 @@ const RuLocale = {
     },
     mobile_navigation: {
       type_main: 'Продукты и решения',
+      type_main_short: 'Продукты',
       type_contacts: 'Контакты',
       type_tariff: 'Тарифы',
       type_login: 'Войти',

package/nuxt.config.ts

@@ -3,6 +3,30 @@ import { createResolver } from '@nuxt/kit'
 import tailwindcss from '@tailwindcss/vite'
 
 const { resolve } = createResolver(import.meta.url)
+
+// Стенд: `adtdev` | `adada` | `adata`. То же значение, из которого `useUrls()`
+// собирает адреса сервисов. `NUXT_PUBLIC_MODE` — предпочтительное имя (по нему
+// же Nuxt переопределяет `runtimeConfig.public.mode`); `MODE` оставлен для
+// консьюмеров слоя, которые ещё не переименовали переменную.
+const mode = process.env.NUXT_PUBLIC_MODE ?? process.env.MODE
+
+// Тема живёт в куке `colorMode` и должна быть одна на все поддомены
+// (`<mode>.kz`, `pk.<mode>.kz`, `avto.<mode>.kz`, `id.<mode>.kz` …), поэтому
+// домен куки считаем из `mode`, а не держим отдельной переменной окружения:
+// `COLOR_MODE_COOKIE_DOMAIN` жила своей жизнью и её просто забывали — из 12
+// консьюмеров слоя она была прописана только в pk-frontend, в
+// adata-main-front-v2 не во всех `.env`, в avto-front её не было вообще. Чем
+// именно это ломало синхронизацию — см. `server/middleware/color-mode-cookie.ts`,
+// он же разово вычищает host-only куки, выставленные до этого фикса.
+//
+// В dev домен не ставим: на localhost браузер выбросит куку с
+// `Domain=.adtdev.kz`, и переключатель темы перестанет переживать перезагрузку.
+// `nuxt build` идёт с `NODE_ENV=production`, `nuxt dev` — с `development`, так
+// что сборка для любого стенда (dev/staging/master) домен получает.
+const colorModeCookieDomain = process.env.NODE_ENV === 'production' && mode
+  ? `.${mode}.kz`
+  : undefined
+
 export default defineNuxtConfig({
 
   app: {
@@ -43,7 +67,7 @@ export default defineNuxtConfig({
     cookieAttrs: {
       path: '/',
       maxAge: 60 * 60 * 24 * 365,
-      domain: process.env.COLOR_MODE_COOKIE_DOMAIN,
+      domain: colorModeCookieDomain,
     },
   },
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.1.41-beta.15",
+  "version": "2.1.41-beta.17",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/server/middleware/color-mode-cookie.ts

@@ -0,0 +1,58 @@
+/**
+ * Разовая миграция куки `colorMode`: убираем host-only дубль.
+ *
+ * Пока домен куки приезжал отдельной переменной `COLOR_MODE_COOKIE_DOMAIN`
+ * (её прописали далеко не везде — см. комментарий к `colorMode` в
+ * `nuxt.config.ts`), часть консьюмеров слоя писала `colorMode` без `Domain`, то
+ * есть host-only на свой поддомен. Причём писала на КАЖДОЙ загрузке страницы:
+ * `setPreferenceToStorage()` в клиентском плагине @nuxtjs/color-mode вызывается
+ * из `watch(preference, { immediate: true })`, а не только по клику. Поэтому
+ * рядом с доменной кукой `.<mode>.kz` от соседнего сервиса в браузере
+ * оказываются ДВЕ куки с именем `colorMode`, и браузер отдаёт обе.
+ *
+ * Дальше ломается сам модуль:
+ *  1. Его inline-скрипт в `<head>` читает куку как `split('; colorMode=')` и
+ *     возвращает значение только при одном вхождении. При двух — `undefined`,
+ *     то есть откат на `preference`, у нас это `light`.
+ *  2. Состояние с SSR помечено `unknown: true`, и из-за этого флага хук
+ *     `app:mounted` затирает `colorMode.preference` значением из
+ *     inline-скрипта — тем самым `light` — и сохраняет его в куку.
+ *
+ * Итог: заход на «сломанный» поддомен сбрасывал тему в светлую сразу для всех
+ * остальных, потому что доменная кука общая. Новая сборка сама это не вылечит:
+ * host-only кука уже стоит в браузере и живёт год с последнего до-фиксного
+ * визита.
+ *
+ * Чистим здесь, а не в клиентском плагине, по двум причинам. Во-первых,
+ * `Set-Cookie` из ответа браузер применяет до того, как выполнит inline-скрипт
+ * в `<head>`, поэтому корректной оказывается уже первая загрузка — без вспышки
+ * светлой темы и без перезаписи общей куки. Во-вторых, здесь не нужно трогать
+ * внутренности модуля (`window.__NUXT_COLOR_MODE__`).
+ *
+ * `Set-Cookie` без `Domain` адресует ровно host-only запись — доменную такой
+ * набор атрибутов не задевает.
+ *
+ * Мидлвар можно снести, когда истекут куки, выставленные до фикса.
+ */
+
+const KEY = 'colorMode'
+
+export default defineEventHandler((event) => {
+  const cookieHeader = getRequestHeader(event, 'cookie')
+
+  if (!cookieHeader) return
+
+  // Только документы: `Set-Cookie` на ответе статики или API нам не нужен, а на
+  // ответах с `cache-control: public` (такие route rules есть у консьюмеров) он
+  // ещё и попал бы в общий кеш.
+  if (!getRequestHeader(event, 'accept')?.includes('text/html')) return
+
+  const duplicated = cookieHeader
+    .split(';')
+    .filter(pair => pair.trimStart().startsWith(`${KEY}=`))
+    .length > 1
+
+  if (!duplicated) return
+
+  setCookie(event, KEY, '', { path: '/', maxAge: 0 })
+})