adata-ui 2.1.40-beta.2 → 2.1.40-beta.20

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

@@ -1,106 +1,106 @@
-<script setup lang="ts" generic="T extends NavigationItem">
-import Avatar from '#adata-ui/icons/avatar.vue'
-import IconLogout from '#adata-ui/icons/logout.vue'
-import { useUrls } from '#adata-ui/composables/useUrls'
-
-const props = withDefaults(defineProps<Props>(), {
-  limitRemaining: 0,
-  daysRemaining: 0,
-  balance: 0,
-  rate: 'Базовый',
-  showLogIn: true,
-})
-const emit = defineEmits(['update:modelValue', 'logout'])
-const { t } = useI18n()
-const { myLayer } = useAppConfig()
-const urls = useUrls()
-
-interface Props {
-  grow?: boolean
-  items: T[]
-  modelValue: string | null
-  replenish?: string
-  hasNotification?: boolean
-  email: string | undefined
-  rate: string
-  daysRemaining: number
-  limitRemaining: number
-  balance: number
-  isAuthenticated: boolean
-  showLogIn?: boolean
-}
-
-const { loginModal } = useIdModals()
-
-function goAuth() {
-  if (myLayer.authMode !== 'local') {
-    if (window) {
-      let fullPath = encodeURIComponent(window.location.toString())
-      if (fullPath.includes('basic-info')) {
-        fullPath = fullPath.replace('%2Fcounterparty/main', '').replace('%2Fbasic-info', '')
-      }
-      window.location.href = `${urls.login}?url=${fullPath}`
-    }
-  }
-  else {
-    loginModal.value = true
-  }
-}
-function onClick(value: string) {
-  if (value === props.modelValue) value = ''
-  emit('update:modelValue', value)
-}
-
-const login: string = 'header.login'
-const profile: string = 'modals.mobile_navigation.type_profile'
-</script>
-
-<template>
-  <header class="w-full border-t border-[#9DA3AC80] bg-white dark:bg-gray-900">
-    <div class="grid w-full grid-cols-3 justify-items-center">
-      <slot>
-        <button
-          v-for="(item, index) in items"
-          :key="index"
-          class="h-16 w-auto min-w-16 max-w-[168px] lg:hover:bg-blue-700/20 lg:hover:text-blue-700"
-          :class="{ grow, 'text-blue-700': modelValue === item.value }"
-          @click="onClick(item.value)"
-        >
-          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
-            <template v-if="Object.prototype.hasOwnProperty.call(item, 'icon')">
-              <component
-                :is="item.icon"
-                class="size-6"
-              />
-            </template>
-            {{ t(item.label) }}
-          </span>
-        </button>
-        <button
-          v-show="isAuthenticated"
-          class="h-16 w-auto min-w-16 max-w-[168px]"
-          @click="onClick('profile')"
-        >
-          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
-            <avatar
-              class="bg-gray outline-blue size-6 rounded-full"
-            />
-            {{ t(profile) }}
-          </span>
-        </button>
-        <button
-          v-show="!isAuthenticated && showLogIn"
-          class="h-16 w-auto min-w-16 max-w-[168px]"
-          @click="goAuth"
-        >
-          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
-            <icon-logout class="lg:size-6" />
-            {{ t(login) }}
-          </span>
-        </button>
-      </slot>
-    </div>
-  </header>
-</template>
-
-<style scoped></style>
+<script setup lang="ts" generic="T extends NavigationItem">
+import Avatar from '#adata-ui/icons/avatar.vue'
+import IconLogout from '#adata-ui/icons/logout.vue'
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+const props = withDefaults(defineProps<Props>(), {
+  limitRemaining: 0,
+  daysRemaining: 0,
+  balance: 0,
+  rate: 'Базовый',
+  showLogIn: true,
+})
+const emit = defineEmits(['update:modelValue', 'logout'])
+const { t } = useI18n()
+const { myLayer } = useAppConfig()
+const urls = useUrls()
+
+interface Props {
+  grow?: boolean
+  items: T[]
+  modelValue: string | null
+  replenish?: string
+  hasNotification?: boolean
+  email: string | undefined
+  rate: string
+  daysRemaining: number
+  limitRemaining: number
+  balance: number
+  isAuthenticated: boolean
+  showLogIn?: boolean
+}
+
+const { loginModal } = useIdModals()
+
+function goAuth() {
+  if (myLayer.authMode !== 'local') {
+    if (window) {
+      let fullPath = encodeURIComponent(window.location.toString())
+      if (fullPath.includes('basic-info')) {
+        fullPath = fullPath.replace('%2Fcounterparty/main', '').replace('%2Fbasic-info', '')
+      }
+      window.location.href = `${urls.login}?url=${fullPath}`
+    }
+  }
+  else {
+    loginModal.value = true
+  }
+}
+function onClick(value: string) {
+  if (value === props.modelValue) value = ''
+  emit('update:modelValue', value)
+}
+
+const login: string = 'header.login'
+const profile: string = 'modals.mobile_navigation.type_profile'
+</script>
+
+<template>
+  <header class="mx-3 mb-3 overflow-hidden rounded-full border border-deepblue-900/10 bg-gray-50/20 shadow-lg backdrop-blur-lg dark:border-gray-200/10 dark:bg-gray-900/30">
+    <div class="grid w-full grid-cols-3 justify-items-center">
+      <slot>
+        <button
+          v-for="(item, index) in items"
+          :key="index"
+          class="h-16 w-auto min-w-16 max-w-[168px] lg:hover:bg-blue-700/20 lg:hover:text-blue-700"
+          :class="{ grow, 'text-blue-700': modelValue === item.value }"
+          @click="onClick(item.value)"
+        >
+          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
+            <template v-if="Object.prototype.hasOwnProperty.call(item, 'icon')">
+              <component
+                :is="item.icon"
+                class="size-6"
+              />
+            </template>
+            {{ t(item.label) }}
+          </span>
+        </button>
+        <button
+          v-show="isAuthenticated"
+          class="h-16 w-auto min-w-16 max-w-[168px]"
+          @click="onClick('profile')"
+        >
+          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
+            <avatar
+              class="bg-gray outline-blue size-6 rounded-full"
+            />
+            {{ t(profile) }}
+          </span>
+        </button>
+        <button
+          v-show="!isAuthenticated && showLogIn"
+          class="h-16 w-auto min-w-16 max-w-[168px]"
+          @click="goAuth"
+        >
+          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
+            <icon-logout class="lg:size-6" />
+            {{ t(login) }}
+          </span>
+        </button>
+      </slot>
+    </div>
+  </header>
+</template>
+
+<style scoped></style>

