How to use the @pluginjs/dom.setData function in @pluginjs/dom

init() {
    this.thumbs = this.instance.getElement('thumbnails')
    this.inner = this.thumbs.children[0]
    this.elements = {}

    const length = this.instance.length
    for (let i = 1; i <= length; i++) {
      const item = this.instance.items[i]
      const itemHtml = this.instance.getElement('thumb')
      const image = itemHtml.children[0]
      // image.dataset.index = i
      setData('index', i, image)
      setStyle('background-image', `url(${item.thumbHref})`, image)
      append(itemHtml, this.inner)
      this.elements[i] = itemHtml
    }
    this.index = this.instance.activeIndex

    this.bind()
    this.goTo(this.instance.activeIndex)
  }

setPlugins() {
    this.$selected = this.$selecting
 
    if (!this.$selected) {
      return
    }

    const info = JSON.parse(JSON.stringify(getData('info', this.$selecting)))
    setData('info', info, this.$fillImg)

    if (info['background-color']) {
      this.bgColor = info['background-color']
    } else {
      info['background-color'] = this.options.bgColor
    }

    this.BGCOLOR.val(this.options.format(info, 'background-color'))
    this.FORECOLOR.val(this.options.format(info, 'color'))
    this.OPACITY.val(`${this.options.format(info, 'opacity')}%`)

    // set preview

    this.setInfo(this.$fillImg)
  }

setInfo(img) {
    const imgData = getData('info', img)
    setStyle(
      {
        backgroundColor: imgData['background-color'],

        // make '#' to '%23', fixed svg data image not working on FireFox.
        backgroundImage: imgData['background-image'].replace(/\#+/g, '%23')/* eslint-disable-line */

      },
      img
    )

    setData('info', imgData, img)
  }

toggle(event) {
    if (event) {
      const target = event.currentTarget
      let context = getData(this.plugin, target)

      if (!context) {
        context = this.constructor
          .getInstances()
          .find(plugin => plugin.element === this.element)
        setData(this.plugin, context, target)
      }

      context._activeTrigger.click = !context._activeTrigger.click

      if (context.isWithActiveTrigger()) {
        context._enter(null, context)
      } else {
        context._leave(null, context)
      }
    } else {
      if (hasClass(this.classes.SHOW, this.getTip())) {
        this._leave(null, this)
        return
      }

      this._enter(null, this)

const popperInstance = popperData.instance
    this.$tip = popperInstance.popper
    const lastPlacement = getData('lastPlacement', this.$tip)

    if (lastPlacement !== popperData.placement) {
      if (lastPlacement) {
        removeClass(
          this.getClass(this.classes.PLACEMENT, 'placement', lastPlacement),
          this.$tip
        )
      }

      this.addPlacementClass(popperData.placement)
    }

    setData('lastPlacement', popperData.placement, this.$tip)
  }

update(data, trigger = true) {
    if (this.is('save')) {
      if (data) {
        setData('info', data, this.$fillImg)
        this.setInfo(this.$fillImg)
      } else {
        this.data = getData('info', this.$fillImg)
      }

      this.module = 'custom'
      this.actived = true
      this.element.value = this.val()
      addClass(this.classes.SHOW, this.$wrap)

      if (trigger) {
        this.trigger(EVENTS.CHANGE, this.data)
        triggerNative(this.element, 'change')
      }
    } else if (!this.$selected) {
      this.clear()

WRAP: `{namespace} ${instance.classes.TOGGLE}`
          },
          size: 'small',
          checked: item.checked,
          clickable: true,
          dragable: false,
          onChange(checked) {
            const index = instance.getIndex($item)
            if (checked) {
              instance.check(index)
            } else {
              instance.uncheck(index)
            }
          }
        })
        setData('toggle', api, $item)
      }
    }

this.values.forEach((value, key) => {
      setData('repeat', value, this.$items[key])
    })

update(data, trigger = true) {
    if (this.is('save')) {
      if (data) {
        setData('info', data, this.$fillImg)
        this.setInfo(this.$fillImg)
      } else {
        this.data = getData('info', this.$fillImg)
      }
      this.module = 'gradient'
      this.actived = true
      this.element.value = this.val()
      addClass(this.classes.SHOW, this.$wrap)

      if (trigger) {
        this.trigger(EVENTS.CHANGE, this.data)
        triggerNative(this.element, 'change')
      }
    } else if (!this.$selected) {
      this.clear()
    } else {

clear() {
    setData('info', '', this.$fillImg)
    setStyle(
      {
        backgroundImage: 'none'
      },
      this.$fillImg
    )

    this.GRADIENTPICKER.clear()

    this.$selecting = null
    this.$selected = null
    this.actived = false
    this.module = this.options.module

    this.element.value = ''