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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.7.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/BidirectionalTransition.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  fromClass?: string
+  activeClass?: string
+  toClass?: string
+}>()
+</script>
+
+<template>
+  <Transition
+    :enter-from-class="fromClass"
+    :enter-active-class="activeClass"
+    :enter-to-class="toClass"
+    :leave-from-class="toClass"
+    :leave-active-class="activeClass"
+    :leave-to-class="fromClass"
+  >
+    <slot />
+  </Transition>
+</template>

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/Animations/index.ts

@@ -1,2 +1,3 @@
+export { default as BidirectionalTransition } from './BidirectionalTransition.vue'
 export { default as TransitionHorizontal } from './TransitionHorizontal.vue'
 export { default as TransitionVertical } from './TransitionVertical.vue'

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

@@ -2,7 +2,10 @@
 import { useDebounce } from '@vueuse/core'
 import { ref } from 'vue'
 
-defineProps<{
+const props = defineProps<{
+  class?: string | string[] | null
+  isDraggingClasses?: string | string[] | null
+  isNotDraggingClasses?: string | string[] | null
   accept?: string
   multiple?: boolean
 }>()
@@ -14,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>
@@ -28,6 +38,12 @@ function handleFileChange(e: Event) {
 <template>
   <label
     relative cursor-pointer
+    :class="[
+      props.class,
+      isDragging
+        ? [...Array.isArray(isDraggingClasses) ? isDraggingClasses : [isDraggingClasses]]
+        : [...Array.isArray(isNotDraggingClasses) ? isNotDraggingClasses : [isNotDraggingClasses]],
+    ]"
     @dragover="isDragging = true"
     @dragleave="isDragging = false"
   >
@@ -35,7 +51,7 @@ function handleFileChange(e: Event) {
       type="file"
       :accept="accept"
       :multiple="multiple"
-      class="absolute inset-0 h-full w-full 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" />

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

@@ -1,71 +1,49 @@
 <script setup lang="ts">
-import { useDebounce } from '@vueuse/core'
-import { ref } from 'vue'
+import BasicInputFile from './BasicInputFile.vue'
 
 defineProps<{
   accept?: string
   multiple?: boolean
 }>()
-
-const files = defineModel<File[]>({ required: false, default: () => [] })
-const firstFile = ref<File>()
-
-const isDragging = ref(false)
-const isDraggingDebounced = useDebounce(isDragging, 150)
-
-function handleFileChange(e: Event) {
-  const input = e.target as HTMLInputElement
-
-  if (input.files && input.files.length > 0) {
-    firstFile.value = input.files[0]
-  }
-
-  files.value = Array.from(input.files || [])
-  isDragging.value = false
-}
 </script>
 
 <template>
-  <label
-    relative
+  <BasicInputFile
     class="min-h-[120px] flex flex-col cursor-pointer items-center justify-center rounded-xl p-6"
-    :class="[
-      isDraggingDebounced ? 'border-primary-400 dark:border-primary-600 hover:border-primary-300 dark:hover:border-primary-700' : 'border-neutral-200 dark:border-neutral-700 hover:border-primary-300 dark:hover:border-primary-700',
-      isDraggingDebounced ? 'bg-primary-50/5 dark:bg-primary-900/5' : 'bg-white/60 dark:bg-black/30 hover:bg-white/80 dark:hover:bg-black/40',
+    :is-not-dragging-classes="[
+      'border-neutral-200 dark:border-neutral-700 hover:border-primary-300 dark:hover:border-primary-700',
+      'bg-white/60 dark:bg-black/30 hover:bg-white/80 dark:hover:bg-black/40',
+    ]"
+    :is-dragging-classes="[
+      'border-primary-400 dark:border-primary-600 hover:border-primary-300 dark:hover:border-primary-700',
+      'bg-primary-50/5 dark:bg-primary-900/5',
     ]"
     border="dashed 2"
     transition="all duration-300"
-    cursor-pointer opacity-95
+    opacity-95
     hover="scale-100 opacity-100 shadow-md dark:shadow-lg"
-    @dragover="isDragging = true"
-    @dragleave="isDragging = false"
+
+    :accept="accept"
+    :multiple="multiple"
   >
-    <input
-      type="file"
-      :accept="accept"
-      :multiple="multiple"
-      cursor-pointer
-      class="absolute inset-0 h-full w-full opacity-0"
-      @change="handleFileChange"
-    >
-    <slot :is-dragging="isDraggingDebounced" :first-file="firstFile" :files="files">
+    <template #default="{ isDragging }">
       <div
         class="flex flex-col items-center"
         :class="[
-          isDraggingDebounced ? 'text-primary-500 dark:text-primary-400' : 'text-neutral-400 dark:text-neutral-500',
+          isDragging ? 'text-primary-500 dark:text-primary-400' : 'text-neutral-400 dark:text-neutral-500',
         ]"
       >
         <div i-solar:upload-square-line-duotone mb-2 text-5xl />
         <p font-medium text="center lg">
           Upload
         </p>
-        <p v-if="isDraggingDebounced" text="center" text-sm>
+        <p v-if="isDragging" text="center" text-sm>
           Release to upload
         </p>
         <p v-else text="center" text-sm>
           Click or drag and drop a file here
         </p>
       </div>
-    </slot>
-  </label>
+    </template>
+  </BasicInputFile>
 </template>