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

import Hue from './components/hue'
import Saturation from './components/saturation'
import Collection from './modules/collection'
import Solid from './modules/solid'
import Gradients from './modules/gradient'
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'
let DATA = {}
@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class ColorSelector extends Component {
  constructor(element, options = {}) {
    super(element)
    // options
    this.setupOptions(options)
    if (options.module) {
      this.options.module = options.module

import Gradient from './components/gradient'
import Hex from './components/hex'
import History from './components/history'
import Hue from './components/hue'
import Saturation from './components/saturation'
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'
let DATA = {}
@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class ColorPicker extends Component {
  constructor(element, options = {}) {
    super(NAMESPACE, element)
    // options
    this.initOptions(DEFAULTS, options)
    if (options.module) {
      this.options.module = options.module

isPlainObject,
  isEmpty
} from '@pluginjs/is'
import Clearable from './clearable'
import Filterable from './filterable'
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()

import Position from './position'
import Repeat from './repeat'
import Size from './size'
import Preview from './preview'
import Image from './image'
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'

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

    this.setupOptions(options)
    this.setupClasses()
    this.value = {}

classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'

import Type from './type'
import Title from './title'
import Internal from './internal'
import Target from './target'
import External from './external'

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

    this.setupOptions(options)
    this.setupStates()

classes as CLASSES,
  defaults as DEFAULTS,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'
import List from './components/list'
import Total from './components/total'
import Next from './components/next'
import Prev from './components/prev'
import Jumper from './components/jumper'

const COMPONENTS = {}

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

    this.currentPage = this.options.currentPage || 1
    this.itemsPerPage = this.options.itemsPerPage
    this.totalItems = this.options.totalItems

optionable
} from '@pluginjs/decorator'
import Gmap from '@pluginjs/gmap'
import PlaceComplete from '@pluginjs/place-complete'
import Trigger from './trigger'
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'

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

    this.setupOptions(options)

    this.setupStates()

import { removeEvent } from '@pluginjs/events'
import { addClass, removeClass } from '@pluginjs/classes'
import Dropdown from '@pluginjs/dropdown'
import {
  query,
  insertAfter,
  appendTo,
  html,
  parseHTML,
  closest,
  empty
} from '@pluginjs/dom'
import { deepClone, each, triggerNative } from '@pluginjs/utils'
import Tooltip from '@pluginjs/tooltip'

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

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

dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  translations as TRANSLATIONS,
  namespace as NAMESPACE
} from './constant'
import templateEngine from '@pluginjs/template'
import { bindEvent, removeEvent } from '@pluginjs/events'
import { addClass, removeClass, hasClass } from '@pluginjs/classes'
import { arrayEqual, arrayDiff, triggerNative } from '@pluginjs/utils'
import { append, detach, insertBefore, parseHTML, parent } from '@pluginjs/dom'
import { isArray } from '@pluginjs/is'
const isSelect = el => el.tagName === 'SELECT'
const isInput = el => el.tagName === 'INPUT'

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

  initialize() {
    this.value = []

import { removeEvent } from '@pluginjs/events'
import { addClass, removeClass } from '@pluginjs/classes'
import Dropdown from '@pluginjs/dropdown'
import {
  query,
  insertAfter,
  appendTo,
  html,
  parseHTML,
  detach,
  children
} from '@pluginjs/dom'
import { deepClone, triggerNative } from '@pluginjs/utils'
import Tooltip from '@pluginjs/tooltip'

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

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