minnan/src/components/basic/ButtonGroup.vue

<template>
  <FlexView v-bind="$props">
    <slot />
  </FlexView>
</template>

<script setup lang="ts">
import FlexView, { type FlexProps } from '../layout/FlexView.vue';
import { useChildLinkParent } from '../composeabe/ChildItem';
import { computed, provide, ref, toRef, type ComputedRef, type Ref } from 'vue';

export interface ButtonGroupProp extends FlexProps {
  /**
   * 是否禁用按钮组下的全部按钮
   * @default false
   */
  disabled?: boolean;
  /**
   * 按钮组间距。为0时会自动合并按钮，使其圆角自动合并
   * @default 0
   */
  gap?: number;
}

defineOptions({
  options: {
    styleIsolation: "shared",
    virtualHost: true,
  }
})

const props = withDefaults(defineProps<ButtonGroupProp>(), {
  direction: 'row',
  disabled: false,
  gap: 0,
});

const mergeRadius = computed(() => {
  return props.gap === 0;
});

const length = ref(0);

const {
  getPosition,
  getLength,
  resetCounter,
} = useChildLinkParent({
  onLengthChanged() {
    length.value = getLength();
  },
});

export interface ButtonGroupContext {
  groupDisabled: Ref<boolean>;
  mergeRadius: ComputedRef<boolean>;
  length: typeof length;
  resetCounter: typeof resetCounter;
  getPosition: typeof getPosition;
}

provide<ButtonGroupContext>('buttonGroupContext', {
  groupDisabled: toRef(props.disabled),
  mergeRadius,
  length,
  getPosition,
  resetCounter,
});
</script>

<style>
</style>