[6.x] Fix non-localizable button group fields being editable in localizations

resources/js/components/ui/Button/Button.vue

@@ -25,6 +25,7 @@ const props = defineProps({
  inset: { type: Boolean, default: false },
  /** When `true`, the button shows an animated loading icon */
  loading: { type: Boolean, default: false },
+ readOnly: { type: Boolean, default: false },
  /** When `true`, the button will be rounded */
  round: { type: Boolean, default: false },
  /** Controls the size of the button. Options: `2xs`, `xs`, `sm`, `base`, `lg` */
@@ -42,7 +43,7 @@ const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
 const tag = computed(() => {
  if (props.as) return props.as;
- if (props.href && !props.disabled && !props.loading) {
+ if (props.href && !props.disabled && !props.loading && !props.readOnly) {
  return props.target === '_blank' ? 'a' : Link;
  }
  return 'button';
@@ -126,7 +127,7 @@ const restAttrs = computed(() => {
  :is="tag"
  v-bind="restAttrs"
  :class="buttonClasses"
- :disabled="disabled || loading"
+ :disabled="disabled || loading || readOnly"
  :data-ui-group-target="['subtle', 'ghost'].includes(props.variant) ? null : true"
  :href
  :target

resources/js/tests/components/fieldtypes/ButtonGroupFieldtype.test.js

@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import ButtonGroupFieldtype from '@/components/fieldtypes/ButtonGroupFieldtype.vue';
+
+window.ResizeObserver = class {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+};
+
+const options = [
+ { key: 'option_1', value: 'Option 1' },
+ { key: 'option_2', value: 'Option 2' },
+];
+
+test('value can be updated', async () => {
+ const wrapper = mount(ButtonGroupFieldtype, {
+ props: {
+ value: 'option_1',
+ handle: 'button_group',
+ config: { options },
+ },
+ });
+
+ await wrapper.findAll('button')[1].trigger('click');
+ expect(wrapper.emitted('update:value')[0]).toEqual(['option_2']);
+});
+
+test('value cannot be updated when read only', async () => {
+ const wrapper = mount(ButtonGroupFieldtype, {
+ props: {
+ value: 'option_1',
+ handle: 'button_group',
+ config: { options },
+ readOnly: true,
+ },
+ });
+
+ await wrapper.findAll('button')[1].trigger('click');
+ expect(wrapper.emitted('update:value')).toBeUndefined();
+});