arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-27 18:30:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(MeterGroup): consistency when multiple useUI

Browse Source
This commit is contained in:
Benjamin Canac
2023-10-27 22:08:29 +02:00
parent 339eaf69a5
commit 18e8d28272
2 changed files with 23 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/runtime/components/elements/MeterGroup.ts
View File

@@ -56,8 +56,8 @@ export default defineComponent({
} }
}, },
setup (props, { slots }) { setup (props, { slots }) {
const { ui: meterGroupUi, attrs } = useUI('meterGroup', toRef(props, 'ui'), meterGroupConfig) const { ui, attrs } = useUI('meterGroup', toRef(props, 'ui'), meterGroupConfig)
const { ui: meterUi } = useUI('meter', undefined, meterConfig) const { ui: uiMeter } = useUI('meter', undefined, meterConfig)
// If there is no children, throw an expressive error. // If there is no children, throw an expressive error.
if (!slots.default) { if (!slots.default) {
@@ -83,7 +83,7 @@ export default defineComponent({
'rounded-full': { left: 'rounded-s-full', right: 'rounded-e-full' } 'rounded-full': { left: 'rounded-s-full', right: 'rounded-e-full' }
} }
return roundedMap[meterGroupUi.value.rounded] return roundedMap[ui.value.rounded]
}) })
function clampPercent (value: number, min: number, max: number): number { function clampPercent (value: number, min: number, max: number): number {
@@ -128,8 +128,8 @@ export default defineComponent({
vProps.ui.wrapper = node.props?.ui?.wrapper || '' vProps.ui.wrapper = node.props?.ui?.wrapper || ''
vProps.ui.wrapper += [ vProps.ui.wrapper += [
node.props?.ui?.wrapper, node.props?.ui?.wrapper,
props.ui?.meter?.background || meterGroupUi.value.background, props.ui?.meter?.background || ui.value.background,
meterGroupUi.value.transition ui.value.transition
].filter(Boolean).join(' ') ].filter(Boolean).join(' ')
// Override the background to make the bar appear "full" // Override the background to make the bar appear "full"
@@ -160,36 +160,32 @@ export default defineComponent({
})) }))
const baseClass = computed(() => { const baseClass = computed(() => {
return twMerge(meterGroupUi.value.base, props.class) return twJoin(
}) ui.value.base,
ui.value.background,
const wrapperClass = computed(() => { ui.value.rounded,
return twMerge(twJoin( ui.value.shadow,
meterGroupUi.value.wrapper, uiMeter.value.meter.size[props.size]
meterGroupUi.value.background, )
meterGroupUi.value.rounded,
meterGroupUi.value.shadow,
meterUi.value.meter.size[props.size]
), props.class)
}) })
const indicatorContainerClass = computed(() => { const indicatorContainerClass = computed(() => {
return twJoin( return twJoin(
meterUi.value.indicator.container uiMeter.value.indicator.container
) )
}) })
const indicatorClass = computed(() => { const indicatorClass = computed(() => {
return twJoin( return twJoin(
meterUi.value.indicator.text, uiMeter.value.indicator.text,
meterUi.value.indicator.size[props.size] uiMeter.value.indicator.size[props.size]
) )
}) })
const vNodeChildren = computed(() => { const vNodeChildren = computed(() => {
const vNodeSlots = [ const vNodeSlots = [
undefined, undefined,
h('div', { class: wrapperClass.value }, clones.value), h('div', { class: baseClass.value }, clones.value),
undefined undefined
] ]
@@ -205,10 +201,10 @@ export default defineComponent({
vNodeSlots[2] = h('ol', { class: 'list-disc list-inside' }, labels.value.map((label, key) => { vNodeSlots[2] = h('ol', { class: 'list-disc list-inside' }, labels.value.map((label, key) => {
const labelClass = computed(() => { const labelClass = computed(() => {
return twJoin( return twJoin(
meterUi.value.label.base, uiMeter.value.label.base,
meterUi.value.label.text, uiMeter.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), uiMeter.value.color[clones.value[key]?.props.color] ?? uiMeter.value.label.color.replaceAll('{color}', clones.value[key]?.props.color ?? uiMeter.value.default.color),
meterUi.value.label.size[props.size] uiMeter.value.label.size[props.size]
) )
}) })
@@ -221,6 +217,6 @@ export default defineComponent({
return vNodeSlots return vNodeSlots
}) })
return () => h('div', { class: baseClass.value, ...attrs }, vNodeChildren.value) return () => h('div', { class: ui.value.wrapper, ...attrs.value }, vNodeChildren.value)
} }
}) })

4
src/runtime/ui.config.ts
View File

@@ -537,8 +537,8 @@ export const meter = {
} }
export const meterGroup = { export const meterGroup = {
base: 'flex flex-col gap-2 w-full', wrapper: 'flex flex-col gap-2 w-full',
wrapper: 'flex flex-row flex-nowrap flex-shrink overflow-hidden', base: 'flex flex-row flex-nowrap flex-shrink overflow-hidden',
background: 'bg-gray-200 dark:bg-gray-700', background: 'bg-gray-200 dark:bg-gray-700',
transition: 'transition-all', transition: 'transition-all',
rounded: 'rounded-full', rounded: 'rounded-full',