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

package/components/elements/tree-select/components/ATreeSelectNode.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import type { TreeViewNode } from '#adata-ui/components/elements/tree-select/types'
+
+interface Props {
+  node: TreeViewNode
+  toggleExpand: (node: TreeViewNode) => void | Promise<void>
+  toggleCheckbox: (id: string | number, checked: boolean) => void
+  type: 'checkbox' | 'select'
+  disabled: boolean
+}
+
+const props = defineProps<Props>()
+
+// explicit slot type breaks the recursive self-reference inference (TS7022)
+defineSlots<{ label?: (props: { node: TreeViewNode }) => unknown }>()
+
+const isDisabled = computed(() => props.disabled && props.node.state === 'unchecked')
+
+function onSelectToggle() {
+  if (isDisabled.value) return
+  props.toggleCheckbox(props.node.id, props.node.state !== 'checked')
+}
+</script>
+
+<template>
+  <li
+    :style="{ paddingLeft: `${node.level * 20}px` }"
+    :class="[{ 'bg-[#2C3E500D] dark:bg-[#E3E5E80D]': node.state === 'checked' && type === 'select' }]"
+  >
+    <div
+      v-if="!node.hidden"
+      class="flex items-center gap-1 p-2"
+      :class="{ 'bg-deepblue-50 dark:bg-gray-200/5': isDisabled }"
+    >
+      <div class="flex min-w-4 items-center">
+        <a-icon-loader-circle
+          v-if="node.loading"
+          class="size-4 animate-spin text-gray-400 dark:text-gray-500"
+        />
+        <a-icon-chevron-down
+          v-else-if="node.expandable"
+          width="16"
+          height="16"
+          class="cursor-pointer transition-all"
+          :class="{ '-rotate-90': !node.expanded }"
+          @click="toggleExpand(node)"
+        />
+      </div>
+
+      <a-checkbox-v2
+        v-if="type === 'checkbox'"
+        size="lg"
+        side="left"
+        class="flex w-full items-center justify-between text-left"
+        :model-value="node.state === 'checked'"
+        :intermediate="node.state === 'indeterminate'"
+        :disabled="isDisabled"
+        :name="`${node.id}`"
+        @update:model-value="(checked) => toggleCheckbox(node.id, checked as boolean)"
+      >
+        <slot name="label" :node="node">
+          <span class="text-body-md-strong" v-html="node.text" />
+        </slot>
+      </a-checkbox-v2>
+
+      <div
+        v-else
+        role="button"
+        tabindex="0"
+        class="flex w-full cursor-pointer items-center justify-between gap-4"
+        :class="{ 'pointer-events-none opacity-60': isDisabled }"
+        @click="onSelectToggle"
+        @keydown.enter.prevent="onSelectToggle"
+        @keydown.space.prevent="onSelectToggle"
+      >
+        <slot name="label" :node="node">
+          <span :class="{ 'font-semibold': node.level === 0 }" v-html="node.text" />
+        </slot>
+        <a-icon-check
+          v-if="node.state === 'checked'"
+          class="min-w-4 text-blue-700 dark:text-blue-400"
+        />
+      </div>
+    </div>
+
+    <a-transition-height>
+      <ul v-if="node.expandable && node.expanded">
+        <a-tree-select-node
+          v-for="child in node.children"
+          :key="child.id"
+          :node="child"
+          :toggle-expand="toggleExpand"
+          :toggle-checkbox="toggleCheckbox"
+          :type="type"
+          :disabled="disabled"
+        >
+          <template v-if="$slots.label" #label="slotProps">
+            <slot name="label" v-bind="slotProps" />
+          </template>
+        </a-tree-select-node>
+      </ul>
+    </a-transition-height>
+  </li>
+</template>

package/components/elements/tree-select/types.ts

