mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-18 14:08:06 +01:00
feat(Meter): new component (#827)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Italo
GitHub
187
src/runtime/components/elements/Meter.vue
Normal file
187
src/runtime/components/elements/Meter.vue
Normal file
@@ -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>
|
||||
226
src/runtime/components/elements/MeterGroup.ts
Normal file
226
src/runtime/components/elements/MeterGroup.ts
Normal file
@@ -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)
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user