From eeb1511282b3042ec9c3d84361b83456fdb42529 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Fri, 24 Nov 2023 17:52:03 +0600
Subject: [PATCH 1/7] file-input

---
 src/App.vue                   | 17 +++++--
 src/components/DFileInput.vue | 87 +++++++++++++++++++++++++++++++++++
 src/index.ts                  |  7 +--
 3 files changed, 105 insertions(+), 6 deletions(-)
 create mode 100644 src/components/DFileInput.vue

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..6307b48 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,16 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <main>Vue-Tailwind</main>
+  <div class="mx-20">
+    <DFileInput v-model="file" clearable>
+      <template #clear-icon></template>
+    </DFileInput>
+    <p>Selected File: {{ file ? file.name : 'None' }}</p>
+  </div>
 </template>
+
+<script setup>
+import DFileInput from './components/DFileInput.vue'
+import { ref } from 'vue';
+
+const file = ref(null);
+</script>
diff --git a/src/components/DFileInput.vue b/src/components/DFileInput.vue
new file mode 100644
index 0000000..d9ee314
--- /dev/null
+++ b/src/components/DFileInput.vue
@@ -0,0 +1,87 @@
+<template>
+  <label :for="id" class="block">
+    <span>{{ label }}</span>
+    <div class="relative">
+      <input
+        :id="id"
+        ref="fileInput"
+        type="file"
+        :accept="accept"
+        :placeholder="placeholder"
+        :hint="hint"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        :clearable="clearable"
+        class="w-full border px-2 py-1 rounded"
+        @focus="$emit('focus')"
+        @blur="$emit('blur')"
+        @keyup.enter="$emit('enter')"
+        @input="$emit('update:modelValue', inputValue)"
+      />
+      <!-- <input
+        :id="id"
+        ref="fileInput"
+        v-model="inputValue"
+        :placeholder="placeholder"
+        :hint="hint"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        :clearable="clearable"
+        class="w-full border px-2 py-1 rounded"
+        @focus="$emit('focus')"
+        @blur="$emit('blur')"
+        @keyup.enter="$emit('enter')"
+        @input="$emit('update:modelValue', inputValue)"
+      /> -->
+      <div
+        v-if="clearable"
+        class="absolute right-2 top-0 bottom-0 cursor-pointer flex items-center h-full"
+      >
+        <slot name="clear-icon">
+          <svg
+            class="inline"
+            xmlns="http://www.w3.org/2000/svg"
+            height="14px"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"
+            />
+          </svg>
+        </slot>
+      </div>
+    </div>
+    <p v-if="hint">{{ hint }}</p>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: String,
+  label: String,
+  id: String,
+  type: {
+    type: String,
+    default: 'text'
+  },
+  accept: String,
+  placeholder: String,
+  hint: String,
+  disabled: Boolean,
+  readonly: Boolean,
+  autofocus: Boolean,
+  required: Boolean,
+  clearable: Boolean
+})
+const emit = defineEmits(['focus', 'blur', 'change', 'enter', 'update:modelValue'])
+
+const inputValue = ref(props.modelValue)
+
+watch(inputValue, (newValue: any) => {
+  emit('change', newValue)
+})
+</script>
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..c3bd811 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
-import DButton from "./components/DButton.vue"
-import DInput from "./components/DInput.vue"
+import DButton from './components/DButton.vue'
+import DInput from './components/DInput.vue'
+import DInput from './components/DFileInput.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DInput, DFileInput }

From f72189c497a52df7a6bfd7341824d51fd2660895 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Fri, 24 Nov 2023 18:29:34 +0600
Subject: [PATCH 2/7] file-input

---
 src/App.vue                   |  8 ++++----
 src/components/DFileInput.vue | 14 ++++++--------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6307b48..72761a1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,16 @@
 <template>
   <main>Vue-Tailwind</main>
   <div class="mx-20">
-    <DFileInput v-model="file" clearable>
+    <DFileInput v-model="file" @enter="console.log('enter')" @blur="console.log('blur')" clearable>
       <template #clear-icon></template>
     </DFileInput>
-    <p>Selected File: {{ file ? file.name : 'None' }}</p>
+    <pre>{{ file?.size }}</pre>
   </div>
 </template>
 
 <script setup>
 import DFileInput from './components/DFileInput.vue'
-import { ref } from 'vue';
+import { ref } from 'vue'
 
-const file = ref(null);
+const file = ref(null)
 </script>
