select7 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: de12f1b5502b7b8ff49100e092b72a00b6f143b9e51fd0ea77d07a6ee4a7a2f9
+  data.tar.gz: 5723178cf260813f9b26be5bacf25e5a64d48b6bab738e227a2660f497b9a5b9
+SHA512:
+  metadata.gz: 0061de765dd721b9bb54aecef14e0897633ac450fa1cad1ce8b4bd15a36af8318d5dfb8929277c242e594c6560dcee3b5edc1b4dc5a2363c911feea970276443
+  data.tar.gz: 91793c8a4fce00d561d92ce35cc1b436e84595994348bf968cb576c96bac7c11c38670e95d7db173854e6e0787442fe243e962b56117d8de98d5cf0c2e04e6ea

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2022 
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,74 @@
+# Select7
+Multiple choices selector (similar to select2, but with rails hotwire)
+![search with multiple tag](/search.PNG)
+
+## Installation
+
+```ruby
+# Gemfile
+gem "rails", ">=7.0.0" # require Rails 7+
+gem "stimulus-rails"   # require stimulus
+gem "select7"
+
+# install
+$ bundle install
+$ rails select7:install
+```
+
+## Usage
+
+### Searching with multiple choices
+
+```ruby
+<%= form_with(url: search_projects_path) do |f| %>
+  <%= f.select7(:tags => [:id, :name], options: Tag.all) %>
+  <%= f.submit %>
+<% end %>
+
+# ==> This form will submit with `params[:tag_ids]` contains all ids of the selected tags
+```
+
+### In form: one/many-to-many relationship
+
+```ruby
+<%= form_with(model: project) do |form| %>
+    # ...
+    <%= form.select7(:tags => [:id, :name], options: Tag.all) %>
+    # ...
+<% end %>
+
+# ==> This form will submit with `params[:project][:tag_ids]`
+def project_params
+    params.require(:project).permit(tag_ids: [], )
+end
+```
+
+### Suggestion for multiple choices selector
+
+In case there're a very large number of choices, instead of query all choices as options for select, you could use a `suggestion`:
+
+```ruby
+<%= form_with(model: project) do |form| %>
+    # ...
+    # assigned devs
+    <%= form.select7(:developers => [:id, :name], suggest: { url: search_developers_url(page_size: 10), format: :json }) %>
+    # ...
+<% end %>
+
+# this require an implementation of the suggestion
+resources :developers do
+    get :search, on: :collection
+end
+
+class DevelopersController < ApplicationController
+    # ...
+    # suggest developers
+    def search
+        @developers = Developer.where("name like ?", "%#{params[:name]}%").first(params[:page_size].to_i)
+        respond_to do |format|
+            format.json { render json: @developers, layout: false }
+        end
+    end
+    # ...
+end
+```

data/Rakefile

@@ -0,0 +1,16 @@
+require "bundler/setup"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = true
+end
+
+task :default => :test

data/app/assets/javascripts/select7.esm.js

