From 97f9bd26c80d6a7a566919726caae9b406b1b9c5 Mon Sep 17 00:00:00 2001
From: lesion <lesion@autistici.org>
Date: Mon, 21 Feb 2022 11:34:27 +0100
Subject: [PATCH] add close icon in chips

---
 components/Search.vue | 5 +++--
 pages/add/_edit.vue   | 8 ++++++--
 pages/index.vue       | 4 +++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/components/Search.vue b/components/Search.vue
index a91101d2..c601093c 100644
--- a/components/Search.vue
+++ b/components/Search.vue
@@ -21,6 +21,7 @@
       template(v-slot:selection="data")
         v-chip(v-bind="data.attrs"
           close
+          :close-icon='mdiCloseCircle'
           @click:close='remove(data.item)'
           :input-value="data.selected")
           v-avatar(left)
@@ -35,7 +36,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import { mdiMapMarker, mdiTag } from '@mdi/js'
+import { mdiMapMarker, mdiTag, mdiCloseCircle } from '@mdi/js'
 export default {
   name: 'Search',
   props: {
@@ -44,7 +45,7 @@ export default {
   },
   data () {
     return {
-      mdiTag, mdiMapMarker,
+      mdiTag, mdiMapMarker, mdiCloseCircle,
       tmpfilter: null,
       search: ''
     }
diff --git a/pages/add/_edit.vue b/pages/add/_edit.vue
index 7cadd27a..d2563df6 100644
--- a/pages/add/_edit.vue
+++ b/pages/add/_edit.vue
@@ -54,6 +54,10 @@
                   :delimiters="[',', ';']"
                   :items="tags.map(t => t.tag)"
                   :label="$t('common.tags')")
+                  template(v-slot:selection="{ item, on, attrs, selected, parent}")
+                    v-chip(v-bind="attrs" close :close-icon='mdiCloseCircle' @click:close='parent.selectItem(item)'
+                      :input-value="selected" label small) {{item}}
+        </v-chip>
 
       v-card-actions
         v-spacer
@@ -65,7 +69,7 @@
 import { mapActions, mapState } from 'vuex'
 import dayjs from 'dayjs'
 
-import { mdiFileImport, mdiFormatTitle, mdiTagMultiple } from '@mdi/js'
+import { mdiFileImport, mdiFormatTitle, mdiTagMultiple, mdiCloseCircle } from '@mdi/js'
 
 export default {
   name: 'NewEvent',
@@ -117,7 +121,7 @@ export default {
     const month = dayjs().month() + 1
     const year = dayjs().year()
     return {
-      mdiFileImport, mdiFormatTitle, mdiTagMultiple,
+      mdiFileImport, mdiFormatTitle, mdiTagMultiple, mdiCloseCircle,
       valid: false,
       openImportDialog: false,
       event: {
diff --git a/pages/index.vue b/pages/index.vue
index a0d592b9..168433fd 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -15,7 +15,7 @@
 
       .col.pt-0.pt-md-2
         Search(:filters='filters' @update='updateFilters')
-        v-chip(v-if='selectedDay' close @click:close='dayChange({ date: selectedDay})') {{selectedDay}}
+        v-chip(v-show='selectedDay' close :close-icon='mdiCloseCircle' @click:close='dayChange({ date: selectedDay})') {{selectedDay}}
 
     //- Events
     #events.mb-2.mt-1.pl-1.pl-sm-2
@@ -31,6 +31,7 @@ import Event from '@/components/Event'
 import Announcement from '@/components/Announcement'
 import Search from '@/components/Search'
 import Calendar from '@/components/Calendar'
+import { mdiCloseCircle } from '@mdi/js'
 
 export default {
   name: 'Index',
@@ -46,6 +47,7 @@ export default {
   },
   data ({ $store }) {
     return {
+      mdiCloseCircle,
       first: true,
       isCurrentMonth: true,
       now: dayjs().unix(),