adata-ui 2.1.41-beta.2 → 2.1.41-beta.21

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

@@ -1,112 +1,129 @@
-<script setup lang="ts">
-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'
-import ProfileMenu from '#adata-ui/components/navigation/header/ProfileMenu.vue'
-import AModal from '#adata-ui/components/overlays/modal/AModal.vue'
-import { useCurrentModule } from '#adata-ui/composables/projectState'
-import { useUrls } from '#adata-ui/composables/useUrls'
-import IconInvoice from '#adata-ui/icons/invoice.vue'
-import IconMenu from '#adata-ui/icons/menu-filled.vue'
-
-interface Props {
-  replenish?: string
-  hasNotification?: boolean
-  email: string | undefined
-  rate: string
-  daysRemaining: number
-  limitRemaining: number
-  balance: number
-  isAuthenticated: boolean
-  showLogIn?: boolean
-  module?: ProjectKeys
-  oldVersion?: string
-}
-const props = withDefaults(defineProps<Props>(), {
-  limitRemaining: 0,
-  daysRemaining: 0,
-  balance: 0,
-  rate: 'Базовый',
-  showLogIn: true,
-  module: 'pk',
-})
-const emit = defineEmits(['logout'])
-useCurrentModule().value = props.module
-const { landing } = useUrls()
-const activeModule = ref<string | null>(null)
-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',
-  },
-]
-function onLogout() {
-  emit('logout')
-  isProfile.value = false
-}
-watch(activeModule, (e) => {
-  if (e === 'main') {
-    isMain.value = true
-  }
-  else if (e === 'contacts') {
-    isContacts.value = true
-  }
-  else if (e === 'profile') {
-    isProfile.value = true
-  }
-  else if (e === 'tariff') {
-    navigateTo(`${landing}/tariffs`, { external: true })
-  }
-  activeModule.value = ''
-})
-</script>
-
-<template>
-  <div>
-    <content-navigation-modal v-model="isMain" @push-main="isMain = false" />
-    <contacts-mobile-model v-model="isContacts" @push-main="isContacts = false" />
-    <a-modal
-      v-model="isProfile"
-      @logout="isProfile = false"
-      @push-main="isProfile = false"
-    >
-      <div class="-mx-4">
-        <profile-menu
-          :email="email"
-          :balance="balance"
-          :days-remaining="daysRemaining"
-          :limit-remaining="limitRemaining"
-          :rate="rate"
-          :replenish="replenish"
-          :old-version="oldVersion"
-          @logout="onLogout"
-        />
-      </div>
-    </a-modal>
-    <div ref="bottom" class="sticky bottom-0 z-[10000] lg:hidden">
-      <a-bottom-navigation
-        v-model="activeModule"
-        :is-authenticated="isAuthenticated"
-        :email="email"
-        :days-remaining="daysRemaining"
-        :limit-remaining="limitRemaining"
-        :rate="rate"
-        :balance="balance"
-        :items="items"
-        @logout="onLogout"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
+<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'
+import ProfileMenu from '#adata-ui/components/navigation/header/ProfileMenu.vue'
+import AModal from '#adata-ui/components/overlays/modal/AModal.vue'
+import { useCurrentModule } from '#adata-ui/composables/projectState'
+import { useUrls } from '#adata-ui/composables/useUrls'
+import IconInvoice from '#adata-ui/icons/invoice.vue'
+import IconMenu from '#adata-ui/icons/menu-filled.vue'
+
+interface Props {
+  replenish?: string
+  hasNotification?: boolean
+  email: string | undefined
+  rate: string
+  daysRemaining: number
+  limitRemaining: number
+  balance: number
+  isAuthenticated: boolean
+  showLogIn?: boolean
+  module?: ProjectKeys
+  oldVersion?: string
+  extraItem?: NavigationItem
+}
+const props = withDefaults(defineProps<Props>(), {
+  limitRemaining: 0,
+  daysRemaining: 0,
+  balance: 0,
+  rate: 'Базовый',
+  showLogIn: true,
+  module: 'pk',
+  extraItem: undefined,
+})
+const emit = defineEmits<{
+  logout: []
+  select: [value: string]
+}>()
+useCurrentModule().value = props.module
+const { landing } = useUrls()
+const activeModule = ref<string | null>(null)
+const isMain = ref(false)
+const isContacts = ref(false)
+const isProfile = ref(false)
+const { t } = useI18n()
+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) return
+  if (e === props.extraItem?.value) {
+    emit('select', e)
+  }
+  else if (e === 'main') {
+    isMain.value = true
+  }
+  else if (e === 'contacts') {
+    isContacts.value = true
+  }
+  else if (e === 'profile') {
+    isProfile.value = true
+  }
+  else if (e === 'tariff') {
+    navigateTo(`${landing}/tariffs`, { external: true })
+  }
+  activeModule.value = ''
+})
+</script>
+
+<template>
+  <div>
+    <content-navigation-modal v-model="isMain" @push-main="isMain = false" />
+    <contacts-mobile-model v-model="isContacts" @push-main="isContacts = false" />
+    <a-modal
+      v-model="isProfile"
+      @logout="isProfile = false"
+      @push-main="isProfile = false"
+    >
+      <div class="-mx-4">
+        <profile-menu
+          :email="email"
+          :balance="balance"
+          :days-remaining="daysRemaining"
+          :limit-remaining="limitRemaining"
+          :rate="rate"
+          :replenish="replenish"
+          :old-version="oldVersion"
+          @logout="onLogout"
+        />
+      </div>
+    </a-modal>
+    <div ref="bottom" class="sticky bottom-0 z-[10000] lg:hidden">
+      <a-bottom-navigation
+        v-model="activeModule"
+        :is-authenticated="isAuthenticated"
+        :email="email"
+        :days-remaining="daysRemaining"
+        :limit-remaining="limitRemaining"
+        :rate="rate"
+        :balance="balance"
+        :items="items"
+        :columns="extraItem ? 4 : 3"
+        @logout="onLogout"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -1,179 +1,179 @@
-<template>
-  <div
-    ref="tabs"
-    class="scroll-container overflow-auto whitespace-nowrap"
-    :class="[
-      props.wrapper === 'row' ? 'flex gap-1' : 'flex flex-col gap-1',
-      isSegmented ? 'rounded-[12px] bg-muted p-1 shadow-[inset_2px_2px_4px_0] shadow-surface-dark/8' : ''
-    ]"
-  >
-
-    <button
-      v-for="option in options"
-      :key="option.key"
-      :disabled="option.disabled || disabled"
-      :data-active="activeTab === option.key"
-      :class="[
-        activeTab === option.key ? selectedClasses() : defaultClasses(!!option.disabled),
-        sizeOptions[size]
-      ]"
-      :data-test-id="getTestId(option)"
-      @click="onChanged(option, $event)"
-    >
-      <slot name="option" :option="option">
-        <span
-          class="flex items-center gap-1 whitespace-nowrap"
-          :class="[align === 'left' ? 'justify-start' : 'justify-center']"
-        >
-          <span>
-            {{ t(option.name) }}
-          </span>
-          <template v-if="option.count !== undefined">
-            <a-digit-badge
-              v-if="props.countView === 'badge'"
-              :value="option.count"
-              :type="option.badgeColor ? option.badgeColor : 'primary'"
-              :disabled="(option.disabled || option.count === 0) && activeTab !== option.key"
-              :view="activeTab === option.key ? 'inverted' : 'default'"
-              :size="badgeSize"
-            />
-            <span v-else-if="props.countView === 'brackets'"> ({{ option.count }}) </span>
-          </template>
-        </span>
-      </slot>
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Tab, ViewType } from './types'
-
-defineOptions({ name: 'APillTabs' })
-const emit = defineEmits(['selectOption', 'prevent'])
-
-interface Props {
-  options: Tab[]
-  // TODO: переименовать segmented
-  view?: 'transparent' | 'main' | 'gray' | 'blue' | 'mobile' | 'segmented'
-  size?: 'lg' | 'md' | 'sm' | 'xs' | 'ss'
-  badgeSize?: 'sm' | 'md' | 'lg'
-  align?: 'left' | 'center'
-  block?: boolean
-  wrapper?: 'column' | 'row'
-  countView?: 'badge' | 'brackets'
-  disabled?: boolean
-  mobileTestId?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  view: 'main',
-  size: 'md',
-  align: 'center',
-  badgeSize: 'lg',
-  block: false,
-  wrapper: 'row',
-  countView: 'badge',
-  mobileTestId: false,
-})
-const tabs = ref<HTMLDivElement | null>(null)
-const activeTab = defineModel<any>({ default: 1 })
-const { t } = useI18n()
-
-
-// todo: вынести в пропc
-const isSegmented = computed(() => props.view === 'segmented')
-
-const viewTypeValues: ViewType = {
-  main: {
-    default:
-      'text-body-md bg-muted text-primary hover:bg-action-secondary-hover',
-    selected: 'text-body-md-strong bg-action-primary text-action-primary-fg'
-  },
-  transparent: {
-    default: 'text-body-md bg-transparent text-primary hover:bg-action-secondary-hover',
-    selected: 'text-body-md-strong bg-main text-primary '
-  },
-  /* осознанно константный selected-инверт (gray/mobile): белый текст на bg-secondary-500 */
-  gray: {
-    default:
-      'text-body-md bg-muted hover:bg-action-secondary-hover',
-    selected: 'text-body-md text-white bg-secondary-500'
-  },
-  blue: {
-    default:
-      'text-body-md-strong bg-main text-primary hover:bg-action-secondary-hover',
-    selected: 'text-body-md-strong bg-action-primary text-action-primary-fg'
-  },
-  mobile: {
-    default:
-      'text-body-md-strong bg-main hover:bg-action-secondary-hover',
-    selected: 'text-body-md-strong text-white bg-secondary-500'
-  },
-  segmented: {
-    default: 'text-body-md bg-transparent text-primary hover:bg-action-secondary-hover',
-    selected: 'text-body-md-strong bg-main text-primary shadow-[2px_2px_4px_0] shadow-surface-dark/8'
-  }
-}
-
-/* осознанно константный focus-shadow #1B64B3: документированное исключение */
-const defaultClasses = (isDisabled: boolean) => [
-  'rounded-sm outline-hidden select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
-  isDisabled ? 'bg-action-disabled text-action-disabled-fg' : '',
-  props.view === 'transparent' && isDisabled ? 'bg-transparent' : '',
-  viewTypeValues[props.view]['default'],
-  props.block ? 'w-full' : ''
-]
-const selectedClasses = () => [
-  'rounded-sm select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
-  viewTypeValues[props.view]['selected'],
-  props.block ? 'w-full' : ''
-]
-
-const sizeOptions = {
-  lg: 'px-4 py-2.5',
-  sm: 'px-4 py-[7.5px]',
-  md: 'px-4 py-2',
-  ss: 'px-3 py-1.5',
-  xs: 'px-3 py-[4px]'
-}
-
-const onChanged = (option: Tab, event) => {
-  if (option.prevent) {
-    emit('prevent', option)
-    return
-  }
-  activeTab.value = option.key
-  emit('selectOption', option)
-  event.preventDefault()
-  event.currentTarget.scrollIntoView({
-    behavior: 'smooth',
-    inline: 'start',
-    block: 'nearest'
-  })
-}
-
-const getTestId = (option: Tab) =>
-  option?.dataTestId ? `${option.dataTestId}${props.mobileTestId ? '-mobile' : ''}` : undefined
-
-onMounted(() => {
-  const isDesktop = window.matchMedia('(min-width: 1024px)').matches
-
-  if (tabs.value && !isDesktop) {
-    const activeTab = tabs.value.querySelector('[data-active="true"]')
-
-    if (activeTab) {
-      activeTab.scrollIntoView({
-        inline: 'start',
-        block: 'nearest',
-      })
-    }
-  }
-})
-</script>
-
-<style scoped>
-/* Add any additional styles here */
-.scroll-container::-webkit-scrollbar {
-  display: none; /* для браузеров на основе WebKit */
-}
-</style>
+<template>
+  <div
+    ref="tabs"
+    class="scroll-container overflow-auto whitespace-nowrap"
+    :class="[
+      props.wrapper === 'row' ? 'flex gap-1' : 'flex flex-col gap-1',
+      isSegmented ? 'rounded-[12px] bg-muted p-1 shadow-[inset_2px_2px_4px_0] shadow-surface-dark/8' : ''
+    ]"
+  >
+
+    <button
+      v-for="option in options"
+      :key="option.key"
+      :disabled="option.disabled || disabled"
+      :data-active="activeTab === option.key"
+      :class="[
+        activeTab === option.key ? selectedClasses() : defaultClasses(!!option.disabled),
+        sizeOptions[size]
+      ]"
+      :data-test-id="getTestId(option)"
+      @click="onChanged(option, $event)"
+    >
+      <slot name="option" :option="option">
+        <span
+          class="flex items-center gap-1 whitespace-nowrap"
+          :class="[align === 'left' ? 'justify-start' : 'justify-center']"
+        >
+          <span>
+            {{ t(option.name) }}
+          </span>
+          <template v-if="option.count !== undefined">
+            <a-digit-badge
+              v-if="props.countView === 'badge'"
+              :value="option.count"
+              :type="option.badgeColor ? option.badgeColor : 'primary'"
+              :disabled="(option.disabled || option.count === 0) && activeTab !== option.key"
+              :view="activeTab === option.key ? 'inverted' : 'default'"
+              :size="badgeSize"
+            />
+            <span v-else-if="props.countView === 'brackets'"> ({{ option.count }}) </span>
+          </template>
+        </span>
+      </slot>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Tab, ViewType } from './types'
+
+defineOptions({ name: 'APillTabs' })
+const emit = defineEmits(['selectOption', 'prevent'])
+
+interface Props {
+  options: Tab[]
+  // TODO: переименовать segmented
+  view?: 'transparent' | 'main' | 'gray' | 'blue' | 'mobile' | 'segmented'
+  size?: 'lg' | 'md' | 'sm' | 'xs' | 'ss'
+  badgeSize?: 'sm' | 'md' | 'lg'
+  align?: 'left' | 'center'
+  block?: boolean
+  wrapper?: 'column' | 'row'
+  countView?: 'badge' | 'brackets'
+  disabled?: boolean
+  mobileTestId?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  view: 'main',
+  size: 'md',
+  align: 'center',
+  badgeSize: 'lg',
+  block: false,
+  wrapper: 'row',
+  countView: 'badge',
+  mobileTestId: false,
+})
+const tabs = ref<HTMLDivElement | null>(null)
+const activeTab = defineModel<any>({ default: 1 })
+const { t } = useI18n()
+
+
+// todo: вынести в пропc
+const isSegmented = computed(() => props.view === 'segmented')
+
+const viewTypeValues: ViewType = {
+  main: {
+    default:
+      'text-body-md bg-muted text-primary hover:bg-action-secondary-hover',
+    selected: 'text-body-md-strong bg-action-primary text-action-primary-fg'
+  },
+  transparent: {
+    default: 'text-body-md bg-transparent text-primary hover:bg-action-secondary-hover',
+    selected: 'text-body-md-strong bg-main text-primary '
+  },
+  /* осознанно константный selected-инверт (gray/mobile): белый текст на bg-secondary-500 */
+  gray: {
+    default:
+      'text-body-md bg-muted hover:bg-action-secondary-hover',
+    selected: 'text-body-md text-white bg-secondary-500'
+  },
+  blue: {
+    default:
+      'text-body-md-strong bg-main text-primary hover:bg-action-secondary-hover',
+    selected: 'text-body-md-strong bg-action-primary text-action-primary-fg'
+  },
+  mobile: {
+    default:
+      'text-body-md-strong bg-main hover:bg-action-secondary-hover',
+    selected: 'text-body-md-strong text-white bg-secondary-500'
+  },
+  segmented: {
+    default: 'text-body-md bg-transparent text-primary hover:bg-action-secondary-hover',
+    selected: 'text-body-md-strong bg-main text-primary shadow-[2px_2px_4px_0] shadow-surface-dark/8'
+  }
+}
+
+/* осознанно константный focus-shadow #1B64B3: документированное исключение */
+const defaultClasses = (isDisabled: boolean) => [
+  'rounded-sm outline-hidden select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
+  isDisabled ? 'bg-action-disabled text-action-disabled-fg' : '',
+  props.view === 'transparent' && isDisabled ? 'bg-transparent' : '',
+  viewTypeValues[props.view]['default'],
+  props.block ? 'w-full' : ''
+]
+const selectedClasses = () => [
+  'rounded-sm select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
+  viewTypeValues[props.view]['selected'],
+  props.block ? 'w-full' : ''
+]
+
+const sizeOptions = {
+  lg: 'px-4 py-2.5',
+  sm: 'px-4 py-[7.5px]',
+  md: 'px-4 py-2',
+  ss: 'px-3 py-1.5',
+  xs: 'px-3 py-[4px]'
+}
+
+const onChanged = (option: Tab, event) => {
+  if (option.prevent) {
+    emit('prevent', option)
+    return
+  }
+  activeTab.value = option.key
+  emit('selectOption', option)
+  event.preventDefault()
+  event.currentTarget.scrollIntoView({
+    behavior: 'smooth',
+    inline: 'start',
+    block: 'nearest'
+  })
+}
+
+const getTestId = (option: Tab) =>
+  option?.dataTestId ? `${option.dataTestId}${props.mobileTestId ? '-mobile' : ''}` : undefined
+
+onMounted(() => {
+  const isDesktop = window.matchMedia('(min-width: 1024px)').matches
+
+  if (tabs.value && !isDesktop) {
+    const activeTab = tabs.value.querySelector('[data-active="true"]')
+
+    if (activeTab) {
+      activeTab.scrollIntoView({
+        inline: 'start',
+        block: 'nearest',
+      })
+    }
+  }
+})
+</script>
+
+<style scoped>
+/* Add any additional styles here */
+.scroll-container::-webkit-scrollbar {
+  display: none; /* для браузеров на основе WebKit */
+}
+</style>