@@ -0,0 +1,215 @@
+export const Select7Controller = (base, debounce) => 
+    class extends base {
+        static targets = [ "selected", "input", "suggestion", "template" ]
+        static values = { 
+            scope: String,
+            field: String,
+            valueAttr: String,
+            textAttr: String,
+            suggest: Object, 
+            inputName: String, 
+            multiple: Boolean, 
+            nested: Boolean,
+            items: Array,
+            selectedItems: Array,
+        }
+
+        static formats = {
+            "json": "application/json",
+            "html": "text/html",
+            "turbo_stream": "text/vnd.turbo-stream.html"
+        }
+
+        connect() {
+            this.count = 0
+            this.timeoutId = null
+            this.element.addEventListener("turbo:submit-end", this.clearForm.bind(this))
+            if (this.hasInputTarget) {
+                this.inputTarget.setAttribute("autocomplete", "off")
+            }
+
+            this.debounceSuggest = debounce(
+                this.suggest.bind(this),
+                500,
+                { 'leading': true }
+            )
+
+            this.selectedItems = this.hasSelectedItemsValue ? this.selectedItemsValue.map((v, n, x) => [v, n]) : []
+
+            document.addEventListener('click', this.outsideClick.bind(this))
+        }
+
+        disconnect() {
+            document.removeEventListener('click', this.outsideClick.bind(this))
+        }
+
+        suggest() {
+            if (this.suggestValue["url"]) {
+                this.remoteSuggest()
+            } else if (this.hasItemsValue) {
+                this.localSuggest()
+            }
+        }
+
+        localSuggest() {
+            const key = this.inputTarget.value.toLowerCase()
+            if (key != "") {
+                this.suggestionTarget.innerHTML = ""
+                const matchedItems = this.itemsValue.filter(([value, text, lowcaseText]) => lowcaseText.includes(key))
+                if (matchedItems.length > 0) {
+                    matchedItems.forEach(([value, text, x]) => this.insertSuggestItem(value, text))
+                    this.showSuggestion()
+                }
+            } else {
+                this.hideSuggestion()
+            }
+        }
+
+        remoteSuggest() {
+            const searchKey = this.inputTarget.value.replaceAll(/[^\w]/g, '')
+            if (searchKey.length <= 0)
+                return
+
+            const csrfToken = document.querySelector("[name='csrf-token']")?.content
+            const format = this.suggestValue["format"] || "html"
+            const contentType = this.suggestValue["content-type"] || this.constructor.formats[format]
+            const suggestQueryUrl = new URL(this.suggestValue["url"])
+            suggestQueryUrl.searchParams.append(this.textAttrValue, searchKey)
+
+            fetch(suggestQueryUrl, {
+                method: this.suggestValue["method"] || 'get',
+                mode: 'cors',
+                cache: 'no-cache',
+                credentials: 'same-origin',
+                headers: {
+                    'Accept': contentType,
+                    'Content-Type': contentType,
+                    'X-CSRF-Token': csrfToken,
+                }
+            })
+            .then((r) => r.text())
+            .then((result) => {
+                if (result) {
+                    this.suggestionTarget.innerHTML = ""
+                    if (this.suggestValue["format"] == "json") {
+                        const items = JSON.parse(result)
+                        if (items.length > 0) {
+                            items.forEach(item => {
+                                this.insertSuggestItem(item[this.valueAttrValue], item[this.textAttrValue])
+                            })
+                            this.showSuggestion()
+                        }
+                    } else {
+                        this.suggestionTarget.innerHTML = result
+                        this.showSuggestion()
+                    }
+                } else {
+                    this.hideSuggestion()
+                }
+            })
+        }
+
+        insertSuggestItem(value, text) {
+            const displayText = this.selectedItems.find(item => item[0] == value) ? `✓ ${text}` : text
+            const optionItem = document.createElement("div")
+            optionItem.setAttribute("value", value)
+            optionItem.setAttribute("data-action", "click->select7#selectTag")
+            optionItem.setAttribute("class", "select7-option-item")
+            optionItem.innerText = displayText
+            
+            this.suggestionTarget.appendChild(optionItem)
+        }
+
+        selectTag(e) {
+            const selectedView = e.target
+            const value = selectedView.getAttribute("value")
+            const name = this.inputNameValue.replace("[?]", `[${this.count++}]`)
+
+            if (!this.selectedItems.find(item => item[0] == value)) {
+                this.selectedItems.push([value, name])
+
+                const input = document.createElement("input")
+                input.setAttribute("type", "hidden")
+                input.setAttribute("value", value)
+                input.setAttribute("name", name)
+
+                const selectedItem = this.templateTarget.cloneNode(true)
+                selectedItem.appendChild(input)
+                selectedItem.insertAdjacentHTML("afterbegin", selectedView.innerHTML)
+                selectedItem.classList.remove("select7-hidden")
+                this.selectedTarget.appendChild(selectedItem)
+
+                this.emitChangedEvent("add", name, value)
+            }
+            
+            this.hideSuggestion()
+
+            this.inputTarget.value = ""
+            if (!this.multipleValue) {
+                this.inputTarget.classList.add("select7-invisible")
+            }
+            this.inputTarget.focus()
+        }
+
+        removeTag(e) {
+            const removeView = e.target.parentElement
+            const name = removeView.getAttribute("data-remove-id")
+            const value = removeView.getAttribute("data-remove-value")
+
+            this.selectedItems = this.selectedItems.filter((_value, _name) => _name == name && value == _value)
+
+            if (removeView.hasAttribute("data-remove-id")) {
+                const input = document.createElement("input")
+                input.setAttribute("type", "hidden")
+                input.setAttribute("name", name)
+                input.setAttribute("value", value)
+
+                this.selectedTarget.appendChild(input)
+                removeView.querySelectorAll('input').forEach(v => this.selectedTarget.appendChild(v))
+            }
+
+            const input = removeView.querySelector('input')
+            this.emitChangedEvent("remove", name, value)
+
+            this.selectedTarget.removeChild(removeView)
+            this.inputTarget.classList.remove("select7-invisible")
+        }
+
+        showSuggestion() {
+            this.suggestionTarget.classList.remove("select7-hidden")
+            this.suggestionTarget.scrollTo(0, 0)
+        }
+
+        hideSuggestion() {
+            this.suggestionTarget.classList.add("select7-hidden")
+        }
+
+        clearForm() {
+            this.selectedTarget.innerHTML = ""
+        }
+
+        emitChangedEvent(action, name, value) {
+            const changedEvent = new CustomEvent('select7-changed', {
+                detail: {
+                    scope: this.scopeValue,
+                    field: this.fieldValue,
+                    action: action,
+                    change_value: value,
+                    values: this.selectedItems.map(item => item[0])
+                }
+            })
+            window.dispatchEvent(changedEvent)
+        }
+
+        handleKeyUp(event) {
+            if (event.code == "Escape") {
+                this.hideSuggestion()
+            }
+        }
+
+        outsideClick(event) {
+            if (!event.composedPath().includes(this.element)) {
+                this.hideSuggestion()
+            }
+        }
+    }

