add clear to Ktextbox

add tests and fix clear button

docs/pages/playground.vue

@@ -23,10 +23,6 @@
     /> -->
 
     <!-- Play around with your component here: -->
-
-
-
-
   </div>
 
 </template>
@@ -35,10 +31,10 @@
 <script>
 
   /*
-    Playground is a Vue component too,
-    so you can also use `data`, `methods`, etc.
-    as usual if helpful
-  */
+          Playground is a Vue component too,
+          so you can also use `data`, `methods`, etc.
+          as usual if helpful
+        */
   export default {
     name: 'Playground',
     data() {

lib/KTextbox/__tests__/KTextbox.spec.js

@@ -156,3 +156,35 @@ describe('KTextbox component', () => {
     });
   });
 });
+
+describe('KTextbox with clearable', () => {
+  it('should have clearable button when clearable is true and there is text in the input', async () => {
+    const wrapper = mount(KTextbox, {
+      propsData: {
+        clearable: true,
+      },
+    });
+    const input = wrapper.find('input');
+    input.element.value = 'test';
+    input.trigger('input');
+    await wrapper.vm.$nextTick();
+    const clearButton = wrapper.find('.ui-clear-button');
+    expect(clearButton.exists()).toBeTruthy();
+  });
+
+  it('should clear the input when clear button is clicked', async () => {
+    const wrapper = mount(KTextbox, {
+      propsData: {
+        clearable: true,
+      },
+    });
+    const input = wrapper.find('input');
+    input.element.value = 'test';
+    input.trigger('input');
+    await wrapper.vm.$nextTick();
+    const clearButton = wrapper.find('.ui-clear-button');
+    clearButton.trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('input').element.value).toBe('');
+  });
+});

lib/KTextbox/index.vue

@@ -7,6 +7,7 @@
       class="textbox"
       :label="label"
       :disabled="disabled"
+      :clearable="clearable"
       :invalid="showInvalidMessage"
       :error="invalidText"
       :autofocus="autofocus"
@@ -142,6 +143,13 @@
         type: Boolean,
         default: false,
       },
+      /**
+       * When set to `true`, the component displays a clear button inside the input field.
+       */
+      clearable: {
+        type: Boolean,
+        default: false,
+      },
       /**
        * @ignore
        * Whether or not to display as a floating label.