Slim-select stimulus controller

slim_select_controller.js

import { Controller } from "stimulus"
import SlimSelect from "slim-select"
import "slim-select/dist/slimselect.min.css"
import "../style/slimselect-customized.css"

export default class extends Controller {
  connect() {
    const limit = this.data.get("limit")
    const placeholder = this.data.get("placeholder")
    const searchText = this.data.get("no-results")
    const closeOnSelect = this.single
    const allowDeselect = !this.element.required

    this.select = new SlimSelect({
      select: this.element,
      closeOnSelect,
      allowDeselect,
      limit,
      placeholder,
      searchText
    })
  }

  get single() {
    return !this.element.multiple
  }
  get multi() {
    return this.element.multiple
  }

  disconnect() {
    if (this.select) {
      this.select.destroy()
    }
  }
}

slimselect-customized.css

.ss-main .ss-single-selected, .ss-main .ss-multi-selected {
  min-height: calc(1.5em + 0.75rem + 2px);
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
}

.ss-main .ss-multi-selected .ss-add {
  margin: 13px 12px 0 5px;
}

.ss-main .ss-multi-selected .ss-values .ss-value {
  background-color: #f7f7f9;
  padding: 6px 10px;
}

.ss-main .ss-multi-selected .ss-values .ss-value .ss-value-text {
  color: #657072;
}

.ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete {
  padding-left: 3px;
  color: #BC3C35;
}

.ss-content .ss-list .ss-option.ss-highlighted, .ss-content .ss-list .ss-option:hover {
  color: #657072;
  background-color: #58B7C1;
}