chore: update components

src/components/elements/Avatar.vue

@@ -7,6 +7,9 @@
       v-else-if="placeholder"
       class="font-medium leading-none u-text-gray-900 uppercase"
     >{{ placeholder }}</span>
+    <span
+      v-else-if="text"
+    >{{ text }}</span>
     <svg
       v-else
       class="w-full h-full u-text-gray-300"
@@ -36,6 +39,10 @@ export default {
       type: [String, Boolean],
       default: null
     },
+    text: {
+      type: String,
+      default: null
+    },
     alt: {
       type: String,
       default: null

src/components/elements/AvatarGroup.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="flex">
     <Avatar
-      v-for="(avatar, index) of displayedGroup"
+      v-for="(avatar, index) of avatars"
       :key="index"
       :src="avatar.src"
-      class="shadow-solid -ml-1.5 first:ml-0"
+      class="ring-2 u-ring-white -ml-1.5 first:ml-0"
       :size="size"
       :status="avatar.status"
     />
     <Avatar
       v-if="remainingGroupSize > 0"
-      class="shadow-solid -ml-1.5 first:ml-0 text-[10px]"
+      class="ring-2 u-ring-white -ml-1.5 first:ml-0 text-[10px]"
       :size="size"
       :text="`+${remainingGroupSize}`"
     />
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import Avatar from './Avatar.vue'
+import Avatar from './Avatar'
 
 export default {
   components: {
@@ -42,17 +42,21 @@ export default {
     }
   },
   computed: {
+    avatars () {
+      return this.group.map((avatar) => {
+        return typeof avatar === 'string' ? { src: avatar } : avatar
+      })
+    },
     displayedGroup () {
-      if (!this.max) { return this.group }
+      if (!this.max) { return this.avatars }
 
-      return this.group.slice(0, this.max)
+      return this.avatars.slice(0, this.max)
     },
     remainingGroupSize () {
       if (!this.max) { return 0 }
 
-      return this.group.length - this.max
+      return this.avatars.length - this.max
     }
-
   }
 }
 </script>

src/components/elements/Dropdown.vue

@@ -2,7 +2,7 @@
   <Menu v-slot="{ open }" as="div" :class="wrapperClass">
     <MenuButton ref="trigger" as="div">
       <slot :open="open">
-        Open
+        <button>Open</button>
       </slot>
     </MenuButton>
 

src/components/feedback/Alert.vue

@@ -53,10 +53,10 @@ export default {
   computed: {
     iconName () {
       return ({
-        info: 'solid/information-circle',
-        warning: 'solid/exclamation',
-        error: 'solid/x-circle',
-        success: 'solid/check-circle'
+        info: 'heroicons-solid:information-circle',
+        warning: 'heroicons-solid:exclamation',
+        error: 'heroicons-solid:x-circle',
+        success: 'heroicons-solid:check-circle'
       })[this.variant]
     },
     variantClass () {

src/components/forms/Toggle.vue

@@ -16,7 +16,7 @@
 
 <script setup>
 import { Switch } from '@headlessui/vue'
-import Icon from './Icon'
+import Icon from '../elements/Icon'
 
 const props = defineProps({
   modelValue: {

src/components/forms/ToggleGroup.vue

@@ -0,0 +1,70 @@
+<template>
+  <SwitchGroup
+    :class="{ 'sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:u-border-gray-200': inline }"
+    as="div"
+  >
+    <slot name="label">
+      <div :class="{ 'flex content-center justify-between': !inline }">
+        <SwitchLabel
+          v-if="label"
+          :for="name"
+          class="block text-sm font-medium leading-5 u-text-gray-700"
+          :class="{'sm:mt-px sm:pt-2': inline }"
+        >
+          {{ label }}
+          <span v-if="required" class="text-red-400">*</span>
+        </SwitchLabel>
+        <span
+          v-if="$slots.hint || hint"
+          class="text-sm leading-5 u-text-gray-500"
+          :class="{ 'mt-1 max-w-2xl': inline }"
+        ><slot name="hint">{{ hint }}</slot></span>
+      </div>
+    </slot>
+    <div
+      :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 u-text-gray-500">
+        {{ help }}
+      </p>
+    </div>
+  </SwitchGroup>
+</template>
+
+<script>
+import { SwitchGroup, SwitchLabel } from '@headlessui/vue'
+
+export default {
+  components: {
+    SwitchGroup,
+    SwitchLabel
+  },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    help: {
+      type: String,
+      default: null
+    },
+    hint: {
+      type: String,
+      default: null
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>