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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.7.1",
+  "version": "0.7.2-beta.1",
   "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/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
 }>()
@@ -28,6 +31,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 +44,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 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>