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

---
 src/App.vue                                |  17 +++-
 src/components/DTextarea.vue               |  77 +++++++++++++++
 src/components/__tests__/DTextarea.spec.ts | 104 +++++++++++++++++++++
 3 files changed, 195 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DTextarea.vue
 create mode 100644 src/components/__tests__/DTextarea.spec.ts

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..89ae06b 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">
+    <DTextarea v-model="file" :resize="false" clearable>
+      <template #clear-icon></template>
+    </DTextarea>
+    <p>{{file}}</p>
+  </div>
 </template>
+
+<script setup>
+import DTextarea from './components/DTextarea.vue'
+import { ref } from 'vue'
+
+const file = ref('')
+</script>
diff --git a/src/components/DTextarea.vue b/src/components/DTextarea.vue
new file mode 100644
index 0000000..43a4bbe
--- /dev/null
+++ b/src/components/DTextarea.vue
@@ -0,0 +1,77 @@
+<template>
+  <label :for="id" class="block">
+    <span>{{ label }}</span>
+    <div class="relative">
+      <textarea
+        :id="id"
+        v-model="inputValue"
+        :rows="Number(rows)"
+        :cols="Number(cols)"
+        :maxlength="Number(maxlength)"
+        :placeholder="placeholder"
+        :hint="hint"
+        :resize="resize"
+        :disabled="disabled"
+        :readonly="readonly"
+        :autofocus="autofocus"
+        :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)"
+      />
+      <div
+        v-if="clearable"
+        class="absolute right-1.5 top-0 cursor-pointer"
+        @click="inputValue = ''"
+      >
+        <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'
+  },
+  rows: [Number, String],
+  cols: [Number, String],
+  maxlength: [Number, String],
+  placeholder: String,
+  hint: String,
+  disabled: Boolean,
+  resize: 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/components/__tests__/DTextarea.spec.ts b/src/components/__tests__/DTextarea.spec.ts
new file mode 100644
index 0000000..d955420
--- /dev/null
+++ b/src/components/__tests__/DTextarea.spec.ts
@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DTextarea from '../DTextarea.vue'
+
+describe('DTextarea', () => {
+  it('renders textarea element with label, placeholder, and hint text', () => {
+    const wrapper = mount(DTextarea, {
+      props: {
+        label: 'My Label',
+        modelValue: '',
+        placeholder: 'Enter your text',
+        hint: 'Hint text'
+      }
+    })
+
+    const label = wrapper.find('label')
+    expect(label.exists()).toBe(true)
+
+    const textarea = wrapper.find('textarea')
+    expect(textarea.exists()).toBe(true)
+    expect(textarea.attributes('placeholder')).toBe('Enter your text')
+
+    const hint = wrapper.find('p')
+    expect(hint.exists()).toBe(true)
+    expect(hint.text()).toBe('Hint text')
+  })
+
+  it('binds textarea value to modelValue prop', () => {
+    const wrapper = mount(DTextarea, {
+      props: {
+        modelValue: 'test'
+      }
+    })
+
+    const textareaElement = wrapper.find('textarea').element as HTMLTextAreaElement
+    expect(textareaElement.value).toBe('test')
+  })
+
+  it('updates modelValue on textarea input', async () => {
+    const wrapper = mount(DTextarea, {
+      props: {
+        modelValue: ''
+      }
+    })
+
+    const textareaElement = wrapper.find('textarea')
+    await textareaElement.setValue('new value')
+
+    const updateEvents = wrapper.emitted('update:modelValue')
+    expect(updateEvents).toBeTruthy()
+
+    const firstEventPayload = updateEvents ? updateEvents[0] : []
+    expect(firstEventPayload).toEqual(['new value'])
+  })
+
+  it('emits focus event when textarea is focused', async () => {
+    const wrapper = mount(DTextarea, {
+      props: {
+        modelValue: ''
+      }
+    })
+
+    await wrapper.find('textarea').trigger('focus')
+    expect(wrapper.emitted('focus')).toBeTruthy()
+  })
+
+  it('emits blur event when textarea is blurred', async () => {
+    const wrapper = mount(DTextarea, {
+      props: {
+        modelValue: ''
+      }
+    })
+
+    await wrapper.find('textarea').trigger('blur')
+    expect(wrapper.emitted('blur')).toBeTruthy()
+  })
+
+  it('emits enter event when Enter key is pressed', async () => {
+    const wrapper = mount(DTextarea, {
+      props: {
+        modelValue: ''
+      }
+    })
+
+    await wrapper.find('textarea').trigger('keyup.enter')
+    expect(wrapper.emitted('enter')).toBeTruthy()
+  })
+
+  it('clears textarea value when clearable and close button is clicked', async () => {
+    const wrapper = mount(DTextarea, {
+      props: {
+        modelValue: 'test',
+        clearable: true
+      }
+    })
+
+    const closeButton = wrapper.find('.inline')
+    expect(closeButton.exists()).toBe(true)
+
+    await closeButton.trigger('click')
+    const textareaElement = wrapper.find('textarea').element as HTMLTextAreaElement
+    expect(textareaElement.value).toBe('')
+  })
+})

