feat(Meter): new component

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-right">
+        {{ used }}GB used ({{ Math.round(percent) }}%)
+      </div>
+    </template>
+  </UMeter>
+</template>

docs/components/content/examples/MeterSlotLabelExample.vue

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

docs/content/2.elements/10.meter.md

@@ -0,0 +1,204 @@
+---
+title: 'Meter'
+description: Display a gauge meter that fills or depletes
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Meter.vue
+---
+
+## Usage
+
+Use the `value` prop from `0` to `100` to set a value for the meter bar.
+
+::component-card
+---
+props:
+  value: 25
+---
+::
+
+::callout{icon="i-heroicons-information-circle"}
+You have a few alternatives to show a meter:
+
+* For task progression or loading indicators, use the [Progress](/elements/progress) component.
+* For inputs, check out the [Range](/forms/range) component.
+::
+
+### Min & max
+
+By default, `min` is `0` and `max` is `100`. You can change either of these using their respective props, even for negative numbers.
+
+::component-card
+---
+props:
+  value: -25
+  min: -50
+  max: 50
+---
+::
+
+### Indicator
+
+You may show a percentage indicator on top of the meter using the `indicator` prop.
+
+::component-card
+---
+props:
+  value: 35
+  indicator: true
+---
+::
+
+### Label
+
+Add a label below the meter using the `label` prop.
+
+::component-card
+---
+props:
+  value: 50
+  label: Glass of water
+excludedProps:
+  - value
+---
+::
+
+### Size
+
+Change the size of the meter bar using the `size` prop.
+
+::component-card
+---
+props:
+  value: 75.4
+  size: 'sm'
+  indicator: true
+  label: CPU Load
+excludedProps:
+  - value
+ui:
+  size:
+    sm: ''
+    md: ''
+    lg: ''
+---
+::
+
+### Style
+
+The `color` prop changes the visual style of the meter bar. The `color` can be any color from the `ui.colors` object.
+
+::component-card
+---
+props:
+  color: 'primary'
+  value: 80
+  indicator: true
+  label: Precipitation probability  
+excludedProps:
+  - value
+  - indicator
+  - label
+---
+::
+
+## Group
+
+To group multiple meters into a group, adding all values, use the `MeterGroup` component. 
+
+- To change the overall minimum and maximum value, pass the `min` and `max` props respectively.
+- To change size of all meters, use the `size` prop.
+- To show an indicator for the overall amount, set the `indicator` prop.
+
+::component-card{slug="MeterGroup"}
+---
+props:
+  size: 'md'
+  min: 0
+  max: 128
+  indicator: true
+ui:
+  size:
+    sm: ''
+    md: ''
+    lg: ''
+code: |
+  <UMeter :value="24" color="violet" />
+    <UMeter :value="8" color="red" />
+    <UMeter :value="12" color="orange" />
+    <UMeter :value="37" color="yellow" />
+    <UMeter :value="52" color="green" />
+---
+
+#default
+:u-meter{:value="24" color="violet"}
+:u-meter{:value="8" color="red"}
+:u-meter{:value="12" color="orange"}
+:u-meter{:value="17" color="yellow"}
+:u-meter{:value="32" color="green"}
+::
+
+## Slots
+
+### `indicator`
+
+Use the `#indicator` slot to change the indicator shown at the top of the bar. It receives the current meter percent.
+
+::component-example
+#default
+:meter-slot-indicator-example
+
+#code
+```vue
+<script setup>
+const used = ref(84.2)
+
+const total = 238.42
+</script>
+
+<template>
+  <UMeter :value="used" :max="total">
+    <template #indicator="{ percent }">
+      <div class="text-right">
+        {{ used }}GB used ({{ Math.round(percent) }}%)
+      </div>
+    </template>
+  </UMeter>
+</template>
+```
+::
+
+### `label`
+
+The `label` slot can be used to change how the label below the meter bar is shown. It receives the current meter percent.
+
+::component-example
+#default
+:meter-slot-label-example
+
+#code
+```vue
+<script setup>
+const used = ref(84.2)
+
+const total = 238.42
+</script>
+
+<template>
+  <UMeter :value="used" :max="total">
+    <template #label="{ percent }">
+      You have {{ Math.round(total - used) }}GB ({{ Math.round(100 - percent) }}%) of space remaining
+    </template>
+  </UMeter>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset