How to use the @pluginjs/select.of function in @pluginjs/select

classes: this.instance.classes,
      field: this.instance.getClassName(
        this.instance.classes.NAMESPACE,
        'target'
      ),
      openMode: this.instance.translate('openMode')
    })
    this.$wrap = parseHTML(html)
    this.$content = query(`.${this.instance.classes.FIELDCONTENT}`, this.$wrap)
    this.element = query(
      `.${this.instance.classes.SELECTTRIGGER}`,
      this.$content
    )

    this.element.value = this.instance.value.target
    this.SELECT = Select.of(this.element, {
      // value: this.instance.value.target,
      source: this.instance.options.targetValue,
      keyboard: true,
      onChange: value => {
        if (this.instance.is('disabled')) {
          return
        }
        this.instance.value.target = value
      }
    })
  }

build() {
    this.$opac = parseHTML(
      `<div class="${this.classes.HEXBOX}">
        <input type="text" class="pj-input ${this.classes.HEXANGLE}">
         <div class="${this.classes.HEXUNIT}">%</div>
       </div>`
    )
    const $selector = parseHTML(
      `<div class="${this.classes.HEXMODE}"><input type="text"></div>`
    )
    this.element.append($selector, this.$opac)

    this.$el = query(`.${this.classes.HEXMODE}&gt;input`, this.element)
    // this.$selector = query(`.${this.classes.HEXMODE}&gt;div`, this.element)
    this.SELECT = Select.of(this.$el, {
      value: this.classify,
      source: this.data,
      onChange: res =&gt; {
        this.updateColor(res, this.color)
      }
    })
  }

const html = template.compile(this.instance.options.size.template())({
      classes: this.instance.classes,
      field: this.instance.getClassName(
        this.instance.classes.NAMESPACE,
        'size'
      ),
      bgSize: this.instance.translate('bgSize')
    })

    this.$wrap = parseHTML(html)

    this.$trigger = query(`.${this.instance.classes.SELECTTRIGGER}`, this.$wrap)
    const data = this.values.map(val => ({ label: val, value: val }))
    const that = this
    this.$trigger.value = this.defaultValue
    this.$sizeSelect = Select.of(this.$trigger, {
      source: data,
      keyboard: true,
      onChange: val => {
        if (that.instance.disabled) {
          return
        }
        this.instance.value.size = val
        setStyle('background-size', val, this.instance.$image)
        setStyle('background-size', val, this.instance.TRIGGER.$fillImage)
      }
    })
  }

<input type="text" class="pj-input pj-input-sm ${this.classes.HEXANGLE}">
        <div class="${this.classes.HEXUNIT}">%</div>
      `
    )
    const $selector = parseHTML(
      `<div class="${this.classes.HEXMODE}"><input value="${this.data[0].value}" type="text"></div>`
    )

    if (this.instance.module.alpha) {
      this.element.append($selector, this.$opac)
    } else {
      this.element.append($selector)
    }

    this.$el = query(`.${this.classes.HEXMODE}&gt;input`, this.element)
    this.SELECT = Select.of(this.$el, {
      source: this.data,
      classes: {
        TRIGGER: '{namespace}-trigger pj-input pj-input-sm'
      },
      onChange: res =&gt; {
        this.updateColor(res, this.color)
      }
    })
  }

{
    value: 3,
    label: 'Option 3'
  },
  {
    value: 4,
    label: 'Option 4'
  },
  {
    value: 5,
    label: 'Option 5'
  }
]

const element = query('#ajax .example')
Select.of(element, {
  source(resolve) {
    setTimeout(() => {
      resolve(data)
    }, 3000)
  }
})

{
        value: 'c',
        label: 'fujian',
        slug: 'fujian'
      },
      {
        value: 'd',
        label: 'guangdong',
        slug: 'guangdong'
      }
    ]
  }
]

const element = query('#data .example-data')
Select.of(element, {
  source
})

classes: this.instance.classes,
      field: this.instance.getClassName(
        this.instance.classes.NAMESPACE,
        'type'
      ),
      type: this.instance.translate('type')
    })
    this.$wrap = parseHTML(html)
    this.$content = query(`.${this.instance.classes.FIELDCONTENT}`, this.$wrap)
    this.element = query(
      `.${this.instance.classes.SELECTTRIGGER}`,
      this.$content
    )

    this.element.value = this.instance.value.type
    this.SELECT = Select.of(this.element, {
      source: this.instance.options.source,
      keyboard: true,
      onChange: value => {
        if (this.instance.is('disabled')) {
          return
        }
        this.instance.value.type = value
        if (this.instance.value.type === 'internal') {
          addClass(
            `${this.instance.classes.TYPESHOW}`,
            query('.pj-linkPicker-internal', this.instance.$dropdown)
          )
          removeClass(
            `${this.instance.classes.TYPESHOW}`,
            query('.pj-linkPicker-external', this.instance.$dropdown)
          )

removeClass(this.classes.OPENDISABLE, this.TRIGGER.element)
      },
      onUpdate: () => {
        this.$fillCover.setAttribute('src', this.data.poster)

        if (this.videoApi) {
          this.videoApi.stop()
        }
        this.element.value = this.val()
        removeClass(this.classes.OPENDISABLE, this.TRIGGER.element)
        this.DROPDOWN.hide()
        addClass(this.classes.SHOW, this.$wrap)
      }
    })

    this.$sourceSelect = Select.of(this.$sourceTrigger, {
      source: sourceData,
      keyboard: true,
      onChange: value => {
        this.data.source = value
        if (value === 'Local File') {
          showElement(closest(`.${this.classes.FIELD}`, this.$localUrl))
          hideElement(closest(`.${this.classes.FIELD}`, this.$videoUrl))
        } else {
          hideElement(closest(`.${this.classes.FIELD}`, this.$localUrl))
          showElement(closest(`.${this.classes.FIELD}`, this.$videoUrl))
        }
        if (this.$videoPoster) {
          setStyle('backgroundImage', null, this.$videoPoster)
        }
        removeClass(this.classes.POSTERSELECTED, this.$poster)
        if (this.videoApi) {