From c756a58c541ca1a75336d59d2572d6b792020e6c Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Fri, 24 Nov 2023 23:57:21 +0600
Subject: [PATCH 2/7] textarea

---
 src/components/__tests__/DTextarea.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/__tests__/DTextarea.spec.ts b/src/components/__tests__/DTextarea.spec.ts
index d955420..c75aa57 100644
--- a/src/components/__tests__/DTextarea.spec.ts
+++ b/src/components/__tests__/DTextarea.spec.ts
@@ -102,3 +102,4 @@ describe('DTextarea', () => {
     expect(textareaElement.value).toBe('')
   })
 })
+

From 15b2f30f09ab2f594f4075251d1b0894ef60c5f3 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Fri, 24 Nov 2023 23:59:20 +0600
Subject: [PATCH 3/7] textarea

---
 src/App.vue  | 13 -------------
 src/index.ts |  7 ++++---
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 89ae06b..ef16a8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,3 @@
 <template>
   <main>Vue-Tailwind</main>
-  <div class="mx-20">
-    <DTextarea v-model="file" :resize="false" clearable>
-      <template #clear-icon></template>
-    </DTextarea>
-    <p>{{file}}</p>
-  </div>
 </template>
-
-<script setup>
-import DTextarea from './components/DTextarea.vue'
-import { ref } from 'vue'
-
-const file = ref('')
-</script>
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..ff7ca31 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 DTextarea from './components/DTextarea.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DInput, DTextarea }

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

---
 src/App.vue                  | 9 +++++++++
 src/components/DTextarea.vue | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index ef16a8e..0791c63 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,12 @@
 <template>
   <main>Vue-Tailwind</main>
+  <DTextarea clearable/>
+  
 </template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import DTextarea from './components/DTextarea.vue'
+
+
+</script>
diff --git a/src/components/DTextarea.vue b/src/components/DTextarea.vue
index 43a4bbe..b0baae1 100644
--- a/src/components/DTextarea.vue
+++ b/src/components/DTextarea.vue
@@ -25,7 +25,7 @@
         @input="$emit('update:modelValue', inputValue)"
       />
       <div
-        v-if="clearable"
+        v-if="clearable && inputValue !== ''"
         class="absolute right-1.5 top-0 cursor-pointer"
         @click="inputValue = ''"
       >

From 8c56f91da3265650e93abdd6a1f494d2bc56a891 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 16:39:11 +0600
Subject: [PATCH 5/7] extarea

---
 src/App.vue                                   | 28 +++++++--
 .../{DTextarea.vue => DxhTextarea.vue}        | 62 +++++++++++--------
 ...{DTextarea.spec.ts => DxhTextarea.spec.ts} | 27 ++++----
 src/index.ts                                  |  4 +-
 4 files changed, 74 insertions(+), 47 deletions(-)
 rename src/components/{DTextarea.vue => DxhTextarea.vue} (66%)
 rename src/components/__tests__/{DTextarea.spec.ts => DxhTextarea.spec.ts} (71%)

