feat(ProgressGroup): new component (#6860)

Author: benjamincanac

docs/app/components/content/ComponentProps.vue

@@ -66,6 +66,8 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
 
     // @ts-expect-error - Type is not correct
     prop.type = !prop.type.startsWith('boolean') && prop.schema?.kind === 'enum' && Object.keys(prop.schema.schema)?.length ? Object.values(prop.schema.schema).map(schema => schema?.type ? schema.type : schema).join(' | ') : prop.type
+    // `(string & {})` widens a literal union while keeping autocompletion, display it as plain `string`
+    prop.type = prop.type.replace(/\(?string & \{\}\)?/g, 'string')
     return prop
   }).sort((a, b) => {
     if (a.name === 'as') {

docs/app/components/content/ComponentPropsSchema.vue

@@ -14,6 +14,11 @@ function getSchemaProps(schema: PropertyMeta['schema']): any {
     return []
   }
 
+  // `string & {}` widens a literal union, its object schema only lists String.prototype methods
+  if (schema.type === 'string & {}') {
+    return []
+  }
+
   if (schema.kind === 'object') {
     return Object.values(schema.schema).filter(prop => !props.ignore?.includes(prop.name))
   }

docs/app/components/content/examples/progress-group/ProgressGroupCustomColorExample.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ProgressGroupItem } from '@nuxt/ui'
+
+const max = 128
+
+const items: ProgressGroupItem[] = [
+  { label: 'System prompt', value: 4.2, color: 'var(--color-neutral-400)' },
+  { label: 'Tool definitions', value: 18.4, color: 'var(--color-violet-400)' },
+  { label: 'Rules', value: 12.8, color: 'var(--color-green-400)' },
+  { label: 'Skills', value: 7.1, color: 'var(--color-amber-400)' },
+  { label: 'MCP & dynamic tools', value: 17.1, color: 'var(--color-rose-400)' },
+  { label: 'Subagent definitions', value: 5.5, color: 'var(--color-sky-400)' },
+  { label: 'Conversation', value: 24.6, color: 'var(--color-orange-400)' }
+]
+
+const used = items.reduce((total, item) => total + (item.value ?? 0), 0)
+</script>
+
+<template>
+  <UProgressGroup :items="items" :max="max" status class="w-96" :ui="{ status: 'w-full justify-between' }">
+    <template #status="{ percent }">
+      <p>{{ percent }}% Full</p>
+      <p class="text-muted">
+        ~{{ used.toFixed(1) }}K / {{ max }}K Tokens
+      </p>
+    </template>
+
+    <template #item-trailing="{ item }">
+      {{ item.value }}K
+    </template>
+  </UProgressGroup>
+</template>

docs/app/components/content/examples/progress-group/ProgressGroupItemExample.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ProgressGroupItem } from '@nuxt/ui'
+
+const items: ProgressGroupItem[] = [
+  { label: 'System', value: 24, color: 'neutral' },
+  { label: 'Apps', value: 8, color: 'error' },
+  { label: 'Documents', value: 12, color: 'warning' },
+  { label: 'Multimedia', value: 42, color: 'success' }
+]
+</script>
+
+<template>
+  <UProgressGroup :items="items" :max="128" class="w-96">
+    <template #item-label="{ item }">
+      <span class="font-medium">{{ item.label }}</span>
+    </template>
+
+    <template #item-trailing="{ item }">
+      {{ item.value }}GB
+    </template>
+  </UProgressGroup>
+</template>

docs/app/components/content/examples/progress-group/ProgressGroupStatusExample.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ProgressGroupItem } from '@nuxt/ui'
+
+const max = 128
+
+const items: ProgressGroupItem[] = [
+  { label: 'System', value: 24, color: 'neutral', icon: 'i-lucide-cog' },
+  { label: 'Apps', value: 8, color: 'error', icon: 'i-lucide-app-window' },
+  { label: 'Documents', value: 12, color: 'warning', icon: 'i-lucide-file' },
+  { label: 'Multimedia', value: 42, color: 'success', icon: 'i-lucide-film' }
+]
+
+const used = items.reduce((total, item) => total + (item.value ?? 0), 0)
+</script>
+
+<template>
+  <UProgressGroup :items="items" :max="max" status class="w-96" :ui="{ status: 'w-full justify-between' }">
+    <template #status>
+      <p>{{ used }}GB used</p>
+      <p class="text-muted">
+        {{ max - used }}GB remaining
+      </p>
+    </template>
+  </UProgressGroup>
+</template>