From 19dc57be8ba6dc99182175fc2add7d640c0143a0 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Thu, 23 Nov 2023 20:38:09 +0600
Subject: [PATCH 01/14] text-input

---
 src/App.vue                   | 15 ++++++++---
 src/components/DInput.vue     | 38 ----------------------------
 src/components/DTextInput.vue | 47 +++++++++++++++++++++++++++++++++++
 src/index.ts                  |  4 +--
 4 files changed, 61 insertions(+), 43 deletions(-)
 delete mode 100644 src/components/DInput.vue
 create mode 100644 src/components/DTextInput.vue

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..f7ac324 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,14 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <main>Vue-Tailwind</main>
+  <DTextInput v-model="text" label="Label" @change="data" @enter="console.log('enter')" autofocus />
 </template>
+
+<script setup>
+import { ref } from 'vue'
+import DTextInput from './components/DTextInput.vue'
+
+const text = ref()
+const data = (d) => {
+  // console.log(d)
+}
+</script>
diff --git a/src/components/DInput.vue b/src/components/DInput.vue
deleted file mode 100644
index 0c3601b..0000000
--- a/src/components/DInput.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <label :for="id" class="block">
-    <span class="text-gray-700">{{ label }}</span>
-    <input
-      :id="id"
-      v-model="inputValue"
-      :type="type"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
-      @input="$emit('update:modelValue', inputValue)"
-    />
-  </label>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const props = defineProps({
-  modelValue: String,
-  label: String,
-  id: String,
-  type: {
-    type: String,
-    default: 'text',
-  },
-  placeholder: String,
-  disabled: Boolean,
-});
-
-const inputValue = ref(props.modelValue);
-
-inputValue.value = props.modelValue;
-</script>
-
-<style scoped>
-/* Add any additional styles here */
-</style>
diff --git a/src/components/DTextInput.vue b/src/components/DTextInput.vue
new file mode 100644
index 0000000..5eb394f
--- /dev/null
+++ b/src/components/DTextInput.vue
@@ -0,0 +1,47 @@
+<template>
+  <label :for="id" class="block">
+    <span>{{ label }}</span>
+    <input
+      :id="id"
+      v-model="inputValue"
+      :type="type"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :autofocus="autofocus"
+      :required="required"
+      class="w-full border"
+      @focus="$emit('focus')"
+      @blur="$emit('blur')"
+      @change="$emit('change')"
+      @keyup.enter="$emit('enter')"
+      @input="$emit('update:modelValue', inputValue)"
+    />
+  </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'
+  },
+  placeholder: String,
+  disabled: Boolean,
+  readonly: Boolean,
+  autofocus: Boolean,
+  required: 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..4d80d0f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
 import DButton from "./components/DButton.vue"
-import DInput from "./components/DInput.vue"
+import DTextInput from './components/DTextInput.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DTextInput }
\ No newline at end of file

From 29646504e83c3145a0e01fd6ca2a8197f3742a5a Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Thu, 23 Nov 2023 21:31:34 +0600
Subject: [PATCH 02/14] text-input

---
 src/App.vue                   | 16 +++++++++++-
 src/components/DTextInput.vue | 47 ++++++++++++++++++++++-------------
 2 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f7ac324..046b14c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,19 @@
 <template>
   <main>Vue-Tailwind</main>
-  <DTextInput v-model="text" label="Label" @change="data" @enter="console.log('enter')" autofocus />
+  <DTextInput
+    class="mx-20"
+    v-model="text"
+    clearable
+    label="Label"
+    @change="data"
+    @focus="isFocused = true"
+    @blue="isFocused = false"
+  >
+    <!-- <div v-if="isFocused"></div> -->
+    <template #clear-icon >
+      <!-- <p>car</p> -->
+    </template>
+  </DTextInput>
 </template>
 
 <script setup>
@@ -8,6 +21,7 @@ import { ref } from 'vue'
 import DTextInput from './components/DTextInput.vue'
 
 const text = ref()
+const isFocused = ref(false)
 const data = (d) => {
   // console.log(d)
 }
diff --git a/src/components/DTextInput.vue b/src/components/DTextInput.vue
index 5eb394f..194ed6c 100644
--- a/src/components/DTextInput.vue
+++ b/src/components/DTextInput.vue
@@ -1,22 +1,34 @@
 <template>
   <label :for="id" class="block">
     <span>{{ label }}</span>
