feat(Meter): new component (#827)

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

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('|')

src/runtime/components/elements/Meter.vue

@@ -0,0 +1,187 @@
+<template>
+  <div :class="ui.wrapper" v-bind="attrs">
+    <template v-if="indicator || $slots.indicator">
+      <slot name="indicator" v-bind="{ percent, value }">
+        <div :class="indicatorContainerClass" :style="{ width: `${percent}%` }">
+          <div :class="indicatorClass">
+            {{ Math.round(percent) }}%
+          </div>
+        </div>
+      </slot>
+    </template>
+
+    <meter
+      :value="value"
+      :min="normalizedMin"
+      :max="normalizedMax"
+      :class="[meterClass, meterAppearanceClass, meterBarClass]"
+    />
+
+    <template v-if="label || $slots.label">
+      <slot name="label" v-bind="{ percent, value }">
+        <div :class="labelClass">
+          <UIcon v-if="icon" :name="icon" /> {{ label }}
+        </div>
+      </slot>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, toRef } from 'vue'
+import type { SlotsType, PropType } from 'vue'
+import { twJoin } from 'tailwind-merge'
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { Strategy, MeterColor, MeterSize } from '../../types'
+// @ts-expect-error
+import appConfig from '#build/app.config'
+import { meter } from '#ui/ui.config'
+
+const config = mergeConfig<typeof meter>(appConfig.ui.strategy, appConfig.ui.meter, meter)
+
+export default defineComponent({
+  inheritAttrs: false,
+  slots: Object as SlotsType<{
+    indicator?: { percent: number, value: number },
+    label?: { percent: number, value: number },
+  }>,
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    indicator: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String as PropType<MeterSize>,
+      default: () => config.default.size,
+      validator (value: string) {
+        return Object.keys(config.meter.size).includes(value)
+      }
+    },
+    color: {
+      type: String as PropType<MeterColor>,
+      default: () => config.default.color,
+      validator (value: string) {
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
+      }
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    class: {
+      type: [String, Object, Array] as PropType<any>,
+      default: undefined
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
+    }
+  },
+  setup (props) {
+    const { ui, attrs } = useUI('meter', toRef(props, 'ui'), config, toRef(props, 'class'))
+
+    function clampPercent (value: number, min: number, max: number): number {
+      if (min == max) {
+        return value < min ? 0 : 100
+      }
+
+      if (min > max) {
+        max = [min, min = max][0]
+      }
+
+      const percent = (value - min) / (max - min) * 100
+
+      return Math.max(0, Math.min(100, percent))
+    }
+
+    const indicatorContainerClass = computed(() => {
+      return twJoin(
+        ui.value.indicator.container
+      )
+    })
+
+    const indicatorClass = computed(() => {
+      return twJoin(
+        ui.value.indicator.text,
+        ui.value.indicator.size[props.size]
+      )
+    })
+
+    const meterClass = computed(() => {
+      return twJoin(
+        ui.value.meter.base,
+        ui.value.meter.background,
+        ui.value.meter.ring,
+        ui.value.meter.rounded,
+        ui.value.meter.shadow,
+        ui.value.color[props.color] ?? ui.value.meter.color.replaceAll('{color}', props.color),
+        ui.value.meter.size[props.size]
+      )
+    })
+
+    const meterAppearanceClass = computed(() => {
+      return twJoin(
+        ui.value.meter.appearance.inner,
+        ui.value.meter.appearance.meter,
+        ui.value.meter.appearance.bar,
+        ui.value.meter.appearance.value
+      )
+    })
+
+    const meterBarClass = computed(() => {
+      return twJoin(
+        ui.value.meter.bar.transition,
+        ui.value.meter.bar.ring,
+        ui.value.meter.bar.rounded,
+        ui.value.meter.bar.size[props.size]
+      )
+    })
+
+    const labelClass = computed(() => {
+      return twJoin(
+        ui.value.label.base,
+        ui.value.label.text,
+        ui.value.color[props.color] ?? ui.value.label.color.replaceAll('{color}', props.color),
+        ui.value.label.size[props.size]
+      )
+    })
+
+    const normalizedMin = computed(() => props.min > props.max ? props.max : props.min)
+    const normalizedMax = computed(() => props.max < props.min ? props.min : props.max)
+
+    const percent = computed(() => clampPercent(Number(props.value), normalizedMin.value, normalizedMax.value))
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      indicatorContainerClass,
+      indicatorClass,
+      meterClass,
+      meterAppearanceClass,
+      meterBarClass,
+      labelClass,
+      normalizedMin,
+      normalizedMax,
+      percent
+    }
+  }
+})
+</script>