data/app/assets/javascripts/select7.js

@@ -0,0 +1,215 @@
+const Select7Controller = (base, debounce) => 
+    class extends base {
+        static targets = [ "selected", "input", "suggestion", "template" ]
+        static values = { 
+            scope: String,
+            field: String,
+            valueAttr: String,
+            textAttr: String,
+            suggest: Object, 
+            inputName: String, 
+            multiple: Boolean, 
+            nested: Boolean,
+            items: Array,
+            selectedItems: Array,
+        }
+
+        static formats = {
+            "json": "application/json",
+            "html": "text/html",
+            "turbo_stream": "text/vnd.turbo-stream.html"
+        }
+
+        connect() {
+            this.count = 0
+            this.timeoutId = null
+            this.element.addEventListener("turbo:submit-end", this.clearForm.bind(this))
+            if (this.hasInputTarget) {
+                this.inputTarget.setAttribute("autocomplete", "off")
+            }
+
+            this.debounceSuggest = debounce(
+                this.suggest.bind(this),
+                500,
+                { 'leading': true }
+            )
+
+            this.selectedItems = this.hasSelectedItemsValue ? this.selectedItemsValue.map((v, n, x) => [v, n]) : []
+
+            document.addEventListener('click', this.outsideClick.bind(this))
+        }
+
+        disconnect() {
+            document.removeEventListener('click', this.outsideClick.bind(this))
+        }
+
+        suggest() {
+            if (this.suggestValue["url"]) {
+                this.remoteSuggest()
+            } else if (this.hasItemsValue) {
+                this.localSuggest()
+            }
+        }
+
+        localSuggest() {
+            const key = this.inputTarget.value.toLowerCase()
+            if (key != "") {
+                this.suggestionTarget.innerHTML = ""
+                const matchedItems = this.itemsValue.filter(([value, text, lowcaseText]) => lowcaseText.includes(key))
+                if (matchedItems.length > 0) {
+                    matchedItems.forEach(([value, text, x]) => this.insertSuggestItem(value, text))
+                    this.showSuggestion()
+                }
+            } else {
+                this.hideSuggestion()
+            }
+        }
+
+        remoteSuggest() {
+            const searchKey = this.inputTarget.value.replaceAll(/[^\w]/g, '')
+            if (searchKey.length <= 0)
+                return
+
+            const csrfToken = document.querySelector("[name='csrf-token']")?.content
+            const format = this.suggestValue["format"] || "html"
+            const contentType = this.suggestValue["content-type"] || this.constructor.formats[format]
+            const suggestQueryUrl = new URL(this.suggestValue["url"])
+            suggestQueryUrl.searchParams.append(this.textAttrValue, searchKey)
+
+            fetch(suggestQueryUrl, {
+                method: this.suggestValue["method"] || 'get',
+                mode: 'cors',
+                cache: 'no-cache',
+                credentials: 'same-origin',
+                headers: {
+                    'Accept': contentType,
+                    'Content-Type': contentType,
+                    'X-CSRF-Token': csrfToken,
+                }
+            })
+            .then((r) => r.text())
+            .then((result) => {
+                if (result) {
+                    this.suggestionTarget.innerHTML = ""
+                    if (this.suggestValue["format"] == "json") {
+                        const items = JSON.parse(result)
+                        if (items.length > 0) {
+                            items.forEach(item => {
+                                this.insertSuggestItem(item[this.valueAttrValue], item[this.textAttrValue])
+                            })
+                            this.showSuggestion()
+                        }
+                    } else {
+                        this.suggestionTarget.innerHTML = result
+                        this.showSuggestion()
+                    }
+                } else {
+                    this.hideSuggestion()
+                }
+            })
+        }
+
+        insertSuggestItem(value, text) {
+            const displayText = this.selectedItems.find(item => item[0] == value) ? `✓ ${text}` : text
+            const optionItem = document.createElement("div")
+            optionItem.setAttribute("value", value)
+            optionItem.setAttribute("data-action", "click->select7#selectTag")
+            optionItem.setAttribute("class", "select7-option-item")
+            optionItem.innerText = displayText
+            
+            this.suggestionTarget.appendChild(optionItem)
+        }
+
+        selectTag(e) {
+            const selectedView = e.target
+            const value = selectedView.getAttribute("value")
+            const name = this.inputNameValue.replace("[?]", `[${this.count++}]`)
+
+            if (!this.selectedItems.find(item => item[0] == value)) {
+                this.selectedItems.push([value, name])
+
+                const input = document.createElement("input")
+                input.setAttribute("type", "hidden")
+                input.setAttribute("value", value)
+                input.setAttribute("name", name)
+
+                const selectedItem = this.templateTarget.cloneNode(true)
+                selectedItem.appendChild(input)
+                selectedItem.insertAdjacentHTML("afterbegin", selectedView.innerHTML)
+                selectedItem.classList.remove("select7-hidden")
+                this.selectedTarget.appendChild(selectedItem)
+
+                this.emitChangedEvent("add", name, value)
+            }
+            
+            this.hideSuggestion()
+
+            this.inputTarget.value = ""
+            if (!this.multipleValue) {
+                this.inputTarget.classList.add("select7-invisible")
+            }
+            this.inputTarget.focus()
+        }
+
+        removeTag(e) {
+            const removeView = e.target.parentElement
+            const name = removeView.getAttribute("data-remove-id")
+            const value = removeView.getAttribute("data-remove-value")
+
+            this.selectedItems = this.selectedItems.filter((_value, _name) => _name == name && value == _value)
+
+            if (removeView.hasAttribute("data-remove-id")) {
+                const input = document.createElement("input")
+                input.setAttribute("type", "hidden")
+                input.setAttribute("name", name)
+                input.setAttribute("value", value)
+
+                this.selectedTarget.appendChild(input)
+                removeView.querySelectorAll('input').forEach(v => this.selectedTarget.appendChild(v))
+            }
+
+            const input = removeView.querySelector('input')
+            this.emitChangedEvent("remove", name, value)
+
+            this.selectedTarget.removeChild(removeView)
+            this.inputTarget.classList.remove("select7-invisible")
+        }
+
+        showSuggestion() {
+            this.suggestionTarget.classList.remove("select7-hidden")
+            this.suggestionTarget.scrollTo(0, 0)
+        }
+
+        hideSuggestion() {
+            this.suggestionTarget.classList.add("select7-hidden")
+        }
+
+        clearForm() {
+            this.selectedTarget.innerHTML = ""
+        }
+
+        emitChangedEvent(action, name, value) {
+            const changedEvent = new CustomEvent('select7-changed', {
+                detail: {
+                    scope: this.scopeValue,
+                    field: this.fieldValue,
+                    action: action,
+                    change_value: value,
+                    values: this.selectedItems.map(item => item[0])
+                }
+            })
+            window.dispatchEvent(changedEvent)
+        }
+
+        handleKeyUp(event) {
+            if (event.code == "Escape") {
+                this.hideSuggestion()
+            }
+        }
+
+        outsideClick(event) {
+            if (!event.composedPath().includes(this.element)) {
+                this.hideSuggestion()
+            }
+        }
+    }

