feat(NcActionButton): support boolean value for radio type

[ShGKme]

🏃‍♂️ Short description

Allows to have checkbox-like usage for developers having radio semantics for users.

☑️ Resolves

Currently NcActionButton[type="radio"] supports only string modelValue based on value value. For example, if we have alignment, we can use the button with one string variable with left | center | right value.

<NcActionButton :model-value.sync="align" value="left"   type="radio" />
<NcActionButton :model-value.sync="align" value="center" type="radio" />
<NcActionButton :model-value.sync="align" value="right"  type="radio" />

align = left | center | right

It is great in a general case. But sometimes it is more convenient to define boolean check value for each button. For example, in text, where the value is more complex like ['heading', { level: 1 }] and is managed by Tiptop.

Imagine, we have such a data structure and update method. So we want to define the checked state for each button as it is, not by value.

const align = {
  isLeft: false,
  isCenter: true,
  isRight: false,
}

function setAlign(direction) {
  this.align.isLeft = false
  this.align.isCenter = false
  this.align.isRight = false
  this.align[`is${direction}`] = true
},

<NcActionButton :model-value="align.isLeft"   type="radio" @update:modelValue="setAlign('Left')" />
<NcActionButton :model-value="align.isCenter" type="radio" @update:modelValue="setAlign('Center')" />
<NcActionButton :model-value="align.isRight"  type="radio" @update:modelValue="setAlign('Right')" />

This PR introduces such a feature, based on modelValue type.

🖼️ Screenshots

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[ShGKme]

@juliushaertl Am I right that in text with Tiptop it is easier to detect if a button is active like for ['heading', { level: 1 }], than to have a string value for each option?

[juliushaertl]

That sounds like a sane addition. One thing I'm unsure about is switching to radio buttons in text give then current behaviour that you can toggle for example a heading style by clicking again on it. That doesn't seem like something a radio button would usually handle (unless there is an additional radio state for the paragraph style for example)

[ShGKme]

One thing I'm unsure about is switching to radio buttons in text give then current behaviour that you can toggle for example a heading style by clicking again on it. That doesn't seem like something a radio button would usually handle (unless there is an additional radio state for the paragraph style for example)

I'm not sure, I understand where I can find this behavior...

When I click on the "Heading" menu button, it always only opens the menu and doesn't change the styles, until I select the heading level.

And for disabling heading, I need to click on the selected heading.

But I realised now that click on selected radio button should probably disable the the selected item

[ShGKme]

Added toggle behavior for boolean values

[juliushaertl]

Yes, that is what I was referring to, toggling the radio state on the actual menu entries.

[susnux]

Might lead to situations where multiple radio buttons are active on the same time, but thats even possible now. So good for me, I like the feature!

[ShGKme]

Might lead to situations where multiple radio buttons are active on the same time

Yes, but the same with native input[type=radio], if they have duplicated name or no name.

We probably may add some automatic grouping in future:

• Easy in NcActionsButtonGroup
• A bit complex in NcActions where many groups separated by NcActionSeparator may exist.