VSelectionControlGroup.mjs 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. import { createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VSelectionControlGroup.css";
  4. // Composables
  5. import { makeComponentProps } from "../../composables/component.mjs";
  6. import { provideDefaults } from "../../composables/defaults.mjs";
  7. import { makeDensityProps } from "../../composables/density.mjs";
  8. import { IconValue } from "../../composables/icons.mjs";
  9. import { useProxiedModel } from "../../composables/proxiedModel.mjs";
  10. import { makeThemeProps } from "../../composables/theme.mjs"; // Utilities
  11. import { computed, onScopeDispose, provide, toRef } from 'vue';
  12. import { deepEqual, genericComponent, getUid, propsFactory, useRender } from "../../util/index.mjs"; // Types
  13. export const VSelectionControlGroupSymbol = Symbol.for('vuetify:selection-control-group');
  14. export const makeSelectionControlGroupProps = propsFactory({
  15. color: String,
  16. disabled: {
  17. type: Boolean,
  18. default: null
  19. },
  20. defaultsTarget: String,
  21. error: Boolean,
  22. id: String,
  23. inline: Boolean,
  24. falseIcon: IconValue,
  25. trueIcon: IconValue,
  26. ripple: {
  27. type: [Boolean, Object],
  28. default: true
  29. },
  30. multiple: {
  31. type: Boolean,
  32. default: null
  33. },
  34. name: String,
  35. readonly: {
  36. type: Boolean,
  37. default: null
  38. },
  39. modelValue: null,
  40. type: String,
  41. valueComparator: {
  42. type: Function,
  43. default: deepEqual
  44. },
  45. ...makeComponentProps(),
  46. ...makeDensityProps(),
  47. ...makeThemeProps()
  48. }, 'SelectionControlGroup');
  49. export const makeVSelectionControlGroupProps = propsFactory({
  50. ...makeSelectionControlGroupProps({
  51. defaultsTarget: 'VSelectionControl'
  52. })
  53. }, 'VSelectionControlGroup');
  54. export const VSelectionControlGroup = genericComponent()({
  55. name: 'VSelectionControlGroup',
  56. props: makeVSelectionControlGroupProps(),
  57. emits: {
  58. 'update:modelValue': value => true
  59. },
  60. setup(props, _ref) {
  61. let {
  62. slots
  63. } = _ref;
  64. const modelValue = useProxiedModel(props, 'modelValue');
  65. const uid = getUid();
  66. const id = computed(() => props.id || `v-selection-control-group-${uid}`);
  67. const name = computed(() => props.name || id.value);
  68. const updateHandlers = new Set();
  69. provide(VSelectionControlGroupSymbol, {
  70. modelValue,
  71. forceUpdate: () => {
  72. updateHandlers.forEach(fn => fn());
  73. },
  74. onForceUpdate: cb => {
  75. updateHandlers.add(cb);
  76. onScopeDispose(() => {
  77. updateHandlers.delete(cb);
  78. });
  79. }
  80. });
  81. provideDefaults({
  82. [props.defaultsTarget]: {
  83. color: toRef(props, 'color'),
  84. disabled: toRef(props, 'disabled'),
  85. density: toRef(props, 'density'),
  86. error: toRef(props, 'error'),
  87. inline: toRef(props, 'inline'),
  88. modelValue,
  89. multiple: computed(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value)),
  90. name,
  91. falseIcon: toRef(props, 'falseIcon'),
  92. trueIcon: toRef(props, 'trueIcon'),
  93. readonly: toRef(props, 'readonly'),
  94. ripple: toRef(props, 'ripple'),
  95. type: toRef(props, 'type'),
  96. valueComparator: toRef(props, 'valueComparator')
  97. }
  98. });
  99. useRender(() => _createVNode("div", {
  100. "class": ['v-selection-control-group', {
  101. 'v-selection-control-group--inline': props.inline
  102. }, props.class],
  103. "style": props.style,
  104. "role": props.type === 'radio' ? 'radiogroup' : undefined
  105. }, [slots.default?.()]));
  106. return {};
  107. }
  108. });
  109. //# sourceMappingURL=VSelectionControlGroup.mjs.map