slim-select 2.1.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -0
- package/dist/render.d.ts +9 -2
- package/dist/select.d.ts +6 -6
- package/dist/settings.d.ts +0 -3
- package/dist/slimselect.cjs.js +148 -51
- package/dist/slimselect.css +1 -1
- package/dist/slimselect.css.map +1 -1
- package/dist/slimselect.es.js +148 -51
- package/dist/slimselect.global.js +148 -51
- package/dist/slimselect.js +148 -51
- package/dist/slimselect.min.js +1 -1
- package/dist/slimselect.umd.js +148 -51
- package/dist/slimselect.umd.min.js +1 -1
- package/dist/store.d.ts +5 -0
- package/docs/assets/data.js +7 -3
- package/docs/assets/home.css +1 -1
- package/docs/assets/home.js +1 -1
- package/docs/assets/index.css +1 -1
- package/docs/assets/index.js +7 -7
- package/docs/assets/index2.js +119 -35
- package/docs/assets/index3.js +22 -15
- package/docs/assets/index4.js +1 -1
- package/docs/assets/index5.js +4 -2
- package/docs/assets/install.js +4 -4
- package/docs/assets/selects.js +1 -1
- package/package.json +2 -2
- package/src/docs/app.vue +2 -1
- package/src/docs/pages/data.vue +4 -0
- package/src/docs/pages/events/search.vue +29 -15
- package/src/docs/pages/frameworks/vue.vue +3 -1
- package/src/docs/pages/home.vue +104 -57
- package/src/docs/pages/settings/closable.vue +128 -0
- package/src/docs/pages/settings/index.vue +6 -3
- package/src/docs/pages/settings/select_all.vue +88 -0
- package/src/slim-select/index.ts +3 -1
- package/src/slim-select/render.ts +164 -34
- package/src/slim-select/select.ts +35 -27
- package/src/slim-select/settings.ts +0 -4
- package/src/slim-select/slimselect.scss +112 -11
- package/src/slim-select/store.ts +19 -1
- package/src/vue/README.md +48 -0
- package/src/vue/dist/slimselectvue.es.js +148 -51
- package/src/vue/dist/slimselectvue.global.js +148 -51
- package/src/vue/dist/slimselectvue.ssr.js +148 -51
- package/src/vue/package.json +3 -2
- package/src/docs/pages/settings/select_by_group.vue +0 -46
package/docs/assets/index3.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as _,S as
|
|
1
|
+
import{d as _,S as i,_ as g,o as l,c as r,f as s,t as d,i as v,a as e,F as y,j as O,k as V,O as M,r as p,b as f}from"./index.js";const A=_({name:"Error",data(){return{errorSingle:null,errMsg:""}},mounted(){this.errorSingle=new i({select:this.$refs.errorSingle,events:{error:t=>{this.errMsg=t.message}}})}}),k={id:"error",class:"content"},j=e("h2",{class:"header"},"error",-1),F=e("p",null,"The error event is fired when an error occurs. The error message is passed as the first argument.",-1),T=e("div",{class:"alert info"}," If you are are having issues with slim select finding the select element. Try delaying new SlimSelect() call as the select dom element might not be available yet. ",-1),E={key:0},x=e("b",null,"Error:",-1),B={class:"row"},D={ref:"notError"},L=e("option",{value:"1"},"Option 1",-1),N=e("option",{value:"2"},"Option 2",-1),P=e("option",{value:"3"},"Option 3",-1),R=[L,N,P],H=e("pre",null,[s(" "),e("code",{class:"language-javascript"},`
|
|
2
2
|
var select = new SlimSelect({
|
|
3
3
|
select: '#selectElement',
|
|
4
4
|
events: {
|
|
@@ -8,7 +8,7 @@ import{d as _,S as r,_ as g,o as a,c as l,f as s,t as d,i as v,a as e,F as O,j a
|
|
|
8
8
|
}
|
|
9
9
|
})
|
|
10
10
|
`),s(`
|
|
11
|
-
`)],-1);function
|
|
11
|
+
`)],-1);function I(t,n,c,h,u,o){return l(),r("div",k,[j,F,T,t.errMsg!==""?(l(),r("div",E,[x,s(" "+d(t.errMsg),1)])):v("",!0),e("div",B,[e("select",D,R,512)]),H])}const J=g(A,[["render",I]]),U=_({name:"BeforeAfterChange",data(){return{beforeChangeSingle:[],beforeChangeMultiple:[],afterChangeSingle:[],afterChangeMultiple:[]}},mounted(){new i({select:this.$refs.beforeChangeSingle,settings:{allowDeselect:!0},events:{beforeChange:(t,n)=>(this.beforeChangeSingle=n,!0)}}),new i({select:this.$refs.beforeChangeMultiple,events:{beforeChange:(t,n)=>(this.beforeChangeMultiple=n,!0)}}),new i({select:this.$refs.afterChangeSingle,settings:{allowDeselect:!0},events:{afterChange:t=>{this.afterChangeSingle=t}}}),new i({select:this.$refs.afterChangeMultiple,events:{afterChange:t=>{this.afterChangeMultiple=t}}})}}),z={id:"beforeChange",class:"content"},q=e("h2",{class:"header"},"beforeChange",-1),G=e("p",null," beforeOnChange will trigger a callback on an option click and will allow you the ability to halt if the value it produces isnt to your liking. In order to stop the change from happening just return false on the callback. Returning nothing or true will allow it to continue as normal. ",-1),K=e("div",{class:"alert info"}," Be sure to return true to allow for the change to happen. False or nothing to cancel change. ",-1),Q={key:0},W={ref:"beforeChangeSingle"},X=e("option",{"data-placeholder":"true"},"Select Option",-1),Y=e("option",{value:"value1"},"Value 1",-1),Z=e("option",{value:"value2"},"Value 2",-1),ee=e("option",{value:"value3"},"Value 3",-1),te=[X,Y,Z,ee],ne=e("br",null,null,-1),se={key:1},oe={ref:"beforeChangeMultiple",multiple:""},ae=e("option",{value:"value1",selected:""},"Value 1",-1),le=e("option",{value:"value2"},"Value 2",-1),re=e("option",{value:"value3"},"Value 3",-1),ie=[ae,le,re],ce=e("pre",null,[s(" "),e("code",{class:"language-javascript"},`
|
|
12
12
|
new SlimSelect({
|
|
13
13
|
select: '#selectElement',
|
|
14
14
|
events: {
|
|
@@ -19,7 +19,7 @@ import{d as _,S as r,_ as g,o as a,c as l,f as s,t as d,i as v,a as e,F as O,j a
|
|
|
19
19
|
}
|
|
20
20
|
})
|
|
21
21
|
`),s(`
|
|
22
|
-
`)],-1),
|
|
22
|
+
`)],-1),he={id:"afterChange",class:"content"},ue=e("h2",{class:"header"},"afterChange",-1),de=e("p",null,"afterChange will trigger a callback after the value of the select dropdown has changed.",-1),_e={key:0},pe={ref:"afterChangeSingle"},fe=e("option",{"data-placeholder":"true"},"Select Option",-1),ge=e("option",{value:"value1"},"Value 1",-1),ve=e("option",{value:"value2"},"Value 2",-1),me=e("option",{value:"value3"},"Value 3",-1),$e=[fe,ge,ve,me],be=e("br",null,null,-1),Se={key:1},Ce={ref:"afterChangeMultiple",multiple:""},we=e("option",{value:"value1",selected:""},"Value 1",-1),Oe=e("option",{value:"value2"},"Value 2",-1),ye=e("option",{value:"value3"},"Value 3",-1),Ve=[we,Oe,ye],Me=e("pre",null,[s(" "),e("code",{class:"language-javascript"},`
|
|
23
23
|
new SlimSelect({
|
|
24
24
|
select: '#selectElement',
|
|
25
25
|
events: {
|
|
@@ -29,7 +29,7 @@ import{d as _,S as r,_ as g,o as a,c as l,f as s,t as d,i as v,a as e,F as O,j a
|
|
|
29
29
|
}
|
|
30
30
|
})
|
|
31
31
|
`),s(`
|
|
32
|
-
`)],-1);function
|
|
32
|
+
`)],-1);function Ae(t,n,c,h,u,o){return l(),r(y,null,[e("div",z,[q,G,K,t.beforeChangeSingle?(l(),r("div",Q,[e("strong",null,"Before change: "+d(t.beforeChangeSingle),1)])):v("",!0),e("select",W,te,512),ne,t.beforeChangeMultiple?(l(),r("div",se,[e("strong",null,"Before change: "+d(t.beforeChangeMultiple),1)])):v("",!0),e("select",oe,ie,512),ce]),e("div",he,[ue,de,t.afterChangeSingle?(l(),r("div",_e,[e("strong",null,"After change: "+d(t.afterChangeSingle),1)])):v("",!0),e("select",pe,$e,512),be,t.afterChangeMultiple?(l(),r("div",Se,[e("strong",null,"After change: "+d(t.afterChangeMultiple),1)])):v("",!0),e("select",Ce,Ve,512),Me])],64)}const ke=g(U,[["render",Ae]]),je=_({name:"BeForeAfterOpenClose",data(){return{beforeAfterOpenCloseSingle:null,singleState:"",beforeAfterOpenCloseMultiple:null,multipleState:""}},mounted(){this.beforeAfterOpenCloseSingle=new i({select:this.$refs.beforeAfterOpenCloseSingle,events:{beforeOpen:()=>{this.setState("single","beforeOpen")},afterOpen:()=>{this.setState("single","afterOpen")},beforeClose:()=>{this.setState("single","beforeClose")},afterClose:()=>{this.setState("single","afterClose")}}}),this.beforeAfterOpenCloseMultiple=new i({select:this.$refs.beforeAfterOpenCloseMultiple,events:{beforeOpen:()=>{this.setState("multiple","beforeOpen")},afterOpen:()=>{this.setState("multiple","afterOpen")},beforeClose:()=>{this.setState("multiple","beforeClose")},afterClose:()=>{this.setState("multiple","afterClose")}}})},methods:{setState(t,n){t==="single"?this.singleState=n:this.multipleState=n,setTimeout(()=>{t==="single"?this.singleState="":this.multipleState=""},1e3)}}}),Fe={id:"open",class:"content"},Te=e("h2",{class:"header"},"beforeOpen / afterOpen / beforeClose / afterClose",-1),Ee=e("p",null," The beforeOpen, afterOpen, beforeClose, and afterClose events will fire before and after the select is opened and closed. ",-1),xe={class:"row"},Be={ref:"beforeAfterOpenCloseSingle"},De=e("option",{value:"value1"},"Value 1",-1),Le=e("option",{value:"value2"},"Value 2",-1),Ne=e("option",{value:"value3"},"Value 3",-1),Pe=[De,Le,Ne],Re={ref:"beforeAfterOpenCloseMultiple",multiple:""},He=e("option",{value:"value1"},"Value 1",-1),Ie=e("option",{value:"value2"},"Value 2",-1),Je=e("option",{value:"value3"},"Value 3",-1),Ue=[He,Ie,Je],ze=e("pre",null,[s(" "),e("code",{class:"language-javascript"},`
|
|
33
33
|
var select = new SlimSelect({
|
|
34
34
|
select: '#selectElement',
|
|
35
35
|
events: {
|
|
@@ -48,7 +48,7 @@ import{d as _,S as r,_ as g,o as a,c as l,f as s,t as d,i as v,a as e,F as O,j a
|
|
|
48
48
|
},
|
|
49
49
|
})
|
|
50
50
|
`),s(`
|
|
51
|
-
`)],-1);function
|
|
51
|
+
`)],-1);function qe(t,n,c,h,u,o){return l(),r("div",Fe,[Te,Ee,e("div",xe,[e("div",null,[e("div",null,"State: "+d(t.singleState),1),e("select",Be,Pe,512)]),e("div",null,[e("div",null,"State: "+d(t.multipleState),1),e("select",Re,Ue,512)])]),ze])}const Ge=g(je,[["render",qe]]),Ke={id:"search",class:"content"},Qe=e("h2",{class:"header"},"search",-1),We=e("p",null,[s(" Slim select allows you to syncronize result values from your promise response."),e("br"),s(" Call callback() method with slimselect data, false or string with specific string. ")],-1),Xe={class:"row"},Ye=e("pre",null,[s(" "),e("code",{class:"language-javascript"},`
|
|
52
52
|
new SlimSelect({
|
|
53
53
|
select: '#selectElement',
|
|
54
54
|
events: {
|
|
@@ -76,13 +76,20 @@ import{d as _,S as r,_ as g,o as a,c as l,f as s,t as d,i as v,a as e,F as O,j a
|
|
|
76
76
|
})
|
|
77
77
|
.then((response) => response.json())
|
|
78
78
|
.then((data) => {
|
|
79
|
-
// Take data and
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
79
|
+
// Take the data and create an array of options
|
|
80
|
+
// excluding any that are already selected in currentData
|
|
81
|
+
const options = data
|
|
82
|
+
.filter((person) => {
|
|
83
|
+
return !currentData.some((optionData) => {
|
|
84
|
+
return optionData.value === \`\${person.first_name} \${person.last_name}\`
|
|
85
|
+
})
|
|
86
|
+
})
|
|
87
|
+
.map((person) => {
|
|
88
|
+
return {
|
|
89
|
+
text: \`\${person.first_name} \${person.last_name}\`,
|
|
90
|
+
value: \`\${person.first_name} \${person.last_name}\`,
|
|
91
|
+
}
|
|
92
|
+
})
|
|
86
93
|
|
|
87
94
|
resolve(options)
|
|
88
95
|
})
|
|
@@ -91,7 +98,7 @@ import{d as _,S as r,_ as g,o as a,c as l,f as s,t as d,i as v,a as e,F as O,j a
|
|
|
91
98
|
}
|
|
92
99
|
})
|
|
93
100
|
`),s(`
|
|
94
|
-
`)],-1),
|
|
101
|
+
`)],-1),Ze=_({__name:"search",setup(t){let n=[],c=O(null),h=O(null);fetch("https://api.gofakeit.com/json",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({type:"array",rowcount:1e3,indent:!1,fields:[{name:"first_name",function:"firstname",params:{}},{name:"last_name",function:"lastname",params:{}}]})}).then(o=>o.json()).then(o=>{n=o}),V(()=>{new i({select:c.value,settings:{placeholderText:"Search First or Last Name",searchingText:"Searching Users...",searchHighlight:!0},events:{search:u}}),new i({select:h.value,settings:{placeholderText:"Search First or Last Name",searchingText:"Searching Users...",searchHighlight:!0},events:{search:u}})});function u(o,m){return new Promise((S,$)=>{if(o.length<2)return $("Search must be at least 2 characters");const b=n.filter(a=>a.first_name.toLowerCase().includes(o.toLowerCase())||a.last_name.toLowerCase().includes(o.toLowerCase()));if(b.length===0)return $("No results found");const C=b.filter(a=>!m.some(w=>w instanceof M&&w.value===`${a.first_name} ${a.last_name}`)).map(a=>({text:`${a.first_name} ${a.last_name}`,value:`${a.first_name} ${a.last_name}`}));setTimeout(()=>{S(C)},300)})}return(o,m)=>(l(),r("div",Ke,[Qe,We,e("div",Xe,[e("select",{ref_key:"searchSingle",ref:c},null,512),e("select",{ref_key:"searchMultiple",ref:h,multiple:""},null,512)]),Ye]))}}),et=_({name:"SearchFilter",mounted(){new i({select:this.$refs.searchFilter,events:{searchFilter:(t,n)=>t.text.substr(0,n.length)===n}})}}),tt={id:"searchFilter",class:"content"},nt=e("h2",{class:"header"},"searchFilter",-1),st=e("p",null,"searchFilter event is used to replace the default matching algorithm.",-1),ot=e("p",null,[s("See Data for the proper object interface of "),e("em",null,"option"),s(".")],-1),at={ref:"searchFilter"},lt=e("option",{value:"apple"},"Apple",-1),rt=e("option",{value:"orange"},"Orange",-1),it=e("option",{value:"pineapple"},"Pineapple",-1),ct=[lt,rt,it],ht=e("pre",null,[s(" "),e("code",{class:"language-javascript"},`
|
|
95
102
|
new SlimSelect({
|
|
96
103
|
select: '#selectElement',
|
|
97
104
|
events: {
|
|
@@ -102,7 +109,7 @@ import{d as _,S as r,_ as g,o as a,c as l,f as s,t as d,i as v,a as e,F as O,j a
|
|
|
102
109
|
}
|
|
103
110
|
})
|
|
104
111
|
`),s(`
|
|
105
|
-
`)],-1);function
|
|
112
|
+
`)],-1);function ut(t,n,c,h,u,o){return l(),r("div",tt,[nt,st,ot,e("select",at,ct,512),ht])}const dt=g(et,[["render",ut]]),_t=_({name:"Addable",mounted(){new i({select:this.$refs.addableSingle,events:{addable:t=>({text:t,value:t.toLowerCase()})}}),new i({select:this.$refs.addableMultiple,events:{addable:t=>new Promise(n=>{setTimeout(()=>{n({text:t,value:t})},100)})}})}}),pt={id:"addable",class:"content"},ft=e("h2",{class:"header"},"addable",-1),gt=e("p",null,"Slim select has the ability to dynamically add options via the search input field",-1),vt=e("p",null," addable is a callback which takes a function parameter. The return value can either be a string or an option object. ",-1),mt={class:"row"},$t={ref:"addableSingle"},bt=e("option",{value:"value1"},"Value 1",-1),St=e("option",{value:"value2"},"Value 2",-1),Ct=e("option",{value:"value3"},"Value 3",-1),wt=[bt,St,Ct],Ot={ref:"addableMultiple",multiple:""},yt=e("option",{value:"value1"},"Value 1",-1),Vt=e("option",{value:"value2"},"Value 2",-1),Mt=e("option",{value:"value3"},"Value 3",-1),At=[yt,Vt,Mt],kt=e("pre",null,[s(" "),e("code",{class:"language-javascript"},`
|
|
106
113
|
new SlimSelect({
|
|
107
114
|
select: '#selectElement',
|
|
108
115
|
|
|
@@ -132,4 +139,4 @@ import{d as _,S as r,_ as g,o as a,c as l,f as s,t as d,i as v,a as e,F as O,j a
|
|
|
132
139
|
}
|
|
133
140
|
})
|
|
134
141
|
`),s(`
|
|
135
|
-
`)],-1);function
|
|
142
|
+
`)],-1);function jt(t,n,c,h,u,o){return l(),r("div",pt,[ft,gt,vt,e("div",mt,[e("select",$t,wt,512),e("select",Ot,At,512)]),kt])}const Ft=g(_t,[["render",jt]]),Tt=_({name:"Events",components:{Error:J,BeforeAfterChange:ke,BeforeAfterOpenClose:Ge,Search:Ze,SearchFilter:dt,Addable:Ft}}),Et={id:"events",class:"contents"};function xt(t,n,c,h,u,o){const m=p("Error"),S=p("BeforeAfterChange"),$=p("BeforeAfterOpenClose"),b=p("Search"),C=p("SearchFilter"),a=p("Addable");return l(),r("div",Et,[f(m),f(S),f($),f(b),f(C),f(a)])}const Dt=g(Tt,[["render",xt]]);export{Dt as default};
|
package/docs/assets/index4.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as u,S as i,_ as r,o,c as a,a as e,f as l,t as $,i as g,
|
|
1
|
+
import{d as u,S as i,_ as r,o,c as a,a as e,f as l,t as $,i as g,e as y,r as c,b as d,w}from"./index.js";const M=u({name:"GetSelected",data(){return{selectedSingle:null,selectedSingleValue:[],selectedMultiple:null,selectedMultipleValue:[]}},mounted(){this.selectedSingle=new i({select:this.$refs.selectedSingle}),this.selectedMultiple=new i({select:this.$refs.selectedMultiple})},methods:{getSelected(){this.selectedSingleValue=this.selectedSingle.getSelected(),this.selectedMultipleValue=this.selectedMultiple.getSelected()}}}),E={id:"getSelected",class:"content"},k=e("h2",{class:"header"},"getSelected",-1),O=e("p",null,"The getSelected method will return an array of the currently selected value strings.",-1),C=e("div",{class:"alert info"}," Whether or not its a single or multiple select, getSelected will always return an array. ",-1),G={class:"row"},T={ref:"selectedSingle"},j=e("option",{value:"value1"},"Value 1",-1),N=e("option",{value:"value2"},"Value 2",-1),B=e("option",{value:"value3"},"Value 3",-1),W=[j,N,B],I={key:0,class:"pad-t-m pad-b-m"},A=e("b",null,"Single Select Value:",-1),J={ref:"selectedMultiple",multiple:""},P=e("option",{value:"value1"},"Value 1",-1),Y=e("option",{value:"value2",selected:""},"Value 2",-1),q=e("option",{value:"value3",selected:""},"Value 3",-1),z=[P,Y,q],F={key:0,class:"pad-t-m pad-b-m"},H=e("b",null,"Multi Select Value:",-1),K=e("pre",null,[l(" "),e("code",{class:"language-javascript"},`
|
|
2
2
|
var select = new SlimSelect({
|
|
3
3
|
select: '#selectElement'
|
|
4
4
|
})
|
package/docs/assets/index5.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as m,S as O,_,o as c,c as d,l as y,g,a as e,
|
|
1
|
+
import{d as m,S as O,_,o as c,c as d,l as y,r as g,a as e,b as s,w as i,f as n,t as r,i as C,F as S,h as f}from"./index.js";const b=m({name:"SlimSelect",props:{data:{type:Array},settings:{type:Object},events:{type:Object}},data(){return{slim:null}},mounted(){let t={select:this.$refs.slim};this.data&&(t.data=this.data),this.settings&&(t.settings=this.settings),this.events&&(t.events=this.events),this.slim=new O(t)},beforeUnmount(){this.slim&&this.slim.destroy()},watch:{data:{handler:function(t){this.slim&&this.slim.setData(t)},deep:!0}},methods:{getSlimSelect(){return this.slim}}}),w={ref:"slim"};function D(t,o,p,u,h,v){return c(),d("select",w,[y(t.$slots,"default")],512)}const $=_(b,[["render",D]]),V=m({name:"Vue",components:{SlimSelect:$},data(){return{settings:{showSearch:!1},data:[{value:"value1",text:"Value 1"},{value:"value2",text:"Value 2"},{value:"value3",text:"Value 3"}],dynamicData:[],afterChangeData:[],events:{afterChange:this.afterChange}}},mounted(){},methods:{changeData(){this.$refs.dataSingle.getSlimSelect().open(),this.$refs.dataMultiple.getSlimSelect().open(),setTimeout(()=>{this.data=[{value:"value4",text:"Value 4"},{value:"value5",text:"Value 5"},{value:"value6",text:"Value 6"}]},500)},afterChange(t){this.afterChangeData=t},randomDynamicData(){fetch("https://api.gofakeit.com/json",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({type:"array",rowcount:20,indent:!1,fields:[{name:"key",function:"password",params:{lower:!0,upper:!0,numeric:!0,special:!1,space:!1,length:10}},{name:"first_name",function:"firstname",params:{}},{name:"last_name",function:"lastname",params:{}},{name:"selected",function:"number",params:{min:1,max:10}}]})}).then(t=>t.json()).then(t=>{this.dynamicData=t.map(o=>({id:o.id,text:`${o.first_name} ${o.last_name}`,value:`${o.first_name} ${o.last_name}`,selected:o.selected>=8}))})}}}),j={id:"vue",class:"content"},x=e("h2",{class:"header"},"Vue",-1),k=e("h3",null,"Install",-1),M=e("p",null,"The vue component is in a sub package under SlimSelect",-1),T=e("pre",null,[n(" "),e("code",{class:"language-bash"},`
|
|
2
2
|
npm install @slim-select/vue
|
|
3
3
|
`),n(`
|
|
4
4
|
`)],-1),N=e("br",null,null,-1),B=e("h3",null,"Simple example",-1),E={class:"row"},F=e("option",{value:"1"},"Option 1",-1),R=e("option",{value:"2"},"Option 2",-1),A=e("option",{value:"3"},"Option 3",-1),I=e("option",{value:"1"},"Option 1",-1),J=e("option",{value:"2"},"Option 2",-1),L=e("option",{value:"3"},"Option 3",-1),P=e("pre",null,[n(" "),e("code",{class:"language-javascript"},`
|
|
@@ -88,7 +88,9 @@ import{d as m,S as O,_,o as c,c as d,l as y,g,a as e,h as s,w as i,f as n,t as r
|
|
|
88
88
|
},
|
|
89
89
|
data() {
|
|
90
90
|
return {
|
|
91
|
-
|
|
91
|
+
events: {
|
|
92
|
+
afterChange: this.afterChange,
|
|
93
|
+
},
|
|
92
94
|
}
|
|
93
95
|
},
|
|
94
96
|
methods: {
|
package/docs/assets/install.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{g as M,d as $,_ as I,o as O,c as V,a as o,f as B,t as E,e as L}from"./index.js";var R={exports:{}};(function(d,w){(function(y,v){d.exports=v()})(M,function(){return function y(v,k,j){var n=window,p="application/octet-stream",r=j||p,e=v,c=!k&&!j&&e,t=document.createElement("a"),_=function(s){return String(s)},i=n.Blob||n.MozBlob||n.WebKitBlob||_,m=k||"download",l,S;if(i=i.call?i.bind(n):Blob,String(this)==="true"&&(e=[e,r],r=e[0],e=e[1]),c&&c.length<2048&&(m=c.split("/").pop().split("?")[0],t.href=c,t.href.indexOf(c)!==-1)){var u=new XMLHttpRequest;return u.open("GET",c,!0),u.responseType="blob",u.onload=function(s){y(s.target.response,m,p)},setTimeout(function(){u.send()},0),u}if(/^data:([\w+-]+\/[\w+.-]+)?[,;]/.test(e))if(e.length>1024*1024*1.999&&i!==_)e=x(e),r=e.type||p;else return navigator.msSaveBlob?navigator.msSaveBlob(x(e),m):f(e);else if(/([\x80-\xff])/.test(e)){var b=0,C=new Uint8Array(e.length),N=C.length;for(b;b<N;++b)C[b]=e.charCodeAt(b);e=new i([C],{type:r})}l=e instanceof i?e:new i([e],{type:r});function x(s){var a=s.split(/[:;,]/),h=a[1],A=a[2]=="base64"?atob:decodeURIComponent,D=A(a.pop()),U=D.length,g=0,T=new Uint8Array(U);for(g;g<U;++g)T[g]=D.charCodeAt(g);return new i([T],{type:h})}function f(s,a){if("download"in t)return t.href=s,t.setAttribute("download",m),t.className="download-js-link",t.innerHTML="downloading...",t.style.display="none",document.body.appendChild(t),setTimeout(function(){t.click(),document.body.removeChild(t),a===!0&&setTimeout(function(){n.URL.revokeObjectURL(t.href)},250)},66),!0;if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent))return/^data:/.test(s)&&(s="data:"+s.replace(/^data:([\w\/\-\+]+)/,p)),window.open(s)||confirm(`Displaying New Document
|
|
2
2
|
|
|
3
|
-
Use Save As... to download, then click back to return to this page.`)&&(location.href=s),!0;var h=document.createElement("iframe");document.body.appendChild(h),!a&&/^data:/.test(s)&&(s="data:"+s.replace(/^data:([\w\/\-\+]+)/,p)),h.src=s,setTimeout(function(){document.body.removeChild(h)},333)}if(navigator.msSaveBlob)return navigator.msSaveBlob(l,m);if(n.URL)f(n.URL.createObjectURL(l),!0);else{if(typeof l=="string"||l.constructor===_)try{return f("data:"+r+";base64,"+n.btoa(l))}catch{return f("data:"+r+","+encodeURIComponent(l))}S=new FileReader,S.onload=function(s){f(this.result)},S.readAsDataURL(l)}return!0}})})(R);const H=R.exports,G="slim-select",J="Slim advanced select dropdown",q="2.
|
|
3
|
+
Use Save As... to download, then click back to return to this page.`)&&(location.href=s),!0;var h=document.createElement("iframe");document.body.appendChild(h),!a&&/^data:/.test(s)&&(s="data:"+s.replace(/^data:([\w\/\-\+]+)/,p)),h.src=s,setTimeout(function(){document.body.removeChild(h)},333)}if(navigator.msSaveBlob)return navigator.msSaveBlob(l,m);if(n.URL)f(n.URL.createObjectURL(l),!0);else{if(typeof l=="string"||l.constructor===_)try{return f("data:"+r+";base64,"+n.btoa(l))}catch{return f("data:"+r+","+encodeURIComponent(l))}S=new FileReader,S.onload=function(s){f(this.result)},S.readAsDataURL(l)}return!0}})})(R);const H=R.exports,G="slim-select",J="Slim advanced select dropdown",q="2.2.0",z="Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",F="https://slimselectjs.com",K="MIT",W={url:"https://github.com/brianvoe/slim-select/issues"},X="dist/slimselect.ssr.js",P="dist/slimselect.umd.js",Q="dist/slimselect.es.js",Y="dist/slimselect.umd.min.js",Z="dist/index.d.ts",ee="dist/index.d.ts",se="dist/slimselect.css",te="src/slim-select/slimselect.scss",ne=["src/vue"],oe={type:"git",url:"git+https://github.com/brianvoe/slim-select.git"},ie=["select","vanilla","dropdown","search","multiselect"],le={dev:"vite --port=1111",format:'prettier --write --cache --parser typescript "src/**/*.ts"',build:"npm run build:clean && npm run build:docs && npm run build:library && npm run build:frameworks","build:clean":"rimraf ./dist/*","build:docs":"vite build","build:library":"npm run build:library:js && npm run build:library:css","build:library:js":"cd src/slim-select && rollup --config ./rollup.config.mjs && cd ../../","build:library:css":"cd src/slim-select && sass ./slimselect.scss ../../dist/slimselect.css --style=compressed && cd ../../","build:frameworks":"npm run build --workspaces",publish:"npm publish && npm publish --workspace=src/vue --access public",test:"jest"},re={"@jest/globals":"^29.3.1","@rollup/plugin-babel":"^6.0.2","@rollup/plugin-commonjs":"^23.0.2","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.1.0","@rollup/plugin-typescript":"^9.0.2","@slim-select/vue":"workspace:src/vue","@types/downloadjs":"^1.4.3","@vitejs/plugin-vue":"^3.2.0",clipboard:"^2.0.11",downloadjs:"^1.4.7",jest:"^29.3.1","jest-environment-jsdom":"^29.3.1",prettier:"^2.7.1",prismjs:"^1.29.0",rimraf:"^3.0.2",rollup:"^2.79.1","rollup-plugin-typescript2":"^0.34.1","rollup-plugin-vue":"^6.0.0",sass:"^1.56.1","ts-jest":"^29.0.3",tslib:"^2.4.1",typescript:"^4.9.3",vite:"^3.2.4",vue:"^3.2.45","vue-router":"^4.1.6","vue-tsc":"^1.0.9",vuex:"^4.0.2"},ce={name:G,description:J,version:q,author:z,homepage:F,license:K,bugs:W,main:X,browser:P,module:Q,unpkg:Y,types:Z,typings:ee,style:se,sass:te,workspaces:ne,repository:oe,keywords:ie,scripts:le,devDependencies:re},ae=$({name:"Install",data:()=>({version:ce.version}),methods:{downloadLink(){H(`https://cdnjs.cloudflare.com/ajax/libs/slim-select/${this.version}/slimselect.min.js`)}}}),de={id:"install",class:"contents"},pe=L(`<div id="npm" class="content"><h2>Npm</h2><p>Most common usage is npm</p><pre class="install-code"> <code class="language-bash">
|
|
4
4
|
npm install slim-select
|
|
5
5
|
</code>
|
|
6
6
|
</pre><pre class="example-code"> <code class="language-javascript">
|
|
@@ -10,7 +10,7 @@ Use Save As... to download, then click back to return to this page.`)&&(location
|
|
|
10
10
|
select: '#selectElement'
|
|
11
11
|
})
|
|
12
12
|
</code>
|
|
13
|
-
</pre></div>`,1),me={id:"cdn",class:"content"},ue=L('<h2>Cdn</h2><p> Cdn has a url link you can grab. Cdn exists on both <a target="_blank" href="https://cdnjs.com">cdnjs.com</a> and <a target="_blank" href="https://unpkg.com">unpkg.com</a></p><p> See full list of available options.<br><strong>cdnjs</strong> - <a target="_blank" href="https://cdnjs.com/libraries/slim-select">cdnjs.com/libraries/slim-select</a><br><strong>unpkg</strong> - <a target="_blank" href="https://unpkg.com/browse/slim-select/dist/">https://unpkg.com/browse/slim-select/dist/</a></p><ul><li>slimselct.js - UMD unminified</li><li>slimselct.min.js - UMD minified</li><li>slimselect.cjs.js - CommonJS (for Node) and ES module (for bundlers) build</li><li>slimselect.umd.js - UMD build for browsers</li><li>slimselect.es.js - ES module build for modern browsers</li><li>slimselect.global.js - IIFE build for modern browsers</li></ul><div class="alert info">New releases may be delayed until the next time its indexed</div>',5),be={class:"install-code"},fe={class:"language-html"},he={id:"download",class:"content"},ge=o("h2",null,"Download",-1),ve=o("p",null,"Download the latest minified umd version of slim select",-1),we=o("p",null,[B(" See full list of available downloadable options. "),o("a",{target:"_blank",href:"https://cdnjs.com/libraries/slim-select"},"cdnjs.com/libraries/slim-select")],-1);function ye(d,w,y,v,j
|
|
13
|
+
</pre></div>`,1),me={id:"cdn",class:"content"},ue=L('<h2>Cdn</h2><p> Cdn has a url link you can grab. Cdn exists on both <a target="_blank" href="https://cdnjs.com">cdnjs.com</a> and <a target="_blank" href="https://unpkg.com">unpkg.com</a></p><p> See full list of available options.<br><strong>cdnjs</strong> - <a target="_blank" href="https://cdnjs.com/libraries/slim-select">cdnjs.com/libraries/slim-select</a><br><strong>unpkg</strong> - <a target="_blank" href="https://unpkg.com/browse/slim-select/dist/">https://unpkg.com/browse/slim-select/dist/</a></p><ul><li>slimselct.js - UMD unminified</li><li>slimselct.min.js - UMD minified</li><li>slimselect.cjs.js - CommonJS (for Node) and ES module (for bundlers) build</li><li>slimselect.umd.js - UMD build for browsers</li><li>slimselect.es.js - ES module build for modern browsers</li><li>slimselect.global.js - IIFE build for modern browsers</li></ul><div class="alert info">New releases may be delayed until the next time its indexed</div>',5),be={class:"install-code"},fe={class:"language-html"},he={id:"download",class:"content"},ge=o("h2",null,"Download",-1),ve=o("p",null,"Download the latest minified umd version of slim select",-1),we=o("p",null,[B(" See full list of available downloadable options. "),o("a",{target:"_blank",href:"https://cdnjs.com/libraries/slim-select"},"cdnjs.com/libraries/slim-select")],-1);function ye(d,w,y,v,k,j){return O(),V("div",de,[pe,o("div",me,[ue,o("pre",be,[B(" "),o("code",fe,`
|
|
14
14
|
<html>
|
|
15
15
|
<head>
|
|
16
16
|
<script src="unpkg.com/slim-select@`+E(d.version)+`/dist/slimselect.min.js"><\/script>
|
|
@@ -31,4 +31,4 @@ Use Save As... to download, then click back to return to this page.`)&&(location
|
|
|
31
31
|
</body>
|
|
32
32
|
</html>
|
|
33
33
|
`,1),B(`
|
|
34
|
-
`)])]),o("div",he,[ge,ve,we,o("div",{class:"btn",onClick:w[0]||(w[0]=n=>d.downloadLink())},"Click Here To Download")])])}const
|
|
34
|
+
`)])]),o("div",he,[ge,ve,we,o("div",{class:"btn",onClick:w[0]||(w[0]=n=>d.downloadLink())},"Click Here To Download")])])}const je=I(ae,[["render",ye]]);export{je as default};
|
package/docs/assets/selects.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as c,S as p,_ as v,o as a,c as s,a as e,F as n,
|
|
1
|
+
import{d as c,S as p,_ as v,o as a,c as s,a as e,F as n,h as i,f as l,t as r}from"./index.js";const b=c({name:"Selects",data(){return{states:[{abv:"AL",state:"Alabama"},{abv:"AK",state:"Alaska"},{abv:"AZ",state:"Arizona"},{abv:"AR",state:"Arkansas"},{abv:"CA",state:"California"},{abv:"CO",state:"Colorado"},{abv:"CT",state:"Connecticut"},{abv:"DE",state:"Delaware"},{abv:"FL",state:"Florida"},{abv:"GA",state:"Georgia"},{abv:"HI",state:"Hawaii"},{abv:"ID",state:"Idaho"},{abv:"IL",state:"Illinois"},{abv:"IN",state:"Indiana"},{abv:"IA",state:"Iowa"},{abv:"KS",state:"Kansas"},{abv:"KY",state:"Kentucky"},{abv:"LA",state:"Louisiana"},{abv:"ME",state:"Maine"},{abv:"MD",state:"Maryland"},{abv:"MA",state:"Massachusetts"},{abv:"MI",state:"Michigan"},{abv:"MN",state:"Minnesota"},{abv:"MS",state:"Mississippi"},{abv:"MO",state:"Missouri"},{abv:"MT",state:"Montana"},{abv:"NE",state:"Nebraska"},{abv:"NV",state:"Nevada"},{abv:"NH",state:"New Hampshire"},{abv:"NJ",state:"New Jersey"},{abv:"NM",state:"New Mexico"},{abv:"NY",state:"New York"},{abv:"NC",state:"North Carolina"},{abv:"ND",state:"North Dakota"},{abv:"OH",state:"Ohio"},{abv:"OK",state:"Oklahoma"},{abv:"OR",state:"Oregon"},{abv:"PA",state:"Pennsylvania"},{abv:"RI",state:"Rhode Island"},{abv:"SC",state:"South Carolina"},{abv:"SD",state:"South Dakota"},{abv:"TN",state:"Tennessee",selected:!0},{abv:"TX",state:"Texas"},{abv:"UT",state:"Utah"},{abv:"VT",state:"Vermont"},{abv:"VA",state:"Virginia"},{abv:"WA",state:"Washington"},{abv:"WV",state:"West Virginia"},{abv:"WI",state:"Wisconsin"},{abv:"WY",state:"Wyoming"}],foods:[{label:"Dairy",options:["Milk","Cheese","Butter","Ice Cream"]},{label:"Meat",options:["Beef","Ham","Pork","Sausage","Chicken","Turkey"]},{label:"Fruits",options:["Apple","Banana","Grape","Orange","Strawberry","Blueberry","Raspberry"]},{label:"Vegetables",options:["Carrot","Tomato","Broccoli","Celery","Corn","Pumpkin","Kale","Spinach"]}]}},mounted(){new p({select:this.$refs.single}),new p({select:this.$refs.singleOptgroup}),new p({select:this.$refs.multiple}),new p({select:this.$refs.multipleOptgroup}).setSelected(["Cheese","Apple","Corn"])}}),d={id:"selects",class:"contents"},h={id:"single",class:"content"},_=e("h2",{class:"header"},"Single",-1),g=e("p",null," Basic single select usage with Slim Select is extremely easy. Just set the select value to your select element. ",-1),m={class:"row"},V=e("h4",null,"Options",-1),y={ref:"single"},k=["value","selected"],M=e("h4",null,"Optgroups",-1),S={ref:"singleOptgroup"},N=["label"],O=["value"],f=e("pre",null,[l(" "),e("code",{class:"language-javascript"},`
|
|
2
2
|
new SlimSelect({
|
|
3
3
|
select: '#single'
|
|
4
4
|
})
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "slim-select",
|
|
3
3
|
"description": "Slim advanced select dropdown",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.2.0",
|
|
5
5
|
"author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
|
|
6
6
|
"homepage": "https://slimselectjs.com",
|
|
7
7
|
"license": "MIT",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"build:library:js": "cd src/slim-select && rollup --config ./rollup.config.mjs && cd ../../",
|
|
41
41
|
"build:library:css": "cd src/slim-select && sass ./slimselect.scss ../../dist/slimselect.css --style=compressed && cd ../../",
|
|
42
42
|
"build:frameworks": "npm run build --workspaces",
|
|
43
|
-
"publish": "npm publish && npm publish --
|
|
43
|
+
"publish": "npm publish && npm publish --workspace=src/vue --access public",
|
|
44
44
|
"test": "jest"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
package/src/docs/app.vue
CHANGED
|
@@ -55,7 +55,8 @@ export default defineComponent({
|
|
|
55
55
|
{ text: 'search', value: 'settings#search', class: 'mar-l-l' },
|
|
56
56
|
{ text: 'closeOnSelect', value: 'settings#closeOnSelect', class: 'mar-l-l' },
|
|
57
57
|
{ text: 'showOptionTooltips', value: 'settings#showOptionTooltips', class: 'mar-l-l' },
|
|
58
|
-
{ text: '
|
|
58
|
+
{ text: 'selectAll', value: 'settings#selectAll', class: 'mar-l-l' },
|
|
59
|
+
{ text: 'closable', value: 'settings#closable', class: 'mar-l-l' },
|
|
59
60
|
{ text: 'hideSelected', value: 'settings#hideSelected', class: 'mar-l-l' },
|
|
60
61
|
|
|
61
62
|
// Events
|
package/src/docs/pages/data.vue
CHANGED
|
@@ -49,6 +49,8 @@ export default defineComponent({
|
|
|
49
49
|
<code class="language-javascript">
|
|
50
50
|
var optgroup = {
|
|
51
51
|
label: 'label', // Required
|
|
52
|
+
selectAll: false, // Optional - default false
|
|
53
|
+
closabel: 'off', // Optional - default 'off' - 'off', 'open', 'close'
|
|
52
54
|
options: [] // Required - value is an array of options
|
|
53
55
|
}
|
|
54
56
|
|
|
@@ -57,7 +59,9 @@ export default defineComponent({
|
|
|
57
59
|
value: 'value', // Optional - value will be set by text if not set
|
|
58
60
|
html: '<b>Html</b>', // Optional - will be used for display purposes if set
|
|
59
61
|
selected: false, // Optional - default is false
|
|
62
|
+
display: true, // Optional - default is true
|
|
60
63
|
disabled: false, // Optional - default is false
|
|
64
|
+
mandatory: false, // Optional - default is false
|
|
61
65
|
placeholder: false, // Optional - default is false
|
|
62
66
|
class: '', // Optional - default is not set
|
|
63
67
|
style: '', // Optional - default is not set
|
|
@@ -60,7 +60,7 @@ onMounted(() => {
|
|
|
60
60
|
})
|
|
61
61
|
})
|
|
62
62
|
|
|
63
|
-
function searchPromise(search: string,
|
|
63
|
+
function searchPromise(search: string, currentData: DataArray): Promise<Option[]> {
|
|
64
64
|
return new Promise((resolve, reject) => {
|
|
65
65
|
if (search.length < 2) {
|
|
66
66
|
return reject('Search must be at least 2 characters')
|
|
@@ -77,13 +77,20 @@ function searchPromise(search: string, selectedData: DataArray): Promise<Option[
|
|
|
77
77
|
return reject('No results found')
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
//
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
80
|
+
// Take the results and create an array of options excluding any that are already selected in currentData
|
|
81
|
+
const options = results
|
|
82
|
+
.filter((person) => {
|
|
83
|
+
return !currentData.some((data) => {
|
|
84
|
+
// check if option has a value property
|
|
85
|
+
return data instanceof Option && data.value === `${person.first_name} ${person.last_name}`
|
|
86
|
+
})
|
|
87
|
+
})
|
|
88
|
+
.map((person) => {
|
|
89
|
+
return {
|
|
90
|
+
text: `${person.first_name} ${person.last_name}`,
|
|
91
|
+
value: `${person.first_name} ${person.last_name}`,
|
|
92
|
+
} as Option
|
|
93
|
+
})
|
|
87
94
|
|
|
88
95
|
// Simulate a slow search
|
|
89
96
|
setTimeout(() => {
|
|
@@ -135,13 +142,20 @@ function searchPromise(search: string, selectedData: DataArray): Promise<Option[
|
|
|
135
142
|
})
|
|
136
143
|
.then((response) => response.json())
|
|
137
144
|
.then((data) => {
|
|
138
|
-
// Take data and
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
+
// Take the data and create an array of options
|
|
146
|
+
// excluding any that are already selected in currentData
|
|
147
|
+
const options = data
|
|
148
|
+
.filter((person) => {
|
|
149
|
+
return !currentData.some((optionData) => {
|
|
150
|
+
return optionData.value === `${person.first_name} ${person.last_name}`
|
|
151
|
+
})
|
|
152
|
+
})
|
|
153
|
+
.map((person) => {
|
|
154
|
+
return {
|
|
155
|
+
text: `${person.first_name} ${person.last_name}`,
|
|
156
|
+
value: `${person.first_name} ${person.last_name}`,
|
|
157
|
+
}
|
|
158
|
+
})
|
|
145
159
|
|
|
146
160
|
resolve(options)
|
|
147
161
|
})
|
package/src/docs/pages/home.vue
CHANGED
|
@@ -95,41 +95,44 @@ export default defineComponent({
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
.
|
|
98
|
+
.support {
|
|
99
|
+
.links {
|
|
100
|
+
display: flex;
|
|
101
|
+
flex-direction: row;
|
|
102
|
+
gap: var(--spacing);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.features {
|
|
107
|
+
flex: 1 1 auto;
|
|
99
108
|
display: flex;
|
|
100
|
-
|
|
109
|
+
flex-direction: column;
|
|
101
110
|
|
|
102
|
-
.
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
flex-direction: column;
|
|
111
|
+
.header {
|
|
112
|
+
padding: 0 0 var(--spacing) 0;
|
|
113
|
+
}
|
|
106
114
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}
|
|
115
|
+
.row {
|
|
116
|
+
justify-content: space-around;
|
|
110
117
|
|
|
111
|
-
.
|
|
112
|
-
|
|
118
|
+
.list {
|
|
119
|
+
display: flex;
|
|
120
|
+
flex-direction: column;
|
|
121
|
+
list-style: none;
|
|
122
|
+
padding: 0px;
|
|
123
|
+
width: 200px;
|
|
124
|
+
margin: 0 auto;
|
|
113
125
|
|
|
114
|
-
|
|
126
|
+
li {
|
|
115
127
|
display: flex;
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
align-items: center;
|
|
125
|
-
padding: 0 0 5px 0;
|
|
126
|
-
font-weight: bold;
|
|
127
|
-
font-size: 20px;
|
|
128
|
-
|
|
129
|
-
img {
|
|
130
|
-
width: 20px;
|
|
131
|
-
padding: 0 8px 0 0;
|
|
132
|
-
}
|
|
128
|
+
align-items: center;
|
|
129
|
+
padding: 0 0 5px 0;
|
|
130
|
+
font-weight: bold;
|
|
131
|
+
font-size: 20px;
|
|
132
|
+
|
|
133
|
+
img {
|
|
134
|
+
width: 20px;
|
|
135
|
+
padding: 0 8px 0 0;
|
|
133
136
|
}
|
|
134
137
|
}
|
|
135
138
|
}
|
|
@@ -160,34 +163,78 @@ export default defineComponent({
|
|
|
160
163
|
</div>
|
|
161
164
|
</div>
|
|
162
165
|
|
|
163
|
-
<
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
166
|
+
<br />
|
|
167
|
+
|
|
168
|
+
<div class="support">
|
|
169
|
+
<h2 class="header">Support</h2>
|
|
170
|
+
<p>Help support creators that make development easier!</p>
|
|
171
|
+
<div class="links">
|
|
172
|
+
<iframe
|
|
173
|
+
src="https://github.com/sponsors/brianvoe/button"
|
|
174
|
+
title="Sponsor brianvoe"
|
|
175
|
+
height="35"
|
|
176
|
+
width="116"
|
|
177
|
+
style="border: 0"
|
|
178
|
+
></iframe>
|
|
179
|
+
<a href="https://www.buymeacoffee.com/brianvoe" target="_blank"
|
|
180
|
+
><img
|
|
181
|
+
src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png"
|
|
182
|
+
alt="Buy Me A Coffee"
|
|
183
|
+
style="height: auto !important; width: auto !important"
|
|
184
|
+
/></a>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<br />
|
|
189
|
+
<div class="separator" />
|
|
190
|
+
<br />
|
|
191
|
+
|
|
192
|
+
<div class="features">
|
|
193
|
+
<h2 class="header">Features</h2>
|
|
194
|
+
|
|
195
|
+
<div class="row">
|
|
196
|
+
<ul class="list">
|
|
197
|
+
<li><img src="../assets/images/check-mark.svg" /> No Dependencies</li>
|
|
198
|
+
<li><img src="../assets/images/check-mark.svg" /> ~30kb - ~5kb gzip</li>
|
|
199
|
+
<li><img src="../assets/images/check-mark.svg" /> Single Select</li>
|
|
200
|
+
<li><img src="../assets/images/check-mark.svg" /> Multiple Select</li>
|
|
201
|
+
<li><img src="../assets/images/check-mark.svg" /> Addable Options</li>
|
|
202
|
+
<li><img src="../assets/images/check-mark.svg" /> Html Options</li>
|
|
203
|
+
<li><img src="../assets/images/check-mark.svg" /> Settable Data</li>
|
|
204
|
+
<li><img src="../assets/images/check-mark.svg" /> Callback Events</li>
|
|
205
|
+
<li><img src="../assets/images/check-mark.svg" /> Placeholders</li>
|
|
206
|
+
</ul>
|
|
207
|
+
<ul class="list">
|
|
208
|
+
<li><img src="../assets/images/check-mark.svg" /> Advanced Search</li>
|
|
209
|
+
<li><img src="../assets/images/check-mark.svg" /> Tabbable</li>
|
|
210
|
+
<li><img src="../assets/images/check-mark.svg" /> Disable Options</li>
|
|
211
|
+
<li><img src="../assets/images/check-mark.svg" /> Light Css</li>
|
|
212
|
+
<li><img src="../assets/images/check-mark.svg" /> Light Color Scheme</li>
|
|
213
|
+
<li><img src="../assets/images/check-mark.svg" /> Style Inheritance</li>
|
|
214
|
+
<li><img src="../assets/images/check-mark.svg" /> Clean Animations</li>
|
|
215
|
+
<li><img src="../assets/images/check-mark.svg" /> Performant</li>
|
|
216
|
+
<li><img src="../assets/images/check-mark.svg" /> Typescript</li>
|
|
217
|
+
</ul>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<br />
|
|
222
|
+
<div class="separator" />
|
|
223
|
+
<br />
|
|
224
|
+
|
|
225
|
+
<div class="frameworks">
|
|
226
|
+
<h2 class="header">Frameworks</h2>
|
|
227
|
+
<p>
|
|
228
|
+
SlimSelect is in the process of adding a few framework integrations.<br />
|
|
229
|
+
If you are an expert in any specific framework and would like to help out, please reach out!
|
|
230
|
+
</p>
|
|
231
|
+
<div class="row frameworks">
|
|
232
|
+
<router-link to="frameworks#vue">
|
|
233
|
+
<svg viewBox="0 0 128 128" width="100" height="100">
|
|
234
|
+
<path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z"></path>
|
|
235
|
+
<path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z"></path>
|
|
236
|
+
</svg>
|
|
237
|
+
</router-link>
|
|
191
238
|
</div>
|
|
192
239
|
</div>
|
|
193
240
|
</div>
|