Rails 7 with Importmap and slim-select

Slim-select.md

1. Addd slim-select

bin/importmap pin slim-select 

optionaly

bin/importmap pin slim-select  --download

2. Add css (3 variants)

• add to app/views/layouts/application.html.erb

<%= stylesheet_link_tag "https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.1/slimselect.min.css", "data-turbo-track": "reload" %>

or

• in rails console

`curl https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.1/slimselect.min.css --output "#{Rails.root.join('app', 'assets', 'stylesheets')}/slimsel
ect.min.css"`

or

• add to app/assets/stylesheets/application.css

@import url("https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.1/slimselect.min.css");

3. Optionaly

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

.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;
}