select7 0.0.2 → 0.0.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +21 -0
- data/app/assets/javascripts/select7.esm.js +2 -2
- data/app/assets/javascripts/select7.esm.min.js +1 -1
- data/app/assets/javascripts/select7.js +2 -2
- data/app/assets/javascripts/select7.min.js +1 -1
- data/app/assets/stylesheets/select7.min.css +1 -0
- data/app/helpers/select7/form_helper.rb +1 -22
- data/app/helpers/select7/tag_helper.rb +6 -4
- data/app/views/select7/_field.html.erb +5 -4
- data/lib/install/select7.rb +3 -2
- data/lib/select7/engine.rb +1 -1
- data/lib/select7/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c61f82d9300b39b9171a01887ab66ee425005fa1abc716efcf7a25825ae77489
|
4
|
+
data.tar.gz: 51b731efc4be876b0b435b5e9fa84f28446463c52b74c383b2f2b5695de92a1a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e170dc1b76b781c24f9cf503d7a2a6681bae0f1c9131766adea9ec38691b6c96bff83047d7e3e2b0b0dc9b29be788c13f53f9f11465ac5074a5f2cba15b7b438
|
7
|
+
data.tar.gz: e8ed47be84cc70f06b8e1d741b57ccf8c2010ce2271c65dae0db5b89be1de0acaf611a82e7720183631c3a177be47b1db25208ffc6c1a11d58ff2cac0930b9e8
|
data/README.md
CHANGED
@@ -72,3 +72,24 @@ class DevelopersController < ApplicationController
|
|
72
72
|
# ...
|
73
73
|
end
|
74
74
|
```
|
75
|
+
|
76
|
+
### Listening select7 changed events
|
77
|
+
In case you want to do something with selected options from select7 whenever they're changed, you could listen event `select7-changed@window` from your js file.
|
78
|
+
For example:
|
79
|
+
```ruby
|
80
|
+
<div data-controller="filter" data-action="select7-changed@window->filter#update">
|
81
|
+
<%= select7_tag(:tags => [:id, :name], options: Tag.all) %>
|
82
|
+
</div>
|
83
|
+
|
84
|
+
# filter_controller.js
|
85
|
+
import { Controller } from "@hotwired/stimulus"
|
86
|
+
export default class extends Controller {
|
87
|
+
update(e) {
|
88
|
+
console.log(e.detail)
|
89
|
+
// field: "tags"
|
90
|
+
// action: "add"
|
91
|
+
// changedValue: "3"
|
92
|
+
// selectedValues: ["1", "3"]
|
93
|
+
}
|
94
|
+
}
|
95
|
+
```
|
@@ -194,8 +194,8 @@ export const Select7Controller = (base, debounce) =>
|
|
194
194
|
scope: this.scopeValue,
|
195
195
|
field: this.fieldValue,
|
196
196
|
action: action,
|
197
|
-
|
198
|
-
|
197
|
+
changedValue: value,
|
198
|
+
selectedValues: this.selectedItems.map(item => item[0])
|
199
199
|
}
|
200
200
|
})
|
201
201
|
window.dispatchEvent(changedEvent)
|
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
const r=(c,u)=>class extends c{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)),this.hasInputTarget&&this.inputTarget.setAttribute("autocomplete","off"),this.debounceSuggest=u(this.suggest.bind(this),500,{leading:!0}),this.selectedItems=this.hasSelectedItemsValue?this.selectedItemsValue.map((t,s,i)=>[t,s]):[],document.addEventListener("click",this.outsideClick.bind(this))}disconnect(){document.removeEventListener("click",this.outsideClick.bind(this))}suggest(){this.suggestValue.url?this.remoteSuggest():this.hasItemsValue&&this.localSuggest()}localSuggest(){const t=this.inputTarget.value.toLowerCase();if(t!=""){this.suggestionTarget.innerHTML="";const s=this.itemsValue.filter(([i,e,n])=>n.includes(t));s.length>0&&(s.forEach(([i,e,n])=>this.insertSuggestItem(i,e)),this.showSuggestion())}else this.hideSuggestion()}remoteSuggest(){const t=this.inputTarget.value.replaceAll(/[^\w]/g,"");if(t.length<=0)return;const s=document.querySelector("[name='csrf-token']")?.content,i=this.suggestValue.format||"html",e=this.suggestValue["content-type"]||this.constructor.formats[i],n=new URL(this.suggestValue.url);n.searchParams.append(this.textAttrValue,t),fetch(n,{method:this.suggestValue.method||"get",mode:"cors",cache:"no-cache",credentials:"same-origin",headers:{Accept:e,"Content-Type":e,"X-CSRF-Token":s}}).then(a=>a.text()).then(a=>{if(a)if(this.suggestionTarget.innerHTML="",this.suggestValue.format=="json"){const l=JSON.parse(a);l.length>0&&(l.forEach(o=>{this.insertSuggestItem(o[this.valueAttrValue],o[this.textAttrValue])}),this.showSuggestion())}else this.suggestionTarget.innerHTML=a,this.showSuggestion();else this.hideSuggestion()})}insertSuggestItem(t,s){const i=this.selectedItems.find(n=>n[0]==t)?`\u2713 ${s}`:s,e=document.createElement("div");e.setAttribute("value",t),e.setAttribute("data-action","click->select7#selectTag"),e.setAttribute("class","select7-option-item"),e.innerText=i,this.suggestionTarget.appendChild(e)}selectTag(t){const s=t.target,i=s.getAttribute("value"),e=this.inputNameValue.replace("[?]",`[${this.count++}]`);if(!this.selectedItems.find(n=>n[0]==i)){this.selectedItems.push([i,e]);const n=document.createElement("input");n.setAttribute("type","hidden"),n.setAttribute("value",i),n.setAttribute("name",e);const a=this.templateTarget.cloneNode(!0);a.appendChild(n),a.insertAdjacentHTML("afterbegin",s.innerHTML),a.classList.remove("select7-hidden"),this.selectedTarget.appendChild(a),this.emitChangedEvent("add",e,i)}this.hideSuggestion(),this.inputTarget.value="",this.multipleValue||this.inputTarget.classList.add("select7-invisible"),this.inputTarget.focus()}removeTag(t){const s=t.target.parentElement,i=s.getAttribute("data-remove-id"),e=s.getAttribute("data-remove-value");if(this.selectedItems=this.selectedItems.filter((a,l)=>l==i&&e==a),s.hasAttribute("data-remove-id")){const a=document.createElement("input");a.setAttribute("type","hidden"),a.setAttribute("name",i),a.setAttribute("value",e),this.selectedTarget.appendChild(a),s.querySelectorAll("input").forEach(l=>this.selectedTarget.appendChild(l))}const n=s.querySelector("input");this.emitChangedEvent("remove",i,e),this.selectedTarget.removeChild(s),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(t,s,i){const e=new CustomEvent("select7-changed",{detail:{scope:this.scopeValue,field:this.fieldValue,action:t,changedValue:i,selectedValues:this.selectedItems.map(n=>n[0])}});window.dispatchEvent(e)}handleKeyUp(t){t.code=="Escape"&&this.hideSuggestion()}outsideClick(t){t.composedPath().includes(this.element)||this.hideSuggestion()}};export{r as Select7Controller};
|
@@ -194,8 +194,8 @@ const Select7Controller = (base, debounce) =>
|
|
194
194
|
scope: this.scopeValue,
|
195
195
|
field: this.fieldValue,
|
196
196
|
action: action,
|
197
|
-
|
198
|
-
|
197
|
+
changedValue: value,
|
198
|
+
selectedValues: this.selectedItems.map(item => item[0])
|
199
199
|
}
|
200
200
|
})
|
201
201
|
window.dispatchEvent(changedEvent)
|
@@ -1 +1 @@
|
|
1
|
-
const Select7Controller=(
|
1
|
+
const Select7Controller=(o,u)=>class extends o{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)),this.hasInputTarget&&this.inputTarget.setAttribute("autocomplete","off"),this.debounceSuggest=u(this.suggest.bind(this),500,{leading:!0}),this.selectedItems=this.hasSelectedItemsValue?this.selectedItemsValue.map((t,s,i)=>[t,s]):[],document.addEventListener("click",this.outsideClick.bind(this))}disconnect(){document.removeEventListener("click",this.outsideClick.bind(this))}suggest(){this.suggestValue.url?this.remoteSuggest():this.hasItemsValue&&this.localSuggest()}localSuggest(){const t=this.inputTarget.value.toLowerCase();if(t!=""){this.suggestionTarget.innerHTML="";const s=this.itemsValue.filter(([i,e,n])=>n.includes(t));s.length>0&&(s.forEach(([i,e,n])=>this.insertSuggestItem(i,e)),this.showSuggestion())}else this.hideSuggestion()}remoteSuggest(){const t=this.inputTarget.value.replaceAll(/[^\w]/g,"");if(t.length<=0)return;const s=document.querySelector("[name='csrf-token']")?.content,i=this.suggestValue.format||"html",e=this.suggestValue["content-type"]||this.constructor.formats[i],n=new URL(this.suggestValue.url);n.searchParams.append(this.textAttrValue,t),fetch(n,{method:this.suggestValue.method||"get",mode:"cors",cache:"no-cache",credentials:"same-origin",headers:{Accept:e,"Content-Type":e,"X-CSRF-Token":s}}).then(a=>a.text()).then(a=>{if(a)if(this.suggestionTarget.innerHTML="",this.suggestValue.format=="json"){const l=JSON.parse(a);l.length>0&&(l.forEach(c=>{this.insertSuggestItem(c[this.valueAttrValue],c[this.textAttrValue])}),this.showSuggestion())}else this.suggestionTarget.innerHTML=a,this.showSuggestion();else this.hideSuggestion()})}insertSuggestItem(t,s){const i=this.selectedItems.find(n=>n[0]==t)?`\u2713 ${s}`:s,e=document.createElement("div");e.setAttribute("value",t),e.setAttribute("data-action","click->select7#selectTag"),e.setAttribute("class","select7-option-item"),e.innerText=i,this.suggestionTarget.appendChild(e)}selectTag(t){const s=t.target,i=s.getAttribute("value"),e=this.inputNameValue.replace("[?]",`[${this.count++}]`);if(!this.selectedItems.find(n=>n[0]==i)){this.selectedItems.push([i,e]);const n=document.createElement("input");n.setAttribute("type","hidden"),n.setAttribute("value",i),n.setAttribute("name",e);const a=this.templateTarget.cloneNode(!0);a.appendChild(n),a.insertAdjacentHTML("afterbegin",s.innerHTML),a.classList.remove("select7-hidden"),this.selectedTarget.appendChild(a),this.emitChangedEvent("add",e,i)}this.hideSuggestion(),this.inputTarget.value="",this.multipleValue||this.inputTarget.classList.add("select7-invisible"),this.inputTarget.focus()}removeTag(t){const s=t.target.parentElement,i=s.getAttribute("data-remove-id"),e=s.getAttribute("data-remove-value");if(this.selectedItems=this.selectedItems.filter((a,l)=>l==i&&e==a),s.hasAttribute("data-remove-id")){const a=document.createElement("input");a.setAttribute("type","hidden"),a.setAttribute("name",i),a.setAttribute("value",e),this.selectedTarget.appendChild(a),s.querySelectorAll("input").forEach(l=>this.selectedTarget.appendChild(l))}const n=s.querySelector("input");this.emitChangedEvent("remove",i,e),this.selectedTarget.removeChild(s),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(t,s,i){const e=new CustomEvent("select7-changed",{detail:{scope:this.scopeValue,field:this.fieldValue,action:t,changedValue:i,selectedValues:this.selectedItems.map(n=>n[0])}});window.dispatchEvent(e)}handleKeyUp(t){t.code=="Escape"&&this.hideSuggestion()}outsideClick(t){t.composedPath().includes(this.element)||this.hideSuggestion()}};
|
@@ -0,0 +1 @@
|
|
1
|
+
.select7-selected-container,.select7-selection{justify-content:flex-start;height:fit-content;display:flex}.select7-selection,.select7-suggestion{--tw-border-opacity:1;--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)}.select7-container{position:relative;margin-top:1.25rem;margin-bottom:1.25rem;font-size:1rem;width:90%}.select7-selected-container{flex-wrap:wrap}.select7-selection{margin-top:.5rem;flex-wrap:wrap;border:solid rgb(229 231 235 / var(--tw-border-opacity));border-width:1px;padding:.5rem .75rem;outline:transparent solid 2px;outline-offset:2px}.select7-selected{display:flex;justify-content:flex-start}.select7-input{border-style:none;outline:transparent solid 2px;outline-offset:2px;font-size:1rem}.select7-suggestion{position:absolute;left:0;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;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));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:.25rem .5rem}.select7-option-item:hover{background-color:rgb(229 231 235);cursor:pointer}.select7-selected-item{margin-right:.25rem;display:flex;align-items:center;justify-content:space-between;border-radius:.2rem;padding:.25rem;background-color:#d9e1e1}.select7-item-close{padding:.25rem;margin-left:.25rem;text-align:center;line-height:1rem}.select7-item-close:hover{background-color:#f2f2f4;cursor:pointer}.select7-hidden{display:none!important}.select7-invisible{visibility:hidden}.select7-visible{visibility:visible}
|
@@ -20,35 +20,14 @@ module Select7::FormHelper
|
|
20
20
|
[item.send(value_attr), item.send(text_attr)]
|
21
21
|
}
|
22
22
|
|
23
|
-
options_for_select = attributes[:options_for_select] || options.map { |item| [item.send(value_attr), item.send(text_attr)] }
|
24
|
-
|
25
23
|
select7_tag(
|
26
24
|
**attributes,
|
27
|
-
|
25
|
+
options: options,
|
28
26
|
selecteds: selecteds,
|
29
27
|
suggest: suggest,
|
30
28
|
scope: @object_name,
|
31
29
|
input_name: input_name,
|
32
30
|
)
|
33
31
|
end
|
34
|
-
|
35
|
-
# TODO: REMOVE IF NO USECASE
|
36
|
-
# def select7_fields_for(record_name, field = "id", option_items: [], selected_items: [], suggest: {}, **attributes)
|
37
|
-
# nested_attributes = nested_attributes_association?(record_name)
|
38
|
-
# association = nested_attributes ? "#{record_name}_attributes" : record_name
|
39
|
-
# scope = "#{@object_name}[#{association}]"
|
40
|
-
# input_name = "#{scope}[?][#{field}]"
|
41
|
-
|
42
|
-
# select7_tag(
|
43
|
-
# field,
|
44
|
-
# option_items,
|
45
|
-
# selected_items: selected_items,
|
46
|
-
# suggest: suggest,
|
47
|
-
# scope: scope,
|
48
|
-
# input_name: input_name,
|
49
|
-
# nested_attributes: nested_attributes,
|
50
|
-
# **attributes
|
51
|
-
# )
|
52
|
-
# end
|
53
32
|
end
|
54
33
|
end
|
@@ -1,11 +1,13 @@
|
|
1
1
|
module Select7::TagHelper
|
2
|
-
def select7_tag(
|
2
|
+
def select7_tag(options: [], selecteds: [], suggest: {}, **attributes)
|
3
3
|
field, (value_attr, text_attr) = attributes.first
|
4
|
-
options_for_select.map
|
4
|
+
options_for_select = options.map { |item|
|
5
|
+
[item.send(value_attr), item.send(text_attr), item.send(text_attr).downcase]
|
6
|
+
}
|
5
7
|
attributes.reverse_merge!(css: {}, multiple: true, nested_attributes: nil)
|
6
|
-
attributes[:input_name] ||= "#{field}"
|
8
|
+
attributes[:input_name] ||= "#{field.to_s.singularize}_#{value_attr}"
|
7
9
|
|
8
|
-
@template.render partial: "select7/field",
|
10
|
+
(@template || self).render partial: "select7/field",
|
9
11
|
locals: {
|
10
12
|
field: field,
|
11
13
|
value_attr: value_attr,
|
@@ -1,7 +1,8 @@
|
|
1
|
+
<% _scope = local_assigns.has_key?(:scope) ? scope : '' %>
|
1
2
|
<div class="<%= css[:field_container] || 'select7-container' %>"
|
2
3
|
data-controller="select7"
|
3
4
|
data-action="keyup@document->select7#handleKeyUp"
|
4
|
-
data-select7-scope-value="<%=
|
5
|
+
data-select7-scope-value="<%= _scope %>"
|
5
6
|
data-select7-field-value="<%= field %>"
|
6
7
|
data-select7-value-attr-value="<%= value_attr %>"
|
7
8
|
data-select7-text-attr-value="<%= text_attr %>"
|
@@ -23,14 +24,14 @@
|
|
23
24
|
<% selected_items.each do |id, text, _| %>
|
24
25
|
<div class="<%= css[:selected_item] || 'select7-selected-item' %>"
|
25
26
|
<% if nested_attributes %>
|
26
|
-
data-remove-id=<%= "#{
|
27
|
+
data-remove-id=<%= "#{_scope}[#{id}][_destroy]" %>
|
27
28
|
data-remove-value="true"
|
28
29
|
<% end %>
|
29
30
|
>
|
30
31
|
|
31
32
|
<% if nested_attributes %>
|
32
|
-
<input type="hidden" name=<%= "#{
|
33
|
-
<input type="hidden" name=<%= "#{
|
33
|
+
<input type="hidden" name=<%= "#{_scope}[#{item.id}][id]" %> value="<%= id %>">
|
34
|
+
<input type="hidden" name=<%= "#{_scope}[#{item.id}][#{field}]" %> value="<%= id %>">
|
34
35
|
<% else %>
|
35
36
|
<input type="hidden" name="<%= input_name %>" value="<%= id %>">
|
36
37
|
<% end %>
|
data/lib/install/select7.rb
CHANGED
@@ -14,7 +14,8 @@ elsif Rails.root.join("package.json").exist?
|
|
14
14
|
run "yarn add lodash.debounce"
|
15
15
|
|
16
16
|
insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /\s*<\/head/
|
17
|
-
\n<%=
|
17
|
+
\n<%= preload_link_tag "select7.min.js", as: "script" %>
|
18
|
+
<%= javascript_include_tag "select7.min.js", "data-turbo-track": "reload" %>
|
18
19
|
ERB
|
19
20
|
|
20
21
|
append_to_file Rails.root.join("app/javascript/controllers/index.js"), <<~ERB
|
@@ -36,7 +37,7 @@ end
|
|
36
37
|
say "Import Select7 Css"
|
37
38
|
if APPLICATION_LAYOUT_PATH.exist?
|
38
39
|
insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /^\s*<%= stylesheet_link_tag/
|
39
|
-
<%= stylesheet_link_tag "select7", "data-turbo-track": "reload" %>
|
40
|
+
<%= stylesheet_link_tag "select7.min", "data-turbo-track": "reload" %>
|
40
41
|
ERB
|
41
42
|
else
|
42
43
|
say %(Couldn't Import Select7 Css), :red
|
data/lib/select7/engine.rb
CHANGED
@@ -8,7 +8,7 @@ module Select7
|
|
8
8
|
|
9
9
|
initializer "select7.assets" do |app|
|
10
10
|
if app.config.respond_to?(:assets)
|
11
|
-
Rails.application.config.assets.precompile += %w( select7.min.js select7.esm.min.js select7.css )
|
11
|
+
Rails.application.config.assets.precompile += %w( select7.min.js select7.esm.min.js select7.min.css )
|
12
12
|
end
|
13
13
|
end
|
14
14
|
|
data/lib/select7/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: select7
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Lam Phan
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2024-03-
|
11
|
+
date: 2024-03-23 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -123,6 +123,7 @@ files:
|
|
123
123
|
- app/assets/javascripts/select7.js
|
124
124
|
- app/assets/javascripts/select7.min.js
|
125
125
|
- app/assets/stylesheets/select7.css
|
126
|
+
- app/assets/stylesheets/select7.min.css
|
126
127
|
- app/helpers/select7/form_helper.rb
|
127
128
|
- app/helpers/select7/tag_helper.rb
|
128
129
|
- app/views/select7/_field.html.erb
|