How to use the @pluginjs/classes.addClass function in @pluginjs/classes

openPanel() {
    const colorArr = Object.entries(this.info)
    this.oldColor = {
      collection: colorArr[0][1],
      solid: colorArr[1][1],
      gradient: colorArr[2][1]
    }
    addClass(this.classes.OPENPANEL, this.$panel)
    addClass(this.classes.OPENACTIVE, this.element)
    showElement(this.$mask)
    // update scollable height
    if (this.scrollable) {
      this.scrollable.update()
    }

    this.POPPER.scheduleUpdate()
    // this.element.openPanel = true
    this.enter('openPanel')
    this.trigger(EVENTS.OPENPANEL)
  }

openPanel() {
    addClass(this.classes.OPENPANEL, this.$panelWrap)
    addClass(this.classes.OPENACTIVE, this.element)
    showElement(this.$mask)
    // update scollable height
    if (this.scrollable) {
      this.scrollable.update()
    }

    this.POPPER.scheduleUpdate()
    // this.element.openPanel = true
    this.enter('openPanel')
    this.trigger(EVENTS.OPENPANEL)

    this.oldColor = this.color
  }

openPanel() {
    addClass(this.classes.OPENPANEL, this.$panelWrap)
    addClass(this.classes.OPENACTIVE, this.element)
    showElement(this.$mask)
    // update scollable height
    if (this.scrollable) {
      this.scrollable.update()
    }

    this.POPPER.scheduleUpdate()
    // this.element.openPanel = true
    this.enter('openPanel')
    this.trigger(EVENTS.OPENPANEL)

    this.oldColor = this.color
  }

createBar(direction) {
    const options = Object.assign(this.options.scrollbar, {
      direction,
      useCssTransitions: false,
      keyboard: false,
      clickMoveStep: 1
    })
    const $bar = document.createElement('div')

    const api = new SCROLLBAR($bar, options)

    if (this.options.showOnHover) {
      addClass(this.classes.BARHIDE, $bar)
    }

    append($bar, this.$wrap)

    this[`$${direction}`] = $bar
    this[`$${direction}`].api = api

    this.$bar.push($bar)
    this.updateBarHandle(direction)
  }

build() {
    text('', this.element)

    this.content = document.createElement('span')
    addClass(this.instance.classes.WORD, this.content)
    text(this.text, this.content)
    append(this.content, this.element)

    this.cursor = document.createElement('span')
    addClass(this.instance.classes.CURSOR, this.cursor)
    text('|', this.cursor)
    append(this.cursor, this.element)
  }

selectIcon() {
    if (this.selected && this.selected.hasClass(this.classes.ICONHOVER)) {
      removeClass(this.classes.ICONHOVER, this.selected)
    }
    this.selected = addClass(
      this.classes.ICONHOVER,
      this.$icons[this.x][this.y]
    )
  }

disabled() {
    if (!this.is('disabled')) {
      this.enter('disabled')
    }

    addClass(this.classes.DISABLED, this.element)
    this.trigger(EVENTS.DISABLED)
  }

this.hammer.on('panend', event => {
      const drapDistance = event.deltaX
      if (Math.abs(drapDistance) < 800) {
        if (!hasClass(this.classes.SLIDETRANSITION, this.slide)) {
          addClass(this.classes.SLIDETRANSITION, this.slide)
        }
        const p =
          this.translate * -1 * window.document.documentElement.clientWidth
        setStyle('transform', `translate3d(${p}px, 0px, 0px)`, this.slide)
      } else {
        const direction = drapDistance > 0 ? 'pre' : 'next'
        if (direction === 'pre') {
          this.instance.pre()
        } else {
          this.instance.next()
        }
      }

      setTimeout(() => {
        this.instance.drap = false
      }, 100)

initialize() {
    this.items = []
    this.selected = null

    this.placeholder = this.element.getAttribute('placeholder')
    if (!this.placeholder && this.options.placeholder) {
      if (this.options.placeholder === true) {
        this.placeholder = this.translate('placeholderText')
      } else {
        this.placeholder = this.options.placeholder
      }
    }

    addClass(this.classes.ELEMENT, this.element)

    this.$wrap = insertAfter(
      `<div class="${this.classes.WRAP}"></div>`,
      this.element
    )

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

    this.$trigger = appendTo(
      `<div class="${this.classes.TRIGGER}"></div>`,
      this.$wrap
    )

    this.$label = appendTo(

pin() {
    if (hasClass(this.classes.UNPINNED, this.element)) {
      removeClass(this.classes.UNPINNED, this.element)
      addClass(this.classes.PINNED, this.element)
      this.trigger('pinned')
    }
  }