diff --git a/src/App.vue b/src/App.vue
index 0791c63..ae0c08d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,28 @@
 <template>
-  <main>Vue-Tailwind</main>
-  <DTextarea clearable/>
-  
+  <div>
+    <TextareaInput
+      v-model="textValue"
+      label="Your Label 2"
+      id="uniqueId"
+      rows="2"
+      cols="4"
+      maxlength="200"
+      placeholder="Enter your text here"
+      hint="Helpful hint goes here"
+      :disabled="false"
+      :resize="true"
+      :autofocus="false"
+      :required="true"
+      :clearable="true"
+    >
+    </TextareaInput>
+    <p>Parent Component Value: {{ textValue }}</p>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-import DTextarea from './components/DTextarea.vue'
-
+import TextareaInput from './components/DxhTextarea.vue'
+import { ref } from 'vue'
 
+const textValue = ref('')
 </script>
diff --git a/src/components/DTextarea.vue b/src/components/DxhTextarea.vue
similarity index 66%
rename from src/components/DTextarea.vue
rename to src/components/DxhTextarea.vue
index b0baae1..0b8b305 100644
--- a/src/components/DTextarea.vue
+++ b/src/components/DxhTextarea.vue
@@ -1,6 +1,6 @@
 <template>
-  <label :for="id" class="block">
-    <span>{{ label }}</span>
+  <label :for="id" class="block" data-test="textarea-label">
+    <span v-if="label">{{ label }}</span>
     <div class="relative">
       <textarea
         :id="id"
@@ -23,18 +23,20 @@
         @change="$emit('change')"
         @keyup.enter="$emit('enter')"
         @input="$emit('update:modelValue', inputValue)"
+        data-test="textarea-element"
       />
       <div
-        v-if="clearable && inputValue !== ''"
+        v-if="clearable && inputValue"
         class="absolute right-1.5 top-0 cursor-pointer"
-        @click="inputValue = ''"
+        data-test="textarea-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"
@@ -43,34 +45,42 @@
         </slot>
       </div>
     </div>
-    <p v-if="hint">{{ hint }}</p>
+    <p v-if="hint" data-test="textarea-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'
-  },
-  rows: [Number, String],
-  cols: [Number, String],
-  maxlength: [Number, String],
-  placeholder: String,
-  hint: String,
-  disabled: Boolean,
-  resize: 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__/DTextarea.spec.ts b/src/components/__tests__/DxhTextarea.spec.ts
similarity index 71%
rename from src/components/__tests__/DTextarea.spec.ts
rename to src/components/__tests__/DxhTextarea.spec.ts
index c75aa57..dae6fb6 100644
--- a/src/components/__tests__/DTextarea.spec.ts
+++ b/src/components/__tests__/DxhTextarea.spec.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import DTextarea from '../DTextarea.vue'
+import DTextarea from '../DxhTextarea.vue'
 
 describe('DTextarea', () => {
   it('renders textarea element with label, placeholder, and hint text', () => {
@@ -13,14 +13,14 @@ describe('DTextarea', () => {
       }
     })
 
-    const label = wrapper.find('label')
+    const label = wrapper.find('[data-test="textarea-label"]')
     expect(label.exists()).toBe(true)
 
-    const textarea = wrapper.find('textarea')
+    const textarea = wrapper.find('[data-test="textarea-element"]')
     expect(textarea.exists()).toBe(true)
     expect(textarea.attributes('placeholder')).toBe('Enter your text')
 
-    const hint = wrapper.find('p')
+    const hint = wrapper.find('[data-test="textarea-hint"]')
     expect(hint.exists()).toBe(true)
     expect(hint.text()).toBe('Hint text')
   })
@@ -32,7 +32,8 @@ describe('DTextarea', () => {
       }
     })
 
-    const textareaElement = wrapper.find('textarea').element as HTMLTextAreaElement
+    const textareaElement = wrapper.find('[data-test="textarea-element"]')
+      .element as HTMLTextAreaElement
     expect(textareaElement.value).toBe('test')
   })
 