diff --git a/src/components/DFileInput.vue b/src/components/DFileInput.vue
index d9ee314..0e9021f 100644
--- a/src/components/DFileInput.vue
+++ b/src/components/DFileInput.vue
@@ -17,7 +17,7 @@
         @focus="$emit('focus')"
         @blur="$emit('blur')"
         @keyup.enter="$emit('enter')"
-        @input="$emit('update:modelValue', inputValue)"
+        @change="handleFileChange"
       />
       <!-- <input
         :id="id"
@@ -61,7 +61,7 @@
 import { ref, watch } from 'vue'
 
 const props = defineProps({
-  modelValue: String,
+  modelValue: Object,
   label: String,
   id: String,
   type: {
@@ -77,11 +77,9 @@ const props = defineProps({
   required: Boolean,
   clearable: Boolean
 })
-const emit = defineEmits(['focus', 'blur', 'change', 'enter', 'update:modelValue'])
-
-const inputValue = ref(props.modelValue)
+const emit = defineEmits(['focus', 'blur', 'enter', 'update:modelValue'])
 
-watch(inputValue, (newValue: any) => {
-  emit('change', newValue)
-})
+const handleFileChange = (event: any) => {
+  emit('update:modelValue', event.target.files[0])
+}
 </script>

From 8527e1116fd37a6f48711cdd9d55bff8ca326b4e Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Fri, 24 Nov 2023 23:16:25 +0600
Subject: [PATCH 3/7] text-input

---
 src/App.vue                                 |  6 ++-
 src/components/DFileInput.vue               | 41 ++++++++++-----------
 src/components/__tests__/DFileInput.spec.ts | 35 ++++++++++++++++++
 3 files changed, 58 insertions(+), 24 deletions(-)
 create mode 100644 src/components/__tests__/DFileInput.spec.ts

diff --git a/src/App.vue b/src/App.vue
index 72761a1..4c16ce1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,12 @@
 <template>
   <main>Vue-Tailwind</main>
   <div class="mx-20">
-    <DFileInput v-model="file" @enter="console.log('enter')" @blur="console.log('blur')" clearable>
+    <DFileInput v-model="file" multiple clearable>
       <template #clear-icon></template>
     </DFileInput>
-    <pre>{{ file?.size }}</pre>
+    <div v-for="fil of file">
+      <p>{{ fil.name }}</p>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/DFileInput.vue b/src/components/DFileInput.vue
index 0e9021f..5d097c8 100644
--- a/src/components/DFileInput.vue
+++ b/src/components/DFileInput.vue
@@ -4,7 +4,7 @@
     <div class="relative">
       <input
         :id="id"
-        ref="fileInput"
+        :key="fileInputKey"
         type="file"
         :accept="accept"
         :placeholder="placeholder"
@@ -13,31 +13,16 @@
         :readonly="readonly"
         :required="required"
         :clearable="clearable"
+        :multiple="multiple"
         class="w-full border px-2 py-1 rounded"
         @focus="$emit('focus')"
         @blur="$emit('blur')"
-        @keyup.enter="$emit('enter')"
         @change="handleFileChange"
       />
-      <!-- <input
-        :id="id"
-        ref="fileInput"
-        v-model="inputValue"
-        :placeholder="placeholder"
-        :hint="hint"
-        :disabled="disabled"
-        :readonly="readonly"
-        :required="required"
-        :clearable="clearable"
-        class="w-full border px-2 py-1 rounded"
-        @focus="$emit('focus')"
-        @blur="$emit('blur')"
-        @keyup.enter="$emit('enter')"
-        @input="$emit('update:modelValue', inputValue)"
-      /> -->
       <div
         v-if="clearable"
         class="absolute right-2 top-0 bottom-0 cursor-pointer flex items-center h-full"
+        @click.stop.prevent="clearFile"
       >
         <slot name="clear-icon">
           <svg
@@ -58,10 +43,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 
 const props = defineProps({
-  modelValue: Object,
+  modelValue: [Object, String],
   label: String,
   id: String,
   type: {
@@ -75,11 +60,23 @@ const props = defineProps({
   readonly: Boolean,
   autofocus: Boolean,
   required: Boolean,
-  clearable: Boolean
+  clearable: Boolean,
+  multiple: Boolean
 })
 const emit = defineEmits(['focus', 'blur', 'enter', 'update:modelValue'])
 
+const fileInputKey = ref(0)
+
 const handleFileChange = (event: any) => {
-  emit('update:modelValue', event.target.files[0])
+  if (props.multiple) {
+    emit('update:modelValue', event.target.files)
+  } else {
+    emit('update:modelValue', event.target.files[0])
+  }
+}
+
+const clearFile = () => {
+  fileInputKey.value += 1
+  emit('update:modelValue', '')
 }
 </script>
diff --git a/src/components/__tests__/DFileInput.spec.ts b/src/components/__tests__/DFileInput.spec.ts
new file mode 100644
index 0000000..10c304e
--- /dev/null
+++ b/src/components/__tests__/DFileInput.spec.ts
@@ -0,0 +1,35 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DFileInput from '../DFileInput.vue'
+
+describe('DFileInput', () => {
+  let wrapper: any
+
+  beforeEach(() => {
+    wrapper = mount(DFileInput)
+  })
+
+  it('renders correctly with default props', () => {
+    expect(wrapper.find('label').exists()).toBe(true)
+    expect(wrapper.find('input[type="file"]').exists()).toBe(true)
+  })
+
+  it('displays label and placeholder text', async () => {
+    const label = 'File Input'
+    const placeholder = 'Choose a file'
+
+    await wrapper.setProps({ label, placeholder })
+
+    expect(wrapper.find('span').text()).toBe(label)
+    expect(wrapper.find('input').attributes('placeholder')).toBe(placeholder)
+  })
+
+  it('clears file on clearFile method call', async () => {
+    await wrapper.setProps({ modelValue: 'test-file.txt' })
+
+    await wrapper.vm.clearFile()
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual([''])
+  })
+})

From d6e0ed1056bf988f3bbe0779fb153066b9b46481 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Fri, 24 Nov 2023 23:20:44 +0600
Subject: [PATCH 4/7] file-input

---
 src/App.vue | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4c16ce1..ef16a8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,3 @@
 <template>
   <main>Vue-Tailwind</main>
-  <div class="mx-20">
-    <DFileInput v-model="file" multiple clearable>
-      <template #clear-icon></template>
-    </DFileInput>
-    <div v-for="fil of file">
-      <p>{{ fil.name }}</p>
-    </div>
-  </div>
 </template>
-
-<script setup>
-import DFileInput from './components/DFileInput.vue'
-import { ref } from 'vue'
-
-const file = ref(null)
-</script>

From ed9dfe3dbbca5ffe95a4ec36006c68eafb9a6bb3 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 29 Nov 2023 12:19:35 +0600
Subject: [PATCH 5/7] file-input

---
 src/App.vue                   | 9 +++++++++
 src/components/DFileInput.vue | 6 +++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index ef16a8e..a18a2b2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,12 @@
 <template>
   <main>Vue-Tailwind</main>
+  <DFileInput clearable/>
+  
 </template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import DFileInput from './components/DFileInput.vue'
+
+
+</script>
diff --git a/src/components/DFileInput.vue b/src/components/DFileInput.vue
index 5d097c8..809179d 100644
--- a/src/components/DFileInput.vue
+++ b/src/components/DFileInput.vue
@@ -20,7 +20,7 @@
         @change="handleFileChange"
       />
       <div
-        v-if="clearable"
+        v-if="clearable && isClear"
         class="absolute right-2 top-0 bottom-0 cursor-pointer flex items-center h-full"
         @click.stop.prevent="clearFile"
       >
@@ -45,6 +45,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+const isClear = ref(false)
 const props = defineProps({
   modelValue: [Object, String],
   label: String,
@@ -70,13 +71,16 @@ const fileInputKey = ref(0)
 const handleFileChange = (event: any) => {
   if (props.multiple) {
     emit('update:modelValue', event.target.files)
+    isClear.value = true
   } else {
     emit('update:modelValue', event.target.files[0])
+    isClear.value = true
   }
 }
 
 const clearFile = () => {
   fileInputKey.value += 1
   emit('update:modelValue', '')
+  isClear.value = false
 }
 </script>

From 02d6fe2a993343cf2a425dfa89c9a36e272553ec Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 29 Nov 2023 12:19:58 +0600
Subject: [PATCH 6/7] file-input

---
 src/App.vue | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a18a2b2..ef16a8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,3 @@
 <template>
   <main>Vue-Tailwind</main>
-  <DFileInput clearable/>
-  
 </template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-import DFileInput from './components/DFileInput.vue'
-
-
-</script>

From fb877e2432c15ff4516b31e1ec9240f134b099a1 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 17:46:50 +0600
Subject: [PATCH 7/7] file-input

---
 .../{DFileInput.vue => DxhFileInput.vue}      | 47 ++++++++-----------
 ...FileInput.spec.ts => DxhFileInput.spec.ts} |  6 +--
 src/index.ts                                  |  4 +-
 3 files changed, 25 insertions(+), 32 deletions(-)
 rename src/components/{DFileInput.vue => DxhFileInput.vue} (74%)
 rename src/components/__tests__/{DFileInput.spec.ts => DxhFileInput.spec.ts} (89%)

diff --git a/src/components/DFileInput.vue b/src/components/DxhFileInput.vue
similarity index 74%
rename from src/components/DFileInput.vue
rename to src/components/DxhFileInput.vue
index 809179d..549edbb 100644
--- a/src/components/DFileInput.vue
+++ b/src/components/DxhFileInput.vue
@@ -12,6 +12,7 @@
         :disabled="disabled"
         :readonly="readonly"
         :required="required"
+        :autofocus="autofocus"
         :clearable="clearable"
         :multiple="multiple"
         class="w-full border px-2 py-1 rounded"
@@ -22,14 +23,14 @@
       <div
         v-if="clearable && isClear"
         class="absolute right-2 top-0 bottom-0 cursor-pointer flex items-center h-full"
-        @click.stop.prevent="clearFile"
       >
-        <slot name="clear-icon">
+        <slot name="clear" :onClick="clearFile">
           <svg
             class="inline"
             xmlns="http://www.w3.org/2000/svg"
             height="14px"
             viewBox="0 0 512 512"
+            @click.stop.prevent="clearFile"
           >
             <path
               d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"
@@ -46,36 +47,28 @@
 import { ref } from 'vue'
 
 const isClear = ref(false)
-const props = defineProps({
-  modelValue: [Object, String],
-  label: String,
-  id: String,
-  type: {
-    type: String,
-    default: 'text'
-  },
-  accept: String,
-  placeholder: String,
-  hint: String,
-  disabled: Boolean,
-  readonly: Boolean,
-  autofocus: Boolean,
-  required: Boolean,
-  clearable: Boolean,
-  multiple: Boolean
-})
+interface props {
+  modelValue?: any
+  accept?: string
+  label?: string
+  id?: string
+  placeholder?: string
+  hint?: string
+  disabled?: boolean
+  readonly?: boolean
+  autofocus?: boolean
+  required?: boolean
+  clearable?: boolean
+  multiple?: boolean
+}
+const { multiple } = defineProps<props>()
 const emit = defineEmits(['focus', 'blur', 'enter', 'update:modelValue'])
 
 const fileInputKey = ref(0)
 
 const handleFileChange = (event: any) => {
-  if (props.multiple) {
-    emit('update:modelValue', event.target.files)
-    isClear.value = true
-  } else {
-    emit('update:modelValue', event.target.files[0])
-    isClear.value = true
-  }
+  emit('update:modelValue', event)
+  isClear.value = true
 }
 
 const clearFile = () => {
diff --git a/src/components/__tests__/DFileInput.spec.ts b/src/components/__tests__/DxhFileInput.spec.ts
similarity index 89%
rename from src/components/__tests__/DFileInput.spec.ts
rename to src/components/__tests__/DxhFileInput.spec.ts
index 10c304e..fc6e4b2 100644
--- a/src/components/__tests__/DFileInput.spec.ts
+++ b/src/components/__tests__/DxhFileInput.spec.ts
@@ -1,12 +1,12 @@
 import { describe, it, expect, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
-import DFileInput from '../DFileInput.vue'
+import DxhFileInput from '../DxhFileInput.vue'
 
-describe('DFileInput', () => {
+describe('DxhFileInput', () => {
   let wrapper: any
 
   beforeEach(() => {
-    wrapper = mount(DFileInput)
+    wrapper = mount(DxhFileInput)
   })
 
   it('renders correctly with default props', () => {
diff --git a/src/index.ts b/src/index.ts
index c3bd811..cdd33da 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
 import DButton from './components/DButton.vue'
 import DInput from './components/DInput.vue'
-import DInput from './components/DFileInput.vue'
+import DxhFileInput from './components/DxhFileInput.vue'
 
-export default { DButton, DInput, DFileInput }
+export default { DButton, DInput, DxhFileInput }