How to use the schema-based-json-editor.buttonGroupStyleString function in schema-based-json-editor

},
  props: ['schema', 'initialValue', 'title', 'theme', 'icon', 'locale', 'readonly', 'required', 'hasDeleteButton']
})
export class NullEditor extends Vue {
  schema!: common.ArraySchema
  initialValue?: null
  title!: string
  theme!: common.Theme
  icon!: common.Icon
  locale!: common.Locale
  readonly!: boolean
  required!: boolean
  hasDeleteButton!: boolean

  value? = null
  buttonGroupStyle = common.buttonGroupStyleString

  beforeMount() {
    this.value = common.getDefaultValue(this.required, this.schema, this.initialValue) as null
    this.$emit('update-value', { value: this.value, isValid: true })
  }

  get isReadOnly() {
    return this.readonly || this.schema.readonly
  }
  get hasDeleteButtonFunction() {
    return this.hasDeleteButton && !this.isReadOnly
  }
  get titleToShow() {
    return common.getTitle(this.title, this.schema.title)
  }

@Output()
  onDelete = new EventEmitter()
  @Input()
  readonly?: boolean
  @Input()
  required?: boolean
  @Input()
  hasDeleteButton!: boolean
  @Input()
  monacoEditor?: common.MonacoEditor

  @ViewChild('monacoEditorRef', { static: false })
  private monacoEditorRef!: ElementRef

