feat(Meter): new component (#827)

Co-authored-by: Benjamin Canac <[email protected]>

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>

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

@@ -0,0 +1,180 @@
+---
+title: 'Meter'
+description: Display a gauge meter that fills or depletes.
+navigation:
+  badge: New
+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-light-bulb"}
+Check out the [Range](/forms/range) component for inputs
+::
+
+### 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
+---
+baseProps:
+  value: 86
+props:
+  label: Disk usage
+---
+::
+
+### Icon
+
+You may also add an icon to the start label using the `icon` prop.
+
+::component-card
+---
+baseProps:
+  value: 86
+  label: Disk usage
+props:
+  icon: i-heroicons-server
+excludedProps:
+  - icon
+---
+::
+
+### Size
+
+Change the size of the meter bar using the `size` prop.
+
+::component-card
+---
+baseProps:
+  value: 75.4
+props:
+  size: 'md'
+  indicator: true
+  label: CPU Load
+---
+::
+
+### 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
+---
+baseProps:
+  value: 80
+  indicator: true
+  label: Memory usage
+props:
+  color: 'primary'
+---
+::
+
+## 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 or slot.
+- To change the color of each meter, use the `color` prop.
+- To show a label for each meter, use the `label` prop on each meter.
+- To change the icon for each meter, use the `icon` prop.
+
+::component-card{slug="MeterGroup"}
+---
+baseProps:
+  icon: i-heroicons-minus
+props:
+  min: 0
+  max: 128
+  size: 'md'
+  indicator: true
+code: |
+  <UMeter :value="24" color="gray" label="System" />
+    <UMeter :value="8" color="red" label="Apps" />
+    <UMeter :value="12" color="yellow" label="Documents" />
+    <UMeter :value="42" color="green" label="Multimedia" />
+    <!-- Total: 86 -->
+---
+
+#default
+:u-meter{:value="24" color="gray" label="System"}
+:u-meter{:value="8" color="red" label="Apps"}
+:u-meter{:value="12" color="yellow" label="Documents"}
+:u-meter{:value="42" color="green" label="Multimedia"}
+::
+
+::callout{icon="i-heroicons-exclamation-triangle"}
+When the Meters are grouped, their individual indicators and label slots are stripped away.
+::
+
+A Meter group can also be used with an [indicator slot](#indicator-1), and even individual meter icons.
+
+:component-example{component="meter-group-example-slots"}
+
+## 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{component="meter-slot-indicator-example"}
+
+### `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{component="meter-slot-label-example"}
+
+## Props
+
+:component-props
+
+:u-divider{label="MeterGroup" type="dashed" class="my-12"}
+
+:component-props{slug="MeterGroup"}
+
+## Preset
+
+:component-preset
+
+:component-preset{slug="MeterGroup"}

src/colors.ts

@@ -177,6 +177,17 @@ const safelistByComponent = {
   }, {
     pattern: new RegExp(`text-(${colorsAsRegex})-500`)
   }],
+  meter: (colorsAsRegex) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+  }],
   notification: (colorsAsRegex) => [{
     pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
     variants: ['dark']
@@ -193,7 +204,9 @@ const safelistByComponent = {
 const safelistComponentAliasesMap = {
   'USelect': 'UInput',
   'USelectMenu': 'UInput',
-  'UTextarea': 'UInput'
+  'UTextarea': 'UInput',
+  'URadioGroup': 'URadio',
+  'UMeterGroup': 'UMeter'
 }
 
 const colorsAsRegex = (colors: string[]): string => colors.join('|')