package/components/navigation/breadcrumbs/ABreadcrumbs.vue

@@ -1,67 +1,128 @@
-<script lang="ts" setup>
-import type { Crumb } from './types'
-import { twMerge } from 'tailwind-merge'
-
-defineProps<{
-  links: Crumb[]
-  customClasses?: string
-}>()
-
-const { t } = useI18n()
-</script>
-<template>
-  <div class="">
-    <ul
-      class="flex gap-1"
-      itemscope
-      itemtype="https://schema.org/BreadcrumbList"
-    >
-      <li
-        v-for="(breadcrumbItem, idx) in links"
-        :key="idx"
-        :class="
-          twMerge(
-            'flex items-center text-xs text-gray-500 underline-offset-2 last-of-type:text-deepblue-900 hover:underline dark:last-of-type:text-gray-200',
-            customClasses
-          )
-        "
-        itemprop="itemListElement"
-        itemscope
-        itemtype="https://schema.org/ListItem"
-      >
-        <meta
-          itemprop="position"
-          :content="`${idx}`"
-        >
-        <slot
-          name="icon"
-          :breadcrumb-item="breadcrumbItem"
-          :index="idx"
-        >
-          <span v-if="idx !== 0">
-            <a-icon-chevron-right />
-          </span>
-        </slot>
-        <nuxt-link-locale
-          v-if="breadcrumbItem.to"
-          class="pl-1"
-          :to="breadcrumbItem.to"
-          rel="noopener noreferrer"
-          itemprop="item"
-          :data-test-id="breadcrumbItem?.dataTestId"
-        >
-          <span itemprop="name">
-            {{ t(breadcrumbItem.label) }}
-          </span>
-        </nuxt-link-locale>
-        <span
-          v-else
-          class="pl-1"
-          itemprop="name"
-        >
-          {{ t(breadcrumbItem.label) }}
-        </span>
-      </li>
-    </ul>
-  </div>
-</template>
+<script lang="ts" setup>
+import type { Crumb } from './types'
+import { twMerge } from '#adata-ui/utils/twMerge'
+
+const props = defineProps<{
+  links: Crumb[]
+  customClasses?: string
+  collapsible?: boolean
+}>()
+
+const { t } = useI18n()
+
+const expanded = ref(false)
+
+type Item = { kind: 'crumb', crumb: Crumb, position: number } | { kind: 'ellipsis' }
+
+const items = computed<Item[]>(() => {
+  const toItem = (crumb: Crumb, position: number): Item => ({ kind: 'crumb', crumb, position })
+
+  if (!props.collapsible || expanded.value || props.links.length <= 3) {
+    return props.links.map(toItem)
+  }
+
+  const last = props.links.length
+  return [
+    toItem(props.links[0], 0),
+    { kind: 'ellipsis' },
+    toItem(props.links[last - 2], last - 2),
+    toItem(props.links[last - 1], last - 1),
+  ]
+})
+</script>
+
+<template>
+  <div>
+    <ul
+      class="flex items-center gap-2"
+      itemscope
+      itemtype="https://schema.org/BreadcrumbList"
+    >
+      <template
+        v-for="(item, idx) in items"
+        :key="item.kind === 'crumb' ? item.position : 'ellipsis'"
+      >
+        <li
+          v-if="item.kind === 'ellipsis'"
+          class="flex items-center gap-2"
+        >
+          <span class="text-[#CAD5E2] dark:text-gray-600">
+            <a-icon-chevron-right class="size-4" />
+          </span>
+          <button
+            type="button"
+            class="flex size-[18px] items-center justify-center rounded text-[#62748E] transition-colors hover:text-deepblue-900 dark:text-gray-400 dark:hover:text-gray-200"
+            :aria-label="t('actions.showMore')"
+            @click="expanded = true"
+          >
+            <a-icon-horizontal-more class="size-4" />
+          </button>
+        </li>
+        <li
+          v-else
+          :class="
+            twMerge(
+              'flex items-center gap-2 text-body-md text-[#62748E] underline-offset-2 last-of-type:font-semibold last-of-type:text-deepblue-900 hover:underline dark:text-gray-400 dark:last-of-type:text-gray-200',
+              customClasses,
+            )
+          "
+          itemprop="itemListElement"
+          itemscope
+          itemtype="https://schema.org/ListItem"
+        >
+          <meta
+            itemprop="position"
+            :content="`${item.position}`"
+          >
+          <slot
+            name="icon"
+            :breadcrumb-item="item.crumb"
+            :index="idx"
+          >
+            <span
+              v-if="idx !== 0"
+              class="text-[#CAD5E2] dark:text-gray-600"
+            >
+              <a-icon-chevron-right class="size-4" />
+            </span>
+          </slot>
+          <nuxt-link-locale
+            v-if="item.crumb.to"
+            class="flex items-center"
+            :to="item.crumb.to"
+            rel="noopener noreferrer"
+            itemprop="item"
+            :data-test-id="item.crumb?.dataTestId"
+            :aria-label="item.crumb.icon ? t(item.crumb.label) : undefined"
+          >
+            <component
+              :is="item.crumb.icon"
+              v-if="item.crumb.icon"
+              class="size-[18px]"
+            />
+            <span
+              itemprop="name"
+              :class="item.crumb.icon ? 'sr-only' : ''"
+            >
+              {{ t(item.crumb.label) }}
+            </span>
+          </nuxt-link-locale>
+          <span
+            v-else
+            class="flex items-center"
+            itemprop="name"
+          >
+            <component
+              :is="item.crumb.icon"
+              v-if="item.crumb.icon"
+              class="size-[18px]"
+            />
+            <span :class="item.crumb.icon ? 'sr-only' : ''">
+              {{ t(item.crumb.label) }}
+            </span>
+          </span>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>

package/components/navigation/breadcrumbs/types.ts

@@ -1,5 +1,8 @@
-export interface Crumb {
-  label: string
-  to: string
-  dataTestId?: string
-}
+import type { Component } from 'vue'
+
+export interface Crumb {
+  label: string
+  to: string
+  dataTestId?: string
+  icon?: Component
+}