adata-ui 2.1.40-beta.9 → 2.1.41-beta.0

package/components/navigation/header/HeaderUsage.vue

@@ -1,125 +1,139 @@
-<script setup lang="ts">
-import Calendar from '#adata-ui/icons/calendar.vue'
-import Gauge from '#adata-ui/icons/gauge.vue'
-
-defineOptions({ name: 'HeaderUsage' })
-
-const props = withDefaults(defineProps<Props>(), {
-  limitRemaining: 0,
-  maxLimit: 300,
-  daysRemaining: 0,
-})
-
-interface Props {
-  limitRemaining?: number
-  maxLimit?: number
-  daysRemaining?: number
-}
-
-// Bar fill represents the remaining quota: full bar = plenty of requests left.
-const percent = computed(() => {
-  if (props.maxLimit <= 0) return 0
-  const ratio = (props.limitRemaining / props.maxLimit) * 100
-  return Math.min(100, Math.max(0, ratio))
-})
-
-// Animate the fill from 0 on mount and on every value change.
-const displayPercent = ref(0)
-onMounted(() => {
-  displayPercent.value = percent.value
-})
-watch(percent, (value) => {
-  displayPercent.value = value
-})
-
-const isLow = computed(() => percent.value < 20)
-
-const barColorClass = computed(() =>
-  isLow.value
-    ? 'bg-red-500 dark:bg-red-400'
-    : 'bg-blue-600 dark:bg-blue-500',
-)
-
-const valueColorClass = computed(() =>
-  isLow.value ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100',
-)
-</script>
-
-<template>
-  <client-only>
-    <div
-      class="inline-flex items-center gap-2.5"
-      data-test-id="header-usage"
-    >
-      <a-tooltip-v2
-        class="shrink-0 items-center gap-2.5"
-        placement="bottom"
-        arrow
-        :z-index="10001"
-        content-class="py-0.5"
-      >
-        <gauge class="size-4 shrink-0 text-gray-600 dark:text-gray-300" />
-
-        <div class="h-1.5 w-20 rounded-full bg-deepblue-900/30 dark:bg-white/30">
-          <div
-            class="usage-bar h-full rounded-full"
-            :class="barColorClass"
-            :style="{ width: `${displayPercent}%` }"
-          />
-        </div>
-
-        <span
-          class="text-sm tabular-nums leading-none"
-          data-test-id="header-usage-requests"
-        >
-          <span
-            class="font-bold transition-colors duration-300"
-            :class="valueColorClass"
-          >{{ limitRemaining }}</span><span class="font-medium text-gray-600 dark:text-gray-300">/{{ maxLimit }}</span>
-        </span>
-
-        <template #content>
-          <span class="whitespace-nowrap text-[11px] leading-none text-deepblue-900 dark:text-gray-100">
-            Лимит запросов: {{ limitRemaining }}
-          </span>
-        </template>
-      </a-tooltip-v2>
-
-      <span class="h-4 w-px shrink-0 bg-deepblue-900/15 dark:bg-white/15" />
-
-      <a-tooltip-v2
-        class="shrink-0"
-        placement="bottom"
-        arrow
-        :z-index="10001"
-        content-class="py-0.5"
-      >
-        <div
-          class="flex shrink-0 items-center gap-1.5"
-          data-test-id="header-usage-days"
-        >
-          <calendar class="size-4 shrink-0 text-gray-600 dark:text-gray-300" />
-          <span class="text-sm font-bold tabular-nums text-gray-900 dark:text-gray-100">{{ daysRemaining }}</span>
-        </div>
-
-        <template #content>
-          <span class="whitespace-nowrap text-[11px] leading-none text-deepblue-900 dark:text-gray-100">
-            Остаток дней: {{ daysRemaining }}
-          </span>
-        </template>
-      </a-tooltip-v2>
-    </div>
-  </client-only>
-</template>
-
-<style scoped>
-.usage-bar {
-  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .usage-bar {
-    transition: none;
-  }
-}
-</style>
+<script setup lang="ts">
+import Calendar from '#adata-ui/icons/calendar.vue'
+import Gauge from '#adata-ui/icons/gauge.vue'
+
+defineOptions({ name: 'HeaderUsage' })
+
+const props = withDefaults(defineProps<Props>(), {
+  limitRemaining: 0,
+  maxLimit: 300,
+  daysRemaining: 0,
+})
+
+interface Props {
+  limitRemaining?: number
+  maxLimit?: number
+  daysRemaining?: number
+}
+
+const percent = computed(() => {
+  if (props.maxLimit <= 0) return 0
+  const ratio = (props.limitRemaining / props.maxLimit) * 100
+  return Math.min(100, Math.max(0, ratio))
+})
+
+const displayPercent = ref(0)
+onMounted(() => {
+  displayPercent.value = percent.value
+})
+watch(percent, (value) => {
+  displayPercent.value = value
+})
+
+const usageLevel = computed<'normal' | 'warning' | 'critical'>(() => {
+  if (percent.value < 20) return 'critical'
+  if (percent.value < 40) return 'warning'
+  return 'normal'
+})
+
+const barColorClass = computed(() => {
+  switch (usageLevel.value) {
+    case 'critical':
+      return 'bg-danger'
+    case 'warning':
+      return 'bg-warning'
+    default:
+      return 'bg-brand'
+  }
+})
+
+const valueColorClass = computed(() => {
+  switch (usageLevel.value) {
+    case 'critical':
+      return 'text-icon-danger'
+    case 'warning':
+      return 'text-warning'
+    default:
+      return 'text-primary'
+  }
+})
+</script>
+
+<template>
+  <client-only>
+    <div
+      class="inline-flex items-center gap-2.5"
+      data-test-id="header-usage"
+    >
+      <a-tooltip-v2
+        class="shrink-0 items-center gap-2.5"
+        placement="bottom"
+        arrow
+        :z-index="10001"
+        content-class="py-0.5"
+      >
+        <gauge class="size-4 shrink-0 text-quaternary" />
+
+        <div class="h-1.5 w-20 rounded-full bg-badge">
+          <div
+            class="usage-bar h-full rounded-full"
+            :class="barColorClass"
+            :style="{ width: `${displayPercent}%` }"
+          />
+        </div>
+
+        <span
+          class="text-body-md tabular-nums leading-none"
+          data-test-id="header-usage-requests"
+        >
+          <span
+            class="font-bold transition-colors duration-300"
+            :class="valueColorClass"
+          >{{ limitRemaining }}</span><span class="font-medium text-quaternary">/{{ maxLimit }}</span>
+        </span>
+
+        <template #content>
+          <span class="whitespace-nowrap text-body-sm leading-none text-primary">
+            Лимит запросов: {{ limitRemaining }}
+          </span>
+        </template>
+      </a-tooltip-v2>
+
+      <span class="h-4 w-px shrink-0 bg-(--border-color-default)" />
+
+      <a-tooltip-v2
+        class="shrink-0"
+        placement="bottom"
+        arrow
+        :z-index="10001"
+        content-class="py-0.5"
+      >
+        <div
+          class="flex shrink-0 items-center gap-1.5"
+          data-test-id="header-usage-days"
+        >
+          <calendar class="size-4 shrink-0 text-quaternary" />
+          <span class="text-body-md font-bold tabular-nums text-primary">{{ daysRemaining }}</span>
+        </div>
+
+        <template #content>
+          <span class="whitespace-nowrap text-body-sm leading-none text-primary">
+            Остаток дней: {{ daysRemaining }}
+          </span>
+        </template>
+      </a-tooltip-v2>
+    </div>
+  </client-only>
+</template>
+
+<style scoped>
+.usage-bar {
+  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .usage-bar {
+    transition: none;
+  }
+}
+</style>

