adata-ui 2.1.40-beta.17 → 2.1.40-beta.19

package/components/navigation/pill-tabs/APillTabsV2.vue

@@ -1,154 +1,226 @@
-<script lang="ts" setup>
-type CountColor = 'gray' | 'blue' | 'yellow' | 'red' | 'green' | 'neutral'
-
-export interface PillTab {
-  key: string
-  name: string
-  count?: number | string
-  countColor?: CountColor
-  disabled?: boolean
-  hideCount?: boolean
-}
-
-const props = withDefaults(defineProps<{
-  modelValue: string
-  options: PillTab[]
-  showCount?: boolean
-  defaultCountColor?: CountColor
-  ariaLabel?: string
-  block?: boolean
-  disabled?: boolean
-  size?: 'sm' | 'md'
-  scrollIntoView?: boolean
-}>(), {
-  showCount: false,
-  block: false,
-  disabled: false,
-  size: 'sm',
-  scrollIntoView: false,
-})
-
-const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
-
-const listRef = ref<HTMLElement | null>(null)
-
-const SIZE_CLASS: Record<'sm' | 'md', string> = {
-  sm: 'text-body-sm',
-  md: 'text-body-md',
-}
-
-const COUNT_COLOR_CLASS: Record<CountColor, string> = {
-  gray: 'bg-gray-200/70 text-gray-600 dark:bg-white/[0.08] dark:text-gray-300',
-  blue: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
-  yellow: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
-  red: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
-  green: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
-  neutral: 'bg-gray-100 text-gray-500 dark:bg-white/[0.06] dark:text-gray-400',
-}
-
-const { t, te } = useI18n()
-
-function hasCount(option: PillTab) {
-  if (typeof option.count === 'string') {
-    return !!Number(String(option.count).replace(/\s/g, ''))
-  }
-  return !!option.count
-}
-
-function formatCount(option: PillTab) {
-  if (typeof option.count === 'number') {
-    return option.count.toLocaleString('ru-RU')
-  }
-  return option.count
-}
-
-function resolveCountColor(option: PillTab): CountColor {
-  if (!hasCount(option)) return 'gray'
-  return option.countColor ?? props.defaultCountColor ?? 'gray'
-}
-
-function localize(label: string) {
-  return te(label) ? t(label) : label
-}
-
-function isDisabled(option: PillTab) {
-  return props.disabled || option.disabled === true
-}
-
-function select(option: PillTab) {
-  if (isDisabled(option)) return
-  emit('update:modelValue', option.key)
-}
-
-function scrollActiveIntoView() {
-  if (!props.scrollIntoView) return
-  nextTick(() => {
-    const active = listRef.value?.querySelector<HTMLElement>('[aria-selected="true"]')
-    active?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
-  })
-}
-
-watch(() => props.modelValue, scrollActiveIntoView)
-onMounted(scrollActiveIntoView)
-</script>
-
-<template>
-  <div
-    class="pill-tabs-v2 min-w-0 max-w-full rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-white/10 dark:bg-white/[0.03]"
-    :class="[
-      block ? 'w-full' : 'w-fit',
-      disabled ? 'pill-tabs-v2--disabled opacity-60' : '',
-    ]"
-    :aria-disabled="disabled || undefined"
-  >
-    <div
-      ref="listRef"
-      role="tablist"
-      :aria-label="ariaLabel"
-      class="pill-tabs-v2__list flex w-full flex-nowrap items-center gap-1 overflow-x-auto"
-    >
-      <button
-        v-for="option in options"
-        :key="option.key"
-        type="button"
-        role="tab"
-        :aria-selected="modelValue === option.key"
-        :aria-disabled="isDisabled(option) || undefined"
-        :disabled="isDisabled(option)"
-        :tabindex="modelValue === option.key ? 0 : -1"
-        class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 font-medium transition-colors duration-150"
-        :class="[
-          SIZE_CLASS[size],
-          isDisabled(option)
-            ? 'cursor-not-allowed text-gray-300 dark:text-gray-600'
-            : modelValue === option.key
-              ? 'bg-white text-deepblue-900 shadow-sm dark:bg-gray-700 dark:text-gray-100 dark:shadow-none dark:ring-1 dark:ring-inset dark:ring-white/10'
-              : 'text-gray-700 hover:bg-white/70 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-white/[0.06] dark:hover:text-gray-100',
-          block ? 'flex-1 basis-0 justify-center' : 'shrink-0',
-        ]"
-        @click="select(option)"
-      >
-        <slot name="option" :option="option">
-          <span>{{ localize(option.name) }}</span>
-
-          <span
-            v-if="showCount && !option.hideCount"
-            class="inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-body-sm font-semibold leading-5"
-            :class="COUNT_COLOR_CLASS[resolveCountColor(option)]"
-          >
-            {{ formatCount(option) }}
-          </span>
-        </slot>
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.pill-tabs-v2__list {
-  scrollbar-width: none;
-}
-.pill-tabs-v2__list::-webkit-scrollbar {
-  display: none;
-}
-</style>
+<script lang="ts" setup>
+type CountColor = 'gray' | 'blue' | 'yellow' | 'red' | 'green' | 'neutral'
+type PillTabsType = 'pill' | 'underline'
+
+export interface PillTab {
+  key: string
+  name: string
+  count?: number | string
+  countColor?: CountColor
+  disabled?: boolean
+  hideCount?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  options: PillTab[]
+  showCount?: boolean
+  defaultCountColor?: CountColor
+  ariaLabel?: string
+  block?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'md'
+  scrollIntoView?: boolean
+  type?: PillTabsType
+}>(), {
+  showCount: false,
+  block: false,
+  disabled: false,
+  size: 'sm',
+  scrollIntoView: false,
+  type: 'pill',
+})
+
+const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
+
+const listRef = ref<HTMLElement | null>(null)
+const indicatorStyle = ref<Record<string, string>>({ width: '0px', transform: 'translateX(0px)', opacity: '0' })
+const indicatorAnimate = ref(false)
+let resizeObserver: ResizeObserver | null = null
+
+const SIZE_CLASS: Record<'sm' | 'md', string> = {
+  sm: 'text-body-sm',
+  md: 'text-body-md',
+}
+
+const COUNT_COLOR_CLASS: Record<CountColor, string> = {
+  gray: 'bg-gray-200/70 text-gray-600 dark:bg-white/[0.08] dark:text-gray-300',
+  blue: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+  yellow: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
+  red: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+  green: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
+  neutral: 'bg-gray-100 text-gray-500 dark:bg-white/[0.06] dark:text-gray-400',
+}
+
+const { t, te } = useI18n()
+
+const isUnderline = computed(() => props.type === 'underline')
+
+function hasCount(option: PillTab) {
+  if (typeof option.count === 'string') {
+    return !!Number(String(option.count).replace(/\s/g, ''))
+  }
+  return !!option.count
+}
+
+function formatCount(option: PillTab) {
+  if (typeof option.count === 'number') {
+    return option.count.toLocaleString('ru-RU')
+  }
+  return option.count
+}
+
+function resolveCountColor(option: PillTab): CountColor {
+  if (!hasCount(option)) return 'gray'
+  return option.countColor ?? props.defaultCountColor ?? 'gray'
+}
+
+function localize(label: string) {
+  return te(label) ? t(label) : label
+}
+
+function isDisabled(option: PillTab) {
+  return props.disabled || option.disabled === true
+}
+
+function select(option: PillTab) {
+  if (isDisabled(option)) return
+  emit('update:modelValue', option.key)
+}
+
+function scrollActiveIntoView() {
+  if (!props.scrollIntoView) return
+  nextTick(() => {
+    const active = listRef.value?.querySelector<HTMLElement>('[aria-selected="true"]')
+    active?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+  })
+}
+
+function updateIndicator() {
+  if (!isUnderline.value) return
+  nextTick(() => {
+    const list = listRef.value
+    const active = list?.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]')
+    if (!list || !active) {
+      indicatorStyle.value = { ...indicatorStyle.value, opacity: '0' }
+      return
+    }
+    indicatorStyle.value = {
+      width: `${active.offsetWidth}px`,
+      transform: `translateX(${active.offsetLeft}px)`,
+      opacity: '1',
+    }
+  })
+}
+
+function onActiveChange() {
+  scrollActiveIntoView()
+  updateIndicator()
+}
+
+watch(() => props.modelValue, onActiveChange)
+watch(() => props.options, updateIndicator, { deep: true })
+watch(isUnderline, updateIndicator)
+
+onMounted(() => {
+  scrollActiveIntoView()
+  updateIndicator()
+
+  if (typeof ResizeObserver !== 'undefined' && listRef.value) {
+    resizeObserver = new ResizeObserver(() => updateIndicator())
+    resizeObserver.observe(listRef.value)
+  }
+
+  nextTick(() => requestAnimationFrame(() => { indicatorAnimate.value = true }))
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+})
+</script>
+
+<template>
+  <div
+    class="pill-tabs-v2 min-w-0 max-w-full"
+    :class="[
+      isUnderline
+        ? 'border-b border-gray-200 dark:border-white/10'
+        : 'rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-white/10 dark:bg-white/[0.03]',
+      block ? 'w-full' : 'w-fit',
+      disabled ? 'pill-tabs-v2--disabled opacity-60' : '',
+    ]"
+    :aria-disabled="disabled || undefined"
+  >
+    <div
+      ref="listRef"
+      role="tablist"
+      :aria-label="ariaLabel"
+      class="pill-tabs-v2__list relative flex w-full flex-nowrap items-center overflow-x-auto"
+      :class="isUnderline ? 'gap-0' : 'gap-1'"
+    >
+      <button
+        v-for="option in options"
+        :key="option.key"
+        type="button"
+        role="tab"
+        :aria-selected="modelValue === option.key"
+        :aria-disabled="isDisabled(option) || undefined"
+        :disabled="isDisabled(option)"
+        :tabindex="modelValue === option.key ? 0 : -1"
+        class="inline-flex items-center gap-1.5 whitespace-nowrap font-medium transition-colors duration-150"
+        :class="[
+          SIZE_CLASS[size],
+          isUnderline
+            ? [
+              'px-4 py-2',
+              isDisabled(option)
+                ? 'cursor-not-allowed text-gray-300 dark:text-gray-600'
+                : modelValue === option.key
+                  ? 'text-blue-600 dark:text-blue-400'
+                  : 'text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200',
+            ]
+            : [
+              'rounded-md px-3 py-1.5',
+              isDisabled(option)
+                ? 'cursor-not-allowed text-gray-300 dark:text-gray-600'
+                : modelValue === option.key
+                  ? 'bg-white text-deepblue-900 shadow-sm dark:bg-gray-700 dark:text-gray-100 dark:shadow-none dark:ring-1 dark:ring-inset dark:ring-white/10'
+                  : 'text-gray-700 hover:bg-white/70 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-white/[0.06] dark:hover:text-gray-100',
+            ],
+          block ? 'flex-1 basis-0 justify-center' : 'shrink-0',
+        ]"
+        @click="select(option)"
+      >
+        <slot name="option" :option="option">
+          <span>{{ localize(option.name) }}</span>
+
+          <span
+            v-if="showCount && !option.hideCount"
+            class="inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-body-sm font-semibold leading-5"
+            :class="COUNT_COLOR_CLASS[resolveCountColor(option)]"
+          >
+            {{ formatCount(option) }}
+          </span>
+        </slot>
+      </button>
+
+      <span
+        v-if="isUnderline"
+        aria-hidden="true"
+        class="pill-tabs-v2__indicator pointer-events-none absolute -bottom-px left-0 h-0.5 rounded-full bg-blue-600 dark:bg-blue-400"
+        :class="indicatorAnimate ? 'transition-[transform,width,opacity] duration-300 ease-out' : ''"
+        :style="indicatorStyle"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pill-tabs-v2__list {
+  scrollbar-width: none;
+}
+.pill-tabs-v2__list::-webkit-scrollbar {
+  display: none;
+}
+</style>

package/components/navigation/pill-tabs/types.ts

@@ -1,24 +1,24 @@
-
-export type StateType = {
-  [key in 'default' | 'selected']: string;
-};
-
-export type ViewType = {
-  transparent: StateType;
-  main: StateType;
-  gray: StateType;
-  blue: StateType;
-  mobile: StateType;
-  segmented: StateType;
-};
-
-
-export interface Tab {
-  name: string
-  key: string | number
-  count?: number
-  disabled?: boolean
-  prevent?:boolean
-  badgeColor?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
-  dataTestId?: string
-}
+
+export type StateType = {
+  [key in 'default' | 'selected']: string;
+};
+
+export type ViewType = {
+  transparent: StateType;
+  main: StateType;
+  gray: StateType;
+  blue: StateType;
+  mobile: StateType;
+  segmented: StateType;
+};
+
+
+export interface Tab {
+  name: string
+  key: string | number
+  count?: number
+  disabled?: boolean
+  prevent?:boolean
+  badgeColor?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
+  dataTestId?: string
+}