data/app/assets/stylesheets/select7.css

@@ -0,0 +1,113 @@
+.select7-container {
+    position: relative;
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+    font-size: 1.0rem;
+    width: 90%;
+}
+
+.select7-selected-container {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    height: fit-content;
+}
+
+.select7-selection {
+    margin-top: 0.5rem;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    height: fit-content;
+    border: solid rgb(229 231 235 / var(--tw-border-opacity));
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+
+.select7-selected {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.select7-input {
+    border-style: none;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    font-size: 1.0rem;
+}
+
+.select7-suggestion {
+    position: absolute;
+    left: 0px;
+    z-index: 50;
+    height: 6rem;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-top: -2px;
+    border: solid rgb(229 231 235 / var(--tw-border-opacity));
+    border-width: 0 1px 2px 1px;
+    --tw-border-opacity: 1;
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.select7-option-item {
+    width: 100%;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
+.select7-option-item:hover {
+    background-color: rgb(229 231 235);
+    cursor: pointer;
+}
+
+.select7-selected-item {
+    margin-right: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 0.2rem;
+    padding: 0.25rem;
+    background-color: #d9e1e1;
+}
+
+.select7-item-close {
+    padding: 0.25rem;
+    margin-left: 0.25rem;
+    text-align: center;
+    line-height: 1.0rem;
+}
+
+.select7-item-close:hover {
+    background-color: rgb(242, 242, 244);
+    cursor: pointer;
+}
+
+.select7-hidden {
+    display: none !important;
+}
+
+.select7-invisible {
+    visibility: hidden;
+}
+
+.select7-visible {
+    visibility: visible;
+}

data/app/helpers/select7/form_helper.rb

@@ -0,0 +1,54 @@
+module Select7::FormHelper
+    class ActionView::Helpers::FormBuilder
+        include Select7::TagHelper
+
+        def select7(options: [], selecteds: [], suggest: {}, multiple: true, params: @template.params, **attributes)
+            field, (value_attr, text_attr) = attributes.first
+
+            input_name = if scope = @object_name then
+                "#{scope}[#{field.to_s.singularize}_#{value_attr}#{multiple ? 's' : ''}]" + (multiple ? "[]" : "")
+            else
+                "#{field.to_s.singularize}_#{value_attr}" + (multiple ? "s[]" : "")
+            end
+           
+            selecteds = (if @object then
+                @object.send(field)
+            else
+                clazz = field.to_s.classify.constantize
+                Array(clazz.where(value_attr.to_sym => params["#{field.to_s.singularize}_#{value_attr}s"]).all)
+            end).map { |item| 
+                [item.send(value_attr), item.send(text_attr)]
+            }
+
+            options_for_select = attributes[:options_for_select] || options.map { |item| [item.send(value_attr), item.send(text_attr)] }
+
+            select7_tag(
+                **attributes,
+                options_for_select: options_for_select, 
+                selecteds: selecteds, 
+                suggest: suggest, 
+                scope: @object_name, 
+                input_name: input_name,
+            )
+        end
+
+        # TODO: REMOVE IF NO USECASE
+        # def select7_fields_for(record_name, field = "id", option_items: [], selected_items: [], suggest: {}, **attributes)
+        #     nested_attributes = nested_attributes_association?(record_name)
+        #     association = nested_attributes ? "#{record_name}_attributes" : record_name
+        #     scope = "#{@object_name}[#{association}]"
+        #     input_name = "#{scope}[?][#{field}]"
+
+        #     select7_tag(
+        #         field, 
+        #         option_items, 
+        #         selected_items: selected_items, 
+        #         suggest: suggest, 
+        #         scope: scope, 
+        #         input_name: input_name,
+        #         nested_attributes: nested_attributes,
+        #         **attributes
+        #     )
+        # end
+    end
+end

data/app/helpers/select7/tag_helper.rb

@@ -0,0 +1,23 @@
+module Select7::TagHelper
+    def select7_tag(options_for_select: [], selecteds: [], suggest: {}, **attributes)
+        field, (value_attr, text_attr) = attributes.first
+        options_for_select.map! {|(value, text)| [value, text, text.downcase] }
+        attributes.reverse_merge!(css: {}, multiple: true, nested_attributes: nil)
+        attributes[:input_name] ||= "#{field}" + (attributes[:multiple] ? "[]" : "")
+
+        @template.render partial: "select7/field", 
+            locals: { 
+                field: field,
+                value_attr: value_attr,
+                text_attr: text_attr,
+                selected_items: selecteds, 
+                option_items: options_for_select, 
+                suggest: suggest || {}, 
+                **attributes 
+            }
+    end
+
+    def select7_item_tag(id, content = nil)
+        render partial: "select7/item", locals: {id: id, content: content || yield.html_safe }
+    end
+end

data/app/views/select7/_field.html.erb

@@ -0,0 +1,50 @@
+<div class="<%= css[:field_container] || 'select7-container' %>"
+    data-controller="select7"
+    data-action="keyup@document->select7#handleKeyUp" 
+    data-select7-scope-value="<%= scope %>"
+    data-select7-field-value="<%= field %>"
+    data-select7-value-attr-value="<%= value_attr %>"
+    data-select7-text-attr-value="<%= text_attr %>"
+    data-select7-input-name-value="<%= input_name %>"
+    data-select7-multiple-value="<%= multiple %>"
+    data-select7-nested-value="<%= nested_attributes.nil? %>"
+    data-select7-suggest-value="<%= ActiveSupport::JSON.encode(suggest) %>" 
+    data-select7-items-value="<%= ActiveSupport::JSON.encode(option_items) %>"
+    data-select7-selected-items-value="<%= ActiveSupport::JSON.encode(selected_items) %>"
+>
+    
+    <div data-select7-target="template" class="select7-hidden <%= css[:selected_item] || 'select7-selected-item' %>">
+        <span class="<%= css[:selected_item_close] || 'select7-item-close' %>" data-action="click->select7#removeTag">×</span>
+    </div>
+
+    <div class="<%= css[:selection] || 'select7-selection' %>">
+        <div data-select7-target="selected" class="<%= css[:selected_container] || 'select7-selected-container' %>">
+            <% if multiple %>
+                <% selected_items.each do |id, text, _| %>
+                    <div class="<%= css[:selected_item] || 'select7-selected-item' %>"
+                        <% if nested_attributes %>
+                            data-remove-id=<%= "#{scope}[#{id}][_destroy]" %> 
+                            data-remove-value="true"
+                        <% end %>
+                    >
+
+                    <% if nested_attributes %>
+                        <input type="hidden" name=<%= "#{scope}[#{item.id}][id]" %> value="<%= id %>">
+                        <input type="hidden" name=<%= "#{scope}[#{item.id}][#{field}]" %> value="<%= id %>">
+                    <% else %>
+                        <input type="hidden" name="<%= input_name %>" value="<%= id %>">
+                    <% end %>
+
+                        <span class="<%= css[:selected_item_content] || 'select7-selected-item-content' %>"><%= text %></span>
+                        <span class="<%= css[:selected_item_close] || 'select7-item-close' %>" data-action="click->select7#removeTag">x</span>
+                    </div>
+                <% end %>
+            <% else %>
+                <span class="<%= css[:selected_item_content] || 'select7-selected-item-content' %>"><%= selected_items.first %></span>
+            <% end %>
+        </div>
+        <input data-select7-target="input" data-action="input->select7#debounceSuggest" class="<%= css[:input] || 'select7-input' %>" autocomplete="off" placeholder="<%= field %>">
+    </div>
+    <div data-select7-target="suggestion" class="select7-hidden <%= css[:suggestion] || 'select7-suggestion' %>">
+    </div>
+</div>

data/app/views/select7/_item.html.erb

@@ -0,0 +1,3 @@
+<div name="id" value="<%= id %>" data-action="click->select7#selectTag" class="select7-option-item">
+    <%= content %>
+</div>

data/lib/install/app/javascript/controllers/select7_controller.js

@@ -0,0 +1,4 @@
+import { Controller } from "@hotwired/stimulus"
+import debounce from "lodash.debounce"
+
+export default class extends Select7Controller(Controller, debounce) {}

data/lib/install/app/javascript/controllers/select7_esm_controller.js

@@ -0,0 +1,5 @@
+import { Controller } from "@hotwired/stimulus"
+import debounce from "lodash.debounce"
+import { Select7Controller } from "select7"
+
+export default class extends Select7Controller(Controller, debounce) {}

data/lib/install/select7.rb

@@ -0,0 +1,48 @@
+IMPORTMAP_PATH = Rails.root.join("config/importmap.rb")
+APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")
+
+say "Import Select7 Js"
+
+if IMPORTMAP_PATH.exist?
+  append_to_file IMPORTMAP_PATH, %(\npin "lodash.debounce", to: "https://cdn.jsdelivr.net/npm/lodash.debounce@4.0.8/+esm", preload: true\n)
+  append_to_file IMPORTMAP_PATH, %(pin "select7", to: "select7.esm.js", preload: true\n)
+  
+  copy_file "#{__dir__}/app/javascript/controllers/select7_esm_controller.js", "app/javascript/controllers/select7_controller.js"
+
+elsif Rails.root.join("package.json").exist?
+  if APPLICATION_LAYOUT_PATH.exist?
+    run "yarn add lodash.debounce"
+    
+    insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /\s*<\/head/
+      \n<%= javascript_include_tag "select7", "data-turbo-track": "reload", rel: :preload, async: true %>
+    ERB
+
+    append_to_file Rails.root.join("app/javascript/controllers/index.js"), <<~ERB
+      import Select7Controller from "./select7_controller.js"
+      application.register("select7", Select7Controller)
+    ERB
+
+    append_to_file Rails.root.join("app/javascript/application.js"), <<~ERB
+    ERB
+
+    copy_file "#{__dir__}/app/javascript/controllers/select7_controller.js", "app/javascript/controllers/select7_controller.js"
+  else
+    say %(Couldn't Import Select7 Js), :red
+  end
+else
+  say %(You must either be running with node (package.json) or importmap-rails (config/importmap.rb) to use this gem.), :red
+end
+
+
+# ==============
+
+say "Import Select7 Css"
+if (Rails.root.join("app/assets/stylesheets/application.css")).exist?
+  append_to_file "app/assets/stylesheets/application.css", %(\n@import "select7.css"\n)
+elsif APPLICATION_LAYOUT_PATH.exist?
+  insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /^\s*<%= stylesheet_link_tag/
+    <%= stylesheet_link_tag "select7", "select7", "data-turbo-track": "reload" %>
+  ERB
+else
+  say %(Couldn't Import Select7 Css), :red
+end

data/lib/select7/engine.rb

@@ -0,0 +1,26 @@
+module Select7
+  class Engine < ::Rails::Engine
+    isolate_namespace Select7
+
+    config.eager_load_namespaces << Select7
+    config.autoload_once_paths = %W(
+      #{root}/app/helpers
+    )
+
+    initializer "select7.assets" do |app|
+      if app.config.respond_to?(:assets)
+        Rails.application.config.assets.precompile += %w( select7.js select7.esm.js select7.css )
+      end
+    end
+
+    # initializer "select7.importmap", after: "importmap" do |app|
+    #   app.config.importmap.paths << Engine.root.join("config/importmap.rb")
+    # end
+
+    initializer "select7.helpers", before: :load_config_initializers do
+      ActiveSupport.on_load(:action_controller_base) do
+        helper Select7::Engine.helpers
+      end
+    end
+  end
+end

data/lib/select7/version.rb

@@ -0,0 +1,3 @@
+module Select7
+  VERSION = "0.0.1"
+end

data/lib/select7.rb

@@ -0,0 +1,5 @@
+require "select7/version"
+require "select7/engine"
+
+module Select7
+end

data/lib/tasks/select7_tasks.rake

@@ -0,0 +1,9 @@
+def run_select7_install_template(path)
+    system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{path}"
+end
+
+namespace :select7 do
+    task :install do
+        run_select7_install_template "#{File.expand_path("../install/select7.rb", __dir__)}"
+    end
+end

metadata

@@ -0,0 +1,161 @@
+--- !ruby/object:Gem::Specification
+name: select7
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Lam Phan
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2024-03-04 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.0'
+- !ruby/object:Gem::Dependency
+  name: stimulus-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: capybara
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.26'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.26'
+- !ruby/object:Gem::Dependency
+  name: selenium-webdriver
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 4.8.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 4.8.0
+- !ruby/object:Gem::Dependency
+  name: webdrivers
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.0
+description: Multiple choices selector (similar to select2, but with rails hotwire)
+email:
+- theforestvn88@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/javascripts/select7.esm.js
+- app/assets/javascripts/select7.js
+- app/assets/stylesheets/select7.css
+- app/helpers/select7/form_helper.rb
+- app/helpers/select7/tag_helper.rb
+- app/views/select7/_field.html.erb
+- app/views/select7/_item.html.erb
+- lib/install/app/javascript/controllers/select7_controller.js
+- lib/install/app/javascript/controllers/select7_esm_controller.js
+- lib/install/select7.rb
+- lib/select7.rb
+- lib/select7/engine.rb
+- lib/select7/version.rb
+- lib/tasks/select7_tasks.rake
+homepage: https://github.com/theforestvn88/rails-select7.git
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/theforestvn88/rails-select7.git
+  source_code_uri: https://github.com/theforestvn88/rails-select7.git
+  changelog_uri: https://github.com/theforestvn88/rails-select7.git
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.4
+signing_key: 
+specification_version: 4
+summary: Multiple choices selector (similar to select2, but with rails hotwire)
+test_files: []