  value?: string
  buttonGroupStyle = common.buttonGroupStyleString
  private monacoCodeEditor?: common.IStandaloneCodeEditor
  ngOnInit() {
    this.value = common.getDefaultValue(this.required, this.schema, this.initialValue) as string
    this.updateValue.emit({ value: this.value, isValid: true })
  }
  ngAfterViewInit() {
    if (this.monacoEditor && this.monacoEditorRef && this.monacoEditorRef.nativeElement) {
      this.monacoCodeEditor = this.monacoEditor.create(this.monacoEditorRef.nativeElement as HTMLDivElement, {
        value: 'export default ' + JSON5.stringify(this.value, null, 2),
        language: 'javascript',
        minimap: { enabled: false },
        lineNumbers: 'off'
      })
      let timer: NodeJS.Timer
      this.monacoCodeEditor.onDidChangeModelContent((e) => {
        clearTimeout(timer)

@Input()
  forceHttps?: boolean
  @Input()
  disableCollapse?: boolean
  @Input()
  noSelect2?: boolean
  @Input()
  minItemCountIfNeedFilter?: number
  @Input()
  monacoEditor?: common.MonacoEditor
  @Input()
  getReference!: (name: string) => common.Schema | undefined

  collapsed? = false
  value?: { [name: string]: common.ValueType }
  buttonGroupStyle = common.buttonGroupStyleString
  errorMessage!: string
  filter = ''
  private properties: { property: string; schema: common.Schema; propertyName: string }[] = []
  private invalidProperties: string[] = []
  ngOnInit() {
    this.collapsed = this.schema.collapsed
    this.value = common.getDefaultValue(this.required, this.schema, this.initialValue) as { [name: string]: common.ValueType }
    this.validate()
    if (this.value !== undefined) {
      for (const property in this.schema.properties) {
        if (this.schema.properties.hasOwnProperty(property)) {
          const schema = this.schema.properties[property]
          const propertyName = schema.propertyName || property
          if (this.isRequired(property) !== false) {
            const required = this.schema.required && this.schema.required.some(r => r === property)
            this.value[propertyName] = common.getDefaultValue(required, schema, this.value[propertyName]) as { [name: string]: common.ValueType }

})
export class NumberEditor extends Vue {
  schema!: common.NumberSchema
  initialValue?: number
  title!: string
  theme!: common.Theme
  icon!: common.Icon
  locale!: common.Locale
  readonly!: boolean
  required!: boolean
  hasDeleteButton!: boolean
  noSelect2!: boolean

  value? = 0
  errorMessage? = ''
  buttonGroupStyle = common.buttonGroupStyleString

  onChange(e: { target: { value: string } }) {
    this.value = this.schema.type === 'integer' ? common.toInteger(e.target.value) : common.toNumber(e.target.value)
    this.validate()
    this.$emit('update-value', { value: this.value, isValid: !this.errorMessage })
  }

  beforeMount() {
    this.value = common.getDefaultValue(this.required, this.schema, this.initialValue) as number
    this.validate()
    this.$emit('update-value', { value: this.value, isValid: !this.errorMessage })
  }

  get useInput() {
    return this.value !== undefined && (this.schema.enum === undefined || this.isReadOnly)
  }

theme!: common.Theme
  @Input()
  icon!: common.Icon
  @Input()
  locale!: common.Locale
  @Output()
  onDelete = new EventEmitter()
  @Input()
  readonly?: boolean
  @Input()
  required?: boolean
  @Input()
  hasDeleteButton!: boolean

  value?: boolean
  buttonGroupStyle = common.buttonGroupStyleString
  ngOnInit() {
    this.value = common.getDefaultValue(this.required, this.schema, this.initialValue) as boolean
    this.updateValue.emit({ value: this.value, isValid: true })
  }
  onChange() {
    this.value = !this.value
    this.updateValue.emit({ value: this.value, isValid: true })
  }
  toggleOptional() {
    this.value = common.toggleOptional(this.value, this.schema, this.initialValue) as boolean | undefined
    this.updateValue.emit({ value: this.value, isValid: true })
  }
  get isReadOnly() {
    return this.readonly || this.schema.readonly
  }
  get hasDeleteButtonFunction() {

icon!: common.Icon
  locale!: common.Locale
  theme!: common.Theme
  readonly!: boolean
  required!: boolean
  hasDeleteButton!: boolean
  dragula?: common.Dragula
  noSelect2?: boolean
  minItemCountIfNeedFilter?: number
  getReference!: (name: string) => common.Schema | undefined

  renderSwitch = 1
  collapsed? = false
  value?: common.ValueType[] = []
  errorMessage? = ''
  buttonGroupStyleString = common.buttonGroupStyleString
  filter = ''
  private invalidIndexes = []
  private drak?: dragula.Drake | null = null

  beforeMount() {
    this.collapsed = this.schema.collapsed
    this.value = common.getDefaultValue(this.required, this.schema, this.initialValue) as common.ValueType[]
    this.validate()
    this.$emit('update-value', { value: this.value, isValid: !this.errorMessage })
  }

  get filteredValues() {
    return this.getValue.map((p, i) => ({ p, i }))
      .filter(({ p, i }) => common.filterArray(p, i, this.schema.items, this.filter))
  }
  private get getValue() {

},
  props: ['schema', 'initialValue', 'title', 'theme', 'icon', 'locale', 'readonly', 'required', 'hasDeleteButton']
})
export class BooleanEditor extends Vue {
  schema!: common.BooleanSchema
  initialValue?: boolean
  title!: string
  theme!: common.Theme
  icon!: common.Icon
  locale!: common.Locale
  readonly!: boolean
  required!: boolean
  hasDeleteButton!: boolean

  value? = false
  buttonGroupStyle = common.buttonGroupStyleString

  beforeMount() {
    this.value = common.getDefaultValue(this.required, this.schema, this.initialValue) as boolean
    this.$emit('update-value', { value: this.value, isValid: true })
  }

  get isReadOnly() {
    return this.readonly || this.schema.readonly
  }
  get hasDeleteButtonFunction() {
    return this.hasDeleteButton && !this.isReadOnly
  }
  get titleToShow() {
    return common.getTitle(this.title, this.schema.title)
  }
  get booleanOptions() {

md?: any
  @Input()
  hljs?: common.HLJS
  @Input()
  forceHttps?: boolean
  @Input()
  noSelect2?: boolean
  @Input()
  monacoEditor?: common.MonacoEditor

  @ViewChild('monacoEditorRef', { static: false })
  private monacoEditorRef!: ElementRef

  value?: string
  errorMessage!: string
  buttonGroupStyle = common.buttonGroupStyleString
  collapsed = false
  private monacoCodeEditor?: common.IStandaloneCodeEditor
  onChange(e: { target: { value: string } }) {
    this.value = e.target.value
    this.validate()
    this.updateValue.emit({ value: this.value, isValid: !this.errorMessage })
  }
  ngOnInit() {
    this.value = common.getDefaultValue(this.required, this.schema, this.initialValue) as string
    this.validate()
    this.updateValue.emit({ value: this.value, isValid: !this.errorMessage })
  }
  ngAfterViewInit() {
    if (this.monacoEditor && this.monacoEditorRef && this.monacoEditorRef.nativeElement) {
      this.monacoCodeEditor = this.monacoEditor.create(this.monacoEditorRef.nativeElement, {
        value: this.value,

title!: string
  theme!: common.Theme
  icon!: common.Icon
  locale!: common.Locale
  readonly!: boolean
  required!: boolean
  hasDeleteButton!: boolean
  md?: any
  hljs?: common.HLJS
  forceHttps?: boolean
  noSelect2?: boolean
  monacoEditor?: common.MonacoEditor

  value? = ''
  errorMessage? = ''
  buttonGroupStyle = common.buttonGroupStyleString
  collapsed = false
  imagePreviewStyle = common.imagePreviewStyleString
  private monacoCodeEditor?: common.IStandaloneCodeEditor

  onChange(e: { target: { value: string } }) {
    this.value = e.target.value
    this.validate()
    this.$emit('update-value', { value: this.value, isValid: !this.errorMessage })
  }

  beforeMount() {
    this.value = common.getDefaultValue(this.required, this.schema, this.initialValue) as string
    this.validate()
    this.$emit('update-value', { value: this.value, isValid: !this.errorMessage })
  }

export class ObjectEditor extends Vue {
  schema!: common.ObjectSchema
  initialValue?: { [name: string]: common.ValueType }
  title!: string
  icon!: common.Icon
  locale!: common.Locale
  theme!: common.Theme
  readonly!: boolean
  required!: boolean
  hasDeleteButton!: boolean
  minItemCountIfNeedFilter!: boolean
  getReference!: (name: string) => common.Schema | undefined

  collapsed? = false
  value?: { [name: string]: common.ValueType } = {}
  buttonGroupStyle = common.buttonGroupStyleString
  errorMessage? = ''
  filter = ''
  private invalidProperties: string[] = []
  private properties: { property: string; schema: common.Schema; propertyName: string }[] = []
  private watchedProperties: string[] = []

  beforeMount() {
    this.collapsed = this.schema.collapsed
    this.value = common.getDefaultValue(this.required, this.schema, this.initialValue) as { [name: string]: common.ValueType }
    this.validate()
    if (this.value !== undefined) {
      for (const property in this.schema.properties) {
        if (this.schema.properties.hasOwnProperty(property)) {
          const schema = this.schema.properties[property]
          const propertyName = schema.propertyName || property
          if (this.isRequired(property) !== false) {