From d302ae5840003aeeebf11a2f2307b2db1b999812 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 19 Nov 2021 15:13:21 +0100
Subject: [PATCH] chore: update components

---
 src/components/elements/Avatar.vue   | 5 +++--
 src/components/elements/Button.vue   | 2 +-
 src/components/elements/Dropdown.vue | 4 +++-
 src/components/forms/Checkbox.vue    | 6 ++++--
 src/components/forms/InputGroup.vue  | 4 +++-
 src/components/forms/Radio.vue       | 2 +-
 6 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/elements/Avatar.vue b/src/components/elements/Avatar.vue
index e2336548..6955a47b 100644
--- a/src/components/elements/Avatar.vue
+++ b/src/components/elements/Avatar.vue
@@ -1,6 +1,7 @@
 <template>
-  <span class="relative inline-flex items-center justify-center overflow-hidden" :class="avatarClass" @click="goto">
+  <span class="relative inline-flex items-center justify-center" :class="avatarClass" @click="goto">
     <img v-if="url" :src="url" :alt="alt" :class="[sizeClass, roundedClass]">
+    <!-- eslint-disable-next-line vue/no-v-html -->
     <span v-else-if="gradientPlaceholder" class="w-full h-full" v-html="gradientPlaceholder" />
     <span
       v-else-if="placeholder"
@@ -70,7 +71,7 @@ export default {
       type: String,
       default: null,
       validator (value) {
-        return [null, 'online', 'idle', 'invisible', 'donotdisturb', 'focus'].includes(value)
+        return ['online', 'idle', 'invisible', 'donotdisturb', 'focus'].includes(value)
       }
     }
   },
diff --git a/src/components/elements/Button.vue b/src/components/elements/Button.vue
index 78071e62..539eaccc 100644
--- a/src/components/elements/Button.vue
+++ b/src/components/elements/Button.vue
@@ -238,7 +238,7 @@ export default {
     },
     iconName () {
       if (this.loading) {
-        return this.loadingIcon || 'custom/loading'
+        return this.loadingIcon || 'heroicons-outline:refresh'
       }
 
       return this.icon
diff --git a/src/components/elements/Dropdown.vue b/src/components/elements/Dropdown.vue
index 9dca8dd0..e8e4d623 100644
--- a/src/components/elements/Dropdown.vue
+++ b/src/components/elements/Dropdown.vue
@@ -1,7 +1,9 @@
 <template>
   <Menu v-slot="{ open }" as="div" :class="wrapperClass">
     <MenuButton ref="trigger" as="div">
-      <slot :open="open" />
+      <slot :open="open">
+        Open
+      </slot>
     </MenuButton>
 
     <div ref="container" :class="containerClass">
diff --git a/src/components/forms/Checkbox.vue b/src/components/forms/Checkbox.vue
index eb9057a4..3f9fbfeb 100644
--- a/src/components/forms/Checkbox.vue
+++ b/src/components/forms/Checkbox.vue
@@ -13,14 +13,16 @@
         @focus="focused = true"
         @blur="focused = false"
         @change="onChange"
-      />
+      >
     </div>
     <div v-if="label" class="ml-3 text-sm">
       <label :for="name" class="font-medium text-tw-gray-700">
         {{ label }}
         <span v-if="required" class="text-red-400">*</span>
       </label>
-      <p v-if="help" class="text-tw-gray-500">{{ help }}</p>
+      <p v-if="help" class="text-tw-gray-500">
+        {{ help }}
+      </p>
     </div>
   </div>
 </template>
diff --git a/src/components/forms/InputGroup.vue b/src/components/forms/InputGroup.vue
index 0c2ee028..8be4d5c4 100644
--- a/src/components/forms/InputGroup.vue
+++ b/src/components/forms/InputGroup.vue
@@ -24,7 +24,9 @@
       :class="{ 'mt-1': label && !inline, 'mt-1 sm:mt-0': label && inline, 'sm:col-span-2': inline }"
     >
       <slot />
-      <p v-if="help" class="mt-2 text-sm text-tw-gray-500">{{ help }}</p>
+      <p v-if="help" class="mt-2 text-sm text-tw-gray-500">
+        {{ help }}
+      </p>
     </div>
   </div>
 </template>
diff --git a/src/components/forms/Radio.vue b/src/components/forms/Radio.vue
index 1a3bfa14..7c1174d9 100644
--- a/src/components/forms/Radio.vue
+++ b/src/components/forms/Radio.vue
@@ -12,7 +12,7 @@
       @focus="focused = true"
       @blur="focused = false"
       @change="onChange"
-    />
+    >
     <div v-if="label" class="flex flex-col ml-3">
       <span class="block text-sm font-medium text-tw-gray-900">
         {{ label }}