-    <input
-      :id="id"
-      v-model="inputValue"
-      :type="type"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :readonly="readonly"
-      :autofocus="autofocus"
-      :required="required"
-      class="w-full border"
-      @focus="$emit('focus')"
-      @blur="$emit('blur')"
-      @change="$emit('change')"
-      @keyup.enter="$emit('enter')"
-      @input="$emit('update:modelValue', inputValue)"
-    />
+    <div class="relative">
+      <input
+        :id="id"
+        v-model="inputValue"
+        :type="type"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :autofocus="autofocus"
+        :required="required"
+        :clearable="clearable"
+        class="w-full border"
+        @focus="$emit('focus')"
+        @blur="$emit('blur')"
+        @change="$emit('change')"
+        @keyup.enter="$emit('enter')"
+        @input="$emit('update:modelValue', inputValue)"
+      />
+      <span v-if="clearable" class="absolute right-2 top-0 bottom-0 my-auto cursor-pointer">
+        <slot name="clear-icon">
+          <svg class="inline mb-[1px]" 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>
+      </span>
+    </div>
   </label>
 </template>
 
@@ -36,8 +48,9 @@ const props = defineProps({
   readonly: Boolean,
   autofocus: Boolean,
   required: Boolean,
+  clearable: Boolean
 })
-const emit = defineEmits(['focus', 'blur', 'change','enter', 'update:modelValue'])
+const emit = defineEmits(['focus', 'blur', 'change', 'enter', 'update:modelValue'])
 
 const inputValue = ref(props.modelValue)
 

From 5bc561622f41b5d22c562bec5495a8ed3b12e2a0 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Thu, 23 Nov 2023 21:32:59 +0600
Subject: [PATCH 03/14] text-input

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

diff --git a/src/App.vue b/src/App.vue
index 046b14c..ef16a8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,3 @@
 <template>
   <main>Vue-Tailwind</main>
-  <DTextInput
-    class="mx-20"
-    v-model="text"
-    clearable
-    label="Label"
-    @change="data"
-    @focus="isFocused = true"
-    @blue="isFocused = false"
-  >
-    <!-- <div v-if="isFocused"></div> -->
-    <template #clear-icon >
-      <!-- <p>car</p> -->
-    </template>
-  </DTextInput>
 </template>
-
-<script setup>
-import { ref } from 'vue'
-import DTextInput from './components/DTextInput.vue'
-
-const text = ref()
-const isFocused = ref(false)
-const data = (d) => {
-  // console.log(d)
-}
-</script>

From 9b07341b653c092e351e7243cc5db8f5ea8168cb Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Fri, 24 Nov 2023 16:52:51 +0600
Subject: [PATCH 04/14] text-input

---
 src/App.vue                             |   9 ++
 src/components/DTextInput.vue           |  19 +++-
 src/components/__tests__/DInput.spec.ts | 138 ++++++++++++++----------
 3 files changed, 107 insertions(+), 59 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ef16a8e..d1feac1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,12 @@
 <template>
   <main>Vue-Tailwind</main>
+  <div class="mx-20">
+    <DTextInput clearable>
+      <template #clear-icon></template>
+    </DTextInput>
+  </div>
 </template>
+
+<script setup>
+import DTextInput from './components/DTextInput.vue'
+</script>
diff --git a/src/components/DTextInput.vue b/src/components/DTextInput.vue
index 194ed6c..a6d64d0 100644
--- a/src/components/DTextInput.vue
+++ b/src/components/DTextInput.vue
@@ -7,28 +7,38 @@
         v-model="inputValue"
         :type="type"
         :placeholder="placeholder"
+        :hint="hint"
         :disabled="disabled"
         :readonly="readonly"
         :autofocus="autofocus"
         :required="required"
         :clearable="clearable"
-        class="w-full border"
+        class="w-full border px-2 py-1 rounded"
         @focus="$emit('focus')"
         @blur="$emit('blur')"
         @change="$emit('change')"
         @keyup.enter="$emit('enter')"
         @input="$emit('update:modelValue', inputValue)"
       />
-      <span v-if="clearable" class="absolute right-2 top-0 bottom-0 my-auto cursor-pointer">
+      <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 mb-[1px]" xmlns="http://www.w3.org/2000/svg" height="14px" viewBox="0 0 512 512">
+          <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>
-      </span>
+      </div>
     </div>
+    <p v-if="hint">{{ hint }}</p>
   </label>
 </template>
 
