new CheckboxRadioSwitch prop to enable alternative style, for radio t…

…ype only

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>

src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue

@@ -70,6 +70,27 @@ export default {
  sharingPermission: {{ sharingPermission }}
  </div>
 </template>
+<script>
+ export default {
+ data() {
+ return {
+ sharingPermission: 'r',
+ }
+ }
+ }
+</script>
+```
+
+### Standard radio set with alternative style
+```vue
+<template>
+ <div>
+ <CheckboxRadioSwitch :checked.sync="sharingPermission" value="r" name="sharing_permission_radio" type="radio" :alternative-style="true">Default permission read</CheckboxRadioSwitch>
+ <CheckboxRadioSwitch :checked.sync="sharingPermission" value="rw" name="sharing_permission_radio" type="radio" :alternative-style="true">Default permission read+write</CheckboxRadioSwitch>
+ <br>
+ sharingPermission: {{ sharingPermission }}
+ </div>
+</template>
 <script>
 export default {
  data() {
@@ -133,6 +154,7 @@ export default {
  'checkbox-radio-switch--checked': isChecked,
  'checkbox-radio-switch--disabled': disabled,
  'checkbox-radio-switch--indeterminate': indeterminate,
+ 'checkbox-radio-switch--alternate-radio': isAlternativeRadio,
  }"
  :style="cssVars"
  class="checkbox-radio-switch">
@@ -149,7 +171,7 @@ export default {
  <label :for="id" class="checkbox-radio-switch__label">
  <div v-if="loading" class="icon-loading-small checkbox-radio-switch__icon" />
  <icon :is="checkboxRadioIconElement"
- v-else
+ v-else-if="!isAlternativeRadio"
  :size="size"
  class="checkbox-radio-switch__icon"
  title=""
@@ -210,6 +232,14 @@ export default {
  validator: type => type === TYPE_CHECKBOX || type === TYPE_RADIO || type === TYPE_SWITCH,
  },
 
+ /**
+ * Toggle the alternative style (for radio type only)
+ */
+ alternativeStyle: {
+ type: Boolean,
+ default: false,
+ },
+
  /**
  * Checked state. To be used with `:value.sync`
  */
@@ -295,6 +325,10 @@ export default {
  return TYPE_CHECKBOX
  },
 
+ isAlternativeRadio() {
+ return this.type === TYPE_RADIO && this.alternativeStyle
+ },
+
  /**
  * Check if that entry is checked
  * If value is defined, we use that as the checked value
@@ -459,10 +493,43 @@ $spacing: 4px;
  color: var(--color-text-lighter);
  }
 
- // If  switch is checked AND disabled, use the fade primary colour
+ // If switch is checked AND disabled, use the fade primary colour
  &-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked &__icon {
  color: var(--color-primary-element-light);
  }
-}
 
+ &.checkbox-radio-switch--alternate-radio.checkbox-radio-switch {
+ border: 2px solid var(--color-border-dark);
+ border-radius: var(--border-radius);
+
+ // avoid double borders between elements
+ & + &:not(&--checked) {
+ border-top: 0;
+ }
+ & + &--checked {
+ // as the selected element has all borders:
+ // small trick to cover the previous bottom border (only if there is one)
+ margin-top: -2px;
+ }
+
+ &--checked {
+ font-weight: bold;
+ border: 2px solid var(--color-primary-element-light);
+
+ &:hover {
+ border: 2px solid var(--color-primary);
+ }
+
+ label {
+ background-color: var(--color-background-dark);
+ }
+ }
+
+ .checkbox-radio-switch__label {
+ border-radius: 0 !important;
+ width: 100% !important;
+ margin: 0 !important;
+ }
+ }
+}
 </style>