chore: update components

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)
       }
     }
   },

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

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">

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>

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>

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 }}