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

initPanel() {
    this.$panel = this.createEl('panel', {
      classes: this.classes
    })
    append(this.$panel, this.$wrap)

    this.$handle = query(`.${this.classes.HANDLE}`, this.$panel)
    // this.registerComponent()
    this.initHandle()
    if (!this.options.inline || this.options.showControl) {
      this.initControl()
    } else {
      query(`.${this.classes.CONTROL}`, this.$panel).remove()
    }
  }

createHtml() {
    const that = this
    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'),

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

const element = query('#buttons [data-toggle="default-button"]')
popDialog.of(element, {
  buttons: [
    {
      action: 'cancel',
      label: 'Dismiss'
    },
    {
      action: 'ok',
      label: 'OK',
      classes: 'pj-btn-primary',
      fn: resolve => {
        console.info('clicked OK!')
        resolve()
      }
    }
  ]

constructor(instance, element) {
    this.instance = instance
    this.element = element
    this.$color = query(`.${this.instance.classes.PREVIEWCOLOR}`, this.element)

    this.bind()
  }

;[$ok].map(el =>
          append(el, query(`.${this.classes.GRADIENTDONE}`, this.$gradient))
        )

import { query } from '@pluginjs/dom'
import Notice from '@pluginjs/notice'

const alignleft = query('#content-align .alignleft')
const aligncenter = query('#content-align .aligncenter')
const alignright = query('#content-align .alignright')

alignleft.addEventListener('click', () => {
  Notice.show({
    content: `
    <p class="pj-notice-desktop">Creation uses cookies to store you information. By using our site, you agree to our terms of service</p>
    <p class="pj-notice-mobile">Design faster and better together</p>
    `,
    contentAlignment: 'left'
  })
})

aligncenter.addEventListener('click', () =&gt; {
  Notice.show({
    content: `

getDataFromSvgSprite() {
    if (isString(this.options.source)) {
      this.options.source = query(this.options.source)
    }
    if (isElement(this.options.source)) {
      return children('symbol', this.options.source).map(symbol => {
        return {
          disabled: symbol.disabled,
          svg: `<svg></svg>`,
          name: symbol.id
        }
      })
    }
    return []
  }

Object.keys(this.instance.data).forEach(groupName => {
      const $groupList = query(
        `.${this.classes.NAMESPACE}-${groupName} .${this.classes.GROUPLIST}`,
        this.instance.$panel
      )
      this.createCollectionItem(groupName, $groupList)
    })

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()
            }

Weather: [
    'cloud-drizzle',
    'cloud-lightning',
    'cloud-off',
    'cloud-rain',
    'cloud-snow',
    'cloud',
    'droplet',
    'sun',
    'sunrise',
    'sunset',
    'wind'
  ]
}

const element = query('#group .example')

SvgPicker.of(element, {
  source(resolve) {
    const source = []
    Object.keys(icons).forEach(category => {
      const group = {
        name: category,
        children: []
      }
      icons[category].forEach(icon => {
        const ficon = feather.icons[icon]
        group.children.push({
          name: ficon.name,
          category,
          tags: ficon.tags,
          svg: ficon.toSvg()