How to use @pluginjs/dropdown - 10 common examples

initDropdown(options = {}) {
    const that = this
    this.DROPDOWN = Dropdown.of(this.TRIGGER.$empty, {
      ...options,
      reference: that.TRIGGER.$trigger,
      // placement: 'bottom-left',
      target: this.$dropdown,
      hideOutClick: true,
      templates: this.options.templates,
      onShow: () => {
        if (!this.DROPDOWN.is('builded')) {
          this.buildDropdown()
        }
        this.DROPDOWN.update()
      },
      onHide: () => {
        removeClass(this.classes.OPENDISABLE, this.TRIGGER.$trigger)
      }
    })

)
    } else {
      this.$content = insertAfter(
        templateEngine.render(this.options.templates.inline(), {
          classes: this.classes
        }),
        this.element
      )
    }

    if (this.options.inline) {
      this.buildDropdown()
    }

    if (!this.options.inline) {
      this.DROPDOWN = Dropdown.of(this.$trigger, {
        ...options,
        target: this.$dropdown,
        keyboard: this.options.keyboard,
        classes: {
          PLACEMENT: `${this.classes.NAMESPACE}-on-{placement}`
        },
        onShow: () => {
          if (!this.is('builded')) {
            this.buildDropdown()
          }
          addClass(this.classes.SHOW, this.$wrap)
          this.trigger(EVENTS.SHOW)
        },
        onShown: () => {
          this.trigger(EVENTS.SHOWN)
          this.enter('shown')

initDropdown(options) {
    this.DROPDOWN = Dropdown.of(this.TRIGGER.$empty, {
      ...options,
      theme: 'dafault',
      reference: this.TRIGGER.$trigger,
      target: this.$dropdown,
      hideOutClick: this.options.hideOutClick,
      hideOnSelect: false,
      onHide: () => {
        if (this.is('save')) {
          this.set(this.value)
          this.update()
        } else {
          this.val(this.oldValue)
          this.update()
        }
        this.leave('save')
      }

setupDropdown(options) {
    this.$dropdown = appendTo(
      `<div class="${this.classes.DROPDOWN}"></div>`,
      this.$wrap
    )

    this.DROPDOWN = Dropdown.of(this.$trigger, {
      ...options,
      target: this.$dropdown,
      keyboard: this.options.keyboard,
      classes: {
        PLACEMENT: `${this.classes.NAMESPACE}-on-{placement}`
      },
      onShow: () =&gt; {
        if (!this.is('builded')) {
          this.buildDropdown()
        }
        addClass(this.classes.SHOW, this.$wrap)
        this.trigger(EVENTS.SHOW)
      },
      onShown: () =&gt; {
        this.trigger(EVENTS.SHOWN)
        this.enter('shown')

initDropdown() {
    return DROPDOWN.of(this.$trigger, {
      classes: {
        DROPDOWN: `{namespace} ${this.classes.DROPDOWN}`
      },
      trigger: 'click',
      reference: this.$trigger,
      placement: this.options.placement,
      data: this.getUnits().map(i => {
        return { value: i, label: i }
      }),
      onChange: value => {
        if (this.value.unit === value) {
          return
        }
        if (this.isStatic(value)) {
          this.setStatic(value)
        } else {

constructor(instance) {
    this.element = prependTo(
      templateEngine.render(
        instance.options.templates.switcher.call(instance),
        {
          classes: instance.classes,
          label: this.getLabel(instance.current)
        }
      ),
      instance.getActions()
    )

    this.$label = query(`.${instance.classes.SWITCHERLABEL}`, this.element)
    this.DROPDOWN = Dropdown.of(this.element.children[0], {
      target: query(`.${instance.classes.SWITCHERDROPDOWN}`, this.element),
      placement: 'top',
      value: instance.current.name,
      data: instance.getPacks().map(pack => {
        return {
          value: pack.name,
          label: pack.title
        }
      }),
      onShow() {
        this.selectByValue(instance.current.name)
      },
      keyboard: instance.options.keyboard,
      onChange: value => {
        if (value) {
          const pack = instance.getPack(value)

setupDropdown(options) {
    this.$dropdown = appendTo(
      templateEngine.render(this.options.templates.dropdown.call(this), {
        classes: this.classes
      }),
      this.$wrap
    )

    this.$main = query(`.${this.classes.MAIN}`, this.$dropdown)

    this.DROPDOWN = Dropdown.of(this.$trigger, {
      ...options,
      target: this.$dropdown,
      keyboard: this.options.keyboard ? this.$wrap : false,
      classes: {
        PLACEMENT: `${this.classes.NAMESPACE}-on-{placement}`
      },
      onShow: () => {
        if (this.is('loading')) {
          this.LOADING.show()
        }

        if (!this.is('builded')) {
          this.buildDropdown()
        }

        addClass(this.classes.SHOW, this.$wrap)

sorts.push(key)
        }
      }
    })

    sorts = Array.from(new Set(sorts))
    sorts.forEach((sort, index) => {
      sorts[index] = {
        label: sort,
        value: sort
      }
    })
    config.data = sorts
    this.$sortinner = find(`.${this.classes.SORTINNER}`, this.instance.element)
    this.$sortinner.innerHTML = sorts[0].label
    Dropdown.of(this.$sortinner, config)
  }

setupDropdown(options) {
    this.DROPDOWN = Dropdown.of(this.TRIGGER.$empty, {
      ...options,
      target: this.$panel,
      reference: this.TRIGGER.$trigger,
      templates: this.options.template,
      hideOutClick: true,
      hideOnSelect: false,
      onShown: () => {
        this.$selected = this.$selecting
        if (this.$selected) {
          const data = JSON.parse(
            JSON.stringify(getData('info', this.$fillImg))
          )
          setData('info', data, this.TRIGGER.$fill)
        }

        this.switchModule(this.module)

setupDropdown(options) {
    this.DROPDOWN = new Dropdown(this.PREVIEW.element, {
      ...options,
      reference: this.element,
      target: this.$panel,
      hideOnSelect: false,
      hideOutClick: true,
      onShown: () => {
        this.leave('save')
        this.COLORPICKER.oldColor = this.COLORPICKER.color
        this.GRADIENTPICKER.oldColor = this.GRADIENTPICKER.color
        this.oldColor.module = this.module
        this.oldColor.color = this.color
        this.switchModule(this.module)
      },
      onHided: () => {
        this.update()
      }