Wikiki / bulma-checkradio

Bulma's extension to display better checkbox and radio imputs
MIT License
71 stars 43 forks source link

Sharing Vue component #71

Open vcmirko opened 2 years ago

vcmirko commented 2 years ago

The scss file needs to be there and load the original sass file. Would be great to add this to the package. PM me if you need help.

<template>
  <span>
      <input :type="checktype" :id="_uid" class="is-checkradio" :class="type" :value="val" v-model="checked" focus="prevent">
      <label :for="_uid"> {{ label }}</label>
  </span>
</template>
<script>
  import Vue from 'vue'
  import BulmaCheckRadio from "bulma-checkradio"
  import "../../public/assets/bulma_checkradio.scss"
  export default{
    name:"BulmaRadio",
    props: ['type','value', 'val','label','checktype'],
    data () {
      return {
      }
    },
    computed: {
      checked: {
        get() {
          return this.value
        },
        set(value) {
          this.$emit('input', value)
          this.$emit('change')
        }
      }
    },
    methods:{
      prevent(e){
        e.preventDefault()
      }
    }
  }
</script>

Usage in vue:

<BulmaCheckRadio :val="radiovalue" checktype="radio" v-for="radiovalue in field.values" :key="prefix+'_'+radiovalue" v-model="myRadioField" :name="myRadioFieldName" :type="{'is-danger is-block':hasError}" :label="radiovalue"  @change="doSomething" />
<BulmaCheckRadio checktype="checkbox" v-model="myCheckboxField" :name="myCheckboxFieldName" :type="{'is-danger is-block':hasError}" :label="My label" @change="doSomething" />