@@ -1,3 +1,43 @@
+export type TreeNodeState = 'checked' | 'unchecked' | 'indeterminate'
+export type TreeNodeStateEditable = 'checked' | 'unchecked'
+
+export type TreeData = {
+  id?: number | string
+  name?: string
+  children?: TreeData[]
+  [key: string]: unknown
+}
+
+export interface TreeViewNode {
+  id: string | number
+  name: string
+  text: string
+  baseText: string
+  level: number
+  state: TreeNodeState
+  expandable: boolean
+  expanded: boolean
+  hidden: boolean
+  loaded: boolean
+  loading: boolean
+  parent: TreeViewNode | null
+  children: TreeViewNode[]
+  raw: TreeData
+}
+
+export interface TreeKeyConfig {
+  idKey?: string
+  nameKey?: string
+  childrenKey?: string
+  hasChildrenKey?: string
+}
+
+export interface TreeServiceOptions extends TreeKeyConfig {
+  withoutId?: boolean
+  lazy?: boolean
+  loadChildren?: (node: TreeViewNode) => Promise<TreeData[]> | TreeData[]
+}
+
 export interface TreeNode {
   id: string | number
   name: string
@@ -19,16 +59,5 @@ export interface TreeNestedNode {
   expandableClosed: boolean
   text: string
   hidden: boolean
-  // parent: TreeNestedNode | null;
   child: TreeNestedNode[]
 }
-
-export type TreeData = {
-  // [key: string]: null | string[] | TreeData;
-  id: number | string
-  name: string
-  children?: TreeData[]
-}
-
-export type TreeNodeState = 'checked' | 'unchecked' | 'indeterminate'
-export type TreeNodeStateEditable = 'checked' | 'unchecked'

package/components/elements/tree-select/utils.ts

@@ -0,0 +1,30 @@
+import type { TreeData, TreeKeyConfig } from '#adata-ui/components/elements/tree-select/types'
+
+export interface SelectedItem {
+  id: string | number
+  name: string
+}
+
+export function getSelectedItems(
+  options: TreeData[],
+  ids: (string | number)[],
+  keys: TreeKeyConfig = {},
+): SelectedItem[] {
+  const { idKey = 'id', nameKey = 'name', childrenKey = 'children' } = keys
+  const wanted = new Set(ids ?? [])
+  const result: SelectedItem[] = []
+
+  const walk = (items: TreeData[]): void => {
+    items.forEach((item) => {
+      const id = item[idKey] as string | number
+      if (wanted.has(id)) {
+        result.push({ id, name: String(item[nameKey] ?? '') })
+      }
+      const children = item[childrenKey] as TreeData[] | undefined
+      if (children?.length) walk(children)
+    })
+  }
+
+  walk(options ?? [])
+  return result
+}

package/components/elements/tree-select-modal/ATreeSelectModal.vue

@@ -0,0 +1,217 @@
+<script lang="ts" setup>
+import type { TreeData, TreeViewNode } from '#adata-ui/components/elements/tree-select/types'
+import { getSelectedItems } from '#adata-ui/components/elements/tree-select/utils'
+import AIconSearch from '#adata-ui/icons/search.vue'
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'container' | 'fullscreen'
+
+interface Props {
+  options: TreeData[]
+  label?: string
+  title?: string
+  searchLabel?: string
+  type?: 'checkbox' | 'select'
+  onlyOne?: boolean
+  withoutId?: boolean
+  loading?: boolean
+  disabled?: boolean
+  asyncSearch?: (keyword: string) => TreeData[] | Promise<TreeData[]>
+  filteringLabel?: string
+  applyLabel?: string
+  resetLabel?: string
+  btnClass?: string
+  size?: ModalSize
+  width?: string
+  bodyHeight?: string
+  idKey?: string
+  nameKey?: string
+  childrenKey?: string
+  hasChildrenKey?: string
+  lazy?: boolean
+  loadChildren?: (node: TreeViewNode) => TreeData[] | Promise<TreeData[]>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  title: '',
+  searchLabel: '',
+  type: 'checkbox',
+  onlyOne: false,
+  withoutId: false,
+  loading: false,
+  disabled: false,
+  filteringLabel: '',
+  applyLabel: 'Применить',
+  resetLabel: 'Сбросить',
+  btnClass: '',
+  size: 'lg',
+  bodyHeight: '50vh',
+  idKey: 'id',
+  nameKey: 'name',
+  childrenKey: 'children',
+  lazy: false,
+})
+
+const emit = defineEmits<{
+  (e: 'submit'): void
+  (e: 'cancel'): void
+}>()
+
+const selected = defineModel<(string | number)[]>({ default: () => [] })
+const search = defineModel<string>('search', { default: '' })
+const isOpen = defineModel<boolean>('open', { default: false })
+
+const treeRef = ref<{ reset: () => void } | null>(null)
+const isSearch = ref(false)
+
+const count = computed(() => selected.value?.length ?? 0)
+
+const dataForDisplay = computed(() =>
+  getSelectedItems(props.options, selected.value ?? [], {
+    idKey: props.idKey,
+    nameKey: props.nameKey,
+    childrenKey: props.childrenKey,
+  }),
+)
+
+const treeAreaStyle = computed(() =>
+  props.bodyHeight && props.bodyHeight !== 'auto' ? { height: props.bodyHeight } : undefined,
+)
+
+function openModal() {
+  if (props.disabled) return
+  isOpen.value = true
+}
+
+function onApply() {
+  isOpen.value = false
+  search.value = ''
+  nextTick(() => emit('submit'))
+}
+
+function onReset() {
+  treeRef.value?.reset()
+  selected.value = []
+  search.value = ''
+  emit('cancel')
+}
+
+watch(
+  () => props.loading,
+  (loading) => {
+    if (!loading) isSearch.value = !!search.value.length
+  },
+)
+
+defineExpose({ open: openModal, close: () => (isOpen.value = false) })
+</script>
+
+<template>
+  <div class="tree-select-modal w-full">
+    <slot
+      name="trigger"
+      :open="openModal"
+      :selected="dataForDisplay"
+      :count="count"
+    >
+      <a-select-row-v2
+        v-model:is-open="isOpen"
+        :label="label"
+        :selected-items="dataForDisplay"
+        :disabled="disabled"
+        :btn-class="btnClass"
+        :clearable="false"
+        :deletable="false"
+      />
+    </slot>
+
+    <a-modal-v2
+      v-model="isOpen"
+      :title="title"
+      :size="size"
+      :width="width"
+    >
+      <template #header>
+        <slot name="header" :title="title">
+          <h2 class="text-h5 text-gray-900 dark:text-gray-100">
+            {{ title }}
+          </h2>
+        </slot>
+      </template>
+
+      <div class="flex flex-col">
+        <div class="sticky top-0 z-[1] flex flex-col gap-4 bg-white px-5 pb-4 pt-4 dark:bg-gray-900">
+          <a-input-v2
+            v-model="search"
+            type="search"
+            :label="searchLabel"
+            :start-icon="AIconSearch"
+            clearable
+          />
+
+          <p v-if="filteringLabel" class="text-body-sm text-gray-500 dark:text-gray-400">
+            {{ filteringLabel }}
+          </p>
+        </div>
+
+        <div
+          class="tree-select-modal__body px-5 pb-4"
+          :class="{ 'overflow-auto': treeAreaStyle }"
+          :style="treeAreaStyle"
+        >
+          <a-tree-select
+            v-if="!loading"
+            ref="treeRef"
+            v-model="selected"
+            :options="options"
+            :type="type"
+            :only-one="onlyOne"
+            :is-search="isSearch"
+            :search-text="search"
+            :async-search="asyncSearch"
+            :without-id="withoutId"
+            :id-key="idKey"
+            :name-key="nameKey"
+            :children-key="childrenKey"
+            :has-children-key="hasChildrenKey"
+            :lazy="lazy"
+            :load-children="loadChildren"
+          >
+            <template v-if="$slots.label" #label="slotProps">
+              <slot name="label" v-bind="slotProps" />
+            </template>
+          </a-tree-select>
+
+          <div v-else class="flex items-center justify-center py-10 text-gray-400 dark:text-gray-500">
+            <a-icon-loader-circle class="size-6 animate-spin" />
+          </div>
+        </div>
+      </div>
+
+      <template #footer="{ close }">
+        <slot
+          name="footer"
+          :reset="onReset"
+          :apply="onApply"
+          :close="close"
+          :count="count"
+        >
+          <div class="flex justify-end gap-2">
+            <a-button-v2
+              view="outline"
+              color="gray"
+              @click="onReset"
+            >
+              {{ resetLabel }}
+            </a-button-v2>
+            <a-button-v2 @click="onApply">
+              {{ applyLabel }}<template v-if="count">
+                ({{ count }})
+              </template>
+            </a-button-v2>
+          </div>
+        </slot>
+      </template>
+    </a-modal-v2>
+  </div>
+</template>