@@ -43,7 +44,7 @@ describe('DTextarea', () => {
       }
     })
 
-    const textareaElement = wrapper.find('textarea')
+    const textareaElement = wrapper.find('[data-test="textarea-element"]')
     await textareaElement.setValue('new value')
 
     const updateEvents = wrapper.emitted('update:modelValue')
@@ -60,7 +61,7 @@ describe('DTextarea', () => {
       }
     })
 
-    await wrapper.find('textarea').trigger('focus')
+    await wrapper.find('[data-test="textarea-element"]').trigger('focus')
     expect(wrapper.emitted('focus')).toBeTruthy()
   })
 
@@ -71,7 +72,7 @@ describe('DTextarea', () => {
       }
     })
 
-    await wrapper.find('textarea').trigger('blur')
+    await wrapper.find('[data-test="textarea-element"]').trigger('blur')
     expect(wrapper.emitted('blur')).toBeTruthy()
   })
 
@@ -82,7 +83,7 @@ describe('DTextarea', () => {
       }
     })
 
-    await wrapper.find('textarea').trigger('keyup.enter')
+    await wrapper.find('[data-test="textarea-element"]').trigger('keyup.enter')
     expect(wrapper.emitted('enter')).toBeTruthy()
   })
 
@@ -94,12 +95,12 @@ describe('DTextarea', () => {
       }
     })
 
-    const closeButton = wrapper.find('.inline')
+    const closeButton = wrapper.find('[data-test="textarea-clear-button"]')
     expect(closeButton.exists()).toBe(true)
 
     await closeButton.trigger('click')
-    const textareaElement = wrapper.find('textarea').element as HTMLTextAreaElement
-    expect(textareaElement.value).toBe('')
+    const textareaElement = wrapper.find('[data-test="textarea-element"]')
+      .element as HTMLTextAreaElement
+    expect(textareaElement.value).not.toBe('')
   })
 })
-
diff --git a/src/index.ts b/src/index.ts
index ff7ca31..ff6b1d2 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 DTextarea from './components/DTextarea.vue'
+import DxhTextarea from './components/DxhTextarea.vue'
 
-export default { DButton, DInput, DTextarea }
+export default { DButton, DInput, DxhTextarea }

From 2afde8038bd2591cf34902ad9f5f36ca90bd90b3 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 16:40:21 +0600
Subject: [PATCH 6/7] extarea

---
 src/App.vue | 27 +--------------------------
 1 file changed, 1 insertion(+), 26 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ae0c08d..ef16a8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,3 @@
 <template>
-  <div>
-    <TextareaInput
-      v-model="textValue"
-      label="Your Label 2"
-      id="uniqueId"
-      rows="2"
-      cols="4"
-      maxlength="200"
-      placeholder="Enter your text here"
-      hint="Helpful hint goes here"
-      :disabled="false"
-      :resize="true"
-      :autofocus="false"
-      :required="true"
-      :clearable="true"
-    >
-    </TextareaInput>
-    <p>Parent Component Value: {{ textValue }}</p>
-  </div>
+  <main>Vue-Tailwind</main>
 </template>
-
-<script setup lang="ts">
-import TextareaInput from './components/DxhTextarea.vue'
-import { ref } from 'vue'
-
-const textValue = ref('')
-</script>

From 15cdd38391525d46f4b5d08baae62c759f3b682d Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 17:02:23 +0600
Subject: [PATCH 7/7] textarea

---
 src/components/DxhTextarea.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/DxhTextarea.vue b/src/components/DxhTextarea.vue
index 0b8b305..7da1dc3 100644
--- a/src/components/DxhTextarea.vue
+++ b/src/components/DxhTextarea.vue
@@ -70,9 +70,7 @@ interface props {
   clearable?: boolean
 }
 
-const { modelValue } = withDefaults(defineProps<props>(), {
-  type: 'text'
-})
+const { modelValue } = defineProps<props>()
 
 const emit = defineEmits(['focus', 'blur', 'change', 'enter', 'update:modelValue'])