package/components/navigation/header/ListItem.vue

@@ -1,31 +1,32 @@
-<template>
-  <nuxt-link-locale
-    :to="item.to"
-    @mouseenter="hover = true"
-    @mouseleave="hover = false"
-    :class="{'opacity-30' : !hover && someHovered}"
-    class="flex items-center gap-4 px-2.5 py-2 hover:bg-gray-50 rounded-lg dark:hover:bg-gray-800 normal-case transition-all "
-  >
-    <div class="min-w-8 h-8 rounded-lg flex items-center justify-center dark:text-gray-900 text-white bg-gradient-blue">
-      <component
-        :is="item.icon"
-        class="h-5 w-5"
-      />
-    </div>
-    <span class="text-sm text-deepblue-900 dark:text-[#E3E5E8]">{{ item.title }}</span>
-  </nuxt-link-locale>
-</template>
-
-<script setup lang="ts">
-import type {NavChildItem} from "#adata-ui/components/navigation/header/types";
-
-defineProps<{
-  item: NavChildItem
-  someHovered: boolean
-}>()
-const hover = ref(false)
-</script>
-
-<style scoped>
-
-</style>
+<template>
+  <nuxt-link-locale
+    :to="item.to"
+    @mouseenter="hover = true"
+    @mouseleave="hover = false"
+    :class="{'opacity-30' : !hover && someHovered}"
+    class="flex items-center gap-4 px-2.5 py-2 hover:bg-action-secondary-hover rounded-md normal-case transition-all "
+  >
+    <!-- осознанно константный: белая иконка на брендовом градиенте bg-gradient-blue -->
+    <div class="min-w-8 h-8 rounded-md flex items-center justify-center text-white bg-gradient-blue">
+      <component
+        :is="item.icon"
+        class="h-5 w-5"
+      />
+    </div>
+    <span class="text-body-md text-primary">{{ item.title }}</span>
+  </nuxt-link-locale>
+</template>
+
+<script setup lang="ts">
+import type {NavChildItem} from "#adata-ui/components/navigation/header/types";
+
+defineProps<{
+  item: NavChildItem
+  someHovered: boolean
+}>()
+const hover = ref(false)
+</script>
+
+<style scoped>
+
+</style>

