feat(autocomplete): clearable autocomplete

gitsindonesia · May 11, 2022 · bdfecb9 · bdfecb9
1 parent aa26812
commit bdfecb9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/packages/autocomplete/src/Autocomplete.stories.ts b/packages/autocomplete/src/Autocomplete.stories.ts
@@ -33,3 +33,8 @@ const Template = (args) => ({
 
 export const Default = Template.bind({});
 Default.args = {};
+
+export const Clearable = Template.bind({});
+Clearable.args = {
+  clearable: true,
+};
diff --git a/packages/autocomplete/src/Autocomplete.vue b/packages/autocomplete/src/Autocomplete.vue
@@ -33,6 +33,7 @@ type Props = {
   clearable?: boolean;
   notFoundText?: string;
   noDataText?: string;
+  clearable?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -45,6 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
   items: () => [],
   noDataText: 'No data.',
   notFoundText: 'Nothing found.',
+  clearable: false,
 });
 
 const emit = defineEmits(['update:modelValue', 'update:query']);
@@ -66,9 +68,10 @@ watch(selected, (val) => {
 watch(query, (val) => {
   emit('update:query', val);
 
-  if (val === '') {
-    selected.value = '';
-  }
+  // if (val === '') {
+  // console.log({val});
+  // selected.value = '';
+  // }
 });
 
 const filteredItems = computed(() =>
@@ -131,21 +134,24 @@ const clear = () => {
         />
         <div class="absolute inset-y-0 right-0 flex items-center pr-4">
           <button
-            v-if="clearable"
+            v-if="clearable && selected"
             type="button"
             class="
               mr-1
               text-gray-400
               hover:text-gray-700
-              hover:bg-gray-200
+              hover:bg-gray-100
               rounded-full
               p-1
               transition
               duration-300
             "
             @click="clear"
           >
-            <XIcon class="w-6 h-6" aria-hidden="true" />
+            <XIcon
+              class="w-6 h-6 fill-current text-gray-500"
+              aria-hidden="true"
+            />
           </button>
           <ComboboxButton>
             <ChevronDownIcon

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -41,6 +41,7 @@ module.exports = {
     './packages/toast/src/*.{vue,js,ts,jsx,tsx}',
     './packages/tooltip/src/*.{vue,js,ts,jsx,tsx}',
     './packages/utils/*.{vue,js,ts,jsx,tsx}',
+    './packages/autocomplete/src/*.{vue,js,ts,jsx,tsx}',
   ],
   presets: [require('./packages/tailwind-config/preset')],
 };