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

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import AToggle from "#adata-ui/components/forms/toggle/AToggle.vue";
-import Sun from "#adata-ui/icons/sun.vue";
-import Moon from "#adata-ui/icons/moon.vue";
+import Moon from '#adata-ui/icons/moon.vue'
+import Sun from '#adata-ui/icons/sun.vue'
+import { useEventListener } from '@vueuse/core'
 
 const colorMode = useColorMode()
 const setColorMode = useCookie('colorMode')
@@ -10,45 +10,87 @@ if (setColorMode.value) {
   colorMode.preference = setColorMode.value
 }
 
-const mode = computed({
-  get() {
-    return colorMode.value === 'dark'
-  },
-  set() {
-    const value = colorMode.value === 'dark' ? 'light' : 'dark'
-    const hostname = location.hostname.split('.').reverse()
-    const maxAge = 60 * 60 * 24 * 365 // 1 год
+const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365
 
-    colorMode.preference = value
-    document.cookie = `colorMode=${value}; max-age=${maxAge}; domain=.${hostname[1]}.${hostname[0]}; path=/`
-  }
-})
+function cookieDomainAttr(): string {
+  const parts = location.hostname.split('.').reverse()
+  if (parts.length < 2) return ''
+  return `; domain=.${parts[1]}.${parts[0]}`
+}
+
+const isDark = computed(() => colorMode.value === 'dark')
 
