From 78d85e2440bbe71d03c42b96899eb52930be3c0c Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Tue, 18 Apr 2023 09:55:25 +1000
Subject: [PATCH] added clear option

---
 resources/js/components/SMInput.vue | 31 +++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/resources/js/components/SMInput.vue b/resources/js/components/SMInput.vue
index b4f3af3..a4cd58c 100644
--- a/resources/js/components/SMInput.vue
+++ b/resources/js/components/SMInput.vue
@@ -15,6 +15,13 @@
                 <ion-icon
                     class="invalid-icon"
                     name="alert-circle-outline"></ion-icon>
+                <ion-icon
+                    v-if="
+                        props.showClear && value.length > 0 && !feedbackInvalid
+                    "
+                    class="clear-icon"
+                    name="close-outline"
+                    @click.stop="handleClear"></ion-icon>
                 <input
                     :type="props.type"
                     class="input-control"
@@ -84,6 +91,11 @@ const props = defineProps({
         default: "",
         required: false,
     },
+    showClear: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
 });
 
 const slots = useSlots();
@@ -181,6 +193,10 @@ const handleInput = (event: Event) => {
         feedbackInvalid.value = "";
     }
 };
+
+const handleClear = () => {
+    value.value = "";
+};
 </script>
 
 <style lang="scss">
@@ -246,6 +262,7 @@ const handleInput = (event: Event) => {
 
         .input-control-item {
             flex: 1;
+            position: relative;
 
             .input-label {
                 position: absolute;
@@ -266,6 +283,20 @@ const handleInput = (event: Event) => {
                 font-size: 28px;
             }
 
+            .clear-icon {
+                position: absolute;
+                right: 12px;
+                top: 18px;
+                background-color: #ccc;
+                border-radius: 50%;
+                font-size: 80%;
+                padding: 1px;
+
+                &:hover {
+                    color: #fff;
+                }
+            }
+
             .input-control {
                 display: block;
                 width: 100%;