chore: update components

docs/app.vue

@@ -56,9 +56,9 @@ import { UseDark } from '@vueuse/components'
 
 const sections = [
   { label: 'Getting Started', links: [{ label: 'Usage', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
-  { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }, { label: 'Link', to: '/components/Link' }, { label: 'Toggle', to: '/components/Toggle' }] },
+  { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }, { label: 'Link', to: '/components/Link' }] },
   { label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }] },
-  { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'InputGroup', to: '/components/InputGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'RadioGroup', to: '/components/RadioGroup' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }] },
+  { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'InputGroup', to: '/components/InputGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'RadioGroup', to: '/components/RadioGroup' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }, { label: 'ToggleGroup', to: '/components/ToggleGroup' }] },
   { label: 'Layout', links: [{ label: 'Card', to: '/components/Card' }, { label: 'Container', to: '/components/Container' }] },
   { label: 'Navigation', links: [{ label: 'Pills', to: '/components/Pills' }, { label: 'Tabs', to: '/components/Tabs' }, { label: 'VerticalNavigation', to: '/components/VerticalNavigation' }] },
   { label: 'Overlays', links: [{ label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Slideover', to: '/components/Slideover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }

docs/pages/components/[component].vue

@@ -6,7 +6,8 @@
 
     <template v-if="props.length" #footer>
       <div class="space-y-3">
-        <UInputGroup
+        <component
+          :is="prop.type === 'Boolean' ? 'UToggleGroup' : 'UInputGroup'"
           v-for="prop of props"
           :key="prop.key"
           class="capitalize"
@@ -46,8 +47,10 @@
             v-model="prop.value"
             :name="prop.key"
             size="sm"
+            rows="8"
+            autoresize
           />
-        </UInputGroup>
+        </component>
       </div>
     </template>
   </UCard>
@@ -63,10 +66,57 @@ const is = `U${params.component}`
 
 const component = nuxtApp.vueApp.component(is)
 
+const defaultProps = {
+  Button: {
+    label: 'Button text'
+  },
+  Badge: {
+    label: 'Badge'
+  },
+  Alert: {
+    title: 'A new software update is available. See what’s new in version 2.0.4.'
+  },
+  Avatar: {
+    src: 'https://picsum.photos/200/300'
+  },
+  AvatarGroup: {
+    group: ['https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80', 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80']
+  },
+  Dropdown: {
+    items: [
+      [{
+        label: 'Edit',
+        icon: 'heroicons-solid:pencil'
+      }, {
+        label: 'Duplicate',
+        icon: 'heroicons-solid:duplicate'
+      }],
+      [{
+        label: 'Archive',
+        icon: 'heroicons-solid:archive'
+      }, {
+        label: 'Move',
+        icon: 'heroicons-solid:external-link'
+      }],
+      [{
+        label: 'Delete',
+        icon: 'heroicons-solid:trash'
+      }]
+    ]
+  },
+  Icon: {
+    name: 'heroicons-outline:bell'
+  },
+  Select: {
+    options: ['English', 'Spanish', 'French', 'German', 'Chinese']
+  }
+}
+
 const { props: componentProps } = await component.__asyncLoader()
 
 const refProps = Object.entries(componentProps).map(([key, prop]) => {
-  let value = typeof prop.default === 'function' ? prop.default() : prop.default
+  const defaultValue = (defaultProps[params.component] || {})[key]
+  let value = defaultValue || (typeof prop.default === 'function' ? prop.default() : prop.default)
   let type = prop.type
   if (Array.isArray(type)) {
     type = type[0].name

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>