FormToggle.vue 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <div class="field" :class="{ 'pt-3' : hasOffset }" role="radiogroup" :aria-labelledby="inputId('label', fieldName)">
  3. <label :id="inputId('label', fieldName)" class="label" v-html="label"></label>
  4. <div class="is-toggle buttons">
  5. <button
  6. role="radio"
  7. type="button"
  8. class="button is-dark"
  9. :aria-checked="form[fieldName] === choice.value"
  10. :disabled="isDisabled"
  11. v-for="(choice, index) in choices"
  12. :key="index"
  13. :class="{ 'is-link' : form[fieldName] === choice.value }"
  14. v-on:click.stop="setRadio(choice.value)"
  15. >
  16. <input
  17. :id="inputId(inputType, choice.value)"
  18. :type="inputType"
  19. class="is-hidden"
  20. :checked="form[fieldName] === choice.value"
  21. :value="choice.value"
  22. v-model="form[fieldName]"
  23. :disabled="isDisabled"
  24. />
  25. <font-awesome-icon :icon="['fas', choice.icon]" v-if="choice.icon" class="mr-3" /> {{ choice.text }}
  26. </button>
  27. </div>
  28. <field-error :form="form" :field="fieldName" />
  29. <p class="help" v-html="help" v-if="help"></p>
  30. </div>
  31. </template>
  32. <script>
  33. export default {
  34. name: 'FormToggle',
  35. data() {
  36. return {
  37. inputType: 'radio'
  38. }
  39. },
  40. props: {
  41. label: {
  42. type: String,
  43. default: ''
  44. },
  45. fieldName: {
  46. type: String,
  47. default: '',
  48. required: true
  49. },
  50. choices: {
  51. type: Array,
  52. required: true
  53. },
  54. form: {
  55. type: Object,
  56. required: true
  57. },
  58. help: {
  59. type: String,
  60. default: ''
  61. },
  62. hasOffset: {
  63. type: Boolean,
  64. default: false
  65. },
  66. isDisabled: {
  67. type: Boolean,
  68. default: false
  69. }
  70. },
  71. methods: {
  72. setRadio(event) {
  73. this.form[this.fieldName] = event
  74. this.$emit(this.fieldName, this.form[this.fieldName])
  75. }
  76. }
  77. }
  78. </script>