@proj-airi/ui 0.7.2-beta.1 → 0.7.2-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.7.2-beta.1",
+  "version": "0.7.2-beta.2",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",

package/src/components/Animations/TransitionVertical.vue

@@ -48,6 +48,9 @@ function getElementStyle(element: HTMLElement) {
   }
 }
 
+let animation: Animation | null = null
+let lastElement: HTMLElement | null = null
+
 function prepareElement(element: HTMLElement, initialStyle: initialStyle) {
   const { width } = getComputedStyle(element)
   element.style.width = width
@@ -72,7 +75,8 @@ function animateTransition(
   keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
   options?: number | KeyframeAnimationOptions,
 ) {
-  const animation = element.animate(keyframes, options)
+  lastElement = element
+  animation = element.animate(keyframes, options)
   // Set height to 'auto' to restore it after animation
   element.style.height = initialStyle.height
   animation.onfinish = () => {
@@ -106,9 +110,26 @@ function getEnterKeyframes(height: string, initialStyle: initialStyle) {
   ]
 }
 
+function cancelAnimation(HTMLElement: HTMLElement, overflow: string, done: () => void) {
+  if (HTMLElement !== lastElement)
+    return false
+  if (!animation)
+    return false
+  if (animation.playState !== 'running')
+    return false
+  animation.onfinish = () => {
+    HTMLElement.style.overflow = overflow
+    done()
+  }
+  animation.reverse()
+  return true
+}
+
 function enterTransition(element: Element, done: () => void) {
   const HTMLElement = element as HTMLElement
   const initialStyle = getElementStyle(HTMLElement)
+  if (cancelAnimation(HTMLElement, initialStyle.overflow, done))
+    return
   const height = prepareElement(HTMLElement, initialStyle)
   const keyframes = getEnterKeyframes(height, initialStyle)
   const options = { duration: props.duration, easing: props.easingEnter }
@@ -118,6 +139,8 @@ function enterTransition(element: Element, done: () => void) {
 function leaveTransition(element: Element, done: () => void) {
   const HTMLElement = element as HTMLElement
   const initialStyle = getElementStyle(HTMLElement)
+  if (cancelAnimation(HTMLElement, initialStyle.overflow, done))
+    return
   const { height } = getComputedStyle(HTMLElement)
   HTMLElement.style.height = height
   HTMLElement.style.overflow = 'hidden'

package/src/components/Form/Input/BasicInputFile.vue

@@ -17,13 +17,20 @@ const isDragging = ref(false)
 const isDraggingDebounced = useDebounce(isDragging, 150)
 
 function handleFileChange(e: Event) {
+  files.value = []
+
   const input = e.target as HTMLInputElement
+  if (!input.files)
+    return
+
+  for (let i = 0; i < input.files?.length; i++) {
+    files.value.push(input.files[i])
+  }
 
-  if (input.files && input.files.length > 0) {
-    firstFile.value = input.files[0]
+  if (files.value && files.value.length > 0) {
+    firstFile.value = files.value[0]
   }
 
-  files.value = Array.from(input.files || [])
   isDragging.value = false
 }
 </script>
@@ -44,7 +51,7 @@ function handleFileChange(e: Event) {
       type="file"
       :accept="accept"
       :multiple="multiple"
-      class="absolute inset-0 cursor-pointer appearance-none opacity-0"
+      class="absolute inset-0 h-0 w-0 cursor-pointer appearance-none opacity-0"
       @change="handleFileChange"
     >
     <slot :is-dragging="isDraggingDebounced" :first-file="firstFile" :files="files" />