Support for Checkbox Button?

[major-mayer]

Description

I'm coming from Buefy and am currently checking which of the components from Buefy are missing in Orgua. Is it possible to add the "checkbox button" to Orgua as well: https://buefy.org/documentation/checkbox#checkbox-button I did my research on the website but couldn't find an equivalent to this component.

Why Oruga need this feature

If I understand it correctly, Orgua is the spiritual successor of Buefy. So to make the migration path easy, it would be nice if for all components from Buefy there is an equivalent in Orgua.

[mlmoravek]

@jtommy could you check if this is just a styling topic or do we need to add some logic to it?

[myrsky-mapita]

The very similar radio button would also be very much appreciated 💕 https://buefy.org/documentation/radio#radio-button

[mlmoravek]

@myrsky-mapita Maybe you can use the tab components with toggle type instead for now?

[dauriata]

For information, I mimic buefy radio buttons with a rootClass="button" , checkedClass="is-primary" and this styling :

.b-radio.radio.button {
  input[type="radio"] {
    position: absolute;
    left: 0;
    opacity: 0;
    outline: none;
    z-index: -1;
  }
  .control-label {
    padding-left: 0px;
  }
}

Maybe worth adding to theme-bulma

This is the complete radioButton component I created for migration :

<template>
  <o-radio
    rootClass="button"
    checkedClass="is-primary"
    v-bind="attrs"
  >
    <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </o-radio>
</template>

<script>
export default {
  setup(props,context) {
    const attrs=context.attrs
    return {attrs}
  }
};
</script>

<style lang="scss">
.b-radio.radio.button {
  input[type="radio"] {
    position: absolute;
    left: 0;
    opacity: 0;
    outline: none;
    z-index: -1;
  }
  .control-label {
    padding-left: 0px;
  }
}
</style>