From bcaca46ccc002151287939f2ee9bd6546ddc59db Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 26 Jul 2024 16:13:02 +0200
Subject: [PATCH] docs(chip): update

---
 .../accordion/AccordionModelValueExample.vue  |   2 +-
 .../content/examples/chip/ChipShowExample.vue |  25 ++++
 .../examples/tabs/TabsModelValueExample.vue   |   2 +-
 .../examples/tooltip/TooltipOpenExample.vue   |   2 +-
 docs/content/3.components/chip.md             | 125 ++++++++++++++++++
 docs/nuxt.config.ts                           |   1 +
 src/runtime/components/Chip.vue               |   5 +-
 7 files changed, 158 insertions(+), 4 deletions(-)
 create mode 100644 docs/app/components/content/examples/chip/ChipShowExample.vue

diff --git a/docs/app/components/content/examples/accordion/AccordionModelValueExample.vue b/docs/app/components/content/examples/accordion/AccordionModelValueExample.vue
index 69a02c4d..5acf925e 100644
--- a/docs/app/components/content/examples/accordion/AccordionModelValueExample.vue
+++ b/docs/app/components/content/examples/accordion/AccordionModelValueExample.vue
@@ -19,7 +19,7 @@ const items = [
 
 const active = ref('0')
 
-// Note: This is for demonstration purposes only.
+// Note: This is for demonstration purposes only. Don't do this at home.
 onMounted(() => {
   setInterval(() => {
     active.value = String((Number(active.value) + 1) % items.length)
diff --git a/docs/app/components/content/examples/chip/ChipShowExample.vue b/docs/app/components/content/examples/chip/ChipShowExample.vue
new file mode 100644
index 00000000..1d66abc5
--- /dev/null
+++ b/docs/app/components/content/examples/chip/ChipShowExample.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const statuses = ['online', 'offline', 'busy', 'away']
+const status = ref(statuses[0])
+
+const color = computed(() => ({
+  online: 'green',
+  offline: 'gray',
+  busy: 'red',
+  away: 'amber'
+})[status.value] as any)
+const show = computed(() => status.value !== 'offline')
+
+// Note: This is for demonstration purposes only. Don't do this at home.
+onMounted(() => {
+  setInterval(() => {
+    status.value = statuses[Math.floor(Math.random() * statuses.length)]
+  }, 1000)
+})
+</script>
+
+<template>
+  <UChip :color="color" :show="show" inset>
+    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
+  </UChip>
+</template>
diff --git a/docs/app/components/content/examples/tabs/TabsModelValueExample.vue b/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
index 3a623322..c3a8c074 100644
--- a/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
+++ b/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
@@ -10,7 +10,7 @@ const items = [
 
 const active = ref('0')
 
-// Note: This is for demonstration purposes only.
+// Note: This is for demonstration purposes only. Don't do this at home.
 onMounted(() => {
   setInterval(() => {
     active.value = String((Number(active.value) + 1) % items.length)
diff --git a/docs/app/components/content/examples/tooltip/TooltipOpenExample.vue b/docs/app/components/content/examples/tooltip/TooltipOpenExample.vue
index 3bac6e66..064a2b51 100644
--- a/docs/app/components/content/examples/tooltip/TooltipOpenExample.vue
+++ b/docs/app/components/content/examples/tooltip/TooltipOpenExample.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const open = ref(true)
 
-// Note: This is for demonstration purposes only.
+// Note: This is for demonstration purposes only. Don't do this at home.
 onMounted(() => {
   setInterval(() => {
     open.value = !open.value
diff --git a/docs/content/3.components/chip.md b/docs/content/3.components/chip.md
index 08189282..498ff3bf 100644
--- a/docs/content/3.components/chip.md
+++ b/docs/content/3.components/chip.md
@@ -8,8 +8,133 @@ links:
 
 ## Usage
 
+Wrap any component with a Chip to display an indicator.
+
+::component-code
+---
+prettier: true
+slots:
+  default: |
+
+    <UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
+---
+:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
+::
+
+### Color
+
+Use the `color` prop to change the color of the Chip.
+
+::component-code
+---
+prettier: true
+props:
+  color: gray
+slots:
+  default: |
+
+    <UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
+---
+:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
+::
+
+### Size
+
+Use the `size` prop to change the size of the Chip.
+
+::component-code
+---
+prettier: true
+props:
+  size: 3xl
+slots:
+  default: |
+
+    <UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
+---
+:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
+::
+
+### Text
+
+Use the `text` prop to set the text of the Chip.
+
+::component-code
+---
+prettier: true
+props:
+  text: 5
+  size: 3xl
+slots:
+  default: |
+
+    <UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
+---
+:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
+::
+
+### Position
+
+Use the `position` prop to change the position of the Chip.
+
+::component-code
+---
+prettier: true
+props:
+  position: 'bottom-left'
+slots:
+  default: |
+
+    <UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
+---
+:u-button{icon="i-heroicons-envelope" color="gray" variant="subtle"}
+::
+
+### Inset
+
+Use the `inset` prop to display the Chip inside the component. This is useful when dealing with rounded components.
+
+::component-code
+---
+prettier: true
+props:
+  inset: true
+slots:
+  default: |
+
+    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
+---
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4"}
+::
+
+### Standalone
+
+Use the `standalone` prop alongside the `inset` prop to display the Chip inline.
+
+::component-code
+---
+props:
+  standalone: true
+  inset: true
+---
+::
+
+::note
+It's used this way in the [CommandPalette](/components/command-palette), [InputMenu](/components/input-menu), [Select](/components/select) or [SelectMenu](/components/select-menu) components for example.
+::
+
 ## Examples
 
+### Control visibility
+
+You can control the visibility of the Chip using the `show` prop.
+
+:component-example{name="chip-show-example"}
+
+::note
+In this example, the Chip has a color per status and is only displayed when the status is not `offline`.
+::
+
 ## API
 
 ### Props
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 80925b5a..8e59a39f 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -126,6 +126,7 @@ export default defineNuxtConfig({
         'UButton',
         'UButtonGroup',
         'UCheckbox',
+        'UChip',
         'UIcon',
         'UInput',
         'UKbd',
diff --git a/src/runtime/components/Chip.vue b/src/runtime/components/Chip.vue
index 06208d03..46438207 100644
--- a/src/runtime/components/Chip.vue
+++ b/src/runtime/components/Chip.vue
@@ -44,7 +44,10 @@ import { computed } from 'vue'
 import { Primitive } from 'radix-vue'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 
-const props = defineProps<ChipProps>()
+const props = withDefaults(defineProps<ChipProps>(), {
+  inset: false,
+  standalone: false
+})
 defineSlots<ChipSlots>()
 
 const show = defineModel<boolean>('show', { default: true })