Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 27x 27x 27x 27x 27x 19x 19x 27x 1x 1x 1x 1x 1x 27x 3x 3x 3x 3x 3x 27x 1x 1x 1x 1x 1x 1x 27x 3x 3x 3x 3x 3x 27x 1x 1x 1x 1x 1x 1x 27x 2x 2x 2x 2x 2x 27x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script lang="ts" setup>
/**
* FzButtonGroup Component
*
* Container for grouping buttons in a horizontal layout with fixed spacing.
* Displays buttons in a row with consistent gap between them.
* Children divide available space equally and never wrap to a new line.
* Component occupies 100% width of its container.
*
* Validates that slot contains only FzButton components (2-3 buttons required).
*
* @component
* @example
* <FzButtonGroup>
* <FzButton>Button 1</FzButton>
* <FzButton>Button 2</FzButton>
* </FzButtonGroup>
*/
import { nextTick, onMounted, useSlots, watch } from 'vue'
import { FzContainer } from '@fiscozen/container'
import type { FzButtonGroupProps } from './types'
import { validateButtonGroupSlot } from './utils'
const props = withDefaults(defineProps<FzButtonGroupProps>(), {
horizontal: undefined,
gap: undefined,
size: undefined
})
const slots = useSlots()
/**
* Validates slot content on mount and warns if invalid.
*
* Uses nextTick to ensure slot is available before validation.
*/
onMounted(() => {
nextTick(() => {
const vnodes = slots.default?.()
const validation = validateButtonGroupSlot(vnodes || [])
if (!validation.valid && validation.error) {
console.warn(validation.error)
}
})
})
watch(
() => props.horizontal,
(value) => {
if (value !== undefined) {
console.warn(
'[FzButtonGroup] The "horizontal" prop is deprecated and will be removed in a future version. ' +
'Component is always horizontal. Please remove this prop.'
)
}
},
{ immediate: true }
)
watch(
() => props.gap,
(value) => {
if (value !== undefined) {
console.warn(
'[FzButtonGroup] The "gap" prop is deprecated and will be removed in a future version. ' +
'Component always uses fixed gap spacing. Please remove this prop.'
)
}
},
{ immediate: true }
)
watch(
() => props.size,
(value) => {
if (value !== undefined) {
console.warn(
'[FzButtonGroup] The "size" prop is deprecated and will be removed in a future version. ' +
'Component always uses fixed gap size. Please remove this prop.'
)
}
},
{ immediate: true }
)
</script>
<template>
<FzContainer horizontal gap="sm" layout="expand-all" class="w-full">
<slot></slot>
</FzContainer>
</template> |