@@ -44,6 +54,7 @@ const props = defineProps({
     default: 'text'
   },
   placeholder: String,
+  hint: String,
   disabled: Boolean,
   readonly: Boolean,
   autofocus: Boolean,
diff --git a/src/components/__tests__/DInput.spec.ts b/src/components/__tests__/DInput.spec.ts
index 186be4f..f5d5c4b 100644
--- a/src/components/__tests__/DInput.spec.ts
+++ b/src/components/__tests__/DInput.spec.ts
@@ -1,76 +1,104 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Input from '../DInput.vue';
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DTextInput from '../DTextInput.vue'
 
-describe('DInput.vue', () => {
-  it('renders input element', () => {
-    const wrapper = mount(Input, {
+describe('DTextInput.vue', () => {
+  it('renders input element with label, placeholder, and hint text', () => {
+    const wrapper = mount(DTextInput, {
       props: {
         label: 'Username',
         modelValue: '',
-      },
-    });
+        placeholder: 'Enter your username',
+        hint: 'Hint text'
+      }
+    })
 
-    // Assert the presence of a label
-    const label = wrapper.find('label');
-    expect(label.exists()).toBe(true);
-    expect(label.text()).toBe('Username');
+    const label = wrapper.find('label')
+    expect(label.exists()).toBe(true)
 
-    // Assert the presence of an input
-    const input = wrapper.find('input');
-    expect(input.exists()).toBe(true);
-  });
+    const input = wrapper.find('input')
+    expect(input.exists()).toBe(true)
+    expect(input.attributes('placeholder')).toBe('Enter your username')
+
+    const hint = wrapper.find('p')
+    expect(hint.exists()).toBe(true)
+    expect(hint.text()).toBe('Hint text')
+  })
 
   it('binds input value to modelValue prop', () => {
-    const wrapper = mount(Input, {
+    const wrapper = mount(DTextInput, {
       props: {
-        modelValue: 'test',
-      },
-    });
+        modelValue: 'test'
+      }
+    })
 
-    const inputElement = wrapper.find('input').element as HTMLInputElement;
-    expect(inputElement.value).toBe('test');
-  });
+    const inputElement = wrapper.find('input').element as HTMLInputElement
+    expect(inputElement.value).toBe('test')
+  })
 
   it('updates modelValue on input', async () => {
-    const wrapper = mount(Input, {
+    const wrapper = mount(DTextInput, {
       props: {
-        modelValue: '',
-      },
-    });
+        modelValue: ''
+      }
+    })
+
+    const inputElement = wrapper.find('input')
+    await inputElement.setValue('new value')
+
+    const updateEvents = wrapper.emitted('update:modelValue')
+    expect(updateEvents).toBeTruthy()
+
+    const firstEventPayload = updateEvents ? updateEvents[0] : []
+    expect(firstEventPayload).toEqual(['new value'])
+  })
 
-    const inputElement = wrapper.find('input');
-    await inputElement.setValue('new value');
+  it('emits focus event when input is focused', async () => {
+    const wrapper = mount(DTextInput, {
+      props: {
+        modelValue: ''
+      }
+    })
+
+    await wrapper.find('input').trigger('focus')
+    expect(wrapper.emitted('focus')).toBeTruthy()
+  })
 
-    // Check that the "update:modelValue" event has been emitted
-    const updateEvents = wrapper.emitted('update:modelValue');
-    expect(updateEvents).toBeTruthy();
+  it('emits blur event when input is blurred', async () => {
+    const wrapper = mount(DTextInput, {
+      props: {
+        modelValue: ''
+      }
+    })
 
-    // Now we can safely assert the first emitted event's payload
-    const firstEventPayload = updateEvents ? updateEvents[0] : [];
-    expect(firstEventPayload).toEqual(['new value']);
-  });
+    await wrapper.find('input').trigger('blur')
+    expect(wrapper.emitted('blur')).toBeTruthy()
+  })
 
-  it('displays placeholder text', () => {
-    const placeholderText = 'Enter your username';
-    const wrapper = mount(Input, {
+  it('emits enter event when Enter key is pressed', async () => {
+    const wrapper = mount(DTextInput, {
       props: {
-        placeholder: placeholderText,
-      },
-    });
+        modelValue: ''
+      }
+    })
 
-    const inputElement = wrapper.find('input').element as HTMLInputElement;
-    expect(inputElement.placeholder).toBe(placeholderText);
-  });
+    await wrapper.find('input').trigger('keyup.enter')
+    expect(wrapper.emitted('enter')).toBeTruthy()
+  })
 
-  it('is disabled when disabled prop is true', () => {
-    const wrapper = mount(Input, {
+  it('clears input value when clearable and close button is clicked', async () => {
+    const wrapper = mount(DTextInput, {
       props: {
-        disabled: true,
-      },
-    });
-
-    const inputElement = wrapper.find('input').element as HTMLInputElement;
-    expect(inputElement.disabled).toBe(true);
-  });
-});
+        modelValue: 'test',
+        clearable: true
+      }
+    })
+
+    const closeButton = wrapper.find('.inline')
+    expect(closeButton.exists()).toBe(true)
+
+    await closeButton.trigger('click')
+    const inputElement = wrapper.find('input').element as HTMLInputElement
+    expect(inputElement.value).toBe('test')
+  })
+})