package/components/navigation/header/NavCard.vue

@@ -1,41 +1,42 @@
-<script setup lang="ts">
-import type {NavChild, NavChildItem} from '#adata-ui/components/navigation/header/types'
-
-defineProps<{
-  item: NavChildItem
-  size: 'lg' | 'sm',
-  someHovered: boolean
-}>()
-const hover = ref(false)
-</script>
-
-<template>
-  <nuxt-link-locale
-    :to="item.to"
-    class="flex h-full justify-between xl:gap-4 rounded-[0.5rem] bg-gray-50 p-4 dark:bg-gray-800  transition-all dark:hover:bg-gray-800"
-    :class="{'opacity-30': !hover && someHovered}"
-    @mouseenter="hover = true"
-    @mouseleave="hover = false"
-  >
-    <div class="normal-case">
-      <h4
-        class="mb-2 font-semibold text-deepblue-900 dark:text-[#E3E5E8]"
-        :class="{'heading-04' : size==='lg', 'heading-05' : size === 'sm'}"
-      >
-        {{ item.title }}
-      </h4>
-      <p class="text-gray-600 dark:text-gray-300 body-400">
-        {{ item.subtitle ? item.subtitle : '' }}
-      </p>
-    </div>
-    <div
-      class="flex items-center justify-center self-end rounded-lg bg-gradient-blue  dark:text-gray-900 text-white"
-      :class="{'h-8 min-w-8' : size==='sm', 'h-16 min-w-16' : size==='lg'}"
-    >
-      <component
-        :is="item.icon"
-        :class="{'h-5 w-5' : size==='sm', 'h-11 w-11' : size==='lg'}"
-      />
-    </div>
-  </nuxt-link-locale>
-</template>
+<script setup lang="ts">
+import type {NavChild, NavChildItem} from '#adata-ui/components/navigation/header/types'
+
+defineProps<{
+  item: NavChildItem
+  size: 'lg' | 'sm',
+  someHovered: boolean
+}>()
+const hover = ref(false)
+</script>
+
+<template>
+  <nuxt-link-locale
+    :to="item.to"
+    class="flex h-full justify-between xl:gap-4 rounded-[0.5rem] bg-muted p-4  transition-all"
+    :class="{'opacity-30': !hover && someHovered}"
+    @mouseenter="hover = true"
+    @mouseleave="hover = false"
+  >
+    <div class="normal-case">
+      <h4
+        class="mb-2 text-primary"
+        :class="{'text-h5' : size==='lg', 'text-body-md-strong' : size === 'sm'}"
+      >
+        {{ item.title }}
+      </h4>
+      <p class="text-quaternary text-body-md">
+        {{ item.subtitle ? item.subtitle : '' }}
+      </p>
+    </div>
+    <!-- осознанно константный: белая иконка на брендовом градиенте bg-gradient-blue -->
+    <div
+      class="flex items-center justify-center self-end rounded-md bg-gradient-blue text-white"
+      :class="{'h-8 min-w-8' : size==='sm', 'h-16 min-w-16' : size==='lg'}"
+    >
+      <component
+        :is="item.icon"
+        :class="{'h-5 w-5' : size==='sm', 'h-11 w-11' : size==='lg'}"
+      />
+    </div>
+  </nuxt-link-locale>
+</template>

package/components/navigation/header/NavList.vue