src/runtime/components/elements/MeterGroup.ts

@@ -0,0 +1,226 @@
+import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
+import type { ComputedRef, VNode, SlotsType, PropType } from 'vue'
+import { twMerge, twJoin } from 'tailwind-merge'
+import UIcon from './Icon.vue'
+import Meter from './Meter.vue'
+import { useUI } from '../../composables/useUI'
+import { mergeConfig, getSlotsChildren } from '../../utils'
+import type { Strategy, MeterSize } from '../../types'
+// @ts-expect-error
+import appConfig from '#build/app.config'
+import { meter, meterGroup } from '#ui/ui.config'
+
+const meterConfig = mergeConfig<typeof meter>(appConfig.ui.strategy, appConfig.ui.meter, meter)
+const meterGroupConfig = mergeConfig<typeof meterGroup>(appConfig.ui.strategy, appConfig.ui.meterGroup, meterGroup)
+
+export default defineComponent({
+  components: {
+    UIcon
+  },
+  inheritAttrs: false,
+  slots: Object as SlotsType<{
+    default?: typeof Meter[],
+    indicator?: { percent: number },
+  }>,
+  props: {
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    size: {
+      type: String as PropType<MeterSize>,
+      default: () => meterConfig.default.size,
+      validator (value: string) {
+        return Object.keys(meterConfig.meter.bar.size).includes(value)
+      }
+    },
+    indicator: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: 'i-heroicons-minus'
+    },
+    class: {
+      type: [String, Object, Array] as PropType<any>,
+      default: undefined
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof meterGroupConfig & { strategy?: Strategy }>>,
+      default: undefined
+    }
+  },
+  setup (props, { slots }) {
+    const { ui: meterGroupUi, attrs } = useUI('meterGroup', toRef(props, 'ui'), meterGroupConfig)
+    const { ui: meterUi } = useUI('meter', undefined, meterConfig)
+
+    // If there is no children, throw an expressive error.
+    if (!slots.default) {
+      throw new Error('Meter Group has no Meter children.')
+    }
+
+    // Normalize the min and max numbers, if these are inversed.
+    const normalizedMin = computed(() => props.min > props.max ? props.max : props.min)
+    const normalizedMax = computed(() => props.max < props.min ? props.min : props.max)
+
+    const children = computed(() => getSlotsChildren(slots))
+
+    const rounded = computed(() => {
+      const roundedMap = {
+        'rounded-none': { left: 'rounded-s-none', right: 'rounded-e-none' },
+        'rounded-sm': { left: 'rounded-s-sm', right: 'rounded-e-sm' },
+        rounded: { left: 'rounded-s', right: 'rounded-e' },
+        'rounded-md': { left: 'rounded-s-md', right: 'rounded-e-md' },
+        'rounded-lg': { left: 'rounded-s-lg', right: 'rounded-e-lg' },
+        'rounded-xl': { left: 'rounded-s-xl', right: 'rounded-e-xl' },
+        'rounded-2xl': { left: 'rounded-s-2xl', right: 'rounded-e-2xl' },
+        'rounded-3xl': { left: 'rounded-s-3xl', right: 'rounded-e-3xl' },
+        'rounded-full': { left: 'rounded-s-full', right: 'rounded-e-full' }
+      }
+
+      return roundedMap[meterGroupUi.value.rounded]
+    })
+
+    function clampPercent (value: number, min: number, max: number): number {
+      if (min == max) {
+        return value < min ? 0 : 100
+      }
+
+      if (min > max) {
+        max = [min, min = max][0]
+      }
+
+      const percent = (value - min) / (max - min) * 100
+
+      return Math.max(0, Math.min(100, percent))
+    }
+
+    // We have to store the labels outside to preserve reactivity later.
+    const labels = computed(() => {
+      return children.value.map(node => node.props.label)
+    })
+
+    const percents = computed(() => {
+      return children.value.map(node => clampPercent(node.props.value, props.min, props.max))
+    })
+
+    const percent = computed(() => {
+      return Math.max(0, Math.max(percents.value.reduce((prev, percent) => prev + percent, 0)))
+    })
+
+    const clones: ComputedRef<VNode> = computed(() => children.value.map((node, index) => {
+      const vProps: any = {}
+
+      vProps.style = { width: `${percents.value[index]}%` }
+
+      // Normalize the props to be the same on all groups
+      vProps.size = props.size
+      vProps.min = normalizedMin.value
+      vProps.max = normalizedMax.value
+
+      // Adjust the style of all meters, so they appear in a row.
+      vProps.ui = node.props?.ui || {}
+      vProps.ui.wrapper = node.props?.ui?.wrapper || ''
+      vProps.ui.wrapper += [
+        node.props?.ui?.wrapper,
+        props.ui?.meter?.background || meterGroupUi.value.background,
+        meterGroupUi.value.transition
+      ].filter(Boolean).join(' ')
+
+      // Override the background to make the bar appear "full"
+      vProps.ui.meter = node.props?.ui?.meter || {}
+      vProps.ui.meter.background = `bg-${node.props.color}-500 dark:bg-${node.props.color}-400`
+      vProps.ui.meter.rounded = 'rounded-none'
+      vProps.ui.meter.bar = node.props?.ui?.meter?.bar || {}
+
+      if (index === 0) {
+        vProps.ui.meter.rounded = `${rounded.value.left} rounded-e-none`
+      }
+
+      if (index === children.value.length - 1) {
+        vProps.ui.meter.rounded = `${rounded.value.right} rounded-s-none`
+      }
+
+      // Move the labels out of the node so these can be checked later
+      labels.value[index] = node.props.label
+
+      const clone = cloneVNode(node, vProps)
+
+      // @ts-expect-error
+      delete(clone.children?.label)
+      delete(clone.props.indicator)
+      delete(clone.props.label)
+
+      return clone
+    }))
+
+    const baseClass = computed(() => {
+      return twMerge(meterGroupUi.value.base, props.class)
+    })
+
+    const wrapperClass = computed(() => {
+      return twMerge(twJoin(
+        meterGroupUi.value.wrapper,
+        meterGroupUi.value.background,
+        meterGroupUi.value.rounded,
+        meterGroupUi.value.shadow,
+        meterUi.value.meter.size[props.size]
+      ), props.class)
+    })
+
+    const indicatorContainerClass = computed(() => {
+      return twJoin(
+        meterUi.value.indicator.container
+      )
+    })
+
+    const indicatorClass = computed(() => {
+      return twJoin(
+        meterUi.value.indicator.text,
+        meterUi.value.indicator.size[props.size]
+      )
+    })
+
+    const vNodeChildren = computed(() => {
+      const vNodeSlots = [
+        undefined,
+        h('div', { class: wrapperClass.value }, clones.value),
+        undefined
+      ]
+
+      if (props.indicator) {
+        vNodeSlots[0] = h('div', { class: indicatorContainerClass.value }, [
+          h('div', { class: indicatorClass.value, style: { width: `${percent.value}%` } }, Math.round(percent.value) + '%')
+        ])
+      } else if (slots.indicator) {
+        // @ts-expect-error
+        vNodeSlots[0] = slots.indicator({ percent: percent.value })
+      }
+
+      vNodeSlots[2] = h('ol', { class: 'list-disc list-inside' }, labels.value.map((label, key) => {
+        const labelClass = computed(() => {
+          return twJoin(
+            meterUi.value.label.base,
+            meterUi.value.label.text,
+            meterUi.value.color[clones.value[key]?.props.color] ?? meterUi.value.label.color.replaceAll('{color}', clones.value[key]?.props.color ?? meterUi.value.default.color),
+            meterUi.value.label.size[props.size]
+          )
+        })
+
+        return h('li', { class: labelClass.value }, [
+          h(UIcon, { name: clones.value[key]?.props.icon ?? props.icon }),
+          `${label} (${ Math.round(percents.value[key]) }%)`
+        ])
+      }))
+
+      return vNodeSlots
+    })
+
+    return () => h('div', { class: baseClass.value, ...attrs }, vNodeChildren.value)
+  }
+})

src/runtime/types/index.d.ts

@@ -7,6 +7,7 @@ export * from './command-palette'
 export * from './dropdown'
 export * from './form'
 export * from './link'
+export * from './meter'
 export * from './notification'
 export * from './popper'
 export * from './progress'

src/runtime/types/meter.d.ts

@@ -0,0 +1,5 @@
+import { meter } from '../ui.config'
+import colors from '#ui-colors'
+
+export type MeterSize = keyof typeof meter.meter.size
+export type MeterColor = keyof typeof meter.color | typeof colors[number]

src/runtime/ui.config.ts

@@ -444,7 +444,7 @@ export const progress = {
     base: 'transition-all opacity-0 truncate row-start-1 col-start-1',
     align: 'text-end',
     active: 'opacity-100',
-    first: 'text-gray-500'
+    first: 'text-gray-500 dark:text-gray-400'
   },
   animation: {
     carousel: 'bar-animation-carousel',
@@ -459,6 +459,95 @@ export const progress = {
   }
 }
 
+export const meter = {
+  wrapper: 'w-full flex flex-col gap-2',
+  indicator: {
+    container: 'min-w-fit transition-all',
+    text: 'text-gray-400 dark:text-gray-500 text-end',
+    size: {
+      '2xs': 'text-xs',
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-sm',
+      lg: 'text-sm',
+      xl: 'text-base',
+      '2xl': 'text-base'
+    }
+  },
+  meter: {
+    base: 'appearance-none block w-full bg-none overflow-y-hidden',
+    background: 'bg-gray-200 dark:bg-gray-700',
+    color: 'text-{color}-500 dark:text-{color}-400',
+    ring: '',
+    rounded: 'rounded-full',
+    shadow: '',
+    size: {
+      '2xs': 'h-px',
+      xs: 'h-0.5',
+      sm: 'h-1',
+      md: 'h-2',
+      lg: 'h-3',
+      xl: 'h-4',
+      '2xl': 'h-5'
+    },
+    appearance: {
+      inner: '[&::-webkit-meter-inner-element]:block [&::-webkit-meter-inner-element]:relative [&::-webkit-meter-inner-element]:border-none [&::-webkit-meter-inner-element]:bg-none [&::-webkit-meter-inner-element]:bg-transparent',
+      meter: '[&::-webkit-meter-bar]:border-none [&::-webkit-meter-bar]:bg-none [&::-webkit-meter-bar]:bg-transparent',
+      bar: '[&::-webkit-meter-optimum-value]:border-none [&::-webkit-meter-optimum-value]:bg-none [&::-webkit-meter-optimum-value]:bg-current',
+      value: '[&::-moz-meter-bar]:border-none [&::-moz-meter-bar]:bg-none [&::-moz-meter-bar]:bg-current'
+    },
+    bar: {
+      transition: '[&::-webkit-meter-optimum-value]:transition-all [&::-moz-meter-bar]:transition-all',
+      ring: '',
+      rounded: '[&::-webkit-meter-optimum-value]:rounded-full [&::-moz-meter-bar]:rounded-full',
+      size: {
+        '2xs': '[&::-webkit-meter-optimum-value]:h-px [&::-moz-meter-bar]:h-px',
+        xs: '[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5',
+        sm: '[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1',
+        md: '[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2',
+        lg: '[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3',
+        xl: '[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4',
+        '2xl': '[&::-webkit-meter-optimum-value]:h-5 [&::-moz-meter-bar]:h-5'
+      }
+    }
+  },
+  label: {
+    base: 'flex gap-2 items-center',
+    text: 'truncate',
+    color: 'text-{color}-500 dark:text-{color}-400',
+    size: {
+      '2xs': 'text-xs',
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-sm',
+      lg: 'text-sm',
+      xl: 'text-base',
+      '2xl': 'text-base'
+    }
+  },
+  color: {
+    white: 'text-white dark:text-black',
+    black: 'text-black dark:text-white',
+    gray: 'text-gray-500 dark:text-gray-400'
+  },
+  default: {
+    size: 'md',
+    color: 'primary'
+  }
+}
+
+export const meterGroup = {
+  base: 'flex flex-col gap-2 w-full',
+  wrapper: 'flex flex-row flex-nowrap flex-shrink overflow-hidden',
+  background: 'bg-gray-200 dark:bg-gray-700',
+  transition: 'transition-all',
+  rounded: 'rounded-full',
+  shadow: '',
+  default: {
+    size: 'md'
+  }
+}
+
 // Forms
 
 export const input = {