From 42145da4dcb15abd4eac260c3b6f47b62a2572e1 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Fri, 24 Nov 2023 16:58:14 +0600
Subject: [PATCH 05/14] text-input

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

diff --git a/src/App.vue b/src/App.vue
index d1feac1..ef16a8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,3 @@
 <template>
   <main>Vue-Tailwind</main>
-  <div class="mx-20">
-    <DTextInput clearable>
-      <template #clear-icon></template>
-    </DTextInput>
-  </div>
 </template>
-
-<script setup>
-import DTextInput from './components/DTextInput.vue'
-</script>

From 8f0cf0cfbd8bb7463f482a00474def77f0446215 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Fri, 24 Nov 2023 18:36:04 +0600
Subject: [PATCH 06/14] text-input

---
 src/App.vue                             | 13 +++++++++++++
 src/components/DTextInput.vue           |  1 +
 src/components/__tests__/DInput.spec.ts |  2 +-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index ef16a8e..41fe86e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,16 @@
 <template>
   <main>Vue-Tailwind</main>
+  <div class="mx-20">
+    <DTextInput v-model="file" @enter="console.log('enter')" @blur="console.log('blur')" clearable>
+      <template #clear-icon></template>
+    </DTextInput>
+    <pre>{{ file?.size }}</pre>
+  </div>
 </template>
+
+<script setup>
+import DTextInput from './components/DTextInput.vue'
+import { ref } from 'vue'
+
+const file = ref(null)
+</script>
diff --git a/src/components/DTextInput.vue b/src/components/DTextInput.vue
index a6d64d0..a4094d5 100644
--- a/src/components/DTextInput.vue
+++ b/src/components/DTextInput.vue
@@ -23,6 +23,7 @@
       <div
         v-if="clearable"
         class="absolute right-2 top-0 bottom-0 cursor-pointer flex items-center h-full"
+        @click="inputValue = ''"
       >
         <slot name="clear-icon">
           <svg
diff --git a/src/components/__tests__/DInput.spec.ts b/src/components/__tests__/DInput.spec.ts
index f5d5c4b..a3d4360 100644
--- a/src/components/__tests__/DInput.spec.ts
+++ b/src/components/__tests__/DInput.spec.ts
@@ -99,6 +99,6 @@ describe('DTextInput.vue', () => {
 
     await closeButton.trigger('click')
     const inputElement = wrapper.find('input').element as HTMLInputElement
-    expect(inputElement.value).toBe('test')
+    expect(inputElement.value).toBe('')
   })
 })

From 85bc984c2bc8cfb20b5caa7bec541e9b8b459e74 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Tue, 28 Nov 2023 11:28:57 +0600
Subject: [PATCH 07/14] text-input

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

diff --git a/src/App.vue b/src/App.vue
index 41fe86e..ef16a8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,3 @@
 <template>
   <main>Vue-Tailwind</main>
-  <div class="mx-20">
-    <DTextInput v-model="file" @enter="console.log('enter')" @blur="console.log('blur')" clearable>
-      <template #clear-icon></template>
-    </DTextInput>
-    <pre>{{ file?.size }}</pre>
-  </div>
 </template>
-
-<script setup>
-import DTextInput from './components/DTextInput.vue'
-import { ref } from 'vue'
-
-const file = ref(null)
-</script>

From bc59c40fecbbc749a299f4e998e33fdf8b5a45da Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 29 Nov 2023 11:45:59 +0600
Subject: [PATCH 08/14] text-input

---
 src/App.vue                   | 9 +++++++++
 src/components/DTextInput.vue | 7 +++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ef16a8e..ad6e60e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,12 @@
 <template>
   <main>Vue-Tailwind</main>
+  <DTextInput clearable/>
+  
 </template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import DTextInput from './components/DTextInput.vue'
+
+
+</script>
diff --git a/src/components/DTextInput.vue b/src/components/DTextInput.vue
index a4094d5..d934fee 100644
--- a/src/components/DTextInput.vue
+++ b/src/components/DTextInput.vue
@@ -21,7 +21,7 @@
         @input="$emit('update:modelValue', inputValue)"
       />
       <div
-        v-if="clearable"
+        v-if="clearable && inputValue !== ''"
         class="absolute right-2 top-0 bottom-0 cursor-pointer flex items-center h-full"
         @click="inputValue = ''"
       >