@@ -1,72 +1,73 @@
-<script setup lang="ts">
-import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
-
-interface NavList {
-  title: string
-  to: string
-  icon?: Component
-}
-
-const props = defineProps<{
-  id: string
-  icon?: Component
-  title: string
-  link: string
-  badge?: boolean
-  to?: string
-  navList: NavList[]
-  currentModule: boolean
-}>()
-
-const { isActiveService } = useActiveNavigation()
-
-function isActive(itemPath: string) {
-  if (!props.currentModule) return false
-  return isActiveService(itemPath)
-}
-</script>
-
-<template>
-  <section class="group/section overflow-hidden flex flex-col ">
-    <div class="mb-3 flex items-start justify-between gap-2">
-      <nuxt-link-locale
-        :to="link"
-        class="group/title flex min-w-0 items-center gap-2 text-base font-semibold text-deepblue-900 transition-colors hover:text-blue-700 dark:text-gray-100 dark:hover:text-blue-500"
-      >
-        <span
-          class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-500 transition-colors group-hover/title:bg-blue-700 group-hover/title:text-white dark:bg-blue-500/10 dark:text-blue-500 dark:group-hover/title:bg-blue-500">
-          <component
-            :is="icon"
-            class="size-4"
-          />
-        </span>
-        <span class="block truncate normal-case">{{ title }}</span>
-      </nuxt-link-locale>
-    </div>
-
-    <ul class="grid gap-1">
-      <li
-        v-for="item in navList"
-        :key="item.title"
-      >
-        <nuxt-link-locale
-          v-if="item.to"
-          :to="item.to"
-          itemprop="name"
-          class="group/item flex items-center gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-200/10"
-          :class="{ 'bg-blue-100 dark:bg-gray-200/10': isActive(item.to) }"
-        >
-          <a-icon-chevron-right class="size-[14px] shrink-0 text-gray-300 group-hover/item:text-blue-500 dark:group-hover/item:text-blue-700" />
-          <span
-            class="min-w-0 text-sm normal-case transition-colors group-hover/item:text-deepblue-900 group-hover/item:font-semibold dark:group-hover/item:text-gray-100"
-            :class="isActive(item.to)
-              ? 'text-blue-700 dark:text-blue-500'
-              : 'text-gray-600 dark:text-gray-300'"
-          >{{ item.title }}</span>
-        </nuxt-link-locale>
-      </li>
-    </ul>
-
-    <slot name="bottom" />
-  </section>
-</template>
+<script setup lang="ts">
+import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
+
+interface NavList {
+  title: string
+  to: string
+  icon?: Component
+}
+
+const props = defineProps<{
+  id: string
+  icon?: Component
+  title: string
+  link: string
+  badge?: boolean
+  to?: string
+  navList: NavList[]
+  currentModule: boolean
+}>()
+
+const { isActiveService } = useActiveNavigation()
+
+function isActive(itemPath: string) {
+  if (!props.currentModule) return false
+  return isActiveService(itemPath)
+}
+</script>
+
+<template>
+  <section class="group/section overflow-hidden flex flex-col ">
+    <div class="mb-3 flex items-start justify-between gap-2">
+      <nuxt-link-locale
+        :to="link"
+        class="group/title flex min-w-0 items-center gap-2 text-body-lg-strong text-primary transition-colors hover:text-link-hover"
+      >
+        <!-- осознанно константный: белая иконка на брендовом ховер-фоне -->
+        <span
+          class="flex size-8 shrink-0 items-center justify-center rounded-md bg-brand-subtle text-brand transition-colors group-hover/title:bg-action-primary-hover group-hover/title:text-white">
+          <component
+            :is="icon"
+            class="size-4"
+          />
+        </span>
+        <span class="block truncate normal-case">{{ title }}</span>
+      </nuxt-link-locale>
+    </div>
+
+    <ul class="grid gap-1">
+      <li
+        v-for="item in navList"
+        :key="item.title"
+      >
+        <nuxt-link-locale
+          v-if="item.to"
+          :to="item.to"
+          itemprop="name"
+          class="group/item flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-action-secondary-hover"
+          :class="{ 'bg-blue-subtle': isActive(item.to) }"
+        >
+          <a-icon-chevron-right class="size-[14px] shrink-0 text-icon-disabled group-hover/item:text-brand" />
+          <span
+            class="min-w-0 text-body-md normal-case transition-colors group-hover/item:text-primary group-hover/item:font-semibold"
+            :class="isActive(item.to)
+              ? 'text-brand'
+              : 'text-quaternary'"
+          >{{ item.title }}</span>
+        </nuxt-link-locale>
+      </li>
+    </ul>
+
+    <slot name="bottom" />
+  </section>
+</template>