adata-ui 2.1.40-beta.8 → 2.1.41-beta.0

package/components/features/dropdown/ADropdownV2.vue

@@ -1,141 +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 })]),
-})
-
-// 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'
-  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-xl 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>
+<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-surface-dark/10 dark:shadow-surface-dark/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/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>