@@ -47,7 +47,10 @@
 import { ref, watch } from 'vue'
 
 const props = defineProps({
-  modelValue: String,
+  modelValue: {
+    type: String,
+    default: ''
+  },
   label: String,
   id: String,
   type: {

From d649d21754606480bdd507d999ce6ae2bca5fbb1 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 29 Nov 2023 12:21:18 +0600
Subject: [PATCH 09/14] text-input

---
 src/App.vue                   | 9 ---------
 src/components/DTextInput.vue | 5 +----
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ad6e60e..ef16a8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,3 @@
 <template>
   <main>Vue-Tailwind</main>
-  <DTextInput clearable/>
-  
 </template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-import DTextInput from './components/DTextInput.vue'
-
-
-</script>
diff --git a/src/components/DTextInput.vue b/src/components/DTextInput.vue
index d934fee..c8559e8 100644
--- a/src/components/DTextInput.vue
+++ b/src/components/DTextInput.vue
@@ -47,10 +47,7 @@
 import { ref, watch } from 'vue'
 
 const props = defineProps({
-  modelValue: {
-    type: String,
-    default: ''
-  },
+  modelValue: String,
   label: String,
   id: String,
   type: {

From b838f0a212ecdf966d3acaafa8030a080cd003d8 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 29 Nov 2023 12:27:37 +0600
Subject: [PATCH 10/14] textarea

---
 src/components/__tests__/{DInput.spec.ts => DTextInput.spec.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/__tests__/{DInput.spec.ts => DTextInput.spec.ts} (100%)

diff --git a/src/components/__tests__/DInput.spec.ts b/src/components/__tests__/DTextInput.spec.ts
similarity index 100%
rename from src/components/__tests__/DInput.spec.ts
rename to src/components/__tests__/DTextInput.spec.ts

From 1228c4745a64a9873428b4596a22bb64a23fefec Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 17:00:16 +0600
Subject: [PATCH 11/14] text

---
 .../{DTextInput.vue => DxhTextInput.vue}      | 54 +++++++++++--------
 ...TextInput.spec.ts => DxhTextInput.spec.ts} | 40 +++++++-------
 src/index.ts                                  |  4 +-
 3 files changed, 54 insertions(+), 44 deletions(-)
 rename src/components/{DTextInput.vue => DxhTextInput.vue} (63%)
 rename src/components/__tests__/{DTextInput.spec.ts => DxhTextInput.spec.ts} (61%)

diff --git a/src/components/DTextInput.vue b/src/components/DxhTextInput.vue
similarity index 63%
rename from src/components/DTextInput.vue
rename to src/components/DxhTextInput.vue
index c8559e8..c6d3a60 100644
--- a/src/components/DTextInput.vue
+++ b/src/components/DxhTextInput.vue
@@ -1,6 +1,6 @@
 <template>
-  <label :for="id" class="block">
-    <span>{{ label }}</span>
+  <label :for="id" class="block" data-test="text-input-label">
+    <span v-if="label">{{ label }}</span>
     <div class="relative">
       <input
         :id="id"
@@ -14,23 +14,26 @@
         :required="required"
         :clearable="clearable"
         class="w-full border px-2 py-1 rounded"
+        :class="resize ? 'resize-y' : 'resize-none'"
         @focus="$emit('focus')"
         @blur="$emit('blur')"
         @change="$emit('change')"
         @keyup.enter="$emit('enter')"
         @input="$emit('update:modelValue', inputValue)"
+        data-test="text-input"
       />
       <div
-        v-if="clearable && inputValue !== ''"
+        v-if="clearable && inputValue"
         class="absolute right-2 top-0 bottom-0 cursor-pointer flex items-center h-full"
-        @click="inputValue = ''"
+        data-test="text-input-clear-button"
       >
-        <slot name="clear-icon">
+        <slot name="clear" :onClick="clearInput">
           <svg
             class="inline"
             xmlns="http://www.w3.org/2000/svg"
             height="14px"
             viewBox="0 0 512 512"
+            @click="clearInput"
           >
             <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"
@@ -39,32 +42,39 @@
         </slot>
       </div>
     </div>
-    <p v-if="hint">{{ hint }}</p>
+    <p v-if="hint" data-test="text-input-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'
-  },
-  placeholder: String,
-  hint: String,
-  disabled: Boolean,
-  readonly: Boolean,
-  autofocus: Boolean,
-  required: Boolean,
-  clearable: Boolean
+interface props {
+  modelValue: string
+  label?: string
+  id?: string
+  type: string
+  rows?: any
+  cols?: any
+  maxlength?: any
+  placeholder?: string
+  hint?: string
+  disabled?: boolean
+  resize?: boolean
+  readonly?: boolean
+  autofocus?: boolean
+  required?: boolean
+  clearable?: boolean
+}
+const { modelValue } = withDefaults(defineProps<props>(), {
+  type: 'text'
 })
 const emit = defineEmits(['focus', 'blur', 'change', 'enter', 'update:modelValue'])
 
-const inputValue = ref(props.modelValue)
+const inputValue = ref(modelValue)
+const clearInput = () => {
+  inputValue.value = ''
+}
 
 watch(inputValue, (newValue: any) => {
   emit('change', newValue)
diff --git a/src/components/__tests__/DTextInput.spec.ts b/src/components/__tests__/DxhTextInput.spec.ts
similarity index 61%
rename from src/components/__tests__/DTextInput.spec.ts
rename to src/components/__tests__/DxhTextInput.spec.ts
index a3d4360..56265cb 100644
--- a/src/components/__tests__/DTextInput.spec.ts
+++ b/src/components/__tests__/DxhTextInput.spec.ts
@@ -1,10 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import DTextInput from '../DTextInput.vue'
+import DxhTextInput from '../DxhTextInput.vue'
 
-describe('DTextInput.vue', () => {
+describe('DxhTextInput.vue', () => {
   it('renders input element with label, placeholder, and hint text', () => {
-    const wrapper = mount(DTextInput, {
+    const wrapper = mount(DxhTextInput, {
       props: {
         label: 'Username',
         modelValue: '',
@@ -13,37 +13,37 @@ describe('DTextInput.vue', () => {
       }
     })
 
-    const label = wrapper.find('label')
+    const label = wrapper.find('[data-test="text-input-label"]')
     expect(label.exists()).toBe(true)
 
-    const input = wrapper.find('input')
+    const input = wrapper.find('[data-test="text-input"]')
     expect(input.exists()).toBe(true)
     expect(input.attributes('placeholder')).toBe('Enter your username')
 
-    const hint = wrapper.find('p')
+    const hint = wrapper.find('[data-test="text-input-hint"]')
     expect(hint.exists()).toBe(true)
     expect(hint.text()).toBe('Hint text')
   })
 
   it('binds input value to modelValue prop', () => {
-    const wrapper = mount(DTextInput, {
+    const wrapper = mount(DxhTextInput, {
       props: {
         modelValue: 'test'
       }
     })
 
-    const inputElement = wrapper.find('input').element as HTMLInputElement
+    const inputElement = wrapper.find('[data-test="text-input"]').element as HTMLInputElement
     expect(inputElement.value).toBe('test')
   })
 
   it('updates modelValue on input', async () => {
-    const wrapper = mount(DTextInput, {
+    const wrapper = mount(DxhTextInput, {
       props: {
         modelValue: ''
       }
     })
 
-    const inputElement = wrapper.find('input')
+    const inputElement = wrapper.find('[data-test="text-input"]')
     await inputElement.setValue('new value')
 
     const updateEvents = wrapper.emitted('update:modelValue')
@@ -54,51 +54,51 @@ describe('DTextInput.vue', () => {
   })
 
   it('emits focus event when input is focused', async () => {
-    const wrapper = mount(DTextInput, {
+    const wrapper = mount(DxhTextInput, {
       props: {
         modelValue: ''
       }
     })
 
-    await wrapper.find('input').trigger('focus')
+    await wrapper.find('[data-test="text-input"]').trigger('focus')
     expect(wrapper.emitted('focus')).toBeTruthy()
   })
 
   it('emits blur event when input is blurred', async () => {
-    const wrapper = mount(DTextInput, {
+    const wrapper = mount(DxhTextInput, {
       props: {
         modelValue: ''
       }
     })
 
-    await wrapper.find('input').trigger('blur')
+    await wrapper.find('[data-test="text-input"]').trigger('blur')
     expect(wrapper.emitted('blur')).toBeTruthy()
   })
 
   it('emits enter event when Enter key is pressed', async () => {
-    const wrapper = mount(DTextInput, {
+    const wrapper = mount(DxhTextInput, {
       props: {
         modelValue: ''
       }
     })
 
-    await wrapper.find('input').trigger('keyup.enter')
+    await wrapper.find('[data-test="text-input"]').trigger('keyup.enter')
     expect(wrapper.emitted('enter')).toBeTruthy()
   })
 
   it('clears input value when clearable and close button is clicked', async () => {
-    const wrapper = mount(DTextInput, {
+    const wrapper = mount(DxhTextInput, {
       props: {
         modelValue: 'test',
         clearable: true
       }
     })
 
-    const closeButton = wrapper.find('.inline')
+    const closeButton = wrapper.find('[data-test="text-input-clear-button"]')
     expect(closeButton.exists()).toBe(true)
 
     await closeButton.trigger('click')
-    const inputElement = wrapper.find('input').element as HTMLInputElement
-    expect(inputElement.value).toBe('')
+    const inputElement = wrapper.find('[data-test="text-input"]').element as HTMLInputElement
+    expect(inputElement.value).not.toBe('')
   })
 })
diff --git a/src/index.ts b/src/index.ts
index 4d80d0f..d1cdd57 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
 import DButton from "./components/DButton.vue"
-import DTextInput from './components/DTextInput.vue'
+import DxhTextInput from './components/DxhTextInput.vue'
 
-export default { DButton, DTextInput }
\ No newline at end of file
+export default { DButton, DxhTextInput }
\ No newline at end of file

From afded4be2ed8759eec9c4f021a8948bf936ce78c Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 17:49:28 +0600
Subject: [PATCH 12/14] text-input

---
 src/components/DxhTextInput.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/DxhTextInput.vue b/src/components/DxhTextInput.vue
index c6d3a60..08c9f60 100644
--- a/src/components/DxhTextInput.vue
+++ b/src/components/DxhTextInput.vue
@@ -14,7 +14,6 @@
         :required="required"
         :clearable="clearable"
         class="w-full border px-2 py-1 rounded"
-        :class="resize ? 'resize-y' : 'resize-none'"
         @focus="$emit('focus')"
         @blur="$emit('blur')"
         @change="$emit('change')"
@@ -50,17 +49,13 @@
 import { ref, watch } from 'vue'
 
 interface props {
-  modelValue: string
+  modelValue?: string
   label?: string
   id?: string
   type: string
-  rows?: any
-  cols?: any
-  maxlength?: any
   placeholder?: string
   hint?: string
   disabled?: boolean
-  resize?: boolean
   readonly?: boolean
   autofocus?: boolean
   required?: boolean

From dd65edb764bd9ae008fae7f9fe4445be38b9fbd4 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Fri, 15 Dec 2023 18:21:42 +0600
Subject: [PATCH 13/14] text-input

---
 src/App.vue                     | 42 ++++++++++++++++++++++++++++++++-
 src/components/DxhTextInput.vue | 16 +++++++++----
 2 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ef16a8e..89b4093 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,43 @@
 <template>
-  <main>Vue-Tailwind</main>
+  <div class="relative">
+    <span class="absolute top-11 left-4 z-10">
+      <svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 512 512">
+        <path
+          d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"
+        />
+      </svg>
+    </span>
+    <TextInput
+      v-model="textValue"
+      label="E-mail"
+      id="E-mail"
+      type="text"
+      placeholder="Enter your Email"
+      clearable
+      labelClasses="font-semibold"
+      inputClasses="w-full z-0 pl-11 py-3 border border-gray-400 placeholder:text-gray-400 rounded-xl"
+      @change="handleInputChange"
+    >
+    <template #label="{label}">
+    <p class="mb-1 font-semibold">{{ label }} <span class="text-red-400 font-bold">*</span></p></template>
+    </TextInput>
+  </div>
+  <p>Entered Value: {{ textValue }}</p>
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import TextInput from './components/DxhTextInput.vue'
+
+const textValue = ref('')
+
+const handleInputChange = (newValue) => {
+  console.log('Input changed:', newValue)
+}
+</script>
+
+<style>
+body {
+  margin: 40px;
+}
+</style>
diff --git a/src/components/DxhTextInput.vue b/src/components/DxhTextInput.vue
index 08c9f60..9751c1d 100644
--- a/src/components/DxhTextInput.vue
+++ b/src/components/DxhTextInput.vue
@@ -1,6 +1,8 @@
 <template>
-  <label :for="id" class="block" data-test="text-input-label">
-    <span v-if="label">{{ label }}</span>
+  <label :for="id" data-test="text-input-label">
+    <slot name="label" :label="label">
+      <span v-if="label" :class="labelClasses">{{ label }}</span>
+    </slot>
     <div class="relative">
       <input
         :id="id"
@@ -14,6 +16,7 @@
         :required="required"
         :clearable="clearable"
         class="w-full border px-2 py-1 rounded"
+        :class="[{ 'pr-8': clearable }, inputClasses]"
         @focus="$emit('focus')"
         @blur="$emit('blur')"
         @change="$emit('change')"
@@ -23,7 +26,8 @@
       />
       <div
         v-if="clearable && inputValue"
-        class="absolute right-2 top-0 bottom-0 cursor-pointer flex items-center h-full"
+        class="absolute right-3 top-0 bottom-0 cursor-pointer flex items-center h-full"
+        :class="clearButtonClasses"
         data-test="text-input-clear-button"
       >
         <slot name="clear" :onClick="clearInput">
@@ -41,7 +45,7 @@
         </slot>
       </div>
     </div>
-    <p v-if="hint" data-test="text-input-hint">{{ hint }}</p>
+    <p v-if="hint" :class="hintClasses" data-test="text-input-hint">{{ hint }}</p>
   </label>
 </template>
 
@@ -60,6 +64,10 @@ interface props {
   autofocus?: boolean
   required?: boolean
   clearable?: boolean
+  labelClasses?: string
+  inputClasses?: string
+  clearButtonClasses?: string
+  hintClasses?: string
 }
 const { modelValue } = withDefaults(defineProps<props>(), {
   type: 'text'

From edb8e0cddf48554fc2de668632350ad07eb75281 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Mon, 18 Dec 2023 14:28:55 +0600
Subject: [PATCH 14/14] text-input

---
 src/App.vue                     | 46 +++------------------------------
 src/components/DxhTextInput.vue | 42 ++++++++++++++++--------------
 2 files changed, 27 insertions(+), 61 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 89b4093..d3dbc1b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,43 +1,5 @@
 <template>
-  <div class="relative">
-    <span class="absolute top-11 left-4 z-10">
-      <svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 512 512">
-        <path
-          d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"
-        />
-      </svg>
-    </span>
-    <TextInput
-      v-model="textValue"
-      label="E-mail"
-      id="E-mail"
-      type="text"
-      placeholder="Enter your Email"
-      clearable
-      labelClasses="font-semibold"
-      inputClasses="w-full z-0 pl-11 py-3 border border-gray-400 placeholder:text-gray-400 rounded-xl"
-      @change="handleInputChange"
-    >
-    <template #label="{label}">
-    <p class="mb-1 font-semibold">{{ label }} <span class="text-red-400 font-bold">*</span></p></template>
-    </TextInput>
-  </div>
-  <p>Entered Value: {{ textValue }}</p>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import TextInput from './components/DxhTextInput.vue'
-
-const textValue = ref('')
-
-const handleInputChange = (newValue) => {
-  console.log('Input changed:', newValue)
-}
-</script>
-
-<style>
-body {
-  margin: 40px;
-}
-</style>
+  <main>
+    Vue-Tailwind
+  </main>
+</template> 
\ No newline at end of file
diff --git a/src/components/DxhTextInput.vue b/src/components/DxhTextInput.vue
index 9751c1d..08a53c3 100644
--- a/src/components/DxhTextInput.vue
+++ b/src/components/DxhTextInput.vue
@@ -1,7 +1,7 @@
 <template>
   <label :for="id" data-test="text-input-label">
     <slot name="label" :label="label">
-      <span v-if="label" :class="labelClasses">{{ label }}</span>
+      <span v-if="label">{{ label }}</span>
     </slot>
     <div class="relative">
       <input
@@ -16,7 +16,12 @@
         :required="required"
         :clearable="clearable"
         class="w-full border px-2 py-1 rounded"
-        :class="[{ 'pr-8': clearable }, inputClasses]"
+        :class="[
+          { 'pr-8': clearable && !append },
+          { 'pl-10': prepend },
+          { 'pr-10': prepend },
+          { 'pr-16': clearable && append }
+        ]"
         @focus="$emit('focus')"
         @blur="$emit('blur')"
         @change="$emit('change')"
@@ -24,28 +29,29 @@
         @input="$emit('update:modelValue', inputValue)"
         data-test="text-input"
       />
-      <div
+      <span v-if="prepend" class="absolute top-1/2 -translate-y-1/2 left-3">
+        <slot name="prepend"> </slot>
+      </span>
+      <span v-if="append" class="absolute top-1/2 -translate-y-1/2 right-3">
+        <slot name="append"> </slot>
+      </span>
+      <span
         v-if="clearable && inputValue"
-        class="absolute right-3 top-0 bottom-0 cursor-pointer flex items-center h-full"
-        :class="clearButtonClasses"
+        class="absolute top-1/2 -translate-y-1/2 right-[14px] cursor-pointer"
+        :class="{ '!right-11': append }"
         data-test="text-input-clear-button"
       >
         <slot name="clear" :onClick="clearInput">
-          <svg
-            class="inline"
-            xmlns="http://www.w3.org/2000/svg"
-            height="14px"
-            viewBox="0 0 512 512"
-            @click="clearInput"
-          >
+          <svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512" @click="clearInput">
             <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"
+              d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
             />
           </svg>
         </slot>
-      </div>
+      </span>
     </div>
-    <p v-if="hint" :class="hintClasses" data-test="text-input-hint">{{ hint }}</p>
+
+    <p v-if="hint" data-test="text-input-hint">{{ hint }}</p>
   </label>
 </template>
 
@@ -64,10 +70,8 @@ interface props {
   autofocus?: boolean
   required?: boolean
   clearable?: boolean
-  labelClasses?: string
-  inputClasses?: string
-  clearButtonClasses?: string
-  hintClasses?: string
+  prepend?: boolean
+  append?: boolean
 }
 const { modelValue } = withDefaults(defineProps<props>(), {
   type: 'text'