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

package/components/features/dropdown/ADropdown.vue

@@ -1,127 +1,127 @@
-<script setup lang="ts">
-import type {Ref} from "vue";
-
-type Placement = 'left' | 'right'
-
-interface Props {
-  placement: Placement
-  fullWidth?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placement: "right",
-  fullWidth: false,
-})
-
-const expanded = ref(false)
-const menuWidth = ref(0)
-
-const onExpand = async () => {
-  expanded.value = !expanded.value
-
-  if (expanded.value) await updatePosition()
-}
-
-const menu = ref<HTMLElement | null>(null)
-const card = ref<HTMLElement | null>(null)
-
-async function updatePosition() {
-  await nextTick()
-  if (!menu.value || !card.value) return
-
-  menuWidth.value = card.value.offsetWidth
-  const {left, right} = menu.value.getBoundingClientRect()
-
-  if (props.placement === 'right') {
-    menuWidth.value < right ? card.value.style.right = '0px' : definePosition("right")
-  } else {
-    window.innerWidth - left > menuWidth.value ? card.value.style.left = '0px': definePosition("left")
-  }
-
-  function definePosition(placement: Placement) {
-    if (!card.value) return
-    if (menuWidth.value > window.innerWidth) {
-      card.value.style.position = "fixed"
-      card.value.style.left = "0"
-      card.value.style.maxWidth = "100%"
-    } else {
-      if (placement === 'left') {
-        card.value.style.left = - (left - (window.innerWidth - menuWidth.value)) + "px"
-      } else {
-        card.value.style.left = - left + "px"
-      }
-    }
-  }
-}
-
-
-const onClickOutside = (element: Ref, callback: Function) => {
-  nextTick(() => {
-    document.addEventListener('mousedown', e => {
-      if (!element.value) return
-      if (!element.value.contains(e.target)) callback()
-    })
-  })
-}
-
-onMounted(() => {
-  onClickOutside(menu, () => {
-    expanded.value = false
-  })
-  updatePosition()
-
-  window.addEventListener("resize", () => {
-    expanded.value = false
-  })
-})
-</script>
-
-<template>
-  <div
-    ref="menu"
-    class="relative"
-  >
-    <slot
-      :on-expand="onExpand"
-      :expanded="expanded"
-    />
-    <transition name="menu">
-      <div
-        ref="card"
-        v-if="expanded"
-        class="absolute z-20 mt-5 lg:mt-4 shadow-md rounded-[0.5rem] top-[44px] lg:top-[initial]"
-        :class="{ 'w-full': fullWidth }"
-      >
-        <slot
-          name="content"
-          :on-expand="onExpand"
-        >
-          content
-        </slot>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.menu-enter-active,
-.menu-leave-active {
-  animation: 0.12s overlay-transition cubic-bezier(0,0,0.2,1);
-}
-
-.menu-leave-active {
-  animation-direction: reverse;
-}
-
-@keyframes overlay-transition {
-  from {
-    opacity: 0;
-    transform: translateY(-16px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-</style>
+<script setup lang="ts">
+import type {Ref} from "vue";
+
+type Placement = 'left' | 'right'
+
+interface Props {
+  placement: Placement
+  fullWidth?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placement: "right",
+  fullWidth: false,
+})
+
+const expanded = ref(false)
+const menuWidth = ref(0)
+
+const onExpand = async () => {
+  expanded.value = !expanded.value
+
+  if (expanded.value) await updatePosition()
+}
+
+const menu = ref<HTMLElement | null>(null)
+const card = ref<HTMLElement | null>(null)
+
+async function updatePosition() {
+  await nextTick()
+  if (!menu.value || !card.value) return
+
+  menuWidth.value = card.value.offsetWidth
+  const {left, right} = menu.value.getBoundingClientRect()
+
+  if (props.placement === 'right') {
+    menuWidth.value < right ? card.value.style.right = '0px' : definePosition("right")
+  } else {
+    window.innerWidth - left > menuWidth.value ? card.value.style.left = '0px': definePosition("left")
+  }
+
+  function definePosition(placement: Placement) {
+    if (!card.value) return
+    if (menuWidth.value > window.innerWidth) {
+      card.value.style.position = "fixed"
+      card.value.style.left = "0"
+      card.value.style.maxWidth = "100%"
+    } else {
+      if (placement === 'left') {
+        card.value.style.left = - (left - (window.innerWidth - menuWidth.value)) + "px"
+      } else {
+        card.value.style.left = - left + "px"
+      }
+    }
+  }
+}
+
+
+const onClickOutside = (element: Ref, callback: Function) => {
+  nextTick(() => {
+    document.addEventListener('mousedown', e => {
+      if (!element.value) return
+      if (!element.value.contains(e.target)) callback()
+    })
+  })
+}
+
+onMounted(() => {
+  onClickOutside(menu, () => {
+    expanded.value = false
+  })
+  updatePosition()
+
+  window.addEventListener("resize", () => {
+    expanded.value = false
+  })
+})
+</script>
+
+<template>
+  <div
+    ref="menu"
+    class="relative"
+  >
+    <slot
+      :on-expand="onExpand"
+      :expanded="expanded"
+    />
+    <transition name="menu">
+      <div
+        ref="card"
+        v-if="expanded"
+        class="absolute z-20 mt-5 lg:mt-4 shadow-md rounded-[0.5rem] top-[44px] lg:top-[initial]"
+        :class="{ 'w-full': fullWidth }"
+      >
+        <slot
+          name="content"
+          :on-expand="onExpand"
+        >
+          content
+        </slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.menu-enter-active,
+.menu-leave-active {
+  animation: 0.12s overlay-transition cubic-bezier(0,0,0.2,1);
+}
+
+.menu-leave-active {
+  animation-direction: reverse;
+}
+
+@keyframes overlay-transition {
+  from {
+    opacity: 0;
+    transform: translateY(-16px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

package/components/features/go-top/GoTop.vue

@@ -1,63 +1,63 @@
-<script setup lang="ts">
-import { AIconChevronUp } from "#components";
-
-const props = defineProps<{
-  bottomOffset?: number
-}>()
-
-const isShow = ref(false)
-const footerHeight = ref(0)
-
-const goTop = () => {
-  window.scrollTo({top: 0, behavior: "smooth"})
-}
-
-const isViewPort = (el: HTMLElement | null) => {
-  const windowHeight = window.innerHeight;
-  const rect = el ? el.getBoundingClientRect() : {top: 0, bottom: 0};
-  return Math.ceil(
-    Math.max(
-      0,
-      rect.top > 0
-        ? Math.min(el.offsetHeight, windowHeight - rect.top)
-        : Math.min(rect.bottom, windowHeight)
-    )
-  )
-}
-
-const scrollHandle = () => {
-  isShow.value = window.scrollY > window.innerHeight / 2
-  if (isShow.value) {
-    const footer = document.getElementById('footer')
-    const offset = props.bottomOffset ? props.bottomOffset : 32
-    footerHeight.value = isViewPort(footer) + offset
-  }
-}
-
-onMounted(() => {
-  window.addEventListener("scroll", scrollHandle, { passive: true })
-})
-
-onUnmounted(() => {
-  window.removeEventListener("scroll", scrollHandle)
-})
-</script>
-
-<template>
-  <div
-    class="z-[9999] hidden lg:block fixed right-5 transition"
-    :class="[{ 'opacity-0': !isShow }]"
-    :style="{ bottom: footerHeight + 'px' }"
-  >
-    <a-button
-      @click="goTop"
-      form="icon"
-      :icon="AIconChevronUp"
-      icon-class="h-6 w-6"
-      size="lg"
-      variant="gray"
-    />
-  </div>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { AIconChevronUp } from "#components";
+
+const props = defineProps<{
+  bottomOffset?: number
+}>()
+
+const isShow = ref(false)
+const footerHeight = ref(0)
+
+const goTop = () => {
+  window.scrollTo({top: 0, behavior: "smooth"})
+}
+
+const isViewPort = (el: HTMLElement | null) => {
+  const windowHeight = window.innerHeight;
+  const rect = el ? el.getBoundingClientRect() : {top: 0, bottom: 0};
+  return Math.ceil(
+    Math.max(
+      0,
+      rect.top > 0
+        ? Math.min(el.offsetHeight, windowHeight - rect.top)
+        : Math.min(rect.bottom, windowHeight)
+    )
+  )
+}
+
+const scrollHandle = () => {
+  isShow.value = window.scrollY > window.innerHeight / 2
+  if (isShow.value) {
+    const footer = document.getElementById('footer')
+    const offset = props.bottomOffset ? props.bottomOffset : 32
+    footerHeight.value = isViewPort(footer) + offset
+  }
+}
+
+onMounted(() => {
+  window.addEventListener("scroll", scrollHandle, { passive: true })
+})
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", scrollHandle)
+})
+</script>
+
+<template>
+  <div
+    class="z-[9999] hidden lg:block fixed right-5 transition"
+    :class="[{ 'opacity-0': !isShow }]"
+    :style="{ bottom: footerHeight + 'px' }"
+  >
+    <a-button
+      @click="goTop"
+      form="icon"
+      :icon="AIconChevronUp"
+      icon-class="h-6 w-6"
+      size="lg"
+      variant="gray"
+    />
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -1,158 +1,73 @@
-<script setup lang="ts">
-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,
-})
-
-const switchLocalePath = useSwitchLocalePath()
-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)
-
-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 }),
-  ]),
-})
-
-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?.())
-
-onClickOutside(wrapper, () => {
-  if (isOpen.value) isOpen.value = false
-})
-
-function localeCode(loc: LocaleItem): string {
-  return typeof loc === 'string' ? loc : loc.code
-}
-
-function onSelect(loc: LocaleItem) {
-  isOpen.value = false
-  const code = localeCode(loc)
-  if (code === locale.value) return
-  window.location.assign(switchLocalePath(code))
-}
-</script>
-
-<template>
-  <div ref="wrapper" class="relative">
-    <button
-      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>
-
-    <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"
-    >
-      <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` : '',
-        }"
-      >
-        <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 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>
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+
+const props = withDefaults(defineProps<{
+  isMobile?: boolean
+}>(), {
+  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 isOpen = ref(false)
+
+onClickOutside(langSwitcher,() => {
+  isOpen.value = false
+})
+
+const { t } = useI18n()
+
+const testIdSuffix = computed(() => props.isMobile ? '-mobile' : '')
+
+function onClick(loc: any) {
+  if ((loc?.code || loc) === locale.value) return
+
+  isOpen.value = false
+  window.location.assign(switchLocalePath(loc?.code || loc))
+}
+</script>
+
+<template>
+  <div
+    ref="langSwitcher"
+    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"
+      :data-test-id="`header-switch-language-button${testIdSuffix}`"
+    >
+      {{ 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']"
+    >
+      <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)"
+      >
+        {{ t(`lang.${loc?.code || loc}.long`) }}
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.shadow {
+  box-shadow: 0 1px 8px 0 #8B929C4D;
+}
+</style>