function(args) {
/*
is_app(true)
component_type("VB")
display_name("Checkbox control")
description("This will return the checkbox control")
base_component_id("checkbox_control")
load_once_from_file(true)
visibility("PRIVATE")
read_only(true)
properties(
    [
        {
            id:         "checked",
            name:       "Checked",
            type:       "Select",
            default:    "True",
            values:     [
                            {display: "True",   value: "True"},
                            {display: "False",  value: "False"}
                        ]
        }
        ,
        {
            id:     "background_color",
            name:   "Background color",
            type:   "String"
        }
        ,
        {
            id:     "changed_event",
            name:   "Changed event",
            type:   "Event",
            help:       `<div>Help text for
                            <b>changed_event</b> event
                         </div>`
        }

    ]
)//properties
logo_url("/driver_icons/checkbox_control.png")
*/

    Vue.component("checkbox_control",{
      props: ["args","design_mode","meta", "form",  "name", "refresh"]
      ,
      template: `<input v-bind:id='design_mode?"":args.name'
                        type="checkbox"
                        v-on:change='valChanged(event)'
                        v-bind:checked='(args.checked=="True")?"True":""'
                        >

                 </input>`
      ,
      data: function() {
          return {
          }
      }
      ,
      mounted: function() {
        registerComponent(this)
      }
      ,
      methods: {
          valChanged: function(e) {
              if(e.target.checked) {
                  this.args.checked="True"
              } else {
                  this.args.checked="False"
              }
              this.$emit('send', {
                                              type:               "subcomponent_event",
                                              form_name:           this.meta.form,
                                              control_name:        this.meta.name,
                                              sub_type:           "changed",
                                              code:                this.args.changed_event
                                          })

          }
      }
    })
}

@@ -992,16 +992,332 @@
        %7D
+%0A        ,%0A        %7B%0A            id:         %22width%22,%0A            name:       %22Width%22,%0A            default:    30,%0A            type:       %22Number%22%0A        %7D%0A        ,%0A        %7B%0A            id:         %22height%22,%0A            name:       %22Height%22,%0A            default:    30,%0A            type:       %22Number%22%0A        %7D
 %0A%0A    %5D%0A

MAke the checkbox component smaller