From 092b7a9763df36fa5f743d9fe22b3b07f53f64f8 Mon Sep 17 00:00:00 2001
From: Sirttas <calloch.gael@gmail.com>
Date: Sat, 16 Sep 2023 19:12:02 +0200
Subject: [PATCH] search cancel

---
 src/market/MarketResultTable.vue | 2 +-
 src/style.css                    | 3 +++
 svg/search-cancel.svg            | 3 +++
 tailwind.config.js               | 6 +++++-
 4 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 svg/search-cancel.svg

diff --git a/src/market/MarketResultTable.vue b/src/market/MarketResultTable.vue
index 7d36b34..060352f 100644
--- a/src/market/MarketResultTable.vue
+++ b/src/market/MarketResultTable.vue
@@ -55,7 +55,7 @@ const { sortedArray, headerProps } = useSort(computed(() => props.items
         </div>
         <div class="end">
             <span>Filter: </span>
-            <input type="text" class="w-96" v-model="filter" >
+            <input type="search" class="w-96" v-model="filter" >
         </div>
         <div class="end">
             <button class="flex" @click="$emit('relaodAll')"><ArrowPathIcon class="stroke-slate-100 sh-6 w-6 me-2" />Reload all</button>
diff --git a/src/style.css b/src/style.css
index fac256f..1919050 100644
--- a/src/style.css
+++ b/src/style.css
@@ -41,6 +41,9 @@
         @apply bg-slate-600 hover:bg-slate-800;
         border-radius: 5px;
     }
+    input[type=search] {
+        @apply search-cancel:appearance-none search-cancel:w-4 search-cancel:h-4 search-cancel:bg-[url('/svg/search-cancel.svg')];
+    }
     .btn-icon {
         @apply p-0 border-none bg-transparent hover:text-slate-400 hover:bg-transparent;
         > svg {
diff --git a/svg/search-cancel.svg b/svg/search-cancel.svg
new file mode 100644
index 0000000..a593242
--- /dev/null
+++ b/svg/search-cancel.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#F1F5F9" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+</svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index a28ce71..03de2c1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,10 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('tailwindcss/plugin')(({ addVariant }) => {
+      addVariant('search-cancel', '&::-webkit-search-cancel-button');
+    }),
+  ],
 }