How to use the @pluginjs/decorator.optionable function in @pluginjs/decorator

import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE
} from './constant'
import Tooltip from '@pluginjs/tooltip'

/* Credit to bootstrap popover http://getbootstrap.com MIT */
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class Popover extends Tooltip {
  constructor(element, options = {}) {
    super(element, options)
  }

  createTip() {
    let arrow = ''
    let close = ''

    if (this.options.close) {
      close = templateEngine.render(this.options.templates.close.call(this), {
        classes: this.classes

import { addClass, removeClass } from '@pluginjs/classes'
import { query, append, insertBefore, detach, parseHTML } from '@pluginjs/dom'
import { isNumber, isString, isFunction } from '@pluginjs/is'
import { getStyle, setStyle } from '@pluginjs/styled'
import History from './history'
import { intersectionObserverPolyfill } from '@pluginjs/polyfills'
// import 'whatwg-fetch'

intersectionObserverPolyfill()

@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class Infinite extends Component {
  constructor(element, options = {}) {
    super(element)

    this.setupOptions(options)
    this.setupI18n()
    this.setupClasses()
    this.setupStates()
    this.initialize()
  }

  initialize() {

stateable,
  styleable,
  optionable
} from '@pluginjs/decorator'
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE
} from './constant'

@styleable(CLASSES)
@eventable(EVENTS)
@optionable(DEFAULTS, true)
@stateable()
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class BgVideo extends Video {
  constructor(element, options = {}) {
    super(element, options)
  }

  initVideo() {
    this.$video = parseHTML(`<div class="${this.classes.NAMESPACE}"></div>`)

    if (this.options.theme) {
      addClass(this.getThemeClass(), this.$video)
    }

import { compose } from '@pluginjs/utils'
import { setStyle, getStyle, getWidth } from '@pluginjs/styled'
import { parent } from '@pluginjs/dom'
import { bindEvent, removeEvent } from '@pluginjs/events'
import { eventable, register, stateable, optionable } from '@pluginjs/decorator'
import {
  defaults as DEFAULTS,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE
} from './constant'
import anime from 'animejs'

@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS
})
class AdaptText extends Component {
  constructor(element, options = {}) {
    super(element)
    this.setupOptions(options)

    const display = getStyle('display', this.element)
    this.inline = display === 'inline' || Boolean(display === 'inline-block')
    this.width = this.getWidth()

    this.setupStates()
    this.initialize()
  }

themeable,
  optionable
} from '@pluginjs/decorator'
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE
} from './constant'

@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS
})
class Rate extends Component {
  constructor(element, options = {}) {
    super(element)
    this.setupOptions(options)
    this.setupClasses()

    if (this.options.theme) {
      addClass(this.getThemeClass, this.element)
    }

    this.setupStates()
    this.initialize()
  }

dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE
} from './constant'

import Swipeable from '@pluginjs/swipeable'
import ImageLoader from '@pluginjs/image-loader'
import Loader from '@pluginjs/loader'
import Breakpoints from '@pluginjs/breakpoints'

@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class Thumbnails extends Component {
  constructor(element, options = {}) {
    super(element)

    this.setupOptions(options)

    this.distance = 0
    this.pos = 0
    this.current = null
    this.dif = null

    this.setupClasses()

themeable,
  optionable
} from '@pluginjs/decorator'
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE
} from './constant'

@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS
})
class Loader extends Component {
  constructor(element, options = {}) {
    super(element)

    this.setupOptions(options)
    this.setupClasses()
    this.setupStates()
    this.initialize()
  }

  initialize() {
    this.$mask = appendTo(
      `<div class="${this.classes.MASK}"></div>`,

namespace as NAMESPACE
} from './constant'
import ImageLoader from '@pluginjs/image-loader'
import { bindEvent, removeEvent, bindEventOnce } from '@pluginjs/events'
import { isFunction, isString, isObject } from '@pluginjs/is'
import { addClass, removeClass } from '@pluginjs/classes'
import { setStyle } from '@pluginjs/styled'
import Pj from '@pluginjs/factory'
import Keyboard from './keyboard'
import Overlay from './overlay'

@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class Zoom extends Component {
  constructor(element, options = {}) {
    super(element)

    this.setupOptions(options)
    this.setupClasses()
    this.setupStates()

    this.image = {}
    ;['src', 'sizes', 'srcset'].forEach(prop => {
      if (this.element[prop]) {
        this.image[prop] = this.element[prop]

namespace as NAMESPACE,
  KEY_MAP
} from './constant'

import Times from './times'
import simple from './modes/simple'
import Progress from './modes/progress'
import Flip from './modes/flip'

const MODES = {}

@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS
})
class CountDown extends Component {
  _interval = {
    createTimer: time => {
      this.timer = () => {
        this.update()
      }
      return window.setInterval(this.timer, time)
    },
    removeTimer: () => {
      window.clearInterval(this.timer())
    }
  }

import Loading from './loading'
import { removeEvent } from '@pluginjs/events'
import { addClass, removeClass } from '@pluginjs/classes'
import Dropdown from '@pluginjs/dropdown'
import { insertAfter, appendTo, html, parseHTML } from '@pluginjs/dom'
import { deepClone, triggerNative } from '@pluginjs/utils'

const isInput = el => el.tagName === 'INPUT'
const isSelect = el => el.tagName === 'SELECT'

@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class Select extends Component {
  constructor(element, options = {}) {
    super(element)

    this.setupOptions(options)
    this.setupClasses()
    this.setupStates()
    this.setupI18n()
    this.initialize()
  }

  initialize() {