adata-ui 2.1.40-beta.11 → 2.1.40-beta.12

package/components/forms/checkbox/ACheckboxV2.vue

@@ -64,9 +64,9 @@ const gapClass = computed(() => {
 
 const textClass = computed(() => {
   switch (props.size) {
-    case 'sm': return 'text-xs'
-    case 'lg': return 'text-base'
-    default: return 'text-sm'
+    case 'sm': return 'text-body-sm'
+    case 'lg': return 'text-body-lg'
+    default: return 'text-body-md'
   }
 })
 
@@ -82,7 +82,7 @@ const isActive = computed(() => isChecked.value || props.intermediate)
 
 const squareClass = computed(() => {
   const base = [
-    'checkbox-square inline-flex shrink-0 items-center justify-center rounded-md border transition-colors duration-150',
+    'checkbox-square inline-flex shrink-0 items-center justify-center rounded-sm border transition-colors duration-150',
     squareSizeClass.value,
   ]
 
@@ -101,7 +101,7 @@ const squareClass = computed(() => {
 
 const chipClass = computed(() => {
   const base = [
-    'inline-flex items-center rounded-full border px-3 py-1 text-xs transition-colors duration-150',
+    'inline-flex items-center rounded-full border px-3 py-1 text-body-sm transition-colors duration-150',
   ]
 
   if (isActive.value) {

package/components/forms/input/AInputV2.vue

@@ -303,7 +303,7 @@ function rowDisplay(item: T): unknown {
 <template>
   <div
     ref="wrapperRef"
-    class="input-v2 relative w-full text-sm"
+    class="input-v2 relative w-full text-body-md"
     v-bind="wrapperAttrs"
   >
     <div
@@ -395,7 +395,7 @@ function rowDisplay(item: T): unknown {
       <div
         v-if="isDropdownOpen"
         ref="floatingRef"
-        class="input-v2__dropdown z-[10000] flex flex-col gap-2 rounded-xl border border-gray-200 bg-white p-1.5 shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30"
+        class="input-v2__dropdown z-[10000] flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-1.5 shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30"
         :style="{
           position: strategy,
           left: x != null ? `${x}px` : '',
@@ -406,7 +406,7 @@ function rowDisplay(item: T): unknown {
           <li
             v-for="(item, idx) in autocompleteList"
             :key="idx"
-            class="cursor-pointer rounded-lg px-3 py-2 text-sm transition-colors duration-100 hover:bg-gray-50 dark:hover:bg-gray-800/60"
+            class="cursor-pointer rounded-md px-3 py-2 text-body-md transition-colors duration-100 hover:bg-gray-50 dark:hover:bg-gray-800/60"
             :class="{ 'input-v2__option--active': currentItemIndex === idx }"
             @mousedown.prevent="onSelectOption(item)"
             @touchend.prevent="onTouchEndOption(item)"
@@ -430,7 +430,7 @@ function rowDisplay(item: T): unknown {
       leave-from-class="input-v2__error-leave-from"
       leave-to-class="input-v2__error-leave-to"
     >
-      <p v-if="hasError" class="mt-1 flex flex-col text-xs text-red-500 dark:text-red-400">
+      <p v-if="hasError" class="mt-1 flex flex-col text-body-sm text-red-500 dark:text-red-400">
         <span v-for="(err, idx) in errorMessages" :key="idx">{{ err }}</span>
       </p>
     </transition>

package/components/forms/input/date/AInputDate.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { twJoin, twMerge } from 'tailwind-merge'
 import ACalendar from "#adata-ui/components/elements/calendar/ACalendar.vue";
+import { twJoin, twMerge } from '#adata-ui/utils/twMerge'
 
 
 interface Props {
@@ -48,7 +48,7 @@ const uiConfig = {
   "input-wrapper": {
     base: 'relative inline-block w-full text-sm sm:min-w-full'
   },
-  base: 'w-full border-0 rounded-md text-deepblue-900 dark:text-gray-200 hover:outline hover:outline-1 hover:outline-blue-700 hover:dark:outline-blue-500 focus:outline focus:outline-blue-700 focus:dark:outline-blue-500 mt-0',
+  base: 'w-full border-0 rounded-sm text-deepblue-900 dark:text-gray-200 hover:outline hover:outline-1 hover:outline-blue-700 hover:dark:outline-blue-500 focus:outline focus:outline-blue-700 focus:dark:outline-blue-500 mt-0',
   size: {
     sm: 'h-8 px-4 py-1.5 sm',
     md: 'h-10 px-4 pb-1.5 pt-[18px] md'

package/components/forms/input/password/AInputPassword.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import AInputStandard from "#adata-ui/components/forms/input/standard/AInputStandard.vue";
 
-
 interface Props {
   disabled?: boolean
   label?: string
   size?: 'sm' | 'md'
   error?: string
   required?: boolean
+  iconEyeTestId?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -19,19 +19,25 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const isOpened = ref<boolean>(false)
+
+const inputProps = computed(() => {
+  const { iconEyeTestId, ...rest } = props
+  return rest
+})
 </script>
 
 <template>
   <a-input-standard
     v-bind="$attrs"
     :type="isOpened ? 'text' : 'password'"
-    v-bind.prop="props"
+    v-bind.prop="inputProps"
   >
     <template #endButton>
       <button
         class="absolute top-1/2 right-4 text-gray-500 fill-gray-500 pointer-events-click text-2xl transform translate-y-[-50%] hover:opacity-80 disabled:pointer-events-none"
         :disabled="disabled"
         type="button"
+        :data-test-id="iconEyeTestId"
         @click="isOpened = !isOpened"
       >
         <a-icon-eye-closed

package/components/forms/input/standard/AInputStandard.vue

@@ -1,6 +1,6 @@
 <script generic="T, K extends keyof T" lang="ts" setup>
-import {twMerge, twJoin} from 'tailwind-merge'
 import AAlert from '#adata-ui/components/elements/alert/AAlert.vue'
+import {twJoin, twMerge} from '#adata-ui/utils/twMerge'
 
 interface Props {
   disabled?: boolean
@@ -44,11 +44,11 @@ const {t} = useI18n()
 const uiConfig = {
   wrapper: 'transition duration-500 w-full',
   'input-wrapper': {
-    base: 'relative inline-block w-full text-sm sm:min-w-full',
+    base: 'relative inline-block w-full text-body-md sm:min-w-full',
     readonly: 'pointer-events-none user-select-none',
     disabled: 'pointer-events-none user-select-none opacity-40'
   },
-  base: 'w-full border-0 rounded-md text-deepblue-900 dark:text-gray-200 hover:outline outline-offset-[-1px] hover:outline-1 hover:outline-blue-700 hover:dark:outline-blue-500 focus:outline focus:outline-blue-700 focus:dark:outline-blue-500 mt-0',
+  base: 'w-full border-0 rounded-sm text-deepblue-900 dark:text-gray-200 hover:outline outline-offset-[-1px] hover:outline-1 hover:outline-blue-700 hover:dark:outline-blue-500 focus:outline focus:outline-blue-700 focus:dark:outline-blue-500 mt-0',
   size: {
     sm: 'h-8 px-4 py-1.5 sm',
     md: 'h-10 px-4 pb-1.5 pt-[18px] md',

package/components/forms/input/textarea/ATextarea.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { twMerge, twJoin } from 'tailwind-merge'
 import AAlert from '#adata-ui/components/elements/alert/AAlert.vue'
+import { twJoin, twMerge } from '#adata-ui/utils/twMerge'
 
 interface Props {
   disabled?: boolean
@@ -38,7 +38,7 @@ const uiConfig = {
     disabled: 'pointer-events-none user-select-none opacity-40',
     color: 'bg-deepblue-900/5 dark:bg-gray-200/5'
   },
-  base: 'w-full border-0 rounded-md text-deepblue-900 dark:text-gray-200 outline-none mt-0',
+  base: 'w-full border-0 rounded-sm text-deepblue-900 dark:text-gray-200 outline-none mt-0',
   size: {
     sm: 'h-8 px-4 py-1.5 sm',
     md: 'h-10 px-4 pb-1.5 pt-[8px] md'

package/components/forms/toggle/AToggle.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import {Switch} from "@headlessui/vue";
-import {twMerge, twJoin} from "tailwind-merge";
-
 import type {Props} from "./types";
+import {twJoin, twMerge} from '#adata-ui/utils/twMerge';
+import {Switch} from "@headlessui/vue";
 
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,

package/components/forms/toggle/AToggleV2.vue

@@ -15,8 +15,8 @@ const props = withDefaults(defineProps<{
 const model = defineModel<boolean>({ default: false })
 
 const SIZE: Record<Size, { track: string, knob: string, on: string, off: string, text: string }> = {
-  sm: { track: 'h-5 w-9', knob: 'size-4', on: 'translate-x-4', off: 'translate-x-0.5', text: 'text-xs' },
-  md: { track: 'h-6 w-11', knob: 'size-5', on: 'translate-x-5', off: 'translate-x-0.5', text: 'text-sm' },
+  sm: { track: 'h-5 w-9', knob: 'size-4', on: 'translate-x-4', off: 'translate-x-0.5', text: 'text-body-sm-medium' },
+  md: { track: 'h-6 w-11', knob: 'size-5', on: 'translate-x-5', off: 'translate-x-0.5', text: 'text-body-md-medium' },
 }
 const s = computed(() => SIZE[props.size])
 
@@ -39,7 +39,7 @@ function toggle() {
   >
     <span
       v-if="label"
-      class="font-medium text-gray-600 transition-colors group-hover:text-gray-800 dark:text-gray-300 dark:group-hover:text-gray-100"
+      class="text-gray-600 transition-colors group-hover:text-gray-800 dark:text-gray-300 dark:group-hover:text-gray-100"
       :class="s.text"
     >
       {{ label }}

package/components/modals/AnotherDeviceModal.vue

@@ -30,7 +30,7 @@ function onToMain() {
         {{ t('modals.another_device_modal.info') }}
       </p>
       <div
-        class="body-400 flex gap-2 rounded-lg border border-red-500 bg-[#FDECEB] p-3 text-red-500 dark:border-red-400 dark:bg-red-400/10 dark:text-red-400"
+        class="body-400 flex gap-2 rounded-md border border-red-500 bg-[#FDECEB] p-3 text-red-500 dark:border-red-400 dark:bg-red-400/10 dark:text-red-400"
       >
         <a-icon-warning-triangle
           class="size-4 shrink-0"

package/components/modals/ContactsMobileModel.vue

@@ -170,7 +170,7 @@ watch(tab, (e) => {
       <nuxt-link
         to="/"
         @click="emits('pushMain')"
-        class="flex items-center gap-4 rounded-md bg-gray-50 px-4 py-3 dark:bg-gray-800"
+        class="flex items-center gap-4 rounded-sm bg-gray-50 px-4 py-3 dark:bg-gray-800"
       >
         <a-icon-menu />
         {{ t('modals.mobile_navigation.return_button') }}

package/components/modals/ContentNavigationModal.vue

@@ -66,9 +66,9 @@ function onReturn() {
         v-for="item in currentLinks"
         :key="item.to"
         :to="item.to"
-        class="group flex items-center gap-3 rounded-2xl border border-gray-100 bg-white px-3 py-2.5 transition-colors hover:border-blue-200 hover:bg-blue-50/50 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-blue-500/30 dark:hover:bg-gray-800"
+        class="group flex items-center gap-3 rounded-xl border border-gray-100 bg-white px-3 py-2.5 transition-colors hover:border-blue-200 hover:bg-blue-50/50 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-blue-500/30 dark:hover:bg-gray-800"
       >
-        <span class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-500 transition-colors group-hover:bg-blue-700 group-hover:text-white dark:bg-blue-500/10 dark:text-blue-500 dark:group-hover:bg-blue-500 dark:group-hover:text-white">
+        <span class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-500 transition-colors group-hover:bg-blue-700 group-hover:text-white dark:bg-blue-500/10 dark:text-blue-500 dark:group-hover:bg-blue-500 dark:group-hover:text-white">
           <component
             :is="item.icon"
             class="size-5"
@@ -86,7 +86,7 @@ function onReturn() {
     <template #footer>
       <nuxt-link
         to="/"
-        class="flex items-center justify-center gap-2 rounded-2xl bg-gray-100 px-4 py-3 text-sm font-semibold text-deepblue-900 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
+        class="flex items-center justify-center gap-2 rounded-xl bg-gray-100 px-4 py-3 text-sm font-semibold text-deepblue-900 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
         @click="onReturn"
       >
         <a-icon-menu class="size-5" />

package/components/modals/Insufficient-funds-modal.vue

@@ -30,7 +30,7 @@ function cancel() {
       <p class="text-center">
         {{ t('modals.low_balance.questions') }}
       </p>
-      <div class="flex flex-col rounded-xl border border-blue-500 bg-blue-50 px-4 py-2 dark:border-blue-500 dark:bg-blue-950/40">
+      <div class="flex flex-col rounded-lg border border-blue-500 bg-blue-50 px-4 py-2 dark:border-blue-500 dark:bg-blue-950/40">
         <p class="body-600 text-center text-blue-700 dark:text-blue-300">
           {{ t('modals.low_balance.current_balance') }}
         </p>

package/components/modals/PaymentMethodModal.vue

@@ -66,7 +66,7 @@ if (props.deleteFromDom) {
         :name="`${item.name}`"
         side="right"
         :value="item.id"
-        class="flex items-center justify-between	gap-2 rounded-md bg-gray-50 p-[10px_16px] dark:bg-[#393D40]"
+        class="flex items-center justify-between	gap-2 rounded-sm bg-gray-50 p-[10px_16px] dark:bg-[#393D40]"
       >
         <div class="flex w-full items-center gap-2">
           <component :is="item.img" />

package/components/modals/id/IdBanner.vue

@@ -9,15 +9,15 @@ function onRegister() {
 </script>
 
 <template>
-  <div class="gradient flex flex-col gap-2 lg:gap-0 lg:flex-row justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+  <div class="gradient flex flex-col gap-2 lg:gap-0 lg:flex-row justify-between rounded-md p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
     <div>
-      <p class="mb-2 font-semibold">
+      <p class="mb-2 text-h5">
         {{ t('modals.id.banners.auth.title') }}
       </p>
       <i18n-t
         keypath="modals.id.banners.auth.subtitle"
         tag="p"
-        class="text-sm text-gray-600 dark:text-gray-200"
+        class="text-body-md text-gray-600 dark:text-gray-200"
       >
         <template #register>
           <button class="font-semibold text-blue-700 dark:text-blue-500" @click="onRegister">

package/components/modals/id/IdRecoveryModal.vue

@@ -83,7 +83,7 @@ onBeforeUnmount(() => {
 
 <template>
   <form
-    class="flex flex-col items-stretch gap-5 rounded-lg text-center"
+    class="flex flex-col items-stretch gap-5 rounded-md text-center"
     novalidate
     @submit.prevent="onSubmit"
   >

package/components/navigation/breadcrumbs/ABreadcrumbs.vue

@@ -1,67 +1,128 @@
 <script lang="ts" setup>
 import type { Crumb } from './types'
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '#adata-ui/utils/twMerge'
 
-defineProps<{
+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 class="">
+  <div>
     <ul
-      class="flex gap-1"
+      class="flex items-center gap-2"
       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"
+      <template
+        v-for="(item, idx) in items"
+        :key="item.kind === 'crumb' ? item.position : 'ellipsis'"
       >
-        <meta
-          itemprop="position"
-          :content="`${idx}`"
-        >
-        <slot
-          name="icon"
-          :breadcrumb-item="breadcrumbItem"
-          :index="idx"
+        <li
+          v-if="item.kind === 'ellipsis'"
+          class="flex items-center gap-2"
         >
-          <span v-if="idx !== 0">
-            <a-icon-chevron-right />
+          <span class="text-[#CAD5E2] dark:text-gray-600">
+            <a-icon-chevron-right class="size-4" />
           </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
+          <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="pl-1"
-          itemprop="name"
+          :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"
         >
-          {{ t(breadcrumbItem.label) }}
-        </span>
-      </li>
+          <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 @@
+import type { Component } from 'vue'
+
 export interface Crumb {
   label: string
   to: string
   dataTestId?: string
+  icon?: Component
 }