package/components/features/color-mode/AColorMode.client.vue

@@ -37,7 +37,7 @@ useEventListener(window, 'storage', (event: StorageEvent) => {
   <client-only>
     <button
       type="button"
-      class="relative inline-flex size-8 items-center justify-center overflow-hidden rounded-xl text-deepblue-900/80 transition-colors duration-150 hover:bg-deepblue-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900"
+      class="relative inline-flex size-8 items-center justify-center overflow-hidden rounded-lg text-deepblue-900/80 transition-colors duration-150 hover:bg-deepblue-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900"
       :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
       data-test-id="header-switch-theme-toggle"
       @click="toggle"

package/components/features/dropdown/ADropdownV2.vue

@@ -24,7 +24,6 @@ const { x, y, strategy, update, placement: resolvedPlacement } = useFloating(ref
   middleware: computed(() => [offsetMiddleware(props.offset), flip(), shift({ padding: 8 })]),
 })
 
-// Anchor the grow/shrink animation to the trigger so the panel feels attached.
 const transformOrigin = computed(() => {
   const [side, align] = resolvedPlacement.value.split('-')
   const vertical = side === 'top' ? 'bottom' : 'top'
@@ -85,7 +84,7 @@ onKeyStroke('Escape', () => {
       <div
         v-if="isOpen"
         ref="floating"
-        class="z-[60] overflow-hidden rounded-xl shadow-lg shadow-gray-900/10 dark:shadow-black/30"
+        class="z-[60] overflow-hidden rounded-lg shadow-lg shadow-gray-900/10 dark:shadow-black/30"
         :style="{
           position: strategy,
           left: x != null ? `${x}px` : '',

package/components/features/lang-switcher/lang-switcher.vue

@@ -66,7 +66,7 @@ function onSelect(loc: LocaleItem) {
     <button
       ref="reference"
       type="button"
-      class="inline-flex size-8 items-center justify-center rounded-xl text-xs font-semibold text-gray-900 transition-colors duration-150 hover:bg-deepblue-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:text-gray-100 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900"
+      class="inline-flex size-8 items-center justify-center rounded-lg text-body-sm font-semibold text-gray-900 transition-colors duration-150 hover:bg-deepblue-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:text-gray-100 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900"
       :class="[
         isOpen
           ? 'bg-blue-50 text-blue-700 ring-2 ring-blue-500/20 dark:bg-blue-900/40 dark:text-blue-300'
@@ -91,7 +91,7 @@ function onSelect(loc: LocaleItem) {
       <div
         v-if="isOpen"
         ref="floating"
-        class="z-[10000] w-fit rounded-xl border border-gray-200 bg-white shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30"
+        class="z-[10000] w-fit rounded-lg border border-gray-200 bg-white 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` : '',
@@ -99,11 +99,16 @@ function onSelect(loc: LocaleItem) {
         }"
       >
         <ul class="flex flex-col gap-1 p-1.5" role="listbox">
-          <li v-for="loc in locales" :key="localeCode(loc)" role="option" :aria-selected="localeCode(loc) === locale">
+          <li
+            v-for="loc in locales"
+            :key="localeCode(loc)"
+            role="option"
+            :aria-selected="localeCode(loc) === locale"
+          >
             <nuxt-link
               :data-test-id="`header-switch-${localeCode(loc)}-language-button${testIdSuffix}`"
               :to="switchLocalePath(localeCode(loc))"
-              class="flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm transition-colors duration-100"
+              class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-body-md transition-colors duration-100"
               :class="[
                 localeCode(loc) === locale
                   ? 'bg-blue-50 font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'

package/components/features/payment/banner/BasicPlusLimitBanner.vue

@@ -51,15 +51,15 @@ function onUpdate() {
 </script>
 
 <template>
-  <div class="gradient flex justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+  <div class="gradient flex 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.basicPlusLimit.title') }}
       </p>
       <i18n-t
         keypath="modals.id.banners.basicPlusLimit.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 #topUp>
           <button

package/components/features/payment/banner/PaymentBanner.vue

@@ -56,15 +56,15 @@ function onBuy() {
 </script>
 
 <template>
-  <div class="gradient flex justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+  <div class="gradient flex 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('payment.banner.title') }}
       </p>
       <i18n-t
         keypath="payment.banner.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 #tariffs>
           <nuxt-link

package/components/features/payment/banner/UpSellBanner.vue

@@ -72,16 +72,16 @@ function onBuy() {
 </script>
 
 <template>
-  <div class="relative gradient flex justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+  <div class="relative gradient flex justify-between rounded-md p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
     <div class="flex flex-col gap-3">
-      <p class="font-semibold">
+      <p class="text-h5">
         {{ t(`payment.upsell.${code}.title`) }}
       </p>
 
       <i18n-t
         :keypath="`payment.upsell.${code}.description`"
         tag="p"
-        class="text-sm whitespace-pre-line"
+        class="text-body-md whitespace-pre-line"
       >
         <template #highlight>
           <span class="font-semibold">{{ t(`payment.upsell.${code}.highlight`) }}</span>

package/components/features/payment/process/PaymentKaspiQrSidePanel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { toCanvas } from 'qrcode'
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { toCanvas } from 'qrcode'
 
 const props = defineProps<{
   requestUrl: string
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'back', type: 'kaspi'): void
-  (e:  'updateUserRate'): void
+  (e: 'updateUserRate'): void
 }>()
 
 const isOpen = defineModel({ default: false })
@@ -74,11 +74,10 @@ watch(isOpen, async (value) => {
       margin: 0,
       color: {
         dark: colorMode.value === 'dark' ? '#FFFFFF' : '#000000', // квадраты
-        light: colorMode.value === 'dark' ? '#000000' : '#FFFFFF' // фон
-      }
+        light: colorMode.value === 'dark' ? '#000000' : '#FFFFFF', // фон
+      },
     },
     (error) => {
-
       if (error) {
         console.error(error)
         return
@@ -99,7 +98,8 @@ watch(isOpen, async (value) => {
 
         ctx.drawImage(logo, x, y, size, size)
       }
-    })
+    },
+  )
 
   intervalId = setInterval(() => {
     if (paymentSuccess.value && intervalId) {
@@ -110,7 +110,6 @@ watch(isOpen, async (value) => {
     checkPayment()
   }, 1000)
 })
-
 </script>
 
 <template>
@@ -120,42 +119,59 @@ watch(isOpen, async (value) => {
   >
     <template #header>
       <div class="flex items-center gap-2">
-        <button @click="onBack">
+        <button
+          type="button"
+          class="rounded-md p-1 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.06]"
+          @click="onBack"
+        >
           <a-icon-chevron-left class="size-6" />
         </button>
-        <p class="text-xl font-semibold">
+        <p class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
           {{ t('payment.kaspi.title') }}
         </p>
       </div>
     </template>
 
     <div class="flex flex-col gap-6">
-      <div class="flex flex-col items-center text-center text-black dark:text-white">
-        <p class="mb-4 font-semibold text-sm">
-          {{ t('payment.kaspi.description') }}
-        </p>
-
-        <div class="flex gap-3 items-center">
-          <a-icon-kaspi-qr class="size-16" />
-          <span class="font-bold text-[44px]">
-          {{ t('payment.kaspi.qr') }}
+      <p class="text-center text-sm font-medium text-gray-600 dark:text-gray-300">
+        {{ t('payment.kaspi.description') }}
+      </p>
+
+      <div class="flex flex-col items-center gap-5 rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
+        <div class="flex items-center gap-3">
+          <a-icon-kaspi-qr class="size-14" />
+          <span class="text-[40px] font-bold leading-none text-deepblue-900 dark:text-white">
+            {{ t('payment.kaspi.qr') }}
           </span>
         </div>
 
-        <p class="mt-5 font-bold text-2xl">{{ t('payment.kaspi.scan') }}</p>
+        <p class="text-center text-xl font-bold text-deepblue-900 dark:text-white">
+          {{ t('payment.kaspi.scan') }}
+        </p>
 
-        <canvas class="mt-5" id="kaspiQr"></canvas>
+        <canvas
+          id="kaspiQr"
+          class="rounded-md"
+        />
 
-        <p class="mt-10 text-lg">{{ t('payment.kaspi.adata') }}</p>
+        <p class="text-center text-base text-gray-600 dark:text-gray-300">
+          {{ t('payment.kaspi.adata') }}
+        </p>
       </div>
+    </div>
 
-      <a-button @click="onBack" view="outline">
+    <template #footer>
+      <a-button-v2
+        view="outline"
+        color="gray"
+        size="lg"
+        block
+        @click="onBack"
+      >
         {{ t('payment.kaspi.changeMethod') }}
-      </a-button>
-    </div>
+      </a-button-v2>
+    </template>
   </a-side-panel>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>