feat(Meter): new component (#827)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/components/content/examples/MeterGroupExampleSlots.vue

@@ -0,0 +1,17 @@
+<template>
+  <UMeterGroup :max="128">
+    <template #indicator>
+      <div class="flex gap-1.5 justify-between text-sm">
+        <p>86GB used</p>
+        <p class="text-gray-500 dark:text-gray-400">
+          42GB remaining
+        </p>
+      </div>
+    </template>
+
+    <UMeter :value="24" color="gray" label="System" icon="i-heroicons-cog-6-tooth" />
+    <UMeter :value="8" color="red" label="Apps" icon="i-heroicons-window" />
+    <UMeter :value="12" color="yellow" label="Documents" icon="i-heroicons-document" />
+    <UMeter :value="42" color="green" label="Multimedia" icon="i-heroicons-film" />
+  </UMeterGroup>
+</template>

docs/components/content/examples/MeterSlotIndicatorExample.vue

@@ -0,0 +1,15 @@
+<script setup>
+const used = ref(84.2)
+
+const total = 238.42
+</script>
+
+<template>
+  <UMeter :value="used" :max="total">
+    <template #indicator="{ percent }">
+      <div class="text-sm text-right">
+        {{ used }}GB used ({{ Math.round(percent) }}%)
+      </div>
+    </template>
+  </UMeter>
+</template>

docs/components/content/examples/MeterSlotLabelExample.vue

@@ -0,0 +1,15 @@
+<script setup>
+const used = ref(84.2)
+
+const total = 238.42
+</script>
+
+<template>
+  <UMeter :value="used" :max="total">
+    <template #label="{ percent }">
+      <p class="text-sm">
+        You are using {{ Math.round(used) }}GB ({{ Math.round(100 - percent) }}%) of space
+      </p>
+    </template>
+  </UMeter>
+</template>