How to use the @pluginjs/pop-dialog.of function in @pluginjs/pop-dialog

buildPop() {
    const that = this
    // init popDialog
    this.CLEARPOP = PopDialog.of(
      query(`.${this.classes.REMOVE}`, this.$triggerAction),
      {
        content: that.instance.translate('deleteTitle'),
        placement: 'bottom',
        buttons: [
          {
            action: 'cancel',
            label: that.instance.translate('cancel')
          },
          {
            action: 'delete',
            label: that.instance.translate('delete'),
            color: 'danger',
            fn(resolve) {
              that.instance.clear()
              resolve()

this.$wrap = parseHTML(
      template.compile(this.options.template())({
        classes: this.classes,
        placeholder: this.translate('placeholder')
      })
    )

    insertAfter(this.$wrap, this.element)

    this.$empty = query(`.${this.classes.EMPTY}`, this.$wrap)
    this.$image = query(`.${this.classes.FILLIMAGE}`, this.$wrap)
    this.$remove = query(`.${this.classes.REMOVE}`, this.$wrap)
    this.$reselect = query(`.${this.classes.RESELECT}`, this.$wrap)

    // init popDialog
    this.pop = PopDialog.of(this.$remove, {
      placement: 'bottom',
      content: this.translate('deleteTitle'),
      buttons: [
        {
          action: 'cancel',
          label: this.translate('cancel')
        },
        {
          action: 'delete',
          label: this.translate('delete'),
          color: 'danger',
          fn(resolve) {
            const $fill = that.$remove.matches(`.${that.classes.FILL}`)
              ? that.$remove
              : parentWith(hasClass(that.classes.FILL), that.$remove)
            addClass(`${that.classes.FADEOUT}`, $fill)

query('.pj-linkPicker-external', this.$dropdown)
      )
    }
    if (this.value.type === 'external') {
      addClass(
        `${this.classes.TYPESHOW}`,
        query('.pj-linkPicker-external', this.$dropdown)
      )
      removeClass(
        `${this.classes.TYPESHOW}`,
        query('.pj-linkPicker-internal', this.$dropdown)
      )
    }
    // this.buildTypes()
    // create pop
    this.pop = PopDialog.of(
      query(`.${this.classes.ACTIONREMOVE}`, this.$action),
      {
        content: 'Are you sure you want to delete?',
        placement: 'bottom',
        buttons: [
          {
            action: 'cancel',
            label: 'Cancel'
          },
          {
            action: 'delete',
            label: 'Delete',
            color: 'danger',
            fn(resolve) {
              that.clear(true)
              resolve()

buildPop() {
    const that = this
    this.CLEARPOP = PopDialog.of(
      query(`.${this.classes.REMOVE}`, this.$triggerAction),
      {
        content: that.instance.translate('deleteTitle'),
        placement: 'bottom',
        buttons: [
          {
            action: 'cancel',
            label: that.instance.translate('cancel')
          },
          {
            action: 'delete',
            label: that.instance.translate('delete'),
            color: 'danger',
            fn(resolve) {
              that.instance.clear()
              resolve()

import { query } from '@pluginjs/dom'
import popDialog from '@pluginjs/pop-dialog'

const root = query('#contents')
const tableElement = query('[data-toggle="pop-dialog-table"]', root)
const largeContentElement = query(
  '[data-toggle="pop-dialog-largeContent"]',
  root
)
const iframeElement = query('[data-toggle="pop-dialog-iframe"]', root)

popDialog.of(tableElement, {
  content() {
    return `<table class="popover-table popover-table-bordered">
    <thead>
      <tr>
        <th>Rank</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>User Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td></tr></tbody></table>

buildPop() {
    const that = this
    this.DELETEPOP = PopDialog.of(this.$remove, {
      placement: 'bottom',
      content: that.instance.translate('deleteTitle'),
      buttons: [
        {
          action: 'cancel',
          label: that.instance.translate('cancel')
        },
        {
          action: 'delete',
          label: that.instance.translate('delete'),
          color: 'danger',
          fn(resolve) {
            that.instance.clear()

            resolve()
          }

buildPop() {
    const that = this
    this.DELETEPOP = PopDialog.of(
      query(`.${this.classes.REMOVE}`, this.$triggerAction),
      {
        content: this.instance.translate('deleteTitle'),
        placement: 'bottom',
        buttons: [
          {
            action: 'cancel',
            label: this.instance.translate('cancel')
          },
          {
            action: 'delete',
            label: this.instance.translate('delete'),
            color: 'danger',
            fn: resolve => {
              removeClass(that.classes.SHOW, that.instance.$wrap)
              that.instance.removeVideo()