-onMounted(() => {
-  window.addEventListener('storage', (event) => {
-    if (event.key === 'nuxt-color-mode') {
-      colorMode.preference = event.newValue;
-    }
-  });
+function toggle() {
+  const value = isDark.value ? 'light' : 'dark'
+  colorMode.preference = value
+  document.cookie = `colorMode=${value}; max-age=${ONE_YEAR_SECONDS}${cookieDomainAttr()}; path=/`
+}
+
+useEventListener(window, 'storage', (event: StorageEvent) => {
+  if (event.key === 'nuxt-color-mode' && event.newValue) {
+    colorMode.preference = event.newValue
+  }
 })
 </script>
 
 <template>
   <client-only>
-    <a-toggle
-      v-model="mode"
-      size="2xl"
-      active-class="dark:bg-gray-800"
-      :off-icon="Sun"
-      off-icon-class="w-4 h-4"
-      on-icon-class="w-4 h-4"
-      :on-icon="Moon"
-      active-container-class="dark:bg-black"
+    <button
+      type="button"
+      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"
+    >
+      <transition
+        enter-active-class="color-mode__icon-enter-active"
+        enter-from-class="color-mode__icon-enter-from"
+        enter-to-class="color-mode__icon-enter-to"
+        leave-active-class="color-mode__icon-leave-active"
+        leave-from-class="color-mode__icon-leave-from"
+        leave-to-class="color-mode__icon-leave-to"
+        mode="out-in"
+      >
+        <component
+          :is="isDark ? Moon : Sun"
+          :key="isDark ? 'moon' : 'sun'"
+          class="size-5"
+          :font-controlled="false"
+          filled
+        />
+      </transition>
+    </button>
   </client-only>
 </template>
 
+<style scoped>
+.color-mode__icon-enter-active,
+.color-mode__icon-leave-active {
+  transition:
+    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.color-mode__icon-enter-from {
+  opacity: 0;
+  transform: rotate(-90deg) scale(0.6);
+}
+
+.color-mode__icon-leave-to {
+  opacity: 0;
+  transform: rotate(90deg) scale(0.6);
+}
+
+.color-mode__icon-enter-to,
+.color-mode__icon-leave-from {
+  opacity: 1;
+  transform: rotate(0) scale(1);
+}
 
-<style>
+@media (prefers-reduced-motion: reduce) {
+  .color-mode__icon-enter-active,
+  .color-mode__icon-leave-active {
+    transition: none;
+  }
+}
 </style>

package/components/features/dropdown/ADropdownV2.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import type { Placement } from '@floating-ui/vue'
+import { autoUpdate, flip, offset as offsetMiddleware, shift, useFloating } from '@floating-ui/vue'
+import { onClickOutside, onKeyStroke } from '@vueuse/core'
+
+defineOptions({ name: 'ADropdownV2' })
+
+const props = withDefaults(defineProps<{
+  placement?: Placement
+  offset?: number
+}>(), {
+  placement: 'bottom-end',
+  offset: 8,
+})
+
+const wrapper = ref<HTMLElement | null>(null)
+const reference = ref<HTMLElement | null>(null)
+const floating = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+
+const { x, y, strategy, update, placement: resolvedPlacement } = useFloating(reference, floating, {
+  placement: computed(() => props.placement),
+  strategy: 'absolute',
+  middleware: computed(() => [offsetMiddleware(props.offset), flip(), shift({ padding: 8 })]),
+})
+
+const transformOrigin = computed(() => {
+  const [side, align] = resolvedPlacement.value.split('-')
+  const vertical = side === 'top' ? 'bottom' : 'top'
+  const horizontal = align === 'start' ? 'left' : align === 'end' ? 'right' : 'center'
+  return `${vertical} ${horizontal}`
+})
+
+let cleanup: (() => void) | null = null
+watch(isOpen, (open) => {
+  if (open && reference.value && floating.value) {
+    cleanup = autoUpdate(reference.value, floating.value, update)
+  }
+  else {
+    cleanup?.()
+    cleanup = null
+  }
+})
+onUnmounted(() => cleanup?.())
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+function close() {
+  isOpen.value = false
+}
+
+onClickOutside(wrapper, () => {
+  if (isOpen.value) close()
+})
+onKeyStroke('Escape', () => {
+  if (isOpen.value) close()
+})
+</script>
+
+<template>
+  <div
+    ref="wrapper"
+    class="relative"
+  >
+    <div
+      ref="reference"
+      class="inline-flex"
+    >
+      <slot
+        :toggle="toggle"
+        :is-open="isOpen"
+      />
+    </div>
+
+    <transition
+      enter-active-class="a-dropdown-v2__enter-active"
+      enter-from-class="a-dropdown-v2__enter-from"
+      enter-to-class="a-dropdown-v2__enter-to"
+      leave-active-class="a-dropdown-v2__leave-active"
+      leave-from-class="a-dropdown-v2__leave-from"
+      leave-to-class="a-dropdown-v2__leave-to"
+    >
+      <div
+        v-if="isOpen"
+        ref="floating"
+        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` : '',
+          top: y != null ? `${y}px` : '',
+          transformOrigin,
+        }"
+      >
+        <slot
+          name="content"
+          :close="close"
+        />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.a-dropdown-v2__enter-active {
+  transition:
+    opacity 200ms ease,
+    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.a-dropdown-v2__leave-active {
+  transition:
+    opacity 140ms ease,
+    transform 160ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+.a-dropdown-v2__enter-from,
+.a-dropdown-v2__leave-to {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.96);
+}
+
+.a-dropdown-v2__enter-to,
+.a-dropdown-v2__leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .a-dropdown-v2__enter-active,
+  .a-dropdown-v2__leave-active {
+    transition: opacity 120ms ease;
+  }
+
+  .a-dropdown-v2__enter-from,
+  .a-dropdown-v2__leave-to {
+    transform: none;
+  }
+}
+</style>

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

@@ -1,73 +1,158 @@
 <script setup lang="ts">
-import { onClickOutside } from "@vueuse/core";
+import Check from '#adata-ui/icons/check/check.vue'
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+
+type LocaleItem = string | { code: string }
 
 const props = withDefaults(defineProps<{
   isMobile?: boolean
 }>(), {
-  isMobile: false
+  isMobile: false,
 })
 
-const langSwitcher = ref<HTMLDivElement | null>(null)
-
 const switchLocalePath = useSwitchLocalePath()
-const { locale, locales } = useI18n()
-const availableLocales = computed(() => {
-  return (locales.value).filter(i => i.code !== locale.value)
-})
+const { t, locale, locales } = useI18n()
+
+const testIdSuffix = computed(() => props.isMobile ? '-mobile' : '')
 
+const wrapper = ref<HTMLDivElement | null>(null)
+const reference = ref<HTMLButtonElement | null>(null)
+const floating = ref<HTMLDivElement | null>(null)
 const isOpen = ref(false)
 
-onClickOutside(langSwitcher,() => {
-  isOpen.value = false
+const placement = computed(() => props.isMobile ? 'bottom-end' as const : 'bottom-start' as const)
+
+const { x, y, strategy, update } = useFloating(reference, floating, {
+  placement,
+  strategy: 'absolute',
+  middleware: computed(() => [
+    offset(6),
+    flip({ fallbackPlacements: props.isMobile ? ['top-end'] : ['top-start'] }),
+    shift({ padding: 8 }),
+  ]),
 })
 
-const { t } = useI18n()
+let cleanup: (() => void) | null = null
+watch(isOpen, (open) => {
+  if (open && reference.value && floating.value) {
+    cleanup = autoUpdate(reference.value, floating.value, update)
+  }
+  else {
+    cleanup?.()
+    cleanup = null
+  }
+})
+onUnmounted(() => cleanup?.())
 
-const testIdSuffix = computed(() => props.isMobile ? '-mobile' : '')
+onClickOutside(wrapper, () => {
+  if (isOpen.value) isOpen.value = false
+})
 
-function onClick(loc: any) {
-  if ((loc?.code || loc) === locale.value) return
+function localeCode(loc: LocaleItem): string {
+  return typeof loc === 'string' ? loc : loc.code
+}
 
+function onSelect(loc: LocaleItem) {
   isOpen.value = false
-  window.location.assign(switchLocalePath(loc?.code || loc))
+  const code = localeCode(loc)
+  if (code === locale.value) return
+  window.location.assign(switchLocalePath(code))
 }
 </script>
 
 <template>
-  <div
-    ref="langSwitcher"
-    class="relative"
-  >
+  <div ref="wrapper" class="relative">
     <button
-      class="text-xs font-semibold py-1 px-2 bg-gray-100 dark:bg-gray-200/5 rounded"
-      @click="isOpen = true"
-      aria-hidden="true"
+      ref="reference"
+      type="button"
+      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'
+          : '',
+      ]"
       :data-test-id="`header-switch-language-button${testIdSuffix}`"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      @click="isOpen = !isOpen"
     >
       {{ t(`lang.${locale}.short`) }}
     </button>
-    <div
-      v-show="isOpen"
-      :class="['absolute z-20 bg-white shadow rounded-md p-2 right-0 lg:right-auto lg:left-0 left-auto flex flex-col dark:bg-gray-900']"
+
+    <transition
+      enter-active-class="lang-switcher__dropdown-enter-active"
+      enter-from-class="lang-switcher__dropdown-enter-from"
+      enter-to-class="lang-switcher__dropdown-enter-to"
+      leave-active-class="lang-switcher__dropdown-leave-active"
+      leave-from-class="lang-switcher__dropdown-leave-from"
+      leave-to-class="lang-switcher__dropdown-leave-to"
     >
-      <nuxt-link
-        v-for="loc in locales"
-        :data-test-id="`header-switch-${loc?.code}-language-button${testIdSuffix}`"
-        :class="[
-          'text-sm cursor-pointer px-4 py-2.5 flex justify-between',
-          {'text-primary bg-deepblue-500/5': locale === loc.code}
-        ]"
-        :to="switchLocalePath(loc?.code || loc)"
-        @click.prevent="onClick(loc)"
+      <div
+        v-if="isOpen"
+        ref="floating"
+        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` : '',
+          top: y != null ? `${y}px` : '',
+        }"
       >
-        {{ t(`lang.${loc?.code || loc}.long`) }}
-      </nuxt-link>
-    </div>
+        <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"
+          >
+            <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-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'
+                  : 'text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-800/60',
+              ]"
+              @click.prevent="onSelect(loc)"
+            >
+              <span>{{ t(`lang.${localeCode(loc)}.long`) }}</span>
+              <check
+                v-if="localeCode(loc) === locale"
+                class="size-4 shrink-0 text-blue-600 dark:text-blue-400"
+              />
+            </nuxt-link>
+          </li>
+        </ul>
+      </div>
+    </transition>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.shadow {
-  box-shadow: 0 1px 8px 0 #8B929C4D;
+<style scoped>
+.lang-switcher__dropdown-enter-active,
+.lang-switcher__dropdown-leave-active {
+  transition:
+    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.lang-switcher__dropdown-enter-from,
+.lang-switcher__dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.lang-switcher__dropdown-enter-to,
+.lang-switcher__dropdown-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lang-switcher__dropdown-enter-active,
+  .lang-switcher__dropdown-leave-active {
+    transition: none;
+  }
 }
 </style>