button-group.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import { createVNode as _createVNode } from "vue";
  2. import { computed, defineComponent, reactive } from 'vue';
  3. import { flattenChildren } from '../_util/props-util';
  4. import useConfigInject from '../config-provider/hooks/useConfigInject';
  5. import { useToken } from '../theme/internal';
  6. import devWarning from '../vc-util/devWarning';
  7. import createContext from '../_util/createContext';
  8. export const buttonGroupProps = () => ({
  9. prefixCls: String,
  10. size: {
  11. type: String
  12. }
  13. });
  14. export const GroupSizeContext = createContext();
  15. export default defineComponent({
  16. compatConfig: {
  17. MODE: 3
  18. },
  19. name: 'AButtonGroup',
  20. props: buttonGroupProps(),
  21. setup(props, _ref) {
  22. let {
  23. slots
  24. } = _ref;
  25. const {
  26. prefixCls,
  27. direction
  28. } = useConfigInject('btn-group', props);
  29. const [,, hashId] = useToken();
  30. GroupSizeContext.useProvide(reactive({
  31. size: computed(() => props.size)
  32. }));
  33. const classes = computed(() => {
  34. const {
  35. size
  36. } = props;
  37. let sizeCls = '';
  38. switch (size) {
  39. case 'large':
  40. sizeCls = 'lg';
  41. break;
  42. case 'small':
  43. sizeCls = 'sm';
  44. break;
  45. case 'middle':
  46. case undefined:
  47. break;
  48. default:
  49. // eslint-disable-next-line no-console
  50. devWarning(!size, 'Button.Group', 'Invalid prop `size`.');
  51. }
  52. return {
  53. [`${prefixCls.value}`]: true,
  54. [`${prefixCls.value}-${sizeCls}`]: sizeCls,
  55. [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
  56. [hashId.value]: true
  57. };
  58. });
  59. return () => {
  60. var _a;
  61. return _createVNode("div", {
  62. "class": classes.value
  63. }, [flattenChildren((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots))]);
  64. };
  65. }
  66. });